A basic theme by the Roundabout developer
"Dusk"
By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.
"Dusk"
steve0greatness,
created on Saturday, 11 May 2024, 22:36:37 (1715466997),
received on Saturday, 11 May 2024, 22:37:41 (1715467061)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>
3e740fd478e60b6a242a77c23dbd382507e1d5a8
<themes> <theme> <title>Dusk</title> <author uri="https://roundabout-host.com/roundabout" instance="roundabout-host.com" username="roundabout" >Roundabout developer</author> <uri>roundabout/dusk.css</uri> </theme> </themes>
/* Dusk theme for roundabout web interface Copyright (C) 2024 Roundabout developer This stylesheet is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This stylesheet is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this stylesheet. If not, see <https://www.gnu.org/licenses/> */ :root, ::backdrop { /* FONTS */ --body-font: /* body text */ normal /* style */ normal /* variant */ 400 /* weight */ normal /* stretch */ 16px/20px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --table-font: normal /* style */ normal /* variant */ 400 /* weight */ normal /* stretch */ 15.4px/20px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --table-header-font: normal /* style */ normal /* variant */ 500 /* weight */ normal /* stretch */ 15.4px/20px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --mono-font: /* code */ normal /* style */ normal /* variant */ 400 /* weight */ normal /* stretch */ 14.5px/20px /* size / line height */ "Roboto Mono", "Noto Sans Mono", "Noto Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */ ; --keyboard-font: /* keyboard */ normal /* style */ normal /* variant */ 600 /* weight */ normal /* stretch */ 12px/12px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --button-font: /* buttons */ normal /* style */ normal /* variant */ 600 /* weight */ normal /* stretch */ 15px/20px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --badge-font: /* badges */ normal /* style */ normal /* variant */ 700 /* weight */ normal /* stretch */ 13.2px/16px /* size / line height */ "Roboto Mono", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --gui-font: /* everything not covered by something else */ var(--body-font); --input-font: /* all inputs which show text */ var(--gui-font); --textarea-font: /* textareas */ var(--mono-font); --h6-font: /* h6 */ normal /* style */ normal /* variant */ 700 /* weight */ normal /* stretch */ 16px/20px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --h5-font: /* h5 */ normal /* style */ normal /* variant */ 900 /* weight */ normal /* stretch */ 18px/20px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --h4-font: /* h4 */ normal /* style */ normal /* variant */ 700 /* weight */ normal /* stretch */ 19.5px/24px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --h3-font: /* h3 */ normal /* style */ normal /* variant */ 400 /* weight */ normal /* stretch */ 22.5px/28px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --h2-font: /* h2 */ normal /* style */ normal /* variant */ 300 /* weight */ normal /* stretch */ 28px/32px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --h1-font: /* h1 */ normal /* style */ normal /* variant */ 300 /* weight */ normal /* stretch */ 36px/44px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; --headline-font: /* h1 as a headline */ normal /* style */ normal /* variant */ 100 /* weight */ normal /* stretch */ 52px/60px /* size / line height */ "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */ ; /* GENERAL COLOURS */ /* background */ /* foreground */ --color-primary: #4DB6AC; --color-primary-text: #ffffff; --color-primary-1: #009688; --color-primary-1-text: #ffffff; --color-primary-2: #00796B; --color-primary-2-text: #ffffff; --color-primary-3: #80CBC4; --color-primary-3-text: #000000; --color-primary-4: #B2DFDB; --color-primary-4-text: #000000; --color-accent: #FFAB40; --color-accent-text: #000000; --color-accent-1: #FF9100; --color-accent-1-text: #ffffff; --color-accent-2: #FF6D00; --color-accent-2-text: #ffffff; --color-accent-3: #FFD180; --color-accent-3-text: #000000; --color-accent-4: #FFF3E0; --color-accent-4-text: #000000; --color-background: #455A64; --color-background-text: #FFFFFFf4; --color-caption-text: #FFFFFFb9; --color-label-text: #FFFFFFdf; --color-error: #FF1744; --color-error-text: #FFFFFF; --color-alert: #FFC400; --color-alert-text: #000000; --color-info: #40C4FF; --color-info-text: #000000; --color-success: #00E676; --color-success-text: #000000; --color-not-accent: transparent; --color-not-accent-text: var(--color-background-text); --color-scheme: dark; /* CODE BLOCKS */ --color-code: #263238; --color-code-text: #FFFFFFea; --color-quote: #546E7A; --color-quote-text: #FFFFFFea; --color-short-code: #37474F; --color-short-code-text: #FFFFFFea; --color-keyboard: #607D8B; --color-keyboard-text: #FFFFFF; --color-scheme-code: dark; --size-keyboard: 1.5em; --padding-keyboard: 0.375em; --padding-code: 12px; --radius-code: 0; --radius-short-code: 0.125em; --border-code: none; --border-short-code: none; --shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24); /* BUTTONS */ --color-button: var(--color-primary); --color-button-text: var(--color-primary-text); --color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text); --color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text); --color-flat-button: transparent; --color-flat-button-text: var(--color-primary); --color-flat-button-hover: #FFFFFF20; --color-flat-button-hover-text: var(--color-primary-2); --color-flat-button-active: #FFFFFF30; --color-flat-button-active-text: var(--color-primary-3); --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); --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); --shadow-flat-button: none; --shadow-flat-button-hover: none; --border-button: none; --border-button-hover: none; --border-flat-button: none; --border-flat-button-hover: none; --radius-button: 2px; --radius-round-button: 100vmin; --radius-flat-button: 2px; --height-button: 36px; --size-round-button: 48px; --margin-round-button: 8px; --padding-button: 4px 8px; --padding-round-button: 8px; --gap-button: 4px; --min-width-button: 64px; /* LINKS */ --color-link-text: var(--color-primary-3); --color-link-hover-text: var(--color-primary-4); --color-link-active-text: var(--color-primary-2); --color-link-visited-text: var(--color-link-text); --color-link-visited-hover-text: var(--color-link-hover-text); /* TOASTS */ --color-callout: #546e7a; --color-callout-text: #ffffff; --color-callout-1: #37474f; --color-callout-1-text: #ffffff; --color-callout-2: #78909c; --color-callout-2-text: #ffffff; --color-callout-button-text: var(--color-accent-4); --border-toast: none; --radius-toast: 2px; --gap-toast: 8px; --min-width-toast: 192px; --max-width-toast: 50%; --height-toast: 40px; --padding-toast: 0 0 0 8px; --toast-align-horizontal: end; --toast-align-vertical: end; --toast-stack: column-reverse wrap; --margin-toast: 12px; --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); /* CHECKBOXES */ --color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent); --color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent); --color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text); --color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text); --color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text); --color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text); --color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent); --color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent); --color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent); --color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent); --border-checkbox: 0.125em solid currentColor; --border-checkbox-checked: 0.125em solid var(--color-checkbox-active); --border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate); --border-checkbox-hover: 0.125em solid currentColor; --border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active); --border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate); --border-radio: 0.125em solid currentColor; --border-radio-checked: 0.125em solid currentColor; --border-radio-hover: 0.125em solid currentColor; --border-radio-checked-hover: 0.125em solid currentColor; --color-switch: #607D8B; --color-switch-thumb: #90A4AE; --color-switch-on: var(--color-accent-2); --color-switch-thumb-on: var(--color-accent); --color-switch-hover: #607D8B; --color-switch-thumb-hover: #90A4AE; --color-switch-on-hover: var(--color-accent-2); --color-switch-thumb-on-hover: var(--color-accent); --border-switch: none; --border-switch-hover: none; --radius-switch: 1em; --height-switch: 0.75em; --width-switch: 2em; --border-switch-thumb: none; --border-switch-thumb-hover: none; --radius-switch-thumb: 1em; --width-switch-thumb: 1em; --height-switch-thumb: 1em; --padding-switch-thumb: 0em; /* for some reason, you must set the unit */ --width-switch-thumb-hover: 1em; --height-switch-thumb-hover: 1em; --shadow-switch: 0 0 0 0 transparent; /* none */ --shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40); --shadow-switch-hover: 0 0 0 0 transparent; /* none */ --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); --border-switch-on: none; --border-switch-on-hover: none; --border-switch-thumb-on: none; --border-switch-thumb-on-hover: none; --radius-switch-thumb-on: 1em; --width-switch-thumb-on: 1em; --height-switch-thumb-on: 1em; --padding-switch-thumb-on: 0em; /* for some reason, you must set the unit */ --width-switch-thumb-on-hover: 1em; --height-switch-thumb-on-hover: 1em; --shadow-switch-on: 0 0 0 0 transparent; /* none */ --shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40); --shadow-switch-on-hover: 0 0 0 0 transparent; /* none */ --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); --radius-checkbox: 0.125em; --radius-radio: 1em; --size-checkbox: 1em; --shadow-form: 0 0 0 0 transparent; /* none */ --shadow-form-checked: 0 0 0 0 transparent; /* none */ --shadow-form-indeterminate: 0 0 0 0 transparent; /* none */ --shadow-form-hover: 0 0 0 0 transparent; /* none */ --shadow-form-checked-hover: 0 0 0 0 transparent; /* none */ --shadow-form-indeterminate-hover: 0 0 0 0 transparent; /* none */ /* RANGES */ --color-range: var(--color-accent-2); --color-range-text: var(--color-accent); --color-range-hover: var(--color-accent-2); --color-range-hover-text: var(--color-accent); --border-range: none; --border-range-hover: none; --radius-range: 1em; --height-range: 0.75em; --border-range-thumb: none; --border-range-thumb-hover: none; --position-range-thumb: -12.5%; --position-range-thumb-hover: -12.5%; --radius-range-thumb: 1em; --width-range-thumb: 1em; --height-range-thumb: 1em; --width-range-thumb-hover: 1em; --height-range-thumb-hover: 1em; --shadow-range: 0 0 0 0 transparent; /* none */ --shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40); --shadow-range-hover: 0 0 0 0 transparent; /* none */ --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); /* CARDS */ --color-card: #546E7A; --color-card-text: var(--color-background-text); --color-figcaption-text: #000000df; --radius-card: 0; --outline-outlined-card: 1px solid #FFFFFF80; --radius-outlined-card: 4px; --border-card: none; --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); --padding-card: 0 12px 12px 12px; --padding-card-top: 12px; --padding-card-figcaption: 0 12px 12px 12px; --figure-max-size-horizontal-card: clamp(200px, 50%, 768px); /* LAYOUT */ --gap-buttonbox: 4px; --gap-label-checkbox: 4px; --gap-box: 16px; /* NAVBAR */ --color-navbar: #546E7A; --color-navbar-text: var(--color-background-text); --color-navbar-link: var(--color-background-text); --height-navbar: 48px; --width-navbar-button: 56px; --padding-navbar: 12px; --gap-navbar: 0; --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); --border-navbar: none; --radius-navbar: 0; /* NAVRAIL */ --color-navrail: #546E7A; --color-navrail-text: var(--color-primary-text); --color-navrail-link: var(--color-primary-text); --color-navrail-link-hover: var(--color-primary-3); --color-navrail-link-selected: var(--color-primary-3); --width-navrail: 72px; --height-navrail-button: 56px; --padding-navrail: 0; --gap-navrail: 0; --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); --border-navrail: none; --radius-navrail: 0; /* SIDENAV */ --color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text); --gap-sidenav-item: 1ch; --padding-sidenav: 8px; /* BREADCRUMBS */ --color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text); --color-breadcrumbs-link: var(--color-navbar-text); --color-breadcrumbs-separator: var(--color-navbar-text); --height-breadcrumbs: 48px; --padding-breadcrumbs: 16px; --shadow-breadcrumbs: var(--shadow-navbar); --border-breadcrumbs: none; --radius-breadcrumbs: 0; --separator-breadcrumbs: " > "; /* TABS */ --color-tab: var(--color-navbar); --color-tab-text: var(--color-navbar-text); --color-tab-selected: var(--color-navbar); --color-tab-selected-text: var(--color-navbar-text); --color-tab-hover: var(--color-navbar); --color-tab-hover-text: var(--color-navbar-text); --color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text); --justify-tab-row: space-around; --height-tab: 36px; --width-tab: 80px; --align-tab: center; --border-tab: none; --border-tab-selected: none; --radius-tab: 0; /* DIVIDERS */ --line-divider: 1px solid #FFFFFF80; /* LISTS */ --style-unordered-list: disc; --color-unordered-list-marker: currentColor; --font-unordered-list-marker: var(--body-font); --indent-unordered-list: 1em; --style-ordered-list: decimal; --color-ordered-list-marker: currentColor; --font-ordered-list-marker: var(--body-font); --indent-ordered-list: 1em; /* TABLES */ --padding-cell: 1ch; --border-cell-horizontal: 1px solid #FFFFFF20; --border-cell-vertical: 1px solid #FFFFFF40; --color-table: #546E7A; --color-table-text: var(--color-background-text); --color-row-odd: #FFFFFF10; --color-row-odd-text: var(--color-background-text); --color-row-even: transparent; --color-row-even-text: var(--color-background-text); --color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text); /* BADGES */ --border-badge: none; --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); --x-badge: 100%; --y-badge: 25%; --width-badge: 2.25ch; --height-badge: 2.25ch; --radius-badge: 3ch; --padding-badge: 0.25ch; --color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text); /* AVATARS */ --radius-avatar: 0; /* BUBBLES */ --border-bubble: none; --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); --radius-bubble: 1em; --padding-bubble: 1ch; --color-bubble: var(--color-accent-3); --color-bubble-text: var(--color-accent-3-text); --color-bubble-alt: var(--color-accent-2); --color-bubble-alt-text: var(--color-accent-2-text); /* INPUTS */ --color-input: #607D8B; --color-input-text: #FFFFFFbb; --color-input-hover: #607D8B; --color-input-hover-text: #FFFFFFbb; --color-input-active: #607D8B; --color-input-active-text: #FFFFFFdf; --color-flat-input: transparent; --color-flat-input-text: #FFFFFFbb; --color-flat-input-hover: transparent; --color-flat-input-hover-text: #FFFFFFbb; --color-flat-input-active: transparent; --color-flat-input-active-text: #FFFFFFdf; --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); --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); --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); --shadow-flat-input: none; --shadow-flat-input-hover: none; --shadow-flat-input-active: none; --border-input: none; --border-input-hover: none; --border-input-active: none; --border-flat-input: none; --border-flat-input-hover: none; --border-flat-input-active: none; --radius-input: 2px; --radius-flat-input: 2px; --height-input: 36px; --padding-input: 4px 8px; --min-width-input: 64px; --size-input-icon: 16px; /* TEXTAREAS */ --color-textarea: #607D8B; --color-textarea-text: #FFFFFFbb; --color-textarea-hover: #607D8B; --color-textarea-hover-text: #FFFFFFbb; --color-textarea-active: #607D8B; --color-textarea-active-text: #FFFFFFdf; --color-flat-textarea: transparent; --color-flat-textarea-text: #FFFFFFbb; --color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #FFFFFFbb; --color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #FFFFFFdf; --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); --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); --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); --shadow-flat-textarea: none; --shadow-flat-textarea-hover: none; --shadow-flat-textarea-active: none; --border-textarea: none; --border-textarea-hover: none; --border-textarea-active: none; --border-flat-textarea: 1px solid #FFFFFF40; --border-flat-textarea-hover: 1px solid #FFFFFF40; --border-flat-textarea-active: 1px solid #FFFFFF40; --radius-textarea: 2px; --radius-flat-textarea: 8px; --padding-textarea: 8px; /* MENUS */ --color-toolbar: #546E7A; --color-toolbar-text: #FFFFFFde; --color-menu: #607D8B; --color-menu-text: #FFFFFFde; --color-menu-item: transparent; --color-menu-item-text: #FFFFFFde; --color-menu-item-hover: #FFFFFF10; --color-menu-item-hover-text: #FFFFFFde; --gap-toolbar: 4px; --gap-menu: 0; --border-toolbar: none; --border-menu: none; --border-menu-item: none; --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); --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); --height-toolbar: 48px; --height-menu-item: 24px; --width-toolbar: fit-content; --radius-toolbar: 0; --radius-menu: 0; --padding-toolbar: 4px; --padding-menu: 2px 0; --padding-menu-item: 2px 8px; /* DIALOGS */ --color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%); } /* Extra styles */ h6 { /* Make it look nicer */ text-transform: uppercase; color: var(--color-accent); } :any-link, .link-button { /* Make them nicer, not possible with the font property */ font-weight: 500; text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .1em; } button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button { /* Make it look nicer */ text-transform: uppercase; } .toast-container li { /* Toast appear */ animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1); transform-origin: bottom; } .toast-container li.removing { /* Toast disappear */ animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45); } .toast-container li.removing ~ li { /* TODO */ } @keyframes toastSlide { 0% { opacity: 0; transform: translateY(100vh); } 100% { opacity: 1; transform: translateY(0); } } @keyframes toastCompress { 0% { transform: rotateX(0); opacity: 1; } 100% { transform: rotateX(180deg); opacity: 0; } } input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after { /* Checked */ animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1); } input[type="checkbox"]:not(.switch), input[type="radio"] { /* Transition background */ transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1); } input[type="checkbox"].switch::after { /* Transition switch thumb */ transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1); } input[type="range"]::-webkit-slider-thumb { transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1); } input[type="range"]::-moz-range-thumb { transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1); } button, .button, input[type="file"]::file-selector-button, input, select, textarea { transition: 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); } @keyframes check { 0% { transform: scale(0); } 100% { transform: scale(1); } } .navbar { position: sticky; } :is(.navbar, .breadcrumbs) a:not(:hover) { text-decoration: none; } x-notebook > label:has(input[type="radio"]:checked) { border-bottom: 4px solid var(--color-accent); transition: border 125ms ease; } x-notebook > label { text-transform: uppercase; font-weight: 600; flex: 1 0 auto; } th, ol.table > li.list-header { border: none; } th, td { text-align: start; } .chat-bubble::before { content: ""; position: absolute; width: 1em; height: 1em; border: 0.75em solid; border-color: transparent var(--color-bubble) transparent transparent; left: -1.5em; top: 1em; } .bubble-alt::before { content: ""; position: absolute; width: 1em; height: 1em; border: 0.75em solid; border-color: transparent transparent transparent var(--color-bubble-alt); transform: translateX(100%); width: 100%; left: 0; top: 1em; } ::placeholder { opacity: 0.5; } :is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat { border-bottom: 2px solid var(--color-primary) !important; } :disabled { opacity: 0.5; } input[type="color"] { padding: 0; border: 0; overflow: hidden; } input[type="color"]::-webkit-color-swatch { border: none; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } :is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus { outline: none; /* there is a blinking cursor, better not to have an outline */ } textarea { font: var(--mono-font); } button:has(iconify-icon) { min-width: var(--height-button); } details.dropdown[open] > summary ~ * { animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top; } @keyframes menu { 0% { transform: rotateX(-90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } } details.slidein[open] > summary ~ * { animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left; } @keyframes menu2 { 0% { transform: rotateY(-90deg); opacity: 0; } 100% { transform: rotateY(0); opacity: 1; } } dialog:modal { animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1); transform-origin: center; } dialog { transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1); } dialog.sheet-left:modal { animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1); transform-origin: left; } dialog.sheet-right:modal { animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1); transform-origin: right; } dialog.sheet-top:modal { animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1); transform-origin: top; } dialog.sheet-bottom:modal { animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1); transform-origin: bottom; } dialog::backdrop { backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px); } @keyframes entranceX { 0% { transform: rotateY(-90deg); } 100% { transform: rotateY(0); } } @keyframes entranceY { 0% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } :where(.navrail, .navbar, .sidenav) > iconify-icon { font-size: 1.5rem; } .navbar > *, .navbar > ul > li > * { height: var(--height-navbar); display: flex; align-items: center; justify-content: center; } header:has(.navbar) .breadcrumbs { z-index: 2 !important; position: relative; box-shadow: none; } .navbar a { font-weight: 500; } x-notebook > label:has(input[type="radio"]:checked) { background: var(--color-tab-selected); color: var(--color-tab-selected-text); border: none; box-shadow: inset 0 -4px 0 var(--color-accent); transition: box-shadow 125ms ease; } x-notebook > label:has(input[type="radio"]) { transition: box-shadow 125ms ease; } .file-link, .button, #forum-banner a, .nolink, ins, .code-view > ins, del, .code-view > del, #pagination > a { text-decoration: none; }