/* ============================================ Mono (Black & White) Color Scheme for Trezzo Inspired by pay.hyperloopcorp.com/rtp Activated by: (set from to apply before first paint) ============================================ */ html[data-color-scheme="mono"] body { /* Brand → neutral */ --bs-primary: #000000; --bs-primary-50: #111111; --bs-primary-60: #222222; --bs-primary-70: #e9e9e9; --bs-primary-div: #000000; --bs-primary-div-50: #111111; --bs-primary-div-60: #f1f1f1; /* Info (blue) neutralized; success/danger/warning stay as accents */ --bs-info: #6b7280; /* Text & surfaces */ --bs-body-color: #111111; --bs-body-color-50: #334155; --bs-body-color-60: #6b7280; --bs-body-bg: #f7f7f7; --bs-light: #e5e7eb; --bs-light-40: #f3f4f6; --bs-gary-light: #fafafa; --bs-border-color: #e5e7eb; --bs-border-color-50: #ececec; --bs-dark: #000000; --bs-secondary: #3a4252; --bs-secondary-50: #23272e; --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* rgb triplet mirrors */ --bs-primary-rgb: 0, 0, 0; --bs-primary-50-rgb: 17, 17, 17; --bs-primary-60-rgb: 34, 34, 34; --bs-primary-70-rgb: 233, 233, 233; --bs-primary-div-rgb: 0, 0, 0; --bs-primary-div-50-rgb: 17, 17, 17; --bs-primary-div-60-rgb: 241, 241, 241; --bs-info-rgb: 107, 114, 128; --bs-body-bg-rgb: 247, 247, 247; --bs-light-40-rgb: 243, 244, 246; --bs-light-rgb: 229, 231, 235; --bs-secondary-rgb: 58, 66, 82; --bs-secondary-50-rgb: 35, 39, 46; } /* ── Solid primary buttons → black with white text ── */ html[data-color-scheme="mono"] body .btn-primary, html[data-color-scheme="mono"] body .btn-primary-div, html[data-color-scheme="mono"] body .btn-primary-div-50, html[data-color-scheme="mono"] body .btn-primary-div-60, html[data-color-scheme="mono"] body .btn-primary-50 { --bs-btn-color: #fff; --bs-btn-bg: #000; --bs-btn-border-color: #000; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #222; --bs-btn-hover-border-color: #222; --bs-btn-focus-shadow-rgb: 0, 0, 0; --bs-btn-active-color: #fff; --bs-btn-active-bg: #111; --bs-btn-active-border-color: #111; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #a3a3a3; --bs-btn-disabled-border-color: #a3a3a3; } /* ── Outline primary buttons → black outline ── */ html[data-color-scheme="mono"] body .btn-outline-primary, html[data-color-scheme="mono"] body .btn-outline-primary-div, html[data-color-scheme="mono"] body .btn-outline-primary-div-50, html[data-color-scheme="mono"] body .btn-outline-primary-div-60, html[data-color-scheme="mono"] body .btn-outline-primary-50 { --bs-btn-color: #111; --bs-btn-border-color: #111; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-focus-shadow-rgb: 0, 0, 0; --bs-btn-active-color: #fff; --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-disabled-color: #9ca3af; --bs-btn-disabled-border-color: #9ca3af; --bs-gradient: none; } /* ── Sidebar active states → black / light gray ── */ html[data-color-scheme="mono"] body .menu-vertical .menu-item .menu-link { color: #111; } html[data-color-scheme="mono"] body .menu-vertical .menu-item .menu-link .menu-icon { color: #6b7280; } html[data-color-scheme="mono"] body .menu-vertical .menu-title .menu-title-text { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #aaa; } html[data-color-scheme="mono"] body .menu-vertical .menu-item.open .menu-link.active { background-color: #f3f4f6; } html[data-color-scheme="mono"] body .menu-vertical .menu-item.open .menu-link.active .title, html[data-color-scheme="mono"] body .menu-vertical .menu-item.open .menu-link.active .menu-icon { color: #000; } html[data-color-scheme="mono"] body .menu-vertical .menu-sub .menu-item .menu-link.active, html[data-color-scheme="mono"] body .menu-vertical .menu-sub .menu-item .menu-link:hover { background-color: #f3f4f6; color: #000; } html[data-color-scheme="mono"] body .menu-vertical .menu-sub .menu-item .menu-link.active::before { border-color: #000; } /* ── Pagination → black active page ── */ html[data-color-scheme="mono"] body .pagination { --bs-pagination-color: #111; --bs-pagination-hover-color: #111; --bs-pagination-hover-bg: #f5f5f5; --bs-pagination-hover-border-color: #d4d4d4; --bs-pagination-focus-color: #111; --bs-pagination-focus-bg: #f5f5f5; --bs-pagination-focus-border-color: #111; --bs-pagination-active-bg: #000; --bs-pagination-active-border-color: #000; } /* ── Avatar initials → neutral black chip ── */ html[data-color-scheme="mono"] body .user-avatar-initials { background-color: #111 !important; } /* ── Welcome banner → solid near-black, white text ── */ html[data-color-scheme="mono"] body .welcome-box { background: linear-gradient(81deg, #111111 3.39%, #333333 93.3%); border: 1px solid #000 !important; } html[data-color-scheme="mono"] body .welcome-box p { color: #d4d4d4 !important; } /* ── Theme settings panel: active-selection highlight → black ── */ html[data-color-scheme="mono"] body .settings-box-wrap .active-wrap2 .settings-box { border-color: #111; } /* ── Header quick color-scheme toggle button ── */ .right-header-content .header-right-item .color-scheme-quick-toggle { background: transparent; color: #64748B; line-height: 1; } .right-header-content .header-right-item .color-scheme-quick-toggle:hover { color: #111; } .right-header-content .header-right-item .color-scheme-quick-toggle svg { width: 24px; height: 24px; display: block; } html[data-color-scheme="mono"] body .right-header-content .header-right-item .color-scheme-quick-toggle { color: #111; } /* ── Header icons → neutral ── */ html[data-color-scheme="mono"] body .right-header-content .header-right-item .dropdown button { color: #111; } /* ============================================ RTP typography (Helvetica Neue, bold micro-labels) ============================================ */ html[data-color-scheme="mono"] body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings → 700 weight, tight tracking (RTP titles) */ html[data-color-scheme="mono"] body h1, html[data-color-scheme="mono"] body h2, html[data-color-scheme="mono"] body h3, html[data-color-scheme="mono"] body h4, html[data-color-scheme="mono"] body h5, html[data-color-scheme="mono"] body h6 { font-weight: 700; letter-spacing: -0.01em; } /* Card section headers → RTP micro headers */ html[data-color-scheme="mono"] body .card h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #888; } /* Table headers → RTP th (11px, 700, uppercase, light gray) */ html[data-color-scheme="mono"] body .default-table-area .table-responsive .table thead tr th { background-color: transparent; color: #aaa; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid #e8e8e8; } /* Form labels → RTP .field label */ html[data-color-scheme="mono"] body .form-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #888; } /* Buttons → 600 weight; primary actions 700 (RTP) */ html[data-color-scheme="mono"] body .btn { font-weight: 600; } html[data-color-scheme="mono"] body .btn-primary, html[data-color-scheme="mono"] body .btn-primary-div { font-weight: 700; } /* Badges → 11px / 600 (RTP) */ html[data-color-scheme="mono"] body .badge { font-size: 11px; font-weight: 600; } /* Theme settings panel section headers */ html[data-color-scheme="mono"] body .offcanvas-body h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #888; } /* ── Optional dark sidebar/header/footer → neutral black instead of navy ── */ html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .sidebar-area { background-color: #111; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .sidebar-area .logo { border-color: #333; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-item .menu-link:hover, html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-item .menu-link.logout { background-color: #262626; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-item.open .menu-link.active { background-color: #fff; color: #000; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-item.open .menu-link.active .title { color: #000; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-item.open .menu-link.active::before { border-color: #000; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-sub .menu-item .menu-link::before, html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-title .menu-title-text { border-color: #666; color: #888; } html[data-color-scheme="mono"] body[sidebar-dark-light-data-theme="sidebar-dark"] .menu-vertical .menu-sub .menu-item .menu-link:hover::before { border-color: #fff; } html[data-color-scheme="mono"] body[header-dark-light-data-theme="header-dark"] .header-area, html[data-color-scheme="mono"] body[footer-dark-light-data-theme="footer-dark"] .footer-area { background-color: #111 !important; } /* ============================================ Color Scheme picker (Theme Settings panel) ============================================ */ /* Colorful preview box */ .settings-box-wrap.for-color-scheme .settings-box.colorful-box span:nth-child(3) { background: #605DFF; } .settings-box-wrap.for-color-scheme .settings-box.colorful-box span:nth-child(4) { background: #605DFF; } /* Mono preview box */ .settings-box-wrap.for-color-scheme .settings-box.mono-box { border-color: #d4d4d4; } .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(1) { background: #fafafa; } .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(2) { background: #fafafa; } .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(3) { background: #111; } .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(4) { background: #555; } .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(5), .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(6), .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(7) { background: #888; } .settings-box-wrap.for-color-scheme .settings-box.mono-box span:nth-child(n + 8) { background: #fff; border-color: #d4d4d4; } /* Default state — Colorful selected (active-wrap2) */ .settings-box-wrap.for-color-scheme .active-wrap2 .settings-box { border-color: #605DFF; } /* Mono selected state — invert selection highlight */ html[data-color-scheme="mono"] body .settings-box-wrap.for-color-scheme .active-wrap2 .settings-box { border-color: #d4d4d4; } html[data-color-scheme="mono"] body .settings-box-wrap.for-color-scheme .active-wrap1 .settings-box { border-color: #111; } html[data-color-scheme="mono"] body .settings-box-wrap.for-color-scheme .active-wrap2 .opacity-1 { opacity: 0 !important; } html[data-color-scheme="mono"] body .settings-box-wrap.for-color-scheme .active-wrap2 .opacity-0 { opacity: 1 !important; } html[data-color-scheme="mono"] body .settings-box-wrap.for-color-scheme .active-wrap1 .opacity-1 { opacity: 1 !important; } html[data-color-scheme="mono"] body .settings-box-wrap.for-color-scheme .active-wrap1 .opacity-0 { opacity: 0 !important; }