html, body {
height: 100%;
}
app {
display: block;
height: 100%;
}
.header-logo {
/* Sentez Otomasyon logosu: açık ve koyu temalarda okunur olması için beyaz rozet üzerinde renkli logo */
background: #ffffff url('../images/sentez-yatay.svg?v=zk8') center / contain no-repeat;
background-origin: content-box;
padding: 3px 10px;
border-radius: 8px;
width: 170px;
height: 36px;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
#blazor-error-ui {
background: inherit;
bottom: 0;
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 100001;
}
.dx-blazor-scrollable.dx-scrollable-horizontal .dx-scrollable-content {
overflow-x: auto !important;
}
/* Popup / pencere / açılır listeler: temadan bağımsız opak zemin (saydam görünme sorunu) */
.dxbl-popup, .dxbl-window, .dxbl-dropdown, .dxbl-popup-body, .dxbl-window-body, .dxbl-dropdown-body,
.dxbl-popup-header, .dxbl-window-header, .dxbl-popup-footer, .dxbl-window-footer,
.dxbl-popup-portal .dxbl-popup-cell > .dxbl-popup, .dxbl-popup-portal .dxbl-popup-cell > .dxbl-window,
.xaf-popup-window, .xaf-dialog, .modal-content {
background-color: var(--bs-body-bg, #ffffff) !important;
color: var(--bs-body-color, #212529);
opacity: 1;
}
.dxbl-popup, .dxbl-window, .dxbl-dropdown {
border: 1px solid var(--bs-border-color, #cfd4da) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, .35) !important;
backdrop-filter: none !important;
}
.dxbl-popup.dxbl-popup-hidden, .dxbl-window.dxbl-popup-hidden, .dxbl-dropdown.dxbl-popup-hidden { opacity: 0; }
.dxbl-modal-backdrop, .dxbl-popup-backdrop, .modal-backdrop { background-color: rgba(0, 0, 0, .5) !important; }
#components-reconnect-modal { background-color: rgba(0, 0, 0, .6) !important; color: #fff; }
/* Liste kolon başlıkları: dar kolonlarda "..." ile kırpılmak yerine 2-3 satıra bölünsün. */
.dxbl-grid .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-header-content .dxbl-text { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; word-break: normal; overflow-wrap: anywhere; }
.dxbl-grid .dxbl-grid-header { vertical-align: bottom; }
.dxbl-grid .dxbl-grid-header-cell { padding-top: 6px; padding-bottom: 6px; }
/* ============================================================================
ZekiKod PDKS — giriş ekranı marka uyumu
2026-09-05 (canlı DOM'a göre düzeltildi; önceki taslak .logon-left-image /
.left-image gibi DOM'da karşılığı olmayan bir iki-sütun+arka plan görseli
varsayıyordu — bu bölüm baştan, gerçek kapsayıcılara göre yazıldı)
GERÇEK DOM (canlı sayfadan doğrulandı):
.logon-template-header.card.card-header — sayfa üstü marka şeridi
.header-logo — (bu şeritte beyaz logo)
.logon-template-body — .logon-template-header'ın KARDEŞİ
.logon-main-container — flex (column) kutu
.logon-main.card — beyaz giriş kartı
.logon-viewsite — form: Kullanıcı Adı, Password, .logon-toolbar > "Oturum Aç"
#zk-demo-giris — JS ile eklenen ikinci kart (bkz. zk-demo-giris.css)
ÖNEMLİ TEKNİK NOT — neden iki katman gerekiyor:
Aktif tema Bootswatch/Bootstrap **4.5.0**'dır, Bootstrap 5 değil. Dosyada
#008cba **36 kez sabit yazılıdır**; `var(--primary)` ve `var(--bs-*)` ise
**0 kez** geçer. Yani yalnız `--bs-primary` tanımlamak Bootstrap düğmelerini,
bağlantılarını, onay kutusunu DEĞİŞTİRMEZ.
Buna karşılık DevExpress'in `bootstrap-external.bs5.min.css` köprüsü
`var(--bs-primary…)` zincirini **246 kez** okur.
Bu yüzden:
A KATMANI — :root değişkenleri -> DevExpress bileşenlerini markaya çeker
B KATMANI — açık seçici ezmeleri -> Bootstrap 4'ün sabit renklerini ezer
B katmanındaki seçiciler tahminle değil, css/themes/yeti/bootstrap.min.css
dosyasından çıkarılmıştır (#008cba geçen 27 kural taranmıştır). Üç kuralı
(.bg-primary, .border-primary, .text-primary) tema dosyasında !important
ile yazılıdır — ezen kural da !important TAŞIMAZSA etkisizdir; aşağıda
üçü de !important ile yazılmıştır.
============================================================================ */
:root {
/* --- Marka paleti: giriş görselinden ve logodan PİKSEL ÖRNEKLEMEYLE alındı --- */
--zk-lacivert-900: #06224B; /* degrade zemin — koyu uç H216 */
--zk-lacivert-700: #034074; /* degrade zemin — orta H208 */
--zk-marka: #004891; /* MARKA MAVİSİ — logo harfleri H210 */
--zk-marka-koyu: #003A75; /* düğme :hover / :active H210 */
--zk-marka-vurgu: #005B95; /* logo slogan rengi H203 */
--zk-azur: #0065A5; /* degrade zemin — açık uç H203 */
/* --- Yüzeyler: nötr gri değil, lacivert tonlu (aynı aileden) --- */
--zk-yuzey: #FFFFFF; /* kart gövdesi, ikon çipi */
--zk-yuzey-2: #F4F7FB; /* demo paneli + kartlarının zemini H214 */
--zk-yuzey-3: #E8F0FA; /* demo kartı :hover H213 */
/* --- Metin --- */
--zk-murekkep: #0F2440; /* ana metin — beyazda 15.59:1 */
--zk-murekkep-2: #4A5D75; /* ikincil metin — beyazda 6.15:1 */
/* --- Kenarlıklar: dekoratif olan ile etkileşimli olan AYRI --- */
--zk-kenarlik: #D6E0EC; /* dekoratif ayırıcı — 3:1 gerekmez */
--zk-kenarlik-guclu: #6F86A6; /* metin alanı/onay kutusu — beyazda 3.73:1 ✓ */
--zk-odak: #0065A5; /* tek tip odak halkası */
/* --- Ölçek: 4/8/12/16/24/32 — rastgele değer yok --- */
--zk-r: 16px; /* kart ve panel köşesi (ORTAK) */
--zk-r-kucuk: 12px; /* demo kartı köşesi */
--zk-genislik: 440px; /* kart ve panelin ORTAK genişliği */
--zk-golge-2: 0 2px 8px rgba(6,34,75,.10);
--zk-golge-3: 0 6px 16px rgba(6,34,75,.16);
--zk-golge-4: 0 12px 32px rgba(6,34,75,.28);
/* === A KATMANI: DevExpress köprüsü ===
bootstrap-external.bs5.min.css bu zinciri 246 kez okur. Bootstrap 4
teması bunları tanımlamaz, dolayısıyla burada tanımlamak güvenlidir. */
--bs-primary: #004891;
--primary: #004891;
--bs-primary-rgb: 0, 72, 145;
/* --- GÖREV 1: bildirim (xaf-alert/toast) renkleri ---
KESİN NEDEN: _content/DevExpress.ExpressApp.Blazor/styles.css içinde
(~satır 7708) ".alert-info { background-color:
var(--dxds-color-content-info-default-rest, var(--bs-info)); }" kuralı
var (info/success/warning/danger'ın hepsi için aynı kalıp). Bu kural,
_Host.cshtml'de Yeti'nin (Bootstrap 4.5) bootstrap.min.css'inden SONRA
yüklendiğinden, Yeti'nin aynı özgüllükteki pastel ".alert-info"
kuralını (background-color:#def2f8) ezer. Ne "--dxds-color-content-
info-default-rest" ne de "--bs-info" hiçbir stil dosyasında (Yeti eski
Bootstrap 4 olduğu, site.css da yalnız --bs-primary tanımladığı için)
tanımlı olmadığından değişken zinciri çözülemez ve background-color
başlangıç değeri "transparent"e (canlı DOM'da ölçülen rgba(0,0,0,0))
düşer. Metin zaten DOM'daki "text-white" sınıfından (Yeti:
.text-white{color:#fff !important}) beyaz gelir — sorun yalnız
zemindedir. Eksik olan bu BS5 değişkenlerini burada tanımlıyoruz;
aşağıdaki açık seçiciler ise yükleme sırasından bağımsız ikinci bir
garanti katmanıdır. Renkler beyaz metinle ≥4.5:1 kontrast sağlar. */
--bs-info: var(--zk-azur); /* #0065A5 — beyazda 6.17:1 */
--bs-info-rgb: 0, 101, 165;
--bs-success: #146c43; /* koyu yeşil — beyazda 6.45:1 */
--bs-success-rgb: 20, 108, 67;
--bs-warning: #b45309; /* koyu amber (açık amber değil: beyaz yazı okunsun) — 5.02:1 */
--bs-warning-rgb: 180, 83, 9;
--bs-danger: #b91c1c; /* beyazda 6.47:1 */
--bs-danger-rgb: 185, 28, 28;
--bs-bg-opacity: 1;
}
/* ============================================================================
B KATMANI — Bootstrap 4'ün SABİT #008cba renklerini ezer
(seçiciler yeti/bootstrap.min.css taranarak çıkarıldı)
============================================================================ */
/* B1 — GLOBAL: dolu marka zemini + beyaz metin, ya da kendi (beyaz) zemini
üzerinde odak halkası/kenarlık. Her iki durumda da kontrast çevredeki
temadan bağımsızdır — ürün genelinde marka birliği sağlar. */
.btn-primary,
.badge-primary,
.bg-primary,
.progress-bar,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--zk-marka) !important;
border-color: var(--zk-marka);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
background-color: var(--zk-marka-koyu);
border-color: var(--zk-marka-koyu);
}
.btn-primary.disabled,
.btn-primary:disabled {
background-color: var(--zk-marka);
border-color: var(--zk-marka);
}
/* Onay kutusu ("Beni hatırla") — temada custom-control ile boyanıyor */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
background-color: var(--zk-marka);
border-color: var(--zk-marka);
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 .2rem rgba(0, 72, 145, .25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: var(--zk-marka);
}
.custom-range::-webkit-slider-thumb { background-color: var(--zk-marka); }
.custom-range::-moz-range-thumb { background-color: var(--zk-marka); }
.custom-range::-ms-thumb { background-color: var(--zk-marka); }
/* Metin alanları: kendi zemini her zaman beyaz (Bootstrap varsayılanı) —
bu yüzden odak halkası da güvenle GLOBAL yapılabilir. */
.form-control:focus,
.custom-select:focus {
border-color: var(--zk-marka);
box-shadow: 0 0 0 .2rem rgba(0, 72, 145, .25);
}
/* B2 — YALNIZ GİRİŞ EKRANI: bilinmeyen zemin üzerinde renkli metin.
Global ezilirse koyu Bootswatch temalarında (darkly, cyborg, slate…)
#004891 bağlantılar okunmaz hale gelirdi; bu yüzden kapsam dar tutulur. */
.logon-viewsite a,
.logon-viewsite .btn-link,
.logon-viewsite .text-primary { color: var(--zk-marka) !important; }
.logon-viewsite a:hover,
.logon-viewsite .btn-link:hover { color: var(--zk-marka-koyu) !important; }
.logon-viewsite .border-primary { border-color: var(--zk-marka) !important; }
.logon-viewsite .btn-outline-primary {
color: var(--zk-marka);
border-color: var(--zk-marka);
}
.logon-viewsite .btn-outline-primary:hover,
.logon-viewsite .btn-outline-primary:not(:disabled):not(.disabled):active {
background-color: var(--zk-marka);
border-color: var(--zk-marka);
color: #fff;
}
/* ============================================================================
C KATMANI — giriş ekranı yüzey sistemi
============================================================================ */
/* Zemin: body arka planı temadan SAYDAM geliyor; işletim sistemi koyu
moddayken sayfa simsiyah görünüyordu. html/body HER ZAMAN açık/markalı bir
yüzeyde kalsın — bu kural prefers-color-scheme'e bakmaz, dark mod dahil
hep aynı görünür. Oturum açıldıktan sonra uygulamanın kendi ekranları
zaten tüm görünür alanı opak yüzeyleriyle kaplar. */
html, body {
background-color: var(--zk-yuzey-2);
}
/* Giriş ekranı: body, XAF'ın giriş şablonunu (.logon-template-header)
barındırırken tam sayfa marka degradesi alır + çok hafif diyagonal doku.
:has() sayesinde yalnız oturum açma ekranında devrededir; oturum
açıldığında bu eleman DOM'dan kalkınca body yukarıdaki açık yüzeye döner. */
body:has(.logon-template-header) {
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 64px),
linear-gradient(160deg, var(--zk-lacivert-900) 0%, var(--zk-lacivert-700) 55%, var(--zk-azur) 100%);
background-attachment: fixed;
min-height: 100%;
}
/* Sayfa üstü marka şeridi: kendi zemini yok, sayfa degradesi doğrudan
arkasından görünür. */
.logon-template-header.card.card-header {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 32px 24px 8px;
}
/* Beyaz rozet KALDIRILDI: giriş ekranında logo doğrudan degrade üstünde,
beyaz varyantla görünür. Uygulama içi üst çubuktaki .header-logo (rozet +
renkli logo) yukarıdaki temel kuraldan etkilenmeye devam eder — ayrım bu
seçicinin ".logon-template-header" ile sınırlı olmasından gelir. */
.logon-template-header .header-logo {
background-image: url('../images/sentez-yatay-beyaz.svg?v=zk8');
background-color: transparent;
background-origin: content-box;
padding: 0;
border-radius: 0;
box-shadow: none;
width: 196px;
height: 40px;
}
/* Yerleşim (flex yönü/hizalama/padding) zk-demo-giris.css içinde yönetiliyor
(.logon-main-container'ı ve #zk-demo-giris'i ORTALAR, .logon-template-body
için de kenar boşluğunu belirler — o dosya bu CSS'ten SONRA yüklenir);
burada yalnız zemini şeffaf bırakıyoruz ki sayfa degradesi görünsün. */
.logon-template-body {
background: transparent;
}
.logon-main.card {
width: 100%;
max-width: var(--zk-genislik);
border: 1px solid var(--zk-kenarlik);
border-radius: var(--zk-r);
box-shadow: var(--zk-golge-4);
background: var(--zk-yuzey);
overflow: hidden;
flex: 0 0 auto; /* sütun flex'te büzülmesin (overflow:hidden min-height'ı sıfırlar) */
}
/* Kart başlığı (varsa) mürekkep renginde — form yalnız alan + düğme
içeriyorsa bu kural etkisizdir, zararsızdır. */
.logon-main.card .card-title,
.logon-main.card h1, .logon-main.card h2, .logon-main.card h3,
.logon-main.card h4, .logon-main.card h5 { color: var(--zk-murekkep); }
.logon-viewsite {
padding: 28px 24px 24px;
color: var(--zk-murekkep);
}
.logon-viewsite .form-control,
.logon-viewsite .dxbl-text-edit {
min-height: 44px;
font-size: 15px;
border-radius: 10px;
border: 1px solid var(--zk-kenarlik-guclu);
color: var(--zk-murekkep);
}
.logon-viewsite .form-control:focus,
.logon-viewsite .dxbl-text-edit:focus-within {
border-color: var(--zk-marka);
box-shadow: 0 0 0 3px rgba(0,101,165,.28);
outline: none;
}
.logon-viewsite .form-label,
.logon-viewsite label { color: var(--zk-murekkep-2); font-weight: 600; font-size: 13px; }
/* Birincil düğme: tam genişlik */
.logon-toolbar { border-top: 1px solid var(--zk-kenarlik); padding-top: 16px; margin-top: 4px; }
.logon-viewsite .logon-toolbar .btn-primary,
.logon-viewsite .btn-primary {
width: 100%;
min-height: 48px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
color: #fff; /* #004891 üzerinde beyaz: 8.99:1 (AAA) */
}
/* Tek tip odak halkası — klavye kullanıcısı her yerde aynı göstergeyi görür */
.logon-viewsite :focus-visible {
outline: 3px solid var(--zk-odak);
outline-offset: 2px;
}
/* Duyarlı: 480px altında kart iç boşluğu daralır, degrade dolu kalır.
(Dış kenar boşluğu zk-demo-giris.css'teki .logon-template-body kuralından
gelir — 16px, tüm genişliklerde sabit.) */
@media (max-width: 480px) {
.logon-viewsite { padding: 20px 16px; }
}
/* ============================================================================
GÖREV 1 — XAF bildirimleri (ShowViewStrategy.ShowMessage / .xaf-alert):
yukarıdaki :root değişkenleri (--bs-info/-success/-warning/-danger) çoğu
durumda zemini zaten düzeltir; burada AYRICA açık seçicilerle ikinci bir
garanti katmanı ekleniyor — DevExpress ileride yükleme sırasını veya
değişken adını değiştirirse bile zemin/köşe/gölge sabit kalsın.
Konum (.xaf-alerts-stack: position/bottom) buraya DOKUNULMADI — yalnız
okunabilirlik hedeflendi. Koyu Bootswatch temalarında da zararsızdır:
renkler dolu ve sabittir, çevredeki temaya bağımlı değildir.
============================================================================ */
.xaf-alert.alert-info,
.xaf-alert.alert-success,
.xaf-alert.alert-warning,
.xaf-alert.alert-danger {
border: 0;
border-radius: 10px;
box-shadow: var(--zk-golge-4);
color: #fff !important;
}
.xaf-alert.alert-info { background-color: var(--bs-info) !important; }
.xaf-alert.alert-success { background-color: var(--bs-success) !important; }
.xaf-alert.alert-warning { background-color: var(--bs-warning) !important; }
.xaf-alert.alert-danger { background-color: var(--bs-danger) !important; }
.xaf-alert .xaf-alert-message,
.xaf-alert .xaf-alert-title,
.xaf-alert .xaf-alert-button {
color: #fff !important;
}
/* ============================================================================
GÖREV 2 — DevExpress'in hazır şablonundaki tema/boyut seçici paneli
("Settings" düğmesi + açılan Size Mode / DevExpress Themes / Bootswatch
Themes paneli) kaldırıldı.
ARAŞTIRMA: DevExpress.ExpressApp.Blazor.v26.1.dll içinde belgelenmemiş
(XML doc'ta yok), dahili bir "ThemeSwitcher" bileşeni bulundu — bu,
"theme-settings" / "theme-button" / "settings-bar" / "themes-menu" CSS
sınıflarını koşulsuz üretiyor. IModelOptionsBlazor (Application Model >
Options) incelendi: FormStyle, RefreshViewOnTabFocus,
RestoreTabbedMdiLayout, ShowTabImage, UIType, VirtualScrollingEnabled —
hiçbiri bununla ilgili değil; ShowThemeSwitcher / EnableThemeSwitcher /
ThemeSwitcherVisible gibi bir toggle DLL'de yok. Program.cs / Startup.cs /
BlazorApplication.cs içinde de bu bileşeni açan/kapatan bir çağrı yok —
proje kodunda hiç referans edilmiyor, doğrudan DevExpress'in hazır
şablonundan geliyor. Desteklenen bir API/Model seçeneği BULUNAMADI; ürün
tek tema (Yeti) kullandığından panel CSS ile gizleniyor. Giriş sayfasında
da aynı düğme çıkarsa bu genel seçici onu da kapsar. */
.theme-settings,
.settings-bar {
display: none !important;
}
/* =====================================================================
SOL MENU (XAF gezinti agaci) — okunakli ve marka renkli
=====================================================================
SORUN: DevExpress'in kendi styles.css dosyasi, tiklanabilir menu
basliklarinin altini ciziyor:
.clickable-xaf-nav-item > a .xaf-nav-link { text-decoration: underline }
Bu uygulamada menu ogelerinin neredeyse tamami "tiklanabilir grup"
oldugundan menunun tamami alti cizili mavi baglanti listesi gibi
gorunuyordu (bicimlendirilmemis sayfa izlenimi). Ayrica ogelerde marka
rengi, uzerine gelme (hover) ve secili durum vurgusu yoktu.
COZUM: alt cizgi kaldirildi, renkler marka paletine baglandi, hover ve
secili durum icin belirgin ama sakin bir vurgu eklendi. */
.xaf-sidebar {
background: #ffffff;
border-right: 1px solid rgba(6, 34, 75, .10);
}
/* 1) Alt cizgiyi kaldir (DevExpress styles.css'i ezmek icin ayni ozgullukte + !important) */
.clickable-xaf-nav-item > a .xaf-nav-link,
.clickable-xaf-nav-item > div > a .xaf-nav-link,
.xaf-sidebar a .xaf-nav-link,
.xaf-sidebar a:hover .xaf-nav-link {
text-decoration: none !important;
}
/* 2) Oge metni: marka lacivertine yakin, okunakli */
.xaf-sidebar .xaf-nav-link,
.xaf-sidebar .dxbl-accordion-item-text-container,
.xaf-sidebar .dxbl-text {
color: var(--zk-lacivert-900);
font-weight: 500;
}
/* Alt grup basliklari (Vardiya Planlama, Raporlar ...) biraz daha belirgin */
.xaf-sidebar .dxbl-accordion-group-header .xaf-nav-link {
font-weight: 600;
}
/* 3) Uzerine gelince: hafif marka tonu */
.xaf-sidebar .xaf-nav-item > .dxbl-accordion-group-header:hover,
.xaf-sidebar .xaf-nav-item > div > .dxbl-accordion-group-header:hover {
background-color: rgba(0, 72, 145, .07);
}
.xaf-sidebar .xaf-nav-item:hover .xaf-nav-link,
.xaf-sidebar .xaf-nav-item:hover .dxbl-text {
color: var(--zk-marka);
}
/* 4) Secili oge: marka zemini + sol vurgu cubugu */
.xaf-sidebar .xaf-nav-item.dxbl-active > .dxbl-accordion-group-header,
.xaf-sidebar .xaf-nav-item.dxbl-active > div > .dxbl-accordion-group-header {
/* DevExpress'in kendi "active" zemini daha ozgul; marka tonunun gorunmesi icin !important */
background-color: rgba(0, 72, 145, .12) !important;
box-shadow: inset 3px 0 0 0 var(--zk-marka);
}
.xaf-sidebar .xaf-nav-item.dxbl-active .xaf-nav-link,
.xaf-sidebar .xaf-nav-item.dxbl-active .dxbl-text {
color: var(--zk-marka);
font-weight: 600;
}
/* 5) Simgeler: esit boyut, sakin ton; secili/hover'da tam opaklik */
.xaf-sidebar .xaf-nav-menu-item-icon {
width: 18px;
height: 18px;
opacity: .78;
}
.xaf-sidebar .xaf-nav-item:hover .xaf-nav-menu-item-icon,
.xaf-sidebar .xaf-nav-item.dxbl-active .xaf-nav-menu-item-icon {
opacity: 1;
}
/* 6) Arama kutusu ve ayirici: menuyle ayni sakin cizgi */
.xaf-sidebar .dxbl-text-edit,
.xaf-sidebar .dxbl-edit {
border-color: rgba(6, 34, 75, .16);
}
/* Govde yuzeyi — SAVUNMA KURALI.
_Host.cshtml icindeki satir ici kritik stil (acilis ekrani icin) "html, body"
secicisiyle koyu bir zemin verebiliyor ve satir ici