/* ============================================================ PROTIS 3D — ŽETONŲ PAMATAS (odų sluoksnio apačia) ------------------------------------------------------------ Naujas VISOS programos veidas. Ne patobulinimas — kita paletė, kitos formos, kiti gyliai. IDĖJA: tamsus, tankus, tikslus prietaiso korpusas aplink NEPAKEISTĄ šviesią 3D sceną. Kontrastas tarp beveik juodo rėmo ir ryškios darbo drobės ir yra visas efektas — o scenos jis neliečia nė vienu pikseliu. Taip daro Blender, Figma, Linear. VEIKIMO PRINCIPAS: perrašom DIZAINO ŽETONUS. Visa programa piešiama tais pačiais kintamaisiais, tad persidažo iš karto — ir meniu, ir modalai, ir redaktorius. Nereikia liesti šimtų atskirų taisyklių. KRAUNA PO schema.css ir PRIEŠ ui-fx.css / editor-ui.css. ⚠️ Žetonus dedam ant `html.ui-fx body`, o ne ant `:root`. Priežastis: `body.theme-dark` (css/theme.css) irgi rašo juos ant BODY, o kintamasis paveldimas iš ARTIMIAUSIO protėvio — todėl :root lygio reikšmės pralaimėtų. Ant to paties body mūsų specifiškumas (0-1-2) didesnis, tad laimim visada. ⚠️ SCENOS SPALVŲ ČIA NĖRA IR NETURI BŪTI. js/settings.js:184 skaito --scene-bg / --scene-fog / --scene-grid-main / --scene-grid-sub per getComputedStyle ir perdažo Three.js sceną. Tuos keturis kintamuosius valdo css/theme.css (šviesi tema + body.theme-dark) — lygiai taip, kaip iki dizaino sluoksnio. Įrašęs juos čia, atimtum iš Nustatymų „Tema: tamsi" galią patamsinti 3D vaizdą. ============================================================ */ html.ui-fx body { /* Antrinė — duomenims, nuorodoms, jungtims */ --secondary: #4DA3FF; --secondary-dark: #2B8AF0; /* Trečia — ypatingoms būsenoms (mazgai, žymos) */ --tertiary: #A78BFA; /* ---- KORPUSO PAVIRŠIAI ------------------------------- Šeši žingsniai nuo giliausio fono iki iškiliausio krašto. Ne pilki, o vėsūs grafito-mėlyni: šalia oranžinės akcento jie atrodo kaip metalas, o ne kaip nuspalvinta juoduma. */ --bg-dark: #090C11; /* už visko */ --bg-panel: #11151C; /* juostos, skydeliai */ --bg-card: #161B24; /* kortelės, lizdai */ --bg-hover: #1E2530; /* užvedus */ --bg-input: #0C1015; /* įvesties laukai — įdubę */ --bg-glass: rgba(17, 21, 28, 0.72); --bg: #11151C; /* senų fallback'ų var(--bg, #fff) atsarga */ --input-bg: #0C1015; /* — || — var(--input-bg, #fff) */ /* ---- TEKSTAS ----------------------------------------- */ --text: #E7ECF4; --text-dim: #8B95A7; --text-soft: #5C6678; --text-bright: #FFFFFF; /* ---- LINIJOS ----------------------------------------- Tamsoje rėmelis neturi būti „pilka linija" — jis turi būti tik truputį šviesesnis už paviršių, kitaip sąsaja subyra į stačiakampius. */ --border: #212936; --border-light: #2C3746; --border-strong: #3B4859; /* ---- SEMANTINĖS --------------------------------------- */ --accent-green: #3DD68C; --accent-red: #FF6B6B; --accent-yellow: #FFC53D; --accent-orange: #FF9F45; --accent-cyan: #4DD4E8; /* ---- FORMOS ------------------------------------------- Didesni apvalinimai — pagrindinis skirtumas, kurį akis pastebi anksčiau nei spalvą. */ --r-xs: 6px; --r-sm: 9px; --r-base: 13px; --r-lg: 18px; --r-xl: 26px; --radius: var(--r-base); /* ---- GYLIAI ------------------------------------------- Tamsoje šešėlis vienas nieko nesako — reikia poros: tamsus metimas ŽEMYN + plona šviesos briauna VIRŠUJE. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.55); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.55); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.62), 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-xl: 0 34px 80px rgba(0, 0, 0, 0.70), 0 10px 26px rgba(0, 0, 0, 0.50); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 4px var(--primary-glow); /* Šviesos briauna ant paviršiaus viršaus (ui-fx.css pamatas) */ --fx-sheen: rgba(255, 255, 255, 0.06); /* ---- 3D SCENA — ČIA NERAŠOM --------------------------- --scene-bg / --scene-fog / --scene-grid-main / --scene-grid-sub palikti css/theme.css žinioje, kad Nustatymų tema (šviesi / tamsi) toliau valdytų 3D vaizdą lygiai taip pat, kaip prieš dizaino sluoksnį. */ } /* --------------------------------------------------------------- AKCENTO SPALVA — `:not([data-accent])` yra BŪTINAS --------------------------------------------------------------- Nustatymuose galima pasirinkti akcentą; jis rašomas kaip `body[data-accent="blue"]` (css/theme.css). To selektoriaus svoris — (0,1,1), o odos — (0,1,2): odos žymenų vienodai, bet elementų vienu daugiau, tad ODA LAIMI ir pasirinkta spalva niekur nepasimatydavo. Todėl akcento šeimos (`--primary*`) čia NERAŠOM, kai akcentas pasirinktas: `:not([data-accent])` reiškia „tik numatytoji oranžinė". Pasirinkus mėlyną/žalią/violetinę/rožinę, reikšmės ateina iš css/theme.css lygiai taip, kaip klasikinėje sąsajoje. --------------------------------------------------------------- */ html.ui-fx body:not([data-accent]) { /* Protis oranžinė lieka firminė, bet tamsiame fone ji gali būti daug sodresnė: šviesiame fone toks tonas rėktų. */ --primary: #FF6B35; --primary-dark: #E8551F; --primary-light: #FF8F5E; --primary-soft: rgba(255, 107, 53, 0.14); --primary-glow: rgba(255, 107, 53, 0.42); } /* --------------------------------------------------------------- PAMATAS --------------------------------------------------------------- */ html.ui-fx body { background: var(--bg-dark); color: var(--text); /* Tamsiame fone plonas šriftas „byra" — vienu laipteliu storiau. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.ui-fx ::selection { background: var(--primary-soft); color: var(--text-bright); } /* Slinkties juostos — tamsios, kad nebūtų baltų dryžių skydeliuose. */ html.ui-fx *::-webkit-scrollbar-thumb { background: var(--border-light); } html.ui-fx *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* --------------------------------------------------------------- ĮVESTIES LAUKAI — įdubę, ne iškilę Tamsioje sąsajoje laukas turi atrodyti kaip ANGA paviršiuje. --------------------------------------------------------------- */ html.ui-fx input[type="text"], html.ui-fx input[type="search"], html.ui-fx input[type="number"], html.ui-fx input[type="email"], html.ui-fx input[type="password"], html.ui-fx select, html.ui-fx textarea { background: var(--bg-input); color: var(--text); border-color: var(--border); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); } html.ui-fx input::placeholder, html.ui-fx textarea::placeholder { color: var(--text-soft); } html.ui-fx input:focus, html.ui-fx select:focus, html.ui-fx textarea:focus { border-color: var(--primary); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--primary-soft); outline: none; } /* Iškrentantys sąrašai — sisteminis meniu tamsoje */ html.ui-fx select option { background: var(--bg-card); color: var(--text); } /* --------------------------------------------------------------- PAVIRŠIŲ TAISYMAS Vietos, kur programoje įrašyta konkreti šviesi spalva, o ne žetonas — tamsiame fone jos liktų baltomis dėmėmis. --------------------------------------------------------------- */ html.ui-fx .modal, html.ui-fx .modal-content, html.ui-fx .dialog, html.ui-fx .popup, html.ui-fx .card { background: var(--bg-card); color: var(--text); border-color: var(--border); } /* Modalo fonas — tamsoje reikia gilesnio, kitaip langas neatsiskiria. */ html.ui-fx .modal-overlay { background: rgba(4, 6, 9, 0.62); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); } /* --------------------------------------------------------------- TIPOGRAFIJA — smulkios antraštės kaip ant prietaiso plokštelės --------------------------------------------------------------- */ html.ui-fx h1, html.ui-fx h2, html.ui-fx h3 { letter-spacing: -0.02em; color: var(--text-bright); } html.ui-fx kbd { background: var(--bg-hover); color: var(--text); border-color: var(--border-light); }