mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-03-13 06:08:12 +01:00
392 lines
26 KiB
CSS
392 lines
26 KiB
CSS
:root {
|
|
/* theme */
|
|
--theme-root-font-size: 14px;
|
|
--theme-accent: 250, 130, 0;
|
|
--theme-radius: 0.2rem;
|
|
--theme-black: 0, 0, 0;
|
|
--theme-white: 255, 255, 255;
|
|
--theme-shade-neg-10: 25, 25, 25;
|
|
--theme-shade-neg-09: 25, 25, 25;
|
|
--theme-shade-neg-08: 25, 25, 25;
|
|
--theme-shade-neg-07: 25, 25, 25;
|
|
--theme-shade-neg-06: 25, 25, 25;
|
|
--theme-shade-neg-05: 25, 25, 25;
|
|
--theme-shade-neg-04: 25, 25, 25;
|
|
--theme-shade-neg-03: 25, 25, 25;
|
|
--theme-shade-neg-02: 25, 25, 25;
|
|
--theme-shade-neg-01: 25, 25, 25;
|
|
--theme-shade: 25, 25, 25;
|
|
--theme-shade-pos-01: 25, 25, 25;
|
|
--theme-shade-pos-02: 25, 25, 25;
|
|
--theme-shade-pos-03: 25, 25, 25;
|
|
--theme-shade-pos-04: 25, 25, 25;
|
|
--theme-shade-pos-05: 25, 25, 25;
|
|
--theme-shade-pos-06: 25, 25, 25;
|
|
--theme-shade-pos-07: 25, 25, 25;
|
|
--theme-shade-pos-08: 25, 25, 25;
|
|
--theme-shade-pos-09: 25, 25, 25;
|
|
--theme-shade-pos-10: 25, 25, 25;
|
|
--theme-preset-background-nighttab-01: 25, 25, 25;
|
|
--theme-preset-background-nighttab-02: 25, 25, 25;
|
|
--theme-preset-background-nighttab-03: 25, 25, 25;
|
|
--theme-preset-background-nighttab-04: 25, 25, 25;
|
|
--theme-preset-accent-nighttab: 25, 25, 25;
|
|
--theme-preset-font-display-nighttab: sans-serif;
|
|
--theme-preset-font-ui-nighttab: sans-serif;
|
|
--theme-preset-background-midnight-01: 25, 25, 25;
|
|
--theme-preset-background-midnight-02: 25, 25, 25;
|
|
--theme-preset-background-midnight-03: 25, 25, 25;
|
|
--theme-preset-background-midnight-04: 25, 25, 25;
|
|
--theme-preset-accent-midnight: 25, 25, 25;
|
|
--theme-preset-font-display-midnight: sans-serif;
|
|
--theme-preset-font-ui-midnight: sans-serif;
|
|
--theme-preset-background-cruiser-01: 25, 25, 25;
|
|
--theme-preset-background-cruiser-02: 25, 25, 25;
|
|
--theme-preset-background-cruiser-03: 25, 25, 25;
|
|
--theme-preset-background-cruiser-04: 25, 25, 25;
|
|
--theme-preset-accent-cruiser: 25, 25, 25;
|
|
--theme-preset-font-display-cruiser: sans-serif;
|
|
--theme-preset-font-ui-cruiser: sans-serif;
|
|
--theme-preset-background-sharpmint-01: 25, 25, 25;
|
|
--theme-preset-background-sharpmint-02: 25, 25, 25;
|
|
--theme-preset-background-sharpmint-03: 25, 25, 25;
|
|
--theme-preset-background-sharpmint-04: 25, 25, 25;
|
|
--theme-preset-accent-sharpmint: 25, 25, 25;
|
|
--theme-preset-font-display-sharpmint: sans-serif;
|
|
--theme-preset-font-ui-sharpmint: sans-serif;
|
|
--theme-preset-background-snowglow-01: 25, 25, 25;
|
|
--theme-preset-background-snowglow-02: 25, 25, 25;
|
|
--theme-preset-background-snowglow-03: 25, 25, 25;
|
|
--theme-preset-background-snowglow-04: 25, 25, 25;
|
|
--theme-preset-accent-snowglow: 25, 25, 25;
|
|
--theme-preset-font-display-snowglow: sans-serif;
|
|
--theme-preset-font-ui-snowglow: sans-serif;
|
|
--theme-preset-background-rumble-01: 25, 25, 25;
|
|
--theme-preset-background-rumble-02: 25, 25, 25;
|
|
--theme-preset-background-rumble-03: 25, 25, 25;
|
|
--theme-preset-background-rumble-04: 25, 25, 25;
|
|
--theme-preset-accent-rumble: 25, 25, 25;
|
|
--theme-preset-font-display-rumble: sans-serif;
|
|
--theme-preset-font-ui-rumble: sans-serif;
|
|
--theme-preset-background-sollight-01: 25, 25, 25;
|
|
--theme-preset-background-sollight-02: 25, 25, 25;
|
|
--theme-preset-background-sollight-03: 25, 25, 25;
|
|
--theme-preset-background-sollight-04: 25, 25, 25;
|
|
--theme-preset-accent-sollight: 25, 25, 25;
|
|
--theme-preset-font-display-sollight: sans-serif;
|
|
--theme-preset-font-ui-sollight: sans-serif;
|
|
--theme-preset-background-artdeco-01: 25, 25, 25;
|
|
--theme-preset-background-artdeco-02: 25, 25, 25;
|
|
--theme-preset-background-artdeco-03: 25, 25, 25;
|
|
--theme-preset-background-artdeco-04: 25, 25, 25;
|
|
--theme-preset-accent-artdeco: 25, 25, 25;
|
|
--theme-preset-font-display-artdeco: sans-serif;
|
|
--theme-preset-font-ui-artdeco: sans-serif;
|
|
--theme-preset-background-macaroon-01: 25, 25, 25;
|
|
--theme-preset-background-macaroon-02: 25, 25, 25;
|
|
--theme-preset-background-macaroon-03: 25, 25, 25;
|
|
--theme-preset-background-macaroon-04: 25, 25, 25;
|
|
--theme-preset-accent-macaroon: 25, 25, 25;
|
|
--theme-preset-font-display-macaroon: sans-serif;
|
|
--theme-preset-font-ui-macaroon: sans-serif;
|
|
--theme-preset-background-hotpepper-01: 25, 25, 25;
|
|
--theme-preset-background-hotpepper-02: 25, 25, 25;
|
|
--theme-preset-background-hotpepper-03: 25, 25, 25;
|
|
--theme-preset-background-hotpepper-04: 25, 25, 25;
|
|
--theme-preset-accent-hotpepper: 25, 25, 25;
|
|
--theme-preset-font-display-hotpepper: sans-serif;
|
|
--theme-preset-font-ui-hotpepper: sans-serif;
|
|
--theme-preset-background-steel-01: 25, 25, 25;
|
|
--theme-preset-background-steel-02: 25, 25, 25;
|
|
--theme-preset-background-steel-03: 25, 25, 25;
|
|
--theme-preset-background-steel-04: 25, 25, 25;
|
|
--theme-preset-accent-steel: 25, 25, 25;
|
|
--theme-preset-font-display-steel: sans-serif;
|
|
--theme-preset-font-ui-steel: sans-serif;
|
|
--theme-preset-background-outrun-01: 25, 25, 25;
|
|
--theme-preset-background-outrun-02: 25, 25, 25;
|
|
--theme-preset-background-outrun-03: 25, 25, 25;
|
|
--theme-preset-background-outrun-04: 25, 25, 25;
|
|
--theme-preset-accent-outrun: 25, 25, 25;
|
|
--theme-preset-font-display-outrun: sans-serif;
|
|
--theme-preset-font-ui-outrun: sans-serif;
|
|
--theme-preset-background-pumpkin-01: 25, 25, 25;
|
|
--theme-preset-background-pumpkin-02: 25, 25, 25;
|
|
--theme-preset-background-pumpkin-03: 25, 25, 25;
|
|
--theme-preset-background-pumpkin-04: 25, 25, 25;
|
|
--theme-preset-accent-pumpkin: 25, 25, 25;
|
|
--theme-preset-font-display-pumpkin: sans-serif;
|
|
--theme-preset-font-ui-pumpkin: sans-serif;
|
|
--theme-preset-background-bubblegum-01: 25, 25, 25;
|
|
--theme-preset-background-bubblegum-02: 25, 25, 25;
|
|
--theme-preset-background-bubblegum-03: 25, 25, 25;
|
|
--theme-preset-background-bubblegum-04: 25, 25, 25;
|
|
--theme-preset-accent-bubblegum: 25, 25, 25;
|
|
--theme-preset-font-display-bubblegum: sans-serif;
|
|
--theme-preset-font-ui-bubblegum: sans-serif;
|
|
--theme-preset-preview-size: 6em;
|
|
/* header */
|
|
--header-area-width: 100%;
|
|
--header-shade-color: var(--theme-color-01);
|
|
--header-shade-opacity: 0.95;
|
|
--header-search-width: 0%;
|
|
--header-border-top: 0;
|
|
--header-border-bottom: 0;
|
|
--header-date-size: 1em;
|
|
--header-clock-size: 1em;
|
|
--header-search-size: 1em;
|
|
--header-button-size: 1em;
|
|
--header-greeting-size: 1em;
|
|
--header-transitional-size: 1em;
|
|
/* group */
|
|
--group-name-size: 1em;
|
|
--group-border: 0;
|
|
/* link */
|
|
--link-area-width: 100%;
|
|
--link-item-color-theme: var(--theme-color-02);
|
|
--link-item-color-custom: rgb(0, 0, 0);
|
|
--link-item-size: 1em;
|
|
--link-item-display-space: 0.25em;
|
|
--link-item-display-gutter: 2;
|
|
--link-item-display-letter-size: 2em;
|
|
--link-item-display-icon-size: 2.5em;
|
|
--link-item-display-rotate: 0deg;
|
|
--link-item-display-translate-x: 0em;
|
|
--link-item-display-translate-y: 0em;
|
|
--link-item-display-name-size: 0.9em;
|
|
--link-item-border: 1;
|
|
/* layout */
|
|
--layout-size: 1;
|
|
--layout-width: 80%;
|
|
--layout-line-width: 0.2em;
|
|
--layout-space: 0.5em;
|
|
--layout-padding: 4;
|
|
--layout-gutter: 4;
|
|
--layout-duration-01: 0.1s;
|
|
--layout-duration-02: 0.2s;
|
|
--layout-duration-03: 0.3s;
|
|
--layout-duration-04: 0.4s;
|
|
--layout-duration-05: 0.5s;
|
|
--layout-duration-06: 0.6s;
|
|
--layout-duration-07: 0.7s;
|
|
--layout-duration-08: 0.8s;
|
|
--layout-duration-09: 0.9s;
|
|
--layout-duration-10: 1s;
|
|
--layout-timing-extra-fast: var(--layout-duration-02) ease-in-out;
|
|
--layout-timing-fast: var(--layout-duration-04) ease-in-out;
|
|
--layout-timing-medium: var(--layout-duration-06) ease-in-out;
|
|
--layout-timing-slow: var(--layout-duration-08) ease-in-out;
|
|
--layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
|
|
--layout-shadow-small: 0 0 0.25em rgba(0, 0, 0, 0.2),
|
|
0 0 0.5em rgba(0, 0, 0, 0.1);
|
|
--layout-shadow-medium: 0 0 0.5em rgba(0, 0, 0, 0.2),
|
|
0 0 1em rgba(0, 0, 0, 0.1);
|
|
--layout-shadow-large: 0 0 1em rgba(0, 0, 0, 0.2),
|
|
0 0 2em rgba(0, 0, 0, 0.1);
|
|
--horizontal-rule: calc(var(--layout-line-width) / 2) solid rgb(var(--theme-color-02));
|
|
/* background */
|
|
--background-color-theme: var(--theme-color-01);
|
|
--background-color-custom: rgb(0, 0, 0);
|
|
--background-image: none;
|
|
--background-opacity: 1;
|
|
--background-scale: 1;
|
|
--background-accent: 0;
|
|
--background-blur: 0;
|
|
/* form */
|
|
--form-label: var(--theme-color-16);
|
|
--form-label-hover: var(--theme-color-20);
|
|
--form-label-focus-active: var(--theme-style-text);
|
|
--form-label-checked: var(--theme-style-text);
|
|
--form-label-disabled: var(--theme-color-04);
|
|
--form-input-text: var(--theme-color-16);
|
|
--form-input-text-hover: var(--theme-color-18);
|
|
--form-input-text-focus-active: var(--theme-style-text);
|
|
--form-input-text-disabled: var(--theme-color-04);
|
|
--form-input-background: var(--theme-color-02);
|
|
--form-input-background-hover: var(--theme-color-02);
|
|
--form-input-background-focus-active: var(--theme-color-01);
|
|
--form-input-background-disabled: var(--theme-color-01);
|
|
--form-input-border: var(--theme-color-02);
|
|
--form-input-border-hover: var(--theme-color-02);
|
|
--form-input-border-focus-active: var(--theme-color-01);
|
|
--form-input-border-disabled: var(--theme-color-01);
|
|
--form-group-text-background: var(--theme-color-02);
|
|
--form-group-text-background-focus-hover: var(--theme-color-02);
|
|
--form-group-text-background-active: var(--theme-color-02);
|
|
--form-group-text-background-disabled: var(--theme-color-01);
|
|
--form-group-text-border: var(--theme-color-02);
|
|
--form-group-text-border-focus-hover: var(--theme-color-02);
|
|
--form-group-text-border-active: var(--theme-color-02);
|
|
--form-group-text-border-disabled: var(--theme-color-01);
|
|
--form-border-disabled: var(--theme-color-02);
|
|
--form-icon: var(--theme-color-08);
|
|
--form-icon-hover: var(--theme-color-16);
|
|
--form-icon-focus: var(--theme-color-18);
|
|
--form-icon-active: var(--theme-style-text);
|
|
--form-icon-checked: var(--theme-style-text);
|
|
--form-icon-disabled: var(--theme-color-04);
|
|
--form-icon-symbol: var(--theme-color-01);
|
|
--form-icon-symbol-active: var(--theme-color-01);
|
|
--form-icon-symbol-disabled: var(--theme-color-01);
|
|
--form-placeholder: var(--theme-color-06);
|
|
--form-placeholder-focus-hover: var(--theme-color-10);
|
|
--form-placeholder-disabled: var(--theme-color-03);
|
|
--form-checkbox-radio-label: var(--theme-color-12);
|
|
--form-checkbox-radio-checked-label: var(--theme-color-16);
|
|
--form-checkbox-radio-disabled-label: var(--theme-color-04);
|
|
--form-feedback-text: var(--theme-color-16);
|
|
--form-feedback-text-muted: var(--theme-color-12);
|
|
--form-feedback-text-disabled: var(--theme-color-04);
|
|
--form-feedback-background: var(--theme-color-02);
|
|
--form-feedback-background-disabled: var(--theme-color-01);
|
|
--form-feedback-border: var(--theme-color-04);
|
|
--form-feedback-border-disabled: var(--theme-color-02);
|
|
--form-helper: var(--theme-color-12);
|
|
--form-helper-disabled: var(--theme-color-04);
|
|
--form-thumb-size: 1.25em;
|
|
--form-range-thumb-background: var(--theme-color-16);
|
|
--form-range-thumb-background-hover: var(--theme-color-18);
|
|
--form-range-thumb-background-focus: var(--theme-style-text);
|
|
--form-range-thumb-background-active: var(--theme-style-text);
|
|
--form-range-thumb-background-disabled: var(--theme-color-03);
|
|
--form-range-track-background: var(--theme-color-06);
|
|
--form-range-track-background-focus-hover: var(--theme-color-04);
|
|
--form-range-track-background-active: var(--theme-color-03);
|
|
--form-range-track-background-disabled: var(--theme-color-02);
|
|
--form-range-progress-background: var(--theme-color-08);
|
|
--form-range-progress-background-active: var(--theme-accent);
|
|
--form-range-progress-background-disabled: var(--theme-color-02);
|
|
--form-grid-background: var(--theme-color-02);
|
|
--form-grid-background-hover: var(--theme-color-02);
|
|
--form-grid-background-focus: var(--theme-color-02);
|
|
--form-grid-background-disabled: var(--theme-color-01);
|
|
--form-grid-border: var(--theme-color-08);
|
|
--form-grid-border-hover-focus: var(--theme-color-20);
|
|
--form-grid-border-active: var(--theme-accent);
|
|
--form-grid-border-checked: var(--theme-accent);
|
|
--form-grid-border-disabled: var(--theme-color-04);
|
|
--form-dropdown-background: var(--theme-color-02);
|
|
--form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-06));
|
|
--form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-10)),
|
|
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
|
|
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
|
|
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
|
/* button */
|
|
--button-background: var(--theme-color-02);
|
|
--button-background-focus-hover: var(--theme-color-03);
|
|
--button-background-active: var(--theme-color-04);
|
|
--button-background-disabled: var(--theme-color-01);
|
|
--button-border: var(--theme-color-02);
|
|
--button-border-focus-hover: var(--theme-color-06);
|
|
--button-border-active: var(--theme-accent);
|
|
--button-border-disabled: var(--theme-color-01);
|
|
--button-text: var(--theme-color-12);
|
|
--button-text-focus-hover: var(--theme-color-20);
|
|
--button-text-active: var(--theme-style-text);
|
|
--button-text-disabled: var(--theme-color-04);
|
|
--button-link-text: var(--theme-color-12);
|
|
--button-link-text-focus-hover: var(--theme-style-text);
|
|
--button-link-text-active: var(--theme-style-text);
|
|
--button-link-text-disabled: var(--theme-color-04);
|
|
/* edge */
|
|
--edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
|
|
inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
|
|
inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
|
|
/* font */
|
|
--font-display: "Fjalla One Regular", sans-serif;
|
|
--font-ui: "Open Sans Regular", sans-serif;
|
|
/* z index */
|
|
--z-index-background: 1000;
|
|
--z-index-link: 2000;
|
|
--z-index-header: 3000;
|
|
--z-index-tip: 4000;
|
|
--z-index-shade: 5000;
|
|
--z-index-modal: 6000;
|
|
--z-index-menu: 7000;
|
|
--z-index-auto-suggest: 8000;
|
|
--z-index-dropdown: 9000;
|
|
--z-index-edge: 10000;
|
|
/* breakpoint */
|
|
/* can not be used in @media as of yet */
|
|
--breakpoint-sm: 550px;
|
|
--breakpoint-md: 700px;
|
|
--breakpoint-lg: 900px;
|
|
--breakpoint-xl: 1100px;
|
|
--breakpoint-xxl: 1600px;
|
|
}
|
|
|
|
.is-theme-style-dark {
|
|
/* theme */
|
|
--theme-color: var(--theme-shade);
|
|
--theme-color-01: var(--theme-shade-neg-10);
|
|
--theme-color-02: var(--theme-shade-neg-09);
|
|
--theme-color-03: var(--theme-shade-neg-08);
|
|
--theme-color-04: var(--theme-shade-neg-07);
|
|
--theme-color-05: var(--theme-shade-neg-06);
|
|
--theme-color-06: var(--theme-shade-neg-05);
|
|
--theme-color-07: var(--theme-shade-neg-04);
|
|
--theme-color-08: var(--theme-shade-neg-03);
|
|
--theme-color-09: var(--theme-shade-neg-02);
|
|
--theme-color-10: var(--theme-shade-neg-01);
|
|
--theme-color-11: var(--theme-shade-pos-01);
|
|
--theme-color-12: var(--theme-shade-pos-02);
|
|
--theme-color-13: var(--theme-shade-pos-03);
|
|
--theme-color-14: var(--theme-shade-pos-04);
|
|
--theme-color-15: var(--theme-shade-pos-05);
|
|
--theme-color-16: var(--theme-shade-pos-06);
|
|
--theme-color-17: var(--theme-shade-pos-07);
|
|
--theme-color-18: var(--theme-shade-pos-08);
|
|
--theme-color-19: var(--theme-shade-pos-09);
|
|
--theme-color-20: var(--theme-shade-pos-10);
|
|
--theme-style-text: var(--theme-white);
|
|
}
|
|
|
|
.is-theme-style-light {
|
|
/* theme */
|
|
--theme-color: var(--theme-shade);
|
|
--theme-color-01: var(--theme-shade-pos-10);
|
|
--theme-color-02: var(--theme-shade-pos-09);
|
|
--theme-color-03: var(--theme-shade-pos-08);
|
|
--theme-color-04: var(--theme-shade-pos-07);
|
|
--theme-color-05: var(--theme-shade-pos-06);
|
|
--theme-color-06: var(--theme-shade-pos-05);
|
|
--theme-color-07: var(--theme-shade-pos-04);
|
|
--theme-color-08: var(--theme-shade-pos-03);
|
|
--theme-color-09: var(--theme-shade-pos-02);
|
|
--theme-color-10: var(--theme-shade-pos-01);
|
|
--theme-color-11: var(--theme-shade-neg-01);
|
|
--theme-color-12: var(--theme-shade-neg-02);
|
|
--theme-color-13: var(--theme-shade-neg-03);
|
|
--theme-color-14: var(--theme-shade-neg-04);
|
|
--theme-color-15: var(--theme-shade-neg-05);
|
|
--theme-color-16: var(--theme-shade-neg-06);
|
|
--theme-color-17: var(--theme-shade-neg-07);
|
|
--theme-color-18: var(--theme-shade-neg-08);
|
|
--theme-color-19: var(--theme-shade-neg-09);
|
|
--theme-color-20: var(--theme-shade-neg-10);
|
|
--theme-style-text: var(--theme-black);
|
|
}
|
|
|
|
.is-link-style-block {
|
|
/* link */
|
|
--link-item-width: 11em;
|
|
--link-item-height: 10em;
|
|
--link-item-url-height: 20%;
|
|
--link-item-edit-height: 50%;
|
|
}
|
|
|
|
.is-link-style-list {
|
|
/* link */
|
|
--link-item-width: 20em;
|
|
--link-item-height: 4em;
|
|
--link-item-url-height: 30%;
|
|
--link-item-edit-height: 50%;
|
|
}
|
|
|
|
@media (min-width: 700px) {
|
|
:root {
|
|
/* theme */
|
|
--theme-root-font-size: 16px;
|
|
}
|
|
}
|