92 lines
4.2 KiB
CSS
92 lines
4.2 KiB
CSS
:root {
|
|
/* Base text colors */
|
|
--color-text: var(--gray-500);
|
|
--color-text-muted: var(--gray-700);
|
|
--color-text-light: var(--gray-300);
|
|
--color-text-strong: var(--gray-0);
|
|
--color-footer-text: var(--color-text-muted);
|
|
--color-footer-heading: var(--gray-400);
|
|
--color-site-title: var(--gray-0);
|
|
--color-big-logo-title: var(--color-site-title);
|
|
--color-big-logo-description: var(--color-text-muted);
|
|
--color-panel-text-stats: var(--gray-0);
|
|
--color-page-meta: var(--color-text);
|
|
--color-home-link: var(--gray-500);
|
|
--color-home-link-hover: var(--blue-300);
|
|
--color-figure-media-background: var(--gray-0);
|
|
--color-link: var(--blue-300);
|
|
--color-link-hover: var(--blue-100);
|
|
--color-card-title: var(--color-site-title);
|
|
--color-link-external: var(--green-500);
|
|
--color-link-external-hover: var(--green-300);
|
|
--color-link-affiliated: var(--pink-500);
|
|
--color-link-affiliated-hover: var(--pink-300);
|
|
--color-link-dead: var(--red-500);
|
|
--color-link-dead-hover: var(--red-300);
|
|
--color-link-problematic: var(--amber-500);
|
|
--color-link-problematic-hover: var(--amber-300);
|
|
--color-keyword: var(--gray-500);
|
|
--color-keyword-hover: var(--gray-0);
|
|
--color-footer-link: var(--gray-500);
|
|
--color-footer-link-hover: var(--gray-0);
|
|
|
|
/* Border tokens */
|
|
--border-outer-color: var(--gray-800);
|
|
--border-panel: 1px solid var(--border-outer-color);
|
|
--border-panel-outer: 1px solid var(--border-outer-color);
|
|
--border-panel-top: 2px solid var(--border-outer-color);
|
|
--border-keyword: none;
|
|
|
|
/* Radius tokens */
|
|
--radius-base: 0;
|
|
--radius-panel: var(--radius-base);
|
|
--radius-pagination: var(--radius-base);
|
|
--radius_keyword: var(--radius-base);
|
|
|
|
/* Shadow tokens */
|
|
--color-shadow-base: var(--gray-900);
|
|
--shadow-base: 0 12px 0.8rem var(--color-shadow-base);
|
|
--shadow-panel: var(--shadow-base);
|
|
--shadow-pagination: var(--shadow-base);
|
|
--shadow-text: 0 12px 0.8rem var(--color-shadow-base);
|
|
--shadow-big-logo-title: var(--shadow-text);
|
|
|
|
/* Overlay helpers */
|
|
--overlay-dark-strong: rgba(15, 17, 20, 0.72);
|
|
--overlay-dark-medium: rgba(51, 55, 70, 0.55);
|
|
--overlay-dark-soft: rgba(124, 131, 146, 0.28);
|
|
--overlay-light-soft: rgba(255, 255, 255, 0.12);
|
|
--overlay-blue-soft: rgba(70, 127, 255, 0.20);
|
|
|
|
/* Background surfaces */
|
|
--background-body: var(--gray-900);
|
|
--background-body-alt: var(--gray-800);
|
|
--background-panel:
|
|
radial-gradient(circle at 18% 18%, var(--overlay-dark-medium) 0%, transparent 58%),
|
|
radial-gradient(circle at 82% 82%, var(--overlay-dark-strong) 0%, transparent 64%),
|
|
linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
|
|
--background-panel-stat: var(--background-panel);
|
|
--background-pagination: var(--background-panel);
|
|
--background-panel-stats: radial-gradient(circle at 8% 92%, var(--overlay-dark-medium) 0%, transparent 55%),
|
|
radial-gradient(circle at 90% 12%, var(--overlay-dark-soft) 0%, transparent 60%),
|
|
linear-gradient(120deg, var(--gray-900) 0%, var(--gray-800) 100%);
|
|
--background-figure:
|
|
radial-gradient(circle at 22% 22%, var(--overlay-dark-soft) 0%, transparent 58%),
|
|
radial-gradient(circle at 78% 78%, var(--overlay-dark-medium) 0%, transparent 62%),
|
|
linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
|
|
--background-footer:
|
|
radial-gradient(ellipse at top, var(--overlay-dark-medium) 0%, transparent 68%),
|
|
linear-gradient(165deg, var(--gray-900) 0%, var(--gray-800) 100%);
|
|
--background-spoiler: var(--yellow-900);
|
|
--background-chat-me: linear-gradient(135deg, var(--overlay-blue-soft) 0%, transparent 75%);
|
|
--background-chat-other: linear-gradient(135deg, var(--overlay-light-soft) 0%, transparent 75%);
|
|
|
|
/* Glow accents */
|
|
--color-hr-glow: var(--overlay-light-soft);
|
|
--background-hr-glow: radial-gradient(ellipse at center -20px,
|
|
var(--color-hr-glow),
|
|
var(--transparent) 80%);
|
|
--background-hr-glow-mirror: radial-gradient(ellipse at center calc(100% + 20px),
|
|
var(--color-hr-glow),
|
|
var(--transparent) 80%);
|
|
} |