/* ===================================================================== WNM ACIK TEMA — bej --------------------------------------------------------------------- Koyu tema sayfalarin kendi :root blogunda kalir; burasi yalnizca oldugunda o token'lari ezer. Secici neden html[data-skin]? Ozgulluk (0,1,1) — sayfalarin kendi :root (0,1,0) blogunu yukleme sirasindan bagimsiz yener. --ink: "zemin uzerine binen katman rengi"nin RGB ucusu. Koyu temada beyaz (255,255,255), bej temada sicak koyu kahve. Tum hairline/hover/ ayrac katmanlari rgba(var(--ink),a) yazildigi icin tek degisken cevrilince yuzlerce yuzey birlikte doner. ===================================================================== */ :root { --ink: 255, 255, 255; } html[data-skin="light"] { --ink: 62, 52, 38; /* sicak koyu kahve — bej uzerine binen katman */ /* Zeminler */ --bg: #ded2b9; /* ana bej */ --base: #ded2b9; /* welcome.html ayni tokeni baska adla tutuyor */ --nav-bg: #cfc0a3; /* navbar: zeminin bir tik koyusu (koyu temadaki iliski) */ --bg2: #f1eadc; /* panel/modal kagidi — koyu temada en koyu yuzeydi */ --bg3: #e7ddc8; /* girinti: input, chip, kod blogu */ /* Vurgu — koyu temada "en parlak"ti, bej'de "en koyu" olmali */ --cyan: #2a241b; --pink: #5a4f3d; /* Tipografi */ --white: #241f18; /* birincil mürekkep */ --gray: #5d5648; --gray2: #8a8172; /* Kartlar — bej zemin uzerinde kagit gibi acik dursun */ --card-bg: rgba(255,255,255,0.58); --card-border: rgba(62,52,38,0.14); --card-glow: rgba(62,52,38,0.12); /* Cam yuzeyler */ --glass: rgba(255,255,255,0.42); --glass-border: rgba(62,52,38,0.12); --line: rgba(62,52,38,0.12); /* Isima yerine yumusak golge — bej zeminde neon parlama kirli gorunur */ --glow-cyan: 0 2px 10px rgba(62,52,38,0.14); --glow-pink: 0 2px 10px rgba(62,52,38,0.12); --shadow-card: 0 6px 28px rgba(92,76,52,0.16); color-scheme: light; } /* ===================================================================== TOKEN DISI SABITLER Asagidaki kurallar koyu zemin varsayarak elle beyaz/gri yazilmis. Token cevirisi bunlara ulasmaz, tek tek cevrilmeleri gerekir. ===================================================================== */ /* --- 1) Beyaz yazi/ikon -> mürekkep ---------------------------------- */ html[data-skin="light"] .nav-brand svg, html[data-skin="light"] .nav-search-btn:hover, html[data-skin="light"] .search-filter-btn:hover, html[data-skin="light"] .search-filter-menu button.sf-active, html[data-skin="light"] .nav-txt-link:hover, html[data-skin="light"] .rgn-menu button.rgn-active, html[data-skin="light"] .rgn-trigger:hover, html[data-skin="light"] .nav-ticker-chip:hover, html[data-skin="light"] .tag-map-btn:hover, html[data-skin="light"] .nav-login-btn, html[data-skin="light"] .nav-login-btn:hover, html[data-skin="light"] .split-card-title, html[data-skin="light"] .sh-target:hover, html[data-skin="light"] .art-note-btn:hover { color: var(--white); } html[data-skin="light"] .art-share:hover svg { stroke: var(--white); } /* Giris dugmesinin buz mavisi cercevesi bej uzerinde kayboluyor */ html[data-skin="light"] .nav-login-btn { border-color: rgba(62,52,38,0.28); } html[data-skin="light"] .nav-login-btn:hover { border-color: rgba(62,52,38,0.5); box-shadow: 0 2px 10px rgba(92,76,52,0.18); } /* --- 2) Koyu yuzey grileri -> okunur gri ----------------------------- */ html[data-skin="light"] .art-ai-txt, html[data-skin="light"] .art-sum-txt p, html[data-skin="light"] .reaction-text, html[data-skin="light"] .folder-add-btn, html[data-skin="light"] .sh-target, html[data-skin="light"] .art-note-btn { color: var(--gray); } html[data-skin="light"] .bookmark-btn svg, html[data-skin="light"] .share-btn svg, html[data-skin="light"] .art-share svg, html[data-skin="light"] .note-btn svg { stroke: var(--gray); } /* --- 3) Gorsel uzerindeki katman ------------------------------------- */ /* Fotografin ustundeki karartma her iki temada da koyu kalir; oradaki yazi da acik kalmali. .img-card-title zaten #fff — dokunulmuyor. */ /* DIKKAT: ayni iki sinif .split-card-meta ve .headline-meta icinde de kullaniliyor — oralarda duz zemin var, token rengiyle okunur kalmali. Bu yuzden beyaza cevirme yalnizca fotograf ustundeki kapsayicida. */ html[data-skin="light"] .img-card-content .img-card-src { color: rgba(255,255,255,0.88); } html[data-skin="light"] .img-card-content .img-card-time { color: rgba(255,255,255,0.72); } html[data-skin="light"] .fallback-initial { color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); } html[data-skin="light"] .fallback-src-name { color: rgba(255,255,255,0.45); } /* --- 4) Cerez kutusu ------------------------------------------------- */ html[data-skin="light"] .ck-banner { background: rgba(241,234,220,0.97); box-shadow: 0 8px 36px rgba(92,76,52,0.20), 0 0 0 1px rgba(62,52,38,0.06); } html[data-skin="light"] .ck-modal { background: var(--bg2); box-shadow: 0 20px 60px rgba(92,76,52,0.28); } html[data-skin="light"] .ck-backdrop { background: rgba(62,52,38,0.45); } /* Birincil dugme koyu mürekkep dolgulu — yazisi kagit rengi olmali */ html[data-skin="light"] .ck-btn-primary { color: var(--bg2); } html[data-skin="light"] .ck-btn-primary:hover { background: var(--cyan); color: var(--bg2); } /* --- 5) Sol kenar cubugu — bej temada KOYU CAM ----------------------- */ /* Istek: bej zeminde sidebar koyu cam bir ada gibi dursun. Panel koyulasinca icindeki HER SEY aydinliga donmeli: ikon/etiket renkleri, hover dolgulari ve .lg-* cam katmanlari ink yerine BEYAZ yazilir — o katmanlar screen/overlay harmanli, koyu renkle fiilen gorunmez oluyorlar. Logo (logo-mark.svg) sabit fill="#fff": oldugu icin disaridan boyanamiyor, dolayisiyla koyu panel onu dogru okunur yapan tek zemin. */ html[data-skin="light"] .left-sidebar { background: linear-gradient(180deg, rgba(38,31,22,0.78) 0%, rgba(30,24,17,0.70) 100%), radial-gradient(120% 70% at 0% 25%, rgba(255,255,255,0.06), transparent 62%); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-right: 1px solid rgba(24,19,13,0.42); box-shadow: inset -1px 0 0 rgba(255,255,255,0.05), inset 1px 0 0 rgba(255,255,255,0.07), 3px 0 26px -12px rgba(40,32,20,0.55); } /* Mobilde panel icerigin USTUNE kayiyor; saydam cam orada bulanik okunur, opak tut (koyu temanin mobil kuralinin bej karsiligi) */ @media (max-width: 768px) { html[data-skin="light"] .left-sidebar { background: linear-gradient(180deg, #2a2219 0%, #221b13 100%); } } html[data-skin="light"] .lsb-header { border-bottom-color: rgba(255,255,255,0.10); } html[data-skin="light"] .lsb-divider { background: rgba(255,255,255,0.10); } html[data-skin="light"] .lsb-item { color: rgba(255,255,255,0.72); } html[data-skin="light"] .lsb-item:hover { background: radial-gradient(70% 60% at 32% 28%, rgba(255,255,255,0.12) 0%, transparent 60%), rgba(255,255,255,0.05); color: #fff; } html[data-skin="light"] .lsb-item-active { background: rgba(255,255,255,0.10) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.08); } html[data-skin="light"] .lsb-item-active:hover { background: rgba(255,255,255,0.14) !important; } html[data-skin="light"] .lsb-cat-active { background: rgba(255,255,255,0.12) !important; color: #fff !important; } html[data-skin="light"] .lsb-cat-active .lsb-icon, html[data-skin="light"] .lsb-cat-active .lsb-label, html[data-skin="light"] .lsb-item-active .lsb-icon, html[data-skin="light"] .lsb-item-active .lsb-label { color: #fff; } html[data-skin="light"] .lsb-item-active::before { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.60) 100%); box-shadow: 0 0 10px rgba(255,255,255,0.45); } html[data-skin="light"] .lsb-item-active::after { background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%); } /* Cam katmanlari beyaza doner (bkz. yukaridaki not) */ html[data-skin="light"] .lg-tint { background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(200,215,240,0.06) 50%, rgba(255,255,255,0.08) 100%); } html[data-skin="light"] .lg-specular { background: radial-gradient(60px 52px at var(--lg-mx, 30%) var(--lg-my, 25%), rgba(255,255,255,0.70) 0%, rgba(220,235,255,0.24) 42%, transparent 72%); } html[data-skin="light"] .lg-hotspot-tl { background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.55) 0%, rgba(255,240,200,0.25) 20%, transparent 45%); } /* Mobil menu dugmesi bej navbar uzerinde duruyor — koyu panelle karistirma */ html[data-skin="light"] .hamburger { color: var(--gray); } html[data-skin="light"] .hamburger:hover { color: var(--white); border-color: rgba(62,52,38,0.35); box-shadow: none; } /* --- 6) Ayraclar ----------------------------------------------------- */ html[data-skin="light"] .nav-top, html[data-skin="light"] .nav-ticker { border-bottom-color: rgba(62,52,38,0.14); } html[data-skin="light"] { scrollbar-color: rgba(62,52,38,0.22) var(--bg); } html[data-skin="light"] ::-webkit-scrollbar-thumb { background: rgba(62,52,38,0.22); } html[data-skin="light"] .panel, html[data-skin="light"] .folder-modal, html[data-skin="light"] .dlg, html[data-skin="light"] .note-picker, html[data-skin="light"] .nb-menu { box-shadow: 0 10px 32px rgba(92,76,52,0.18); } html[data-skin="light"] .overlay { background: rgba(62,52,38,0.28); } /* --- Footer — bej temada koyu kahve ada (sidebar ile ayni aile) -------- */ /* Footer metin renkleri sabit acik tonlu; bej'den turetilen zemin onlari okunmaz yapiyordu. Desen katmani korunur, yalnizca zemin degisir. */ html[data-skin="light"] .site-footer { background-color: #241c14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M10 0L10 6L6 6L6 10L0 10M20 10L14 10L14 14L10 14L10 20M30 0L30 6L34 6L34 10L40 10M20 10L26 10L26 14L30 14L30 20M10 20L10 26L14 26L14 30L20 30M0 30L6 30L6 34L10 34L10 40M30 20L30 26L26 26L26 30L20 30M40 30L34 30L34 34L30 34L30 40' fill='none' stroke='%23e8dcc4' stroke-opacity='0.06' stroke-width='1.5'/%3E%3C/svg%3E"), linear-gradient(180deg, #2e241a 0%, #1c150f 100%); border-top-color: rgba(24,19,13,0.42); }