/* ========================================================================== MUZAI Admin — "Tabler" teması (public/css/themes/tabler.css) ========================================================================== NE? Filament v4'ün ÖNCEDEN DERLENMİŞ stiline (vendor/filament/filament/dist/ theme.css) sonradan yüklenen, derleme adımı olmayan, elle yazılmış bir kaplama. Görsel dil: preview.tabler.io — açık gri-mavi sayfa zemini, 4px köşeli beyaz kartlar, 1px #e6e7e9 kenarlık + neredeyse görünmez gölge, sıkı boşluklar, Tabler mavisi (#206bc4), koyu (#182433) kenar çubuğu, beyaz üst çubuk. Karanlık mod: Tabler'ın koyu paleti (#1a2234 sayfa, #182433 kart, #263041 kenarlık). Renk ve ölçü değerleri Tabler'dan (MIT). NEREDEN YÜKLENİR? PHP tarafı içinde Filament'in CSS'inden SONRA basar. NEDEN !important YOK? Filament'in stili baştan sona @layer (theme/base/components/utilities) içinde. Katmansız (unlayered) bir stil sayfası, özgüllüğü ne olursa olsun katmanlı kuralların ÖNÜNE geçer. Bu yüzden burada aynı ya da daha düşük özgüllükle yazılan her kural kazanır; !important'a gerek kalmaz. DİKKAT (aynı sebeple): buradaki geniş bir kural (ör. .fi-btn{padding}) Filament'in daha özgül varyantını da (.fi-btn.fi-size-sm) ezer. O yüzden varyantı olan özellikler (padding, renk) ya varyant seçicisiyle yazıldı ya da :not(.fi-color) gibi dışlamalarla daraltıldı. SÖZLEŞME (PHP tarafı garanti eder) - İstatistik kartı kökü: .fi-wi-stats-overview-stat[data-tone= primary|success|warning|danger|info|gray] - İçinde: .fi-wi-stats-overview-stat-label-ctn (isteğe bağlı svg.fi-icon + span.fi-wi-stats-overview-stat-label), ...-value, ...-description (fi-color- sınıfı + kendi svg.fi-icon'u). Bazı kartlarda .fi-wi-stats-overview-stat-chart canvas'ı da olur. - Geri kalan her şey standart Filament v4 işaretlemesi. - Renk ölçekleri: Filament :root'ta --primary-50..950, --gray-*, --success-*, --danger-*, --warning-*, --info-* tanımlar ve .fi-color- sınıfı bunları --color-* olarak bileşene aktarır. Bu dosya AYNI kapsamda (:root) ölçekleri yeniden tanımlar; böylece düğme, aktif menü, rozet, odak halkası, onay kutusu, grafik rengi... hepsi tek yerden Tabler mavisine döner. TUZAKLAR / NOTLAR - Font: CSP font-src 'self' data: — dış font yok. Filament'in yüklediği 'Inter Variable' kullanılır; Tabler'ın kullandığı cv03/cv04/cv11 OpenType özellikleri açıldı. - Yarıçaplar: Filament her yerde --radius-md/lg/xl kullanır; üçü de :root'ta .25rem yapıldı (Tabler'ın tek 4px yarıçapı). Tek satırla tüm bileşenler. - Kart kenarlığı gerçek border değil box-shadow halkası: kutu ölçüsü değişmez, Filament'in yerleşimi bozulmaz. - Düğme/giriş odak halkaları Filament'in --tw-ring-* değişkenleriyle çizilir; bu yüzden buralarda box-shadow'u doğrudan EZMEDİM, yalnızca --tw-ring-color ve --tw-shadow değişkenlerini değiştirdim. Aksi hâlde odak halkası kaybolur. - Marka alanı: Filament üst çubukta (topbar) logoyu gösterir, kenar çubuğu başlığını gizler. Tabler'daki "logo koyu kenar çubuğunun tepesinde" görünümü için ≥64rem'de .fi-topbar-start kenar çubuğu genişliğinde koyu bir blok yapıldı; logonun yazı kısmı currentColor olduğu için beyaza döner. - Kenar çubuğu her iki modda da koyu; Filament'in .dark kuralları :where(.dark) ile sıfır özgüllüklü olduğu için buradaki kurallar ikisini de kapsar. - Mobil (<64rem): .fi-main / .fi-sidebar genişliğine dokunulmadı; kenar çubuğu Filament'in çekmece davranışıyla çalışır. ========================================================================== */ /* -------------------------------------------------------------------------- 0) TOKENLAR -------------------------------------------------------------------------- */ :root { /* Tabler ölçüleri */ --t-radius: .25rem; --sidebar-width: 15rem; --radius-md: .25rem; --radius-lg: .25rem; --radius-xl: .25rem; /* Yüzeyler / metin (açık mod) */ --t-page: #f1f5f9; --t-card: #ffffff; --t-thead: #f8fafc; --t-hover: #f6f8fb; --t-border: #e6e7e9; --t-border-strong: #d5dbe3; --t-input-bg: #ffffff; --t-text: #1a2234; --t-muted: #66738a; --t-shadow: 0 1px 2px 0 rgba(24, 36, 51, .04); --t-shadow-sm: 0 1px 1px 0 rgba(24, 36, 51, .04); --t-shadow-lg: 0 8px 24px rgba(24, 36, 51, .10); /* Koyu kenar çubuğu (her iki modda) */ --t-sidebar: #182433; --t-sidebar-text: rgba(255, 255, 255, .78); --t-sidebar-icon: rgba(255, 255, 255, .62); --t-sidebar-muted: rgba(255, 255, 255, .55); --t-sidebar-hover: rgba(255, 255, 255, .06); --t-sidebar-active: rgba(255, 255, 255, .09); --t-sidebar-line: rgba(255, 255, 255, .07); /* Birincil: Tabler mavisi (#206bc4 = 600, düğme/aktif durum) */ --primary-50: #eef4fc; --primary-100: #dbe7f8; --primary-200: #b8cff1; --primary-300: #9dbfec; --primary-400: #6ea0e0; --primary-500: #2f7ad0; --primary-600: #206bc4; --primary-700: #1b5aa5; --primary-800: #174a87; --primary-900: #133c6d; --primary-950: #0c2749; /* Gri: Tabler slate tonları; 950 açık modda gövde metni, koyu modda sayfa */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e6e7e9; --gray-300: #d3d8de; --gray-400: #8a95a6; --gray-500: #66738a; --gray-600: #4b5670; --gray-700: #313c52; --gray-800: #263041; --gray-900: #182433; --gray-950: #1a2234; /* Başarı: Tabler yeşili #2fb344 */ --success-50: #eef9ef; --success-100: #d8f1db; --success-200: #b0e3b7; --success-300: #82d38d; --success-400: #52c264; --success-500: #2fb344; --success-600: #279a3a; --success-700: #1f7f30; --success-800: #1a6828; --success-900: #155521; --success-950: #0b3414; /* Tehlike: Tabler kırmızısı #d63939 */ --danger-50: #fcf0f0; --danger-100: #f8dada; --danger-200: #f1b5b5; --danger-300: #ec9494; --danger-400: #e57373; --danger-500: #d63939; --danger-600: #c02d2d; --danger-700: #a02626; --danger-800: #841f1f; --danger-900: #6b1a1a; --danger-950: #420f0f; /* Uyarı: Tabler turuncusu #f76707 */ --warning-50: #fff3e8; --warning-100: #fee4cc; --warning-200: #fdc89a; --warning-300: #fba766; --warning-400: #f98636; --warning-500: #f76707; --warning-600: #dc5a05; /* Ölçüldü: #b84b04 üzerinde %12 turuncu tint bulunan rozet zemininde 3,95:1 kalıyordu — 12px metin için AA sınırı 4,5. Bir kademe koyultuldu (ölçüm: 4,84:1); koyu modda zaten 700 kullanılmıyor. */ --warning-700: #97400a; --warning-800: #963d04; --warning-900: #7a3204; --warning-950: #4b1e02; /* Bilgi: Tabler azure #4299e1 (600/700 AA için koyulaştırıldı) */ --info-50: #eef6fd; --info-100: #d9ebfa; --info-200: #b3d6f4; --info-300: #8cc1ee; --info-400: #66ade8; --info-500: #4299e1; --info-600: #1b6fb8; --info-700: #175e9c; --info-800: #144e80; --info-900: #113f68; --info-950: #0b2942; } .dark { --t-page: #1a2234; --t-card: #182433; --t-thead: rgba(255, 255, 255, .03); --t-hover: rgba(255, 255, 255, .04); --t-border: #263041; --t-border-strong: #2f3b4f; --t-input-bg: #1a2234; --t-text: #ffffff; --t-muted: #9aa5b5; --t-shadow: 0 1px 2px 0 rgba(0, 0, 0, .25); --t-shadow-sm: 0 1px 1px 0 rgba(0, 0, 0, .25); --t-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45); } /* -------------------------------------------------------------------------- 1) GÖVDE / YERLEŞİM -------------------------------------------------------------------------- */ html.fi { background-color: var(--t-page); } .fi-body { background-color: var(--t-page); color: var(--t-text); font-feature-settings: "cv03", "cv04", "cv11"; } .fi-main { padding-inline: 1.5rem; } @media (max-width: 40rem) { .fi-main { padding-inline: 1rem; } } .fi-page-header-main-ctn { row-gap: 1.25rem; padding-block: 1.25rem 1.5rem; } .fi-page-content { row-gap: 1.25rem; } /* Pano ızgarası ve istatistik kartı ızgarası daha sıkı (formlara dokunma) */ .fi-page-content > .fi-sc.fi-sc-has-gap:not(.fi-sc-dense), .fi-wi-stats-overview > .fi-sc.fi-sc-has-gap:not(.fi-sc-dense) { gap: 1.25rem; } /* -------------------------------------------------------------------------- 2) ÜST ÇUBUK (topbar) -------------------------------------------------------------------------- */ .fi-topbar { min-height: 4rem; padding-inline: 1rem 1.25rem; background-color: var(--t-card); box-shadow: 0 1px 0 0 var(--t-border); } .fi-topbar-end { column-gap: .75rem; } /* Marka bloğu: ≥64rem'de logo, kenar çubuğu genişliğinde koyu bir alana oturur */ @media (min-width: 64rem) { .fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar > .fi-topbar-start { flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); align-self: stretch; margin-inline: -1rem 1.25rem; padding-inline: 1.25rem; background-color: var(--t-sidebar); /* üst çubuğun 1px alt çizgisini marka bloğunun altında koyuyla kapat */ box-shadow: 0 1px 0 0 var(--t-sidebar); } .fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar > .fi-topbar-start .fi-logo { margin-inline-start: 0; color: #fff; } } .fi-topbar .fi-logo { color: var(--t-text); } /* Genel arama */ .fi-topbar .fi-global-search-field .fi-input-wrp { background-color: var(--t-input-bg); } .fi-topbar .fi-global-search-field .fi-input { min-width: 14rem; } .fi-global-search-results-ctn { border-radius: var(--t-radius); background-color: var(--t-card); box-shadow: 0 0 0 1px var(--t-border), var(--t-shadow-lg); } .fi-global-search-result-group-header { border-color: var(--t-border); background-color: var(--t-thead); color: var(--t-muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .fi-global-search-result:hover, .fi-global-search-result:focus-within { background-color: var(--t-hover); } .fi-global-search-result-heading { color: var(--t-text); } .fi-global-search-result-detail, .fi-global-search-no-results-message { color: var(--t-muted); } /* Kullanıcı menüsü tetikleyicisi */ .fi-user-menu-trigger { padding: .25rem; border-radius: 999px; } .fi-user-menu-trigger:hover { background-color: var(--t-hover); } .fi-topbar .fi-user-avatar { box-shadow: 0 0 0 1px var(--t-border); } /* Üst gezinti (top navigation modu kullanılırsa) */ .fi-topbar-item-btn { border-radius: var(--t-radius); } .fi-topbar-item-btn:hover, .fi-topbar-item-btn:focus-visible, .fi-topbar-item.fi-active .fi-topbar-item-btn { background-color: var(--t-hover); } .fi-topbar-item-label { color: var(--t-text); } .fi-topbar-item.fi-active .fi-topbar-item-label { color: var(--primary-600); } /* -------------------------------------------------------------------------- 3) KENAR ÇUBUĞU (her iki modda koyu) -------------------------------------------------------------------------- */ .fi-sidebar { background-color: var(--t-sidebar); color: var(--t-sidebar-text); } @media (min-width: 64rem) { .fi-sidebar.fi-sidebar-open { box-shadow: inset -1px 0 0 var(--t-sidebar-line); } } @media (max-width: 63.999rem) { .fi-sidebar.fi-sidebar-open { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .35); } } .fi-body-has-topbar .fi-sidebar-header { background-color: var(--t-sidebar); box-shadow: none; } .fi-sidebar-header .fi-logo { color: #fff; } .fi-sidebar-nav { row-gap: 1.25rem; padding: .75rem .75rem 1.5rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .fi-sidebar-nav-groups { row-gap: 1.25rem; margin-inline: 0; } .fi-sidebar-group, .fi-sidebar-group-items, .fi-sidebar-sub-group-items { row-gap: .125rem; } /* Grup başlığı: küçük, büyük harf, soluk */ .fi-sidebar-group-btn { column-gap: .5rem; padding: .25rem .75rem; } .fi-sidebar-group-label { font-size: .6875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-sidebar-muted); } .fi-sidebar-group-btn .fi-icon, .fi-sidebar-group-dropdown-trigger-btn .fi-icon { color: var(--t-sidebar-muted); } .fi-sidebar-group-collapse-btn { color: var(--t-sidebar-muted); border-radius: var(--t-radius); } .fi-sidebar-group-collapse-btn:hover, .fi-sidebar-group-collapse-btn:focus-visible { background-color: var(--t-sidebar-hover); color: #fff; } .fi-sidebar-group-dropdown-trigger-btn:hover, .fi-sidebar-group-dropdown-trigger-btn:focus-visible { background-color: var(--t-sidebar-hover); } /* Menü öğesi */ .fi-sidebar-item-btn { column-gap: .625rem; padding: .4375rem .75rem; border-radius: var(--t-radius); } .fi-sidebar-item-btn > .fi-icon { width: 1.25rem; height: 1.25rem; color: var(--t-sidebar-icon); } .fi-sidebar-item-label { font-weight: 500; color: var(--t-sidebar-text); } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background-color: var(--t-sidebar-hover); } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-icon, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label { color: #fff; } .fi-sidebar-item-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; } /* Aktif öğe: hafif açık zemin + solda mavi şerit */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--t-sidebar-active); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { content: ""; position: absolute; inset-block: .375rem; inset-inline-start: 0; width: 3px; border-radius: 0 2px 2px 0; background-color: var(--primary-400); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: #fff; } .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon { color: var(--primary-400); } /* Alt öğe bağlantı çizgileri (gruplu öğeler) */ .fi-sidebar-item-grouped-border-part { background-color: rgba(255, 255, 255, .28); } .fi-sidebar-item-grouped-border-part-not-first, .fi-sidebar-item-grouped-border-part-not-last { background-color: rgba(255, 255, 255, .14); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: var(--primary-400); } /* Kenar çubuğu rozetleri */ .fi-sidebar .fi-badge { box-shadow: none; background-color: rgba(255, 255, 255, .12); color: #fff; } .fi-sidebar .fi-badge.fi-color { background-color: color-mix(in oklab, var(--color-500) 28%, transparent); color: var(--color-200); } /* Kenar çubuğu içindeki genel arama ve alt bilgi */ .fi-sidebar .fi-input-wrp { background-color: rgba(255, 255, 255, .06); --tw-ring-color: rgba(255, 255, 255, .12); } .fi-sidebar .fi-input, .fi-sidebar .fi-input::placeholder { color: rgba(255, 255, 255, .85); } .fi-sidebar .fi-input-wrp .fi-icon { color: var(--t-sidebar-icon); } .fi-sidebar-database-notifications-btn { color: var(--t-sidebar-text); border-radius: var(--t-radius); } .fi-sidebar-database-notifications-btn:hover { background-color: var(--t-sidebar-hover); } /* -------------------------------------------------------------------------- 4) SAYFA BAŞLIĞI -------------------------------------------------------------------------- */ .fi-header-heading { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.01em; color: var(--t-text); } .fi-header-subheading { margin-top: .125rem; font-size: .875rem; line-height: 1.25rem; color: var(--t-muted); } /* Ekmek kırıntısı: Tabler "pretitle" gibi küçük, büyük harf */ .fi-header .fi-breadcrumbs { margin-bottom: .25rem; } .fi-breadcrumbs ol li { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); } .fi-breadcrumbs ol li a:hover { color: var(--t-text); } .fi-header-actions-ctn { gap: .5rem; } /* -------------------------------------------------------------------------- 5) KARTLAR / BÖLÜMLER / WIDGET IZGARASI -------------------------------------------------------------------------- */ .fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-sc-actions.fi-sticky .fi-ac { border-radius: var(--t-radius); background-color: var(--t-card); box-shadow: 0 0 0 1px var(--t-border), var(--t-shadow); } .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary, .fi-section:not(.fi-section-not-contained).fi-aside.fi-secondary > .fi-section-content-ctn { background-color: var(--t-page); } .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-compact) > .fi-section-header { padding: .875rem 1.25rem; } .fi-section:not(.fi-section-not-contained).fi-compact:not(.fi-aside) > .fi-section-header { padding: .625rem 1rem; } .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn, .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer { border-color: var(--t-border); } .fi-section:not(.fi-section-not-contained):not(.fi-compact):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content, .fi-section:not(.fi-section-not-contained):not(.fi-compact).fi-divided > .fi-section-content-ctn > .fi-section-content > * { padding: 1.25rem; } .fi-section:not(.fi-section-not-contained):not(.fi-compact) > .fi-section-content-ctn > .fi-section-footer { padding: .75rem 1.25rem; } .fi-section .fi-section-header-heading { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--t-text); } .fi-section .fi-section-header-description { color: var(--t-muted); } .fi-section > .fi-section-header > .fi-icon { color: var(--t-muted); } /* Hesap widget'ı (Hoş geldin) */ .fi-account-widget-heading { color: var(--t-text); } .fi-account-widget-user-name { color: var(--t-muted); } /* -------------------------------------------------------------------------- 6) İSTATİSTİK KARTLARI (data-tone sözleşmesi) -------------------------------------------------------------------------- */ .fi-wi-stats-overview-stat { --tone-400: var(--gray-400); --tone-500: var(--gray-500); --tone-600: var(--gray-600); --tone-700: var(--gray-700); --tone-tile: var(--tone-600); --tone-tile-fg: #fff; --tone-soft: color-mix(in oklab, var(--tone-500) 12%, transparent); --tone-text: var(--tone-700); padding: 1rem 1.25rem; } .fi-wi-stats-overview-stat[data-tone="primary"] { --tone-400: var(--primary-400); --tone-500: var(--primary-500); --tone-600: var(--primary-600); --tone-700: var(--primary-700); } .fi-wi-stats-overview-stat[data-tone="success"] { --tone-400: var(--success-400); --tone-500: var(--success-500); --tone-600: var(--success-600); --tone-700: var(--success-700); } .fi-wi-stats-overview-stat[data-tone="warning"] { --tone-400: var(--warning-400); --tone-500: var(--warning-500); --tone-600: var(--warning-600); --tone-700: var(--warning-700); } .fi-wi-stats-overview-stat[data-tone="danger"] { --tone-400: var(--danger-400); --tone-500: var(--danger-500); --tone-600: var(--danger-600); --tone-700: var(--danger-700); } .fi-wi-stats-overview-stat[data-tone="info"] { --tone-400: var(--info-400); --tone-500: var(--info-500); --tone-600: var(--info-600); --tone-700: var(--info-700); } .dark .fi-wi-stats-overview-stat { --tone-tile: var(--tone-500); --tone-soft: color-mix(in oklab, var(--tone-500) 18%, transparent); --tone-text: var(--tone-400); } .dark .fi-wi-stats-overview-stat[data-tone="gray"] { --tone-tile: var(--gray-600); } .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-content { row-gap: .375rem; } /* Etiket satırı: solda küçük renkli kare ikon (yoksa yerleşim bozulmaz) */ .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn { column-gap: .75rem; min-height: 2.25rem; } .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon { width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: var(--t-radius); background-color: var(--tone-tile); color: var(--tone-tile-fg); } .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label { font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); } .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--t-text); } /* Açıklama: rozet gibi, tonun soluk zemini */ .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description { display: inline-flex; width: fit-content; max-width: 100%; column-gap: .375rem; margin-top: .125rem; padding: .125rem .5rem; border-radius: var(--t-radius); font-size: .75rem; line-height: 1.25rem; font-weight: 500; background-color: var(--tone-soft); color: var(--tone-text); } .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description .fi-icon { width: 1rem; height: 1rem; color: var(--tone-500); } /* Mini grafik alanı */ .fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-chart) { padding-bottom: 2.5rem; } .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart { border-bottom-right-radius: var(--t-radius); border-bottom-left-radius: var(--t-radius); } /* -------------------------------------------------------------------------- 7) GRAFİK WIDGET'I -------------------------------------------------------------------------- */ .fi-wi-chart .fi-wi-chart-grid-color { color: var(--t-border); } .fi-wi-chart .fi-wi-chart-text-color { color: var(--t-muted); } /* -------------------------------------------------------------------------- 8) TABLOLAR -------------------------------------------------------------------------- */ .fi-ta-ctn .fi-ta-header { padding: .875rem 1.25rem; border-color: var(--t-border); } .fi-ta-ctn .fi-ta-header .fi-ta-header-heading { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--t-text); } .fi-ta-ctn .fi-ta-header .fi-ta-header-description { color: var(--t-muted); } .fi-ta-ctn .fi-ta-header-toolbar, .fi-ta-ctn .fi-ta-filters-above-content-ctn, .fi-ta-ctn .fi-ta-filters.fi-ta-filters-below-content, .fi-ta-ctn .fi-ta-reorder-indicator { padding-inline: 1.25rem; border-color: var(--t-border); } .fi-ta-ctn .fi-ta-header-toolbar { padding-block: .625rem; } .fi-ta-ctn .fi-ta-reorder-indicator { background-color: var(--t-thead); } /* Başlık satırı: açık zemin, küçük büyük harf */ .fi-ta-table > thead > tr { background-color: var(--t-thead); } .fi-ta-table > thead > tr.fi-ta-table-head-groups-row { background-color: var(--t-hover); } .fi-ta-header-cell { padding: .5rem .75rem; font-size: .75rem; line-height: 1.25rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); } .fi-ta-header-cell:first-of-type { padding-inline-start: 1.25rem; } .fi-ta-header-cell:last-of-type { padding-inline-end: 1.25rem; } .fi-ta-header-cell.fi-ta-header-cell-sorted, .fi-ta-header-cell.fi-ta-header-cell-sorted .fi-icon { color: var(--t-text); } /* 1px satır ayraçları */ .fi-ta-table > :not(:last-child), .fi-ta-table > thead > :not(:last-child), .fi-ta-table > tbody > :not(:last-child) { border-color: var(--t-border); } .fi-ta-table > tfoot { background-color: var(--t-thead); } /* Hücreler: sıkı dikey boşluk */ .fi-ta-cell:first-of-type, .fi-ta-cell.fi-ta-summary-row-heading-cell:first-of-type, .fi-ta-cell.fi-ta-summary-header-cell:first-of-type { padding-inline-start: 1.25rem; } .fi-ta-cell:last-of-type, .fi-ta-cell.fi-ta-summary-row-heading-cell:last-of-type { padding-inline-end: 1.25rem; } .fi-ta-text:not(.fi-inline) { padding: .5rem .75rem; } .fi-ta-cell .fi-ta-icon, .fi-ta-cell .fi-ta-image, .fi-ta-cell .fi-ta-color, .fi-ta-cell .fi-ta-toggle, .fi-ta-cell .fi-ta-checkbox, .fi-ta-cell .fi-ta-select, .fi-ta-cell .fi-ta-text-input { padding-block: .5rem; } .fi-ta-cell:has(.fi-ta-actions), .fi-ta-cell:has(.fi-ta-record-checkbox), .fi-ta-cell.fi-ta-selection-cell, .fi-ta-cell.fi-ta-summary-row-heading-cell { padding-block: .5rem; } .fi-ta-text-item { color: var(--t-text); } .fi-ta-text > .fi-ta-text-description, .fi-ta-text > .fi-ta-text-list-limited-message, .fi-ta-cell .fi-ta-placeholder { color: var(--t-muted); } /* Satır durumları */ .fi-ta-table > tbody > .fi-ta-row:hover { background-color: var(--t-hover); } .fi-ta-table > tbody > .fi-ta-row.fi-selected { background-color: color-mix(in oklab, var(--primary-500) 8%, transparent); } .fi-ta-table > tbody > .fi-ta-row.fi-clickable { cursor: pointer; } .fi-ta-row .fi-ta-group-header .fi-ta-group-heading { color: var(--t-text); } /* Boş durum */ .fi-ta-empty-state { padding: 3rem 1.5rem; } .fi-ta-empty-state:not(.fi-ta-ctn-with-content-layout .fi-ta-empty-state) { border-color: var(--t-border); } .fi-ta-empty-state .fi-ta-empty-state-icon-bg { background-color: var(--t-page); } .fi-ta-empty-state .fi-ta-empty-state-icon-bg .fi-icon { color: var(--t-muted); } .fi-ta-empty-state .fi-ta-empty-state-heading { color: var(--t-text); } .fi-ta-empty-state .fi-ta-empty-state-description { color: var(--t-muted); } /* Sayfalama */ .fi-pagination .fi-pagination-items { border-radius: var(--t-radius); background-color: var(--t-card); box-shadow: 0 0 0 1px var(--t-border-strong); } .fi-pagination .fi-pagination-item { border-color: var(--t-border); } .fi-pagination .fi-pagination-item:first-of-type .fi-pagination-item-btn { border-start-start-radius: var(--t-radius); border-end-start-radius: var(--t-radius); } .fi-pagination .fi-pagination-item:last-of-type .fi-pagination-item-btn { border-start-end-radius: var(--t-radius); border-end-end-radius: var(--t-radius); } .fi-pagination .fi-pagination-item-btn .fi-pagination-item-label { font-weight: 500; color: var(--t-text); } .fi-pagination .fi-pagination-item-btn:enabled:hover { background-color: var(--t-hover); } .fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-btn { background-color: var(--primary-600); } .fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label { color: #fff; } .fi-pagination .fi-pagination-item.fi-disabled .fi-pagination-item-label { color: var(--t-muted); } .fi-pagination .fi-pagination-overview { font-weight: 400; color: var(--t-muted); } /* -------------------------------------------------------------------------- 9) ROZETLER -------------------------------------------------------------------------- */ .fi-badge { border-radius: var(--t-radius); box-shadow: none; font-weight: 500; letter-spacing: 0; } .fi-badge:not(.fi-color) { background-color: color-mix(in oklab, var(--gray-500) 12%, transparent); color: var(--t-text); } .fi-badge.fi-color { background-color: color-mix(in oklab, var(--color-500) 11%, transparent); } /* -------------------------------------------------------------------------- 10) DÜĞMELER -------------------------------------------------------------------------- */ .fi-btn { border-radius: var(--t-radius); font-weight: 500; } /* Gri (ikincil) düğme: beyaz zemin + 1px kenarlık, düz */ .fi-btn:not(.fi-color), label.fi-btn { --tw-ring-color: var(--t-border-strong); --tw-shadow: var(--t-shadow-sm); } .fi-btn:not(.fi-outlined):not(.fi-color) { background-color: var(--t-card); color: var(--t-text); } .fi-btn:not(.fi-outlined):not(.fi-color):not(.fi-disabled):not([disabled]):hover { background-color: var(--t-hover); } /* Renkli dolu düğme. DİKKAT: Filament düğmenin zemin/metin tonunu PHP'de, panelin PHP'de tanımlı (kehribar) paletine göre kontrastla hesaplayıp fi-bg-color-400 / fi-text-color-950 gibi sınıflar basar. Mavi palette bu "açık zemin + koyu yazı" sonucu yanlış görünür; o yüzden sınıfların yazdığı --bg/--text değişkenleri burada ezilir: 600 zemin + beyaz yazı, hover bir ton koyu (Tabler), koyu modda hover bir ton açık. Beyaz yazı AA (4.5:1) tutmadığı için yeşil ve turuncu 700'e çekildi. */ .fi-btn:not(.fi-outlined).fi-color:not(label) { --bg: var(--color-600); --hover-bg: var(--color-700); --text: #fff; --hover-text: #fff; --dark-bg: var(--color-600); --dark-hover-bg: var(--color-500); --dark-text: #fff; --dark-hover-text: #fff; --tw-shadow: var(--t-shadow-sm); } .fi-btn:not(.fi-outlined).fi-color.fi-color-success:not(label), .fi-btn:not(.fi-outlined).fi-color.fi-color-warning:not(label) { --bg: var(--color-700); --hover-bg: var(--color-800); --dark-bg: var(--color-700); --dark-hover-bg: var(--color-600); } /* Çerçeveli düğme: yazı 700 (beyaz zeminde tüm tonlar AA), koyu modda 400 */ .fi-btn.fi-outlined { --tw-shadow: 0 0 #0000; color: var(--t-text); } .fi-btn.fi-outlined:not(.fi-color) { --tw-ring-color: var(--t-border-strong); } .fi-btn.fi-outlined.fi-color { color: var(--color-700); --tw-ring-color: var(--color-600); } .fi-btn.fi-outlined.fi-color > .fi-icon { color: var(--color-600); } .dark .fi-btn.fi-outlined.fi-color { color: var(--color-400); } .fi-btn.fi-outlined:not(.fi-disabled):not([disabled]):hover { background-color: var(--t-hover); } .fi-btn.fi-outlined.fi-color:not(.fi-disabled):not([disabled]):hover { background-color: color-mix(in oklab, var(--color-500) 9%, transparent); } .fi-btn-group { border-radius: var(--t-radius); --tw-ring-color: var(--t-border-strong); --tw-shadow: var(--t-shadow-sm); } .fi-btn-group > .fi-btn:nth-child(1 of .fi-btn) { border-start-start-radius: var(--t-radius); border-end-start-radius: var(--t-radius); } .fi-btn-group > .fi-btn:nth-last-child(1 of .fi-btn) { border-start-end-radius: var(--t-radius); border-end-end-radius: var(--t-radius); } /* İkon düğmesi */ .fi-icon-btn { border-radius: var(--t-radius); color: var(--t-muted); } .fi-icon-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover, .fi-icon-btn:not(.fi-color):not(.fi-disabled):not([disabled]):focus-visible { background-color: var(--t-hover); color: var(--t-text); } /* Bağlantı düğmesi */ .fi-link:not(.fi-color) { color: var(--t-text); } .fi-link:not(.fi-color):hover { color: var(--primary-600); } .fi-link.fi-color:hover { text-decoration: underline; text-underline-offset: 3px; } /* Klavye odağı: Filament halka çizmeyen yerlerde görünür kontur */ .fi-icon-btn:focus-visible, .fi-link:focus-visible, .fi-user-menu-trigger:focus-visible, .fi-theme-switcher-btn:focus-visible, .fi-dropdown-list-item:focus-visible, .fi-tabs-item:focus-visible, .fi-topbar-item-btn:focus-visible, .fi-ta-header-cell-sort-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; } /* -------------------------------------------------------------------------- 11) FORM GİRİŞLERİ -------------------------------------------------------------------------- */ .fi-input-wrp { border-radius: var(--t-radius); background-color: var(--t-input-bg); --tw-ring-color: var(--t-border-strong); --tw-shadow: 0 0 #0000; } /* Odak: 1px mavi kenarlık + yumuşak mavi hâle (Tabler) */ .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within { --tw-ring-shadow: 0 0 0 1px var(--primary-600); --tw-shadow: 0 0 0 4px color-mix(in oklab, var(--primary-500) 22%, transparent); } .fi-input-wrp.fi-invalid { --tw-ring-color: var(--danger-500); } .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)).fi-invalid:focus-within { --tw-ring-shadow: 0 0 0 1px var(--danger-600); --tw-shadow: 0 0 0 4px color-mix(in oklab, var(--danger-500) 22%, transparent); } .fi-input-wrp.fi-disabled { background-color: var(--t-page); } .fi-input, .fi-select-input, .fi-select-input .fi-select-input-btn { color: var(--t-text); } .fi-input::placeholder, .fi-select-input .fi-select-input-placeholder { color: var(--gray-400); } .fi-input-wrp-prefix .fi-icon, .fi-input-wrp-suffix .fi-icon { color: var(--t-muted); } .fi-select-input .fi-select-input-btn { border-radius: var(--t-radius); } .fi-select-input .fi-select-input-search-ctn { background-color: var(--t-card); } /* Onay kutusu / radyo */ input[type="checkbox"].fi-checkbox-input { border-radius: .25rem; background-color: var(--t-input-bg); --tw-ring-color: var(--t-border-strong); --tw-shadow: 0 0 #0000; } input[type="radio"].fi-radio-input { background-color: var(--t-input-bg); --tw-ring-color: var(--t-border-strong); --tw-shadow: 0 0 #0000; } input[type="checkbox"].fi-checkbox-input:checked, input[type="checkbox"].fi-checkbox-input:indeterminate, input[type="radio"].fi-radio-input:checked { background-color: var(--primary-600); } input[type="checkbox"].fi-checkbox-input:disabled, input[type="radio"].fi-radio-input:disabled { background-color: var(--t-page); } input[type="checkbox"].fi-checkbox-input:disabled:checked, input[type="radio"].fi-radio-input:disabled:checked { background-color: var(--gray-400); } /* Anahtar (toggle): kapalıyken gri; açıkken fi-color sınıfı gelir, --bg (600) kalır */ .fi-toggle:not(.fi-color) { background-color: var(--t-border-strong); } .fi-toggle > :first-child { background-color: #fff; } /* Alan sarmalayıcıları */ .fi-fo-field-label-content, .fi-fo-field-label { color: var(--t-text); } .fi-fo-field-label-required-mark { color: var(--danger-600); } .fi-fo-field-wrp-error-message { color: var(--danger-600); } /* Anahtar düğmeleri / dosya yükleme gibi bloklar aynı kenarlığı alsın */ .fi-fo-file-upload .filepond--panel-root, .fi-fo-rich-editor .fi-fo-rich-editor-main, .fi-fo-markdown-editor, .fi-fo-tags-input-tag { border-radius: var(--t-radius); } /* -------------------------------------------------------------------------- 12) SEKMELER -------------------------------------------------------------------------- */ .fi-tabs:not(.fi-contained) { padding: 0; border-radius: 0; background-color: transparent; box-shadow: none; border-bottom: 1px solid var(--t-border); column-gap: .25rem; } .fi-tabs.fi-contained { border-color: var(--t-border); padding-block: 0; } /* Alt çizgi, kenarlık yerine iç gölgeyle çizilir: .fi-tabs overflow-x:auto olduğundan negatif kenar boşluğu dikey kaydırma çubuğu doğuruyordu. */ .fi-tabs-item { border-radius: 0; padding: .625rem .875rem; background-color: transparent; } .fi-tabs-item:hover, .fi-tabs-item:focus-visible { background-color: transparent; } .fi-tabs-item .fi-tabs-item-label { font-weight: 500; color: var(--t-muted); } .fi-tabs-item:not(.fi-active):hover .fi-tabs-item-label, .fi-tabs-item:not(.fi-active):hover > .fi-icon { color: var(--t-text); } .fi-tabs-item.fi-active { background-color: transparent; box-shadow: inset 0 -2px 0 0 var(--primary-600); } .fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active > .fi-icon { color: var(--primary-600); } .dark .fi-tabs-item.fi-active { box-shadow: inset 0 -2px 0 0 var(--primary-400); } .dark .fi-tabs-item.fi-active .fi-tabs-item-label, .dark .fi-tabs-item.fi-active > .fi-icon { color: var(--primary-400); } /* Dikey sekmeler: çizgi sağ kenarda */ .fi-tabs.fi-vertical:not(.fi-contained) { border-bottom: 0; border-inline-end: 1px solid var(--t-border); } .fi-tabs.fi-vertical .fi-tabs-item.fi-active { box-shadow: inset -2px 0 0 0 var(--primary-600); } .dark .fi-tabs.fi-vertical .fi-tabs-item.fi-active { box-shadow: inset -2px 0 0 0 var(--primary-400); } /* -------------------------------------------------------------------------- 13) AÇILIR MENÜLER (dropdown) -------------------------------------------------------------------------- */ .fi-dropdown-panel { border-radius: var(--t-radius); background-color: var(--t-card); box-shadow: 0 0 0 1px var(--t-border), var(--t-shadow-lg); } .fi-dropdown-panel > .fi-dropdown-list + .fi-dropdown-list, .fi-dropdown-panel > .fi-dropdown-header + .fi-dropdown-list { border-top: 1px solid var(--t-border); } .fi-dropdown-list-item { border-radius: var(--t-radius); } .fi-dropdown-list-item:not(.fi-disabled):not([disabled]):hover, .fi-dropdown-list-item:not(.fi-disabled):not([disabled]):focus-visible, .fi-dropdown-list-item:not(.fi-disabled):not([disabled]).fi-selected { background-color: var(--t-hover); } .fi-dropdown-list-item-label { color: var(--t-text); } .fi-dropdown-list-item > .fi-icon { color: var(--t-muted); } .fi-dropdown-list-item.fi-color:not(.fi-disabled):not([disabled]):hover, .fi-dropdown-list-item.fi-color:not(.fi-disabled):not([disabled]):focus-visible, .fi-dropdown-list-item.fi-color:not(.fi-disabled):not([disabled]).fi-selected { background-color: color-mix(in oklab, var(--color-500) 10%, transparent); } .fi-dropdown-header { color: var(--t-muted); } .fi-dropdown-header span { color: var(--t-text); } /* Tema değiştirici */ .fi-theme-switcher-btn { border-radius: var(--t-radius); color: var(--t-muted); } .fi-theme-switcher-btn:hover, .fi-theme-switcher-btn:focus-visible { background-color: var(--t-hover); color: var(--t-text); } .fi-theme-switcher-btn.fi-active { background-color: color-mix(in oklab, var(--primary-500) 12%, transparent); color: var(--primary-600); } .dark .fi-theme-switcher-btn.fi-active { color: var(--primary-400); } /* -------------------------------------------------------------------------- 14) MODALLAR -------------------------------------------------------------------------- */ .fi-modal > .fi-modal-window-ctn > .fi-modal-window { background-color: var(--t-card); box-shadow: 0 0 0 1px var(--t-border), 0 24px 48px rgba(24, 36, 51, .18); } .dark .fi-modal > .fi-modal-window-ctn > .fi-modal-window { box-shadow: 0 0 0 1px var(--t-border), 0 24px 48px rgba(0, 0, 0, .5); } .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn .fi-modal-window, .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen).fi-modal-has-sticky-header > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header, .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen).fi-modal-has-sticky-footer > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer { border-radius: var(--t-radius); } .fi-modal > .fi-modal-window-ctn > .fi-modal-window:not(.fi-align-center) .fi-modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border); } .fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-heading { font-size: 1rem; font-weight: 600; color: var(--t-text); } .fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-description { color: var(--t-muted); } .fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-content { padding-block: 1.25rem; } .fi-modal > .fi-modal-window-ctn > .fi-modal-window:not(.fi-align-center) .fi-modal-footer { padding-block: .875rem; border-top: 1px solid var(--t-border); background-color: var(--t-thead); } .fi-modal > .fi-modal-close-overlay { background-color: rgba(24, 36, 51, .55); } .dark .fi-modal > .fi-modal-close-overlay { background-color: rgba(0, 0, 0, .7); } /* -------------------------------------------------------------------------- 15) BİLDİRİMLER -------------------------------------------------------------------------- */ .fi-no-notification:not(.fi-inline) { border-radius: var(--t-radius); background-color: var(--t-card); box-shadow: 0 0 0 1px var(--t-border), var(--t-shadow-lg); } .fi-no-notification.fi-color { /* Tabler uyarıları: sol kenarda renk şeridi */ border-inline-start: 3px solid var(--color-500); } .fi-no-notification .fi-no-notification-title { color: var(--t-text); } .fi-no-notification .fi-no-notification-body, .fi-no-notification .fi-no-notification-date { color: var(--t-muted); } .fi-no-notification .fi-no-notification-icon { color: var(--t-muted); } .fi-no-notification .fi-no-notification-icon.fi-color { color: var(--color-500); } /* -------------------------------------------------------------------------- 16) ÇEŞİTLİ -------------------------------------------------------------------------- */ .fi-avatar { border-radius: var(--t-radius); } .fi-avatar.fi-circular { border-radius: 999px; } .fi-loading-indicator { color: var(--t-muted); } /* Alt gezinti / sayfa içi gezinti kenar çubuğu (kaynak sayfaları) */ .fi-page-sub-navigation-sidebar .fi-sidebar-item-btn { color: var(--t-text); } .fi-page-sub-navigation-sidebar .fi-sidebar-item-btn > .fi-icon { color: var(--t-muted); } .fi-page-sub-navigation-sidebar .fi-sidebar-item-label { color: var(--t-text); } .fi-page-sub-navigation-sidebar .fi-sidebar-group-label { color: var(--t-muted); } .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover, .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--t-hover); } .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label, .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--primary-600); } .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { display: none; } /* Kayan çubuklar: ince, sessiz */ .fi-body * { scrollbar-width: thin; } .fi-sidebar-close-overlay { background-color: rgba(24, 36, 51, .5); }