[35355] | 1 | ////
|
---|
[35399] | 2 | /// Defines themes that mimic the material design specification.
|
---|
[35355] | 3 | /// @author Carl Stephens
|
---|
| 4 | ////
|
---|
| 5 |
|
---|
| 6 | :root {
|
---|
[35445] | 7 | // Set these to adjust the colour palette
|
---|
[35442] | 8 | --primary-bg-color-l1: 36, 156, 207;
|
---|
| 9 | --primary-bg-color: 33, 145, 192;
|
---|
| 10 | --primary-fg-color: 255, 255, 255;
|
---|
[35355] | 11 |
|
---|
[35442] | 12 | --accent-bg-color: 25, 118, 158;
|
---|
| 13 | --accent-fg-color: 255, 255, 255;
|
---|
[35431] | 14 |
|
---|
[35500] | 15 | // For components that are in a disabled state.
|
---|
[35505] | 16 | --primary-disabled-color-raw: 130, 130, 130;
|
---|
[35443] | 17 | // Main font color
|
---|
[35431] | 18 | --body-color: rgb(39, 39, 39);
|
---|
[35443] | 19 | // For the paper style, but more generally the neutral background color
|
---|
| 20 | --paper-color: #FCFCFC;
|
---|
[35508] | 21 |
|
---|
| 22 | --body-font-family: Arial, sans-serif;
|
---|
[35431] | 23 |
|
---|
[35432] | 24 | --primary-box-shadow: 0 2px 4px 0 #505050;
|
---|
[35441] | 25 | --primary-box-shadow-thin: 0 1px 3px 0 #666666;
|
---|
[35432] | 26 |
|
---|
[35443] | 27 | // The brightness to reduce participating elements to on hover
|
---|
[35355] | 28 | --hover-brightness: 92%;
|
---|
| 29 | --border-radius: 0.3em;
|
---|
| 30 | --transition-duration: 0.15s;
|
---|
[35441] | 31 |
|
---|
[35445] | 32 | // Default theme
|
---|
[35442] | 33 | @extend .theme-primary;
|
---|
[35355] | 34 | }
|
---|
| 35 |
|
---|
| 36 | /* === Start component definitions === */
|
---|
| 37 |
|
---|
| 38 | .paper {
|
---|
| 39 | padding: 1.2em;
|
---|
| 40 | border-radius: var(--border-radius);
|
---|
[35431] | 41 |
|
---|
| 42 | background-color: var(--paper-color);
|
---|
| 43 | color: var(--body-color);
|
---|
[35442] | 44 | box-shadow: var(--primary-box-shadow);
|
---|
[35355] | 45 | }
|
---|
| 46 |
|
---|
| 47 | .card {
|
---|
| 48 | @extend .paper;
|
---|
[35442] | 49 | box-shadow: var(--primary-box-shadow-thin);
|
---|
[35355] | 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;
|
---|
[35429] | 63 | margin: 1rem 2rem;
|
---|
[35355] | 64 | }
|
---|
| 65 |
|
---|
| 66 | /* Buttons */
|
---|
| 67 |
|
---|
| 68 | .btn-primary {
|
---|
[35451] | 69 | appearance: none;
|
---|
| 70 |
|
---|
[35355] | 71 | display: flex;
|
---|
| 72 | align-items: center;
|
---|
[35439] | 73 | text-align: left;
|
---|
[35355] | 74 |
|
---|
[35441] | 75 | background-color: var(--bg-color);
|
---|
| 76 | color: var(--fg-color);
|
---|
[35355] | 77 | border: none;
|
---|
[35442] | 78 | box-shadow: var(--primary-box-shadow-thin);
|
---|
[35355] | 79 | border-radius: var(--border-radius);
|
---|
| 80 | padding: 0.5em;
|
---|
[35454] | 81 |
|
---|
[35355] | 82 | cursor: pointer;
|
---|
[35451] | 83 | font-size: 1rem;
|
---|
[35454] | 84 | font-weight: 400;
|
---|
[35431] | 85 | text-decoration: none;
|
---|
[35355] | 86 |
|
---|
| 87 | transition-duration: var(--transition-duration);
|
---|
| 88 |
|
---|
| 89 | &:hover {
|
---|
| 90 | filter: brightness(var(--hover-brightness));
|
---|
| 91 | }
|
---|
| 92 |
|
---|
| 93 | &:disabled {
|
---|
[35500] | 94 | cursor: default;
|
---|
| 95 | background-color: var(--disabled-color);
|
---|
[35355] | 96 | }
|
---|
| 97 | }
|
---|
| 98 |
|
---|
[35399] | 99 | .btn-fab {
|
---|
| 100 | @extend .btn-primary;
|
---|
| 101 |
|
---|
| 102 | border-radius: 50%;
|
---|
[35431] | 103 | padding: 0.3em;
|
---|
[35399] | 104 | }
|
---|
| 105 |
|
---|
[35355] | 106 | /** Text display/input */
|
---|
| 107 |
|
---|
| 108 | .text-container {
|
---|
| 109 | display: flex;
|
---|
| 110 | align-items: center;
|
---|
[35437] | 111 | flex-wrap: wrap;
|
---|
[35355] | 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 {
|
---|
[35441] | 140 | border-bottom: 1px solid var(--bg-color);
|
---|
[35355] | 141 |
|
---|
| 142 | .text-input-active {
|
---|
| 143 | width: 100%;
|
---|
| 144 | }
|
---|
| 145 | }
|
---|
| 146 |
|
---|
| 147 | .text-input-active {
|
---|
[35441] | 148 | background-color: var(--bg-color);
|
---|
[35355] | 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;
|
---|
[35437] | 166 | cursor: inherit;
|
---|
[35355] | 167 | font-style: italic;
|
---|
| 168 | cursor: inherit;
|
---|
[35454] | 169 | user-select: none;
|
---|
[35355] | 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;
|
---|
[35405] | 189 | margin: 6px;
|
---|
[35355] | 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 {
|
---|
[35443] | 212 | background-color: rgba(var(--bg-color-raw), 0.4);
|
---|
[35355] | 213 |
|
---|
| 214 | &::after {
|
---|
[35399] | 215 | transform: translatex(22px);
|
---|
[35443] | 216 | background-color: var(--bg-color);
|
---|
[35355] | 217 | }
|
---|
| 218 | }
|
---|
| 219 | }
|
---|
| 220 |
|
---|
[35412] | 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 |
|
---|
[35441] | 249 | background-color: var(--bg-color);
|
---|
[35412] | 250 | box-shadow: var(--primary-box-shadow-thin);
|
---|
| 251 |
|
---|
| 252 | &:hover {
|
---|
| 253 | filter: brightness(var(--hover-brightness));
|
---|
[35430] | 254 | }
|
---|
[35412] | 255 | }
|
---|
| 256 |
|
---|
[35430] | 257 | @mixin disabled-slider-thumb {
|
---|
| 258 | cursor: default;
|
---|
[35500] | 259 | background-color: var(--disabled-color);
|
---|
[35430] | 260 |
|
---|
| 261 | &:hover {
|
---|
| 262 | filter: none;
|
---|
| 263 | }
|
---|
| 264 | }
|
---|
| 265 |
|
---|
[35412] | 266 | .slider-continuous {
|
---|
| 267 | @include slider-clear();
|
---|
| 268 |
|
---|
| 269 | margin: 0;
|
---|
| 270 | padding: 0;
|
---|
| 271 | height: 8px;
|
---|
| 272 | border-radius: 4px;
|
---|
[35443] | 273 | background-color: rgba(var(--bg-color-raw), 0.3);
|
---|
[35412] | 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 {
|
---|
[35443] | 290 | background-color: rgba(var(--bg-color-raw), 0.4);
|
---|
[35412] | 291 | }
|
---|
| 292 | }
|
---|
| 293 |
|
---|
[35430] | 294 | .slider-continuous:disabled {
|
---|
[35500] | 295 | background-color: var(--disabled-color);
|
---|
[35430] | 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 {
|
---|
[35500] | 310 | background-color: var(--disabled-color);
|
---|
[35430] | 311 | }
|
---|
| 312 | }
|
---|
| 313 |
|
---|
[35355] | 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 |
|
---|
[35449] | 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 |
|
---|
[35491] | 341 | animation: rotate360 1.5s linear 0s infinite running;
|
---|
[35449] | 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 |
|
---|
[35355] | 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 {
|
---|
[35431] | 403 | font-size: 40px;
|
---|
| 404 | font-weight: 300;
|
---|
[35355] | 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 | }
|
---|
[35442] | 429 | }
|
---|
| 430 |
|
---|
| 431 | /* === Start Theme Definitions === */
|
---|
| 432 |
|
---|
| 433 | .theme-primary {
|
---|
| 434 | --bg-color: rgb(var(--primary-bg-color));
|
---|
[35443] | 435 | --bg-color-raw: var(--primary-bg-color);
|
---|
[35442] | 436 | --fg-color: rgb(var(--primary-fg-color));
|
---|
[35491] | 437 | --fg-color-faw: var(--primary-fg-color);
|
---|
[35500] | 438 |
|
---|
| 439 | --disabled-color: rgb(var(--primary-disabled-color-raw));
|
---|
| 440 | --disabled-color-raw: var(--primary-disabled-color-raw);
|
---|
[35442] | 441 | }
|
---|
| 442 |
|
---|
| 443 | .theme-primary-l1 {
|
---|
| 444 | --bg-color: rgb(var(--primary-bg-color-l1));
|
---|
[35443] | 445 | --bg-color-raw: var(--primary-bg-color-l1);
|
---|
[35442] | 446 | --fg-color: rgb(var(--primary-fg-color));
|
---|
[35491] | 447 | --fg-color-raw: var(--primary-fg-color);
|
---|
[35442] | 448 | }
|
---|
| 449 |
|
---|
| 450 | .theme-error {
|
---|
| 451 | --bg-color: #f04848;
|
---|
[35443] | 452 | --bg-color-raw: 240, 72, 72;
|
---|
[35442] | 453 | }
|
---|
| 454 |
|
---|
| 455 | .theme-flat {
|
---|
| 456 | --bg-color: transparent;
|
---|
[35443] | 457 | --bg-color-raw: transparent;
|
---|
[35442] | 458 | --fg-color: rgb(var(--primary-bg-color));
|
---|
[35491] | 459 | --fg-color-raw: var(--primary-bg-color);
|
---|
[35442] | 460 |
|
---|
[35500] | 461 | --disabled-color: transparent;
|
---|
| 462 | --disabled-color-raw: transparent;
|
---|
| 463 |
|
---|
[35442] | 464 | box-shadow: none;
|
---|
| 465 |
|
---|
| 466 | &:hover {
|
---|
[35454] | 467 | --bg-color: rgba(var(--primary-bg-color), 0.15);
|
---|
[35442] | 468 | }
|
---|
[35500] | 469 |
|
---|
| 470 | &:disabled {
|
---|
| 471 | --fg-color: rgb(var(--primary-disabled-color-raw));
|
---|
| 472 | --fg-color-raw: var(--primary-disabled-color-raw);
|
---|
| 473 | }
|
---|
[35442] | 474 | }
|
---|
| 475 |
|
---|
| 476 | .theme-accent {
|
---|
| 477 | --bg-color: rgb(var(--accent-bg-color));
|
---|
[35443] | 478 | --bg-color-raw: var(--accent-bg-color);
|
---|
[35442] | 479 | --fg-color: rgb(var(--accent-fg-color));
|
---|
[35491] | 480 | --fg-color-raw: var(--accent-fg-color);
|
---|
[35442] | 481 | }
|
---|
| 482 |
|
---|
| 483 | /* === End theme definitions === */ |
---|