THEME.css
Unicode text, UTF-8 text
1@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); 2@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,700;1,300;1,700&display=swap'); 3@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,600;1,600&display=swap'); 4 5:root, ::backdrop { 6/* FONTS */ 7--body-font: /* body text */ 8normal /* style */ 9normal /* variant */ 10400 /* weight */ 11normal /* stretch */ 1216px/1.33 /* size / line height */ 13"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 14; 15--table-font: 16normal /* style */ 17normal /* variant */ 18400 /* weight */ 19normal /* stretch */ 2015.4px/1.33 /* size / line height */ 21"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 22; 23--table-header-font: 24normal /* style */ 25normal /* variant */ 26500 /* weight */ 27normal /* stretch */ 2815.4px/1.33 /* size / line height */ 29"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 30; 31--mono-font: /* code */ 32normal /* style */ 33normal /* variant */ 34300 /* weight */ 35normal /* stretch */ 360.9em/1.2 /* size / line height */ 37"Roboto Mono", "Noto Sans Mono", "Noto Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */ 38; 39--keyboard-font: /* keyboard */ 40normal /* style */ 41normal /* variant */ 42600 /* weight */ 43normal /* stretch */ 440.8em/1 /* size / line height */ 45"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 46; 47--button-font: /* buttons */ 48normal /* style */ 49normal /* variant */ 50600 /* weight */ 51normal /* stretch */ 5215px/1 /* size / line height */ 53"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 54; 55--badge-font: /* badges */ 56normal /* style */ 57normal /* variant */ 58700 /* weight */ 59normal /* stretch */ 6013.2px/1 /* size / line height */ 61"Roboto Mono", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 62; 63--gui-font: /* everything not covered by something else */ 64var(--body-font); 65--input-font: /* all inputs which show text */ 66var(--gui-font); 67--textarea-font: /* textareas */ 68var(--mono-font); 69--h6-font: /* h6 */ 70normal /* style */ 71normal /* variant */ 72700 /* weight */ 73normal /* stretch */ 7415px/1.33 /* size / line height */ 75"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 76; 77--h5-font: /* h5 */ 78normal /* style */ 79normal /* variant */ 80900 /* weight */ 81normal /* stretch */ 8218px/1.315 /* size / line height */ 83"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 84; 85--h4-font: /* h4 */ 86normal /* style */ 87normal /* variant */ 88700 /* weight */ 89normal /* stretch */ 9019.5px/1.30 /* size / line height */ 91"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 92; 93--h3-font: /* h3 */ 94normal /* style */ 95normal /* variant */ 96400 /* weight */ 97normal /* stretch */ 9822.5px/1.30 /* size / line height */ 99"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 100; 101--h2-font: /* h2 */ 102normal /* style */ 103normal /* variant */ 104300 /* weight */ 105normal /* stretch */ 10628px/1.30 /* size / line height */ 107"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 108; 109--h1-font: /* h1 */ 110normal /* style */ 111normal /* variant */ 112300 /* weight */ 113normal /* stretch */ 11436px/1.30 /* size / line height */ 115"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 116; 117--headline-font: /* h1 as a headline */ 118normal /* style */ 119normal /* variant */ 120100 /* weight */ 121normal /* stretch */ 12252px/1.30 /* size / line height */ 123"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ 124; 125 126/* GENERAL COLOURS */ 127/* background */ /* foreground */ 128--color-primary: #3F51B5; --color-primary-text: #ffffff; 129--color-primary-1: #303F9F; --color-primary-1-text: #ffffff; 130--color-primary-2: #1A237E; --color-primary-2-text: #ffffff; 131--color-primary-3: #7986CB; --color-primary-3-text: #000000; 132--color-primary-4: #C5CAE9; --color-primary-4-text: #000000; 133 134--color-accent: #E91E63; --color-accent-text: #ffffff; 135--color-accent-1: #C2185B; --color-accent-1-text: #ffffff; 136--color-accent-2: #880E4F; --color-accent-2-text: #ffffff; 137--color-accent-3: #F06292; --color-accent-3-text: #000000; 138--color-accent-4: #F8BBD0; --color-accent-4-text: #000000; 139 140--color-background: #fafafa; --color-background-text: #000000df; 141--color-caption-text: #000000b9; 142--color-label-text: #000000df; 143 144--color-error: #d50000; --color-error-text: #ffffff; 145--color-alert: #ffab00; --color-alert-text: #000000; 146--color-info: #00b8d4; --color-info-text: #000000; 147--color-success: #00c853; --color-success-text: #ffffff; 148 149--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text); 150 151--color-scheme: light; 152 153/* CODE BLOCKS */ 154--color-code: #263238; --color-code-text: #ffffff; 155--color-quote: #fafafa; --color-quote-text: #000000cc; 156--color-short-code: #f5f5f5; --color-short-code-text: #000000cc; 157--color-keyboard: #757575; --color-keyboard-text: #ffffff; 158 159--color-scheme-code: dark; 160 161--size-keyboard: 1.5em; 162--padding-keyboard: 0.375em; 163--padding-code: 12px; 164 165--radius-code: 0; 166--radius-short-code: 0.125em; 167--border-code: none; 168--border-short-code: none; 169 170--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24); 171 172/* BUTTONS */ 173--color-button: var(--color-primary); --color-button-text: var(--color-primary-text); 174--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text); 175--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text); 176--color-flat-button: transparent; --color-flat-button-text: var(--color-primary); 177--color-flat-button-hover: #00000020; --color-flat-button-hover-text: var(--color-primary-2); 178--color-flat-button-active: #00000030; --color-flat-button-active-text: var(--color-primary-3); 179 180--shadow-button: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 181--shadow-button-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 182--shadow-flat-button: none; 183--shadow-flat-button-hover: none; 184 185--border-button: none; 186--border-button-hover: none; 187--border-flat-button: none; 188--border-flat-button-hover: none; 189 190--radius-button: 2px; 191--radius-flat-button: 2px; 192 193--height-button: 36px; 194--padding-button: 4px 8px; 195--gap-button: 4px; 196--min-width-button: 64px; 197 198/* LINKS */ 199--color-link-text: #1e88e5; 200--color-link-hover-text: #1565c0; 201--color-link-active-text: #1e88e580; 202--color-link-visited-text: #1e88e5; 203--color-link-visited-hover-text: #1565c0; 204 205/* TOASTS */ 206--color-callout: #546e7a; --color-callout-text: #ffffff; 207--color-callout-1: #37474f; --color-callout-1-text: #ffffff; 208--color-callout-2: #78909c; --color-callout-2-text: #ffffff; 209--color-callout-button-text: var(--color-accent-4); 210 211--border-toast: none; 212--radius-toast: 2px; 213--gap-toast: 8px; 214--min-width-toast: 192px; 215--max-width-toast: 50%; 216--height-toast: 40px; 217--padding-toast: 0 0 0 8px; 218--toast-align-horizontal: end; 219--toast-align-vertical: end; 220--toast-stack: column-reverse wrap; 221--margin-toast: 12px; 222 223--shadow-toast: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 224 225/* CHECKBOXES */ 226--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent); 227--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent); 228--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text); 229--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text); 230--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text); 231--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text); 232--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent); 233--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent); 234--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent); 235--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent); 236 237--border-checkbox: 0.125em solid currentColor; 238--border-checkbox-checked: 0.125em solid var(--color-checkbox-active); 239--border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate); 240--border-checkbox-hover: 0.125em solid currentColor; 241--border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active); 242--border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate); 243--border-radio: 0.125em solid currentColor; 244--border-radio-checked: 0.125em solid currentColor; 245--border-radio-hover: 0.125em solid currentColor; 246--border-radio-checked-hover: 0.125em solid currentColor; 247 248--color-switch: #eeeeee; --color-switch-thumb: #757575; 249--color-switch-on: var(--color-accent-4); --color-switch-thumb-on: var(--color-accent); 250--color-switch-hover: #eeeeee; --color-switch-thumb-hover: #757575; 251--color-switch-on-hover: var(--color-accent-4); --color-switch-thumb-on-hover: var(--color-accent); 252 253--border-switch: none; 254--border-switch-hover: none; 255--radius-switch: 1em; 256--height-switch: 0.75em; 257--width-switch: 2em; 258--border-switch-thumb: none; 259--border-switch-thumb-hover: none; 260--radius-switch-thumb: 1em; 261--width-switch-thumb: 1em; 262--height-switch-thumb: 1em; 263--padding-switch-thumb: 0em; /* for some reason, you must set the unit */ 264--width-switch-thumb-hover: 1em; 265--height-switch-thumb-hover: 1em; 266 267--shadow-switch: 0 0 0 0 transparent; /* none */ 268--shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40); 269--shadow-switch-hover: 0 0 0 0 transparent; /* none */ 270--shadow-switch-thumb-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40); 271 272--border-switch-on: none; 273--border-switch-on-hover: none; 274--border-switch-thumb-on: none; 275--border-switch-thumb-on-hover: none; 276--radius-switch-thumb-on: 1em; 277--width-switch-thumb-on: 1em; 278--height-switch-thumb-on: 1em; 279--padding-switch-thumb-on: 0em; /* for some reason, you must set the unit */ 280--width-switch-thumb-on-hover: 1em; 281--height-switch-thumb-on-hover: 1em; 282 283--shadow-switch-on: 0 0 0 0 transparent; /* none */ 284--shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40); 285--shadow-switch-on-hover: 0 0 0 0 transparent; /* none */ 286--shadow-switch-thumb-on-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40); 287 288--radius-checkbox: 0.125em; 289--radius-radio: 1em; 290--size-checkbox: 1em; 291 292--shadow-form: 0 0 0 0 transparent; /* none */ 293--shadow-form-checked: 0 0 0 0 transparent; /* none */ 294--shadow-form-indeterminate: 0 0 0 0 transparent; /* none */ 295--shadow-form-hover: 0 0 0 0 transparent; /* none */ 296--shadow-form-checked-hover: 0 0 0 0 transparent; /* none */ 297--shadow-form-indeterminate-hover: 0 0 0 0 transparent; /* none */ 298 299/* RANGES */ 300--color-range: var(--color-accent-4); --color-range-text: var(--color-accent); 301--color-range-hover: var(--color-accent-4); --color-range-hover-text: var(--color-accent); 302 303--border-range: none; 304--border-range-hover: none; 305--radius-range: 1em; 306--height-range: 0.75em; 307--border-range-thumb: none; 308--border-range-thumb-hover: none; 309--position-range-thumb: -12.5%; 310--position-range-thumb-hover: -12.5%; 311--radius-range-thumb: 1em; 312--width-range-thumb: 1em; 313--height-range-thumb: 1em; 314--width-range-thumb-hover: 1em; 315--height-range-thumb-hover: 1em; 316--shadow-range: 0 0 0 0 transparent; /* none */ 317--shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40); 318--shadow-range-hover: 0 0 0 0 transparent; /* none */ 319--shadow-range-thumb-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40); 320 321/* CARDS */ 322--color-card: #ffffff; --color-card-text: #000000df; 323--color-figcaption-text: #000000df; 324 325--radius-card: 0; 326--outline-outlined-card: 1px solid #00000080; 327--radius-outlined-card: 4px; 328--border-card: none; 329--shadow-card: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 330 331--padding-card: 0 12px 12px 12px; 332--padding-card-top: 12px; 333--padding-card-figcaption: 0 12px 12px 12px; 334--figure-max-size-horizontal-card: clamp(200px, 50%, 768px); 335 336/* LAYOUT */ 337--gap-buttonbox: 4px; 338--gap-label-checkbox: 4px; 339--gap-box: 16px; 340 341/* NAVBAR */ 342--color-navbar: #546E7A; --color-navbar-text: var(--color-primary-text); 343--color-navbar-link: var(--color-primary-text); 344 345--height-navbar: 56px; 346--width-navbar-button: 56px; 347--padding-navbar: 0; 348--gap-navbar: 0; 349--shadow-navbar: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 350--border-navbar: none; 351--radius-navbar: 0; 352 353/* NAVRAIL */ 354--color-navrail: #455a64; --color-navrail-text: var(--color-primary-text); 355--color-navrail-link: var(--color-primary-text); 356--color-navrail-link-hover: var(--color-primary-3); 357--color-navrail-link-selected: var(--color-primary-3); 358 359--width-navrail: 72px; 360--height-navrail-button: 56px; 361--padding-navrail: 0; 362--gap-navrail: 0; 363--shadow-navrail: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 364--border-navrail: none; 365--radius-navrail: 0; 366 367/* SIDENAV */ 368--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text); 369--gap-sidenav-item: 1ch; 370--padding-sidenav: 8px; 371 372/* BREADCRUMBS */ 373--color-breadcrumbs: #455A64; --color-breadcrumbs-text: var(--color-primary-1-text); 374--color-breadcrumbs-link: var(--color-primary-1-text); 375--color-breadcrumbs-separator: var(--color-primary-3); 376 377--height-breadcrumbs: 32px; 378--padding-breadcrumbs: 16px; 379--shadow-breadcrumbs: none; 380--border-breadcrumbs: none; 381--radius-breadcrumbs: 0; 382--separator-breadcrumbs: " > "; 383 384/* TABS */ 385--color-tab: var(--color-primary); --color-tab-text: var(--color-primary-text); 386--color-tab-selected: var(--color-primary); --color-tab-selected-text: var(--color-primary-text); 387--color-tab-hover: var(--color-primary); --color-tab-hover-text: var(--color-primary-text); 388--color-tab-hover-selected: var(--color-primary);--color-tab-hover-selected-text: var(--color-primary-text); 389 390--justify-tab-row: space-around; 391--height-tab: 36px; 392--width-tab: 80px; 393--align-tab: center; 394--border-tab: none; 395--border-tab-selected: 0 0 4px solid var(--color-accent) 0; 396--radius-tab: 0; 397 398/* DIVIDERS */ 399--line-divider: 1px solid #00000080; 400 401/* LISTS */ 402--style-unordered-list: disc; 403--color-unordered-list-marker: currentColor; 404--font-unordered-list-marker: var(--body-font); 405--indent-unordered-list: 1em; 406 407--style-ordered-list: decimal; 408--color-ordered-list-marker: currentColor; 409--font-ordered-list-marker: var(--body-font); 410--indent-ordered-list: 1em; 411 412/* TABLES */ 413--padding-cell: 1ch; 414--border-cell-horizontal: 1px solid #00000020; 415--border-cell-vertical: 1px solid #00000040; 416--color-table: #fafafa; --color-table-text: #000000; 417--color-row-odd: #00000010; --color-row-odd-text: #000000; 418--color-row-even: transparent; --color-row-even-text: #000000; 419--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text); 420 421/* BADGES */ 422--border-badge: none; 423--shadow-badge: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 424--x-badge: 100%; 425--y-badge: 25%; 426--width-badge: 2.25ch; 427--height-badge: 2.25ch; 428--radius-badge: 3ch; 429--padding-badge: 0.25ch; 430--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text); 431 432/* AVATARS */ 433--radius-avatar: 50%; 434 435/* BUBBLES */ 436--border-bubble: none; 437--shadow-bubble: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 438--radius-bubble: 1em; 439--padding-bubble: 1ch; 440--color-bubble: var(--color-accent-1); --color-bubble-text: var(--color-accent-1-text); 441--color-bubble-alt: var(--color-accent-4); --color-bubble-alt-text: var(--color-accent-4-text); 442 443/* INPUTS */ 444--color-input: #ffffff; --color-input-text: #000000bb; 445--color-input-hover: #ffffff; --color-input-hover-text: #000000bb; 446--color-input-active: #ffffff; --color-input-active-text: #000000df; 447--color-flat-input: transparent; --color-flat-input-text: #000000bb; 448--color-flat-input-hover: transparent; --color-flat-input-hover-text: #000000bb; 449--color-flat-input-active: transparent; --color-flat-input-active-text: #000000df; 450 451--shadow-input: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 452--shadow-input-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 453--shadow-input-active: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 454--shadow-flat-input: none; 455--shadow-flat-input-hover: none; 456--shadow-flat-input-active: none; 457 458--border-input: none; 459--border-input-hover: none; 460--border-input-active: none; 461--border-flat-input: none; 462--border-flat-input-hover: none; 463--border-flat-input-active: none; 464 465--radius-input: 2px; 466--radius-flat-input: 2px; 467 468--height-input: 36px; 469--padding-input: 4px 8px; 470--min-width-input: 64px; 471 472--size-input-icon: 16px; 473 474/* TEXTAREAS */ 475--color-textarea: #ffffff; --color-textarea-text: #000000bb; 476--color-textarea-hover: #ffffff; --color-textarea-hover-text: #000000bb; 477--color-textarea-active: #ffffff; --color-textarea-active-text: #000000df; 478--color-flat-textarea: transparent; --color-flat-textarea-text: #000000bb; 479--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #000000bb; 480--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #000000df; 481 482--shadow-textarea: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 483--shadow-textarea-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 484--shadow-textarea-active: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12); 485--shadow-flat-textarea: none; 486--shadow-flat-textarea-hover: none; 487--shadow-flat-textarea-active: none; 488 489--border-textarea: none; 490--border-textarea-hover: none; 491--border-textarea-active: none; 492--border-flat-textarea: 1px solid #00000040; 493--border-flat-textarea-hover: 1px solid #00000040; 494--border-flat-textarea-active: 1px solid #00000040; 495 496--radius-textarea: 2px; 497--radius-flat-textarea: 8px; 498 499--padding-textarea: 8px; 500 501/* MENUS */ 502--color-toolbar: #ffffff; --color-toolbar-text: #000000bb; 503--color-menu: #ffffff; --color-menu-text: #000000bb; 504--color-menu-item: transparent; --color-menu-item-text: #000000bb; 505--color-menu-item-hover: #00000010; --color-menu-item-hover-text: #000000bb; 506 507--gap-toolbar: 4px; 508--gap-menu: 0; 509--border-toolbar: none; 510--border-menu: none; 511--border-menu-item: none; 512--shadow-toolbar: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 513--shadow-menu: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12); 514--height-toolbar: 48px; 515--height-menu-item: 24px; 516--width-toolbar: fit-content; 517--radius-toolbar: 0; 518--radius-menu: 0; 519--padding-toolbar: 4px; 520--padding-menu: 2px 0; 521--padding-menu-item: 2px 8px; 522 523/* DIALOGS */ 524--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%); 525} 526 527/* Extra styles */ 528 529h6 { 530/* Make it look nicer */ 531text-transform: uppercase; 532color: var(--color-accent); 533} 534 535:any-link { 536/* Make them nicer, not possible with the font property */ 537font-weight: bolder; 538text-decoration: underline; 539text-decoration-thickness: .05em; 540text-underline-offset: .1em; 541} 542 543button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button { 544/* Make it look nicer */ 545text-transform: uppercase; 546} 547 548.toast-container li { 549/* Toast appear */ 550animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1); 551transform-origin: bottom; 552} 553 554.toast-container li.removing { 555/* Toast disappear */ 556animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45); 557} 558 559.toast-container li.removing ~ li { 560/* TODO */ 561} 562 563@keyframes toastSlide { 5640% { 565opacity: 0; 566transform: translateY(100vh); 567} 568 569100% { 570opacity: 1; 571transform: translateY(0); 572} 573} 574 575@keyframes toastCompress { 5760% { 577transform: rotateX(0); 578opacity: 1; 579} 580 581100% { 582transform: rotateX(180deg); 583opacity: 0; 584} 585} 586 587input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after { 588/* Checked */ 589animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1); 590} 591 592input[type="checkbox"]:not(.switch), input[type="radio"] { 593/* Transition background */ 594transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1); 595} 596 597input[type="checkbox"].switch::after { 598/* Transition switch thumb */ 599transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1); 600} 601 602input[type="range"]::-webkit-slider-thumb { 603transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1); 604} 605 606input[type="range"]::-moz-range-thumb { 607transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1); 608} 609 610button, .button, input[type="file"]::file-selector-button, input, select, textarea { 611transition: box-shadow 375ms cubic-bezier(0.5, 1, 0.89, 1), background 375ms cubic-bezier(0.5, 1, 0.89, 1), color 375ms cubic-bezier(0.5, 1, 0.89, 1); 612} 613 614@keyframes check { 6150% { 616transform: scale(0); 617} 618 619100% { 620transform: scale(1); 621} 622} 623 624.navbar { 625position: sticky; 626} 627 628:is(.navbar, .breadcrumbs) a:not(:hover) { 629text-decoration: none; 630} 631 632x-notebook > label:has(input[type="radio"]:checked) { 633border-bottom: 4px solid var(--color-accent); 634transition: border 125ms ease; 635} 636 637x-notebook > label { 638text-transform: uppercase; 639font-weight: 600; 640flex: 1 0 auto; 641} 642 643th, ol.table > li.list-header { 644border: none; 645} 646 647tbody th { 648text-align: end; 649} 650 651thead th { 652vertical-align: bottom; 653text-align: center; 654} 655 656.chat-bubble::before { 657content: ""; 658position: absolute; 659width: 1em; 660height: 1em; 661border: 0.75em solid; 662border-color: transparent var(--color-bubble) transparent transparent; 663left: -1.5em; 664top: 1em; 665} 666 667.bubble-alt::before { 668content: ""; 669position: absolute; 670width: 1em; 671height: 1em; 672border: 0.75em solid; 673border-color: transparent transparent transparent var(--color-bubble-alt); 674transform: translateX(100%); 675width: 100%; 676left: 0; 677top: 1em; 678} 679 680::placeholder { 681opacity: 0.5; 682} 683 684:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat { 685border-bottom: 2px solid var(--color-primary) !important; 686} 687 688:disabled { 689opacity: 0.5; 690} 691 692input[type="color"] { 693padding: 0; 694border: 0; 695overflow: hidden; 696} 697 698input[type="color"]::-webkit-color-swatch { 699border: none; 700} 701 702input[type="color"]::-webkit-color-swatch-wrapper { 703padding: 0; 704} 705 706:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus { 707outline: none; /* there is a blinking cursor, better not to have an outline */ 708} 709 710textarea { 711font: var(--mono-font); 712} 713 714button:has(iconify-icon) { 715min-width: var(--height-button); 716} 717 718details.dropdown[open] > summary ~ * { 719animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1); 720transform-origin: top; 721} 722 723@keyframes menu { 7240% { 725transform: rotateX(-90deg); 726opacity: 0; 727} 728 729100% { 730transform: rotateX(0); 731opacity: 1; 732} 733} 734 735details.slidein[open] > summary ~ * { 736animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1); 737transform-origin: left; 738} 739 740@keyframes menu2 { 7410% { 742transform: rotateY(-90deg); 743opacity: 0; 744} 745 746100% { 747transform: rotateY(0); 748opacity: 1; 749} 750} 751 752dialog:modal { 753animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1); 754transform-origin: center; 755} 756 757dialog { 758transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1); 759} 760 761dialog.sheet-left:modal { 762animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1); 763transform-origin: left; 764} 765 766dialog.sheet-right:modal { 767animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1); 768transform-origin: right; 769} 770 771dialog.sheet-top:modal { 772animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1); 773transform-origin: top; 774} 775 776dialog.sheet-bottom:modal { 777animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1); 778transform-origin: bottom; 779} 780 781dialog::backdrop { 782backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px); 783} 784 785@keyframes entranceX { 7860% { 787transform: rotateY(-90deg); 788} 789100% { 790transform: rotateY(0); 791} 792} 793 794@keyframes entranceY { 7950% { 796transform: rotateX(-90deg); 797} 798100% { 799transform: rotateX(0); 800} 801} 802 803@keyframes fade { 8040% { 805opacity: 0; 806} 807100% { 808opacity: 1; 809} 810} 811 812:where(.navrail, .navbar, .sidenav) iconify-icon { 813font-size: 1.5rem; 814} 815 816:is(.navrail, .navbar) a { 817position: relative; 818overflow: hidden; 819} 820 821.navrail :any-link { 822font-weight: 500; 823font-size: 0.875em; 824} 825 826.navrail :any-link.selected { 827font-weight: 600; 828} 829 830.navbar > *, .navbar > ul > li > * { 831height: var(--height-navbar); 832display: flex; 833align-items: center; 834justify-content: center; 835} 836 837.navrail a { 838width: var(--width-navrail); 839display: flex; 840align-items: center; 841justify-content: center; 842}