/* ============================================================================ web-theme.css — layouts.web sayfaları (calendar / randevu sorgula / ürünler / siparişler / kuyruk / hizmetler / giriş...) için AÇIK-KOYU tema uyarlaması. Kaynak tokenlar uhp-chrome.css ile aynı aile (--uhp-*). Bu dosya: (1) --web-bg sayfa zemini tokenını tanımlar, (2) token setini cihaz tercihine (prefers-color-scheme) VE kullanıcı seçimine (, localStorage 'uhp-theme', layouts.web'deki erken damgalama scripti) göre değiştirir, (3) Bootstrap / main.css'in sabit açık yüzeylerini tokenlara bağlar. @yield('styles')'tan ÖNCE yüklenir: sayfaların kendi stilleri kazanır (açık modda sıfır görsel değişim); sayfa-özel sabit açık renkler kendi dosyalarında tokena çevrildi. ========================================================================== */ :root { --web-bg: #ffffff; --web-chip: #ebebeb; /* seçilebilir buton/çip zemini */ } /* Cihaz koyu + kullanıcı 'light' SEÇMEMİŞ → koyu tokenlar (auto) */ @media (prefers-color-scheme: dark) { :root:not([data-uhp-theme="light"]) { --web-bg: #0b1118; --web-chip: #1e2836; --uhp-surface: #141b25; --uhp-surface-2: #0f151d; --uhp-ink: #eef1f6; --uhp-muted: #9aa3b2; --uhp-faint: #6b7482; --uhp-line: #232b37; --uhp-accent-050: color-mix(in srgb, var(--uhp-accent, #2f6bff) 16%, #141b25); --uhp-accent-line: color-mix(in srgb, var(--uhp-accent, #2f6bff) 34%, transparent); } } /* Kullanıcı seçimi: KOYU (cihaz tercihi ne olursa olsun) */ :root[data-uhp-theme="dark"] { --web-bg: #0b1118; --web-chip: #1e2836; --uhp-surface: #141b25; --uhp-surface-2: #0f151d; --uhp-ink: #eef1f6; --uhp-muted: #9aa3b2; --uhp-faint: #6b7482; --uhp-line: #232b37; --uhp-accent-050: color-mix(in srgb, var(--uhp-accent, #2f6bff) 16%, #141b25); --uhp-accent-line: color-mix(in srgb, var(--uhp-accent, #2f6bff) 34%, transparent); } /* Kullanıcı seçimi: AÇIK — cihaz koyu olsa bile uhp-chrome'un @media bloğunu özgüllükle ((0,2,0) > (0,1,0)) ezer */ :root[data-uhp-theme="light"] { --web-bg: #ffffff; --web-chip: #ebebeb; --uhp-surface: #ffffff; --uhp-surface-2: #f6f8fb; --uhp-ink: #141a22; --uhp-muted: #5b6573; --uhp-faint: #8b93a1; --uhp-line: #e7eaf0; --uhp-accent-050: color-mix(in srgb, var(--uhp-accent, #2f6bff) 12%, #fff); --uhp-accent-line: color-mix(in srgb, var(--uhp-accent, #2f6bff) 30%, transparent); } /* ======================= Ortak yüzey / tipografi eşlemeleri ================== body'nin satır içi background'ı tanımsız değişkene bağlı (şeffaf) → sayfa zemini html'den gelir. */ html { background: var(--web-bg, #ffffff); } body { color: var(--uhp-ink, #212529); } .card, .modal-content, .list-group-item, .dropdown-menu { background-color: var(--uhp-surface, #fff); color: var(--uhp-ink, #212529); } .card { border-color: var(--uhp-line, rgba(0, 0, 0, .125)); } .modal-header, .modal-footer { border-color: var(--uhp-line, #dee2e6); } .close { color: var(--uhp-ink, #000); text-shadow: none; } .form-control { background-color: var(--uhp-surface, #fff); color: var(--uhp-ink, #495057); border-color: var(--uhp-line, #ced4da); } .form-control:focus { background-color: var(--uhp-surface, #fff); color: var(--uhp-ink, #495057); } .form-control::placeholder { color: var(--uhp-faint, #6c757d); } .form-control:disabled, .form-control[readonly] { background-color: var(--uhp-surface-2, #e9ecef); color: var(--uhp-muted, #495057); } select option { background: var(--uhp-surface, #fff); color: var(--uhp-ink, #212529); } .input-group-text { background-color: var(--uhp-surface-2, #e9ecef); color: var(--uhp-ink, #495057); border-color: var(--uhp-line, #ced4da); } .table { color: var(--uhp-ink, #212529); } .table th, .table td { border-color: var(--uhp-line, #dee2e6); } .table thead th { border-bottom-color: var(--uhp-line, #dee2e6); } hr { border-top-color: var(--uhp-line, rgba(0, 0, 0, .1)); } .border, .border-top, .border-right, .border-bottom, .border-left { border-color: var(--uhp-line, #dee2e6) !important; } .breadcrumb { background-color: var(--uhp-surface-2, #e9ecef); } .alert-light { background-color: var(--uhp-surface-2, #fefefe); color: var(--uhp-ink, #818182); border-color: var(--uhp-line, #fdfdfe); } .badge-light { background-color: var(--uhp-surface-2, #f8f9fa); color: var(--uhp-ink, #212529); } /* main.css / main2.css'in sabit koyu metin + açık yüzey sınıfları (bu dosya main2'den SONRA yüklendiği için eşit özgüllükte kazanır; açık modda birebir aynı değerlere çözülür) */ .transaction-header, .transaction-item h4, .transaction-duration, .textCompanyNameStyle, .textHeaderStyle, .textDaysStyle, .textHoursStyle, .textOzetStyle { color: var(--uhp-ink, #21262e); } .transaction-card { background-color: var(--uhp-surface, #fff); border-color: var(--uhp-line, #ebebeb); } #dates-for-next-month button, #hours button { background-color: var(--web-chip, #ebebeb); color: var(--uhp-ink, #21262e); } /* ============ Sabit alt navigasyon boşluğu / footer altı şeridi ============ uhp-chrome body'ye 60-66px alt boşluk veriyordu; koyu footer'ın altında sayfa zemini şerit olarak görünüyordu. Boşluk footer'ın İÇİNE alınır (koyu zemin kesintisiz biter); footer'ı olmayan sayfalarda body üstlenir. Not: calendar kendi dock'lu (daha yüksek) değerlerini id-özgüllüğüyle ezer. */ body:has(.uhp-tabs) { padding-bottom: 0; } body:has(.uhp-tabs) .footer-premium { padding-bottom: calc(2rem + 66px); } body:has(.uhp-tabs):not(:has(.footer-premium)) { padding-bottom: 66px; } /* Bootstrap utility'leri (kaynakta !important olduğundan burada da gerekli) */ .bg-white { background-color: var(--uhp-surface, #fff) !important; } .bg-light { background-color: var(--uhp-surface-2, #f8f9fa) !important; } .text-dark { color: var(--uhp-ink, #343a40) !important; } .text-muted { color: var(--uhp-muted, #6c757d) !important; } .text-black-50 { color: var(--uhp-muted, rgba(0, 0, 0, .5)) !important; }