/* * ITI ডিজাইন সিস্টেম — রঙের নাম (টোকেন) আর লাইট/ডার্ক থিম। * সব লেআউটে partials/theme-init দিয়ে লোড হয়; বসায় সেই স্ক্রিপ্ট * (ফোনের সেটিং মেনে, বা "আমি" → থিম থেকে নিজে বাছাই)। * * নতুন পাতা/উপাদান বানাতে সরাসরি রং (#fff, #10272a …) না লিখে এই নামগুলো ব্যবহার করুন: * --surface কার্ড/বক্সের পটভূমি --surface-2 হালকা ধূসর পটভূমি (সেকশন, ইনপুট) * --surface-3 আরেকটু গাঢ় (হোভার, চিপ) --bg পুরো পাতার পটভূমি * --ink মূল লেখা --muted ছোট/হালকা লেখা * --line বর্ডার --line-2 খুব হালকা বিভাজক * --brand টিল (বোতাম, লিংক) --brand-tint টিলের হালকা পটভূমি (আইকনের বৃত্ত) * --brand-ink টিল রঙের লেখা (ডার্কে উজ্জ্বল) --brand-ink-d গাঢ় টিল লেখা * --ok-tint / --bad-tint / --warn-tint / --info-tint অবস্থা বোঝানো হালকা পটভূমি * --ok-ink / --bad-ink / --warn-ink অবস্থার লেখা (সফল/ভুল/সতর্ক) * --radius 14px কার্ড · --radius-sm 10px বোতাম/ইনপুট · --shadow কার্ডের ছায়া */ :root { --brand: #0f766e; --brand-d: #115e59; --brand-l: #14b8a6; --bg: #f6faf9; --surface: #fff; --surface-2: #f6faf9; --surface-3: #eef5f3; --brand-tint: #e7f5f2; --ink: #0f2a2e; --muted: #5b6f6c; --line: #e3ede9; --line-2: #eef3f2; --brand-ink: #0f766e; --brand-ink-d: #115e59; --header-bg: rgba(255, 255, 255, .94); --ok-ink: #15803d; --bad-ink: #b91c1c; --warn-ink: #9a3412; --ok-tint: #dcfce7; --bad-tint: #fee2e2; --warn-tint: #fff7ed; --info-tint: #e0f2fe; --radius: 14px; --radius-sm: 10px; --shadow: 0 8px 18px rgba(15, 42, 46, .08); /* পুরোনো নাম (layouts/site) — একই টোকেনে */ --white: var(--surface); } html[data-theme="dark"] { --brand: #1c9e8f; --brand-d: #15766b; --brand-l: #2dd4bf; --bg: #0b1312; --surface: #131e1d; --surface-2: #182524; --surface-3: #1f2f2d; --brand-tint: #15332f; --ink: #e4eeec; --muted: #9db2ae; --line: #263a38; --line-2: #1f302e; --brand-ink: #2dd4bf; --brand-ink-d: #5eead4; --header-bg: rgba(19, 30, 29, .94); --ok-ink: #86efac; --bad-ink: #fca5a5; --warn-ink: #fdba74; --ok-tint: rgba(34, 197, 94, .16); --bad-tint: rgba(239, 68, 68, .16); --warn-tint: rgba(245, 158, 11, .16); --info-tint: rgba(56, 189, 248, .14); --shadow: 0 8px 20px rgba(0, 0, 0, .35); /* layouts/site-এর পুরোনো নামগুলো */ --teal: #1c9e8f; --teal-d: #15766b; --teal-l: #2dd4bf; --slate: #9db2ae; --white: #131e1d; color-scheme: dark; } /* ───────────── ডার্ক: পাতা, লেখা, সাধারণ উপাদান ───────────── */ html[data-theme="dark"] body { background: var(--bg) !important; color: var(--ink); } html[data-theme="dark"] a { color: inherit; } html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.92); } html[data-theme="dark"] ::placeholder { color: #6f8582; } html[data-theme="dark"] hr { border-color: var(--line); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--surface-2); color: var(--ink); border-color: var(--line); } html[data-theme="dark"] input[type=checkbox], html[data-theme="dark"] input[type=radio], html[data-theme="dark"] input[type=range] { background-color: transparent; } html[data-theme="dark"] option { background: var(--surface); color: var(--ink); } html[data-theme="dark"] code { background: var(--surface-3); color: #f0abfc; } /* Bootstrap (পুরোনো প্যানেল — শিক্ষার্থী/শিক্ষক/অ্যাডমিন) */ html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-default, html[data-theme="dark"] .panel-body, html[data-theme="dark"] .well, html[data-theme="dark"] .thumbnail, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover, html[data-theme="dark"] .panel-std, html[data-theme="dark"] .card, html[data-theme="dark"] .box { background-color: var(--surface) !important; color: var(--ink); border-color: var(--line) !important; } html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-footer, html[data-theme="dark"] .panel-header, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .input-group-addon:not([style]) { background-color: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control[disabled] { background-color: var(--surface-3) !important; } html[data-theme="dark"] .table, html[data-theme="dark"] .std-table, html[data-theme="dark"] table { color: var(--ink); border-color: var(--line); } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .std-table th, html[data-theme="dark"] table th { background-color: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .std-table td, html[data-theme="dark"] table td { border-color: var(--line) !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), html[data-theme="dark"] .table-hover > tbody > tr:hover, html[data-theme="dark"] .std-table tbody tr:hover { background-color: var(--surface-2) !important; } html[data-theme="dark"] .btn-default { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; } html[data-theme="dark"] .btn-link { color: var(--brand-l); } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .help-block { color: var(--muted) !important; } html[data-theme="dark"] .label-default { background: var(--surface-3); color: var(--ink); } html[data-theme="dark"] .alert-success { background: var(--ok-tint) !important; color: #86efac !important; border-color: transparent !important; } html[data-theme="dark"] .alert-danger { background: var(--bad-tint) !important; color: #fca5a5 !important; border-color: transparent !important; } html[data-theme="dark"] .alert-warning { background: var(--warn-tint) !important; color: #fcd34d !important; border-color: transparent !important; } html[data-theme="dark"] .alert-info { background: var(--info-tint) !important; color: #7dd3fc !important; border-color: transparent !important; } html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background: var(--surface); color: var(--ink); border-color: var(--line); } html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span { background: var(--brand); border-color: var(--brand); color: #fff; } html[data-theme="dark"] .nav-tabs { border-color: var(--line); } html[data-theme="dark"] .nav-tabs > li > a { color: var(--muted); } html[data-theme="dark"] .nav-tabs > li.active > a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) var(--line) transparent !important; } html[data-theme="dark"] .page-head-line, html[data-theme="dark"] .page-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--ink); } /* অবস্থা বোঝানো হালকা রঙের বক্স — ডার্কে স্বচ্ছ রঙ */ html[data-theme="dark"] [style*="background:#dcfce7"], html[data-theme="dark"] [style*="background:#ecfdf5"] { background: var(--ok-tint) !important; } html[data-theme="dark"] [style*="background:#fee2e2"], html[data-theme="dark"] [style*="background:#fef2f2"], html[data-theme="dark"] [style*="background:#fdecea"], html[data-theme="dark"] [style*="background:#fff5f5"], html[data-theme="dark"] [style*="background:#fff3f3"] { background: var(--bad-tint) !important; } html[data-theme="dark"] [style*="background:#fff7ed"], html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background:#fff6e3"], html[data-theme="dark"] [style*="background:#fffbeb"] { background: var(--warn-tint) !important; } html[data-theme="dark"] [style*="background:#e0f2fe"], html[data-theme="dark"] [style*="background:#eef9f7"], html[data-theme="dark"] [style*="background:#ede9fe"] { background: var(--info-tint) !important; } html[data-theme="dark"] [style*="color:#9a3412"], html[data-theme="dark"] [style*="color:#b45309"] { color: #fdba74 !important; } html[data-theme="dark"] [style*="color:#b91c1c"], html[data-theme="dark"] [style*="color:#dc2626"], html[data-theme="dark"] [style*="color:#c0392b"] { color: #fca5a5 !important; } html[data-theme="dark"] [style*="color:#15803d"], html[data-theme="dark"] [style*="color:#065f46"] { color: #86efac !important; } html[data-theme="dark"] [style*="color:#0369a1"] { color: #7dd3fc !important; } html[data-theme="dark"] [style*="color:#0f766e"], html[data-theme="dark"] [style*="color:#115e59"] { color: #5eead4 !important; } /* থিম-বাছাই (আমি পাতা) */ .th-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--surface-3); border-radius: 12px; padding: 3px; } .th-seg button { border: 0; background: transparent; border-radius: 9px; padding: 9px 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .th-seg button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); } html[data-theme="dark"] .th-seg button.on { color: #5eead4; } /* ───────────── ডার্ক: পাবলিক সাইটের নির্দিষ্ট উপাদান ───────────── */ html[data-theme="dark"] header { background: var(--header-bg) !important; border-color: var(--line) !important; } html[data-theme="dark"] .site-bottomnav, html[data-theme="dark"] .app-bottomnav { background: var(--surface) !important; border-color: var(--line) !important; } html[data-theme="dark"] .nav-support { background: rgba(245, 158, 11, .16) !important; color: #fcd34d !important; } html[data-theme="dark"] .hb-ic, html[data-theme="dark"] .minis a i, html[data-theme="dark"] .ntf-ic { background: var(--brand-tint) !important; color: #5eead4 !important; } html[data-theme="dark"] .cs-th, html[data-theme="dark"] .ev-thumb, html[data-theme="dark"] .ev-hero { background: linear-gradient(135deg, #15332f, #2a2616) !important; } html[data-theme="dark"] .ptw-t.on { background: rgba(255, 255, 255, .92) !important; color: #0b5d57 !important; } html[data-theme="dark"] .hb-me, html[data-theme="dark"] .ptw { filter: saturate(.9) brightness(.9); } html[data-theme="dark"] .ev-date { filter: brightness(.9); } html[data-theme="dark"] .hcard .bar { background: var(--surface-3) !important; } html[data-theme="dark"] .cm-submit-btn:disabled { background: var(--surface-3) !important; color: var(--muted) !important; } html[data-theme="dark"] .qi-mode.m1 { background: var(--brand-tint) !important; color: #99f6e4 !important; } html[data-theme="dark"] .qi-mode.m2 { background: rgba(199, 154, 59, .16) !important; color: #fcd34d !important; } html[data-theme="dark"] label, html[data-theme="dark"] .control-label { color: var(--ink); } html[data-theme="dark"] .adm-topnav, html[data-theme="dark"] .tch-topnav, html[data-theme="dark"] .std-topnav { border-color: var(--line) !important; }