Changeset 35442
- Timestamp:
- 2021-09-21T12:23:02+12:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue
r35437 r35442 1 1 <template> 2 <div class="app-bar ">2 <div class="app-bar theme-primary-l1"> 3 3 <div class="app-bar-content"> 4 4 <span class="heading1">{{ translations.get("Title") }}</span> … … 45 45 gap: 1em; 46 46 47 color: var(--primary-fg-color);48 background-color: var(--primary-bg-color-l1);47 background-color: var(--bg-color); 48 color: var(--fg-color); 49 49 box-shadow: 0px 0px 4px 3px #6d6d6d; 50 50 -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/ToggleButton.vue
r35432 r35442 8 8 .base { 9 9 @extend .btn-fab; 10 color: var(-- primary-bg-color);10 color: var(--bg-color); 11 11 background-color: var(--paper-color); 12 12 box-shadow: var(--primary-box-shadow-thin); … … 14 14 15 15 .toggled { 16 color: var(-- primary-fg-color);17 background-color: var(-- primary-bg-color);16 color: var(--fg-color); 17 background-color: var(--bg-color); 18 18 } 19 19 </style> -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss
r35441 r35442 6 6 /* === Start theme definitions === */ 7 7 8 // When changing these the corresponding CSS variables must be updated 8 9 $primary-bg-color-l1: #249ccf; 9 10 $primary-bg-color: #2191c0; … … 12 13 13 14 :root { 14 // Constant variables; do not modify in other styles 15 --primary-bg-color-l1: #{$primary-bg-color-l1}; 16 --primary-bg-color: #{$primary-bg-color}; 17 --primary-fg-color: white; 18 19 --accent-bg-color: #{$accent-bg-color}; 20 --accent-fg-color: white; 15 --primary-bg-color-l1: 36, 156, 207; 16 --primary-bg-color: 33, 145, 192; 17 --primary-fg-color: 255, 255, 255; 18 19 --accent-bg-color: 25, 118, 158; 20 --accent-fg-color: 255, 255, 255; 21 21 22 22 --body-color: rgb(39, 39, 39); … … 33 33 --transition-duration: 0.15s; 34 34 35 // Normal variables - utilised by styles and set to one of the definitions above. 36 --bg-color: var(--primary-bg-color); 37 --fg-color: var(--primary-fg-color); 38 --box-shadow: var(--primary-box-shadow); 39 } 40 41 .theme-error { 42 --bg-color: #f04848; 43 } 44 45 .theme-flat { 46 --bg-color: transparent; 47 --fg-color: --primary-bg-color; 48 --box-shadow: none; 49 50 &:hover { 51 background-color: #EEE; 52 } 53 } 54 55 .theme-accent { 56 --bg-color: var(--accent-bg-color); 57 --fg-color: var(--accent-fg-color); 58 } 59 60 /* === End theme definitions */ 35 @extend .theme-primary; 36 } 61 37 62 38 /* === Start component definitions === */ … … 68 44 background-color: var(--paper-color); 69 45 color: var(--body-color); 70 box-shadow: var(-- box-shadow);46 box-shadow: var(--primary-box-shadow); 71 47 } 72 48 73 49 .card { 74 50 @extend .paper; 75 --box-shadow: var(--primary-box-shadow-thin);51 box-shadow: var(--primary-box-shadow-thin); 76 52 } 77 53 … … 100 76 color: var(--fg-color); 101 77 border: none; 102 box-shadow: var(-- box-shadow);78 box-shadow: var(--primary-box-shadow-thin); 103 79 104 80 border-radius: var(--border-radius); … … 395 371 } 396 372 } 373 374 /* === Start Theme Definitions === */ 375 376 .theme-primary { 377 --bg-color: rgb(var(--primary-bg-color)); 378 --fg-color: rgb(var(--primary-fg-color)); 379 } 380 381 .theme-primary-l1 { 382 --bg-color: rgb(var(--primary-bg-color-l1)); 383 --fg-color: rgb(var(--primary-fg-color)); 384 } 385 386 .theme-error { 387 --bg-color: #f04848; 388 } 389 390 .theme-flat { 391 --bg-color: transparent; 392 --fg-color: rgb(var(--primary-bg-color)); 393 394 box-shadow: none; 395 396 &:hover { 397 --bg-color: rgba(var(--primary-bg-color), 0.15);//#EEE; 398 } 399 } 400 401 .theme-accent { 402 --bg-color: rgb(var(--accent-bg-color)); 403 --fg-color: rgb(var(--accent-fg-color)); 404 } 405 406 /* === End theme definitions === */
Note:
See TracChangeset
for help on using the changeset viewer.