/* * DÜĞME ÇEKİRDEĞİ — çalışma alanındaki bütün düğmelerin biçiminin tek kaynağı. * * NE İŞE YARIYOR * Bu dosya yazılmadan önce sistemde altmışa yakın ayrı düğme kuralı vardı * ve neredeyse hiçbiri diğeriyle aynı değildi. Köşe yarıçapı on iki farklı * değerdeydi (999px, 20, 16, 14, 12, 11, 10, 9, 8, 6, 5, 4); iç boşluk on * dört ayrı ölçüde (5/13, 7/14, 8/15, 8/16, 9/10, 9/15, 9/16, 9/18, 10/18, * 10/20, 11/20, 13/34, .55rem/1rem, .6rem/.9rem); yazı kalınlığı 600 ile * 800 arasında beş basamakta. Renk tarafı daha da dağınıktı: Yönetim * ekranında her düğme düz teal ve 6px köşeliydi, Özet'te aynı işi yapan * düğme degradeli ve haptı, giriş ekranında 14px köşeli üçüncü bir biçim * vardı. Aynı ürünün içinde dolaşan kişi her ekranda başka bir ürünün * düğmesine basıyordu. * * Artık biçim burada. Her düğme kuralı yalnızca "hangi rol" diyor, "nasıl * görünsün"ü bu dosya söylüyor. * * İKİ AYRI SORU: ROL ve BİÇİM * Rol, düğmenin ne iş yaptığı - beş tane var ve sabit: * birincil Ekranı ileri götüren tek eylem. Dolu vurgu rengi. * Bir form, bir pencere, bir kart -> en fazla bir tane. * ikincil Birincilin yanındaki destek eylemi ("Geri al", "Vazgeç", * "Yeni proje"). Yüzey rengi + çerçeve. * sessiz Kalabalık yerlerin düğmesi: araç çubuğu, liste satırı, * sekme. Zemini yok, üstüne gelince beliriyor. * tehlike Geri alınamayan eylem. Kırmızı; temayla dönmüyor. * ikon Yalnız simge: kapat, çark, üç nokta. Kare tıklama alanı. * * KAP KÖŞESİ AYRI BİR SAYI * --dg-kap ve --dg-kap-buyuk kartların ve panellerin köşesi. Düğme * köşesinden türetilmiyorlar, çünkü türetildiklerinde "Hap" biçimi * (999px) kartları da hapa çeviriyordu: calc(999px + 4px) bir kartın * yarıçapını kutunun yarısına kadar büyütür ve dikdörtgen kart stadyuma * döner. Düğme yuvarlak olabilir, kart olmak zorunda değil - ikisi ayrı * sayı. (Uzun vadede bu, düğme biçiminden bağımsız kendi "köşe dili" * eksenine terfi edecek; burada o eksenin ilk iki belirteci duruyor.) * * Biçim, o beş rolün nasıl çizildiği - ve kişi seçiyor. Beş seçenek var: * Yumuşak, Hap, Keskin, Kabartma, Çerçeve. Seçim rolleri değiştirmiyor: * hangi biçim seçilirse seçilsin birincil hâlâ en baskın, sessiz hâlâ en * sakin düğme. Biçim yalnızca köşeyi, derinliği, kalınlığı çeviriyor. * * Bu ayrım bilerek: "hepsi tek düğme olsun" denseydi ekran düzleşir, * hangi düğmeye basılacağı okunmaz olurdu. Beş rol o hiyerarşiyi koruyor. * * NEDEN VARSAYILAN "YUMUŞAK" * Sistemin eski hâli hap (999px) + degrade + geniş gölgeydi. O üçlü bugün * otomatik üretilmiş arayüzlerin imzası hâline geldi; ürün kendi yaptığı * işten çok şablona benziyordu. Yumuşak bunun tersi: 10px köşe, düz vurgu * rengi, 1px'lik iğne gölge. Eski görünüm kaybolmadı - "Hap" biçimi tam * olarak o, seçen geri alıyor. * * BİÇİM RENGE KARIŞMIYOR * Renkler tema çekirdeğinden (tema.css, --m-*). Bu dosya tek bir renk * tanımlamıyor; hepsini oradan okuyor. Yani sekiz tema × iki zemin × beş * düğme biçimi birbirinden bağımsız, seksen görünüm çarpışmadan duruyor. * * NEREDEN GELİYOR * Kapı (taiga.conf) bu dosyayı tema.css'in hemen ardından üç uygulamanın * da 'ine koyuyor; kendi sayfalarımız kendi 'lerinde çağırıyor. * Seçimi etiketine data-dugme olarak yazan taraf tema.js; kişinin * seçimi sunucuda tercihlerin içinde duruyor (sso.py, temiz_tema). * * BOZULURSA * üzerindeki data-dugme niteliğini sil: aşağıdaki ilk blok * (Yumuşak) devreye girer. Dosyanın 'ini tamamen kaldırırsan her * düğme kuralındaki var(--dg-…, yedek) yedeği devreye girer ve düğmeler * biçimsiz kalmaz, yalnızca hepsi Yumuşak'ta donar. */ /* ===================================================================== * 1. ÖLÇÜ — biçimden bağımsız * * Üç boy var ve hiçbir biçim bunları değiştirmiyor: "küçük" her yerde aynı * küçük. Biçimin dokunduğu tek ölçü --dg-yan-ek: hap biçimi yuvarlak köşesi * yüzünden yazıyı kenara yakın gösterir, o yüzden kendi bloğunda yatay * boşluğa birkaç piksel ekliyor. * ================================================================== */ :root { --dg-dolgu-kucuk: 6px calc(12px + var(--dg-yan-ek)); --dg-dolgu: 9px calc(16px + var(--dg-yan-ek)); --dg-dolgu-buyuk: 12px calc(22px + var(--dg-yan-ek)); --dg-yazi-kucuk: 12px; --dg-yazi: 13.5px; --dg-yazi-buyuk: 15px; --dg-ikon-kucuk: 28px; --dg-ikon-en: 34px; --dg-ikon-buyuk: 40px; --dg-gecis: 0.16s; /* Odak halkası: klavyeyle gezen herkesin gördüğü tek işaret, biçimden bağımsız olarak hep aynı kalınlıkta. */ --dg-halka: 0 0 0 3px var(--m-accent-ring-strong, oklch(0.55 0.09 200 / 0.25)); } /* Vurgunun "üzerine gelince" hâli ve gölge rengi. Biçimler bunları kullanıyor ama kendileri tanımlamıyor: koyu zeminde ikisi de dönmek zorunda (açık zeminde koyulaşan düğme koyu zeminde açılmalı), o dönüş de tek yerde yazılı olsun diye. */ :root, [data-dugme] { --dg-vurgu-us: var(--m-accent-deep, oklch(0.45 0.1 200)); --dg-vurgu-golge-renk: oklch(0.55 calc(0.1 * var(--m-c, 1)) var(--m-hm, 210) / 0.3); --dg-teh-golge-renk: oklch(0.55 0.18 25 / 0.28); } [data-zemin="koyu"] { --dg-vurgu-us: var(--m-accent-bright, oklch(0.78 0.12 200)); --dg-vurgu-golge-renk: oklch(0.4 calc(0.12 * var(--m-c, 1)) var(--m-hm, 210) / 0.5); --dg-teh-golge-renk: oklch(0.4 0.18 25 / 0.45); } /* ===================================================================== * 2. BEŞ BİÇİM * * Her biçim aşağıdaki listenin tamamını yazıyor - eksik bırakılan bir * değer bir önceki biçimden miras kalır ve iki biçim birbirine karışırdı. * Sıra kasıtlı: en sık seçilecek olan başta. * ================================================================== */ /* --- YUMUŞAK (varsayılan) ------------------------------------------- Bugünün ürün arayüzlerinin sakin dili: orta köşe, düz dolgu, gölge neredeyse yok. Gölge 1px'lik bir iğne - düğmeyi zeminden ayırmaya yetiyor, "havada duruyor" izlenimi vermiyor. Hover'da düğme zıplamıyor, yalnızca rengi bir basamak koyulaşıyor: fare gezdikçe sayfanın oynaması, kalabalık listelerde en çok yorulan şey. */ :root, [data-dugme="yumusak"] { --dg-kose: 10px; --dg-kose-kucuk: 8px; --dg-kose-ikon: 10px; --dg-kap: 14px; --dg-kap-buyuk: 18px; --dg-cizgi: 1px; --dg-agirlik: 650; --dg-agirlik-us: 750; --dg-harf: 0; --dg-yan-ek: 0px; --dg-kalk: 0px; --dg-bas: 0px; --dg-bir-zemin: var(--m-accent, oklch(0.55 0.09 200)); --dg-bir-zemin-us: var(--dg-vurgu-us); --dg-bir-golge: 0 1px 2px var(--dg-vurgu-golge-renk); --dg-bir-golge-us: 0 3px 8px var(--dg-vurgu-golge-renk); --dg-bir-kabartma: 0 0 #0000; --dg-bir-kabartma-bas: 0 0 #0000; --dg-iki-zemin: var(--m-sheet, #ffffff); --dg-iki-zemin-us: var(--m-surface-mid, #f7fafb); --dg-iki-cizgi: var(--m-line, #e6ebee); --dg-iki-golge: 0 1px 2px oklch(0.4 0.02 240 / 0.06); --dg-iki-kabartma: 0 0 #0000; } /* --- HAP ------------------------------------------------------------- Sistemin bu dosyadan önceki hâli, olduğu gibi korundu: tam yuvarlak köşe, degrade dolgu, geniş renkli gölge, hover'da 1px yükselme. Alışmış olan kimse bir şey kaybetmesin diye duruyor. */ [data-dugme="hap"] { --dg-kose: 999px; --dg-kose-kucuk: 999px; --dg-kose-ikon: 999px; --dg-kap: 20px; --dg-kap-buyuk: 26px; --dg-cizgi: 1.5px; --dg-agirlik: 800; --dg-agirlik-us: 800; --dg-harf: 0.1px; --dg-yan-ek: 4px; --dg-kalk: 1px; --dg-bas: 0px; --dg-bir-zemin: var(--m-grad, linear-gradient(135deg, oklch(0.6 0.11 200), oklch(0.5 0.1 220))); --dg-bir-zemin-us: var(--m-grad, linear-gradient(135deg, oklch(0.6 0.11 200), oklch(0.5 0.1 220))); --dg-bir-golge: 0 6px 16px var(--dg-vurgu-golge-renk); --dg-bir-golge-us: 0 10px 22px var(--dg-vurgu-golge-renk); --dg-bir-kabartma: 0 0 #0000; --dg-bir-kabartma-bas: 0 0 #0000; --dg-iki-zemin: var(--m-glass-strong, rgba(255, 255, 255, 0.78)); --dg-iki-zemin-us: var(--m-sheet, #ffffff); --dg-iki-cizgi: var(--m-edge, rgba(255, 255, 255, 0.9)); --dg-iki-golge: 0 0 #0000; --dg-iki-kabartma: 0 0 #0000; } /* --- KESKİN ---------------------------------------------------------- Gölgesiz, dar köşeli, hafif harf aralıklı. Basılı işin dili: gazete kutusu, tablo, form. Yoğun ekranlarda - Yönetim tabloları, Özet listeleri - en okunaklı olanı, çünkü hiçbir düğme yüzeyden ayrılmaya çalışmıyor; sınırını çizgisiyle çiziyor. */ [data-dugme="keskin"] { --dg-kose: 4px; --dg-kose-kucuk: 3px; --dg-kose-ikon: 4px; --dg-kap: 5px; --dg-kap-buyuk: 7px; --dg-cizgi: 1px; --dg-agirlik: 700; --dg-agirlik-us: 800; --dg-harf: 0.2px; --dg-yan-ek: 2px; --dg-kalk: 0px; --dg-bas: 0px; --dg-bir-zemin: var(--m-accent, oklch(0.55 0.09 200)); --dg-bir-zemin-us: var(--dg-vurgu-us); --dg-bir-golge: 0 0 #0000; --dg-bir-golge-us: 0 0 #0000; --dg-bir-kabartma: 0 0 #0000; --dg-bir-kabartma-bas: 0 0 #0000; --dg-iki-zemin: var(--m-sheet, #ffffff); --dg-iki-zemin-us: var(--m-surface-low, #f2f6f8); --dg-iki-cizgi: var(--m-line-strong, #d7dee2); --dg-iki-golge: 0 0 #0000; --dg-iki-kabartma: 0 0 #0000; } /* --- KABARTMA -------------------------------------------------------- Tuş hissi: üst kenarda ince bir ışık, alt kenarda 2px'lik sert bir gölge - ikisi de bulanık değil, keskin. Basılınca düğme 1px aşağı iniyor ve alt kenar 1px'e düşüyor, yani gerçekten çöküyor. Bulanık gölge yerine sert kenar kullanılmasının sebebi bu: bulanık gölge "havada", sert kenar "kalınlığı olan bir şey" anlatıyor. */ [data-dugme="kabartma"] { --dg-kose: 9px; --dg-kose-kucuk: 7px; --dg-kose-ikon: 9px; --dg-kap: 12px; --dg-kap-buyuk: 16px; --dg-cizgi: 1px; --dg-agirlik: 700; --dg-agirlik-us: 800; --dg-harf: 0; --dg-yan-ek: 1px; --dg-kalk: 0px; --dg-bas: 1px; --dg-bir-zemin: var(--m-accent, oklch(0.55 0.09 200)); --dg-bir-zemin-us: var(--dg-vurgu-us); --dg-bir-golge: 0 1px 2px var(--dg-vurgu-golge-renk); --dg-bir-golge-us: 0 2px 4px var(--dg-vurgu-golge-renk); --dg-bir-kabartma: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.19); --dg-bir-kabartma-bas: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --dg-iki-zemin: var(--m-sheet, #ffffff); --dg-iki-zemin-us: var(--m-surface-mid, #f7fafb); --dg-iki-cizgi: var(--m-line-strong, #d7dee2); --dg-iki-golge: 0 1px 1px oklch(0.4 0.02 240 / 0.07); --dg-iki-kabartma: inset 0 1px 0 var(--m-edge, rgba(255, 255, 255, 0.9)), inset 0 -2px 0 var(--m-line, #e6ebee); } /* --- ÇERÇEVE --------------------------------------------------------- En az mürekkep harcayan biçim. Birincil dışındaki hiçbir düğmenin dolgusu yok; sınırını yalnız çizgisi çiziyor, zemini üstüne gelince beliriyor. Ekranda çok sayıda düğme varsa (kart ızgaraları, araç çubukları) gözü en az yoran seçenek - ama tek başına duran bir "Kaydet"i de zayıflatmasın diye birincil yine dolu bırakıldı. */ [data-dugme="cerceve"] { --dg-kose: 8px; --dg-kose-kucuk: 6px; --dg-kose-ikon: 8px; --dg-kap: 12px; --dg-kap-buyuk: 16px; --dg-cizgi: 1.5px; --dg-agirlik: 650; --dg-agirlik-us: 750; --dg-harf: 0; --dg-yan-ek: 2px; --dg-kalk: 0px; --dg-bas: 0px; --dg-bir-zemin: var(--m-accent, oklch(0.55 0.09 200)); --dg-bir-zemin-us: var(--dg-vurgu-us); --dg-bir-golge: 0 0 #0000; --dg-bir-golge-us: 0 0 #0000; --dg-bir-kabartma: 0 0 #0000; --dg-bir-kabartma-bas: 0 0 #0000; --dg-iki-zemin: transparent; --dg-iki-zemin-us: var(--m-accent-wash, oklch(0.97 0.015 200)); --dg-iki-cizgi: var(--m-line-strong, #d7dee2); --dg-iki-golge: 0 0 #0000; --dg-iki-kabartma: 0 0 #0000; } /* ===================================================================== * 3. BEŞ ROL — hazır sınıflar * * Yeni yazılan her düğme bunları kullanıyor: class="dg dg-birincil". * Sistemde önceden var olan düğmeler kendi sınıf adlarıyla duruyor ama * değerlerini yukarıdaki aynı belirteçlerden okuyor - yani ikisi bir gün * ayrı düşemiyor. * ================================================================== */ .dg { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; padding: var(--dg-dolgu); border: var(--dg-cizgi) solid transparent; border-radius: var(--dg-kose); background: transparent; color: inherit; font-family: inherit; font-size: var(--dg-yazi); font-weight: var(--dg-agirlik); letter-spacing: var(--dg-harf); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; /* Hareket eden tek şey renk, gölge ve 1px'lik yer değişimi. Genişlik ya da iç boşluk hiç geçişe girmiyor: düğmenin yazısı değişince (Kaydet -> Kaydediliyor) satırın kayması istenmiyor. */ transition: background-color var(--dg-gecis) ease, border-color var(--dg-gecis) ease, color var(--dg-gecis) ease, box-shadow var(--dg-gecis) ease, transform var(--dg-gecis) ease; } .dg:focus-visible { outline: none; box-shadow: var(--dg-halka); } .dg[disabled], .dg[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; } /* --- birincil --- */ .dg-birincil { background: var(--dg-bir-zemin); border-color: transparent; color: var(--m-on-accent, #ffffff); box-shadow: var(--dg-bir-kabartma), var(--dg-bir-golge); } .dg-birincil:hover:not([disabled]) { background: var(--dg-bir-zemin-us); color: var(--m-on-accent, #ffffff); box-shadow: var(--dg-bir-kabartma), var(--dg-bir-golge-us); transform: translateY(calc(-1 * var(--dg-kalk))); } .dg-birincil:active:not([disabled]) { transform: translateY(var(--dg-bas)); box-shadow: var(--dg-bir-kabartma-bas), var(--dg-bir-golge); } .dg-birincil:focus-visible { box-shadow: var(--dg-bir-kabartma), var(--dg-halka); } /* --- ikincil --- */ .dg-ikincil { background: var(--dg-iki-zemin); border-color: var(--dg-iki-cizgi); color: var(--m-ink-mid, #55646e); box-shadow: var(--dg-iki-kabartma), var(--dg-iki-golge); } .dg-ikincil:hover:not([disabled]) { background: var(--dg-iki-zemin-us); border-color: var(--m-accent-edge, #a9e2e4); color: var(--m-accent-ink, oklch(0.42 0.1 200)); transform: translateY(calc(-1 * var(--dg-kalk))); } .dg-ikincil:active:not([disabled]) { transform: translateY(var(--dg-bas)); } .dg-ikincil:focus-visible { box-shadow: var(--dg-iki-kabartma), var(--dg-halka); } /* --- sessiz --- Zemini yok. Araç çubuklarında ve liste satırlarında yan yana on tane durabildiği için çerçevesi de yok: on çerçeve bir ızgaraya döner. */ .dg-sessiz { background: transparent; border-color: transparent; color: var(--m-ink-mid, #55646e); } .dg-sessiz:hover:not([disabled]) { background: var(--m-accent-soft, oklch(0.95 0.02 200)); color: var(--m-accent-ink, oklch(0.42 0.1 200)); } .dg-sessiz[aria-pressed="true"], .dg-sessiz[aria-selected="true"], .dg-sessiz.is-etkin { background: var(--m-accent-tint, oklch(0.93 0.04 200)); color: var(--m-accent-ink, oklch(0.42 0.1 200)); } /* --- tehlike --- Kırmızı hiçbir temada dönmüyor (tema.css, "anlam renkleri"): bakır temada silme düğmesinin turuncuya kayması "sil"i "kaydet" sanmaya açık kapı bırakırdı. Biçim yine ortak - yalnız renk ayrı. */ .dg-tehlike { background: var(--m-danger, oklch(0.55 0.18 25)); border-color: transparent; color: #ffffff; box-shadow: var(--dg-bir-kabartma), 0 1px 2px var(--dg-teh-golge-renk); } .dg-tehlike:hover:not([disabled]) { background: var(--m-danger-deep, oklch(0.45 0.18 25)); color: #ffffff; transform: translateY(calc(-1 * var(--dg-kalk))); } .dg-tehlike:active:not([disabled]) { transform: translateY(var(--dg-bas)); box-shadow: var(--dg-bir-kabartma-bas), 0 1px 2px var(--dg-teh-golge-renk); } /* Sessiz tehlike: liste satırındaki çöp kutusu. Kırmızı yalnız üstüne gelince beliriyor - on satırlık listede on kırmızı ikon, listeyi hata ekranına çevirirdi. */ .dg-tehlike.dg-sessiz { background: transparent; color: var(--m-ink-faint, #93a1aa); box-shadow: none; } .dg-tehlike.dg-sessiz:hover:not([disabled]) { background: var(--m-danger-soft, oklch(0.95 0.04 25)); color: var(--m-danger, oklch(0.55 0.18 25)); } /* --- ikon --- Kare tıklama alanı. Yazı yerine simge taşıdığı için iç boşluk değil ölçü veriliyor: 34px her biçimde 34px, yoksa araç çubuğunun yüksekliği düğme biçimi değişince oynardı. */ .dg-ikon { width: var(--dg-ikon-en); height: var(--dg-ikon-en); padding: 0; gap: 0; border-radius: var(--dg-kose-ikon); flex: 0 0 auto; } .dg-ikon svg { width: 16px; height: 16px; pointer-events: none; } /* İkon + boy birlikte verilince köşe yine ikon köşesi olsun: aşağıdaki .dg-kucuk kuralı bu satırdan sonra geldiği için, eşit özgüllükte onun yarıçapı kazanırdı. */ .dg-ikon.dg-kucuk { width: var(--dg-ikon-kucuk); height: var(--dg-ikon-kucuk); padding: 0; border-radius: var(--dg-kose-ikon); } .dg-ikon.dg-kucuk svg { width: 14px; height: 14px; } .dg-ikon.dg-buyuk { width: var(--dg-ikon-buyuk); height: var(--dg-ikon-buyuk); padding: 0; border-radius: var(--dg-kose-ikon); } .dg-ikon.dg-buyuk svg { width: 18px; height: 18px; } /* Yuvarlak ikon düğmesi (avatar, pencere kapatma) biçimden bağımsız: tam daire olması gereken yerde 4px köşe yanlış görünür. */ .dg-ikon.dg-daire { border-radius: 50%; } /* --- boylar --- */ .dg-kucuk { padding: var(--dg-dolgu-kucuk); font-size: var(--dg-yazi-kucuk); border-radius: var(--dg-kose-kucuk); } .dg-buyuk { padding: var(--dg-dolgu-buyuk); font-size: var(--dg-yazi-buyuk); } .dg-tam { display: flex; width: 100%; } @media (prefers-reduced-motion: reduce) { .dg, .dg:hover, .dg:active { transform: none; transition: none; } }