source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss@ 35508

Last change on this file since 35508 was 35508, checked in by cstephen, 4 months ago

Attempt to make WordTimingSelector reactive to size changes.
Restyle colors

File size: 9.1 KB
Line 
1////
2/// Defines themes that mimic the material design specification.
3/// @author Carl Stephens
4////
5
6:root {
7 // Set these to adjust the colour palette
8 --primary-bg-color-l1: 36, 156, 207;
9 --primary-bg-color: 33, 145, 192;
10 --primary-fg-color: 255, 255, 255;
11
12 --accent-bg-color: 25, 118, 158;
13 --accent-fg-color: 255, 255, 255;
14
15 // For components that are in a disabled state.
16 --primary-disabled-color-raw: 130, 130, 130;
17 // Main font color
18 --body-color: rgb(39, 39, 39);
19 // For the paper style, but more generally the neutral background color
20 --paper-color: #FCFCFC;
21
22 --body-font-family: Arial, sans-serif;
23
24 --primary-box-shadow: 0 2px 4px 0 #505050;
25 --primary-box-shadow-thin: 0 1px 3px 0 #666666;
26
27 // The brightness to reduce participating elements to on hover
28 --hover-brightness: 92%;
29 --border-radius: 0.3em;
30 --transition-duration: 0.15s;
31
32 // Default theme
33 @extend .theme-primary;
34}
35
36/* === Start component definitions === */
37
38.paper {
39 padding: 1.2em;
40 border-radius: var(--border-radius);
41
42 background-color: var(--paper-color);
43 color: var(--body-color);
44 box-shadow: var(--primary-box-shadow);
45}
46
47.card {
48 @extend .paper;
49 box-shadow: var(--primary-box-shadow-thin);
50}
51
52.card-outlined {
53 @extend .card;
54
55 box-shadow: none;
56 border: 1px solid #BBB;
57}
58
59.divider {
60 height: 1px;
61 background-color: #0000001F;
62 border: none;
63 margin: 1rem 2rem;
64}
65
66/* Buttons */
67
68.btn-primary {
69 appearance: none;
70
71 display: flex;
72 align-items: center;
73 text-align: left;
74
75 background-color: var(--bg-color);
76 color: var(--fg-color);
77 border: none;
78 box-shadow: var(--primary-box-shadow-thin);
79 border-radius: var(--border-radius);
80 padding: 0.5em;
81
82 cursor: pointer;
83 font-size: 1rem;
84 font-weight: 400;
85 text-decoration: none;
86
87 transition-duration: var(--transition-duration);
88
89 &:hover {
90 filter: brightness(var(--hover-brightness));
91 }
92
93 &:disabled {
94 cursor: default;
95 background-color: var(--disabled-color);
96 }
97}
98
99.btn-fab {
100 @extend .btn-primary;
101
102 border-radius: 50%;
103 padding: 0.3em;
104}
105
106/** Text display/input */
107
108.text-container {
109 display: flex;
110 align-items: center;
111 flex-wrap: wrap;
112
113 border-radius: var(--border-radius);
114 background: #DDD;
115 padding: 0.5em;
116}
117
118.text-container-sl {
119 @extend .text-container;
120
121 overflow-x: auto;
122 overflow-y: hidden;
123 white-space: nowrap;
124}
125
126.text-input {
127 @extend .text-container;
128
129 border-radius: var(--border-radius) var(--border-radius) 0 0;
130 border-bottom: 1px solid #AAA;
131 cursor: text;
132
133 transition-duration: var(--transition-duration);
134
135 &:hover {
136 background-color: #CDCDCD;
137 }
138
139 &:active, &:focus {
140 border-bottom: 1px solid var(--bg-color);
141
142 .text-input-active {
143 width: 100%;
144 }
145 }
146
147 .text-input-active {
148 background-color: var(--bg-color);
149 height: 1px;
150 margin: 0 auto;
151 width: 0;
152 transition-duration: var(--transition-duration);
153 }
154}
155
156.text-input-sl {
157 @extend .text-input;
158
159 overflow-x: auto;
160 overflow-y: hidden;
161 white-space: nowrap;
162}
163
164.text-placeholder {
165 color: #666;
166 cursor: inherit;
167 font-style: italic;
168 cursor: inherit;
169 user-select: none;
170}
171
172/* Switches */
173
174// https://codepen.io/avstorm/pen/jOEpBLW
175.switch
176{
177 -webkit-appearance: none;
178 -moz-appearance: none;
179 appearance: none;
180
181 -webkit-tap-highlight-color: transparent;
182 cursor: pointer;
183
184 height: 16px;
185 width: 38px;
186 border-radius: 8px;
187 display: inline-block;
188 position: relative;
189 margin: 6px;
190 background-color: #c7c7c7;
191 transition-duration: var(--transition-duration);
192
193 &:focus {
194 outline: 0;
195 }
196
197 &::after {
198 content: '';
199 position: absolute;
200 display: inline-block;
201 top: -4px;
202 left: -4px;
203 width: 24px;
204 height: 24px;
205 border-radius: 50%;
206 background: white;
207 box-shadow: var(--primary-box-shadow-thin);
208 transition-duration: var(--transition-duration);
209 }
210
211 &:checked {
212 background-color: rgba(var(--bg-color-raw), 0.4);
213
214 &::after {
215 transform: translatex(22px);
216 background-color: var(--bg-color);
217 }
218 }
219}
220
221/* Sliders */
222
223@mixin slider-clear {
224 appearance: none;
225 width: 100%; // Required for firefox
226
227 &::-webkit-slider-thumb {
228 -webkit-appearance: none;
229 }
230
231 &::-moz-range-track {
232 outline: none;
233 }
234
235 &::-ms-track {
236 width: 100%;
237 background: transparent;
238 border-color: transparent;
239 color: transparent;
240 }
241}
242
243@mixin slider-thumb {
244 height: 24px;
245 width: 24px;
246 border-radius: 50%;
247 cursor: pointer;
248
249 background-color: var(--bg-color);
250 box-shadow: var(--primary-box-shadow-thin);
251
252 &:hover {
253 filter: brightness(var(--hover-brightness));
254 }
255}
256
257@mixin disabled-slider-thumb {
258 cursor: default;
259 background-color: var(--disabled-color);
260
261 &:hover {
262 filter: none;
263 }
264}
265
266.slider-continuous {
267 @include slider-clear();
268
269 margin: 0;
270 padding: 0;
271 height: 8px;
272 border-radius: 4px;
273 background-color: rgba(var(--bg-color-raw), 0.3);
274
275 transition-duration: var(--transition-duration);
276
277 &::-webkit-slider-thumb {
278 @include slider-thumb()
279 }
280
281 &::-moz-range-thumb {
282 @include slider-thumb()
283 }
284
285 &::-ms-thumb {
286 @include slider-thumb()
287 }
288
289 &:hover {
290 background-color: rgba(var(--bg-color-raw), 0.4);
291 }
292}
293
294.slider-continuous:disabled {
295 background-color: var(--disabled-color);
296
297 &::-webkit-slider-thumb {
298 @include disabled-slider-thumb();
299 }
300
301 &::-moz-range-thumb {
302 @include disabled-slider-thumb();
303 }
304
305 &::-ms-thumb {
306 @include disabled-slider-thumb();
307 }
308
309 &:hover {
310 background-color: var(--disabled-color);
311 }
312}
313
314/* List Views */
315
316.list-view {
317 list-style-type: none;
318 margin-block: 0 0;
319 padding-inline: 0 0;
320}
321
322.list-view__item {
323 padding: 0.2em 0.5em;
324 transition-duration: var(--transition-duration);
325
326 &:hover {
327 background-color: #EEE;
328 }
329}
330
331/* Progress Bars */
332
333.progress-circle-indeterminate {
334 height: 2em;
335 width: 2em;
336
337 border: 0.25em solid var(--bg-color);
338 border-right: 0.25em solid rgba(var(--bg-color-raw), 0.3);
339 border-radius: 50%;
340
341 animation: rotate360 1.5s linear 0s infinite running;
342}
343
344@keyframes rotate360 {
345 0% {
346 transform: rotate(0deg);
347 }
348
349 100% {
350 transform: rotate(360deg);
351 }
352}
353
354.progress-bar-container {
355 width: 100%;
356 height: 8px;
357 overflow: hidden;
358
359 background-color: rgba(var(--bg-color-raw), 0.2);
360 border-radius: 4px;
361}
362
363.progress-bar-value {
364 height: 100%;
365
366 background-color: var(--bg-color);
367 border-radius: 4px;
368}
369
370.progress-bar-indeterminate {
371 width: 20%;
372 animation: 2s ease 0s infinite alternate prgbr-indeterminate;
373}
374
375@keyframes prgbr-indeterminate {
376 0% {
377 transform: translateX(-100%);
378 }
379
380 100% {
381 transform: translateX(500%);
382 }
383}
384
385/* === End component definitions === */
386
387/* Font sizes */
388
389.body0 {
390 font-size: 18px;
391 line-height: 24px;
392}
393
394.body1 {
395 font-size: 16px;
396}
397
398.body2 {
399 font-size: 14px;
400}
401
402.heading1 {
403 font-size: 40px;
404 font-weight: 300;
405}
406
407/* Scrollbar replacement */
408
409::-webkit-scrollbar {
410 width: 6px;
411 height: 6px;
412}
413
414::-webkit-scrollbar-track {
415 background: #f1f1f1;
416}
417
418::-webkit-scrollbar-thumb {
419 background: #CCC;
420 border-radius: 3px;
421
422 transition-duration: var(--transition-duration);
423
424 &:hover {
425 background: #666;
426 height: 8px;
427 width: 8px;
428 }
429}
430
431/* === Start Theme Definitions === */
432
433.theme-primary {
434 --bg-color: rgb(var(--primary-bg-color));
435 --bg-color-raw: var(--primary-bg-color);
436 --fg-color: rgb(var(--primary-fg-color));
437 --fg-color-faw: var(--primary-fg-color);
438
439 --disabled-color: rgb(var(--primary-disabled-color-raw));
440 --disabled-color-raw: var(--primary-disabled-color-raw);
441}
442
443.theme-primary-l1 {
444 --bg-color: rgb(var(--primary-bg-color-l1));
445 --bg-color-raw: var(--primary-bg-color-l1);
446 --fg-color: rgb(var(--primary-fg-color));
447 --fg-color-raw: var(--primary-fg-color);
448}
449
450.theme-error {
451 --bg-color: #f04848;
452 --bg-color-raw: 240, 72, 72;
453}
454
455.theme-flat {
456 --bg-color: transparent;
457 --bg-color-raw: transparent;
458 --fg-color: rgb(var(--primary-bg-color));
459 --fg-color-raw: var(--primary-bg-color);
460
461 --disabled-color: transparent;
462 --disabled-color-raw: transparent;
463
464 box-shadow: none;
465
466 &:hover {
467 --bg-color: rgba(var(--primary-bg-color), 0.15);
468 }
469
470 &:disabled {
471 --fg-color: rgb(var(--primary-disabled-color-raw));
472 --fg-color-raw: var(--primary-disabled-color-raw);
473 }
474}
475
476.theme-accent {
477 --bg-color: rgb(var(--accent-bg-color));
478 --bg-color-raw: var(--accent-bg-color);
479 --fg-color: rgb(var(--accent-fg-color));
480 --fg-color-raw: var(--accent-fg-color);
481}
482
483/* === End theme definitions === */
Note: See TracBrowser for help on using the repository browser.