/* ========================================= BASE (Varsayılan proje stilleri) ========================================= */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } /* Eğer footer sabitse, Tabler ile çakışırsa bu margin'i azaltabilir/iptal edebilirsiniz */ body { margin-bottom: 60px; } /* ========================================= THEME SWITCH (Açık/Koyu füme seçimi) Kullanım: - - ========================================= */ /* Varsayılan (class verilmezse) */ :root { --sidebar-bg: #111827; --header-bg: #0b1220; --text-on-dark: rgba(255,255,255,.92); --text-muted-on-dark: rgba(255,255,255,.70); --hover-bg: rgba(255,255,255,.06); --active-bg: rgba(19,127,236,.20); --border-on-dark: rgba(255,255,255,.08); --usercard-bg: rgba(255,255,255,.05); --usercard-border: rgba(255,255,255,.10); } /* Koyu füme (daha siyah) */ body.theme-fume-dark { --sidebar-bg: #111827; --header-bg: #0b1220; --text-on-dark: rgba(255,255,255,.92); --text-muted-on-dark: rgba(255,255,255,.70); --hover-bg: rgba(255,255,255,.06); --active-bg: rgba(19,127,236,.20); --border-on-dark: rgba(255,255,255,.08); --usercard-bg: rgba(255,255,255,.05); --usercard-border: rgba(255,255,255,.10); } /* Açık füme (biraz daha açık) */ body.theme-fume-light { --sidebar-bg: #1f2937; --header-bg: #111827; --text-on-dark: rgba(255,255,255,.92); --text-muted-on-dark: rgba(255,255,255,.72); --hover-bg: rgba(255,255,255,.07); --active-bg: rgba(19,127,236,.22); --border-on-dark: rgba(255,255,255,.09); --usercard-bg: rgba(255,255,255,.06); --usercard-border: rgba(255,255,255,.12); } /* ========================================= SIDEBAR (exam-sidebar) ========================================= */ .exam-sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border-on-dark); } /* Sidebar brand yazıları */ .exam-sidebar .navbar-brand, .exam-sidebar .navbar-brand a, .exam-sidebar .navbar-brand .fw-bold { color: #ffffff !important; text-decoration: none; } /* Brand içindeki küçük avatar */ .exam-sidebar .navbar-brand .avatar.bg-primary-lt { background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } /* Menü linkleri */ .exam-sidebar .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.80) !important; } .exam-sidebar .navbar-nav .nav-link .nav-link-icon, .exam-sidebar .navbar-nav .nav-link svg { color: rgba(255, 255, 255, 0.72) !important; } /* Hover */ .exam-sidebar .navbar-nav .nav-link:hover { background: var(--hover-bg); color: #ffffff !important; border-radius: 8px; } .exam-sidebar .navbar-nav .nav-link:hover svg { color: #ffffff !important; } /* Active */ .exam-sidebar .navbar-nav .nav-link.active { background: var(--active-bg); color: #ffffff !important; border-radius: 8px; } .exam-sidebar .navbar-nav .nav-link.active svg { color: #ffffff !important; } /* Sidebar alt kullanıcı kartı */ .exam-sidebar .card.card-sm { background: var(--usercard-bg); border: 1px solid var(--usercard-border); } .exam-sidebar .card.card-sm .fw-semibold { color: #ffffff !important; } .exam-sidebar .card.card-sm .text-secondary { color: rgba(255, 255, 255, 0.65) !important; } /* Sidebar scrollbar */ .exam-sidebar ::-webkit-scrollbar { width: 8px; } .exam-sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; } .exam-sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); } /* ========================================= HEADER (exam-header) - Sticky + boşluk fix ========================================= */ .exam-header { background: var(--header-bg); border-bottom: 1px solid var(--border-on-dark); position: sticky; top: 0; z-index: 1030; margin: 0; border-radius: 0; min-height: 64px; } /* DataTables/Bootstrap bazen navbar altına boşluk bırakabiliyor */ .exam-header.navbar { margin-bottom: 0 !important; } /* Header ile wrapper arasında olası boşluklar */ .page-wrapper > .exam-header { margin-top: 0 !important; } /* Page, wrapper, sidebar üst padding/margin sıfır */ .page, .page-wrapper, .navbar-vertical { margin-top: 0 !important; padding-top: 0 !important; } /* Header ortalı başlık */ .exam-header-title { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; color: #ffffff; font-weight: 800; letter-spacing: .3px; font-size: 1.15rem; text-shadow: 0 1px 12px rgba(0,0,0,.55); max-width: 65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Header ikonlar/linkler */ .exam-header .nav-link, .exam-header svg, .exam-header .icon { color: var(--text-on-dark) !important; } .exam-header .nav-link:hover { background: rgba(255,255,255,.08); border-radius: 8px; color: #ffffff !important; } /* Mobilde başlık taşmasın */ @media (max-width: 768px) { .exam-header-title { font-size: 1rem; max-width: 55%; } } /* ========================================= PAGE SPACING (Header ile içerik arası) ========================================= */ .page-header { margin-bottom: .75rem !important; padding-top: .75rem !important; } .page-body { padding-top: .75rem !important; } /* ========================================= DATATABLES (Tabler görünümüne uyum) ========================================= */ /* DataTables üst alanları biraz yumuşat */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { margin-top: .25rem; } /* DataTables arama inputu Tabler form-control gibi dursun */ .dataTables_wrapper .dataTables_filter input { border-radius: 6px; } /* DataTables select Tabler form-select gibi dursun */ .dataTables_wrapper .dataTables_length select { border-radius: 6px; } /* ========================================= (Opsiyonel) Sayfa arka planını da füme yapmak İsterseniz açabilirsiniz: ========================================= */ /* body.theme-fume-dark .page-body { background: #0f172a; } body.theme-fume-light .page-body { background: #111827; } */