/* =====================================================================
SIMTU WWW Client — theme.css
---------------------------------------------------------------------
WLASCICIEL: agent "tokeny". Nie dopisuj tu komponentow.
Zakres pliku (i tylko tyle):
1. Font Inter (@import)
2. Zmienne motywu (:root) — paleta, wymiary, typografia, animacje
3. Reset
4. Klasy pomocnicze typografii
5. Klasy pomocnicze ukladu i odstepow
ZRODLA PRAWDY
* PALETA — SIMTU-Qt6/trunk/CLAUDE.md sekcja 2. Kolorow NIE bierzemy
z Figmy (decyzja usera). Mapowanie zmiennych Figmy:
"SIMTU accent 1" #e5058e -> --accent-primary #FF0A78
"SIMTU accent 2" #824db7 -> --project-purple #A855F7
"SIMTU accent 3" #00adee -> --status-info #3B82F6
"Colors/Mint" #00C7BE -> --project-teal #14B8A6
"SIMTU black" #000008 -> --bg-void #0a0a0a
"SIMTU white" #ffffff -> --text-primary #f0f0f0
"SIMTU light grey" #9c9c9c -> --text-secondary #9a9a9a
* WYMIARY / TYPOGRAFIA / KOMPONENTY — Figma 5EhOBm4rUvbayzFZkwnQpT,
strona 232:159 "App - Komponenty". Gdzie Figma rozni sie
od CLAUDE.md — wygrywa Figma (user prosil o odwzorowanie
Figmy); rozbieznosci sa opisane w komentarzach nizej.
ZASADA: to jedyny plik w projekcie, w ktorym wolno pisac wartosci hex.
Wszystkie pozostale arkusze uzywaja wylacznie var(--token).
===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
/* =====================================================================
1. ZMIENNE MOTYWU
===================================================================== */
:root {
/* -----------------------------------------------------------------
1.1 TLA — hierarchia glebokosci (CLAUDE.md 2)
----------------------------------------------------------------- */
--bg-void: #0a0a0a; /* titlebar, lewy rail — najciemniej */
--bg-primary: #111111; /* glowne tlo paneli */
--bg-secondary: #181818; /* karty, sidebar */
--bg-tertiary: #1f1f1f; /* hover, table row hover */
--bg-elevated: #242424; /* dropdowny, tooltipy, modale */
--bg-input: #1a1a1a; /* inputy, search bary */
/* -----------------------------------------------------------------
1.2 EFEKT "GLAZED DARK" — trzy warstwy z Figmy
Potwierdzone w get_design_context: styl "SIMTU_App_transparent 2"
= #1D1D1D, #050208, #1D1D1D. Kolejnosc warstw w Figmie (od spodu):
1) rgba(29,29,29,0.10) mix-blend-mode: color-burn
2) #050208 mix-blend-mode: plus-lighter
3) rgba(29,29,29,0.50) bez blendu
Implementacja: klasa .glazed w components.css.
----------------------------------------------------------------- */
--glaze-1: rgba(29, 29, 29, 0.10); /* warstwa color-burn */
--glaze-2: #050208; /* warstwa plus-lighter */
--glaze-3: rgba(29, 29, 29, 0.50); /* warstwa wierzchnia */
--glaze-flat: rgba(29, 29, 29, 0.85); /* wariant awaryjny */
--glaze-edge: rgba(255, 255, 255, 0.06);/* obrys w wariancie awaryjnym */
--glaze-blur: 20px;
--glaze-blur-window:50px; /* glowne okno aplikacji */
/* Aliasy zgodnosciowe — uzywane przez stary app.css i widoki. */
--glass-bg: var(--glaze-flat);
--glass-border: var(--glaze-edge);
--glass-blur: var(--glaze-blur);
--bg-module: var(--glaze-3); /* karty, widgety */
--bg-panel: var(--glaze-flat); /* panele boczne */
--bg-surface: rgba(28, 28, 38, 0.50); /* powierzchnie ekranow (Qt-exact) */
--bg-dialog: #1c1c26; /* tlo dialogow (Qt-exact) */
/* -----------------------------------------------------------------
1.3 NAKLADKI INTERAKCJI
----------------------------------------------------------------- */
--overlay-hover: rgba(255, 255, 255, 0.03);
--overlay-active: rgba(255, 255, 255, 0.06);
--overlay-strong: rgba(255, 255, 255, 0.09);
--overlay-zebra: rgba(255, 255, 255, 0.02); /* co drugi wiersz tabeli */
/* -----------------------------------------------------------------
1.4 TEKST
----------------------------------------------------------------- */
--text-primary: #f0f0f0; /* glowny tekst, labels (Figma: SIMTU white) */
--text-secondary: #9a9a9a; /* opisy, meta (Figma: SIMTU light grey) */
--text-tertiary: #555555; /* placeholder, disabled */
--text-inverse: #0e0e0e; /* tekst na jasnych tlach (warning, biale karty) */
--text-on-accent: #ffffff; /* tekst na accencie i solidnych statusach */
--text-muted: #767677; /* naglowki kolumn, akcje w wierszach */
--text-bright: #d4d4d4; /* daty, tresc komentarzy */
/* -----------------------------------------------------------------
1.5 AKCENT (magenta) — UZYWAJ OSZCZEDNIE: max 1-2 elementy na ekran
----------------------------------------------------------------- */
--accent-primary: #FF0A78;
--accent-hover: #E8006A;
--accent-active: #C40058;
--accent-dark: #2a0015;
--accent-glow: rgba(255, 10, 120, 0.12);
--accent-soft: rgba(255, 10, 120, 0.08);
--accent-strong: rgba(255, 10, 120, 0.18);
--accent: var(--accent-primary); /* alias zgodnosciowy */
--accent-border: rgba(255, 10, 120, 0.40); /* alias zgodnosciowy */
/* -----------------------------------------------------------------
1.6 STATUSY — bazowy kolor, tlo pigulki, obrys, tekst
Bazy z CLAUDE.md 2. Tla/obrysy wg CLAUDE.md 5.3 (12% / 30%).
----------------------------------------------------------------- */
--status-success: #22C55E; /* Completed */
--status-warning: #F59E0B; /* In Progress */
--status-danger: #EF4444; /* Overdue / Error / Urgent */
--status-info: #3B82F6; /* Not Started / Info / Normal */
--status-neutral: #6B7280; /* All Tasks / Neutral */
--status-success-fg: #4ADE80; /* tekst na pigulce (jasniejszy wariant) */
--status-warning-fg: #FCD34D;
--status-danger-fg: #F87171;
--status-info-fg: #60A5FA;
--status-neutral-fg: #9c9c9c;
--status-success-bg: rgba( 34, 197, 94, 0.12);
--status-warning-bg: rgba(245, 158, 11, 0.12);
--status-danger-bg: rgba(239, 68, 68, 0.12);
--status-info-bg: rgba( 59, 130, 246, 0.12);
--status-neutral-bg: rgba(107, 114, 128, 0.12);
--status-success-bd: rgba( 34, 197, 94, 0.30);
--status-warning-bd: rgba(245, 158, 11, 0.30);
--status-danger-bd: rgba(239, 68, 68, 0.30);
--status-info-bd: rgba( 59, 130, 246, 0.30);
--status-neutral-bd: rgba(107, 114, 128, 0.30);
/* -----------------------------------------------------------------
1.7 KOLORY PROJEKTOW (cyklicznie po project_id)
----------------------------------------------------------------- */
--project-green: #22C55E; /* Greenfield Apartment */
--project-purple: #A855F7; /* Riverside Flat (Figma: SIMTU accent 2) */
--project-pink: #EC4899; /* Wilton House */
--project-teal: #14B8A6; /* Parkview Residence (Figma: Colors/Mint) */
--project-amber: #F59E0B;
--project-blue: #3B82F6;
--project-gray: #6B7280;
/* Tinty projektow — do odznak tekstowych (12% tla / 30% obrysu). */
--project-purple-bg: rgba(168, 85, 247, 0.12);
--project-purple-bd: rgba(168, 85, 247, 0.30);
--project-teal-bg: rgba( 20, 184, 166, 0.12);
--project-teal-bd: rgba( 20, 184, 166, 0.30);
--project-purple-fg: #C084FC;
--project-teal-fg: #2DD4BF;
/* -----------------------------------------------------------------
1.8 GRADIENTY AVATAROW
----------------------------------------------------------------- */
--avatar-1: linear-gradient(135deg, #EC4899, #8B5CF6); /* SB */
--avatar-2: linear-gradient(135deg, #3B82F6, #06B6D4); /* EC */
--avatar-3: linear-gradient(135deg, #8B5CF6, #6366F1); /* DB */
--avatar-4: linear-gradient(135deg, #F59E0B, #EF4444); /* MT */
--avatar-5: linear-gradient(135deg, #10B981, #3B82F6); /* MD */
--avatar-6: linear-gradient(135deg, #6B7280, #4B5563); /* default */
/* -----------------------------------------------------------------
1.9 TYPY PLIKOW (kolor ikony)
----------------------------------------------------------------- */
--file-doc: #2563EB;
--file-xls: #16A34A;
--file-pdf: #DC2626;
--file-img: #D97706;
--file-other: #6B7280;
/* -----------------------------------------------------------------
1.10 OBRAMOWANIA
----------------------------------------------------------------- */
--border-subtle: rgba(255, 255, 255, 0.06); /* karty, podzialy */
--border-default: rgba(255, 255, 255, 0.10); /* inputy, hover */
--border-strong: rgba(255, 255, 255, 0.16); /* hover przyciskow */
--border-accent: rgba(255, 10, 120, 0.40); /* aktywny input, selected */
--border-hairline: rgba(255, 255, 255, 0.04); /* separatory w listach */
/* -----------------------------------------------------------------
1.11 CIENIE
----------------------------------------------------------------- */
--scrim: rgba(0, 0, 0, 0.55); /* przyciemnienie pod modalem */
--shadow-window: 0 15px 26px rgba(29, 29, 29, 0.20); /* glowne okno (Figma) */
--shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.50);
--shadow-dialog: 0 20px 60px rgba(0, 0, 0, 0.60);
--shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.45);
/* -----------------------------------------------------------------
1.12 PROMIENIE (Figma / CLAUDE.md 4)
----------------------------------------------------------------- */
--radius-xs: 2px;
--radius-sm: 4px; /* przyciski Quick View/Explore, badge, tagi, logo karty */
--radius-md: 6px; /* karty, search bar, Filters, chipy, avatar 32px */
--radius-lg: 8px; /* glowne okno, dropdown menu, aktywna ikona railu */
--radius-full: 9999px; /* pigulki statusow, kropki */
/* -----------------------------------------------------------------
1.13 SKALA ODSTEPOW (baza 4px)
----------------------------------------------------------------- */
--space-1: 4px; /* gap miedzy modulami — ZASADA NADRZEDNA */
--space-2: 8px;
--space-3: 12px; /* padding paneli */
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
--module-gap: var(--space-1); /* odstep miedzy kartami / widgetami */
--panel-pad: var(--space-3); /* padding wewnetrzny paneli */
/* -----------------------------------------------------------------
1.14 WYMIARY POWLOKI
ROZBIEZNOSC ZRODEL (swiadoma decyzja — bierzemy Figme):
CLAUDE.md sekcja 4 : --sidebar-w 56px
zrodla SIMTU-Qt6 : rail 40px
Figma "Sidebar Hide FINAL" : 44px (zwiniety) / 182px (rozwiniety)
User prosil o odwzorowanie Figmy, wiec obowiazuja 44/182px.
Stare nazwy (--sidebar-w, --nav-h) zostaja jako aliasy, zeby nie
rozsypac regul, ktore jeszcze nie zostaly przeniesione z app.css.
----------------------------------------------------------------- */
--titlebar-h: 38px; /* CLAUDE.md 4 */
--rail-w-collapsed: 44px; /* Figma "Sidebar Hide FINAL" 44x696 */
--rail-w-expanded: 182px; /* Figma 182x696 */
--tabbar-h: 40px; /* Figma "Tabbbar" 1098x40 */
--submenu-h: 40px; /* Figma "Top Submenu" 988x40 */
--panel-w: 236px; /* Figma "App Left Submenu" 236x648 */
--row-h: 36px; /* wiersz tabeli / Gantta (CLAUDE.md 5.6) */
--sidebar-w: var(--rail-w-collapsed); /* alias zgodnosciowy */
--sidebar-w-open: var(--rail-w-expanded); /* alias zgodnosciowy */
--project-w: var(--panel-w); /* alias zgodnosciowy */
--nav-h: var(--tabbar-h); /* alias zgodnosciowy */
/* -----------------------------------------------------------------
1.15 WYMIARY KOMPONENTOW (zmierzone w Figmie)
----------------------------------------------------------------- */
--control-h: 16px; /* Search, Filters, chip statusu, Task Priority */
--search-w: 212px; /* Figma "Search by keyword" 212x16 */
--chip-w: 120px; /* Figma "Filters" (chip statusu) 120x16 */
--priority-w: 100px; /* Figma "Task Priority" 100x16 */
--dot-size: 10px; /* Figma "Status Dot" 10x10 */
--avatar-size: 32px; /* Figma "Member Avatar" 32x32, radius 6 */
--dropdown-w: 244px; /* Figma "Bottom Dropdown Menu" 244x40 */
--dropdown-h: 40px;
/* Karta brandu / produktu (CLAUDE.md 4 == Figma) */
--card-w: 232px;
--card-h: 167px;
--card-logo-h: 115px; /* bialy obszar z logo */
--card-label-h: 34px; /* ciemny footer z nazwa */
--card-btn-w: 110px; /* Quick View / Explore */
--card-btn-h: 16px; /* w karcie 16px; samodzielny komponent w Figmie ma 21px */
/* Ikony — NIE skaluj wszystkiego jedna regula (SPEC) */
--ic-rail: 32px; /* ikony lewego railu */
--ic-file: 32px; /* ikony typow plikow */
--ic-chevron: 12px; /* chevrony */
--ic-sm: 14px; /* inline w tekscie */
--ic-md: 16px; /* domyslna ikona UI */
--ic-lg: 20px;
/* -----------------------------------------------------------------
1.16 TYPOGRAFIA (Figma == CLAUDE.md 3)
----------------------------------------------------------------- */
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "Menlo", "Consolas", "SFMono-Regular", monospace;
--fs-badge: 7px; --lh-badge: 14px; /* Notification Badge (Figma) */
--fs-micro: 9px; --lh-micro: 12px; /* etykiety grup, sekcji */
--fs-list: 10px; --lh-list: 14px; /* SIMTU App List / List Head */
--fs-sm: 11px; --lh-sm: 15px;
--fs-md: 12px; --lh-md: 16px; /* wiersze tabel */
--fs-body: 13px; --lh-body: 18px; /* tekst bazowy (Figma 13/18) */
--fs-section:14px; --lh-section:19px; /* naglowki widgetow */
--fs-title: 18px; --lh-title: 23px; /* tytul ekranu */
--fs-kpi: 22px; --lh-kpi: 24px; /* liczby KPI */
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
/* -----------------------------------------------------------------
1.17 WARSTWY (z-index)
----------------------------------------------------------------- */
--z-sticky: 2;
--z-panel: 10;
--z-menu: 100;
--z-backdrop: 1000;
--z-toast: 1200;
/* -----------------------------------------------------------------
1.18 ANIMACJE
----------------------------------------------------------------- */
--t-fast: 0.10s;
--t-base: 0.15s;
--t-slow: 0.30s;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* =====================================================================
2. RESET
===================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Powloka aplikacji nie scrolluje — scrolluja obszary wewnetrzne. */
overflow: hidden;
overscroll-behavior: none;
}
img,
video,
canvas {
display: block;
max-width: 100%;
}
svg {
display: block;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: color var(--t-base);
}
a:hover {
color: var(--accent-hover);
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
input,
textarea,
select {
font: inherit;
color: inherit;
background: none;
border: none;
}
textarea {
resize: vertical;
}
hr {
border: none;
height: 1px;
background: var(--border-subtle);
}
[hidden] {
display: none !important;
}
:focus-visible {
outline: 2px solid var(--border-accent);
outline-offset: 1px;
}
::selection {
background: var(--accent-glow);
color: var(--text-primary);
}
/* --- Scrollbary — dyskretne, w stylu SIMTU ------------------------- */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }
/* Kontrolki natywne (date picker, select) w ciemnym wariancie. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
select {
color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =====================================================================
3. TYPOGRAFIA — klasy pomocnicze (CLAUDE.md 3 == style z Figmy)
===================================================================== */
/* "SIMTU App List" — tekst list, opisy, meta. */
.t-list { font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font); }
/* "SIMTU App List Head" — naglowki kolumn, "Filters", etykiety kontrolek. */
.t-list-head { font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font); }
/* Tekst bazowy UI (panele, wiersze dropdownow, avatar 32px). */
.t-base { font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); }
/* Wiersze tabel. */
.t-row { font: var(--fw-regular) var(--fs-md) / var(--lh-md) var(--font); }
/* Naglowek sekcji / widgetu dashboardu. */
.t-section { font: var(--fw-medium) var(--fs-section) / var(--lh-section) var(--font); }
/* Liczby KPI (srodek donuta, kafle statystyk). */
.t-kpi { font: var(--fw-semi) var(--fs-kpi) / var(--lh-kpi) var(--font); }
/* Zakladki top-menu. */
.t-tab { font: var(--fw-medium) var(--fs-list) / 1 var(--font); text-transform: uppercase; letter-spacing: 0.05em; }
/* "Brand name" — nazwa produktu / brandu pod karta. */
.t-brand { font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font); text-transform: uppercase; }
/* Mala etykieta nad polem / nad grupa. */
.t-label { font: var(--fw-bold) var(--fs-micro) / 1 var(--font); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
/* Tytul ekranu. */
.t-title { font: var(--fw-bold) var(--fs-title) / var(--lh-title) var(--font); }
/* Tekst pomocniczy / meta. */
.t-meta { font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font); color: var(--text-secondary); }
/* Odznaka licznikowa (Figma: Inter 7/14). */
.t-badge { font: var(--fw-regular) var(--fs-badge) / var(--lh-badge) var(--font); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
/* --- Kolory tekstu ------------------------------------------------- */
.u-fg { color: var(--text-primary); }
.u-fg-2 { color: var(--text-secondary); }
.u-fg-3 { color: var(--text-tertiary); }
.u-fg-muted { color: var(--text-muted); }
.u-fg-accent { color: var(--accent-primary); }
.u-fg-success { color: var(--status-success-fg); }
.u-fg-warning { color: var(--status-warning-fg); }
.u-fg-danger { color: var(--status-danger-fg); }
.u-fg-info { color: var(--status-info-fg); }
/* --- Zachowanie tekstu --------------------------------------------- */
.u-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.u-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.u-nowrap { white-space: nowrap; }
.u-break { word-break: break-word; overflow-wrap: anywhere; }
.u-pre { white-space: pre-wrap; }
.u-upper { text-transform: uppercase; letter-spacing: 0.05em; }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-num { font-variant-numeric: tabular-nums; }
.u-strike { text-decoration: line-through; color: var(--text-muted); }
/* =====================================================================
4. UKLAD I ODSTEPY — klasy pomocnicze
===================================================================== */
.u-row { display: flex; flex-direction: row; align-items: center; }
.u-row-top{ display: flex; flex-direction: row; align-items: flex-start; }
.u-col { display: flex; flex-direction: column; }
.u-wrap { flex-wrap: wrap; }
.u-between{ justify-content: space-between; }
.u-middle { justify-content: center; align-items: center; }
.u-end { justify-content: flex-end; }
.u-flex1 { flex: 1; min-width: 0; min-height: 0; }
.u-mla { margin-left: auto; }
.u-shrink0{ flex-shrink: 0; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-6 { padding: var(--space-6); }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-scroll-y { overflow-y: auto; min-height: 0; }
.u-scroll-x { overflow-x: auto; }
.u-hidden { display: none !important; }
.u-invisible{ visibility: hidden; }
/* Uproszczony wariant glazed — bez warstw blendu. Pelny efekt: .glazed
w components.css. Ta klasa zostaje dla powierzchni, ktore nie moga
miec pseudoelementow (np. lub
). */
.u-glass {
background: var(--glaze-flat);
border: 1px solid var(--glaze-edge);
-webkit-backdrop-filter: blur(var(--glaze-blur));
backdrop-filter: blur(var(--glaze-blur));
}