/* ============================================================ PROTIS 3D — UI FX sluoksnis (DIZAINO ŠAKA) ------------------------------------------------------------ Tik vizualas: spalvos, gyliai, judesys. JOKIOS logikos, jokių matmenų, kuriuos skaičiuoja JS (--sidebar-w, --toolbar-h ir t.t.). Krauna PO main.css/schema.css, todėl viską perrašo be !important. VISKAS po `html.ui-fx` — nuimk klasę ir programa atrodo kaip anksčiau (js/ui-motion.js: localStorage['protis3d_ui_fx'] = 'off'). ⚠️ Sąmoningai NEliečiam: #toolbar transform/filter (sukurtų stacking kontekstą ir 🛠 Įrankiai meniu dingtų po panelėmis), #main position, panelių plotių. ============================================================ */ /* --------------------------------------------------------------- 1. Judesio sistema — viena kalba visam UI --------------------------------------------------------------- */ html.ui-fx { /* Spyruoklė — trumpas persistūmimas per kraštą (mygtukams, kortelėms) */ --fx-spring: 260ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Sklandus išėjimas — panelėms, modalams */ --fx-glide: 380ms cubic-bezier(0.16, 1, 0.30, 1); --fx-snap: 140ms cubic-bezier(0.4, 0, 0.2, 1); /* Plonas šviesus brūkšnys ant paviršiaus viršaus — „metalo“ pojūtis */ --fx-sheen: rgba(255, 255, 255, 0.55); } /* Akcento sluoksniai — skaičiuojami iš --primary. ⚠️ BŪTINAI ant BODY, o ne ant . Kintamojo reikšmė apskaičiuojama tame elemente, kuriame parašyta: ant `var(--primary)` paimtų css/theme.css `:root` oranžinę ir nematytų nei `body.theme-dark`, nei `body[data-accent="blue"]`. Būtent dėl to pasirinkus mėlyną akcentą aktyvių mygtukų žiedai likdavo oranžiniai. */ html.ui-fx body { --fx-tint-04: color-mix(in srgb, var(--primary) 4%, transparent); --fx-tint-08: color-mix(in srgb, var(--primary) 8%, transparent); --fx-tint-16: color-mix(in srgb, var(--primary) 16%, transparent); --fx-tint-32: color-mix(in srgb, var(--primary) 32%, transparent); } html.ui-fx body.theme-dark { --fx-sheen: rgba(255, 255, 255, 0.07); } /* Sisteminis „mažiau judesio“ — gerbiam besąlygiškai. */ @media (prefers-reduced-motion: reduce) { html.ui-fx *, html.ui-fx *::before, html.ui-fx *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------------- 2. Paviršiai — panelės nustoja būti plokščios --------------------------------------------------------------- */ /* Plonas šviesos brūkšnys viršutinėje briaunoje = paviršius atrodo apšviestas iš viršaus, kaip tikra plokštuma, o ne stačiakampis. */ html.ui-fx #sidebar, html.ui-fx #properties { background: linear-gradient(180deg, var(--fx-tint-04) 0%, transparent 220px), var(--bg-panel); box-shadow: inset 0 1px 0 var(--fx-sheen); } /* Įrankių juostos apačioje — gyva akcento linija. Ne dekoracija: iš karto matai, kad programa „gyva“, ir juosta atsiskiria nuo scenos net kai fonas šviesus. */ /* SVARBU: viskas piešiama pačios juostos fonu, be ::after ir be animacijos. ::after reikalautų position:relative, o nuolat animuojamas gradientas per visą juostos plotį verstų naršyklę perpiešti ją kas kadrą — 3D programoje tai atimtų kadrus iš scenos. Statiškas gradientas kainuoja nulį. */ html.ui-fx #toolbar { border-bottom-color: transparent; background-color: var(--bg-glass); background-image: /* 1 px šviesos brūkšnys viršuje */ linear-gradient(180deg, var(--fx-sheen), transparent), /* akcento bėgis apačioje — pakeičia pilką rėmelį */ linear-gradient(90deg, var(--border) 0%, var(--fx-tint-32) 24%, color-mix(in srgb, var(--secondary) 28%, transparent) 50%, var(--fx-tint-32) 76%, var(--border) 100%); background-size: 100% 1px, 100% 1px; background-position: 0 0, 0 100%; background-repeat: no-repeat, no-repeat; } /* Būsenos juosta — tas pats šviesos brūkšnys, tik iš viršaus. */ html.ui-fx #statusbar { background: linear-gradient(0deg, var(--fx-tint-04) 0%, transparent 100%), var(--bg-panel); box-shadow: inset 0 1px 0 var(--fx-sheen); } /* --------------------------------------------------------------- 3. Mygtukai — fizika: pakyla, prisispaudžia, blizgteli --------------------------------------------------------------- */ html.ui-fx .tool-btn { transition: color var(--fx-snap), background var(--fx-snap), border-color var(--fx-snap), box-shadow var(--fx-snap), transform var(--fx-spring); overflow: hidden; /* saugu: mygtuko viduje nieko absoliutaus nėra */ isolation: isolate; /* blizgesys lieka mygtuke */ } /* Blizgesys, praeinantis per mygtuką užvedus pelę. */ html.ui-fx .tool-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, var(--fx-sheen) 50%, transparent 65%); transform: translateX(-120%); opacity: 0; pointer-events: none; } html.ui-fx .tool-btn:hover::after { opacity: 1; transform: translateX(120%); transition: transform 520ms var(--ease-out), opacity 120ms linear; } html.ui-fx .tool-btn:hover { transform: translateY(-1.5px); box-shadow: 0 3px 10px -2px rgba(15, 23, 42, 0.16); } html.ui-fx body.theme-dark .tool-btn:hover { box-shadow: 0 3px 12px -2px rgba(0, 0, 0, 0.55); } /* Paspaudimas — trumpas, be atšokimo, kad jaustųsi kietas kontaktas. */ html.ui-fx .tool-btn:active { transform: translateY(0.5px) scale(0.975); transition: transform 70ms ease-out; } /* Aktyvus įrankis — švelnus kvėpuojantis žiedas. Nedidelis, kad po 8 valandų darbo nevargintų akių. */ /* Be savo animacijos: main.css jau turi `.tool-btn.active::before` su opacity mirgesiu (btnActiveShimmer). Antra box-shadow animacija tik dubliuotų efektą ir perpiešinėtų mygtuką be reikalo. */ html.ui-fx .tool-btn.active { box-shadow: var(--shadow-xs), 0 0 0 1px var(--primary), 0 0 16px -5px var(--primary-glow); } /* „+ Modelis“ akcentas nuimtas 2026-09-04 — mygtukas meniu viduje, kaip visi. */ /* Įrankių meniu skydelis — įskrenda, o ne šokteli. */ html.ui-fx .tb-group.open > .tb-panel { animation: fxPanelDrop 200ms var(--ease-out); transform-origin: top left; box-shadow: var(--shadow-lg); border-color: var(--border-light); } @keyframes fxPanelDrop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } } /* Meniu eilutės — akcento juostelė iš kairės, kaip sąraše. */ html.ui-fx .tb-panel .tool-btn { border-left: 2px solid transparent; border-radius: var(--r-xs); } html.ui-fx .tb-panel .tool-btn:hover { transform: translateX(2px); border-left-color: var(--primary); box-shadow: none; } /* --------------------------------------------------------------- 4. Šoninė juosta — tab'ai su slystančiu pabraukimu --------------------------------------------------------------- */ html.ui-fx .sidebar-tab::after { background: var(--primary); transform: scaleX(0); transform-origin: center; transition: transform var(--fx-spring), opacity var(--fx-snap); opacity: 0; } html.ui-fx .sidebar-tab.active::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 10px -1px var(--primary-glow); } html.ui-fx .sidebar-tab:hover::after { transform: scaleX(0.45); opacity: 0.45; } html.ui-fx .sidebar-tab.active { background: linear-gradient(180deg, var(--fx-tint-08), transparent); } /* Komponentų sąrašas — kortelės pakyla ir gauna akcento kraštą. */ html.ui-fx .component-item { transition: background var(--fx-snap), color var(--fx-snap), border-left-color var(--fx-snap), box-shadow var(--fx-snap), transform var(--fx-spring); } html.ui-fx .component-item:hover { transform: translateX(4px); box-shadow: -2px 2px 12px -6px rgba(15, 23, 42, 0.35); background: linear-gradient(90deg, var(--fx-tint-08), var(--bg-hover) 60%); } html.ui-fx .component-item:active { transform: translateX(4px) scale(0.99); transition: transform 70ms ease-out; } /* Kategorijos antraštė — mažas akcentas užvedus, kad būtų aišku, jog spaudžiama. */ html.ui-fx .category-header { transition: color var(--fx-snap), background var(--fx-snap); border-radius: var(--r-xs); } html.ui-fx .category-header:hover { color: var(--primary); background: var(--fx-tint-04); } /* --------------------------------------------------------------- 5. Slinkties juostos — plonos, temos spalvos --------------------------------------------------------------- */ html.ui-fx *::-webkit-scrollbar { width: 10px; height: 10px; } html.ui-fx *::-webkit-scrollbar-track { background: transparent; } html.ui-fx *::-webkit-scrollbar-thumb { background: var(--border-light); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } html.ui-fx *::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: content-box; } html.ui-fx * { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; } /* --------------------------------------------------------------- 6. Fokusas klaviatūra — matomas, bet netrukdo pelei --------------------------------------------------------------- */ /* Be `border-radius` — jis pakeistų PAČIO elemento kampus fokuso metu ir mygtukas „šoktelėtų“ į kitą formą. Apvadas piešiamas outline'u. */ html.ui-fx :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } html.ui-fx :focus:not(:focus-visible) { outline: none; } /* Įvesties laukai — akcento žiedas vietoj šuoliuojančio rėmelio. */ html.ui-fx input[type="text"]:focus, html.ui-fx input[type="number"]:focus, html.ui-fx input[type="search"]:focus, html.ui-fx input[type="email"]:focus, html.ui-fx input[type="password"]:focus, html.ui-fx textarea:focus, html.ui-fx select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--fx-tint-16); transition: box-shadow var(--fx-snap), border-color var(--fx-snap); } /* --------------------------------------------------------------- 7. Modalai — fonas nublunka, langas išauga --------------------------------------------------------------- */ html.ui-fx .modal-overlay { backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); animation: fxFade 180ms ease-out; } html.ui-fx .modal-dialog { animation: fxDialogIn 300ms var(--ease-out); box-shadow: var(--shadow-xl); border-radius: var(--r-lg); } @keyframes fxFade { from { opacity: 0; } to { opacity: 1; } } @keyframes fxDialogIn { from { opacity: 0; transform: translateY(14px) scale(0.965); } to { opacity: 1; transform: none; } } html.ui-fx .modal-btn { transition: background var(--fx-snap), border-color var(--fx-snap), box-shadow var(--fx-snap), transform var(--fx-spring); } html.ui-fx .modal-btn:hover { transform: translateY(-1px); } html.ui-fx .modal-btn:active { transform: translateY(0.5px) scale(0.98); transition: transform 70ms ease-out; } html.ui-fx .modal-btn-primary { background: linear-gradient(180deg, var(--primary-light), var(--primary)); box-shadow: 0 2px 8px -2px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.3); } html.ui-fx .modal-btn-primary:hover { box-shadow: 0 6px 18px -4px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.3); } html.ui-fx .modal-close { transition: color var(--fx-snap), background var(--fx-snap), transform var(--fx-spring); border-radius: var(--r-sm); } /* Ir pasukimas, ir padidinimas: jei mygtuke „ד, vien pasukimas 90° nieko nepakeistų — kryželis atrodo vienodai iš abiejų pusių. */ html.ui-fx .modal-close:hover { transform: rotate(90deg) scale(1.12); background: var(--bg-hover); color: var(--accent-red); } /* --------------------------------------------------------------- 8. Pranešimai (toast) — įspyruokliuoja iš dešinės --------------------------------------------------------------- */ html.ui-fx .toast { box-shadow: var(--shadow-lg); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); border-radius: var(--r-base); } html.ui-fx .toast-in { animation: fxToastIn 320ms var(--fx-spring); } html.ui-fx .toast-out { animation: fxToastOut 200ms ease-in forwards; } @keyframes fxToastIn { from { opacity: 0; transform: translateX(28px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes fxToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(20px) scale(0.96); } } /* --------------------------------------------------------------- 9. Krovimo ekranas — vietoj pilkos suktuko, firminis ženklas --------------------------------------------------------------- */ html.ui-fx[data-skin="studio"] #loading-screen { background: radial-gradient(120% 90% at 50% 0%, #1a1a2e 0%, #0f0f17 55%, #08080d 100%); } /* Brėžinio tinklelis fone — nuoroda į tai, ką programa daro. */ html.ui-fx[data-skin="studio"] #loading-screen::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, #000 25%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, #000 25%, transparent 78%); animation: fxGridDrift 22s linear infinite; } @keyframes fxGridDrift { from { background-position: 0 0, 0 0; } to { background-position: 44px 44px, 44px 44px; } } html.ui-fx[data-skin="studio"] #loading-screen .ls-box { position: relative; z-index: 1; gap: 22px; } /* Suktukas — du priešpriešiais besisukantys lankai, kaip tikras prietaisas. */ html.ui-fx[data-skin="studio"] #loading-screen .ls-spinner { width: 58px; height: 58px; border: 2px solid rgba(255, 255, 255, 0.10); border-top-color: var(--primary, #E8743B); border-right-color: color-mix(in srgb, var(--primary, #E8743B) 45%, transparent); animation: fxSpin 1.15s cubic-bezier(0.6, 0.1, 0.4, 0.9) infinite; position: relative; box-shadow: 0 0 24px -6px var(--primary-glow, rgba(232,116,59,0.4)); } html.ui-fx[data-skin="studio"] #loading-screen .ls-spinner::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid transparent; border-bottom-color: rgba(255, 255, 255, 0.45); animation: fxSpin 0.85s linear infinite reverse; } @keyframes fxSpin { to { transform: rotate(360deg); } } html.ui-fx[data-skin="studio"] #loading-screen .ls-text { font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: rgba(255, 255, 255, 0.55); background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.35) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxTextSweep 2.4s ease-in-out infinite; } @keyframes fxTextSweep { from { background-position: 180% 0; } to { background-position: -40% 0; } } /* --------------------------------------------------------------- 10. Tuščia scena + dešinė įrankių juostelė --------------------------------------------------------------- */ html.ui-fx .empty-state-card { animation: fxDialogIn 420ms var(--ease-out) 120ms both; box-shadow: var(--shadow-lg); } html.ui-fx .empty-action-btn { transition: background var(--fx-snap), border-color var(--fx-snap), color var(--fx-snap), transform var(--fx-spring), box-shadow var(--fx-snap); } html.ui-fx .empty-action-btn:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 20px -8px var(--primary-glow); } html.ui-fx .tstrip-btn { transition: background var(--fx-snap), color var(--fx-snap), transform var(--fx-spring), box-shadow var(--fx-snap); } html.ui-fx .tstrip-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 1px var(--fx-tint-32), 0 4px 12px -4px rgba(15,23,42,0.28); } html.ui-fx .tstrip-btn:active { transform: scale(0.96); transition: transform 70ms ease-out; } html.ui-fx .tstrip-btn.active { box-shadow: 0 0 0 1px var(--primary), 0 0 14px -5px var(--primary-glow); } /* Vaizdo gizmo rodyklės — pakyla kryptimi, kuria suks. */ html.ui-fx .vg-arrow { transition: color var(--fx-snap), background var(--fx-snap), transform var(--fx-spring); } html.ui-fx .vg-arrow:hover { color: var(--primary); } html.ui-fx .vg-up:hover { transform: translateY(-2px); } html.ui-fx .vg-down:hover { transform: translateY(2px); } html.ui-fx .vg-left:hover { transform: translateX(-2px); } html.ui-fx .vg-right:hover { transform: translateX(2px); } /* --------------------------------------------------------------- 11. Projektų kortelės (pagrindinis meniu) --------------------------------------------------------------- */ html.ui-fx .mm-pcard { transition: transform var(--fx-glide), box-shadow var(--fx-glide), border-color var(--fx-glide); } html.ui-fx .mm-pcard:hover { transform: translateY(-5px) scale(1.012); box-shadow: var(--shadow-xl), 0 0 0 1px var(--fx-tint-32); } /* --------------------------------------------------------------- 12. Efektai, kuriuos paleidžia js/ui-motion.js --------------------------------------------------------------- */ /* Krovimo ekranas išnyksta su lengvu priartėjimu — atrodo, tarsi uždanga pakiltų nuo scenos, o ne dingtų vienu kadru. */ html.ui-fx #loading-screen.fx-ls-out { animation: fxCurtain 420ms cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; } /* TIK opacity + transform — juos naršyklė atlieka vaizdo plokštėje. `filter: blur()` per visą ekraną čia kainuotų brangiausiu momentu: kaip tik tada kraunami GLB modeliai ir statoma scena. */ @keyframes fxCurtain { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.06); } } /* Būsenos juostos skaičius blykstelėja, kai pasikeičia reikšmė. */ html.ui-fx #statusbar span.fx-bump { animation: fxBump 620ms var(--ease-out); } /* TIK spalva ir švytėjimas — jokio display:inline-block ir jokio transform. Būsenos juostoje `…:empty { display: none; }` slepia tuščius laukus; jei čia perrašytume `display`, tarp jų liktų tuščios 18 px properos. */ @keyframes fxBump { 0% { color: var(--primary); text-shadow: 0 0 12px var(--primary-glow); } 40% { color: var(--primary); text-shadow: 0 0 8px var(--primary-glow); } 100% { color: var(--text-dim); text-shadow: none; } } /* Tušti būsenos juostos laukai nebekabo tuščiais taškiukais. main.css turi `.status-project:empty { display:none }`, bet `#statusbar span` (ID specifiškumas) jį nugali — todėl tuščias laukas vis tiek užimdavo 18 px tarpą ir rodydavo `::before` taškiuką be jokio teksto. Taikinys SIAURAS — tik `span[id^="status-"]`. Paprastas `#statusbar span:empty` būtų per platus ir nukirstų du elementus, kurie TURI būti tušti: `.status-sep` (dekoratyvinis brūkšnys) ir `` (tarpiklis, nustumiantis „išsaugota“ į dešinę). ⚠️ NE `#statusbar > span` — programa laukus susuka į `#statusbar-inner`, tad jie yra ANŪKAI, ne tiesioginiai vaikai, ir vaiko selektorius nerastų nė vieno. Patikrinta naršyklėje: `>` variantas nebeveikė. */ /* IŠIMTIS #status-info: jis turi `margin-left: auto` ir veikia kaip tarpiklis, nustumiantis „išsaugota“ ženklą ir versijos žymą į dešinį kraštą. Jį paslėpus visa dešinė pusė nusliūktų į kairę. Taškiuko jis neturi (`::before` išjungtas main.css), tad tuščias netrukdo. */ html.ui-fx #statusbar span[id^="status-"]:empty:not(#status-info) { display: none; } html.ui-fx #statusbar span[id^="status-"]:empty + .status-sep { display: none; } /* =============================================================== 13. PAGRINDINIS MENIU — pirmas ekranas, kurį žmogus pamato =============================================================== */ /* Lėtai plaukianti šviesos dėmė. Juda TIK per `transform`, todėl naršyklė ją stumdo vaizdo plokštėje ir puslapio neperpiešia. `#main-menu::before` jau užimtas tinkleliu — imam `::after`. */ html.ui-fx[data-skin="studio"] #main-menu::after { content: ''; /* `fixed`, o ne `absolute`: #main-menu turi `overflow-y: auto`, todėl absoliutus vaikas, kuris transform'u išlenda už krašto, PADIDINTŲ slenkamą plotą ir apačioje atsirastų horizontali slinkties juosta. Fiksuotas elementas į jokio protėvio slinkties plotą neįeina, o #main-menu pats yra `fixed inset:0` — vaizdas tas pats. */ position: fixed; top: -30%; left: -20%; width: 90vw; height: 90vh; background: radial-gradient(circle at 50% 50%, rgba(255, 138, 82, 0.14) 0%, rgba(37, 99, 235, 0.09) 38%, transparent 68%); pointer-events: none; mix-blend-mode: screen; will-change: transform; animation: fxAurora 34s ease-in-out infinite alternate; } @keyframes fxAurora { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(38vw, 26vh, 0) scale(1.25); } } /* Antraštė ir jos dalys sueina viena po kitos — pusę sekundės, ir langas atrodo „surinktas“, o ne atsivėręs vienu kadru. */ html.ui-fx[data-skin="studio"] .mm-hero-title { animation: fxRise 620ms var(--ease-out) both; } html.ui-fx[data-skin="studio"] .mm-hero-sub { animation: fxRise 620ms var(--ease-out) 90ms both; } html.ui-fx[data-skin="studio"] .mm-hero-chips { animation: fxRise 620ms var(--ease-out) 170ms both; } html.ui-fx[data-skin="studio"] .mm-actions { animation: fxRise 620ms var(--ease-out) 250ms both; } @keyframes fxRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Firminis ženklas kvėpuoja — tik `filter` ant vieno mažo simbolio. */ html.ui-fx[data-skin="studio"] .mm-brand-mark { animation: fxMarkGlow 4.5s ease-in-out infinite; } @keyframes fxMarkGlow { 0%, 100% { filter: drop-shadow(0 0 8px var(--primary-glow)); } 50% { filter: drop-shadow(0 0 18px var(--primary-glow)); } } html.ui-fx[data-skin="studio"] .mm-chip { transition: background var(--fx-snap), border-color var(--fx-snap), color var(--fx-snap), transform var(--fx-spring); } html.ui-fx[data-skin="studio"] .mm-chip:hover { transform: translateY(-2px); } html.ui-fx[data-skin="studio"] .mm-auth-btn { transition: background var(--fx-snap), color var(--fx-snap), border-color var(--fx-snap), transform var(--fx-spring); } html.ui-fx[data-skin="studio"] .mm-auth-btn:not(:disabled):hover { transform: translateY(-1px); border-color: var(--primary); } /* =============================================================== 14. KOMANDŲ PALETĖ (Ctrl+K) =============================================================== */ html.ui-fx .cp-card { animation: fxDialogIn 300ms var(--ease-out); border: 1px solid var(--border-light); } /* Pažymėta eilutė gauna akcento juostelę kairėje — akis iškart randa, kur yra „Enter“, net greitai spaudžiant rodykles. */ html.ui-fx .cp-item { border-left: 2px solid transparent; transition: background var(--fx-snap), border-left-color var(--fx-snap), padding-left var(--fx-snap); } html.ui-fx .cp-item.cp-active { border-left-color: var(--primary); padding-left: 22px; background: linear-gradient(90deg, var(--fx-tint-16), var(--primary-soft) 70%); } html.ui-fx .cp-item:hover:not(.cp-active) { padding-left: 20px; } /* =============================================================== 15. SAVYBIŲ LANGAS + naujo projekto langas =============================================================== */ html.ui-fx #properties-header { background: linear-gradient(180deg, var(--fx-tint-08), transparent); border-bottom: 1px solid var(--border); } html.ui-fx #properties-header h3::before { content: ''; display: inline-block; width: 3px; height: 13px; margin-right: 8px; vertical-align: -2px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 8px -1px var(--primary-glow); } html.ui-fx .np-card { animation: fxDialogIn 340ms var(--ease-out); } html.ui-fx .np-seg button, html.ui-fx .np-btn { transition: background var(--fx-snap), border-color var(--fx-snap), color var(--fx-snap), box-shadow var(--fx-snap), transform var(--fx-spring); } html.ui-fx .np-seg button:hover, html.ui-fx .np-btn:hover { transform: translateY(-1px); } html.ui-fx .np-seg button:active, html.ui-fx .np-btn:active { transform: translateY(0.5px) scale(0.985); transition: transform 70ms ease-out; } html.ui-fx .np-primary:hover { box-shadow: 0 8px 22px -6px var(--primary-glow); } /* Klaviatūros klavišų ženkleliai — vienoda „iškilusio klavišo“ išvaizda visur. */ html.ui-fx kbd, html.ui-fx .cp-shortcut, html.ui-fx .cp-input-wrap .cp-kbd { box-shadow: 0 1px 0 var(--border-strong), inset 0 1px 0 var(--fx-sheen); } /* --------------------------------------------------------------- 16. Ilgi nenutrūkstantys tekstai savybių lange --------------------------------------------------------------- Katalogo aprašymuose būna pilnos nuorodos (pvz. GF ELGEF datasheet). `.prop-desc` laužymo neturi, tad nuoroda išlipdavo už 300 px panelės krašto ir tiesiog nusikirsdavo — likdavo „…/is/content/georgfis". `break-word`, o NE `break-all`: paprasti žodžiai laužomi tik tada, kai kitaip netelpa, o ne kas eilutę. Taikom visam turiniui, nes ta pati bėda yra ir su ilgais gaminių kodais bei el. pašto adresais. */ html.ui-fx #properties-content, html.ui-fx .prop-desc { overflow-wrap: break-word; word-break: break-word; } /* =============================================================== 17. Kontekstinis meniu (dešinys klavišas) — naudojamas kas minutę =============================================================== */ /* ⚠️ .ctx-menu NEGAUNA nei transform, nei filter, nei animacijos su transform. `.ctx-submenu` yra `position: fixed`, o jo koordinates JS skaičiuoja lango atžvilgiu. Bet koks transform ant tėvo paverstų jį containing block'u ir submeniu atsidurtų ne ten, kur jį pastatė JS. Todėl — TIK opacity. */ html.ui-fx .ctx-menu { animation: fxFade 130ms ease-out; border-color: var(--border-light); box-shadow: var(--shadow-xl); } /* Antraštė gauna tą patį akcento potėpį kaip savybių langas — iš karto matai, kur meniu prasideda, o tempiant (cursor: move) nesusimaišo su eilutėmis. */ html.ui-fx .ctx-title { background: linear-gradient(180deg, var(--fx-tint-08), transparent); } html.ui-fx .ctx-title.ctx-back:hover { background: var(--fx-tint-16); } /* Eilutės — akcento juostelė iš kairės, kaip įrankių meniu ir paletėje. */ html.ui-fx .ctx-item { border-left: 2px solid transparent; transition: background var(--fx-snap), border-left-color var(--fx-snap), padding-left var(--fx-snap), color var(--fx-snap); } /* Bazinis įtraukimas — 10 px, NE 14 px: main.css turi DVI `.ctx-item` deklaracijas (2141 su `padding: 6px 14px` ir 3222 su `padding: 7px 10px`), laimi vėlesnė. Buvau įrašęs 18 px galvodamas apie 14 px bazę — būtų išėjęs 8 px šoktelėjimas vietoj 4 px. Išmatuota naršyklėje. */ html.ui-fx .ctx-item:hover:not(.disabled) { border-left-color: var(--primary); padding-left: 14px; background: linear-gradient(90deg, var(--fx-tint-08), var(--bg-hover) 70%); } /* Neaktyvioms eilutėms taisyklės NEREIKIA: main.css joms uždeda `pointer-events: none`, tad `:hover` jų niekada nepasiekia. Buvau parašęs `.ctx-item.disabled:hover` — negyvas kodas, pašalintas. */ html.ui-fx .ctx-submenu { animation: fxFade 110ms ease-out; box-shadow: var(--shadow-xl); } /* =============================================================== 18. Nustatymų skydelis (⚙) =============================================================== */ /* Čia transform LEIDŽIAMAS: skydelis savyje `position: fixed` vaikų neturi, o animacija trumpa ir baigiasi ties `none`. */ html.ui-fx .settings-panel { animation: fxPanelDrop 260ms var(--ease-out); transform-origin: top right; border-color: var(--border-light); box-shadow: var(--shadow-xl); } html.ui-fx .settings-header { background: linear-gradient(180deg, var(--fx-tint-08), transparent); } html.ui-fx .settings-close { transition: color var(--fx-snap), background var(--fx-snap), transform var(--fx-spring); } html.ui-fx .settings-close:hover { transform: rotate(90deg) scale(1.12); color: var(--accent-red); } /* Segmentiniai jungikliai (Šviesi/Tamsi, mm/cm/m) — aktyvus segmentas pakyla virš griovelio, kad iš karto matytum, kuris pasirinktas. */ html.ui-fx .settings-segmented button { transition: background var(--fx-snap), color var(--fx-snap), box-shadow var(--fx-snap), transform var(--fx-spring); } html.ui-fx .settings-segmented button:hover:not(.active) { background: var(--fx-tint-08); } html.ui-fx .settings-segmented button.active { box-shadow: var(--shadow-sm), 0 0 0 1px var(--fx-tint-32); } html.ui-fx .settings-segmented button:active { transform: scale(0.97); transition: transform 70ms ease-out; } /* Akcento spalvų mygtukai — pasirinktas išsiskiria žiedu, ne vien rėmeliu. */ html.ui-fx .settings-accent-picker button { transition: transform var(--fx-spring), box-shadow var(--fx-snap); } html.ui-fx .settings-accent-picker button:hover { transform: scale(1.12); } /* =============================================================== 19. GLB įkėlimo zona (importo vedlys) =============================================================== */ /* Importo langas naudoja .modal-overlay/.modal-dialog, tad jo rėmas jau apipavidalintas 7 skiltyje. Čia — tik pati įmetimo zona. */ html.ui-fx .dropzone-content { transition: color var(--fx-snap), transform var(--fx-spring); } html.ui-fx .dropzone-icon { transition: transform var(--fx-spring); } html.ui-fx .dropzone:hover .dropzone-icon, html.ui-fx .dropzone.dragover .dropzone-icon { transform: translateY(-3px) scale(1.08); } /* =============================================================== 21. Brėžinio kampai — bendras langų ženklas =============================================================== Ploni kampiniai kabliukai, kaip registracijos ženklai ant brėžinio lapo. Tas pats motyvas kaip pradžios ekrano schemoje (20 skiltis), tik čia jis riša VISUS langus į vieną šeimą: modalus, komandų paletę, naujo projekto langą ir nustatymus. Piešiama FONU, ne pseudo-elementais. Pseudo-elementui reikėtų `position: relative` ant paties lango, o tai padarytų jį containing block'u — būtent tas spąstas, dėl kurio `.ctx-menu` negali gauti transform (žr. 17 skiltį). Fonas tokios šalutinės žalos neturi. Nustatom TIK `background-image` — `background-color`, kurią langai pasiima iš main.css, lieka nepaliesta. */ html.ui-fx[data-skin="studio"] .modal-dialog, html.ui-fx[data-skin="studio"] .cp-card, html.ui-fx[data-skin="studio"] .np-card, html.ui-fx[data-skin="studio"] .settings-panel { background-image: /* viršus kairė */ linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), /* viršus dešinė */ linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), /* apačia kairė */ linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), /* apačia dešinė */ linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)); background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px; background-position: 11px 11px, 11px 11px, calc(100% - 11px) 11px, calc(100% - 11px) 11px, 11px calc(100% - 11px), 11px calc(100% - 11px), calc(100% - 11px) calc(100% - 11px), calc(100% - 11px) calc(100% - 11px); background-repeat: no-repeat; background-origin: border-box; } /* Komandų paletėje ir nustatymuose apatiniai kampai gultų ant slenkamo turinio ir „plauktų" kartu su juo — todėl ten paliekam tik viršutinius. */ html.ui-fx[data-skin="studio"] .cp-card, html.ui-fx[data-skin="studio"] .settings-panel { background-image: linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)), linear-gradient(var(--fx-tint-32), var(--fx-tint-32)); background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px; background-position: 11px 11px, 11px 11px, calc(100% - 11px) 11px, calc(100% - 11px) 11px; } /* =============================================================== 22. Suderinimas su tamsiu korpusu (css/skin.css) =============================================================== Kai visa programa tapo vėsiai tamsi, du pilno ekrano paviršiai liko su savo SENOMIS kietai įrašytomis spalvomis ir nesiderina: pradžios meniu buvo ŠILTAS rusvas (#1A1816 → #0F0E0C), o krovimo ekranas — violetinis (#1a1a2e). Šalia grafito-mėlyno korpuso jie atrodė kaip kita programa — būtent tas įspūdis, dėl kurio „niekas nepasikeitė". Perdažom per ŽETONUS, ne naujomis konstantomis: pakeitus paletę skin.css faile, šitie du ekranai persidažys kartu. */ html.ui-fx[data-skin="studio"] #main-menu { background: /* firminis šiltas atšvaitas viršuje kairėje */ radial-gradient(115% 85% at 12% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%), /* vėsus atsvaras apačioje dešinėje — kad neatrodytų vienspalvis */ radial-gradient(90% 80% at 92% 100%, color-mix(in srgb, var(--secondary) 13%, transparent), transparent 66%), linear-gradient(168deg, var(--bg-panel) 0%, var(--bg-dark) 58%, #05070A 100%); } /* Antraštės perėjimas — ta pati oranžinė→mėlyna ašis kaip visoje paletėje. Anksčiau ji baigdavosi sena #2563EB, kurios naujoje paletėje nebėra, ir raidė „D" atrodė violetinė. */ html.ui-fx[data-skin="studio"] .mm-hero-title span { /* Du dalykai, abu būtini: `in oklab` — oranžinė→mėlyna sRGB erdvėje eina per purviną violetinę. Oklab tarpines reikšmes skaičiuoja pagal suvokiamą šviesumą. Bet vien to NEUŽTEKO, ir tai patikrinta gyvai: perėjimas driekiasi per DU simbolius („3" ir „D"), tad raidė „D" atsidurdavo ties 50–100 %, t.y. dar viduryje, kur abi spalvos susilieja į pilkšvą. Todėl mėlyna pasiekiama jau ties 58 % ir toliau laikoma — „3" lieka oranžinė, „D" gryna mėlyna, o tarp jų trumpas sąmoningas perėjimas. */ background: linear-gradient(104deg in oklab, var(--primary-light) 0%, var(--primary) 40%, var(--secondary) 58%, var(--secondary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.ui-fx[data-skin="studio"] #loading-screen { background: radial-gradient(120% 90% at 50% 0%, var(--bg-card) 0%, var(--bg-dark) 52%, #05070A 100%); } /* Vienintelė vieta programoje, kur šviesus fonas buvo įrašytas kietai, o tekstas ėmė spalvą iš žetonų: peržiūros užuomina virš 3D vaizdo. Tamsoje išeidavo šviesus tekstas ant beveik balto burbulo. */ html.ui-fx .cp-prev-hint { background: color-mix(in srgb, var(--bg-dark) 82%, transparent); color: var(--text-dim); border: 1px solid var(--border); } /* =============================================================== 23. Pasirinkimo eilutės languose (eksportas ir kt.) =============================================================== Eksporto langas siūlo keturis formatus, bet eilutės atrodo kaip nejudantys stačiakampiai: hover'is tik pakeičia rėmelio spalvą. Duodam tą pačią fiziką kaip visiems kitiems valdikliams — akcento juostelę iš kairės, pakilimą ir prispaudimą. */ html.ui-fx .export-option { position: relative; overflow: hidden; isolation: isolate; border-left: 2px solid transparent; transition: background var(--fx-snap), border-color var(--fx-snap), box-shadow var(--fx-snap), transform var(--fx-spring); } /* Akcento švytėjimas iš kairės — atsiranda tik užvedus. Piešiam pseudo-elementu, o ne fonu, nes eilutė TURI savo foną (`--bg-card`) ir jo perrašyti negalima. `overflow: hidden` saugus: viduje nieko absoliučiai pozicionuoto nėra. */ html.ui-fx .export-option::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--fx-tint-16), transparent 58%); opacity: 0; transition: opacity var(--fx-snap); } html.ui-fx .export-option:hover::before { opacity: 1; } html.ui-fx .export-option:hover { border-left-color: var(--primary); transform: translateX(3px); box-shadow: -3px 4px 16px -8px rgba(0, 0, 0, 0.7); } html.ui-fx .export-option:active { transform: translateX(3px) scale(0.994); transition: transform 70ms ease-out; } /* Ženklelis kairėje gauna savo lizdą — kitaip ikona kabo ore. */ html.ui-fx .export-option-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); transition: color var(--fx-snap), border-color var(--fx-snap), background var(--fx-snap); } html.ui-fx .export-option:hover .export-option-icon { color: var(--primary); border-color: var(--fx-tint-32); background: var(--bg-card); }