src/css/it-design-compat.css - main - spirzen/it-knowledge-base

src/css/it-design-compat.css
477 строк20 KB
Spirzen
Fixes
13 июн 2026, 22:21
13 июн 2026, 22:214285bda
/**
 * Readability & component harmony for IT Universe design themes.
 * Fixes hardcoded light-only colors in custom.css (tags, callouts, inline code).
 */

html[data-design]:not([data-design='design-universe-original']) {
  /* Prism: светлые темы — примешиваем к code-fg; тёмные — насыщенные brand-цвета */
  --d-code-syntax-keyword: color-mix(in srgb, var(--d-primary) 40%, var(--d-code-fg));
  --d-code-syntax-function: color-mix(in srgb, var(--d-accent2) 35%, var(--d-code-fg));
  --d-code-syntax-string: color-mix(in srgb, var(--d-primary) 30%, var(--d-code-fg));
  --d-code-syntax-comment: color-mix(in srgb, var(--d-text-muted) 50%, var(--d-code-fg));
  --d-code-syntax-deleted: color-mix(in srgb, #e06c75 75%, var(--d-code-fg));
  --d-code-syntax-namespace: var(--d-code-syntax-deleted);
  --d-code-syntax-control: var(--d-code-syntax-keyword);
  --d-code-syntax-builtin: color-mix(in srgb, var(--d-accent2) 45%, var(--d-code-fg));

  --d-on-primary: #ffffff;
  --d-on-surface: var(--d-text);
  --d-heading: var(--d-text);
  --d-tag-required-bg: color-mix(in srgb, #e53935 16%, var(--d-surface));
  --d-tag-required-fg: color-mix(in srgb, #b71c1c 70%, var(--d-text));
  --d-tag-required-border: color-mix(in srgb, #e53935 42%, var(--d-border));
  --d-tag-info-bg: color-mix(in srgb, var(--d-primary) 14%, var(--d-surface));
  --d-tag-info-fg: var(--d-text);
  --d-tag-info-border: color-mix(in srgb, var(--d-primary) 38%, var(--d-border));
  --d-tag-warn-bg: color-mix(in srgb, #ff8f00 14%, var(--d-surface));
  --d-tag-warn-fg: color-mix(in srgb, #e65100 65%, var(--d-text));
  --d-tag-warn-border: color-mix(in srgb, #ff8f00 40%, var(--d-border));
  --d-tag-beginner-bg: color-mix(in srgb, #43a047 14%, var(--d-surface));
  --d-tag-beginner-fg: color-mix(in srgb, #2e7d32 70%, var(--d-text));
  --d-tag-beginner-border: color-mix(in srgb, #43a047 38%, var(--d-border));
  --d-tag-advanced-bg: color-mix(in srgb, #8e24aa 12%, var(--d-surface));
  --d-tag-advanced-fg: color-mix(in srgb, #6a1b9a 70%, var(--d-text));
  --d-tag-advanced-border: color-mix(in srgb, #8e24aa 35%, var(--d-border));
  --d-tag-notrequired-bg: color-mix(in srgb, var(--d-text-muted) 12%, var(--d-surface));
  --d-tag-notrequired-fg: var(--d-text-muted);
  --d-tag-notrequired-border: color-mix(in srgb, var(--d-text-muted) 30%, var(--d-border));
  --d-meta-panel-bg: color-mix(in srgb, var(--d-primary) 8%, var(--d-surface));
  --d-meta-panel-border: color-mix(in srgb, var(--d-primary) 24%, var(--d-border));
  --d-callout-bg: color-mix(in srgb, var(--d-primary) 8%, var(--d-surface));
  --d-callout-fg: var(--d-text);
  --d-callout-title: var(--d-text);
}

/* Яркий primary на тёмном фоне — тёмный текст на кнопках */
html[data-design='design-matrix-code'],
html[data-design='design-phosphor-green'],
html[data-design='design-neon-tokyo'],
html[data-design='design-cyber-grid'] {
  --d-on-primary: #0a0a0a;
}

html[data-design='design-neon-tokyo'] {
  --d-on-primary: #0a0a12;
}

html[data-design='design-dark-coder'] .button--primary {
  --d-on-primary: #ffffff;
}

html[data-design='design-brutalist-swiss'] .button--primary {
  --d-on-primary: #ffffff;
}

/* Тёмный режим: чёрный primary → контрастное меню сайдбара */
html[data-theme='dark'][data-design='design-brutalist-swiss'] {
  --ifm-menu-color-active: #ffffff;
  --ifm-menu-color-background-active: color-mix(in srgb, #ff0000 34%, #2a2a2a);
  --ifm-menu-color-background-hover: color-mix(in srgb, #ff0000 18%, #2a2a2a);
}

html[data-theme='dark'][data-design='design-ink-monochrome'] {
  --ifm-menu-color-active: #ffffff;
  --ifm-menu-color-background-active: color-mix(in srgb, #d4d4dc 34%, #2a2a2a);
  --ifm-menu-color-background-hover: color-mix(in srgb, #d4d4dc 18%, #2a2a2a);
}

html[data-theme='dark'][data-design='design-brutalist-swiss'] .menu__link--active {
  color: #ffffff !important;
  animation: none !important;
}

html[data-theme='dark'][data-design='design-ink-monochrome'] .menu__link--active {
  color: #ffffff !important;
  animation: none !important;
}

/* Dark Coder — меню и chrome в духе VS Code (нативный тёмный режим) */
html[data-theme='dark'][data-design='design-dark-coder'] .menu__link--active {
  background: #094771 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-theme='dark'][data-design='design-dark-coder'] .menu__link:hover {
  background: #2a2d2e;
}

html[data-theme='dark'][data-design='design-dark-coder'] .navbar {
  border-bottom-color: var(--d-border);
  box-shadow: none;
}

html[data-theme='dark'][data-design='design-dark-coder'] .button--primary {
  background: var(--d-accent2);
  border-color: var(--d-accent2);
}

/* Тёмные темы (нативный тёмный режим): яркие токены в блоках кода */
html[data-theme='dark'][data-design='design-cosmic-void'],
html[data-theme='dark'][data-design='design-forest-terminal'],
html[data-theme='dark'][data-design='design-crimson-night'],
html[data-theme='dark'][data-design='design-neon-tokyo'],
html[data-theme='dark'][data-design='design-glass-aurora'],
html[data-theme='dark'][data-design='design-phosphor-green'],
html[data-theme='dark'][data-design='design-ocean-abyss'],
html[data-theme='dark'][data-design='design-carbon-github'],
html[data-theme='dark'][data-design='design-cyber-grid'],
html[data-theme='dark'][data-design='design-volcano-ember'],
html[data-theme='dark'][data-design='design-holo-prism'],
html[data-theme='dark'][data-design='design-matrix-code'],
html[data-theme='dark'][data-design='design-dark-coder'] {
  --d-code-syntax-keyword: var(--d-primary);
  --d-code-syntax-function: var(--d-accent2);
  --d-code-syntax-string: color-mix(in srgb, var(--d-primary) 80%, var(--d-code-fg));
  --d-code-syntax-comment: var(--d-text-muted);
  --d-code-syntax-builtin: var(--d-accent2);
}

html[data-design='design-crimson-night'],
html[data-design='design-holo-prism'] {
  --d-code-syntax-keyword: color-mix(in srgb, var(--d-primary) 18%, var(--d-code-fg));
}

/* Светлые темы: чуть темнее фон блока для контраста */
html[data-design='design-solar-flare'],
html[data-design='design-arctic-frost'],
html[data-design='design-paper-vintage'],
html[data-design='design-brutalist-swiss'],
html[data-design='design-sunset-warm'],
html[data-design='design-lavender-haze'],
html[data-design='design-gilded-scroll'],
html[data-design='design-nordic-fjord'],
html[data-design='design-sakura-spring'],
html[data-design='design-mint-cool'],
html[data-design='design-blueprint-tech'],
html[data-design='design-ink-monochrome'] {
  --d-code-bg: color-mix(in srgb, var(--d-text) 6%, var(--d-surface));
}

/* Заголовки и вторичный текст */
html[data-design]:not([data-design='design-universe-original']) .markdown h1,
html[data-design]:not([data-design='design-universe-original']) .markdown h2,
html[data-design]:not([data-design='design-universe-original']) .markdown h3,
html[data-design]:not([data-design='design-universe-original']) .markdown h4,
html[data-design]:not([data-design='design-universe-original']) .markdown h5,
html[data-design]:not([data-design='design-universe-original']) .markdown h6,
html[data-design]:not([data-design='design-universe-original']) .theme-doc-markdown h1,
html[data-design]:not([data-design='design-universe-original']) .theme-doc-markdown h2,
html[data-design]:not([data-design='design-universe-original']) .theme-doc-markdown h3,
html[data-design]:not([data-design='design-universe-original']) .theme-doc-markdown h4,
html[data-design]:not([data-design='design-universe-original']) .theme-doc-markdown h5,
html[data-design]:not([data-design='design-universe-original']) .theme-doc-markdown h6 {
  color: var(--d-heading);
}

html[data-design]:not([data-design='design-universe-original']) .hero__title {
  color: var(--d-text);
}

html[data-design]:not([data-design='design-universe-original']) .hero__subtitle {
  color: var(--d-text-muted);
}

/* Кнопки */
html[data-design]:not([data-design='design-universe-original']) .button--primary {
  color: var(--d-on-primary) !important;
}

html[data-design]:not([data-design='design-universe-original']) .button--secondary {
  color: var(--d-text);
  border-color: var(--d-border);
  background-color: var(--d-surface);
}

/* Теги статей */
html[data-design]:not([data-design='design-universe-original']) .tag-required {
  background-color: var(--d-tag-required-bg);
  color: var(--d-tag-required-fg);
  border-color: var(--d-tag-required-border);
}

html[data-design]:not([data-design='design-universe-original']) .tag-inprogress {
  background-color: var(--d-tag-warn-bg);
  color: var(--d-tag-warn-fg);
  border-color: var(--d-tag-warn-border);
}

html[data-design]:not([data-design='design-universe-original']) .tag-beginner,
html[data-design]:not([data-design='design-universe-original']) .tag-human {
  background-color: var(--d-tag-beginner-bg);
  color: var(--d-tag-beginner-fg);
  border-color: var(--d-tag-beginner-border);
}

html[data-design]:not([data-design='design-universe-original']) .tag-advanced {
  background-color: var(--d-tag-advanced-bg);
  color: var(--d-tag-advanced-fg);
  border-color: var(--d-tag-advanced-border);
}

html[data-design]:not([data-design='design-universe-original']) .tag-notrequired {
  background-color: var(--d-tag-notrequired-bg);
  color: var(--d-tag-notrequired-fg);
  border-color: var(--d-tag-notrequired-border);
}

html[data-design]:not([data-design='design-universe-original']) .article-meta {
  background: var(--d-meta-panel-bg);
  border-color: var(--d-meta-panel-border);
}

html[data-design]:not([data-design='design-universe-original']) .article-meta__label {
  color: var(--d-text-muted);
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge,
html[data-design]:not([data-design='design-universe-original']) .complexity-badge--other {
  background: color-mix(in srgb, var(--d-text-muted) 10%, var(--d-surface));
  color: var(--d-text-muted);
  border-color: var(--d-border);
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--developer {
  background: color-mix(in srgb, #5c6bc0 14%, var(--d-surface));
  color: color-mix(in srgb, #3949ab 75%, var(--d-text));
  border-color: color-mix(in srgb, #5c6bc0 32%, var(--d-border));
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--analytic {
  background: color-mix(in srgb, #00897b 12%, var(--d-surface));
  color: color-mix(in srgb, #00695c 75%, var(--d-text));
  border-color: color-mix(in srgb, #00897b 30%, var(--d-border));
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--tester {
  background: color-mix(in srgb, #fb8c00 12%, var(--d-surface));
  color: color-mix(in srgb, #e65100 70%, var(--d-text));
  border-color: color-mix(in srgb, #fb8c00 28%, var(--d-border));
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--architector {
  background: color-mix(in srgb, #8e24aa 12%, var(--d-surface));
  color: color-mix(in srgb, #6a1b9a 75%, var(--d-text));
  border-color: color-mix(in srgb, #8e24aa 28%, var(--d-border));
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--manager {
  background: color-mix(in srgb, #d81b60 10%, var(--d-surface));
  color: color-mix(in srgb, #ad1457 72%, var(--d-text));
  border-color: color-mix(in srgb, #d81b60 26%, var(--d-border));
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--engineer {
  background: color-mix(in srgb, #546e7a 12%, var(--d-surface));
  color: color-mix(in srgb, #37474f 75%, var(--d-text));
  border-color: color-mix(in srgb, #546e7a 28%, var(--d-border));
}

html[data-design]:not([data-design='design-universe-original']) .complexity-badge--all {
  background: color-mix(in srgb, var(--d-primary) 12%, var(--d-surface));
  color: var(--d-text);
  border-color: color-mix(in srgb, var(--d-primary) 30%, var(--d-border));
}

/* Callouts */
html[data-design]:not([data-design='design-universe-original']) .callout {
  background-color: var(--d-callout-bg);
  border-left-color: var(--d-primary);
}

html[data-design]:not([data-design='design-universe-original']) .callout--note {
  background-color: color-mix(in srgb, var(--d-primary) 12%, var(--d-surface));
  border-left-color: var(--d-primary);
}

html[data-design]:not([data-design='design-universe-original']) .callout--warning,
html[data-design]:not([data-design='design-universe-original']) .callout--caution {
  background-color: var(--d-tag-warn-bg);
  border-left-color: #ff8f00;
}

html[data-design]:not([data-design='design-universe-original']) .callout--danger {
  background-color: color-mix(in srgb, #d32f2f 14%, var(--d-surface));
  border-left-color: #d32f2f;
}

html[data-design]:not([data-design='design-universe-original']) .callout--info {
  background-color: var(--d-tag-info-bg);
  border-left-color: var(--d-accent2);
}

html[data-design]:not([data-design='design-universe-original']) .callout--tip {
  background-color: var(--d-tag-info-bg);
  border-left-color: var(--d-accent2);
}

html[data-design]:not([data-design='design-universe-original']) .callout-title,
html[data-design]:not([data-design='design-universe-original']) .callout,
html[data-design]:not([data-design='design-universe-original']) .callout p,
html[data-design]:not([data-design='design-universe-original']) .callout li {
  color: var(--d-callout-fg) !important;
}

html[data-design]:not([data-design='design-universe-original']) .callout .theme-code-block,
html[data-design]:not([data-design='design-universe-original']) .callout .theme-code-block *,
html[data-design]:not([data-design='design-universe-original']) .callout pre,
html[data-design]:not([data-design='design-universe-original']) .callout pre * {
  color: inherit;
}

html[data-design]:not([data-design='design-universe-original']) .callout-title {
  color: var(--d-callout-title) !important;
}

/* Блоки кода — it-design-code-overrides.css (после custom.css) */

/* Admonitions (:::note и т.д.) */
html[data-design]:not([data-design='design-universe-original']) .theme-admonition {
  --ifm-alert-background-color: var(--d-surface);
  --ifm-alert-color: var(--d-text);
  --ifm-alert-border-color: var(--d-border);
}

html[data-design]:not([data-design='design-universe-original']) .theme-admonition-heading {
  color: var(--d-text);
}

/* Navbar border follows theme */
html[data-design]:not([data-design='design-universe-original']) .navbar {
  border-bottom-color: var(--d-border);
  box-shadow: var(--d-shadow-sm);
}

/* Таблицы */
html[data-design]:not([data-design='design-universe-original']) table th {
  background-color: color-mix(in srgb, var(--d-primary) 10%, var(--d-surface));
  color: var(--d-text);
}

html[data-design]:not([data-design='design-universe-original']) table td {
  border-color: var(--d-border);
}

/* Оригинал + системная тёмная тема: теги и callouts */
html[data-design='design-universe-original'][data-theme='dark'] .tag-required {
  background-color: color-mix(in srgb, #e53935 22%, #2a2a2a);
  color: #ffcdd2;
  border-color: color-mix(in srgb, #e53935 50%, transparent);
}

html[data-design='design-universe-original'][data-theme='dark'] .tag-advanced,
html[data-design='design-universe-original'][data-theme='dark'] .tag-beginner,
html[data-design='design-universe-original'][data-theme='dark'] .tag-human,
html[data-design='design-universe-original'][data-theme='dark'] .tag-notrequired {
  background-color: color-mix(in srgb, var(--ifm-color-primary) 18%, #2a2a2a);
  color: #e8e8e8;
  border-color: color-mix(in srgb, var(--ifm-color-primary) 45%, transparent);
}

html[data-design='design-universe-original'][data-theme='dark'] .tag-inprogress {
  background-color: color-mix(in srgb, #ff8f00 18%, #2a2a2a);
  color: #ffe0b2;
  border-color: color-mix(in srgb, #ff8f00 45%, transparent);
}

html[data-design='design-universe-original'][data-theme='dark'] .callout,
html[data-design='design-universe-original'][data-theme='dark'] .callout p,
html[data-design='design-universe-original'][data-theme='dark'] .callout li {
  color: var(--ifm-color-content) !important;
}

html[data-design='design-universe-original'][data-theme='dark'] .callout .theme-code-block,
html[data-design='design-universe-original'][data-theme='dark'] .callout .theme-code-block *,
html[data-design='design-universe-original'][data-theme='dark'] .callout pre,
html[data-design='design-universe-original'][data-theme='dark'] .callout pre * {
  color: inherit;
}

html[data-design='design-universe-original'][data-theme='dark'] .callout-title {
  color: var(--ifm-color-content) !important;
}

html[data-design='design-universe-original'][data-theme='dark'] .callout--note {
  background-color: color-mix(in srgb, var(--ifm-color-primary) 15%, #2a2a2a);
}

html[data-design='design-universe-original'][data-theme='dark'] .callout--warning,
html[data-design='design-universe-original'][data-theme='dark'] .callout--caution {
  background-color: color-mix(in srgb, #ff8f00 12%, #2a2a2a);
}

html[data-design='design-universe-original'][data-theme='dark'] .callout--danger {
  background-color: color-mix(in srgb, #d32f2f 12%, #2a2a2a);
}

html[data-design='design-universe-original'][data-theme='dark'] .callout--info {
  background-color: color-mix(in srgb, #0288d1 12%, #2a2a2a);
}

html[data-design='design-universe-original'][data-theme='dark'] .callout--tip {
  background-color: color-mix(in srgb, #1976d2 12%, #2a2a2a);
}

html[data-design]:not([data-design='design-universe-original']) .faq-item {
  background: var(--d-surface);
  border-color: var(--d-border);
}

html[data-design]:not([data-design='design-universe-original']) .faq-q {
  color: var(--d-heading);
}

html[data-design]:not([data-design='design-universe-original']) .faq-a {
  color: var(--d-muted);
}

html[data-design]:not([data-design='design-universe-original']) .faq-label {
  color: var(--d-primary);
}

html[data-design]:not([data-design='design-universe-original']) .faq-a .faq-label {
  color: var(--d-heading);
}

html[data-design='design-universe-original'][data-theme='dark'] .faq-item {
  background: var(--ifm-background-surface-color);
  border-color: var(--ifm-color-emphasis-300);
}

/* Docs Prime — токены статей под кастомные темы */
html[data-design]:not([data-design='design-universe-original']) {
  --it-doc-h1-fg: var(--d-heading);
  --it-doc-heading-fg: var(--d-heading);
  --it-doc-hero-bg: color-mix(in srgb, var(--d-primary) 8%, var(--d-surface));
  --it-doc-hero-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--d-primary) 8%, var(--d-surface)),
    color-mix(in srgb, var(--d-primary) 2%, var(--d-surface))
  );
  --it-doc-hero-border: color-mix(in srgb, var(--d-primary) 18%, var(--d-border));
  --it-doc-section-bg: color-mix(in srgb, var(--d-primary) 4%, var(--d-surface));
  --it-doc-section-h2-bg: color-mix(in srgb, var(--d-primary) 8%, var(--d-surface));
  --it-doc-h2-header-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--d-primary) 6%, var(--d-surface)),
    transparent 55%
  );
  --it-doc-h3-header-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--d-primary) 5%, var(--d-surface)),
    transparent 42%
  );
  --it-doc-section-border: var(--d-border);
  --it-doc-heading-underline: color-mix(in srgb, var(--d-text-muted) 35%, var(--d-border));
  --it-doc-rail-color: var(--d-primary);
  --it-doc-rail-muted: color-mix(in srgb, var(--d-primary) 40%, transparent);
  --it-doc-lead-fg: var(--d-text-muted);
  --it-doc-inline-code-bg: color-mix(in srgb, var(--d-primary) 14%, var(--d-code-bg));
  --it-doc-inline-code-fg: var(--d-code-fg);
  --it-doc-inline-code-border: color-mix(in srgb, var(--d-primary) 22%, var(--d-border));
  --it-doc-code-bg: var(--d-code-bg);
  --it-doc-code-border: color-mix(in srgb, var(--d-primary) 35%, var(--d-border));
  --it-doc-code-fg: var(--d-code-fg);
  --it-doc-code-inset: color-mix(in srgb, var(--d-text) 4%, transparent);
}