220 lines
10 KiB
CSS
220 lines
10 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
|
|
--color-white: #ffffff;
|
|
--color-ink: #1a1a1a;
|
|
|
|
/* App theme values written by admin branding. Profile skins use these as fallbacks. */
|
|
--app-theme-chrome: #7c3aed;
|
|
--app-theme-chrome-text: var(--color-white);
|
|
--app-theme-accent: #7c3aed;
|
|
--app-theme-accent-text: var(--color-white);
|
|
--app-theme-link: #6b21a8;
|
|
--app-theme-backdrop: #e6e3ea;
|
|
--app-theme-page: #ffffff;
|
|
--app-theme-surface: #ffffff;
|
|
--app-theme-page-text: var(--color-ink);
|
|
--app-theme-surface-text: var(--app-theme-page-text);
|
|
--app-theme-link-hover: color-mix(in srgb, var(--app-theme-link) 68%, var(--app-theme-page-text));
|
|
--app-theme-surface-link: var(--app-theme-link);
|
|
--app-theme-surface-link-hover: var(--app-theme-link-hover);
|
|
--app-theme-muted: #6b7280;
|
|
--app-theme-focus: #f59e0b;
|
|
|
|
/* Theme source tokens for the app shell and component palette. */
|
|
--theme-chrome: var(--app-theme-chrome);
|
|
--theme-chrome-text: var(--app-theme-chrome-text);
|
|
--theme-accent: var(--app-theme-accent);
|
|
--theme-accent-text: var(--app-theme-accent-text);
|
|
--theme-link: var(--app-theme-link);
|
|
--theme-backdrop: var(--app-theme-backdrop);
|
|
--theme-page: var(--app-theme-page);
|
|
--theme-surface: var(--app-theme-surface);
|
|
--theme-page-text: var(--app-theme-page-text);
|
|
--theme-surface-text: var(--theme-page-text);
|
|
--theme-link-hover: color-mix(in srgb, var(--theme-link) 68%, var(--theme-page-text));
|
|
--theme-surface-link: var(--theme-link);
|
|
--theme-surface-link-hover: var(--theme-link-hover);
|
|
--theme-muted: var(--app-theme-muted);
|
|
--theme-danger: #d32626;
|
|
--theme-danger-text: var(--theme-danger);
|
|
--theme-success: #34d399;
|
|
--theme-success-ink: var(--color-ink);
|
|
--theme-success-text: #047857;
|
|
--theme-focus: var(--app-theme-focus);
|
|
|
|
/* Background texture for the default app shell. */
|
|
--theme-page-grid-a: color-mix(in srgb, var(--theme-backdrop) 88%, white);
|
|
--theme-page-grid-b: color-mix(in srgb, var(--theme-backdrop) 94%, black);
|
|
|
|
--theme-toggle-dark-display: inline-flex;
|
|
--theme-toggle-light-display: none;
|
|
|
|
--font-body: Verdana, Arial, Helvetica, sans-serif;
|
|
--line-height-body: 1.225;
|
|
--font-size-main: 80%;
|
|
--font-size-footer: 70%;
|
|
--font-size-note: 90%;
|
|
--font-size-caption: 80%;
|
|
--font-size-small: max(0.875em, 12px);
|
|
--font-size-nav: 10pt;
|
|
--font-size-nav-link: max(0.98em, 12px);
|
|
--font-size-utility-action: max(var(--font-size-caption), 12px);
|
|
--font-size-card-heading: 1.17em;
|
|
--font-size-panel-heading: 1.06em;
|
|
--font-size-profile-heading: 1.5em;
|
|
|
|
--container-width: 960px;
|
|
--container-min-height: 100dvh;
|
|
--content-measure: 600px;
|
|
--nav-side-min: 130px;
|
|
--audio-width: 190px;
|
|
--avatar-size: 80px;
|
|
--avatar-compact-size: 48px;
|
|
--profile-photo-size: 235px;
|
|
--profile-edit-photo-size: 180px;
|
|
--person-card-width: var(--avatar-size);
|
|
--person-card-min-height: 100px;
|
|
--profile-person-card-width: 105px;
|
|
--details-label-width: 33%;
|
|
--discussion-author-width: calc(var(--avatar-compact-size) + var(--space-12));
|
|
--column-compact: 20%;
|
|
--column-profile: 40%;
|
|
--column-wide: 60%;
|
|
--column-aside-min: 9rem;
|
|
--profile-sidebar-min: calc(var(--profile-photo-size) + (var(--space-6) * 2));
|
|
|
|
--space-1: 2px;
|
|
--space-2: 4px;
|
|
--space-3: 5px;
|
|
--space-4: 7px;
|
|
--space-5: 8px;
|
|
--space-6: 10px;
|
|
--space-7: 12px;
|
|
--space-8: 14px;
|
|
--space-9: 15px;
|
|
--space-10: 20px;
|
|
--space-11: 30px;
|
|
--space-12: 40px;
|
|
--layout-stack-gap: var(--space-8);
|
|
--panel-body-gap: var(--space-7);
|
|
--list-stack-gap: var(--space-7);
|
|
--space-main-y: 0;
|
|
--space-main-x: 0;
|
|
--space-nav-links-y: 6px;
|
|
--space-nav-links-x: 16px;
|
|
--link-separator-gap: 0.45em;
|
|
--article-title-offset: 3px;
|
|
--icon-label-gap: 0.35em;
|
|
--icon-offset-y: -0.22em;
|
|
|
|
--border-thin: 1px;
|
|
--border-medium: 2px;
|
|
--radius-panel-default: 0;
|
|
--radius-media-default: 0;
|
|
--radius-panel: var(--radius-panel-default);
|
|
--radius-media: var(--radius-media-default);
|
|
--radius-control-default: 2px;
|
|
--radius-subtle: var(--radius-control-default);
|
|
--text-decoration-hairline: 0.5px;
|
|
--text-underline-offset: 2px;
|
|
--icon-size: 1.2em;
|
|
--brand-icon-size: 2em;
|
|
--avatar-glyph-size: 70%;
|
|
--control-min-height: 24px;
|
|
--control-pad-y: var(--space-1);
|
|
--control-pad-x: var(--space-3);
|
|
--button-active-shift: 1px;
|
|
--disabled-opacity: 0.68;
|
|
--focus-outline-width: 2px;
|
|
--focus-offset: 1px;
|
|
--table-cell-y: var(--space-3);
|
|
--table-cell-x: 6px;
|
|
--contact-cell-min-height: 32px;
|
|
--nav-search-width: 170px;
|
|
--nav-link-min-height: 24px;
|
|
}
|
|
|
|
:root,
|
|
[data-skin-page],
|
|
[data-author-skin-page] {
|
|
/* Shared resolver: admin themes and profile skins both feed --theme-* here. */
|
|
--color-page: var(--theme-backdrop);
|
|
--color-canvas: var(--theme-page);
|
|
--color-surface: var(--theme-surface);
|
|
--color-surface-raised: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-accent));
|
|
--color-surface-tint: color-mix(in srgb, var(--color-surface) 90%, var(--color-brand-accent));
|
|
--color-text: var(--theme-page-text);
|
|
--color-text-muted: var(--theme-muted);
|
|
--color-text-on-bright: var(--theme-chrome-text);
|
|
--color-link: var(--theme-link);
|
|
--color-link-hover: var(--theme-link-hover);
|
|
--color-brand: var(--theme-surface-link);
|
|
--color-brand-accent: var(--theme-chrome);
|
|
--color-brand-header: color-mix(in srgb, var(--color-brand-accent) 72%, black);
|
|
--color-brand-nav: color-mix(in srgb, var(--color-brand-accent) 88%, black);
|
|
--color-brand-soft: color-mix(in srgb, var(--color-surface) 84%, var(--color-brand-accent));
|
|
--color-brand-border: color-mix(in srgb, var(--color-white) 54%, var(--color-brand-accent));
|
|
--color-panel-accent: var(--color-brand-soft);
|
|
--color-panel-accent-soft: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-accent));
|
|
--color-panel-rule: color-mix(in srgb, var(--color-brand-border) 72%, var(--color-white));
|
|
--color-container-border: color-mix(in srgb, var(--color-page) 70%, var(--color-brand-accent));
|
|
--color-danger: var(--theme-danger);
|
|
--color-danger-text: var(--theme-danger-text);
|
|
--color-danger-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-danger));
|
|
--color-danger-border: color-mix(in srgb, var(--color-white) 52%, var(--color-danger));
|
|
--color-success: var(--theme-success);
|
|
--color-success-ink: var(--theme-success-ink);
|
|
--color-success-text: var(--theme-success-text);
|
|
--color-success-soft: color-mix(in srgb, var(--color-surface) 86%, var(--color-success));
|
|
--color-success-border: color-mix(in srgb, var(--color-white) 52%, var(--color-success));
|
|
--color-field: color-mix(in srgb, var(--color-surface) 98%, var(--color-canvas));
|
|
--color-field-disabled: color-mix(in srgb, var(--color-surface) 88%, var(--color-text));
|
|
--color-field-border-light: var(--color-white);
|
|
--color-field-border: color-mix(in srgb, var(--color-ink) 42%, var(--color-white));
|
|
--color-field-border-dark: color-mix(in srgb, var(--color-ink) 62%, var(--color-white));
|
|
--color-focus: var(--theme-focus);
|
|
--color-link-focus-bg: var(--color-surface-tint);
|
|
--color-row-alt: var(--color-surface-tint);
|
|
--color-shadow-panel: color-mix(in srgb, var(--color-surface) 70%, var(--color-page));
|
|
--color-shadow-soft: color-mix(in srgb, var(--color-white) 70%, var(--color-ink));
|
|
--color-shadow-pressed: color-mix(in srgb, var(--color-ink) 55%, black);
|
|
--color-shadow-card: color-mix(in srgb, var(--color-surface) 68%, var(--color-page));
|
|
--color-button-primary-bg: var(--theme-accent);
|
|
--color-button-primary-text: var(--theme-accent-text);
|
|
--color-button-primary-border-light: color-mix(in srgb, var(--color-white) 54%, var(--color-button-primary-bg));
|
|
--color-button-primary-border-dark: color-mix(in srgb, var(--color-button-primary-bg) 68%, black);
|
|
--color-button-primary-hover-bg: var(--color-button-primary-border-dark);
|
|
--color-button-primary-hover-text: var(--color-button-primary-text);
|
|
--color-button-secondary-bg: var(--color-surface);
|
|
--color-button-secondary-text: var(--color-brand);
|
|
--color-button-secondary-border-light: var(--color-surface-tint);
|
|
--color-button-secondary-border-dark: var(--color-brand-border);
|
|
--color-button-secondary-hover-bg: var(--color-surface-tint);
|
|
--color-button-secondary-hover-text: var(--theme-surface-link-hover);
|
|
--color-button-danger-bg: var(--color-surface);
|
|
--color-button-danger-text: var(--color-danger-text);
|
|
--color-button-danger-border-light: var(--color-danger-border);
|
|
--color-button-danger-border-dark: var(--color-danger);
|
|
--color-button-danger-hover-bg: var(--color-danger-soft);
|
|
--color-button-danger-hover-text: var(--color-danger);
|
|
|
|
--surface-background: var(--color-surface);
|
|
--surface-background-raised: var(--color-surface-raised);
|
|
--surface-background-soft: var(--color-panel-accent-soft);
|
|
--surface-background-tint: var(--color-surface-tint);
|
|
--surface-border: var(--color-brand-border);
|
|
--surface-border-soft: var(--color-panel-accent);
|
|
--surface-rule: var(--color-panel-rule);
|
|
--surface-shadow: var(--shadow-panel);
|
|
|
|
--page-background: repeating-linear-gradient(0deg, var(--theme-page-grid-a) 0, var(--theme-page-grid-a) var(--border-thin), var(--theme-page-grid-b) var(--border-thin), var(--theme-page-grid-b) var(--border-medium));
|
|
--shadow-panel: var(--border-thin) var(--border-thin) 0 var(--color-white), var(--border-medium) var(--border-medium) 0 var(--color-shadow-panel);
|
|
--shadow-button: inset var(--border-thin) var(--border-thin) 0 var(--button-border-light), var(--border-thin) var(--border-thin) 0 var(--button-border-dark);
|
|
--shadow-field: inset var(--border-thin) var(--border-thin) var(--border-thin) var(--color-shadow-soft);
|
|
--shadow-pressed: inset var(--border-thin) var(--border-thin) var(--border-thin) var(--color-shadow-pressed);
|
|
--shadow-photo: var(--border-medium) var(--border-medium) 0 var(--color-shadow-soft);
|
|
--shadow-card: var(--border-medium) var(--border-medium) 0 var(--color-shadow-card);
|
|
--column-divider-shadow: inset calc(var(--border-thin) * -1) 0 0 var(--color-surface), inset calc(var(--border-medium) * -1) 0 0 var(--color-panel-accent-soft);
|
|
accent-color: var(--color-brand);
|
|
}
|