/* 06-nx-shell · nx-tokens · цвят · отстояния · повърхности · сенки · движение * * * * Стъпва на nx-ui v7 и се чете оттам, където живее — копие би било втора истина, * която се разминава след първата поправка. Тук се добавя само това, което ОС-ът * иска и v7 няма: движение с три продължителности, повърхности на нива и яркост * на тапета. Имената са роли с префикс `nx-`, не цветове: „какво е“, не „как * изглежда“ — темата сменя стойността, не името. */ @import url('/vendor/nx-ui/tokens.css'); :root { /* ── повърхности · четири нива ────────────────────────────────────────── Стъкло има САМО навигацията. Под текст размазаният фон яде четимостта и гори батерия на всеки кадър; затова четивните нива са непрозрачни. */ --nx-surface-0: var(--bg-app); /* дъното · под всичко */ --nx-surface-1: #0f1116; /* лист · непрозрачен, за четене */ --nx-surface-2: #161922; /* вдигнат лист · диалог, чекмедже */ --nx-surface-nav: var(--bg-glass); /* само тук стъкло */ --nx-blur-nav: saturate(180%) blur(20px); --nx-line: var(--border); --nx-line-strong: var(--border-hover); /* ── текст · по роля ─────────────────────────────────────────────────── */ --nx-fg: var(--text); --nx-fg-2: var(--text-2); --nx-fg-3: var(--text-3); --nx-fg-on-accent: var(--fg-on-solid); /* ── състояния · думите на ОС-а ──────────────────────────────────────── */ --nx-accent: var(--accent); --nx-ok: var(--ok); --nx-warn: var(--warn); --nx-err: var(--err); --nx-idle: var(--text-3); /* ── отстояния · една стълба, не числа на око ────────────────────────── */ --nx-sp-1: 4px; --nx-sp-2: 8px; --nx-sp-3: 12px; --nx-sp-4: 16px; --nx-sp-5: 24px; --nx-sp-6: 32px; /* ── радиуси ─────────────────────────────────────────────────────────── */ --nx-r-1: 8px; --nx-r-2: 12px; --nx-r-3: 16px; --nx-r-pill: 999px; /* ── сенки ───────────────────────────────────────────────────────────── */ --nx-shadow-1: var(--shadow-1); --nx-shadow-2: var(--shadow-2); --nx-shadow-3: var(--shadow-3); /* ── движение · три продължителности, два easing ───────────────────── Три стигат: докосване, преход, лист. Повече са спор, не система. Анимира се само transform и opacity — всичко друго кара браузъра да смята оформлението наново на всеки кадър. */ --nx-dur-1: 120ms; /* докосване · натиснато състояние */ --nx-dur-2: 200ms; /* преход · стандартът */ --nx-dur-3: 320ms; /* лист · чекмедже, диалог */ --nx-ease: var(--ease-smooth); /* без засичане */ --nx-ease-spring: var(--ease-spring); /* само при пускане на жест */ /* ── допир ─────────────────────────────────────────────────────────── 44px е долната граница на пръста; 54px е за това, което се натиска в движение или с една ръка. */ --nx-touch: 44px; --nx-touch-lg: 54px; --nx-safe-b: env(safe-area-inset-bottom, 0px); /* ── схема ─────────────────────────────────────────────────────────── Тъмната е основната: ОС-ът се гледа вечер и гласът е входът, не четенето на бяло. Светлата е по избор — ``. */ color-scheme: dark; /* ── тапет · яркост (OS-17) ─────────────────────────────────────────── Тапетът стои под воал, за да не решава четимостта картинката. */ --nx-wall: none; --nx-wall-dim: .55; --nx-wall-blur: 0px; } /* Който не иска движение, не го получава — и spring-ът пада пръв, защото засичането е най-неприятно точно на него. */ @media (prefers-reduced-motion: reduce) { :root { --nx-dur-1: 0ms; --nx-dur-2: 0ms; --nx-dur-3: 0ms; --nx-ease-spring: var(--ease-smooth); } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── помощни класове · толкова, колкото всеки етаж отгоре ползва ───────── */ .nx-surface { background: var(--nx-surface-1); border: .5px solid var(--nx-line); border-radius: var(--nx-r-3) } .nx-raised { background: var(--nx-surface-2); box-shadow: var(--nx-shadow-2) } .nx-nav { background: var(--nx-surface-nav); backdrop-filter: var(--nx-blur-nav); -webkit-backdrop-filter: var(--nx-blur-nav) } .nx-tap { min-height: var(--nx-touch); transition: transform var(--nx-dur-1) var(--nx-ease) } .nx-tap:active{ transform: scale(.97) } .nx-sheet { transform: translateY(110%); transition: transform var(--nx-dur-3) var(--nx-ease-spring) } .nx-sheet.up { transform: none } /* Тапетът: една повърхност под всичко, с воал върху нея. */ .nx-wallpaper::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--nx-wall) center/cover no-repeat; filter: blur(var(--nx-wall-blur)); } .nx-wallpaper::after { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--nx-surface-0); opacity: var(--nx-wall-dim); } /* Светлата тема се включва нарочно, не от системата: тя е избор, не догадка. */ [data-theme="light"] { --nx-surface-0: #f6f7f9; --nx-surface-1: #ffffff; --nx-surface-2: #ffffff; --nx-surface-nav: rgba(255,255,255,.72); --nx-line: #dfe3e8; --nx-line-strong: #c6ccd4; --nx-fg: #10141a; --nx-fg-2: #4a5560; --nx-fg-3: #7b8794; --nx-shadow-1: 0 2px 8px rgba(16,20,26,.08); --nx-shadow-2: 0 6px 18px rgba(16,20,26,.10); --nx-shadow-3: 0 0 40px rgba(16,20,26,.14); color-scheme: light; } /* Същото и за всичко извън компонентите: докосването е наше, не на браузъра. */ html{-webkit-tap-highlight-color:transparent} button,input,textarea,select,[role="button"]{-webkit-tap-highlight-color:transparent} button:focus,input:focus,textarea:focus{outline:none} button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--nx-accent);outline-offset:2px}