/* ============================================================ * Design tokens — portalv3 / identity-ui tasarim dili * * Kaynak: portal-v3 `src/assets/tokens.css` (release/v-20260827). * Bu blok apps/docs/public/css/style.css ile apps/admin/public/css/style.css * arasinda ELLE senkron tutulan bir kopyadir (params.js ile ayni kural) — * birinde degisen digerine de yazilmalidir. Yalniz `--xml-*`, `--sidebar-w` * ve `--try-w` docs'a ozeldir. * * KURAL: bilesen kuralina literal hex / rgba / gradient YAZILMAZ — buraya * token eklenir. Renk ve geometrinin tek kaynagi bu bloktur. * * KONTRAST SOZLESMESI (portalv3'ten aynen): #16a34a ve lime #88b830 * yalnizca DEKORATIFTIR (dolgu, nokta, gradyan) — metin, ikon ya da odak * gostergesi olamaz. Metin tasiyan yesil #15803d'dir (beyazda 5.02:1). * Metinde --color-subtle en acik tondur; bundan acigini metinde kullanmayin * (4.5:1 tabani). * * GRADYAN token'lari `background:` ister, `background-color:` DEGIL — bir * linear-gradient() 'dir, degil; `background-color` ile * sessizce duser ve yuzey saydam kalir. * ============================================================ */ :root { /* ---- Marka ---------------------------------------------------------- */ --color-primary: #16a34a; /* DEKORATIF — metinde kullanma */ --color-primary-hover: #15803d; --color-primary-deep: #166534; --color-accent: #88b830; /* DEKORATIF — metinde kullanma */ --panel-gradient: linear-gradient(160deg, #16a34a 0%, #04382c 45%, #16a34a 100%); /* Metin/ikon tasiyabilen yesil ve tint merdiveni. */ --portal-primary-strong: #15803d; --portal-primary-strong-hover: #166534; --portal-tint-050: #f0fdf4; --portal-tint-100: #dcfce7; --portal-tint-200: #bbf7d0; /* ---- Notrler (slate) ------------------------------------------------ */ --color-ink: #0f172a; --color-body: #334155; --color-muted: #475569; --color-subtle: #64748b; /* metindeki en acik ton — tabani asma */ --color-border: #e2e8f0; --color-hairline: #eef1f4; --color-row-line: #f4f6f8; --color-surface: #f8fafc; --color-surface-head: #fbfcfd; --color-white: #ffffff; /* ---- Kabuk: koyu gradyan ust bar ------------------------------------ */ --dash-header-bg: var(--panel-gradient); /* background:, background-color: DEGIL */ --dash-header-text: #ffffff; /* 0.72 gradyanin koyu ucunda AA tabani — dusurmeyin. */ --dash-header-text-muted: rgba(255, 255, 255, 0.72); --dash-header-overlay: rgba(255, 255, 255, 0.08); /* duragan/hover dolgu */ --dash-header-active: rgba(255, 255, 255, 0.14); /* aktif/basili dolgu */ --dash-header-border: rgba(255, 255, 255, 0.14); --dash-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(2, 28, 24, 0.32); /* 60px bar: kenar cubugu ustu, icerik dolgusu ve sticky ofsetlerin hepsi bundan turer — tek knob. */ --height-dash-header: 4rem; /* ---- Katlanir ray (sol menu) ----------------------------------------- */ --rail-width: 16.8rem; --rail-width-collapsed: 4.5333rem; /* ---- Sayfa yuzeyleri ------------------------------------------------- */ --dash-page-bg: #fafaf9; /* ilik sayfa zemini */ --dash-card-bg: #ffffff; /* kart/panel yuzeyi */ --dash-card-border: #eaecf0; /* ---- Durum tonlari (rozet RENK VE METIN tasir; nokta dekoratif) ------ Yedi ton, her biri metin / zemin / cerceve ucluleriyle. */ --tone-status-blue-fg: #1d4ed8; --tone-status-blue-bg: #eff6ff; --tone-status-blue-border: #bfdbfe; --tone-status-cyan-fg: #0e7490; --tone-status-cyan-bg: #ecfeff; --tone-status-cyan-border: #a5f3fc; --tone-status-amber-fg: #b45309; --tone-status-amber-bg: #fffbeb; --tone-status-amber-border: #fde68a; --tone-status-green-fg: #15803d; --tone-status-green-bg: #f0fdf4; --tone-status-green-border: #bbf7d0; --tone-status-rose-fg: #be123c; --tone-status-rose-bg: #fff1f2; --tone-status-rose-border: #fecdd3; --tone-status-violet-fg: #7e22ce; --tone-status-violet-bg: #f5f3ff; --tone-status-violet-border: #ddd6fe; --tone-status-slate-fg: #475569; --tone-status-slate-bg: #f1f5f9; --tone-status-slate-border: #e2e8f0; /* ---- Modul ikon tonlari (ton = metin/ikon, tint = zemin) -------------- */ --tone-green: #15803d; --tint-green: #f0fdf4; --tone-blue: #1d4ed8; --tint-blue: #eff6ff; --tone-indigo: #4338ca; --tint-indigo: #eef2ff; --tone-cyan: #0e7490; --tint-cyan: #ecfeff; --tone-amber: #b45309; --tint-amber: #fffbeb; --tone-violet: #7e22ce; --tint-violet: #f5f3ff; --tone-teal: #0f766e; --tint-teal: #f0fdfa; --tone-rose: #be123c; --tint-rose: #fff1f2; --tone-lime: #4d7c0f; --tint-lime: #f7fee7; --tone-slate: #475569; --tint-slate: #f1f5f9; /* Kaydirma cubugu: 10px ray, ic boslukla hap bicimli tutamak. */ --scrollbar-thumb: #dbe2e8; /* * Iskelet yukleme: taban blok + uzerinden gecen parilti. * * Taban --color-surface DEGIL: o ton (#f8fafc) sayfa zemininin (#fafaf9) * neredeyse aynisi, kart DISINDAKI iskelet cizgileri gorunmuyordu. * Cerceve tonuyla kagit arasinda bir karisim iki zeminde de okunur. */ --skel-base: color-mix(in srgb, var(--color-border) 55%, var(--color-white)); --skel-sheen: rgba(255, 255, 255, 0.55); /* ---- Geometri -------------------------------------------------------- */ --radius-control: 0.6667rem; /* dugme, input, kucuk kontrol */ --radius-card: 0.9333rem; /* kart, panel, modal */ --radius-pill: 66.6rem; /* ---- Elevation (iki katmanli; tek katmanli golge kullanmayin) --------- */ --elevation-1: 0 1px 2px rgba(15, 23, 20, 0.04), 0 8px 20px rgba(15, 23, 20, 0.05); --elevation-2: 0 2px 6px rgba(15, 23, 20, 0.06), 0 14px 30px rgba(15, 23, 20, 0.08); --elevation-3: 0 6px 16px rgba(15, 23, 20, 0.10), 0 24px 56px rgba(15, 23, 20, 0.16); /* Ray ikon karosu aktifken dolu yesile doner; kucuk ve sik bir golge karoyu satirdan ayirir (elevation-1 bu olcekte fazla yumusak kalir). */ --elevation-tile: 0 1px 2px rgba(15, 23, 20, 0.18); /* ---- Odak halkalari (iki katmanli; asla ciplak `outline: none`) ------- Beyaz bosluk + metin tasiyan yesil; koyu gradyan barda koyu bosluk + beyaz. Yuzey degisince --color-white de degistigi icin koyu temada bosluk kendiliginden koyulasir. */ --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--portal-primary-strong); --focus-ring-on-dark: 0 0 0 2px rgba(2, 28, 24, 1), 0 0 0 4px #ffffff; /* * FORM ALANI odak halkasi. Alanin KENDI cercevesi zaten yesile dondugu icin * burada iki katmanli --focus-ring'in beyaz boslugu kullanilmaz: yogun * parametre editorlerinde her alanin cevresinde 4px'lik bir halka fazla * agir duruyor ve komsu satirlarla cakisiyordu. Gosterge yine iki katmanli * (yesil cerceve + yesil hale), yalniz daha sik. Ciplak `outline: none` * DEGIL — halka her zaman var. */ --focus-ring-field: 0 0 0 3px var(--accent-ring); /* ---- Tipografi -------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --leading-tight: 1.25; --leading-snug: 1.45; --leading-relaxed: 1.6; /* ---- Mobilya yazi olcegi ---------------------------------------------- Referans kok 15px. Degerler rem oldugu icin akiskan olcekle (asagidaki `html` clamp'i) birlikte buyur/kucululur. Once burada 21 ayri piksel boyutu vardi (9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15 …); alti adima oturtuldu. Yeni bir mobilya yazisi eklerken px YAZMAYIN, bu adimlardan birini secin. Baslik/display boyutlari (h1, h2 …) olcek disi kalir, kendi rem degerleriyle yazilir. */ --text-3xs: 0.6333rem; /* 9.5px — mikro etiket, metot rozeti */ --text-2xs: 0.7rem; /* 10.5px — grup basligi, sayac */ --text-xs: 0.7667rem; /* 11.5px — yardimci metin, ipucu */ --text-sm: 0.8333rem; /* 12.5px — ikincil satir, dugme */ --text-base: 0.9rem; /* 13.5px — liste satiri, input */ --text-md: 1rem; /* 15px — govde metni */ /* ---- Hareket: tek egri, iki sure ------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 120ms; --duration-base: 180ms; /* ---- Ortu -------------------------------------------------------------- */ --overlay-scrim: rgba(15, 23, 42, 0.55); /* ============================================================ * Uyumluluk alias'lari * Bu projenin eski token adlari yukaridaki dile BAGLANIR; boylece * ~4300 satirlik bilesen CSS'i tek tek elden gecirilmeden yeni dile * gecer. YENI kural yazarken alias degil, yukaridaki asil token'i * kullanin. * ============================================================ */ --bg: var(--dash-card-bg); --bg-alt: var(--color-surface); --bg-sunken: #f1f5f9; --bg-sidebar: var(--dash-card-bg); --bg-code: #f6f8fa; --bg-elev: var(--dash-card-bg); --bg-page: var(--dash-page-bg); --text: var(--color-ink); --text-body: var(--color-body); --text-muted: var(--color-muted); --text-faint: var(--color-subtle); --border: var(--color-border); --border-soft: var(--color-hairline); --border-strong: #cbd5e1; --accent: var(--portal-primary-strong); --accent-hover: var(--portal-primary-strong-hover); --accent-soft: var(--portal-tint-050); --accent-tint: var(--portal-tint-100); --accent-ring: var(--portal-tint-200); /* Metot rozetleri beyaz metin tasir; hepsi ton paletinin metin ucundan secildi ki beyazla AA'yi gecsin (eski #16a34a/#dc2626 gecmiyordu). */ /* GET marka yesilinden AYRI bir yesil kullanir: --tone-status-green-fg (#15803d) ile --portal-primary-strong birebir ayni deger, bu yuzden kenar cubugunda yesil GET oku yesil aktif satirin yaninda "bu satir aktif" gibi okunuyordu. Teal tonu ayni sicaklikta ama ayirt edilebilir (beyazda 4.9:1, AA). */ --method-get: var(--tone-teal); --method-post: var(--tone-status-blue-fg); --method-put: var(--tone-status-violet-fg); --method-patch: var(--tone-status-amber-fg); --method-delete: var(--tone-status-rose-fg); --method-soap: var(--tone-status-cyan-fg); /* * DOLGU degerleri: metot rozeti / tehlike dugmesi gibi BEYAZ metin tasiyan * yuzeyler. --method-* (yukarisi) koyu temada acik uca doner cunku METIN * rengi olarak da kullaniliyor (".try-resp-error", ".env-del:hover"); * beyaz metnin altindaki dolgu ise iki temada da koyu kalmali. Bu yuzden * ayri ve tema-bagimsizdirlar. */ --method-get-bg: #0f766e; --method-post-bg: #1d4ed8; --method-put-bg: #7e22ce; --method-patch-bg: #b45309; --method-delete-bg: #be123c; --method-soap-bg: #0e7490; --status-ok-bg: var(--tone-status-green-bg); --status-ok-fg: var(--tone-status-green-fg); --status-warn-bg: var(--tone-status-amber-bg); --status-warn-fg: var(--tone-status-amber-fg); --status-err-bg: var(--tone-status-rose-bg); --status-err-fg: var(--tone-status-rose-fg); --status-info-bg: var(--tone-status-blue-bg); --status-info-fg: var(--tone-status-blue-fg); --status-ok-border: var(--tone-status-green-border); --status-warn-border: var(--tone-status-amber-border); --status-err-border: var(--tone-status-rose-border); --status-info-border: var(--tone-status-blue-border); --sp-1: 0.2667rem; --sp-2: 0.5333rem; --sp-3: 0.8rem; --sp-4: 1.0667rem; --sp-5: 1.3333rem; --sp-6: 1.6rem; --sp-7: 1.8667rem; --sp-8: 2.1333rem; --sp-10: 2.6667rem; --sp-12: 3.2rem; /* Yaricaplar portalv3 geometrisine cekildi: kontrol 10px, kart 14px. */ --r-1: 0.4rem; --r-2: var(--radius-control); --r-3: 0.8rem; --r-4: var(--radius-card); --r-pill: var(--radius-pill); --radius: var(--radius-control); --shadow-sm: var(--elevation-1); --shadow-md: var(--elevation-2); --shadow-pop: var(--elevation-2); --shadow-lg: var(--elevation-3); --shadow: var(--elevation-1); --dur-fast: var(--duration-fast); --dur-base: var(--duration-base); --ease: var(--ease-standard); --header-h: var(--height-dash-header); --xml-tag: #0550ae; --xml-attr: #ad6800; --xml-value: #0f7a3d; --xml-comment: var(--color-subtle); --sidebar-w: 280px; /* Sabit yanit panelinin genisligi; ust sinir --resp-w'deki clamp() (720px). Surukleyince localStorage'a yazilir. Varsayilan bilerek dar: bu duzende asil calisma alani soldaki istek formu. */ --try-w: 520px; } /* ============================================================ * Koyu tema — YALNIZ token yeniden eslemesi. * portalv3 sozlesmesi: bilesen basina `:root.dark .foo { ... }` blogu * yazmak yerine buradaki degerleri degistir. Kabuk gradyani zaten koyu * oldugu icin oldugu gibi kalir. * ============================================================ */ :root.dark { --color-ink: #f1f5f9; --color-body: #cbd5e1; --color-muted: #94a3b8; --color-subtle: #7d8794; --color-border: #262b35; --color-hairline: #1e232c; --color-row-line: #1a1e26; --color-surface: #161a21; --color-surface-head: #161a21; /* "Kagit" yuzey koyu temada koyudur; --focus-ring'in bosluk katmani da bunu kullandigi icin odak halkasi kendiliginden dogru zemini alir. */ --color-white: #181c24; --dash-page-bg: #0f1115; --dash-card-bg: #181c24; --dash-card-border: #262b35; --portal-primary-strong: #4ade80; --portal-primary-strong-hover: #86efac; --portal-tint-050: color-mix(in srgb, #16a34a 14%, transparent); --portal-tint-100: color-mix(in srgb, #16a34a 22%, transparent); --portal-tint-200: color-mix(in srgb, #16a34a 32%, transparent); /* Ayni yedi ton: zemin/cerceve aksanin saydam karisimi, metin acik uc. Acik temanin #eff6ff gibi tint'leri koyu yuzeyde okunmaz. */ --tone-status-blue-fg: #93c5fd; --tone-status-blue-bg: color-mix(in srgb, #3b82f6 16%, transparent); --tone-status-blue-border: color-mix(in srgb, #3b82f6 32%, transparent); --tone-status-cyan-fg: #67e8f9; --tone-status-cyan-bg: color-mix(in srgb, #06b6d4 16%, transparent); --tone-status-cyan-border: color-mix(in srgb, #06b6d4 32%, transparent); --tone-status-amber-fg: #fcd34d; --tone-status-amber-bg: color-mix(in srgb, #f59e0b 16%, transparent); --tone-status-amber-border: color-mix(in srgb, #f59e0b 32%, transparent); --tone-status-green-fg: #4ade80; --tone-status-green-bg: color-mix(in srgb, #16a34a 16%, transparent); --tone-status-green-border: color-mix(in srgb, #16a34a 32%, transparent); --tone-status-rose-fg: #fda4af; --tone-status-rose-bg: color-mix(in srgb, #e11d48 16%, transparent); --tone-status-rose-border: color-mix(in srgb, #e11d48 32%, transparent); --tone-status-violet-fg: #d8b4fe; --tone-status-violet-bg: color-mix(in srgb, #a855f7 16%, transparent); --tone-status-violet-border: color-mix(in srgb, #a855f7 32%, transparent); --tone-status-slate-fg: #cbd5e1; --tone-status-slate-bg: color-mix(in srgb, #94a3b8 16%, transparent); --tone-status-slate-border: color-mix(in srgb, #94a3b8 32%, transparent); --tone-green: #4ade80; --tint-green: color-mix(in srgb, #16a34a 16%, transparent); --tone-blue: #93b4fd; --tint-blue: color-mix(in srgb, #1d4ed8 18%, transparent); --tone-indigo: #a5b4fc; --tint-indigo: color-mix(in srgb, #4338ca 18%, transparent); --tone-cyan: #67e8f9; --tint-cyan: color-mix(in srgb, #0e7490 18%, transparent); --tone-amber: #fcd34d; --tint-amber: color-mix(in srgb, #b45309 18%, transparent); --tone-violet: #d8b4fe; --tint-violet: color-mix(in srgb, #7e22ce 18%, transparent); --tone-teal: #5eead4; --tint-teal: color-mix(in srgb, #0f766e 18%, transparent); --tone-rose: #fda4af; --tint-rose: color-mix(in srgb, #be123c 18%, transparent); --tone-lime: #bef264; --tint-lime: color-mix(in srgb, #4d7c0f 18%, transparent); --tone-slate: #94a3b8; --tint-slate: #161a21; --scrollbar-thumb: #353b48; --skel-base: color-mix(in srgb, var(--color-border) 70%, var(--color-white)); --skel-sheen: rgba(255, 255, 255, 0.07); --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 20px rgba(0, 0, 0, 0.28); --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 30px rgba(0, 0, 0, 0.35); --elevation-3: 0 6px 16px rgba(0, 0, 0, 0.50), 0 24px 56px rgba(0, 0, 0, 0.55); --overlay-scrim: rgba(0, 0, 0, 0.62); /* Alias'lardan koyu temada AYRISANLAR (digerleri yukaridan turer). */ --bg-sunken: #0c0f14; --bg-code: #1a1e26; --border-strong: #353b48; --xml-tag: #6ea8ff; --xml-attr: #e0a94c; --xml-value: #7ec699; } * { box-sizing: border-box; } /* * KOK YAZI BOYUTU = ARAYUZUN OLCEK DUGMESI (portalv3 _core.scss / _fn.scss). * * SORUN: tasarim 15px'lik bir gride gore cizildi ve tum mobilya piksel * yaziliydi. Piksel sabit oldugu icin 1366x768 bir dizustunde arayuz ekranin * cok buyuk kismini yerken 2560x1440 bir monitorde yazi ve rakamlar * okunamayacak kadar kucuk kaliyordu. * * COZUM: kok yazi boyutu ekran GENISLIGINE gore clamp() ile akar; tum olculer * bu kokun kati (rem) olarak yazilir. Yazi, kontrol yuksekligi, bosluk ve * kose yaricapi BIRLIKTE olceklenir — oranlar bozulmaz, yalniz yogunluk * degisir. Egri portalv3'un egrisinin 15/13 katidir: * * <=1366px (dizustu) -> 13.85px — bugunkunden ~%8 daha yogun * 1920px (yaygin masaustu) -> 15px — bugunkuyle birebir * 2560px (27" 1440p) -> 17.8px * >=2688px (4K / ultrawide) -> 18.46px — ust sinir * * rem cinsinden yazildi ki tarayicinin kendi yazi boyutu ayari (erisilebilirlik * / kullanici zoom'u) carpan olarak korunsun; px yazilsaydi o ayar ezilirdi. * Kokun KENDI font-size'indaki rem, hesaplanan degere degil tarayicinin * baslangic degerine (16px) gore cozulur — egri bu yuzden boyle yazilabiliyor. * * Neden `zoom` degil: body zoom'u olculeri tek hamlede buyuturdu ama * konumunu JS ile piksel hesaplayan katmanlar (--try-w yanit paneli, surukle * tutamaklari, fn-autocomplete) zoom altinda ikinci kez olceklenip * tetikleyicisinden kayardi. * * @media ESIKLERI PX KALIR: duzen kararlari gercek ekran genisligine gore * verilir, olcege gore degil. Golgeler, odak halkalari ve 4px altindaki * hairline degerler de px kalir — bunlar olcekle buyumemeli. */ html { font-size: clamp(0.865rem, 0.3923rem + 0.45vw, 1.1538rem); scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; } html, body { margin: 0; padding: 0; /* Sayfa zemini ilik gri (--dash-page-bg), kart/panel yuzeyleri beyaz (--dash-card-bg): portalv3'un "kagit kartlar zeminin uzerinde durur" ayrimi. Govde metni --color-body, basliklar --color-ink. */ background: var(--dash-page-bg); color: var(--color-body); font-family: var(--font-sans); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: var(--text-md); } h1, h2, h3, h4, h5, h6 { color: var(--color-ink); } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent-hover); text-decoration: underline; } button, input, select, textarea { font-family: inherit; } ::selection { background: var(--accent-tint); color: var(--accent-hover); } /* Iki katmanli odak halkasi (portalv3 sozlesmesi): --focus-ring yuzey renginde bir bosluk + metin tasiyan yesil bir dis halka cizer. `outline` AYRICA korunur ve ayni 2-4px bandi kaplar; ciplak `outline: none` YAZMAYIN — box-shadow `overflow: hidden` bir ata tarafindan kirpilabilir ve Windows yuksek kontrast (forced-colors) modunda hic cizilmez; o iki durumda gorunur tek gosterge outline'dir. */ :focus-visible { outline: 2px solid var(--portal-primary-strong); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--r-1); } /* Koyu gradyan barin uzerindeki kontroller kendi halkasini kullanir. */ header.topbar :focus-visible { outline-color: var(--dash-header-text); box-shadow: var(--focus-ring-on-dark); } /* Kaydirma cubugu: 10px ray, saydam 3px cerceveyle ic boslukta duran hap tutamak (content-box klip). */ ::-webkit-scrollbar { width: 0.6667rem; height: 0.6667rem; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--scrollbar-thumb); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; } /* Hareket azaltma tercihinde animasyon global olarak notrlestirilir. Durum gostergeleri MUAF: donmus bir spinner "takildi" gibi okunur, yalnizca yavaslar. */ @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; } .loading::before { animation-duration: 2s !important; animation-iteration-count: infinite !important; } } /* ---------------- Yalniz ekran okuyucu ---------------- */ /* * Gorsel olarak gizli ama erisilebilirlik agacinda duran metin. Kenar * cubugunda metot yalniz IKONLA anlatiliyor; ikonun yanina bunu koyarak * bilgiyi ekran okuyucuya da veriyoruz (renk ve sekil tek sinyal olmasin). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------- Iskelet yukleme ---------------- */ /* * Once her bekleme bir spinner + "Yukleniyor..." metniydi: ekran bos kalir, * gelecek icerigin ne kadar ve ne bicimde olacagi bilinmez, ayni sure daha * uzun hissedilir. Iskelet yerlesimi simdiden cizer. * * Parilti prefers-reduced-motion'da taban kuralla susar. Spinner'lar orada * MUAFTI (donmayan spinner "takildi" gibi okunur); iskelet icin bu gecerli * degil, durmasi sorun etmez. */ .skel { position: relative; overflow: hidden; background: var(--skel-base); border-radius: var(--r-1); } .skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skel-sheen), transparent); transform: translateX(-100%); animation: skel-shimmer 1.4s var(--ease) infinite; } @keyframes skel-shimmer { to { transform: translateX(100%); } } .skel-line { height: 0.7333rem; margin-bottom: 0.5333rem; } .skel-line.w100 { width: 100%; } .skel-line.w80 { width: 80%; } .skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } .skel-title { height: 1.4667rem; width: 45%; margin-bottom: var(--sp-4); } .skel-icon { width: 1.2rem; height: 1.2rem; flex-shrink: 0; } .skel-badge { width: 2.8rem; height: 1.1333rem; flex-shrink: 0; } .skel-row { display: flex; align-items: center; gap: 0.6667rem; min-height: 2.2667rem; padding: 0 0.6667rem; } .skel-card { padding: var(--sp-4); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); border-radius: var(--radius-card); box-shadow: var(--elevation-1); } .skel-sidebar { padding: var(--sp-3) 0.6667rem; } .skel-group-title { height: 0.6rem; width: 45%; margin: 0.8rem 0.5333rem 0.6rem; } /* ---------------- Ipucu (tooltip) ---------------- */ /* * Kenar cubugu satirlarinin adi daraltilmis rayda ellipsis'e dusuyor ve tam * ad native `title` ile veriliyordu: 1-2 saniye gecikmeli, bicimlendirilemez, * dokunmatikte hic gorunmez, uzun metinde satira sigmaz. Yerine tek bir yuzen * eleman (public.js initTooltip): [data-tip] tasiyan her sey uzerine gelince * ya da ODAKLANINCA acilir — klavyeyle gezen de gorur. * * Ipucu YALNIZ GORSELDIR (pointer-events: none, role yok): satirin * erisilebilir adi zaten gorunen metnidir. Yalniz ikonla anlatilan bilgi * (metot) .sr-only ile ayrica yazilir. */ .tip { position: fixed; z-index: 1200; max-width: 22rem; padding: 0.3333rem 0.6rem; border-radius: var(--r-1); /* Ters kontrast: acik temada koyu balon/acik metin, koyu temada tersi — iki token da temayla birlikte donduku icin kendiliginden calisir. */ background: var(--color-ink); color: var(--dash-card-bg); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-snug); box-shadow: var(--elevation-2); pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .tip.is-open { opacity: 1; } /* ---------------- Marka isareti (white-label) ---------------- * Logo iki varyant tasiyabilir: acik tema ve koyu tema. Ikisi de DOM'da * durur, CSS hangisinin gorunecegine karar verir — tema degisince JS'in * src'yi degistirmesini beklemek gerekmez (o bir kare gecikme ve titreme * demekti). Koyu varyant verilmemisse acik varyant her iki temada kullanilir. * * Logo ile cizilir: SVG icindeki script baglaminda calismaz. * Inline olarak gommeyin (bkz. src/branding.js LOGO_TYPES notu). */ .brand-logo { display: block; width: auto; } .brand-logo--dark { display: none; } :root.dark .brand-logo--light { display: none; } /* Koyu varyant VARSA acik temada gizlenir, koyu temada gosterilir. */ :root.dark .brand .brand-logo--dark { display: block; } /* Koyu varyant yoksa (.brand icinde tek img) acik logo koyu temada da kalir. */ :root.dark .brand:not(:has(.brand-logo--dark)) .brand-logo--light { display: block; } .brand-name { white-space: nowrap; } /* Logo varken ad ile logo arasi bosluk .brand'in kendi gap'inden gelir; logosuz kurulumda (notr varsayilan) yalniz kelime-isaret kalir. */ /* ============================================================ * Sayfa basligi bandi (portalv3 .iz-pagebar) * ============================================================ */ /* * Bant KENDI kartidir: rozet + (ust baslik + sayfa adi) solda, eylemler * sagda. Once iki uygulamada da ciplak bir

ve altinda inline stilli bir * flex div vardi; sayfanin nerede basladigi, eylemlerin nereye ait oldugu * okunmuyordu (portalv3 §2). * * Bant alttaki icerige YAPISMAZ: arada bandin kendi alt boslugu durur, yani * "baslik nerede bitiyor, icerik nerede basliyor" gozle ayrilir. * * Bu blok apps/docs ve apps/admin style.css'leri arasinda ELLE senkron * tutulur (token blogu ile ayni kural). */ .pagebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; position: relative; padding: 0.9333rem var(--sp-4); margin-bottom: 0.9333rem; background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); border-radius: var(--radius-card); box-shadow: var(--dash-pagebar-shadow); } .pagebar__brand { display: flex; align-items: center; gap: 0.6667rem; flex: 1 1 15rem; min-width: 0; } /* * Sayfa rozeti: adin yanindaki SAKIN ikon kutusu — sayfayi tanitir, eylem * degildir (tiklanmaz, odak almaz). Tonu sol menudeki satirin tonuyla * AYNIDIR (admin'de NAV_GROUPS'tan turer), boylece menu ile baslik arasinda * renk surekliligi olur: menude mavi klasor ikonuyla girdiginiz ekranin * basliginda da mavi klasor durur. */ .pagebar__badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.2667rem; width: 2.2667rem; height: 2.2667rem; border-radius: 0.6667rem; background: var(--tint-slate); color: var(--tone-slate); font-size: var(--text-md); } .pagebar__badge[data-tone='green'] { background: var(--tint-green); color: var(--tone-green); } .pagebar__badge[data-tone='blue'] { background: var(--tint-blue); color: var(--tone-blue); } .pagebar__badge[data-tone='indigo'] { background: var(--tint-indigo); color: var(--tone-indigo); } .pagebar__badge[data-tone='cyan'] { background: var(--tint-cyan); color: var(--tone-cyan); } .pagebar__badge[data-tone='amber'] { background: var(--tint-amber); color: var(--tone-amber); } .pagebar__badge[data-tone='violet'] { background: var(--tint-violet); color: var(--tone-violet); } .pagebar__badge[data-tone='teal'] { background: var(--tint-teal); color: var(--tone-teal); } .pagebar__badge[data-tone='rose'] { background: var(--tint-rose); color: var(--tone-rose); } .pagebar__badge[data-tone='lime'] { background: var(--tint-lime); color: var(--tone-lime); } .pagebar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pagebar__crumbs { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-3xs); font-weight: 600; letter-spacing: 0.08em; color: var(--color-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pagebar h1.pagetitle, .pagebar .pagetitle { margin: 0; font-size: 1.4667rem; font-weight: 700; letter-spacing: -0.02em; line-height: var(--leading-tight); color: var(--color-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pagebar__actions { display: flex; align-items: center; gap: 0.6667rem; flex: 0 0 auto; margin-left: auto; } /* Bant eylemleri TEK ritim: 2.3333rem (35px). Yukseklik burada tek yerde veriliyor ki bant, araclar cubugu ve tablo eylemleri uc ayri ritim kurmasin (portalv3 .iz-actions). */ .pagebar__actions .btn, .pagebar__actions .btn-sm { min-height: 2.3333rem; margin-top: 0; /* Dugme metni SARMAZ: bant sikisinca once arama alani daralir, dugme iki satira dusup bandin yuksekligini bozmaz. */ white-space: nowrap; flex: 0 0 auto; } /* Bant icindeki arama alani. Once her liste ekraninda inline style ile tekrarlaniyordu. */ .pagebar__search { flex: 1 1 14rem; max-width: 24rem; min-width: 0; padding: 0.4667rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--dash-card-bg); color: var(--color-body); font-family: inherit; font-size: var(--text-base); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .pagebar__search:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring-field); } /* Metot rozeti / yol satiri (docs endpoint bandi). */ .pagebar__meta { display: flex; align-items: center; gap: 0.5333rem; min-width: 0; margin-top: 0.1333rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); } .pagebar__meta .path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 700px) { .pagebar { align-items: flex-start; } .pagebar__actions { width: 100%; margin-left: 0; flex-wrap: wrap; } .pagebar__search { max-width: none; } .pagebar h1.pagetitle, .pagebar .pagetitle { white-space: normal; } } /* ============================================================ * Layout * ============================================================ */ /* Icerik kolonu `minmax(0, 1fr)`, duz `1fr` DEGIL: `1fr`in alt siniri `auto`, yani kolondaki en genis ogenin min-content'i. Ust bar iki kolonu kaplayan bir grid ogesi oldugu icin onun min-content'i (arama + ortam + dil + dugmeler, ~750px) kolonu sisiriyordu; telefonda sayfa ekranin iki kati genisliginde aciliyor ve her sey yatay kayiyordu. */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--header-h) 1fr; grid-template-areas: "header header" "sidebar main"; min-height: 100vh; } /* ============================================================ * Topbar * ============================================================ */ header.topbar { grid-area: header; display: flex; align-items: center; padding: 0 var(--sp-6); background: var(--dash-header-bg); position: sticky; top: 0; /* .search-results (header'in bir cocugu) icin ne kadar yuksek bir z-index verilirse verilsin, sticky header kendi stacking context'ini olusturdugu icin bu deger her zaman header'in KENDI z-index'iyle sinirli kalir. Sayfa icindeki sabit panellerin (.endpoint-response z-index:20, .try-resizer z-index:21) ustunde kalabilmesi icin header'in z-index'i onlardan yuksek olmak zorunda. */ z-index: 25; gap: var(--sp-3); box-shadow: var(--dash-header-shadow); } header.topbar .brand { font-weight: 600; font-size: 1.0667rem; letter-spacing: 0.01em; color: var(--dash-header-text); display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; } header.topbar .brand img { height: 2rem !important; width: auto; /* Yer daralinca kirpilan ad olur, logo ezilmez. */ flex-shrink: 0; filter: brightness(0) invert(1); } header.topbar .spacer { flex: 1; } /* Bar hicbir genislikte tasmaz: arama 24rem'e kadar buyur ama sabit degildir, yer daralinca once o kuculur; marka adi da sigmazsa kirpilir. Sabit genislikte (24rem + 40vw siniri) 901-1150px arasi masaustunde son dugme ("Giris Yap") barin disina itiliyordu. */ header.topbar .brand { flex: 0 1 auto; min-width: 0; } header.topbar .brand-name { overflow: hidden; text-overflow: ellipsis; } header.topbar .search-wrap { flex: 0 1 24rem; min-width: 0; } header.topbar input.search { width: 100%; min-width: 0; padding: 0.5333rem 0.8rem 0.5333rem 2.2667rem; border: 1px solid var(--dash-header-border); border-radius: var(--radius-control); background: var(--dash-header-overlay) url("data:image/svg+xml;utf8,") no-repeat 0.6667rem center; color: var(--dash-header-text); font-size:var(--text-base); outline: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), width var(--dur-base) var(--ease); } header.topbar input.search::placeholder { color: var(--dash-header-text-muted); } header.topbar input.search:hover { background-color: var(--dash-header-active); } header.topbar input.search:focus { border-color: var(--dash-header-text); background-color: var(--dash-header-active); } header.topbar .actions { display: flex; gap: var(--sp-2); align-items: center; } /* Bar uzerindeki kontroller: duragan halde saydam beyaz dolgu, hover'da biraz daha yogun, basiliyken --dash-header-active. Metin duragan halde muted (0.72 — AA tabani), hover'da tam beyaz. Koyu temada bar zaten koyu gradyan oldugu icin ayri bir :root.dark blogu YOK. */ header.topbar button.icon-btn { background: var(--dash-header-overlay); border: 1px solid var(--dash-header-border); color: var(--dash-header-text-muted); padding: 0.4rem 0.8rem; border-radius: var(--radius-control); cursor: pointer; font-size:var(--text-sm); font-weight: 600; letter-spacing: 0.01em; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } header.topbar button.icon-btn:hover { background: var(--dash-header-active); border-color: var(--dash-header-border); color: var(--dash-header-text); } header.topbar button.icon-btn:active { background: var(--dash-header-active); } /* ============================================================ * Sidebar * ============================================================ */ /* * Sol menu = portalv3 rayi (_menu.scss), icerik agacina uyarlanmis. * * --------------------------------------------------------------------------- * IKI KURAL HER SEYI TASIR — bozarsaniz girintiler yeniden kayar: * * 1. TEK ISARET SUTUNU. Her satir tipi (kategori, endpoint, rehber, SOAP * servisi, SOAP operasyonu) ayni genislikte (--nav-lead) bir isaret * kutusuyla baslar. Kutunun ICINDE ne oldugu degisir — tint'li kategori * karosu, metot ikonu, dokuman ikonu, nokta — ama GENISLIGI degismez. * Boylece ayni derinlikteki her satirin metni ayni x'ten baslar. * * 2. CHEVRON SAGDA. portalv3'un yaptigi da bu. Chevron solda olsaydi * acilabilir satirlar (kategori, SOAP servisi) isaret sutununu bir chevron * kadar sagA iterdi ve kardes yaprak satirlarla hizasi bozulurdu — agac * her acildiginda "girintiler kayiyor" hissinin sebebi buydu. * * GIRINTI TEK ADIMDIR (--nav-indent): margin + 1px kilavuz cizgisi + padding * toplami. Her seviye bunu bir kez ekler; baska hicbir yerde margin/padding * ile girinti YAPILMAZ. * --------------------------------------------------------------------------- * * portalv3'un 68px ikon rayi BURADA YOK: bu menu sabit bir modul listesi * degil, keyfi derinlikte bir kategori agaci — ikona indirgenemez. Daraltma * (--sidebar-collapsed) rayi tumuyle gizler; genislik surukleyerek ayarlanir * (--sidebar-w). */ .sidebar { /* Isaret sutunu genisligi ve metinle arasindaki bosluk. Tek yerde. */ --nav-lead: 1.4667rem; --nav-gap: 0.6667rem; /* Bir seviyelik girinti: 7px margin + 1px cizgi + 8px padding = 16px. */ --nav-indent-margin: 0.4667rem; --nav-indent-pad: 0.5333rem; } aside.sidebar { grid-area: sidebar; border-right: 1px solid var(--dash-card-border); background: var(--dash-card-bg); overflow-y: auto; padding: var(--sp-3) 0 var(--sp-6); max-height: calc(100vh - var(--header-h)); position: sticky; top: var(--header-h); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } /* Kaydirma cubugu global taban kuraldan gelir (hap tutamak, content-box klip); burada yalniz ray daraltilir. */ aside.sidebar::-webkit-scrollbar { width: 8px; } /* ---------------- Gruplar ve girinti ---------------- */ .sidebar .cat-group { padding: 0 var(--nav-gap) var(--sp-2); } /* * GIRINTIYI ACILAN LISTE TASIR, grup DEGIL. * * Kural: bir satirin COCUKLARI o satirdan tam bir adim iceride durur. Girinti * .cat-links uzerinde oldugu icin bu YAPRAKLAR ICIN DE gecerlidir — "REST * API"nin altindaki endpoint'ler onun kardesi gibi degil, cocugu gibi * gorunur. (Girinti .cat-group-sub'ta olsaydi yalniz ALT KATEGORILER * icerlerdi; yapraklar ustleriyle ayni x'te kalir ve agac duz okunurdu — * "girintiler kayiyor" hissinin asil sebebi buydu.) * * Girinti DOM ic-iceliginden gelir, bu yuzden tek kural her seviyede * kendiliginden birikir. Kilavuz cizgisi, girintinin tek basina * soyleyemedigi "hangi dalin altindayim" sorusunu yanitlar. * * .soap-ops zaten bir .cat-links'tir; ayrica kural gerekmez. */ .sidebar .cat-links { display: flex; flex-direction: column; gap: 2px; margin-left: var(--nav-indent-margin); padding-left: var(--nav-indent-pad); border-left: 1px solid var(--color-border); } /* Alt gruplar ve SOAP grubu KENDILERI girinti eklemez: konumlari ustlerinin .cat-links'inden gelir. Ikinci bir girinti kaynagi olsa adimlar katlanirdi. */ .sidebar .cat-group-sub, .sidebar .soap-group { padding: 0 0 var(--sp-1); } .sidebar .cat-group.collapsed .cat-links { display: none; } /* ---------------- Ortak satir tabani ---------------- * Kategori basligi bir