@charset "utf-8"; /* KR-VIEW Dark Mode (Gnuboard5 + Nariya Theme) - Class-based toggle: add/remove "dark" on - Designed to override Nariya/Bootstrap light defaults safely. - Put this file AFTER theme.css (and after any color/font css). */ /* ===== Color Tokens ===== */ :root{ --bg:#ffffff; --surface:#f6f7f9; --surface-2:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --link:#2563eb; --link-hover:#1d4ed8; --primary:#0d6efd; /* bootstrap primary base */ --danger:#ef4444; --warning:#f59e0b; --success:#22c55e; --shadow:0 1px 2px rgba(0,0,0,.08); --shadow-lg:0 10px 25px rgba(0,0,0,.12); --code-bg:#f3f4f6; --code-text:#111827; } html.dark{ --bg:#0b0f14; --surface:#121826; --surface-2:#0f1522; --text:#e5e7eb; --muted:#9ca3af; --border:#273244; --link:#60a5fa; --link-hover:#93c5fd; --primary:#3b82f6; --danger:#f87171; --warning:#fbbf24; --success:#34d399; --shadow:0 1px 2px rgba(0,0,0,.45); --shadow-lg:0 18px 40px rgba(0,0,0,.55); --code-bg:#0a0f19; --code-text:#e5e7eb; } /* ===== Global ===== */ html.dark, html.dark body{ color:var(--text) !important; } html.dark body{ background-color:var(--bg) !important; /* beats inline background:#fff ... */ } html.dark a{ color:var(--link) !important; } html.dark a:hover{ color:var(--link-hover) !important; } html.dark ::selection{ background: rgba(96,165,250,.35); } /* Scrollbar (webkit) */ html.dark ::-webkit-scrollbar{ width:12px; height:12px; } html.dark ::-webkit-scrollbar-thumb{ background: rgba(156,163,175,.35); border-radius:10px; border:3px solid rgba(0,0,0,0); background-clip: padding-box; } html.dark ::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); } /* ===== Common blocks ===== */ html.dark .container, html.dark .wrap, html.dark #wrapper, html.dark #content, html.dark .na-body, html.dark .na-content{ color:var(--text) !important; } /* Cards / Panels */ html.dark .card, html.dark .panel, html.dark .well, html.dark .na-box, html.dark .na-card{ background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; box-shadow:var(--shadow) !important; } /* Headings / muted */ html.dark .text-muted, html.dark .text-secondary{ color:var(--muted) !important; } html.dark .text-dark{ color:var(--text) !important; } /* Borders / HR */ html.dark hr, html.dark .border, html.dark .border-top, html.dark .border-bottom, html.dark .border-start, html.dark .border-end{ border-color:var(--border) !important; } /* Background utility overrides */ html.dark .bg-white{ background-color:var(--surface) !important; } html.dark .bg-light{ background-color:var(--surface-2) !important; } html.dark .bg-body{ background-color:var(--bg) !important; } html.dark .bg-dark{ background-color:#05070b !important; } html.dark .bg-secondary{ background-color:rgba(255,255,255,.08) !important; } /* ===== Header / Nav / Menus ===== */ html.dark header, html.dark .header, html.dark #header, html.dark .top, html.dark .topbar, html.dark .navbar, html.dark .navbar-collapse{ background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; } html.dark .navbar a, html.dark .navbar-nav .nav-link{ color:var(--text) !important; } html.dark .navbar-nav .nav-link:hover, html.dark .navbar-nav .nav-link:focus{ color:var(--link) !important; } /* Dropdown */ html.dark .dropdown-menu{ background:var(--surface) !important; border-color:var(--border) !important; box-shadow:var(--shadow-lg) !important; } html.dark .dropdown-item{ color:var(--text) !important; } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus{ background:rgba(96,165,250,.12) !important; color:var(--text) !important; } html.dark .dropdown-divider{ border-color:var(--border) !important; } /* ===== Buttons ===== */ html.dark .btn{ border-color:var(--border) !important; } html.dark .btn-light{ background:rgba(255,255,255,.06) !important; color:var(--text) !important; } html.dark .btn-outline-dark{ color:var(--text) !important; border-color:var(--border) !important; } html.dark .btn-outline-dark:hover{ background:rgba(255,255,255,.06) !important; } html.dark .btn-primary{ background:var(--primary) !important; border-color:var(--primary) !important; } html.dark .btn-secondary{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.12) !important; color:var(--text) !important; } html.dark .btn-danger{ background:var(--danger) !important; border-color:var(--danger) !important; } html.dark .btn-warning{ background:var(--warning) !important; border-color:var(--warning) !important; color:#111827 !important; } html.dark .btn-success{ background:var(--success) !important; border-color:var(--success) !important; } /* ===== Forms ===== */ html.dark .form-control, html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="search"], html.dark select, html.dark textarea{ background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border) !important; } html.dark .form-control:focus, html.dark input:focus, html.dark select:focus, html.dark textarea:focus{ border-color:rgba(96,165,250,.55) !important; box-shadow:0 0 0 .2rem rgba(96,165,250,.18) !important; } html.dark .form-check-input{ background-color:var(--surface-2) !important; border-color:var(--border) !important; } html.dark .form-check-input:checked{ background-color:var(--primary) !important; border-color:var(--primary) !important; } html.dark ::placeholder{ color:rgba(156,163,175,.8) !important; } /* ===== Tables ===== */ html.dark .table{ color:var(--text) !important; } html.dark .table > :not(caption) > * > *{ background:transparent !important; border-bottom-color:var(--border) !important; } html.dark .table-striped > tbody > tr:nth-of-type(odd) > *{ background:rgba(255,255,255,.03) !important; } html.dark .table-hover > tbody > tr:hover > *{ background:rgba(96,165,250,.08) !important; } /* ===== Pagination ===== */ html.dark .pagination .page-link{ background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; } html.dark .pagination .page-link:hover{ background:rgba(96,165,250,.10) !important; color:var(--text) !important; } html.dark .pagination .page-item.active .page-link{ background:var(--primary) !important; border-color:var(--primary) !important; color:#041022 !important; } /* ===== Tabs / Pills ===== */ html.dark .nav-tabs{ border-bottom-color:var(--border) !important; } html.dark .nav-tabs .nav-link{ color:var(--muted) !important; } html.dark .nav-tabs .nav-link:hover{ border-color:transparent !important; color:var(--text) !important; } html.dark .nav-tabs .nav-link.active{ background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) var(--border) transparent !important; } /* ===== Alerts / Badges ===== */ html.dark .alert{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.10) !important; color:var(--text) !important; } html.dark .badge.bg-light, html.dark .badge.text-dark{ background:rgba(255,255,255,.10) !important; color:var(--text) !important; } /* ===== Modals / Offcanvas ===== */ html.dark .modal-content, html.dark .offcanvas{ background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; } html.dark .modal-header, html.dark .modal-footer{ border-color:var(--border) !important; } /* ===== Code / Pre / Blockquote ===== */ html.dark pre, html.dark code, html.dark .code, html.dark .na-code{ background:var(--code-bg) !important; color:var(--code-text) !important; border-color:rgba(255,255,255,.08) !important; } html.dark blockquote{ background:rgba(255,255,255,.04) !important; border-left:4px solid rgba(96,165,250,.45) !important; color:var(--text) !important; } /* ===== Layout containers (Theme: wrapper / nt_title / main) ===== */ html.dark body{ background:var(--bg) !important; color:var(--text) !important; } html.dark .wrapper{ background:var(--bg) !important; } html.dark .nt-container, html.dark .nt-container-wide{ background:transparent !important; } /* Page title bar (Nariya theme) */ html.dark #nt_title{ color:var(--text) !important; background:var(--surface) !important; border-bottom:1px solid var(--border) !important; } html.dark #nt_title .breadcrumb a{ color:var(--text) !important; } html.dark #nt_title .breadcrumb-item + .breadcrumb-item::before{ color:var(--muted) !important; } /* Common content wrappers that often keep white bg */ html.dark .container, html.dark .container-fluid, html.dark .content, html.dark #content, html.dark #wrapper, html.dark #wrap, html.dark main, html.dark section, html.dark article{ background:transparent; color:var(--text); } /* ===== Gnuboard content area (editor output) ===== */ html.dark .view_content, html.dark #bo_v_con, html.dark .bo_view .bo_v_con{ color:var(--text) !important; } html.dark .view_content a, html.dark #bo_v_con a{ color:var(--link) !important; } /* ===== Nariya Sidebar (nt_sidebar) ===== */ html.dark #nt_sidebar{ background:var(--surface) !important; color:var(--text) !important; border-left:1px solid var(--border) !important; } html.dark #nt_sidebar .bg-light{ background:var(--surface-2) !important; /* fixes .bg-light hard override */ } html.dark #nt_sidebar .sidebar-head, html.dark #nt_sidebar .sidebar-content, html.dark #nt_sidebar .sidebar-menu, html.dark #nt_sidebar .sidebar-item{ background:transparent !important; color:var(--text) !important; border-color:var(--border) !important; } html.dark #nt_sidebar a{ color:var(--text) !important; } html.dark #nt_sidebar a:hover{ color:var(--link) !important; } html.dark #nt_sidebar hr, html.dark #nt_sidebar .border, html.dark #nt_sidebar .dropdown-divider{ border-color:var(--border) !important; } html.dark .aside-lg-light{ background:var(--surface) !important; } /* ===== List groups (often used in sidebar menus) ===== */ html.dark .list-group-item{ background:transparent !important; color:var(--text) !important; border-color:var(--border) !important; } html.dark .list-group-item:hover{ background:rgba(96,165,250,.08) !important; } /* ===== Footer ===== */ html.dark footer, html.dark #footer, html.dark .footer{ background:var(--surface) !important; color:var(--muted) !important; border-color:var(--border) !important; } /* ===== Optional: reduce image glare in dark mode (comment out if you don't want) ===== */ /* html.dark img, html.dark video{ filter: brightness(.92) contrast(1.02); } */ /* ===== Board Category tabs (a.py-2.px-3) ===== */ /* (1) 최대한 안전: 그누보드/나리야에서 흔히 쓰는 카테고리 래퍼들 안에서만 적용 */ html.dark :is(#bo_cate, .bo_cate, #bo_cate_ul, .bo_cate_ul, .na-cate, .board-cate, .cate, .category, .category-nav) a.py-2.px-3{ background: #121826 !important; /* card */ color: #e5e7eb !important; /* text */ border: 1px solid #273244 !important; /* border */ border-radius: 6px; text-decoration: none; } /* hover */ html.dark :is(#bo_cate, .bo_cate, #bo_cate_ul, .bo_cate_ul, .na-cate, .board-cate, .cate, .category, .category-nav) a.py-2.px-3:hover{ background: #0b0f14 !important; /* background */ color: #e5e7eb !important; } /* 선택된 탭(스킨마다 클래스명이 다름: on/active/selected/current) */ html.dark :is(#bo_cate, .bo_cate, #bo_cate_ul, .bo_cate_ul, .na-cate, .board-cate, .cate, .category, .category-nav) :is(li.on, li.active, li.selected, li.current) > a.py-2.px-3{ background: #0b0f14 !important; color: #e5e7eb !important; border-color: #273244 !important; } /* ===== Board Category tabs (a.py-2.px-3) ===== */ /* (1) 최대한 안전: 그누보드/나리야에서 흔히 쓰는 카테고리 래퍼들 안에서만 적용 */ html.dark :is(#bo_cate, .bo_cate, #bo_cate_ul, .bo_cate_ul, .na-cate, .board-cate, .cate, .category, .category-nav) a.py-2.px-3{ background: #121826 !important; /* card */ color: #e5e7eb !important; /* text */ border: 1px solid #273244 !important; /* border */ border-radius: 6px; text-decoration: none; } /* hover */ html.dark :is(#bo_cate, .bo_cate, #bo_cate_ul, .bo_cate_ul, .na-cate, .board-cate, .cate, .category, .category-nav) a.py-2.px-3:hover{ background: #0b0f14 !important; /* background */ color: #e5e7eb !important; } /* 선택된 탭(스킨마다 클래스명이 다름: on/active/selected/current) */ html.dark :is(#bo_cate, .bo_cate, #bo_cate_ul, .bo_cate_ul, .na-cate, .board-cate, .cate, .category, .category-nav) :is(li.on, li.active, li.selected, li.current) > a.py-2.px-3{ background: #0b0f14 !important; color: #e5e7eb !important; border-color: #273244 !important; } /* 스마트에디터/유사 에디터 외곽 톤 */ html.dark .cheditor, html.dark .se2_inputarea, html.dark .se2_tool, html.dark .se2_toolbox, html.dark .se2_content, html.dark .se2_text_tool, html.dark .se2_wysiwyg, html.dark .se2_editor_area{ background: #121826 !important; /* card */ color: #e5e7eb !important; border-color: #273244 !important; }