forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
199 lines
6.4 KiB
CSS
199 lines
6.4 KiB
CSS
:root {
|
|
--gin-color-title: #222330;
|
|
--gin-color-text: #222330;
|
|
--gin-color-text-light: #545560;
|
|
--gin-color-focus: rgba(0, 125, 250, .6);
|
|
--gin-color-focus-border: rgba(0, 0, 0, .2);
|
|
--gin-color-focus-neutral-rgb: rgba(0, 0, 0, .4);
|
|
--gin-color-disabled: #8d8d8d;
|
|
--gin-color-disabled-bg: #eaeaea;
|
|
--gin-color-disabled-border: #c2c2c2;
|
|
--gin-color-warning: #d8b234;
|
|
--gin-color-warning-light: #efcf64;
|
|
--gin-bg-warning: #605328;
|
|
--gin-bg-warning-light: rgba(226, 151, 0, .08);
|
|
--gin-color-danger: #cc3d3d;
|
|
--gin-color-danger-lightest: #fdd9d9;
|
|
--gin-color-danger-light: #f39b9d;
|
|
--gin-bg-danger: #583333;
|
|
--gin-bg-danger-light: rgba(222, 117, 96, .1);
|
|
--gin-color-green: #058260;
|
|
--gin-color-green-light: #32cea4;
|
|
--gin-color-green-lightest: #adebdb;
|
|
--gin-bg-green: #145242;
|
|
--gin-bg-green-light: rgba(72, 171, 123, .1);
|
|
--gin-color-info: #082538;
|
|
--gin-color-info-light: #589ac5;
|
|
--gin-bg-info: #122b3c;
|
|
--gin-color-contextual: var(--gin-color-text);
|
|
--gin-color-contextual-text: #eee;
|
|
--gin-bg-input: #fff;
|
|
--gin-bg-layer: #fff;
|
|
--gin-bg-layer2: #edeff5;
|
|
--gin-bg-layer3: #fff;
|
|
--gin-bg-layer4: #e2e5ec;
|
|
--gin-bg-secondary: var(--gin-bg-layer);
|
|
--gin-bg-header: #eeeff3;
|
|
--gin-pattern: var(--gin-border-color);
|
|
--gin-pattern-fallback: var(--gin-bg-layer2);
|
|
--gin-pattern-square: .5rem;
|
|
--gin-font: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
|
|
--gin-font-size-xxs: .75rem;
|
|
--gin-font-size-xs: small;
|
|
--gin-font-size-s: .875rem;
|
|
--gin-font-size: 1rem;
|
|
--gin-font-size-m: var(--gin-font-size);
|
|
--gin-font-size-l: 1.125rem;
|
|
--gin-font-size-xl: 1.25rem;
|
|
--gin-font-size-h3: 1.5rem;
|
|
--gin-font-size-h2: 1.75rem;
|
|
--gin-font-size-h1: 1.6rem;
|
|
--gin-font-size-quote: 1.1em;
|
|
--gin-font-weight-normal: 400;
|
|
--gin-font-weight-semibold: 525;
|
|
--gin-font-weight-bold: 575;
|
|
--gin-font-weight-heavy: 625;
|
|
--gin-spacing-xxs: .25rem;
|
|
--gin-spacing-xs: .5rem;
|
|
--gin-spacing-s: .75rem;
|
|
--gin-spacing-m: 1rem;
|
|
--gin-spacing-l: 1.5rem;
|
|
--gin-spacing-xl: 2rem;
|
|
--gin-spacing-xxl: 3rem;
|
|
--gin-spacing-xxxl: 4rem;
|
|
--gin-icon-color: #414247;
|
|
--gin-icon-size-close: 20px;
|
|
--gin-icon-size-toolbar-secondary: 17px;
|
|
--gin-icon-size-toolbar: 17px;
|
|
--gin-icon-size-sidebar-toggle: 21px;
|
|
--gin-border-xxs: .125rem;
|
|
--gin-border-xs: .25rem;
|
|
--gin-border-s: .375rem;
|
|
--gin-border-m: .5rem;
|
|
--gin-border-l: .75rem;
|
|
--gin-border-xl: 1rem;
|
|
--gin-border-color: #d4d4d8;
|
|
--gin-border-color-secondary: rgba(0, 0, 0, .08);
|
|
--gin-border-color-layer: rgba(0, 0, 0, .08);
|
|
--gin-border-color-layer2: #d4d4d8;
|
|
--gin-border-color-table: rgba(0, 0, 0, .1);
|
|
--gin-border-color-table-header: rgba(0, 0, 0, .2);
|
|
--gin-border-color-form-element: #8e929c;
|
|
--gin-easing: cubic-bezier(.19, 1, .22, 1);
|
|
--gin-transition: .15s var(--gin-easing);
|
|
--gin-transition-fast: .3s var(--gin-easing);
|
|
--gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
|
|
--gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%), 0 20px 24px rgb(20 45 82 / 12%);
|
|
--gin-height-sticky: 72px;
|
|
--gin-toolbar-width-collapsed: 66px;
|
|
--gin-toolbar-width: 256px;
|
|
--gin-toolbar-bg-level2: #edeff5;
|
|
--gin-toolbar-bg-level3: rgba(44, 45, 47, .05);
|
|
--gin-sidebar-width: 320px;
|
|
--gin-sidebar-offset: var(--gin-sidebar-width);
|
|
--gin-switch: #26a769;
|
|
--gin-shadow-button: #00000033;
|
|
--gin-color-button-text: #fff;
|
|
}
|
|
|
|
@media (min-width: 61em) {
|
|
:root {
|
|
--gin-font-size-h1: 1.8125rem;
|
|
--gin-font-size-quote: 1.2em;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 90em) {
|
|
:root {
|
|
--gin-font-size-h1: 2.125rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 61em) {
|
|
:root {
|
|
--gin-icon-size-toolbar: 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 80em) {
|
|
:root {
|
|
--gin-sidebar-width: 360px;
|
|
}
|
|
}
|
|
|
|
[data-gin-layout-density=small] {
|
|
--gin-spacing-density-xxs: .15625rem;
|
|
--gin-spacing-density-xs: .3125rem;
|
|
--gin-spacing-density-s: .46875rem;
|
|
--gin-spacing-density-m: .625rem;
|
|
--gin-spacing-density-l: .9375rem;
|
|
--gin-spacing-density-xl: 1.25rem;
|
|
--gin-spacing-density-xxl: 1.875rem;
|
|
--gin-spacing-density-xxxl: 2.5rem;
|
|
}
|
|
|
|
[data-gin-layout-density=medium] {
|
|
--gin-spacing-density-xxs: .1875rem;
|
|
--gin-spacing-density-xs: .375rem;
|
|
--gin-spacing-density-s: .5625rem;
|
|
--gin-spacing-density-m: .75rem;
|
|
--gin-spacing-density-l: 1.125rem;
|
|
--gin-spacing-density-xl: 1.5rem;
|
|
--gin-spacing-density-xxl: 2.25rem;
|
|
--gin-spacing-density-xxxl: 3rem;
|
|
}
|
|
|
|
:root {
|
|
--gin-spacing-density-xxs: .25rem;
|
|
--gin-spacing-density-xs: .5rem;
|
|
--gin-spacing-density-s: .75rem;
|
|
--gin-spacing-density-m: 1rem;
|
|
--gin-spacing-density-l: 1.5rem;
|
|
--gin-spacing-density-xl: 2rem;
|
|
--gin-spacing-density-xxl: 3rem;
|
|
--gin-spacing-density-xxxl: 4rem;
|
|
}
|
|
|
|
.gin--dark-mode {
|
|
--gin-color-title: #fff;
|
|
--gin-color-text: #d2d3d3;
|
|
--gin-color-text-light: #9e9fa0;
|
|
--gin-shadow-button: rgba(#111, .9);
|
|
--gin-color-button-text: #111;
|
|
--gin-color-focus: rgb(81, 168, 255);
|
|
--gin-color-focus-border: rgba(0, 0, 0, .8);
|
|
--gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);
|
|
--gin-color-disabled: #646464;
|
|
--gin-color-disabled-border: #646464;
|
|
--gin-color-disabled-bg: #47474c;
|
|
--gin-color-warning: #dec15f;
|
|
--gin-bg-warning-light: rgba(222, 193, 95, .1);
|
|
--gin-color-danger: #ce6060;
|
|
--gin-color-danger-lightest: #483439;
|
|
--gin-color-green: #32cea4;
|
|
--gin-color-info: #559bca;
|
|
--gin-bg-input: var(--gin-bg-layer2);
|
|
--gin-bg-app: #1b1b1d;
|
|
--gin-bg-layer: #2a2a2d;
|
|
--gin-bg-layer2: #3b3b3f;
|
|
--gin-bg-layer3: #47474c;
|
|
--gin-bg-layer4: #19191b;
|
|
--gin-bg-secondary: var(--gin-bg-app);
|
|
--gin-color-contextual: var(--gin-bg-layer3);
|
|
--gin-border-color: #43454a;
|
|
--gin-border-color-secondary: rgba(255, 255, 255, .075);
|
|
--gin-border-color-layer: rgba(0, 0, 0, .05);
|
|
--gin-border-color-layer2: #76777b;
|
|
--gin-border-color-table: #43454a;
|
|
--gin-border-color-table-header: rgba(255, 255, 255, .12);
|
|
--gin-border-color-form-element: var(--gin-border-color-layer2);
|
|
--gin-bg-header: #1b1b1d;
|
|
--gin-switch: var(--gin-color-primary);
|
|
--gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%);
|
|
--gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%), 0 20px 24px rgb(0 0 0 / 12%);
|
|
--gin-icon-color: #888;
|
|
--gin-pattern-fallback: var(--gin-bg-layer2);
|
|
--gin-pattern: var(--gin-border-color);
|
|
}
|
|
|