/* ========================================================================== Yollda Admin — Design System -------------------------------------------------------------------------- Bu fayl HƏR ŞEYDƏN SONRA yüklənir və Argon/Bootstrap görünüşünü Yollda paletinə uyğunlaşdırır. Yalnız GÖRÜNÜŞ dəyişir — heç bir markup strukturu, element ID-si, class adı və ya JS davranışı bundan asılı deyil. Qaydalar: 1) 90% neytral, rəng yalnız məna daşıyanda 2) Gradient yoxdur 3) Kart = 1px border, kölgə yox 4) Sıx tipografiya (13px) 5) Brend rəngi bir yerdə: sol sidebar ========================================================================== */ :root { /* ── Neytral ────────────────────────────────────────── */ --y-g50:#F9FAFB; --y-g100:#F3F4F6; --y-g200:#E5E7EB; --y-g300:#D1D5DB; --y-g400:#9CA3AF; --y-g500:#6B7280; --y-g600:#4B5563; --y-g700:#374151; --y-g800:#1F2937; --y-g900:#111827; /* ── Brend: dərin yaşıl (chrome + əməliyyat) ────────── */ --y-d500:#DDEEE2; --y-d600:#C2CFC6; --y-d650:#8AA5A1; --y-d700:#3F7870; --y-d800:#1F534B; --y-d900:#19423C; --y-d1k:#0B2B26; /* ── Brend: parlaq yaşıl (status + müsbət) ──────────── */ --y-b100:#E9F9EF; --y-b500:#89EDA6; --y-b700:#5DE684; --y-b900:#31E062; --y-b-ink:#0F6B3F; /* ── Semantik ───────────────────────────────────────── */ --y-warn:#FF983B; --y-warn-bg:#FFF4EA; --y-warn-ink:#9A5510; --y-dngr:#FE4E4E; --y-dngr-bg:#FFEDED; --y-dngr-ink:#B03232; --y-info:#4A72C9; --y-info-bg:#EEF3FC; --y-info-ink:#2F53A0; /* ── Data-viz (validator-dan keçmiş kateqorial sıra) ── */ --y-s1:#12946A; --y-s2:#E5892E; --y-s3:#4A72C9; --y-s4:#B45C86; --y-s-other:#9CA3AF; --y-s-good:#12946A; --y-s-crit:#E14B4B; --y-s-agg:#374151; /* ── Səthlər və chrome (tünd rejimdə ayrıca seçilir) ─ */ --y-card:#FFFFFF; /* kart səthi */ --y-sidebar:#19423C; /* sol panel fonu */ --y-focus:var(--y-focus); /* fokus halqası */ --y-b-bd:var(--y-b-bd); --y-warn-bd:var(--y-warn-bd); --y-dngr-bd:var(--y-dngr-bd); --y-info-bd:var(--y-info-bd); --y-s1-hover:var(--y-s1-hover); --y-warn-hover:var(--y-warn-hover); --y-dngr-hover:var(--y-dngr-hover); --y-badge-brand-bg:#DDEEE2; --y-badge-brand-ink:#19423C; /* ── Sıralı ramp (sıxlıq şəbəkəsi, reytinq) ─────────── */ --y-ramp-0:#F1F5F3; --y-ramp-1:#DDEEE2; --y-ramp-2:#C2CFC6; --y-ramp-3:#8AA5A1; --y-ramp-4:#3F7870; --y-ramp-5:#1F534B; /* ── Forma ──────────────────────────────────────────── */ color-scheme: light; --y-radius:10px; --y-radius-sm:7px; --y-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; --y-shadow-pop:0 8px 24px rgba(17,24,39,.10),0 2px 6px rgba(17,24,39,.06); } /* ========================================================================== 0 · GRADIENT-LƏRİN LƏĞVİ (köhnə Argon estetikasının əsas izi) ========================================================================== */ .bg-gradient-primary,.bg-gradient-secondary,.bg-gradient-success,.bg-gradient-info, .bg-gradient-warning,.bg-gradient-danger,.bg-gradient-default,.bg-gradient-dark, .bg-gradient-neutral,.bg-gradient-white,.header.bg-gradient-primary, .min-height-300.bg-primary { background-image: none !important; } .header.bg-gradient-primary,.header.bg-primary,.min-height-300.bg-primary { background-color: transparent !important; } /* changelist-in arxasındakı mavi lent */ .min-height-300.bg-primary { display: none !important; } /* ========================================================================== 1 · BAZA ========================================================================== */ body { font-family: var(--y-font) !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--y-g900) !important; background: var(--y-g50) !important; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--y-font) !important; color: var(--y-g900) !important; font-weight: 650 !important; letter-spacing: -.02em !important; } h1,.h1{font-size:20px !important} h2,.h2{font-size:18px !important} h3,.h3{font-size:16px !important} h4,.h4{font-size:15px !important} h5,.h5{font-size:13.5px !important} h6,.h6{font-size:12.5px !important} a { color: var(--y-d800); text-decoration: none; } a:hover { color: var(--y-d900); text-decoration: none; } .text-muted { color: var(--y-g500) !important; } hr { border-color: var(--y-g200) !important; opacity: 1; } code,kbd,pre,samp,.mono { font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; } /* ========================================================================== 2 · SHELL — sidebar / topbar / content (Genişliklər DƏYİŞMİR: base.html-dəki toggle JS 230px/62px gözləyir) ========================================================================== */ .sidenav,.sidenav.navbar-light,.sidenav.bg-white,#sidenav-main { background: var(--y-sidebar) !important; border-right: 0 !important; box-shadow: none !important; } .sidenav .sidenav-header { border-bottom: 1px solid rgba(255,255,255,.07) !important; min-height: 56px !important; padding: 0 16px !important; } .sidenav .navbar-brand { padding: 0 !important; } .sidenav .navbar-brand-img { max-height: 26px !important; } /* naviqasiya elementləri */ .sidenav .navbar-nav .nav-link { color: rgba(255,255,255,.72) !important; font-size: 13px !important; font-weight: 450 !important; padding: 7px 12px !important; border-radius: var(--y-radius-sm) !important; margin: 1px 10px !important; position: relative; transition: background .12s,color .12s; } .sidenav .navbar-nav .nav-link i, .sidenav .navbar-nav .nav-link .fas, .sidenav .navbar-nav .nav-link .far { color: inherit !important; opacity: .85; font-size: 12.5px !important; width: 16px !important; text-align: center; } .sidenav .navbar-nav .nav-link:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; } .sidenav .navbar-nav .nav-link.active, .sidenav .navbar-nav .nav-link.active:hover { background: rgba(255,255,255,.10) !important; color: #fff !important; font-weight: 600 !important; } .sidenav .navbar-nav .nav-link.active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--y-b900); } /* alt menyular */ .sidenav .navbar-nav .nav.nav-sm .nav-link { font-size: 12.5px !important; color: rgba(255,255,255,.58) !important; padding: 5px 12px 5px 34px !important; } .sidenav .navbar-nav .nav.nav-sm .nav-link:hover { color: #fff !important; } .sidenav .navbar-nav .nav.nav-sm .nav-link.active { color: #fff !important; background: rgba(255,255,255,.08) !important; } .sidenav .navbar-nav .nav.nav-sm .nav-link.active::before { display: none; } /* qrup başlıqları */ .sidenav .navbar-heading { color: rgba(255,255,255,.38) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .07em !important; text-transform: uppercase !important; padding: 14px 20px 6px !important; } .sidenav .navbar-divider,.sidenav hr { border-color: rgba(255,255,255,.07) !important; } /* açılan ox */ .sidenav .navbar-nav .nav-link[data-toggle="collapse"]::after { color: rgba(255,255,255,.45) !important; } /* toggler */ .sidenav .sidenav-toggler-line { background: rgba(255,255,255,.6) !important; } /* scrollbar */ .sidenav .scrollbar-inner > .scroll-element .scroll-bar { background: rgba(255,255,255,.22) !important; } /* ── Topbar ──────────────────────────────────────────── */ .main-content .navbar-top,.navbar-top { background: var(--y-card) !important; border-bottom: 1px solid var(--y-g200) !important; box-shadow: none !important; min-height: 56px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .navbar-top .nav-link,.navbar-top .navbar-nav .nav-link { color: var(--y-g600) !important; font-size: 13px !important; } .navbar-top .nav-link:hover { color: var(--y-g900) !important; } .navbar-top .navbar-brand,.navbar-top h6,.navbar-top .h6 { color: var(--y-g900) !important; } .navbar-top .form-control { background: var(--y-g50) !important; } .navbar-search .input-group { border-radius: var(--y-radius-sm) !important; } /* ── Content sahəsi ──────────────────────────────────── */ .main-content { background: var(--y-g50) !important; } .header { background: transparent !important; padding-bottom: 0 !important; } .header-body { padding-top: 18px !important; padding-bottom: 6px !important; } .header .h1,.header h1,.header .text-white { color: var(--y-g900) !important; } /* Argon "mt--5/6/7/8" kartları mavi lentin üstünə çəkirdi — lent getdi */ .mt--3,.mt--4,.mt--5,.mt--6,.mt--7,.mt--8,.mt--9 { margin-top: 0 !important; } .pb-6,.pb-7,.pb-8 { padding-bottom: 1rem !important; } /* breadcrumb */ .breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 4px !important; font-size: 12.5px !important; } .breadcrumb-item,.breadcrumb-item a,.breadcrumb-dark .breadcrumb-item a { color: var(--y-g500) !important; } .breadcrumb-item a:hover { color: var(--y-g900) !important; } .breadcrumb-item.active { color: var(--y-g900) !important; font-weight: 600 !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--y-g300) !important; } .breadcrumb .icon,.breadcrumb svg { color: var(--y-g500) !important; width: 13px; height: 13px; } /* ========================================================================== 3 · KART ========================================================================== */ .card,.card.shadow,.card.shadow-sm,.card.card-plain { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; box-shadow: none !important; } .card:hover { transform: none !important; box-shadow: none !important; } .card-header { background: var(--y-card) !important; border-bottom: 1px solid var(--y-g200) !important; padding: 12px 16px !important; border-radius: var(--y-radius) var(--y-radius) 0 0 !important; } .card-body { padding: 16px !important; } .card-footer { background: var(--y-g50) !important; border-top: 1px solid var(--y-g200) !important; padding: 10px 16px !important; } /* changelist cədvəl konteyneri */ .card.card-body.table-wrapper { padding: 0 !important; } /* ========================================================================== 4 · DÜYMƏLƏR ========================================================================== */ .btn { font-family: var(--y-font) !important; font-size: 12.5px !important; font-weight: 500 !important; border-radius: var(--y-radius-sm) !important; padding: 6px 12px !important; box-shadow: none !important; transition: background .12s,border-color .12s,color .12s !important; letter-spacing: 0 !important; text-transform: none !important; } .btn:hover,.btn:focus { transform: none !important; box-shadow: none !important; } .btn-sm { font-size: 12px !important; padding: 4px 9px !important; } .btn-lg { font-size: 13.5px !important; padding: 9px 16px !important; } /* neytral / default */ .btn-secondary,.btn-neutral,.btn-white,.btn-light,.btn-default { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; color: var(--y-g700) !important; } .btn-secondary:hover,.btn-neutral:hover,.btn-white:hover,.btn-light:hover,.btn-default:hover { background: var(--y-g50) !important; border-color: var(--y-g300) !important; color: var(--y-g900) !important; } /* əsas əməliyyat — dərin yaşıl */ .btn-primary,.btn-dark,.btn-info { background: var(--y-d800) !important; border: 1px solid var(--y-d800) !important; color: #fff !important; } .btn-primary:hover,.btn-dark:hover,.btn-info:hover { background: var(--y-d900) !important; border-color: var(--y-d900) !important; color: #fff !important; } .btn-success { background: var(--y-s1) !important; border: 1px solid var(--y-s1) !important; color: #fff !important; } .btn-success:hover { background: var(--y-s1-hover) !important; border-color: var(--y-s1-hover) !important; } .btn-warning { background: var(--y-warn) !important; border: 1px solid var(--y-warn) !important; color: #40260B !important; } .btn-warning:hover { background: var(--y-warn-hover) !important; border-color: var(--y-warn-hover) !important; } .btn-danger { background: var(--y-dngr) !important; border: 1px solid var(--y-dngr) !important; color: #fff !important; } .btn-danger:hover { background: var(--y-dngr-hover) !important; border-color: var(--y-dngr-hover) !important; } /* outline */ .btn-outline-primary { background: transparent !important; border-color: var(--y-d800) !important; color: var(--y-d800) !important; } .btn-outline-primary:hover { background: var(--y-d800) !important; color: #fff !important; } .btn-outline-danger { background: transparent !important; border-color: var(--y-dngr) !important; color: var(--y-dngr-ink) !important; } .btn-outline-danger:hover { background: var(--y-dngr) !important; color: #fff !important; } /* icon-only */ .btn.btn-icon-only { width: 30px !important; height: 30px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* ========================================================================== 5 · FORMALAR ========================================================================== */ .form-control,.form-select,select,textarea,input[type="text"],input[type="email"], input[type="password"],input[type="number"],input[type="url"],input[type="tel"], input[type="search"],input[type="date"],input[type="datetime-local"],input[type="time"] { font-family: var(--y-font) !important; font-size: 13px !important; color: var(--y-g900) !important; background-color: var(--y-card) !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; padding: 6px 10px !important; box-shadow: none !important; transition: border-color .12s,box-shadow .12s !important; } .form-control:focus,.form-select:focus,select:focus,textarea:focus, input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus, input[type="number"]:focus,input[type="search"]:focus { border-color: var(--y-d700) !important; box-shadow: 0 0 0 3px var(--y-focus) !important; outline: none !important; } .form-control::placeholder { color: var(--y-g400) !important; } .form-control:disabled,.form-control[readonly] { background: var(--y-g50) !important; color: var(--y-g500) !important; } label,.form-label { font-size: 12.5px !important; font-weight: 500 !important; color: var(--y-g700) !important; } .form-control-label { color: var(--y-g700) !important; } .custom-control-label::before { border-color: var(--y-g300) !important; } .custom-control-input:checked ~ .custom-control-label::before, .form-check-input:checked { background-color: var(--y-d800) !important; border-color: var(--y-d800) !important; } .form-check-input:focus { box-shadow: 0 0 0 3px var(--y-focus) !important; border-color: var(--y-d700) !important; } .help,.helptext,.form-text,small.form-text { color: var(--y-g500) !important; font-size: 11.5px !important; } /* select2 */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--y-d800) !important; } .select2-dropdown { border-color: var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; box-shadow: var(--y-shadow-pop) !important; } /* ========================================================================== 6 · CƏDVƏLLƏR (Bootstrap .table + Django #result_list) ========================================================================== */ .table,#result_list,table.table { color: var(--y-g700) !important; margin-bottom: 0 !important; border-color: var(--y-g100) !important; } .table thead th,#result_list thead th,#result_list thead th a, .table > :not(caption) > * > th { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--y-g500) !important; background: var(--y-g50) !important; border-bottom: 1px solid var(--y-g200) !important; border-top: 0 !important; padding: 9px 14px !important; white-space: nowrap; vertical-align: middle; } #result_list thead th a { padding: 0 !important; background: transparent !important; } #result_list thead th a:hover { color: var(--y-g900) !important; } .table tbody td,#result_list tbody td,#result_list tbody th, .table > :not(caption) > * > td { font-size: 12.5px !important; color: var(--y-g700) !important; padding: 9px 14px !important; border-bottom: 1px solid var(--y-g100) !important; border-top: 0 !important; vertical-align: middle !important; background: transparent !important; } .table tbody tr:last-child td,#result_list tbody tr:last-child td { border-bottom: 0 !important; } .table tbody tr:hover,#result_list tbody tr:hover, #result_list tbody tr.row1:hover,#result_list tbody tr.row2:hover { background: var(--y-g50) !important; } /* Django-nun zolaqlı sətirlərini söndür — hover kifayətdir */ #result_list tbody tr.row1,#result_list tbody tr.row2 { background: transparent !important; } #result_list tbody th a,#result_list tbody td a { color: var(--y-d800) !important; font-weight: 500 !important; } #result_list tbody th a:hover,#result_list tbody td a:hover { color: var(--y-d900) !important; text-decoration: underline !important; } /* seçim sütunu */ #result_list .action-checkbox,#result_list td.action-checkbox { width: 32px !important; } #result_list thead th.action-checkbox-column { width: 32px !important; } /* sıralama göstəricisi */ .sortoptions,.sortremove,.toggle { opacity: .6; } .table-responsive,.table-wrapper { border-radius: var(--y-radius) !important; } /* ========================================================================== 7 · BADGE / ALERT / MESSAGE ========================================================================== */ .badge { font-family: var(--y-font) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 3px 7px !important; border-radius: 5px !important; } .badge-success,.badge.bg-success,.badge-pill.badge-success { background: var(--y-b100) !important; color: var(--y-b-ink) !important; } .badge-warning,.badge.bg-warning { background: var(--y-warn-bg) !important; color: var(--y-warn-ink) !important; } .badge-danger,.badge.bg-danger { background: var(--y-dngr-bg) !important; color: var(--y-dngr-ink) !important; } .badge-info,.badge.bg-info { background: var(--y-info-bg) !important; color: var(--y-info-ink) !important; } .badge-primary,.badge.bg-primary{ background: var(--y-badge-brand-bg) !important; color: var(--y-badge-brand-ink) !important; } .badge-secondary,.badge.bg-secondary,.badge-light { background: var(--y-g100) !important; color: var(--y-g600) !important; } .badge-dark,.badge.bg-dark { background: var(--y-g800) !important; color: #fff !important; } .alert { border-radius: var(--y-radius) !important; border: 1px solid transparent !important; font-size: 12.5px !important; padding: 10px 14px !important; box-shadow: none !important; } .alert-success { background: var(--y-b100) !important; border-color: var(--y-b-bd) !important; color: var(--y-b-ink) !important; } .alert-warning { background: var(--y-warn-bg) !important; border-color: var(--y-warn-bd) !important; color: var(--y-warn-ink) !important; } .alert-danger { background: var(--y-dngr-bg) !important; border-color: var(--y-dngr-bd) !important; color: var(--y-dngr-ink) !important; } .alert-info { background: var(--y-info-bg) !important; border-color: var(--y-info-bd) !important; color: var(--y-info-ink) !important; } /* Django messagelist */ .messagelist { list-style: none !important; padding: 0 !important; margin: 12px 20px !important; } .messagelist li { border-radius: var(--y-radius) !important; font-size: 12.5px !important; padding: 10px 14px !important; margin-bottom: 8px !important; border: 1px solid transparent !important; background: var(--y-info-bg) !important; color: var(--y-info-ink) !important; border-color: var(--y-info-bd) !important; } .messagelist li.success { background: var(--y-b100) !important; color: var(--y-b-ink) !important; border-color: var(--y-b-bd) !important; } .messagelist li.warning { background: var(--y-warn-bg) !important; color: var(--y-warn-ink) !important; border-color: var(--y-warn-bd) !important; } .messagelist li.error { background: var(--y-dngr-bg) !important; color: var(--y-dngr-ink) !important; border-color: var(--y-dngr-bd) !important; } .errornote { background: var(--y-dngr-bg) !important; color: var(--y-dngr-ink) !important; border: 1px solid var(--y-dngr-bd) !important; border-radius: var(--y-radius) !important; padding: 10px 14px !important; font-size: 12.5px !important; font-weight: 500 !important; } .errorlist { list-style: none; padding: 0; margin: 4px 0 0; } .errorlist li { color: var(--y-dngr-ink) !important; font-size: 11.5px !important; font-weight: 500; } .form-row.errors,.form-row .errors { border: 0 !important; background: transparent !important; } /* ========================================================================== 8 · DJANGO ADMIN — changelist ========================================================================== */ .cl-unified-toolbar { display: flex; align-items: center; gap: 8px; min-width: 0; } .cl-add-btn,.cl-save-icon-btn { background: var(--y-d800) !important; border: 1px solid var(--y-d800) !important; color: #fff !important; border-radius: var(--y-radius-sm) !important; height: 30px !important; } .cl-add-btn:hover,.cl-save-icon-btn:hover { background: var(--y-d900) !important; border-color: var(--y-d900) !important; } .object-tools { padding: 0 !important; margin: 0 !important; list-style: none; display: inline-flex; gap: 6px; } .object-tools li { display: inline-block; } .object-tools a,.object-tools a:link,.object-tools a:visited,.object-tools a.addlink { background: var(--y-d800) !important; color: #fff !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: var(--y-radius-sm) !important; padding: 6px 11px !important; border: 1px solid var(--y-d800) !important; } .object-tools a:hover { background: var(--y-d900) !important; border-color: var(--y-d900) !important; } /* action bar */ .actions { background: var(--y-g50) !important; border-bottom: 1px solid var(--y-g200) !important; padding: 8px 14px !important; font-size: 12.5px !important; color: var(--y-g600) !important; } .actions select { height: 30px !important; } .actions .button { font-size: 12.5px !important; } /* paginator */ .paginator { font-size: 12.5px !important; color: var(--y-g500) !important; padding: 12px 14px !important; border-top: 1px solid var(--y-g200) !important; background: var(--y-card) !important; } .paginator a,.paginator .this-page { display: inline-block; min-width: 28px; text-align: center; padding: 4px 8px !important; margin: 0 2px !important; border-radius: var(--y-radius-sm) !important; border: 1px solid var(--y-g200) !important; background: var(--y-card) !important; color: var(--y-g700) !important; font-weight: 500 !important; } .paginator a:hover { background: var(--y-g50) !important; border-color: var(--y-g300) !important; } .paginator .this-page { background: var(--y-d800) !important; border-color: var(--y-d800) !important; color: #fff !important; } .pagination .page-link { border-color: var(--y-g200) !important; color: var(--y-g700) !important; border-radius: var(--y-radius-sm) !important; margin: 0 2px; font-size: 12.5px !important; } .pagination .page-item.active .page-link { background: var(--y-d800) !important; border-color: var(--y-d800) !important; color: #fff !important; } /* filtrlər */ #changelist-filter,.changelist-filter { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; font-size: 12.5px !important; } #changelist-filter h2 { background: var(--y-g50) !important; color: var(--y-g500) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; padding: 9px 14px !important; border-bottom: 1px solid var(--y-g200) !important; } #changelist-filter h3 { font-size: 11.5px !important; color: var(--y-g500) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px 4px !important; } #changelist-filter li a { color: var(--y-g600) !important; padding: 4px 14px !important; display: block; } #changelist-filter li.selected a { color: var(--y-d800) !important; font-weight: 600 !important; } #changelist-filter li a:hover { background: var(--y-g50) !important; color: var(--y-g900) !important; } /* date hierarchy */ .xfull,#toolbar { background: transparent !important; border: 0 !important; padding: 0 !important; } .toplinks,.xfull ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; gap: 6px; flex-wrap: wrap; } .toplinks li a { font-size: 12px !important; padding: 4px 9px !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; background: var(--y-card) !important; color: var(--y-g700) !important; } /* ========================================================================== 9 · DJANGO ADMIN — change_form ========================================================================== */ .module,fieldset.module { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; margin-bottom: 16px !important; padding: 0 !important; } .module > h2,fieldset > h2,.inline-group > h2 { background: var(--y-g50) !important; color: var(--y-g500) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 10px 16px !important; margin: 0 !important; border-bottom: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) var(--y-radius) 0 0 !important; } fieldset .form-row,.form-row { border-bottom: 1px solid var(--y-g100) !important; padding: 11px 16px !important; background: transparent !important; } fieldset .form-row:last-child,.form-row:last-child { border-bottom: 0 !important; } .aligned label { color: var(--y-g700) !important; font-size: 12.5px !important; font-weight: 500 !important; padding-top: 6px !important; } .required label,label.required { font-weight: 600 !important; } .required label::after,label.required::after { content: " *"; color: var(--y-dngr); } fieldset .description { color: var(--y-g500) !important; font-size: 12px !important; padding: 10px 16px 0 !important; } .collapse-toggle,.collapsed .collapse-toggle { color: var(--y-d800) !important; font-size: 11.5px !important; } /* submit row */ .submit-row { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; padding: 12px 16px !important; margin: 16px 0 !important; box-shadow: none !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .submit-row input[type="submit"],.submit-row button,.submit-row a.button, input[type="submit"].default,.button { font-family: var(--y-font) !important; font-size: 12.5px !important; font-weight: 500 !important; border-radius: var(--y-radius-sm) !important; padding: 7px 13px !important; border: 1px solid var(--y-g200) !important; background: var(--y-card) !important; color: var(--y-g700) !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer; } .submit-row input[type="submit"]:hover,.submit-row a.button:hover,.button:hover { background: var(--y-g50) !important; border-color: var(--y-g300) !important; color: var(--y-g900) !important; } .submit-row input[name="_save"],input[type="submit"].default { background: var(--y-d800) !important; border-color: var(--y-d800) !important; color: #fff !important; } .submit-row input[name="_save"]:hover,input[type="submit"].default:hover { background: var(--y-d900) !important; border-color: var(--y-d900) !important; color: #fff !important; } .submit-row a.deletelink,.deletelink,a.deletelink:link,a.deletelink:visited { background: var(--y-card) !important; border: 1px solid var(--y-dngr-bd) !important; color: var(--y-dngr-ink) !important; } .submit-row a.deletelink:hover,.deletelink:hover { background: var(--y-dngr) !important; border-color: var(--y-dngr) !important; color: #fff !important; } .submit-row .closelink { margin-left: auto; } /* inline */ .inline-group { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; background: var(--y-card) !important; margin-bottom: 16px !important; } .inline-related h3 { background: var(--y-g50) !important; color: var(--y-g600) !important; font-size: 12px !important; font-weight: 600 !important; padding: 8px 16px !important; border-bottom: 1px solid var(--y-g200) !important; border-top: 1px solid var(--y-g200) !important; } .inline-related:first-of-type h3 { border-top: 0 !important; } .add-row a { font-size: 12.5px !important; color: var(--y-d800) !important; font-weight: 500 !important; } .inline-deletelink { color: var(--y-dngr-ink) !important; } /* filter_horizontal selector */ .selector select { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; font-size: 12.5px !important; } .selector-chooser { background: transparent !important; border: 0 !important; } .selector h2 { background: var(--y-g50) !important; color: var(--y-g500) !important; font-size: 10.5px !important; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--y-g200) !important; border-bottom: 0 !important; border-radius: var(--y-radius-sm) var(--y-radius-sm) 0 0 !important; padding: 8px 12px !important; } .selector-available select[size]:empty,.selector-chosen select[size]:empty { background: var(--y-g50) !important; border: 1px dashed var(--y-g300) !important; } /* ========================================================================== 10 · YENİ KOMPONENTLƏR (pages1/* səhifələri üçün) ========================================================================== */ /* bölmə başlığı */ .y-sec { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--y-g500); margin: 30px 0 11px; display: flex; align-items: center; gap: 9px; } .y-sec.first { margin-top: 0; } .y-sec .rule { flex: 1; height: 1px; background: var(--y-g200); } /* stat lenti — bir kart, bölünmüş xanalar. Bölücülər 1px `gap` ilə çəkilir: konteynerin fonu xətt kimi görünür. Beləliklə sütun sayı dəyişəndə nth-child ilə kənar sərhədləri söndürmək lazım gəlmir — istənilən sütun sayında düzgün işləyir. */ .y-strip { background: var(--y-g200); border: 1px solid var(--y-g200); border-radius: var(--y-radius); display: grid; gap: 1px; overflow: hidden; } .y-strip.c2 { grid-template-columns: repeat(2,1fr); } .y-strip.c3 { grid-template-columns: repeat(3,1fr); } .y-strip.c4 { grid-template-columns: repeat(4,1fr); } .y-strip.c5 { grid-template-columns: repeat(5,1fr); } .y-cell { background: var(--y-card); padding: 14px 16px; } .y-cell-l { font-size: 11px; font-weight: 500; color: var(--y-g500); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; } .y-cell-v { font-size: 23px; font-weight: 650; letter-spacing: -.025em; color: var(--y-g900); line-height: 1.1; font-variant-numeric: tabular-nums; } .y-cell-v .unit { font-size: 13px; font-weight: 500; color: var(--y-g500); margin-left: 2px; } .y-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; margin-top: 6px; } .y-delta.up { background: var(--y-b100); color: var(--y-b-ink); } .y-delta.dn { background: var(--y-dngr-bg); color: var(--y-dngr-ink); } .y-delta.flat { background: var(--y-g100); color: var(--y-g600); } /* kart başlığı (yeni pattern) */ .y-card-t { font-size: 13.5px; font-weight: 600; color: var(--y-g900); margin: 0; } .y-card-d { font-size: 11.5px; color: var(--y-g500); margin: 1px 0 0; } /* seqment filtr */ .y-seg { display: inline-flex; background: var(--y-g100); border-radius: 8px; padding: 2px; gap: 2px; } .y-seg button,.y-seg .y-seg-item { border: 0; background: transparent; font-family: var(--y-font); font-size: 12.5px; font-weight: 500; color: var(--y-g600); padding: 5px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; user-select: none; } .y-seg button:hover,.y-seg .y-seg-item:hover { color: var(--y-g900); } .y-seg button[aria-pressed="true"],.y-seg .y-seg-item.on { background: var(--y-card); color: var(--y-g900); font-weight: 600; box-shadow: 0 1px 2px rgba(17,24,39,.07); } /* filtr sətri */ .y-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--y-g200); } .y-fl-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--y-g500); } .y-status { margin-left: auto; font-size: 12px; color: var(--y-g500); display: flex; align-items: center; gap: 6px; } .y-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--y-b900); } .y-status.loading .dot { background: var(--y-warn); animation: yPulse 1s infinite; } @keyframes yPulse { 0%,100%{opacity:1} 50%{opacity:.3} } /* cədvəl içi mikro-komponentlər */ .y-bar-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .y-bar-track { width: 52px; height: 5px; border-radius: 3px; background: var(--y-g100); overflow: hidden; flex-shrink: 0; } .y-bar-fill { height: 100%; border-radius: 3px; background: var(--y-s1); display: block; } .y-bar-fill.warn { background: var(--y-warn); } .y-bar-fill.dngr { background: var(--y-dngr); } .y-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--y-badge-brand-bg); color: var(--y-badge-brand-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; margin-right: 8px; vertical-align: middle; } .y-star { color: var(--y-warn); font-size: 11px; } .y-sub { color: var(--y-g500); font-size: 11.5px; } .y-num,th.y-num,td.y-num { text-align: right !important; font-variant-numeric: tabular-nums; } .y-rank { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--y-g100); font-size: 12.5px; } .y-rank:last-child { border-bottom: 0; } .y-rank .r-v { font-weight: 600; color: var(--y-g900); font-variant-numeric: tabular-nums; } /* qrafik konteyneri */ .y-chart { position: relative; height: 250px; } .y-chart.sm { height: 190px; } .y-chart.xs { height: 160px; } .y-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .y-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--y-g600); } .y-lg i { width: 9px; height: 9px; border-radius: 2.5px; flex-shrink: 0; } .y-lg.line i { height: 2.5px; width: 14px; border-radius: 2px; } /* boş vəziyyət */ .y-empty { text-align: center; padding: 28px 16px; color: var(--y-g500); } .y-empty i { font-size: 22px; opacity: .4; margin-bottom: 8px; display: block; } .y-empty span { font-size: 12.5px; } /* sıxlıq şəbəkəsi */ .y-dens { width: 100%; } .y-d-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; } .y-d-day { font-size: 11px; color: var(--y-g600); width: 38px; flex-shrink: 0; font-weight: 500; } .y-d-hr { font-size: 9.5px; color: var(--y-g400); flex: 1; min-width: 16px; text-align: center; } .y-d-cell { flex: 1; min-width: 16px; height: 22px; border-radius: 3px; } .y-d-scale { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: var(--y-g500); } .y-d-scale i { width: 16px; height: 10px; border-radius: 2px; } /* ========================================================================== 11 · MÜXTƏLİF ========================================================================== */ .modal-content { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; box-shadow: var(--y-shadow-pop) !important; } .modal-header { border-bottom: 1px solid var(--y-g200) !important; padding: 14px 16px !important; } .modal-footer { border-top: 1px solid var(--y-g200) !important; padding: 12px 16px !important; background: var(--y-g50) !important; } .dropdown-menu { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; box-shadow: var(--y-shadow-pop) !important; padding: 4px !important; font-size: 12.5px !important; } .dropdown-item { border-radius: var(--y-radius-sm) !important; padding: 6px 10px !important; color: var(--y-g700) !important; font-size: 12.5px !important; } .dropdown-item:hover,.dropdown-item:focus { background: var(--y-g50) !important; color: var(--y-g900) !important; } .dropdown-divider { border-color: var(--y-g200) !important; } .nav-pills .nav-link { border-radius: var(--y-radius-sm) !important; font-size: 12.5px !important; color: var(--y-g600) !important; } .nav-pills .nav-link.active { background: var(--y-d800) !important; color: #fff !important; } .nav-tabs { border-bottom: 1px solid var(--y-g200) !important; } .nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--y-g500) !important; font-size: 12.5px !important; font-weight: 500 !important; } .nav-tabs .nav-link.active { color: var(--y-g900) !important; border-bottom-color: var(--y-d800) !important; background: transparent !important; } .progress { height: 5px !important; border-radius: 3px !important; background: var(--y-g100) !important; box-shadow: none !important; } .progress-bar { background: var(--y-s1) !important; } .spinner-border { color: var(--y-d800) !important; } .leaflet-container { font-family: var(--y-font) !important; } ::selection { background: var(--y-d500); color: var(--y-d1k); } /* ========================================================================== 12 · RESPONSIVE ========================================================================== */ /* ── Menyu düyməsi (burger) ─────────────────────────────────────────────── İki ayrı qabıq var və hər ikisində kiçik ekranda menyuya çıxış itirdi. 1) /dashboard/ — Argon qabığı. Üst paneldəki burger `sidenav-toggler-dark` sinfini daşıyır; temanın öz CSS-ində bu "tünd fon üçün" deməkdir və xətləri AĞ boyayır (argon.css). Redizayn `.navbar-top` fonunu `--y-card`-a çevirdi, yəni ağ üstünə ağ: düymə yerində qalır, klik də işləyir, sadəcə görünmür. Yalnız 1200px-dən aşağıda nəzərə çarpır, çünki bu burger `d-xl-none` ilə yalnız orada göstərilir. 2) /admin/ — Django-nun öz qabığı. `nav_sidebar.css` 767px-dən aşağıda `#nav-sidebar` və `#toggle-nav-sidebar`-ı birlikdə gizlədir. Bu, Django-nun öz davranışıdır — amma nəticədə dar ekranda yalnız breadcrumb qalır və başqa modelə keçmək üçün heç bir yol olmur. Xətlərin rəngi token-dən oxunur, ona görə tünd temada özü çevrilir. */ .navbar-top .sidenav-toggler .sidenav-toggler-line, .navbar-top .sidenav-toggler-dark .sidenav-toggler-line { background-color: var(--y-g700) !important; } @media (max-width: 767px) { #toggle-nav-sidebar { display: flex !important; } /* 275px-lik sütun 400px-lik ekranda kontentə yer qoymur, ona görə panel səhifənin ÜSTÜNDƏ açılır. Bağlı olanda ekrandan kənarda durur. */ .main > #nav-sidebar { display: block !important; position: fixed !important; top: 0; bottom: 0; left: 0; width: 275px; max-width: 85vw; margin-left: 0 !important; z-index: 100; overflow-y: auto; transform: translateX(-100%); visibility: hidden; } /* Django-da `.shifted` = panel AÇIQ (nav_sidebar.css). */ .main.shifted > #nav-sidebar { transform: translateX(0); visibility: visible; } /* Panel üzdə olduğu üçün kontent hər iki halda tam eni saxlayır. */ .main > #nav-sidebar + .content, .main.shifted > #nav-sidebar + .content { max-width: calc(100% - 23px) !important; } } /* Sınır nöqtələri xananın rahat oxunduğu ~200px enə görə seçilib, əvvəlki 1180px isə 4 sütunu vaxtından xeyli əvvəl qırırdı. */ @media (max-width: 1280px) { .y-strip.c5 { grid-template-columns: repeat(3,1fr); } } @media (max-width: 980px) { .y-strip.c4,.y-strip.c5 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .y-strip.c2,.y-strip.c3,.y-strip.c4,.y-strip.c5 { grid-template-columns: 1fr; } .y-filters { gap: 10px; } .card-body { padding: 12px !important; } } /* ========================================================================== 13 · custom_admin.css ilə UZLAŞMA -------------------------------------------------------------------------- custom_admin.css (65 KB, 763 ədəd !important) bəzi yerlərdə bu fayldan daha yüksək spesifikliyə malikdir. Burada iki üsul işlədilir: a) onun CSS dəyişənlərini yenidən təyin etmək (spesifiklik döyüşü yoxdur) b) yalnız lazım olan yerlərdə selektoru eyni səviyyəyə qaldırmaq ========================================================================== */ /* ── (a) Dəyişənləri brend paletinə köçür ───────────────── */ :root { --yollda-primary: #19423C; /* köhnə: #163327 */ --yollda-secondary: #19423C; /* köhnə: #1e4435 — gradient düz rəngə çevrilir */ --yollda-accent: #1F534B; /* köhnə: #2a5f4a */ --yollda-green: #31E062; /* köhnə: #2dce89 (Argon) */ --yollda-green-hover: #5DE684; /* köhnə: #24b87a */ --input-border: #E5E7EB; /* köhnə: #d2d6da */ --input-radius: 7px; /* köhnə: 0.5rem */ --input-focus-shadow: 0 0 0 3px var(--y-focus); } /* ── (b) Sidebar fonu: gradient → düz brend rəngi ────────── */ #sidenav-main, .sidenav.navbar-vertical, .navbar-vertical.navbar-expand-xs, body .sidenav { background: var(--y-sidebar) !important; background-image: none !important; } /* ── (b) Naviqasiya elementləri — custom_admin.css ilə eyni spesifiklik, sonra yükləndiyi üçün bu qalib gəlir ── */ .sidenav .navbar-nav > .nav-item > .nav-link { color: rgba(255,255,255,.72) !important; font-size: 13px !important; font-weight: 450 !important; padding: 7px 12px !important; margin: 1px 10px !important; border-radius: var(--y-radius-sm) !important; position: relative; } .sidenav .navbar-nav > .nav-item > .nav-link i { color: rgba(255,255,255,.62) !important; font-size: 12.5px !important; width: 16px !important; } .sidenav .navbar-nav > .nav-item > .nav-link:hover { color: #fff !important; background-color: rgba(255,255,255,.06) !important; } .sidenav .navbar-nav > .nav-item > .nav-link:hover i { color: #fff !important; } /* Aktiv: ağ mətn + parlaq yaşıl sol zolaq (yaşıl mətn ƏVƏZİNƏ) */ .sidenav .navbar-nav > .nav-item > .nav-link.active { color: #fff !important; background-color: rgba(255,255,255,.10) !important; font-weight: 600 !important; } .sidenav .navbar-nav > .nav-item > .nav-link.active i { color: #fff !important; } .sidenav .navbar-nav > .nav-item > .nav-link.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--y-b900); } .sidenav .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] { color: #fff !important; background-color: rgba(255,255,255,.07) !important; } .sidenav .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] i { color: #fff !important; } /* Alt menyu */ .sidenav .navbar-nav .nav.nav-sm .nav-item .nav-link { font-size: 12.5px !important; font-weight: 400 !important; color: rgba(255,255,255,.55) !important; padding: 5px 12px 5px 18px !important; margin: 1px 10px !important; border-radius: var(--y-radius-sm) !important; gap: 9px !important; } .sidenav .navbar-nav .nav.nav-sm .nav-item .nav-link::before { width: 4px !important; height: 4px !important; background: rgba(255,255,255,.28) !important; } .sidenav .navbar-nav .nav.nav-sm .nav-item .nav-link:hover { color: #fff !important; background-color: rgba(255,255,255,.06) !important; } .sidenav .navbar-nav .nav.nav-sm .nav-item .nav-link:hover::before { background: var(--y-b900) !important; } .sidenav .navbar-nav .nav.nav-sm .nav-item .nav-link.active { color: #fff !important; background-color: rgba(255,255,255,.10) !important; font-weight: 600 !important; } .sidenav .navbar-nav .nav.nav-sm .nav-item .nav-link.active::before { background: var(--y-b900) !important; } .sidenav .navbar-heading { color: rgba(255,255,255,.38) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .07em !important; padding: 14px 20px 6px !important; } /* ── (b) Üst lent: gradient söndürüldüyü üçün boşluğu bərpa et ── */ .main-content > .header, .main-content > .container-fluid > .header { padding-bottom: .5rem !important; } /* ========================================================================== 14 · YOXLAMADAN SONRAKI DÜZƏLİŞLƏR ========================================================================== */ /* Sidebar alt menyusu sətir yox, sütun olmalıdır (Bootstrap .nav default: row) */ .sidenav .navbar-nav .nav, .sidenav .navbar-nav .nav.nav-sm { flex-direction: column !important; flex-wrap: nowrap !important; } /* Topbar toolbar: düzüm custom_admin.css-də qalır (bax: bölmə 16) */ .object-tools a,.object-tools a:link,.object-tools a:visited { white-space: nowrap !important; line-height: 1.2 !important; } /* Django mesajları kənara yapışmasın */ .messagelist { margin: 12px 24px !important; } /* Kart başlığı: başlıq solda, əməliyyat sağda. Yalnız .y-ch işarəsi olan başlıqlara tətbiq olunur ki, Argon-un öz .card-header > .row strukturları pozulmasın. */ .card-header.y-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-header.y-ch > div:first-child { min-width: 0; } /* Boş cədvəl xanası kartın altına yapışmasın */ .card > .table-responsive > .table > tbody > tr > td > .y-empty { padding: 24px 12px; } /* ========================================================================== 15 · DJANGO ADMIN INDEX (admin/index.html) və AUTH SƏHİFƏLƏRİ ========================================================================== */ /* ── Admin index: bg-primary lent ── */ .header.bg-primary,.header.bg-secondary,.header.bg-default,.header.bg-dark { background: transparent !important; background-image: none !important; } /* ── Stat kartlarındakı gradient dairələr → neytral kvadrat çip ── */ .icon.icon-shape,.icon-shape { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: var(--y-g100) !important; background-image: none !important; color: var(--y-g600) !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 13px !important; } .icon.icon-shape.text-white,.icon-shape.text-white { color: var(--y-g600) !important; } .icon.icon-shape i,.icon-shape i { font-size: 13px !important; } /* ── .card-stats tipografiyası ── */ .card-stats { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; box-shadow: none !important; } .card-stats:hover { transform: none !important; box-shadow: none !important; } .card-stats .card-title { font-size: 11px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--y-g500) !important; margin-bottom: 5px !important; } .card-stats .h2,.card-stats h2,.card-stats .font-weight-bold { font-size: 23px !important; font-weight: 650 !important; letter-spacing: -.025em !important; color: var(--y-g900) !important; font-variant-numeric: tabular-nums; } .card-stats .text-success { color: var(--y-b-ink) !important; } .card-stats .text-danger { color: var(--y-dngr-ink) !important; } .card-stats .text-warning { color: var(--y-warn-ink) !important; } /* ── Auth səhifələri (login / OTP / şifrə sıfırlama) ── */ body.bg-default,body.bg-primary,body.bg-dark { background: var(--y-g50) !important; background-image: none !important; } /* Argon-un əyri ayırıcısı və rəngli lenti auth-da lazım deyil */ .separator.separator-skew,.separator-bottom.separator-skew { display: none !important; } .y-auth { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .y-auth-card { width: 100%; max-width: 380px; background: var(--y-card); border: 1px solid var(--y-g200); border-radius: 12px; padding: 32px 28px; } .y-auth-brand { text-align: center; margin-bottom: 24px; } .y-auth-logo { width: 44px; height: 44px; border-radius: 11px; margin: 0 auto 16px; background: var(--y-d800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; } .y-auth-brand h1 { font-size: 18px !important; margin: 0 0 6px !important; color: var(--y-g900) !important; } .y-auth-brand p { font-size: 12.5px; color: var(--y-g500); margin: 0; line-height: 1.5; } .y-auth-phone { text-align: center; font-size: 14px; font-weight: 600; color: var(--y-g900); background: var(--y-g50); border: 1px solid var(--y-g200); border-radius: var(--y-radius-sm); padding: 8px 12px; margin-bottom: 20px; font-variant-numeric: tabular-nums; } .y-field { margin-bottom: 16px; } .y-field label { display: block; font-size: 12px !important; font-weight: 500 !important; color: var(--y-g600) !important; margin-bottom: 6px; } .y-field .form-control { width: 100%; height: 38px; } .y-phone-group { display: flex; gap: 8px; } .y-phone-prefix { width: 74px !important; flex: 0 0 74px; background: var(--y-g50) !important; color: var(--y-g500) !important; text-align: center; cursor: default; } .y-otp { text-align: center; letter-spacing: .5em; font-size: 18px !important; font-weight: 600; font-variant-numeric: tabular-nums; height: 46px !important; padding-left: .5em !important; } .y-auth-submit { width: 100%; height: 38px; margin-top: 4px; font-size: 13px !important; font-weight: 500 !important; } .y-auth-foot { text-align: center; margin-top: 18px; } .y-auth-foot a { font-size: 12.5px; color: var(--y-g500) !important; } .y-auth-foot a:hover { color: var(--y-g900) !important; text-decoration: underline; } .y-auth .alert { margin-bottom: 18px; } /* auth səhifəsində navbar/footer sadələşir */ .navbar-horizontal.navbar-transparent,.footer.bg-default,.footer { background: transparent !important; border-top: 1px solid var(--y-g200) !important; } .footer .copyright,.footer a { color: var(--y-g500) !important; font-size: 12px !important; } /* ========================================================================== 16 · CHANGELIST TOOLBAR-I NAVBAR-DA -------------------------------------------------------------------------- custom_admin.css-in 23-cü bölməsi bu toolbar-ı YAŞIL navbar üçün yazıb: inputlarda `border:none` + yarı-şəffaf ağ fon. Navbar ağ olduğu üçün həmin elementlər görünməz olurdu. Burada onlar ağ fon üçün yenidən qurulur və filtrlərin alt-alta düşməsinin qarşısı alınır. ========================================================================== */ /* Düzüm: bir sətir, heç vaxt sarılmır */ .cl-nav-toolbar { flex: 1 1 auto !important; flex-wrap: nowrap !important; gap: 6px !important; min-width: 0 !important; overflow: hidden; } .cl-nav-toolbar .cl-search-wrapper { flex: 0 1 auto !important; min-width: 0 !important; } .cl-nav-toolbar .cl-tools-wrapper { flex: 0 0 auto !important; gap: 6px; } /* Filtrlər sığmasa alt-alta düşmək əvəzinə üfüqi sürüşsün */ .cl-nav-toolbar .cl-toolbar-row, .cl-nav-toolbar .cl-filter-group { flex-wrap: nowrap !important; gap: 6px !important; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .cl-nav-toolbar .cl-filter-group::-webkit-scrollbar { height: 4px; } .cl-nav-toolbar .cl-filter-group::-webkit-scrollbar-thumb { background: var(--y-g300); border-radius: 2px; } /* Axtarış qutusu — ağ fonda görünən sərhəd */ .cl-nav-toolbar .cl-search-group { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; min-height: 30px !important; max-height: 30px !important; max-width: 240px !important; box-shadow: none !important; } .cl-nav-toolbar .cl-search-group:focus-within { border-color: var(--y-d700) !important; box-shadow: 0 0 0 3px var(--y-focus) !important; } .cl-nav-toolbar .cl-search-input { color: var(--y-g900) !important; background: transparent !important; font-size: 12.5px !important; height: 28px !important; } .cl-nav-toolbar .cl-search-input::placeholder { color: var(--y-g400) !important; } .cl-nav-toolbar .cl-search-icon svg { fill: var(--y-g400) !important; } /* Filtr select-ləri — ağ fonda görünən sərhəd */ .cl-nav-toolbar .cl-filter-select, .cl-nav-toolbar .cl-filter-group select { background-color: var(--y-card) !important; border: 1px solid var(--y-g200) !important; color: var(--y-g700) !important; font-size: 12px !important; font-weight: 500 !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 6px !important; /* oxunaqlılıq həddi: bundan aşağı sıxılmaqdansa qrup üfüqi sürüşür */ min-width: 104px !important; max-width: 160px !important; border-radius: var(--y-radius-sm) !important; box-shadow: none !important; flex: 0 1 auto; } .cl-nav-toolbar .cl-filter-select:focus, .cl-nav-toolbar .cl-filter-group select:focus { background-color: var(--y-card) !important; border-color: var(--y-d700) !important; box-shadow: 0 0 0 3px var(--y-focus) !important; outline: none !important; } .cl-nav-toolbar .cl-filter-select option, .cl-nav-toolbar .cl-filter-group select option { background: var(--y-card) !important; color: var(--y-g900) !important; } /* filtr etiketi (məs. "Chat type:") */ .cl-nav-toolbar .cl-filter-group label { color: var(--y-g500) !important; font-size: 11.5px !important; white-space: nowrap; } /* Axtarış və əlavəetmə düymələri */ .cl-nav-toolbar .cl-search-btn { background: var(--y-d800) !important; border: 1px solid var(--y-d800) !important; color: #fff !important; height: 30px !important; min-height: 30px !important; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 500 !important; border-radius: var(--y-radius-sm) !important; white-space: nowrap; } .cl-nav-toolbar .cl-search-btn:hover { background: var(--y-d900) !important; border-color: var(--y-d900) !important; } .cl-nav-toolbar .cl-add-btn,.cl-nav-toolbar .cl-save-icon-btn { background-color: var(--y-d800) !important; border: 1px solid var(--y-d800) !important; color: #fff !important; width: 30px !important; height: 30px !important; min-height: 30px !important; border-radius: var(--y-radius-sm) !important; flex-shrink: 0; } .cl-nav-toolbar .cl-add-btn:hover,.cl-nav-toolbar .cl-save-icon-btn:hover { background-color: var(--y-d900) !important; border-color: var(--y-d900) !important; } /* navbar-ın hündürlüyü toolbar-dan böyüməsin */ .navbar-top .navbar-collapse { flex-wrap: nowrap !important; min-width: 0; } .navbar-top { flex-wrap: nowrap !important; } /* ========================================================================== 17 · TÜND REJİM -------------------------------------------------------------------------- Tünd dəyərlər işıqlının riyazi tərsi DEYİL — hər pillə tünd səthə qarşı ayrıca seçilib. İki sahə var: OS ayarı (prefers-color-scheme) və istifadəçinin açarı (data-theme). Açar hər iki istiqamətdə OS-i üstələməlidir, ona görə media blokunda `:not([data-theme="light"])` mühafizəsi var. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; /* Neytral — tünd səth üçün AYRICA seçilmiş pillələr (tərs çevirmə deyil). Yaşıla çalan boz: brend tünd yaşıl olduğu üçün saf boz "ölü" görünür. */ --y-g50:#111917; --y-g100:#16201D; --y-g200:#2A3733; --y-g300:#384944; --y-g400:#6F827C; --y-g500:#93A49F; --y-g600:#AFBDB8; --y-g700:#C7D2CE; --y-g800:#DCE5E2; --y-g900:#EBF1EF; /* Səthlər: səhifə (g50) < kart — kart bir pillə YUXARI qalxır */ --y-card:#1C2724; --y-sidebar:#0D1614; /* chrome kartdan da tünd qalır */ /* Brend: tünd fonda #1F534B görünmür, ona görə yuxarı pillələnib */ --y-d500:#23423B; --y-d600:#2A4F46; --y-d650:#356156; --y-d700:#3F7870; --y-d800:#2E7A6B; /* əsas əməliyyat düyməsi */ --y-d900:#379180; /* hover */ --y-d1k:#0B2B26; --y-badge-brand-bg:#1E3A33; --y-badge-brand-ink:#7FD9C2; --y-focus:rgba(55,145,128,.24); /* Parlaq yaşıl — status və müsbət dəyişmə */ --y-b100:#10281C; --y-b500:#89EDA6; --y-b700:#5DE684; --y-b900:#31E062; --y-b-ink:#5DE684; --y-b-bd:#1E4A32; /* Semantik — tünd fonda tintlər tünd, mətn açıq olur */ --y-warn:#FFA755; --y-warn-bg:#2A1E0E; --y-warn-ink:#FFC085; --y-warn-bd:#4A3316; --y-warn-hover:#FFB870; --y-dngr:#FF7070; --y-dngr-bg:#2A1515; --y-dngr-ink:#FF9A9A; --y-dngr-bd:#4C2424; --y-dngr-hover:#FF8585; --y-info:#6E9BE0; --y-info-bg:#141E31; --y-info-ink:#9DBBF3; --y-info-bd:#243758; /* Data-viz — EYNİ çalar sırası, tünd səth üçün yenidən pillələnib. validate_palette.js --mode dark: CVD ΔE 9.1 · normal ΔE 18.4 · kontrast hamısı ≥3:1 */ --y-s1:#12A377; --y-s2:#BE7229; --y-s3:#5B85DA; --y-s4:#C96A9E; --y-s-other:#6F827C; --y-s-good:#12A377; --y-s-crit:#E06B6B; --y-s-agg:#93A49F; --y-s1-hover:#16BA89; /* Sıralı ramp — tünddən parlağa (işıqlıda əksinədir) */ --y-ramp-0:#182320; --y-ramp-1:#1E3A33; --y-ramp-2:#255245; --y-ramp-3:#2C6C59; --y-ramp-4:#33886E; --y-ramp-5:#3CA684; /* custom_admin.css-in öz dəyişənləri */ --yollda-primary:#0D1614; --yollda-secondary:#0D1614; --yollda-accent:#2E7A6B; --yollda-green:#31E062; --yollda-green-hover:#5DE684; --input-border:#2A3733; --input-focus-shadow:0 0 0 3px rgba(55,145,128,.24); --y-shadow-pop:0 8px 24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4); } } :root[data-theme="dark"] { color-scheme: dark; /* Neytral — tünd səth üçün AYRICA seçilmiş pillələr (tərs çevirmə deyil). Yaşıla çalan boz: brend tünd yaşıl olduğu üçün saf boz "ölü" görünür. */ --y-g50:#111917; --y-g100:#16201D; --y-g200:#2A3733; --y-g300:#384944; --y-g400:#6F827C; --y-g500:#93A49F; --y-g600:#AFBDB8; --y-g700:#C7D2CE; --y-g800:#DCE5E2; --y-g900:#EBF1EF; /* Səthlər: səhifə (g50) < kart — kart bir pillə YUXARI qalxır */ --y-card:#1C2724; --y-sidebar:#0D1614; /* chrome kartdan da tünd qalır */ /* Brend: tünd fonda #1F534B görünmür, ona görə yuxarı pillələnib */ --y-d500:#23423B; --y-d600:#2A4F46; --y-d650:#356156; --y-d700:#3F7870; --y-d800:#2E7A6B; /* əsas əməliyyat düyməsi */ --y-d900:#379180; /* hover */ --y-d1k:#0B2B26; --y-badge-brand-bg:#1E3A33; --y-badge-brand-ink:#7FD9C2; --y-focus:rgba(55,145,128,.24); /* Parlaq yaşıl — status və müsbət dəyişmə */ --y-b100:#10281C; --y-b500:#89EDA6; --y-b700:#5DE684; --y-b900:#31E062; --y-b-ink:#5DE684; --y-b-bd:#1E4A32; /* Semantik — tünd fonda tintlər tünd, mətn açıq olur */ --y-warn:#FFA755; --y-warn-bg:#2A1E0E; --y-warn-ink:#FFC085; --y-warn-bd:#4A3316; --y-warn-hover:#FFB870; --y-dngr:#FF7070; --y-dngr-bg:#2A1515; --y-dngr-ink:#FF9A9A; --y-dngr-bd:#4C2424; --y-dngr-hover:#FF8585; --y-info:#6E9BE0; --y-info-bg:#141E31; --y-info-ink:#9DBBF3; --y-info-bd:#243758; /* Data-viz — EYNİ çalar sırası, tünd səth üçün yenidən pillələnib. validate_palette.js --mode dark: CVD ΔE 9.1 · normal ΔE 18.4 · kontrast hamısı ≥3:1 */ --y-s1:#12A377; --y-s2:#BE7229; --y-s3:#5B85DA; --y-s4:#C96A9E; --y-s-other:#6F827C; --y-s-good:#12A377; --y-s-crit:#E06B6B; --y-s-agg:#93A49F; --y-s1-hover:#16BA89; /* Sıralı ramp — tünddən parlağa (işıqlıda əksinədir) */ --y-ramp-0:#182320; --y-ramp-1:#1E3A33; --y-ramp-2:#255245; --y-ramp-3:#2C6C59; --y-ramp-4:#33886E; --y-ramp-5:#3CA684; /* custom_admin.css-in öz dəyişənləri */ --yollda-primary:#0D1614; --yollda-secondary:#0D1614; --yollda-accent:#2E7A6B; --yollda-green:#31E062; --yollda-green-hover:#5DE684; --input-border:#2A3733; --input-focus-shadow:0 0 0 3px rgba(55,145,128,.24); --y-shadow-pop:0 8px 24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4); } /* ── Tünd rejimə xas düzəlişlər ─────────────────────────── */ /* Xəritə plitələri: açıq OSM plitələri tünd interfeysdə göz deşir */ :root[data-theme="dark"] .leaflet-tile, :root[data-theme="dark"] .leaflet-layer { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); } :root[data-theme="dark"] .leaflet-container { background: var(--y-g50); } :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--y-card); color: var(--y-g900); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .leaflet-tile, :root:where(:not([data-theme="light"])) .leaflet-layer { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); } :root:where(:not([data-theme="light"])) .leaflet-container { background: var(--y-g50); } } /* Sidebar loqosu hər iki rejimdə ağdır — filtr saxlanılır */ /* Şəkillər tünd fonda bir az yumşaldılır */ :root[data-theme="dark"] .msg-image, :root[data-theme="dark"] img.rounded { filter: brightness(.94); } /* ========================================================================== 18 · NAVBAR AÇARLARI — dil dəyişdiricisi + işıqlı/tünd -------------------------------------------------------------------------- navigation.html-dəki .lang-switcher-toggle köhnə YAŞIL navbar üçün ağ mətn və ağ sərhədlə yazılmışdı; ağ navbar-da sərhəd görünmür. Hər ikisi eyni görünüşə gətirilir. ========================================================================== */ .navbar-top .lang-switcher-toggle, .navbar-top .y-theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 10px !important; background: transparent !important; border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius-sm) !important; color: var(--y-g600) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .navbar-top .lang-switcher-toggle:hover, .navbar-top .y-theme-toggle:hover { background: var(--y-g50) !important; border-color: var(--y-g300) !important; color: var(--y-g900) !important; } .navbar-top .y-theme-toggle { width: 30px; padding: 0 !important; } .lang-globe,.lang-caret { opacity: .7; } .lang-dropdown { border: 1px solid var(--y-g200) !important; border-radius: var(--y-radius) !important; box-shadow: var(--y-shadow-pop) !important; background: var(--y-card) !important; } .lang-item { color: var(--y-g700) !important; } .lang-item:hover { background: var(--y-g50) !important; color: var(--y-g900) !important; } .lang-item--active { background: var(--y-badge-brand-bg) !important; color: var(--y-badge-brand-ink) !important; font-weight: 600 !important; } /* İkonlar: işıqlıda ay (→ tündə keç), tünddə günəş (→ işığa keç) */ .y-ico-to-light { display: none; } .y-ico-to-dark { display: inline-block; } :root[data-theme="dark"] .y-ico-to-light { display: inline-block; } :root[data-theme="dark"] .y-ico-to-dark { display: none; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .y-ico-to-light { display: inline-block; } :root:where(:not([data-theme="light"])) .y-ico-to-dark { display: none; } } /* ========================================================================== 19 · ARGON BAŞLIQ BÖLGƏSİ — üst-üstə düşmənin qarşısı -------------------------------------------------------------------------- Argon nümunəsi belədir: .header böyük `pb-7` ilə rəngli lent yaradır, ondan sonrakı .container-fluid isə `mt--6` ilə lentin İÇİNƏ dartılır. Lent götürüldüyü üçün o mənfi kənar boşluq indi məzmunu yuxarıdakı kartların üstünə çıxarır. Şablonlardan da silinib, burada isə hər ehtimala qarşı daha yüksək spesifikliklə bağlanır. ========================================================================== */ .container-fluid.mt--3,.container-fluid.mt--4,.container-fluid.mt--5, .container-fluid.mt--6,.container-fluid.mt--7,.container-fluid.mt--8, .container.mt--5,.container.mt--6,.container.mt--7,.container.mt--8, .main-content .mt--5,.main-content .mt--6,.main-content .mt--7,.main-content .mt--8 { margin-top: 0 !important; } /* Başlıqdakı h1 Argon-un böyük ölçüsündə qalır və breadcrumb-ın üstünə düşürdü */ .header h1,.header .h1,.header-body h1,.header-body .h1, .main-content .header h1 { font-size: 20px !important; line-height: 1.35 !important; font-weight: 650 !important; letter-spacing: -.02em !important; margin-bottom: 4px !important; color: var(--y-g900) !important; } .header .breadcrumb,.header-body .breadcrumb { margin-bottom: 0 !important; } .header-body { padding-top: 18px !important; padding-bottom: 10px !important; } /* Üst panel: `bg-primary` sinfi qalsa belə ağ (tünddə kart rəngi) olmalıdır */ .navbar.navbar-top,.navbar.navbar-top.bg-primary,.navbar.navbar-top.bg-default, .main-content > .navbar-top { background: var(--y-card) !important; background-image: none !important; border-bottom: 1px solid var(--y-g200) !important; } .navbar.navbar-top .nav-link,.navbar.navbar-top .navbar-nav .nav-link { color: var(--y-g600) !important; } .navbar.navbar-top .nav-link:hover { color: var(--y-g900) !important; } /* ========================================================================== 20 · custom_admin.css-in SABİT RƏNGLƏRİNİN TOKENLƏŞDİRİLMƏSİ -------------------------------------------------------------------------- custom_admin.css-də 48 qayda rəngi birbaşa yazır (#344767 Argon tünd-mavisi, #f0f7f4 nanə, #2dce89 Argon yaşılı, #8898aa boz). Onlar `nav.toplinks`, `input[type="text"]`, `#result_list thead th` kimi element+class və ya id selektorları olduğu üçün mənim yalnız-class qaydalarımı üstələyirdi: işıqlı rejim qarışıq görünürdü, tünd rejimdə isə fonlar ağ qalırdı. Burada hər biri eyni selektorla, token dəyəri ilə yenidən yazılır. ========================================================================== */ /* ── Tarix iyerarxiyası (ay filtrləri) ─────────────────── */ nav.toplinks,.xfull nav.toplinks { margin: 0 0 16px !important; padding: 14px 0 0 !important; /* yuxarıdakı toolbar-a yapışmasın */ gap: 6px !important; font-size: 12px !important; } nav.toplinks a,nav.toplinks a.date-back { padding: 4px 11px !important; border-radius: var(--y-radius-sm) !important; font-size: 12px !important; font-weight: 500 !important; background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; color: var(--y-g700) !important; } nav.toplinks a:hover,nav.toplinks a.date-back:hover { background: var(--y-g50) !important; border-color: var(--y-g300) !important; color: var(--y-g900) !important; } nav.toplinks span { padding: 4px 11px !important; border-radius: var(--y-radius-sm) !important; font-size: 12px !important; font-weight: 600 !important; background: var(--y-d800) !important; border: 1px solid var(--y-d800) !important; color: #fff !important; } /* ── Form sahələri: Argon tünd-mavi mətn → token ────────── */ input[type="text"],input[type="number"],input[type="email"],input[type="url"], input[type="password"],input[type="tel"],input[type="search"],input[type="date"], input[type="datetime-local"],input[type="time"],textarea,select { color: var(--y-g900) !important; background-color: var(--y-card) !important; border-color: var(--y-g200) !important; } input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus, input[type="password"]:focus,input[type="search"]:focus,textarea:focus,select:focus { background-color: var(--y-card) !important; border-color: var(--y-d700) !important; } .help,.help-block,p.help,p.datetime .datetime-label,p.datetime > span { color: var(--y-g500) !important; } /* ── Cədvəl başlığı və sətir hover ─────────────────────── */ #result_list thead th,#result_list thead th a,#result_list thead th a:hover { background: var(--y-g50) !important; color: var(--y-g500) !important; } #result_list thead th a:hover { color: var(--y-g900) !important; } #result_list tbody tr:hover { background: var(--y-g50) !important; } .card-header h5,.card-header .h3,.card-header .h5 { color: var(--y-g900) !important; } /* ── Səhifələmə ────────────────────────────────────────── */ .paginator .this-page.nav-disabled { background: var(--y-g100) !important; border-color: var(--y-g200) !important; color: var(--y-g400) !important; } .paginator a.showall:hover { background: var(--y-d800) !important; color: #fff !important; } /* ── filter_horizontal seçici ──────────────────────────── */ .selector-filter input,.selector .selector-available input,.selector .selector-chosen input { border: 1px solid var(--y-g200) !important; background: var(--y-card) !important; color: var(--y-g900) !important; } .selector select option:checked,.selector select option:hover { background: var(--y-badge-brand-bg) !important; color: var(--y-badge-brand-ink) !important; } a.selector-chooseall,a.selector-clearall { border: 1px solid var(--y-g200) !important; background: var(--y-g50) !important; color: var(--y-g500) !important; border-radius: var(--y-radius-sm) !important; } a.active.selector-chooseall { background: var(--y-b100) !important; color: var(--y-b-ink) !important; border-color: var(--y-b-bd) !important; } a.active.selector-chooseall:hover { background: var(--y-d800) !important; color: #fff !important; border-color: var(--y-d800) !important; } a.active.selector-clearall { background: var(--y-dngr-bg) !important; color: var(--y-dngr-ink) !important; border-color: var(--y-dngr-bd) !important; } a.active.selector-clearall:hover { background: var(--y-dngr) !important; color: #fff !important; border-color: var(--y-dngr) !important; } .selector-add::before,.selector-remove::before { color: var(--y-g400) !important; } .active.selector-add::before,.active.selector-remove::before { color: var(--y-g900) !important; } /* ── select2 ───────────────────────────────────────────── */ .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single { border-color: var(--y-g200) !important; background: var(--y-card) !important; } .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--y-d700) !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--y-badge-brand-bg) !important; color: var(--y-badge-brand-ink) !important; border-color: var(--y-d650) !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--y-badge-brand-ink) !important; } .select2-container--default .select2-search--inline .select2-search__field, .select2-container--default .select2-search--dropdown .select2-search__field { color: var(--y-g900) !important; background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--y-d800) !important; color: #fff !important; } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--y-badge-brand-bg) !important; color: var(--y-badge-brand-ink) !important; } .select2-results,.select2-dropdown { background: var(--y-card) !important; color: var(--y-g900) !important; } /* ── Digər Argon qalıqları ─────────────────────────────── */ .nav-tabs .nav-link.text-danger { color: var(--y-dngr-ink) !important; } .submit-row a.deletelink:hover { background: var(--y-dngr) !important; color: #fff !important; } .yollda-field-row.errors .yollda-field-inner { background: var(--y-dngr-bg) !important; } .inline-group .tabular.inline-related thead tr.original th { background: var(--y-g50) !important; color: var(--y-g500) !important; } .cl-nav-toolbar .cl-search-input::placeholder { color: var(--y-g400) !important; } .cl-nav-toolbar .cl-filter-select,.cl-nav-toolbar .cl-filter-group select { color: var(--y-g700) !important; } .cl-nav-toolbar .cl-filter-select option,.cl-nav-toolbar .cl-filter-group select option { background: var(--y-card) !important; color: var(--y-g900) !important; } /* ========================================================================== 21 · ÜST PANELDƏ İKON ÜSTÜ SAYĞAC (bildiriş badge-i) -------------------------------------------------------------------------- Markup: 1. Argon onu absolute yerləşdirir, amma bölmə 7-dəki ümumi .badge qaydası ona həb forması və solğun tint verirdi — nəticədə ikonun yanında asılı qalırdı. Burada kiçik, dairəvi, dolu sayğaca çevrilir. ========================================================================== */ .navbar-top .nav-item > .nav-link { position: relative; } .navbar-top .nav-item > .nav-link > .badge { /* Ölçülər canlı səhifədə yoxlanılıb: nav-link 45×27, padding 4px 16px, ikon 13×13 mərkəzdə. right:10px sayğacı ikonun sağ-üst küncünə oturdur. */ position: absolute !important; top: 1px; right: 10px; min-width: 14px; height: 14px; padding: 0 3px !important; border-radius: 999px !important; background: var(--y-dngr) !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; border: 2px solid var(--y-card); box-sizing: border-box; pointer-events: none; } /* Sayğac boş olanda (hələ yüklənməyib / sıfır) görünməsin */ .navbar-top .nav-item > .nav-link > .badge:empty { display: none !important; } /* ========================================================================== 22 · assets/css/updated.css-in SABİT RƏNGLƏRİ -------------------------------------------------------------------------- updated.css (13 KB) auditdən keçirilməmişdi. Orada 24 qayda rəngi birbaşa yazır — cədvəl zolaqları #f6f6f6/#FBFBFB, mesajlar Bootstrap 4 alert rəngləri, formalar #f9f9f9 fon və #333 mətn. `table.table tbody tr:nth-child()` kimi selektorlar mənim class qaydalarımdan spesifikdir, ona görə tünd rejimdə cədvəl sətirləri ağ qalırdı. Burada hamısı tokenə bağlanır — bu, həm tünd rejimi düzəldir, həm işıqlıda Argon qalıqlarını təmizləyir. ========================================================================== */ /* ── Cədvəl: zebra zolağı yoxdur, yalnız hover ─────────── */ table.table tbody tr:nth-child(even), table.table tbody tr:nth-child(odd), table.table tbody tr { background-color: transparent !important; } table.table tbody tr:hover { background-color: var(--y-g50) !important; } .filter_panel ul li:nth-child(even) > a { background-color: transparent !important; } /* ── Formalar ──────────────────────────────────────────── */ .form-group input,.form-group textarea { color: var(--y-g900) !important; background-color: var(--y-card) !important; border-color: var(--y-g200) !important; } .form-group input:focus,.form-group textarea:focus { background-color: var(--y-card) !important; border-color: var(--y-d700) !important; } .form-group input.error,.form-group textarea.error { background-color: var(--y-dngr-bg) !important; border-color: var(--y-dngr-bd) !important; color: var(--y-g900) !important; } .form-group label { color: var(--y-g700) !important; } .clockbox,.calendarbox { background: var(--y-card) !important; border: 1px solid var(--y-g200) !important; color: var(--y-g900) !important; } .calendarbox caption,.clockbox h2 { background: var(--y-g50) !important; color: var(--y-g700) !important; } /* ── Django mesajları: Bootstrap 4 alert rəngləri → brend ─ */ ul.messagelist li.success { background-color: var(--y-b100) !important; color: var(--y-b-ink) !important; border-color: var(--y-b-bd) !important; } ul.messagelist li.error { background-color: var(--y-dngr-bg) !important; color: var(--y-dngr-ink) !important; border-color: var(--y-dngr-bd) !important; } ul.messagelist li.warning { background-color: var(--y-warn-bg) !important; color: var(--y-warn-ink) !important; border-color: var(--y-warn-bd) !important; } ul.messagelist li.info { background-color: var(--y-info-bg) !important; color: var(--y-info-ink) !important; border-color: var(--y-info-bd) !important; } /* ── Digər açıq səthlər ────────────────────────────────── */ .collapse-header-primary { background-color: var(--y-g50) !important; color: var(--y-g700) !important; } #change-list-filters { background-color: var(--y-card) !important; border: 1px solid var(--y-g200) !important; } .bg-grayy { background-color: var(--y-g100) !important; } .payment-section { background: var(--y-g50) !important; border: 1px solid var(--y-g200) !important; } .nav-item.nav-item-admin-links:hover { background-color: var(--y-g100) !important; } .text-primary { color: var(--y-d800) !important; } /* ── Üzən səthlər: dropdown, list-group, modal ─────────── */ .dropdown-menu,.dropdown-menu-xl,.notification-dropdown { background-color: var(--y-card) !important; color: var(--y-g900) !important; } .dropdown-menu .text-muted,.dropdown-menu .text-sm { color: var(--y-g500) !important; } .list-group-item,a.list-group-item,.notif-item { background-color: var(--y-card) !important; border-color: var(--y-g200) !important; color: var(--y-g700) !important; } .list-group-item:hover,a.list-group-item:hover,.notif-item:hover { background-color: var(--y-g50) !important; color: var(--y-g900) !important; } .modal-content { background-color: var(--y-card) !important; color: var(--y-g900) !important; } .modal-header,.modal-body,.modal-footer { color: var(--y-g900) !important; } .modal-header .close,.modal-header .btn-close { color: var(--y-g500) !important; } .modal-backdrop { background-color: #000 !important; } /* ── Dil menyusundakı aktiv sətir ──────────────────────── */ .lang-dropdown .lang-item,button.dropdown-item.lang-item { color: var(--y-g700) !important; background: transparent !important; } .lang-dropdown .lang-item:hover,button.dropdown-item.lang-item:hover { background: var(--y-g50) !important; color: var(--y-g900) !important; } .lang-dropdown .lang-item--active,button.dropdown-item.lang-item.lang-item--active { background: var(--y-badge-brand-bg) !important; color: var(--y-badge-brand-ink) !important; font-weight: 600 !important; } /* ========================================================================== 23 · DJANGO WIDGETS.CSS -------------------------------------------------------------------------- Django-nun öz widgets.css faylı (təqvim, filter_horizontal seçicisi) bir neçə rəngi birbaşa yazır. Fayl Django-ya məxsusdur — yeniləmədə üzərinə yazıla bilər, ona görə onu redaktə etmək əvəzinə burada üstələyirik. ========================================================================== */ .stacked ul.selector-chooser { background-color: var(--y-g100) !important; } .calendar caption,.calendarbox h2,.clockbox h2 { background: var(--y-g50) !important; color: var(--y-g700) !important; } .calendar-cancel { background: var(--y-g100) !important; color: var(--y-g700) !important; } .calendar-cancel:focus,.calendar-cancel:hover { background: var(--y-g200) !important; } .calendar td a:hover,.timelist a:hover { background: var(--y-d800) !important; color: #fff !important; } .calendar td.selected a { background: var(--y-d800) !important; color: #fff !important; } .calendar-shortcuts,.calendarbox .calendar-shortcuts { background: var(--y-g50) !important; color: var(--y-g600) !important; }