/* ==================================================================== BitCops :: Admin Theme Layer assets/css/admin-theme.css Loaded after admin.css. Adds a dark/light theme system (CSS custom properties toggled via [data-theme] on ), plus a professional visual pass over the admin shell: sidebar, cards, tables, buttons, alerts, pagination, and the "writing field" (textarea) experience used by Articles / Courses / Docs / Jobs forms, including the lightweight formatting toolbar injected by admin-enhance.js. ==================================================================== */ :root, html[data-theme="dark"] { --bg-0: #0a0d12; --bg-1: #10141b; --bg-2: #161b24; --bg-3: #1d232e; --border: #262d3a; --border-soft: #1d232e; --text-0: #eef2f6; --text-1: #c3cad4; --text-2: #8891a0; --accent: #2ee6a6; --accent-strong: #1fcf93; --accent-contrast: #04120c; --danger: #ff6b6b; --danger-strong: #ff4d4d; --success: #2ee6a6; --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --radius: 10px; --radius-sm: 6px; } html[data-theme="light"] { --bg-0: #f4f6f9; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #eef1f5; --border: #dde2e9; --border-soft: #e8ebf0; --text-0: #171c26; --text-1: #3a4351; --text-2: #6b7383; --accent: #0ea86f; --accent-strong: #0b8f5f; --accent-contrast: #ffffff; --danger: #d92d2d; --danger-strong: #b71f1f; --success: #0ea86f; --shadow: 0 8px 24px rgba(20, 30, 45, 0.08); --radius: 10px; --radius-sm: 6px; /* Legacy variable scheme used by style.css's auth/form/card rules (login, register, dashboard, leaderboard, etc.) -- separate from the --bg-0.. scheme above but needs the same light-mode treatment. */ --bg: #f4f6f9; --bg-alt: #eef1f5; --bg-card: #ffffff; --border: #dde2e9; --fg: #171c26; --fg-muted: #6b7383; --accent: #0ea86f; --accent-dim: #0b8f5f; --accent2: #0284c7; --danger: #d92d2d; } html[data-theme="light"] body.admin-body { background: var(--bg-0); } /* ---- Base shell ---------------------------------------------------- */ body.admin-body { background: var(--bg-0) !important; color: var(--text-1) !important; transition: background-color 0.2s ease, color 0.2s ease; } .admin-shell { background: var(--bg-0) !important; } .admin-sidebar { background: var(--bg-1) !important; border-right: 1px solid var(--border) !important; box-shadow: var(--shadow); display: flex; flex-direction: column; } .admin-brand { color: var(--text-0) !important; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; margin-bottom: 8px; letter-spacing: 0.03em; } .admin-brand .brand-prompt { color: var(--accent) !important; } .admin-brand .brand-sub { color: var(--text-2) !important; } .admin-nav { display: flex; flex-direction: column; gap: 2px; } .admin-nav a { color: var(--text-1) !important; border-radius: var(--radius-sm); padding: 9px 12px !important; transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease; text-decoration: none !important; } .admin-nav a:hover { background: var(--bg-3) !important; color: var(--text-0) !important; padding-left: 16px !important; } .admin-nav a.active { background: rgba(46, 230, 166, 0.12) !important; color: var(--accent) !important; font-weight: 600; border-left: 3px solid var(--accent); padding-left: 13px !important; } .admin-user-box { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; } .admin-user-box p { color: var(--text-1); margin: 0; } .admin-user-role { color: var(--text-2) !important; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; } /* ---- Theme toggle switch -------------------------------------------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; margin-bottom: 10px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); cursor: pointer; font-size: 15px; transition: background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--text-0); } .theme-toggle-btn:active { transform: scale(0.97); } .theme-toggle-btn .theme-icon-sun, .theme-toggle-btn .theme-icon-moon { display: none; line-height: 1; } html[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: inline; } html[data-theme="light"] .theme-toggle-btn .theme-icon-sun { display: inline; } .theme-toggle-btn::after { content: "Toggle theme"; font-size: 12px; color: var(--text-2); } /* ---- Main content ---------------------------------------------------- */ .admin-main { color: var(--text-1); } .admin-page-title { color: var(--text-0) !important; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); } /* ---- Alerts ------------------------------------------------------- */ .alert { border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow); } .alert-success { background: rgba(46, 230, 166, 0.1) !important; border-color: var(--success) !important; color: var(--text-0) !important; } .alert-error { background: rgba(255, 107, 107, 0.1) !important; border-color: var(--danger) !important; color: var(--text-0) !important; } .alert-error ul { margin: 4px 0 0; padding-left: 18px; } /* ---- Cards / panels -------------------------------------------------- */ .admin-panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .admin-toolbar { margin-bottom: 16px; } /* ---- Buttons -------------------------------------------------------- */ .btn-primary { background: var(--accent) !important; color: var(--accent-contrast) !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 10px 18px !important; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; box-shadow: 0 2px 8px rgba(46, 230, 166, 0.25); } .btn-primary:hover { background: var(--accent-strong) !important; transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-nav-ghost { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-1) !important; border-radius: var(--radius-sm) !important; padding: 8px 14px !important; cursor: pointer; transition: all 0.15s ease; } .btn-nav-ghost:hover { border-color: var(--danger) !important; color: var(--danger) !important; } .btn-link-danger { background: none !important; border: none !important; color: var(--danger) !important; cursor: pointer; padding: 0 !important; text-decoration: underline; text-underline-offset: 2px; } .btn-link-danger:hover { color: var(--danger-strong) !important; } .admin-main a { color: var(--accent); } .admin-main a:hover { color: var(--accent-strong); } /* ---- Tables --------------------------------------------------------- */ .admin-table { width: 100%; border-collapse: collapse; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .admin-table thead { background: var(--bg-3); } .admin-table th { text-align: left; color: var(--text-2); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; border-bottom: 1px solid var(--border); } .admin-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-1); } .admin-table tbody tr { transition: background-color 0.12s ease; } .admin-table tbody tr:hover { background: var(--bg-3); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-pagination { display: flex; gap: 6px; margin-top: 16px; } .admin-pagination a, .admin-pagination strong { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-1); text-decoration: none; } .admin-pagination strong { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .admin-pagination a:hover { border-color: var(--accent); color: var(--accent); } /* ---- Dashboard stat cards --------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-box { background: var(--bg-1) !important; border: 1px solid var(--border) !important; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform 0.15s ease, border-color 0.15s ease; } .stat-box:hover { transform: translateY(-2px); border-color: var(--accent) !important; } .stat-box-num { color: var(--accent) !important; font-size: 2em; font-weight: 700; line-height: 1.1; } .stat-box-label { color: var(--text-2) !important; font-size: 0.85em; margin-top: 6px; } /* ---- Forms / writing fields ------------------------------------------ */ .admin-panel label { display: block; color: var(--text-0); font-weight: 600; font-size: 0.9em; margin: 18px 0 6px; } .admin-panel label:first-of-type { margin-top: 0; } .admin-panel input[type="text"], .admin-panel input[type="number"], .admin-panel input[type="email"], .admin-panel input[type="password"], .admin-panel select, .admin-panel textarea { width: 100%; box-sizing: border-box; background: var(--bg-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; color: var(--text-0) !important; padding: 10px 12px !important; font-size: 14.5px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .admin-panel input:focus, .admin-panel select:focus, .admin-panel textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18) !important; } .admin-panel textarea { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; line-height: 1.65; resize: vertical; min-height: 90px; } /* "Big" writing fields get extra breathing room + rounded top when a toolbar is injected above them by admin-enhance.js. */ .admin-panel textarea[data-enhanced="true"] { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; } .admin-editor-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--bg-3); border: 1px solid var(--border); border-bottom: none; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); padding: 6px; } .admin-editor-toolbar button { background: transparent; border: 1px solid transparent; color: var(--text-1); border-radius: 5px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13.5px; font-family: inherit; transition: all 0.12s ease; } .admin-editor-toolbar button:hover { background: var(--bg-1); border-color: var(--border); color: var(--accent); } .admin-editor-toolbar .editor-toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } .admin-editor-toolbar .editor-toolbar-spacer { flex: 1; } .admin-editor-toolbar .editor-word-count { color: var(--text-2); font-size: 12px; padding: 0 6px; white-space: nowrap; } .admin-panel input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; } .admin-panel p { color: var(--text-1); } /* Submit row */ .admin-panel > p:last-of-type { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; } /* ==================================================================== Public site (bitcops.net homepage + marketing pages) Same [data-theme] variables as above -- style.css ships dark-only, these rules layer a light mode on top and add the toggle button. ==================================================================== */ body { background: var(--bg-0) !important; color: var(--text-1) !important; transition: background-color 0.2s ease, color 0.2s ease; } .navbar { background: var(--bg-1) !important; border-bottom: 1px solid var(--border) !important; } .brand { color: var(--text-0) !important; } .brand-prompt { color: var(--accent) !important; } .brand-sub { color: var(--text-2) !important; } .nav-links a { color: var(--text-1) !important; } .nav-links a:hover { color: var(--accent) !important; } .nav-toggle span { background: var(--text-1) !important; } .theme-toggle-btn-public { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text-1); cursor: pointer; font-size: 16px; margin-left: 12px; transition: border-color 0.15s ease, transform 0.1s ease; } .theme-toggle-btn-public:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle-btn-public:active { transform: scale(0.93); } .theme-toggle-btn-public .theme-icon-sun, .theme-toggle-btn-public .theme-icon-moon { display: none; } html[data-theme="dark"] .theme-toggle-btn-public .theme-icon-moon { display: inline; } html[data-theme="light"] .theme-toggle-btn-public .theme-icon-sun { display: inline; } .section { background: var(--bg-0) !important; color: var(--text-1) !important; } .section-alt { background: var(--bg-1) !important; } .section-title { color: var(--text-0) !important; } .section-eyebrow, .section-note { color: var(--text-2) !important; } .hero { background: var(--bg-0) !important; color: var(--text-1) !important; } .hero-title { color: var(--text-0) !important; } .hero-subtitle { color: var(--text-2) !important; } .hero-eyebrow { color: var(--accent) !important; } .stats-bar { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .stat-num { color: var(--accent) !important; } .stat-label { color: var(--text-2) !important; } .card, .ecosystem-card, .course-card, .testimonial-card, .faq-item { background: var(--bg-1) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); color: var(--text-1) !important; transition: transform 0.15s ease, border-color 0.15s ease; } .card:hover, .ecosystem-card:hover, .course-card:hover { border-color: var(--accent) !important; transform: translateY(-2px); } .card-icon { color: var(--accent) !important; } .testimonial-name { color: var(--text-2) !important; } .badge { border: 1px solid var(--border); color: var(--text-1); } .badge-live { background: rgba(46, 230, 166, 0.12) !important; border-color: var(--accent) !important; color: var(--accent) !important; } .badge-soon { background: var(--bg-3) !important; color: var(--text-2) !important; } .course-badge { color: var(--accent) !important; } /* Terminal mockups stay dark regardless of theme -- matches real terminal UI conventions and keeps the ASCII-art readable. */ .terminal-bar, .terminal-body { background: #0a0d12 !important; color: #c3cad4 !important; border-color: #262d3a !important; } .btn-primary, .btn-primary-lg { background: var(--accent) !important; color: var(--accent-contrast) !important; border: none !important; box-shadow: 0 2px 8px rgba(46, 230, 166, 0.25); } .btn-primary:hover, .btn-primary-lg:hover { background: var(--accent-strong) !important; } .btn-ghost-lg, .btn-nav, .btn-nav-ghost { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-1) !important; } .btn-ghost-lg:hover, .btn-nav:hover, .btn-nav-ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; } .link-arrow { color: var(--accent) !important; } .contact-form input, .contact-form textarea, .contact-form select { background: var(--bg-2) !important; border: 1px solid var(--border) !important; color: var(--text-0) !important; border-radius: var(--radius-sm) !important; padding: 10px 12px !important; } .contact-form input:focus, .contact-form textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18) !important; } .footer { background: var(--bg-1) !important; border-top: 1px solid var(--border); color: var(--text-2) !important; } .footer a { color: var(--text-1); } .footer a:hover { color: var(--accent); } .about-terminal { background: #0a0d12 !important; } @media (max-width: 900px) { .nav-links { background: var(--bg-1) !important; border: 1px solid var(--border); } }