1 | ////
|
---|
2 | /// Applies default themes and styles.
|
---|
3 | ////
|
---|
4 |
|
---|
5 | @use "./_material.scss";
|
---|
6 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
|
---|
7 | @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
---|
8 |
|
---|
9 | *,
|
---|
10 | *::before,
|
---|
11 | *::after {
|
---|
12 | box-sizing: border-box;
|
---|
13 | }
|
---|
14 |
|
---|
15 | :root {
|
---|
16 | --monospace-font: 1rem 'Roboto Mono', sans-serif;
|
---|
17 | --page-bg-color: #f7f4f0;
|
---|
18 | --highlighted-word-bg: rgba(255, 255, 0, 0.4);
|
---|
19 |
|
---|
20 | --primary-bg-color-l1: 196, 36, 44;
|
---|
21 | --primary-bg-color: 170, 31, 37;
|
---|
22 | --primary-fg-color: 255, 255, 255;
|
---|
23 |
|
---|
24 | --accent-bg-color: 146, 27, 33;
|
---|
25 | --accent-fg-color: 255, 255, 255;
|
---|
26 |
|
---|
27 | --primary-box-shadow: 0 2px 4px 0 #524545;
|
---|
28 | --primary-box-shadow-thin: 0 1px 3px 0 #685757;
|
---|
29 |
|
---|
30 | --hover-brightness: 110%;
|
---|
31 |
|
---|
32 | --body-font-family: Arial, "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
|
---|
33 | }
|
---|
34 |
|
---|
35 | body {
|
---|
36 | background-color: var(--page-bg-color);
|
---|
37 | color: var(--body-color);
|
---|
38 | font-family: var(--body-font-family);
|
---|
39 |
|
---|
40 | margin: 0;
|
---|
41 | padding: 0;
|
---|
42 |
|
---|
43 | -webkit-font-smoothing: antialiased;
|
---|
44 | -moz-osx-font-smoothing: grayscale;
|
---|
45 | }
|
---|
46 |
|
---|
47 | hr {
|
---|
48 | @extend .divider;
|
---|
49 | }
|
---|
50 |
|
---|
51 | input[type="checkbox"] {
|
---|
52 | @extend .switch;
|
---|
53 | }
|
---|
54 |
|
---|
55 | .btn-primary .material-icons {
|
---|
56 | margin-right: 0.3em;
|
---|
57 | }
|
---|
58 |
|
---|
59 | .btn-fab .material-icons {
|
---|
60 | margin-right: 0em;
|
---|
61 | }
|
---|
62 |
|
---|
63 | /* Material Design Icon sizes */
|
---|
64 |
|
---|
65 | .mdi-s {
|
---|
66 | font-size: 18px;
|
---|
67 | }
|
---|
68 |
|
---|
69 | .mdi-m {
|
---|
70 | font-size: 24px;
|
---|
71 | }
|
---|
72 |
|
---|
73 | .mdi-l {
|
---|
74 | font-size: 36px;
|
---|
75 | }
|
---|
76 |
|
---|
77 | .mdi-xl {
|
---|
78 | font-size: 48px;
|
---|
79 | } |
---|