/* ==========================================================================
design-tokens.css
wwn-lab Design System — Single Source of Truth
Version: 1.0 | 2026-03-09
Подключать во ВСЕХ порталах:
- www.wwn-lab.net
- auth.wwn-lab.net (Authentik custom CSS)
- Gitea ($GITEA_CUSTOM/public/css/custom.css — @import)
- Nextcloud (Admin → Custom CSS — @import или вставить напрямую)
========================================================================== */
/* --------------------------------------------------------------------------
1. FONTS — подключение (Google Fonts, OFL лицензия)
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* --------------------------------------------------------------------------
2. LIGHT THEME (default)
-------------------------------------------------------------------------- */
:root {
/* --- 2.1 Colors: Backgrounds --- */
--color-bg: #F4F6F9; /* Фон страниц */
--color-surface: #FFFFFF; /* Фон карточек, панелей, модалок */
--color-surface-alt: #EEF1F7; /* Фон секций, hover, zebra */
--color-surface-raised: #FFFFFF; /* Карточки с тенью поверх bg */
/* --- 2.2 Colors: Brand & Accent --- */
--color-primary: #1B5EA6; /* Основной акцент — синий */
--color-primary-dark: #0D3E73; /* Hover, активные состояния */
--color-primary-light: #D6E4F7; /* Бледный фон для primary-элементов */
--color-accent: #00B4A6; /* Второй акцент — бирюзовый */
--color-accent-dark: #008C81; /* Hover для accent */
--color-accent-light: #CCEFED; /* Бледный фон для accent-элементов */
/* --- 2.3 Colors: Text --- */
--color-text: #1A1D23; /* Основной текст */
--color-text-secondary: #4B5563; /* Вторичный текст */
--color-text-muted: #6B7280; /* Подписи, плейсхолдеры, мета */
--color-text-disabled: #9CA3AF; /* Неактивные элементы */
--color-text-inverse: #FFFFFF; /* Текст на тёмном фоне */
--color-text-link: #1B5EA6; /* Ссылки */
--color-text-link-hover:#0D3E73; /* Hover ссылок */
/* --- 2.4 Colors: Borders & Dividers --- */
--color-border: #DDE2EA; /* Стандартная граница */
--color-border-light: #EEF1F7; /* Лёгкий разделитель */
--color-border-focus: #1B5EA6; /* Граница в фокусе (input) */
/* --- 2.5 Colors: Status --- */
--color-success: #22C55E; /* Online, успех */
--color-success-bg: #DCFCE7; /* Фон success-бейджей */
--color-warning: #F59E0B; /* Degraded, предупреждение */
--color-warning-bg: #FEF3C7; /* Фон warning-бейджей */
--color-error: #EF4444; /* Offline, ошибка */
--color-error-bg: #FEE2E2; /* Фон error-бейджей */
--color-info: #3B82F6; /* Информационное состояние */
--color-info-bg: #DBEAFE; /* Фон info-бейджей */
/* --- 2.6 Colors: Overlay & Scrim --- */
--color-overlay: rgba(0, 0, 0, 0.40); /* Hero-затемнение */
--color-scrim: rgba(0, 0, 0, 0.50); /* Модальный backdrop */
/* --------------------------------------------------------------------------
3. TYPOGRAPHY
-------------------------------------------------------------------------- */
--font-main: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Font sizes (модульная шкала 1.25) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
--text-4xl: 3rem; /* 48px */
--text-5xl: 3.75rem; /* 60px */
/* Font weights */
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Line heights */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed:1.625;
--leading-loose: 2;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-widest: 0.1em;
/* --------------------------------------------------------------------------
4. SPACING (базовая единица 4px)
-------------------------------------------------------------------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* --------------------------------------------------------------------------
5. BORDER RADIUS
-------------------------------------------------------------------------- */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px; /* Таблетки, аватары */
/* --------------------------------------------------------------------------
6. SHADOWS
-------------------------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
--shadow-hover: 0 6px 24px rgba(27, 94, 166, 0.15); /* Primary-тень при hover */
--shadow-focus: 0 0 0 3px rgba(27, 94, 166, 0.25); /* Focus ring */
/* --------------------------------------------------------------------------
7. TRANSITIONS & ANIMATION
-------------------------------------------------------------------------- */
--transition-fast: 0.1s ease;
--transition: 0.2s ease;
--transition-slow: 0.35s ease;
--transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
/* --------------------------------------------------------------------------
8. LAYOUT
-------------------------------------------------------------------------- */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--sidebar-width: 240px;
--sidebar-width-collapsed: 64px;
--header-height: 64px;
--header-height-mobile: 56px;
/* --------------------------------------------------------------------------
9. Z-INDEX SCALE
-------------------------------------------------------------------------- */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
--z-tooltip: 600;
/* --------------------------------------------------------------------------
10. COMPONENT TOKENS — кнопки
-------------------------------------------------------------------------- */
--btn-height-sm: 32px;
--btn-height-md: 40px;
--btn-height-lg: 48px;
--btn-padding-x-sm: var(--space-3);
--btn-padding-x-md: var(--space-5);
--btn-padding-x-lg: var(--space-6);
--btn-font-size: var(--text-sm);
--btn-font-weight: var(--font-semibold);
--btn-radius: var(--radius-sm);
/* --------------------------------------------------------------------------
11. COMPONENT TOKENS — карточки сервисов (dashboard)
-------------------------------------------------------------------------- */
--card-padding: var(--space-6);
--card-radius: var(--radius-md);
--card-shadow: var(--shadow-card);
--card-shadow-hover: var(--shadow-hover);
--card-border: 1px solid var(--color-border);
--card-bg: var(--color-surface);
/* Status dot размеры */
--status-dot-size: 8px;
/* --------------------------------------------------------------------------
12. COMPONENT TOKENS — форма / inputs
-------------------------------------------------------------------------- */
--input-height: 40px;
--input-padding-x: var(--space-4);
--input-radius: var(--radius-sm);
--input-border: 1px solid var(--color-border);
--input-border-focus: 1px solid var(--color-border-focus);
--input-bg: var(--color-surface);
--input-font-size: var(--text-base);
/* --------------------------------------------------------------------------
13. COMPONENT TOKENS — навигация / sidebar
-------------------------------------------------------------------------- */
--nav-item-height: 44px;
--nav-item-radius: var(--radius-sm);
--nav-item-padding-x: var(--space-4);
--nav-active-bg: var(--color-primary-light);
--nav-active-color: var(--color-primary);
--nav-hover-bg: var(--color-surface-alt);
}
/* ==========================================================================
DARK THEME (опционально)
Активируется через: или prefers-color-scheme
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg: #0F1117;
--color-surface: #1A1D23;
--color-surface-alt: #22262F;
--color-surface-raised: #22262F;
--color-primary: #4A90D9;
--color-primary-dark: #6AAEE8;
--color-primary-light: #1B3A5C;
--color-accent: #00D4C8;
--color-accent-dark: #00EDE0;
--color-accent-light: #003D3A;
--color-text: #F0F2F5;
--color-text-secondary: #B0B8C4;
--color-text-muted: #6B7280;
--color-text-disabled: #4B5563;
--color-text-inverse: #1A1D23;
--color-text-link: #4A90D9;
--color-text-link-hover:#6AAEE8;
--color-border: #2D3340;
--color-border-light: #22262F;
--color-border-focus: #4A90D9;
--color-success: #4ADE80;
--color-success-bg: #14532D;
--color-warning: #FCD34D;
--color-warning-bg: #451A03;
--color-error: #F87171;
--color-error-bg: #450A0A;
--color-info: #60A5FA;
--color-info-bg: #1E3A5F;
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.30);
--shadow-hover: 0 6px 24px rgba(74, 144, 217, 0.20);
--shadow-focus: 0 0 0 3px rgba(74, 144, 217, 0.30);
}
}
/* Ручное переключение тёмной темы */
[data-theme="dark"] {
--color-bg: #0F1117;
--color-surface: #1A1D23;
--color-surface-alt: #22262F;
--color-surface-raised: #22262F;
--color-primary: #4A90D9;
--color-primary-dark: #6AAEE8;
--color-primary-light: #1B3A5C;
--color-accent: #00D4C8;
--color-accent-dark: #00EDE0;
--color-accent-light: #003D3A;
--color-text: #F0F2F5;
--color-text-secondary: #B0B8C4;
--color-text-muted: #6B7280;
--color-text-disabled: #4B5563;
--color-text-inverse: #1A1D23;
--color-text-link: #4A90D9;
--color-text-link-hover:#6AAEE8;
--color-border: #2D3340;
--color-border-light: #22262F;
--color-border-focus: #4A90D9;
--color-success: #4ADE80;
--color-success-bg: #14532D;
--color-warning: #FCD34D;
--color-warning-bg: #451A03;
--color-error: #F87171;
--color-error-bg: #450A0A;
--color-info: #60A5FA;
--color-info-bg: #1E3A5F;
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.30);
--shadow-hover: 0 6px 24px rgba(74, 144, 217, 0.20);
--shadow-focus: 0 0 0 3px rgba(74, 144, 217, 0.30);
}
/* ==========================================================================
BASE STYLES — минимальный сброс и базовые стили
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
font-size: var(--text-base);
font-weight: var(--font-regular);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-main);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }
/* Links */
a {
color: var(--color-text-link);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--color-text-link-hover); }
a:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-xs);
}
/* Code */
code, pre, kbd, samp {
font-family: var(--font-mono);
font-size: var(--text-sm);
}
/* Images */
img, svg, video {
display: block;
max-width: 100%;
}
/* Lists */
ul, ol { list-style: none; }
/* Focus visible (global) */
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* ==========================================================================
UTILITY CLASSES — статусы сервисов (для dashboard)
========================================================================== */
/* Status dot */
.status-dot {
display: inline-block;
width: var(--status-dot-size);
height: var(--status-dot-size);
border-radius: var(--radius-full);
flex-shrink: 0;
}
.status-dot--online { background-color: var(--color-success); }
.status-dot--offline { background-color: var(--color-error); }
.status-dot--degraded { background-color: var(--color-warning); }
/* Status dot — pulse animation (только online) */
.status-dot--online {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
animation: status-pulse 2s infinite;
}
@keyframes status-pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0); }
}
/* Category badges */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.badge--devops { background: #DBEAFE; color: #1D4ED8; }
.badge--monitoring { background: #FEF3C7; color: #B45309; }
.badge--iam { background: #EDE9FE; color: #6D28D9; }
.badge--storage { background: #DCFCE7; color: #15803D; }
.badge--docs { background: #F0F9FF; color: #0369A1; }
.badge--platform { background: var(--color-surface-alt); color: var(--color-text-muted); }
/* Skeleton loading */
.skeleton {
background: linear-gradient(
90deg,
var(--color-surface-alt) 25%,
var(--color-border-light) 50%,
var(--color-surface-alt) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ==========================================================================
USAGE GUIDE
------------
www.wwn-lab.net (main portal):
Gitea ($GITEA_CUSTOM/public/css/custom.css):
@import url('/assets/css/design-tokens.css');
— затем переопределить Gitea-специфичные переменные
Nextcloud (Admin → Custom CSS):
Вставить содержимое секций 1–13 напрямую
(без base styles — Nextcloud имеет собственный reset)
Authentik (Admin → Branding → Custom CSS):
Вставить содержимое секций 1–13 напрямую
Для подключения иконок Phosphor:
========================================================================== */