/* ===================================================================== BITROBIT — DARK MODE for the ViserLab "elite" template Accent follows your admin brand colour (currently #9d6bff purple). Built and verified against the live install at app.bitrobit.com. INSTALL Save as: assets/templates/elite/css/dark.css Then add this line in the AFTER main.css and custom.css, in: core/resources/views/templates/elite/layouts/app.blade.php Do NOT paste into main.css — a script update overwrites it. custom.css is the theme's own file and may also be replaced, so a separate dark.css plus one include line is the safest place. HOW IT WORKS The elite template is driven by HSL design tokens (--heading-color, --body-color, --border-color, --base ...). Most of this file just re-points those tokens; the explicit rules below only cover places the tokens don't reach. --white is deliberately NOT inverted. The theme uses it both as a surface colour and as text-on-button, so flipping it would fix the buttons and break white text everywhere else. ===================================================================== */ :root{ --e-bg:#141517; /* page */ --e-surface:#1B1B1D; /* cards, menus — matches the theme's header */ --e-surface-2:#1C242C; /* table heads, raised — matches the footer */ --e-inset:#101113; /* inputs */ --e-line:rgba(255,255,255,.09); --e-txt:#E8EAED; --e-dim:#9BA0A6; /* Follows whatever you set in admin (color.php emits --base). Currently 260 100% 71% = #9d6bff. White on #9d6bff is 3.51:1 (fails AA); near-black is 5.28:1. */ --e-accent: hsl(var(--base)); --e-on-accent:#1a1205; /* Your secondary is 254 68% 30% = #321982. Fine as a button ground with white text (13.2:1), but as TEXT on this page it is 1.39:1 — invisible. Text usages get a lifted version instead. */ --e-accent-2: hsl(var(--base-two)); --e-accent-2-text: hsl(254 68% 72%); /* #9e87e8, 6.16:1 */ color-scheme:dark; } /* ---------- token inversion: recolours most of the UI at once ---------- */ :root{ --heading-color: 0 0% 91%; /* was 210 22% 14% (near-black) */ --body-color: 220 6% 66%; /* was 0 1% 53% */ --light: 220 6% 66%; --light-two: 220 6% 60%; --border-color: 220 6% 22%; /* was 210 4% 72% (light grey) */ --section-bg: #1B1B1D; /* was rgba(28,36,44,.02) */ } html,body{background-color:var(--e-bg)!important;color:var(--e-dim)!important;} :root{--bs-body-bg:var(--e-bg)!important;--bs-body-color:var(--e-txt)!important; --bs-border-color:var(--e-line)!important;} /* ---------- sections ---------- */ .banner-section,.ptable-section,.ptable-header-section,.feature-section, .account-open,.faq-section,.overview-section,.section-heading, .pt-120,.pb-120{background-color:transparent!important;} .banner-section{background-color:var(--e-surface)!important;} /* ---------- type ---------- */ h1,h2,h3,h4,h5,h6,.section-heading__title{color:var(--e-txt)!important;} p,li,span,label,small,.section-heading__desc{color:var(--e-dim);} a{color:var(--e-txt);} a:hover{color:var(--e-accent);} hr{border-color:var(--e-line)!important;opacity:1;} .text-muted{color:var(--e-dim)!important;} /* bootstrap grey is 3.9:1 here */ /* ---------- tables ---------- */ table{--bs-table-bg:transparent!important;--bs-table-color:var(--e-txt)!important; --bs-table-border-color:var(--e-line)!important; --bs-table-striped-bg:rgba(255,255,255,.03)!important; --bs-table-hover-bg:rgba(255,255,255,.05)!important;color:var(--e-txt)!important;} tbody{background-color:transparent!important;} thead th,th,.advertiser-user-heading{ background-color:var(--e-surface-2)!important;color:var(--e-dim)!important; border-color:var(--e-line)!important;} td{background-color:transparent!important;color:var(--e-txt)!important; border-color:var(--e-line)!important;} tr{border-color:var(--e-line)!important;} /* ---------- forms ---------- Scoped tighter than .form--control because the theme scopes some inputs (the footer newsletter field) more specifically. */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]), textarea, select, .form--control, .form-control, .form-select, .newsletter-form .form--control, .footer-item input{ background-color:var(--e-inset)!important; border-color:var(--e-line)!important; color:var(--e-txt)!important;} input::placeholder,textarea::placeholder{color:#7b8087!important;} .form-group label{color:var(--e-dim)!important;} .input-group-text{background-color:var(--e-surface-2)!important; border-color:var(--e-line)!important;color:var(--e-dim)!important;} /* ---------- select2 (used for every dropdown) ---------- */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{ background-color:var(--e-inset)!important;border-color:var(--e-line)!important;} .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--e-txt)!important;} .select2-dropdown,.select2-search__field{background-color:var(--e-surface)!important; border-color:var(--e-line)!important;color:var(--e-txt)!important;} .select2-container--default .select2-results__option{ background-color:var(--e-surface)!important;color:var(--e-txt)!important;} .select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color:var(--e-accent)!important;color:var(--e-on-accent)!important;} /* ---------- panels, modals, accordion ---------- */ .ptable-filter,.buy--sell-filter,.account-open__content,.feature-content, .modal-content,.accordion-item,.card,.dropdown-menu,.currency-loading{ background-color:var(--e-surface)!important;border-color:var(--e-line)!important; color:var(--e-txt)!important;} .accordion-button{background-color:var(--e-surface)!important;color:var(--e-txt)!important;} .accordion-button:not(.collapsed){background-color:var(--e-surface-2)!important; color:var(--e-accent)!important;} .accordion-button::after{filter:invert(1) brightness(1.8);} .accordion-body{background-color:var(--e-surface)!important;color:var(--e-dim)!important;} .modal-header,.modal-footer{border-color:var(--e-line)!important;} .btn-close{filter:invert(1) grayscale(1) brightness(1.7);} .dropdown-item{color:var(--e-txt)!important;} .dropdown-item:hover{background-color:rgba(255,255,255,.06)!important; color:var(--e-accent)!important;} /* ---------- buttons ---------- PRE-EXISTING theme bug, not caused by dark mode: main.css sets .btn{color:hsl(var(--white))!important}, so every gold button had white text at 2.05:1. Near-black on the same gold is 9.06:1. */ .btn--base,a.btn--base,button.btn--base,.btn.btn--base, .buy-sell-tab__link.buy,.filter--btn,.scroll-top,.bg--base{ background-color:var(--e-accent)!important;border-color:var(--e-accent)!important; color:var(--e-on-accent)!important;} .btn--base *{color:var(--e-on-accent)!important;} .btn--light{background-color:rgba(255,255,255,.08)!important;color:var(--e-txt)!important; border-color:var(--e-line)!important;} .text--base{color:var(--e-accent)!important;} /* base-two as text would be 1.39:1 on this background */ .text--base-two,span.base-two,.base-two,.highlight{ color:var(--e-accent-2-text)!important;} a.btn.btn--base-two,.btn.btn--base-two,.sec-btn{color:#ffffff!important;} /* Secondary button was rendering white on #E8E8E8 (1.23:1). Use the brand secondary; white on #321982 is 13.2:1. It is dark against the page, so give it a visible edge. */ a.btn.btn--base-two,.btn.btn--base-two,.btn--base-two,.sec-btn{ background-color:var(--e-accent-2)!important; border-color:hsl(254 68% 46%)!important; color:#ffffff!important;} a.btn.btn--base-two:hover,.btn.btn--base-two:hover{filter:brightness(1.1);} /* ---------- Buy / Sell tabs ---------- Theme rule is .ptable-header-left .buy-sell-tab__link[.active] with !important, so match the same selector — equal specificity, and this file loads later, so it wins. Inactive tabs were #1C242C on a dark page, i.e. invisible. */ .ptable-header-left .buy-sell-tab__link{ color:var(--e-dim)!important; background-color:rgba(255,255,255,.06)!important; border-color:var(--e-line)!important;} .ptable-header-left .buy-sell-tab__link.active{ color:var(--e-on-accent)!important;} .ptable-header-left .buy-sell-tab__link.sell.active{ background:hsl(var(--danger))!important;color:#fff!important;} .ptable-header-left .buy-sell-tab__link:hover{color:var(--e-txt)!important;} /* active nav-tab: white on hsl(35 97% 45%) = 2.78:1 */ ul.nav-tabs li.nav-item button.nav-link.active, ul.nav.nav-tabs button.nav-link.active, .nav-tabs .nav-item .nav-link.active{color:var(--e-on-accent)!important;} /* ---------- misc ---------- */ .cookies-card{background-color:var(--e-surface)!important;color:var(--e-txt)!important; border:1px solid var(--e-line)!important;} .cookies-card p,.cookies-card span{color:var(--e-dim)!important;} .social-list__link,.header-right__button{ background-color:rgba(255,255,255,.08)!important;color:var(--e-txt)!important;} .footer-item,.footer-menu a,.footer-item a{color:var(--e-dim)!important;} .footer-item a:hover{color:var(--e-accent)!important;} .bg-white,.bg-light{background-color:var(--e-surface)!important;} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--e-bg)} ::-webkit-scrollbar-thumb{background:#2c2d31;border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:#3a3b42} /* ===================================================================== BITROBIT DARK — PART 2 (append after Part 1, at the end of custom.css) Part 1 handled the HSL tokens and the public pages. This covers two things it could not: A. every selector in main.css that uses hsl(var(--white)) as a SURFACE. There are 23. --white is also used as TEXT in 48 places (button labels, active tabs), which is why the token itself must not be inverted — these are targeted individually instead. B. the light values hardcoded in custom.css, which never reference a token at all. Most of what follows is dashboard / trade / profile UI. ===================================================================== */ /* =========== A. main.css surfaces built on hsl(var(--white)) =========== */ .custom--card, .custom--card .card-body, .custom--modal .modal-content, .dropdown_select__list, .eb_select__list, .currency_switcher__list, .buy-details, .sell-card, .p2p-trade, .sidebar-menu, .dashboard .dashboard-header, .dashboard .dashboard-widget, .dashboard .user-info .user-info-dropdown, .header-right .notification-wrapper .notification-popup .notification-header{ background-color:var(--e-surface)!important; border-color:var(--e-line)!important; color:var(--e-txt)!important; } .table tbody{background-color:transparent!important;} /* hover state on dropdown links flashed white */ .dropdown-menu__link:focus, .dropdown-menu__link:hover{ background-color:rgba(255,255,255,.07)!important; color:var(--e-accent)!important; } /* decorative wedges that assumed a white page behind them */ .navbar-brand::before, .breadcrumb::before{background-color:var(--e-bg)!important;} /* NOTE: .form--switch .form-check-input::before is the switch KNOB and .form--check .form-check-input:checked::before is the tick — both are meant to be white on a coloured track. Deliberately left alone. */ /* dashboard text that inherited dark-on-white */ .dashboard .dashboard-widget *, .dashboard .dashboard-header *{color:inherit;} .dashboard-widget__title,.d-widget__title{color:var(--e-txt)!important;} .dashboard-widget__amount,.d-widget__amount{color:var(--e-txt)!important;} /* =========== B. values hardcoded in custom.css =========== */ /* trade request */ .trade-request-details-list{background-color:var(--e-surface-2)!important;} .trade-request-details-list li{border-bottom-color:var(--e-line)!important;} .trade-request-details-list li .caption{color:var(--e-txt)!important;} .trade-request-form{background-color:var(--e-surface)!important; border-color:var(--e-line)!important;} /* terms sidebar */ .terms-sidebar{background-color:var(--e-surface)!important; border-color:var(--e-line)!important;} .terms-sidebar__widget{border-bottom-color:var(--e-line)!important;} .terms-sidebar__widget p{color:var(--e-dim)!important;} /* reviews */ .review-item{background-color:var(--e-surface)!important; border-color:var(--e-line)!important;} /* profile */ .profile-setting-sidebar{background-color:var(--e-surface-2)!important;} .profile-sidebar__widget{background-color:var(--e-surface)!important; border-color:var(--e-line)!important;} .profile-sidebar__title::after{background-color:var(--e-accent)!important;} /* was #000 */ .profile-info-list li{border-bottom-color:var(--e-line)!important;} .profile-verify-list li.verified{ /* #08925d was ~2.5:1 */ background-color:rgba(40,223,153,.14)!important;color:#3ddc97!important;} .profile-verify-list li.unverified{ background-color:rgba(255,75,92,.14)!important;color:#ff7b87!important;} /* caption / button lists */ .caption-list__item{border-bottom-color:var(--e-line)!important;} .caption-list__item .caption{color:var(--e-txt)!important;} .btn-list li a{border-color:var(--e-line)!important;color:var(--e-txt)!important;} .btn-list li a span::before{background-color:rgba(255,255,255,.10)!important;} /* admin message bubble was #fff1f1 !important */ .single-message.admin-message .message-content{ background-color:rgba(157,107,255,.10)!important; border-color:rgba(157,107,255,.30)!important; color:var(--e-txt)!important;} /* cookie card internals */ .cookies-card__icon{background-color:var(--e-accent)!important; color:var(--e-on-accent)!important;} .cookies-btn,.cookies-btn:hover{color:var(--e-txt)!important;} /* ---- SELECT2 ---- custom.css declares select2 TWICE. The first block is dark-friendly; the second overrides it with a white dropdown and #000 text using !important. These must come after both. */ .select2-container--default .select2-selection--single{ background-color:var(--e-inset)!important; border-color:var(--e-line)!important;} .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--e-txt)!important;} .select2-dropdown{background-color:var(--e-surface)!important; border-color:var(--e-line)!important;} .select2-results__option--selectable{color:var(--e-txt)!important;} .select2-container--default .select2-results__option--selected{ background-color:rgba(255,255,255,.10)!important;color:var(--e-txt)!important;} .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{ background-color:var(--e-accent)!important;color:var(--e-on-accent)!important;} .select2-container--default .select2-search--dropdown .select2-search__field{ background-color:var(--e-inset)!important;border-color:var(--e-line)!important; color:var(--e-txt)!important;} /* coin search */ .coin-search-area .form-control{background-color:var(--e-inset)!important; border-color:var(--e-line)!important;color:var(--e-txt)!important;} /* file pickers */ .custom-input-field[type=file]::file-selector-button, .trade-chat-file-upload ::file-selector-button, ::-webkit-file-upload-button{ background-color:var(--e-accent)!important;color:var(--e-on-accent)!important;} /* #10163A is nearly invisible against this page */ .btn--dark,.btn--dark:hover{background-color:rgba(255,255,255,.10)!important; color:var(--e-txt)!important;border-color:var(--e-line)!important;} /* copied toast */ .copied::after{background-color:var(--e-accent)!important; color:var(--e-on-accent)!important;} /* alerts keep their 5% tint; lift the text */ .alert{color:var(--e-txt);} .alert p,.alert span{color:var(--e-dim);} /* input popup is already dark — align the arrow to the new surface */ .hover-input-popup .input-popup{background-color:var(--e-surface)!important;} .input-popup::after{ border-color:transparent transparent var(--e-surface) transparent!important;} /* treeView.css: dashed rules and hover assume a light page */ .treeview ul{border-left-color:var(--e-line)!important;} .treeview ul li::before{border-top-color:var(--e-line)!important;} .treeview span:not(span.has-node-icon):hover{ background-color:rgba(255,255,255,.06)!important;} /* ---- BUTTON RADIUS: match bitrobit.com (7px) ---- */ .btn,a.btn,button.btn,.btn--base,.btn--base-two,.btn--light,.btn--dark, .btn--sm,.btn--lg,.btn-outline--base,.btn-outline--base-two, .filter--btn,.reset--btn,.sec-btn,.cookies-btn, .buy-sell-tab__link,.ptable-header-left .buy-sell-tab__link, input[type=submit],input[type=button], a.social-login-btn,.social-login-btn,.account-form .social-login-btn{ border-radius:7px!important;} .form--control,.form-control,.form-select,textarea,select, input:not([type=checkbox]):not([type=radio]):not([type=range]), .select2-container--default .select2-selection--single, .select2-dropdown{border-radius:7px!important;} .buy-sell-tab{border-radius:8px!important;overflow:hidden!important;} .social-list__link,.cookies-card__icon,.user-image, .profile-author .thumb,.user-details-top .thumb, .header-right__button.account,.d-widget__icon{border-radius:50%!important;} /* ---- AUTH PAGES: image fills the whole left column ---- Login and register both render .account-left > .account-left__thumb > img. By default the column has 150px top padding and the image sits inside at its natural size. Absolutely positioning the thumb makes the artwork the full-bleed background of the column instead. The theme hides .account-left below its tablet breakpoint, so this only applies where the column is actually shown. */ .account-left{padding:0!important;overflow:hidden!important;position:relative!important;} .account-left__thumb{position:absolute!important;top:0!important;left:0!important; right:0!important;bottom:0!important;width:100%!important;height:100%!important; margin:0!important;padding:0!important;} .account-left__thumb img{width:100%!important;height:100%!important; object-fit:cover!important;object-position:center!important;display:block!important;} /* ==== LOGO: 140px site-wide ==== main.css caps it at max-width:200px then 150px with max-height:30px. The mark is ~4.6:1, so 140px wide lands near 30px tall; max-height is cleared so the cap can't crop it. */ .navbar-brand.logo img, .header.two .navbar-brand.logo img, .footer-item__logo a img, .footer-logo img{ width: 82px !important;max-width: 82px !important; height:auto!important;max-height:none!important;} /* ---- PRELOADER: Bitrobit mark, crescent orbits, purple static ---- */ .preloader{display:grid;place-items:center;background-color:#0d0d0f} .preloader .bbpl{width:60px;height:60px;display:block} .preloader .bbpl-p{fill:#9d6bff} .preloader .bbpl-l{fill:#f3edff;transform-origin:59.975px 59.975px; animation:bbOrbit 1.6s linear infinite} @keyframes bbOrbit{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.preloader .bbpl-l{animation-duration:4s}} /* --- selection controls: visible on dark theme --- */ .form-check-input, .form--check .form-check-input, .form--radio .form-check-input{ border: 1px solid #fff !important; background-color: rgba(255,255,255,.05) !important; } .form-check-input:checked, .form--check .form-check-input:checked{ background-color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; } .form--radio .form-check-input:checked{ border-color: hsl(var(--base)) !important; } /* --- agree row: flex was crushing the box and eating the word spacing --- */ .form-group.d-flex.align-items-center{ align-items: flex-start !important; flex-wrap: wrap; row-gap: 4px; } .form-group.d-flex > .form-check-label{ margin-right: .35em; cursor: pointer; } .form-check-input[type="checkbox"]{ flex: 0 0 auto; } /* --- Bootstrap contextual alerts keep a LIGHT background, so the blanket .alert{color:var(--e-txt)} above makes them unreadable. Each variant already declares its own correct dark text in --bs-alert-color. --- */ :is(.alert-primary,.alert-secondary,.alert-success,.alert-danger,.alert-warning,.alert-info,.alert-light,.alert-dark), :is(.alert-primary,.alert-secondary,.alert-success,.alert-danger,.alert-warning,.alert-info,.alert-light,.alert-dark) :is(p,span,strong,b,li,a){ color: var(--bs-alert-color) !important; } /* --- wallet.png replaced by a Font Awesome icon --- */ .header-right .wallet-wrapper .wallet .thumb i{ font-size: 24px; line-height: 1; display: block; color: hsl(var(--white)); }