mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 21:45:31 +09:00
240 lines
11 KiB
CSS
240 lines
11 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
:root {
|
|
--sl-font: var(--fluxer-font-stack);
|
|
--sl-font-mono: var(--fluxer-mono-stack);
|
|
--saturation-factor: 1;
|
|
|
|
--sl-text-2xs: 0.6875rem;
|
|
--sl-text-xs: 0.75rem;
|
|
--sl-text-sm: 0.875rem;
|
|
--sl-text-base: 1rem;
|
|
--sl-text-lg: 1.125rem;
|
|
--sl-text-xl: 1.25rem;
|
|
--sl-text-2xl: 1.5rem;
|
|
--sl-text-3xl: 1.875rem;
|
|
--sl-text-4xl: 2.25rem;
|
|
--sl-text-5xl: 3rem;
|
|
--sl-text-6xl: 3.75rem;
|
|
|
|
--sl-text-body: var(--sl-text-base);
|
|
--sl-text-body-sm: var(--sl-text-sm);
|
|
--sl-text-code: var(--sl-text-sm);
|
|
--sl-text-code-sm: var(--sl-text-sm);
|
|
--sl-text-h1: var(--sl-text-4xl);
|
|
--sl-text-h2: var(--sl-text-2xl);
|
|
--sl-text-h3: var(--sl-text-xl);
|
|
--sl-text-h4: var(--sl-text-lg);
|
|
--sl-text-h5: var(--sl-text-base);
|
|
--sl-text-h6: var(--sl-text-base);
|
|
|
|
--sl-line-height: 1.5;
|
|
--sl-line-height-headings: 1.25;
|
|
|
|
--sl-nav-height: 4rem;
|
|
--sl-nav-pad-x: 1rem;
|
|
--sl-nav-pad-y: 0.5rem;
|
|
--sl-mobile-toc-height: 3rem;
|
|
--sl-sidebar-width: 20rem;
|
|
--sl-sidebar-pad-x: 1.5rem;
|
|
--sl-content-width: 72rem;
|
|
--sl-content-pad-x: 1rem;
|
|
--sl-content-gap-y: 1rem;
|
|
--sl-main-pad: 0 0 3vh 0;
|
|
|
|
--flx-toc-width: 16rem;
|
|
--flx-radius: 0.375rem;
|
|
--flx-radius-lg: 0.5rem;
|
|
--flx-radius-pill: 999px;
|
|
|
|
--flx-brand: hsl(242, calc(70% * var(--saturation-factor)), 55%);
|
|
--flx-on-brand: hsl(0, 0%, 98%);
|
|
|
|
--flx-code-block-font-size: 0.875rem;
|
|
--flx-code-inline-font-size: 0.9375em;
|
|
}
|
|
|
|
:root {
|
|
--flx-background-primary: hsl(258, calc(10% * var(--saturation-factor)), 5%);
|
|
--flx-background-secondary: hsl(258, calc(10% * var(--saturation-factor)), 10.59%);
|
|
--flx-background-secondary-lighter: hsl(258, calc(10% * var(--saturation-factor)), 12.44%);
|
|
--flx-background-secondary-alt: hsl(258, calc(10% * var(--saturation-factor)), 14.15%);
|
|
--flx-background-tertiary: hsl(258, calc(10% * var(--saturation-factor)), 17.16%);
|
|
|
|
--flx-text-primary: hsl(258, calc(10% * var(--saturation-factor)), 96%);
|
|
--flx-text-secondary: hsl(258, calc(10% * var(--saturation-factor)), 90.36%);
|
|
--flx-text-tertiary: hsl(258, calc(10% * var(--saturation-factor)), 70.4%);
|
|
--flx-border-color: hsla(258, calc(10% * var(--saturation-factor)), 50%, 0.2);
|
|
|
|
--flx-link: hsl(198, calc(92% * var(--saturation-factor)), 70%);
|
|
--flx-hover-bg: hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.05);
|
|
--flx-selected-bg: hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.1);
|
|
|
|
--flx-code-bg: hsl(258, calc(10% * var(--saturation-factor)), 14.5%);
|
|
--flx-code-fg: hsl(258, calc(10% * var(--saturation-factor)), 90.36%);
|
|
--flx-code-chrome-bg: hsl(258, calc(10% * var(--saturation-factor)), 17.16%);
|
|
--flx-code-border: hsl(258, calc(10% * var(--saturation-factor)), 24%);
|
|
--flx-code-dots: hsl(258, calc(10% * var(--saturation-factor)), 34%);
|
|
--flx-code-selection-bg: hsla(198, calc(92% * var(--saturation-factor)), 70%, 0.22);
|
|
--flx-code-veil: hsla(258, calc(15% * var(--saturation-factor)), 100%, 0.09);
|
|
--flx-code-text: hsl(340, calc(28% * var(--saturation-factor)), 86%);
|
|
--flx-code-link: hsl(198, calc(92% * var(--saturation-factor)), 74%);
|
|
|
|
--flx-scrollbar-thumb: color-mix(
|
|
in srgb,
|
|
hsl(258, calc(10% * var(--saturation-factor)), 22.05%) 35%,
|
|
hsl(258, calc(10% * var(--saturation-factor)), 70.4%) 65%
|
|
);
|
|
--flx-scrollbar-track: color-mix(in srgb, var(--flx-background-secondary) 80%, transparent);
|
|
|
|
--flx-accent-info: hsl(198, calc(92% * var(--saturation-factor)), 70%);
|
|
--flx-accent-success: hsl(152, calc(72% * var(--saturation-factor)), 40%);
|
|
--flx-accent-warning: hsl(45, calc(93% * var(--saturation-factor)), 50%);
|
|
--flx-accent-danger: hsl(0, calc(84% * var(--saturation-factor)), 60%);
|
|
--flx-accent-method-put: hsl(24, calc(90% * var(--saturation-factor)), 58%);
|
|
--flx-accent-method-head: hsl(281, calc(78% * var(--saturation-factor)), 68%);
|
|
--flx-tint-strength: 18%;
|
|
--flx-tint-base: var(--flx-background-primary);
|
|
}
|
|
|
|
:root[data-theme='light'] {
|
|
--flx-background-primary: hsl(220, calc(10% * var(--saturation-factor)), 98.5%);
|
|
--flx-background-secondary: hsl(220, calc(10% * var(--saturation-factor)), 92.84%);
|
|
--flx-background-secondary-lighter: hsl(220, calc(10% * var(--saturation-factor)), 94.61%);
|
|
--flx-background-secondary-alt: hsl(220, calc(10% * var(--saturation-factor)), 90.96%);
|
|
--flx-background-tertiary: hsl(220, calc(10% * var(--saturation-factor)), 88.2%);
|
|
|
|
--flx-text-primary: hsl(220, calc(10% * var(--saturation-factor)), 15%);
|
|
--flx-text-secondary: hsl(220, calc(10% * var(--saturation-factor)), 33.78%);
|
|
--flx-text-tertiary: hsl(220, calc(10% * var(--saturation-factor)), 47.76%);
|
|
--flx-border-color: hsla(220, calc(10% * var(--saturation-factor)), 40%, 0.15);
|
|
|
|
--flx-link: hsl(198, calc(92% * var(--saturation-factor)), 45%);
|
|
--flx-hover-bg: hsla(220, calc(10% * var(--saturation-factor)), 10%, 0.05);
|
|
--flx-selected-bg: hsla(220, calc(10% * var(--saturation-factor)), 10%, 0.1);
|
|
|
|
--flx-code-bg: hsl(220, calc(12% * var(--saturation-factor)), 97%);
|
|
--flx-code-fg: hsl(220, calc(12% * var(--saturation-factor)), 22%);
|
|
--flx-code-chrome-bg: hsl(220, calc(10% * var(--saturation-factor)), 92.84%);
|
|
--flx-code-border: hsl(220, calc(12% * var(--saturation-factor)), 84%);
|
|
--flx-code-dots: hsl(220, calc(10% * var(--saturation-factor)), 72%);
|
|
--flx-code-selection-bg: hsla(198, calc(92% * var(--saturation-factor)), 45%, 0.18);
|
|
--flx-code-veil: hsla(220, calc(20% * var(--saturation-factor)), 18%, 0.07);
|
|
--flx-code-text: hsl(340, calc(26% * var(--saturation-factor)), 26%);
|
|
--flx-code-link: hsl(198, calc(92% * var(--saturation-factor)), 27%);
|
|
|
|
--flx-scrollbar-thumb: color-mix(
|
|
in srgb,
|
|
hsl(220, calc(10% * var(--saturation-factor)), 86.5%) 40%,
|
|
hsl(220, calc(10% * var(--saturation-factor)), 33.78%) 60%
|
|
);
|
|
--flx-scrollbar-track: color-mix(in srgb, var(--flx-background-secondary) 50%, transparent);
|
|
|
|
--flx-accent-info: hsl(198, calc(92% * var(--saturation-factor)), 45%);
|
|
--flx-accent-success: hsl(152, calc(70% * var(--saturation-factor)), 40%);
|
|
--flx-accent-warning: hsl(45, calc(90% * var(--saturation-factor)), 45%);
|
|
--flx-accent-danger: hsl(359, calc(70% * var(--saturation-factor)), 50%);
|
|
|
|
--flx-aside-note-text: hsl(198, calc(92% * var(--saturation-factor)), 27%);
|
|
--flx-aside-tip-text: hsl(152, calc(70% * var(--saturation-factor)), 23%);
|
|
--flx-aside-caution-text: hsl(45, calc(90% * var(--saturation-factor)), 23%);
|
|
--flx-aside-danger-text: hsl(359, calc(70% * var(--saturation-factor)), 38%);
|
|
--flx-aside-note-border: var(--flx-aside-note-text);
|
|
--flx-aside-tip-border: var(--flx-aside-tip-text);
|
|
--flx-aside-caution-border: var(--flx-aside-caution-text);
|
|
--flx-aside-danger-border: var(--flx-aside-danger-text);
|
|
--flx-accent-method-put: hsl(24, calc(85% * var(--saturation-factor)), 42%);
|
|
--flx-accent-method-head: hsl(281, calc(70% * var(--saturation-factor)), 48%);
|
|
--flx-tint-strength: 12%;
|
|
--flx-tint-base: var(--flx-background-primary);
|
|
}
|
|
|
|
:root {
|
|
--sl-color-white: var(--flx-text-primary);
|
|
--sl-color-gray-1: var(--flx-text-primary);
|
|
--sl-color-gray-2: var(--flx-text-secondary);
|
|
--sl-color-gray-3: var(--flx-text-tertiary);
|
|
--sl-color-gray-4: var(--flx-text-tertiary);
|
|
--sl-color-gray-5: var(--flx-border-color);
|
|
--sl-color-gray-6: var(--flx-background-secondary);
|
|
--sl-color-gray-7: var(--flx-background-secondary-lighter);
|
|
--sl-color-black: var(--flx-background-primary);
|
|
|
|
--sl-color-accent-low: var(--flx-selected-bg);
|
|
--sl-color-accent: var(--flx-brand);
|
|
--sl-color-accent-high: var(--flx-link);
|
|
|
|
--sl-color-text: var(--flx-text-secondary);
|
|
--sl-color-text-accent: var(--flx-link);
|
|
--sl-color-text-invert: var(--flx-on-brand);
|
|
--sl-color-bg: var(--flx-background-primary);
|
|
--sl-color-bg-nav: var(--flx-background-secondary);
|
|
--sl-color-bg-sidebar: var(--flx-background-secondary);
|
|
--sl-color-bg-inline-code: var(--flx-code-bg);
|
|
--sl-color-bg-accent: var(--flx-brand);
|
|
--sl-color-hairline-light: var(--flx-border-color);
|
|
--sl-color-hairline: var(--flx-border-color);
|
|
--sl-color-hairline-shade: var(--flx-border-color);
|
|
--sl-color-backdrop-overlay: color-mix(in srgb, var(--flx-background-primary) 66%, transparent);
|
|
|
|
--flx-content-heading: var(--flx-text-primary);
|
|
--flx-content-text: var(--flx-text-secondary);
|
|
|
|
--flx-sidebar-text: var(--flx-text-tertiary);
|
|
--flx-sidebar-heading: var(--flx-text-primary);
|
|
--flx-sidebar-hover-bg: var(--flx-hover-bg);
|
|
--flx-sidebar-hover-text: var(--flx-text-primary);
|
|
--flx-sidebar-field-bg: var(--flx-background-primary);
|
|
--flx-sidebar-field-border: var(--flx-border-color);
|
|
|
|
--flx-inline-code-bg: var(--flx-code-veil);
|
|
--flx-inline-code-text: var(--flx-code-text);
|
|
--flx-inline-code-link: var(--flx-code-link);
|
|
|
|
--flx-table-head-bg: var(--flx-background-tertiary);
|
|
--flx-table-head-border: var(--flx-border-color);
|
|
--flx-table-row-bg: var(--flx-background-secondary);
|
|
--flx-table-row-alt-bg: var(--flx-background-secondary-lighter);
|
|
--flx-table-text: var(--flx-text-secondary);
|
|
|
|
--flx-badge-bg: var(--flx-background-secondary-alt);
|
|
--flx-badge-text: var(--flx-text-secondary);
|
|
--flx-collapsible-bg: var(--flx-background-secondary);
|
|
|
|
--flx-aside-note-border: var(--flx-accent-info);
|
|
--flx-aside-note-bg: color-mix(in srgb, var(--flx-accent-info) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-aside-note-text: hsl(198, calc(92% * var(--saturation-factor)), 70%);
|
|
--flx-aside-tip-border: var(--flx-accent-success);
|
|
--flx-aside-tip-bg: color-mix(in srgb, var(--flx-accent-success) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-aside-tip-text: hsl(152, calc(72% * var(--saturation-factor)), 42%);
|
|
--flx-aside-caution-border: var(--flx-accent-warning);
|
|
--flx-aside-caution-bg: color-mix(in srgb, var(--flx-accent-warning) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-aside-caution-text: hsl(45, calc(93% * var(--saturation-factor)), 50%);
|
|
--flx-aside-danger-border: var(--flx-accent-danger);
|
|
--flx-aside-danger-bg: color-mix(in srgb, var(--flx-accent-danger) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-aside-danger-text: hsl(0, calc(84% * var(--saturation-factor)), 71%);
|
|
|
|
--flx-method-get-border: var(--flx-accent-info);
|
|
--flx-method-get-bg: color-mix(in srgb, var(--flx-accent-info) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-method-get-fg: var(--flx-text-primary);
|
|
--flx-method-post-border: var(--flx-accent-success);
|
|
--flx-method-post-bg: color-mix(in srgb, var(--flx-accent-success) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-method-post-fg: var(--flx-text-primary);
|
|
--flx-method-patch-border: var(--flx-accent-warning);
|
|
--flx-method-patch-bg: color-mix(in srgb, var(--flx-accent-warning) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-method-patch-fg: var(--flx-text-primary);
|
|
--flx-method-put-border: var(--flx-accent-method-put);
|
|
--flx-method-put-bg: color-mix(in srgb, var(--flx-accent-method-put) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-method-put-fg: var(--flx-text-primary);
|
|
--flx-method-delete-border: var(--flx-accent-danger);
|
|
--flx-method-delete-bg: color-mix(in srgb, var(--flx-accent-danger) var(--flx-tint-strength), var(--flx-tint-base));
|
|
--flx-method-delete-fg: var(--flx-text-primary);
|
|
--flx-method-head-border: var(--flx-accent-method-head);
|
|
--flx-method-head-bg: color-mix(
|
|
in srgb,
|
|
var(--flx-accent-method-head) var(--flx-tint-strength),
|
|
var(--flx-tint-base)
|
|
);
|
|
--flx-method-head-fg: var(--flx-text-primary);
|
|
}
|