source: main/trunk/model-interfaces-dev/atea/ocr/src/styles/_material.scss@ 35734

Last change on this file since 35734 was 35734, checked in by cstephen, 13 months ago

Add OCR interface

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