Unicode text, UTF-8 text
1
:root, ::backdrop {
3
/* GENERAL COLOURS */
4
/* background */ /* foreground */
5
--color-primary: #FF9800; --color-primary-text: #ffffff;
6
--color-primary-1: #F57C00; --color-primary-1-text: #ffffff;
7
--color-primary-2: #E65100; --color-primary-2-text: #ffffff;
8
--color-primary-3: #FFB74D; --color-primary-3-text: #000000;
9
--color-primary-4: #FFE0B2; --color-primary-4-text: #000000;
10
--color-accent: #00BCD4; --color-accent-text: #000000;
12
--color-accent-1: #0097A7; --color-accent-1-text: #ffffff;
13
--color-accent-2: #006064; --color-accent-2-text: #ffffff;
14
--color-accent-3: #4DD0E1; --color-accent-3-text: #000000;
15
--color-accent-4: #B2EBF2; --color-accent-4-text: #000000;
16
--color-background: #000000; --color-background-text: #ffffffdf;
18
--color-caption-text: #ffffffb9;
19
--color-label-text: #ffffffdf;
20
--color-error: #FF1744; --color-error-text: #000000;
22
--color-alert: #FFEA00; --color-alert-text: #000000;
23
--color-info: #00E5FF; --color-info-text: #000000;
24
--color-success: #00C853; --color-success-text: #ffffff;
25
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
27
--color-scheme: light;
29
/* CODE BLOCKS */
31
--color-code: #263238; --color-code-text: #ffffff;
32
--color-quote: #212121; --color-quote-text: #ffffffcc;
33
--color-short-code: #424242; --color-short-code-text: #ffffffcc;
34
--color-keyboard: #37474F; --color-keyboard-text: #ffffff;
35
--color-scheme-code: dark;
37
--size-keyboard: 1.5em;
39
--padding-keyboard: 0.375em;
40
--padding-code: 12px;
41
--radius-code: 0;
43
--radius-short-code: 0.125em;
44
--border-code: none;
45
--border-short-code: none;
46
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
48
/* BUTTONS */
50
--color-button: var(--color-primary); --color-button-text: var(--color-primary-text);
51
--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text);
52
--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text);
53
--color-flat-button: transparent; --color-flat-button-text: var(--color-primary);
54
--color-flat-button-hover: #FF980020; --color-flat-button-hover-text: var(--color-primary-2);
55
--color-flat-button-active: #FF980030; --color-flat-button-active-text: var(--color-primary-3);
56
/* LINKS */
58
--color-link-text: #C6FF00;
59
--color-link-hover-text: #EEFF41;
60
--color-link-active-text: #C6FF0080;
61
--color-link-visited-text: #C6FF00;
62
--color-link-visited-hover-text: #EEFF41;
63
/* TOASTS */
65
--color-callout: #546e7a; --color-callout-text: #ffffff;
66
--color-callout-1: #37474f; --color-callout-1-text: #ffffff;
67
--color-callout-2: #78909c; --color-callout-2-text: #ffffff;
68
--color-callout-button-text: var(--color-accent-4);
69
/* CHECKBOXES */
71
--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent);
72
--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent);
73
--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text);
74
--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
75
--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
76
--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
77
--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent);
78
--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent);
79
--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent);
80
--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);
81
--color-switch: #eeeeee; --color-switch-thumb: #757575;
83
--color-switch-on: var(--color-accent-4); --color-switch-thumb-on: var(--color-accent);
84
--color-switch-hover: #eeeeee; --color-switch-thumb-hover: #757575;
85
--color-switch-on-hover: var(--color-accent-4); --color-switch-thumb-on-hover: var(--color-accent);
86
/* RANGES */
88
--color-range: var(--color-accent-4); --color-range-text: var(--color-accent);
89
--color-range-hover: var(--color-accent-4); --color-range-hover-text: var(--color-accent);
90
/* CARDS */
92
--color-card: #212121; --color-card-text: #000000df;
93
--color-figcaption-text: #000000df;
94
/* NAVBAR */
96
--color-navbar: #212121; --color-navbar-text: var(--color-primary-text);
97
--color-navbar-link: var(--color-primary-text);
98
/* NAVRAIL */
100
--color-navrail: #424242; --color-navrail-text: var(--color-primary-text);
101
--color-navrail-link: var(--color-primary-text);
102
--color-navrail-link-hover: var(--color-primary-3);
103
--color-navrail-link-selected: var(--color-primary-3);
104
/* SIDENAV */
106
--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text);
107
/* BREADCRUMBS */
109
--color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text);
110
--color-breadcrumbs-link: var(--color-navbar-text);
111
--color-breadcrumbs-separator: var(--color-navbar-text);
112
--height-breadcrumbs: 48px;
114
--padding-breadcrumbs: 8px;
115
--shadow-breadcrumbs: var(--shadow-navbar);
116
--border-breadcrumbs: none;
117
--radius-breadcrumbs: 0;
118
--separator-breadcrumbs: " > ";
119
/* TABS */
121
--color-tab: var(--color-navbar); --color-tab-text: var(--color-navbar-text);
122
--color-tab-selected: var(--color-navbar); --color-tab-selected-text: var(--color-navbar-text);
123
--color-tab-hover: var(--color-navbar); --color-tab-hover-text: var(--color-navbar-text);
124
--color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);
125
/* DIVIDERS */
128
--line-divider: 1px solid #00000080;
129
--color-table: #fafafa; --color-table-text: #000000;
131
--color-row-odd: #00000010; --color-row-odd-text: #000000;
132
--color-row-even: transparent; --color-row-even-text: #000000;
133
--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text);
134
/* BADGES */
136
--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text);
137
/* AVATARS */
139
--radius-avatar: 0;
140
/* BUBBLES */
142
--color-bubble: var(--color-accent-1); --color-bubble-text: var(--color-accent-1-text);
143
--color-bubble-alt: var(--color-accent-4); --color-bubble-alt-text: var(--color-accent-4-text);
144
/* INPUTS */
146
--color-input: #ffffff; --color-input-text: #000000bb;
147
--color-input-hover: #ffffff; --color-input-hover-text: #000000bb;
148
--color-input-active: #ffffff; --color-input-active-text: #000000df;
149
--color-flat-input: transparent; --color-flat-input-text: #000000bb;
150
--color-flat-input-hover: transparent; --color-flat-input-hover-text: #000000bb;
151
--color-flat-input-active: transparent; --color-flat-input-active-text: #000000df;
152
/* TEXTAREAS */
154
--color-textarea: #ffffff; --color-textarea-text: #000000bb;
155
--color-textarea-hover: #ffffff; --color-textarea-hover-text: #000000bb;
156
--color-textarea-active: #ffffff; --color-textarea-active-text: #000000df;
157
--color-flat-textarea: transparent; --color-flat-textarea-text: #000000bb;
158
--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #000000bb;
159
--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #000000df;
160
/* MENUS */
162
--color-toolbar: #ffffff; --color-toolbar-text: #000000bb;
163
--color-menu: #ffffff; --color-menu-text: #000000bb;
164
--color-menu-item: transparent; --color-menu-item-text: #000000bb;
165
--color-menu-item-hover: #00000010; --color-menu-item-hover-text: #000000bb;
166
/* DIALOGS */
168
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
169
--tap-highlight-color: transparent;
171
}
172