/* ============================================================ RhinoMC — Dark Blue (HESK 3 customer theme) ============================================================ A deep, near-black theme with a vibrant blue accent, tuned to match https://rhinomc.net/ (bg #07090d, panels #0f1119). HOW TO INSTALL 1) Drop this file into: theme/hesk3/customer/css/themes/ 2) Go to Admin -> Settings -> General (Customer theme) and pick "rhinomc_dark". (Look & Feel can still tweak colors on top.) HOW IT WORKS - Only --primary / --secondary / --tertiary + a handful of surface and text vars drive ~90% of the look; everything else is derived. - When active, HESK adds a `theme_rhinomc_dark` class to , so the selector overrides at the bottom are safely scoped-friendly. - Uses color-mix() (supported by ~93%+ of browsers) with plain fallbacks before each, so older browsers still render cleanly. ============================================================ */ /* ---------------------------------------------------------------- 1) CORE PALETTE — change these to reshape the whole theme ---------------------------------------------------------------- */ :root { /* Blue accent scale (dark -> bright) */ --primary: #2b6ef0; /* strong brand blue: borders, hovers, accents */ --secondary: #3f83f8; /* buttons, primary links */ --tertiary: #5c9dff; /* bright accent: CTA links, highlights, focus */ /* Surfaces — pulled straight from rhinomc.net */ --main-background: #07090d; /* page background */ --surface: #0f1119; /* cards / panels / modals */ --foreground: #eef2f8; /* bright headings & icons */ /* Text */ --font__pri-clr: #e7ecf4; /* main body text (soft white) */ --font__sec-clr: #97a2b6; /* muted / secondary text */ /* Inputs */ --input-bg: #0b0e16; /* slightly above page bg */ --input-clr: #e7ecf4; /* A couple of reusable helpers used by the overrides below */ --rh-border: rgba(133, 170, 255, 0.12); /* subtle bluish hairline */ --rh-border-soft: rgba(255, 255, 255, 0.06); --rh-glow: rgba(43, 110, 240, 0.35); /* blue button/link glow */ --rh-elevated: #12151f; /* nested / hover surface */ --rh-radius: 10px; } /* ---------------------------------------------------------------- 2) DERIVED THEME VARS (dark-mode remaps of HESK defaults) ---------------------------------------------------------------- */ :root { /* radios / checkboxes on dark */ --radio__bg: var(--surface); --radio__fill-clr: var(--white-1); --radio__hover-bg: var(--primary); /* shadows: deep + soft on black */ --shadow-1: rgba(0, 0, 0, 0.55); --shadow-1-hsla: 222, 47%, 6%; --shadow_smaller: 0 1px 2px 0; --shadow_smaller_invert: 0 -1px 2px 0; --shadow_small: 0 2px 6px 0; --shadow_med: 0 6px 18px 0; --shadow_blur-only: 0 0 14px 0; --shadow_dropdown_label: inset 1px 1px 1px; --shadow_dropdown_label_invert: inset -1px -1px 1px; /* notifications / general foreground text */ --notification__clr: var(--foreground); /* Header (kept DARK, not a blue bar — matches rhinomc.net) */ --header__bg: #0a0c13; --header_logo__clr: var(--foreground); --header_nav__clr: #d6dced; --header_nav__hover_clr: var(--tertiary); --header_profile__clr: var(--font__pri-clr); --header_profile__menu-bg: var(--surface); --header_profile__user-avatar-bg: var(--secondary); --icon_circle__bg: var(--secondary); --navlink_icon_hover__bg: var(--primary); /* Nav / action tiles */ --navlink__bg: var(--surface); --navlink__clr: var(--font__sec-clr); --navlink__hover-bg: var(--rh-elevated); --navlink__title-clr: var(--tertiary); /* Links */ --link__pri-clr: #6aa6ff; --link__pri-hover-clr: #9cc4ff; --link__sec-clr: var(--tertiary); --link__sec-hover-clr: #a9d2ff; --footer__link-clr: var(--link__pri-clr); --breadcrumbs__a-clr: var(--link__pri-clr); --breadcrumbs__a-hover-clr: var(--link__sec-hover-clr); /* Previews / suggestions */ --preview__bg: var(--surface); --preview__clr: var(--font__sec-clr); --preview__border-clr: var(--rh-border); --preview__hover-bg: var(--rh-elevated); --preview__title-clr: var(--link__pri-clr); --suggest_preview__bg: var(--surface); --suggest_preview__clr: var(--font__sec-clr); --suggest_preview__border-clr: var(--rh-border); --suggest_preview__hover-bg: var(--rh-elevated); --suggest_preview__title-clr: var(--tertiary); --article_preview__hover-clr: var(--font__pri-clr); --article_preview_suggestion_clr: var(--font__pri-clr); /* Tables */ --table_row__bg: color-mix(in srgb, var(--primary) 12%, var(--surface)); --table_row__bg-even: color-mix(in srgb, var(--tertiary) 4%, var(--surface)); --table_row__bg-hover: color-mix(in srgb, var(--primary) 22%, var(--surface)); /* Step bar */ --step_bar__item-clr: var(--tertiary); /* Search */ --search__clr: var(--font__pri-clr); --search__bg: var(--surface); --search__title-clr: var(--font__pri-clr); --search__icon-fill: var(--tertiary); --search__input-bg: var(--input-bg); /* Modals / datepicker / dropdowns */ --modal_body__bg: var(--surface); --dropdown__bg: var(--surface); --dropdown__clr: var(--font__pri-clr); --dropdown__border-clr: var(--rh-border); --dropdown__hover-bg: var(--primary); --dropdown__hover-clr: var(--white-1); --datepicker__bg: var(--surface); --datepicker__clr: var(--tertiary); --datepicker_btn__bg: var(--secondary); --datepicker_btn__clr: var(--white-1); /* Buttons */ --btn__bg-clr-pri: var(--secondary); --btn__clr-pri: var(--white-1); --btn__border-clr-pri: var(--primary); --btn__disabled-bg-clr: #1a1f2b; --btn__disabled-clr: #5b6577; /* Ticket bodies */ --ticket_body__bg: var(--surface); --ticket_response__bg: color-mix(in srgb, var(--green-1) 8%, var(--surface)); /* Status colors — keep the accents, dark backing */ --success: var(--green-1); --success-2: var(--surface); --error: var(--red-1); --error-2: var(--surface); --warning: var(--yellow-1); --warning-2: var(--surface); --info: var(--tertiary); --info-2: var(--surface); --info-3: #333a48; } /* Secondary ("blue border") buttons -> clean blue ghost/outline style for clear hierarchy against the solid primary buttons. */ :root { --btn_blue_border__bg: transparent !important; --btn_blue_border__clr: var(--tertiary) !important; --btn_blue_border__border-clr: rgba(92, 157, 255, 0.45) !important; --btn_blue_border__hover_bg: var(--secondary) !important; --btn_blue_border__hover_clr: var(--white-1) !important; --btn_blue_border__hover_border-clr: var(--secondary) !important; --datepicker_cell__selected-clr: var(--white-1) !important; } /* ---------------------------------------------------------------- 3) DARK-MODE SELECTOR FIXES (icon inversions, contrast fixes — proven set from HESK's dark base) ---------------------------------------------------------------- */ .selectize-control .selectize-input::after { transition: all var(--transition-time-sec) ease; color: var(--dropdown_input__hover-after-clr); fill: var(--dropdown_input__hover-after-fill); filter: brightness(0%) invert(100%); opacity: 1 !important; } .header .header__nav .profile__user .profile__menu .profile--logout a { color: var(--btn_full_clr); } .browser-default code { color: #0b0e16 !important; } .article__heading { color: var(--link__pri-clr) !important; } .notification.green p:first-child { color: var(--success); } .notification.red p:first-child { color: var(--error); } .notification.orange p:first-child { color: var(--warning); } .notification.blue p:first-child { color: var(--info); } .tabbed__head .tabbed__head_tabs li { color: var(--font__sec-clr) !important; background: #0b0e16 !important; } .tabbed__head .tabbed__head_tabs li.current { color: var(--white-1) !important; background: var(--primary) !important; border-color: var(--surface) !important; } .cust-help .block__head .h-3 { color: var(--foreground); } .block__head .kb--folder a { color: var(--link__pri-clr); } #cc-link a { color: var(--foreground) !important; } .radio-custom [type="radio"] + label { color: var(--tertiary) !important; } .checkbox-custom [type="checkbox"]:checked + label::after, .checkbox-custom [type="checkbox"]:not(:checked) + label::after { filter: invert(100%) brightness(200%); } .modal a.close-modal { filter: invert(100%); border-radius: 50%; } .modal a.close-modal:hover { filter: none !important; border: 1px solid var(--white-1); } .table-wrap .table thead a { color: var(--foreground) !important; } .table thead th .handle { filter: invert(100%); } .table thead th a:hover .handle { filter: none; } article.article .block__head .h-3 { color: var(--white-1) !important; } .form-group .form-control__error { background: none !important; } .radio-custom [type="radio"]:not(:checked) + label, .radio-custom [type="radio"]:checked + label { color: var(--font__sec-clr) !important; } .checkbox-custom [type="checkbox"]:not(:checked) + label, .checkbox-custom [type="checkbox"]:checked + label { color: var(--font__sec-clr) !important; } .ticket__body_block .block--head .contact b { color: var(--font__pri-clr) !important; } .ticket__body_block.response { border: 1px solid var(--success) !important; } .ticket__body_block.response .block--head .contact b { color: var(--success) !important; } .ticket__body_block h1 { color: var(--tertiary) !important; } .kb--folder a:hover { color: var(--link__sec-hover-clr) !important; } /* ---------------------------------------------------------------- 4) RHINOMC PREMIUM TOUCHES (borders, glows, depth — what lifts it above a plain recolor) ---------------------------------------------------------------- */ /* Subtle blue-tinted radial glow behind the whole page, like the site */ .theme_rhinomc_dark body, body { background-color: var(--main-background); background-image: radial-gradient(1100px 520px at 50% -8%, rgba(43, 110, 240, 0.10), rgba(43, 110, 240, 0) 60%); background-attachment: fixed; background-repeat: no-repeat; } /* Dark header with a thin blue accent line + soft depth */ .cust-help .header { border-bottom: 1px solid var(--rh-border); box-shadow: 0 1px 0 0 rgba(43, 110, 240, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.8); } /* Cards / panels: give surfaces a real edge instead of shadow-only */ .navlink, .preview, .suggested-articles .suggestion, .main__content.notifications .notifications__list, .ticket__body_block, .params--block, .topics__block, .help-search, .box, .alert { border: 1px solid var(--rh-border-soft); border-radius: var(--rh-radius); } /* Action tiles on the home page — hover lift + blue edge */ .navlink { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .navlink:hover { transform: translateY(-2px); border-color: var(--rh-border); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(43, 110, 240, 0.20); } /* Article preview rows keep a bottom hairline, add hover tint */ .preview { border-radius: 0; } .preview:hover { background-color: var(--rh-elevated); } /* Primary buttons: blue fill + subtle glow, brighter on hover */ .btn-full, .btn--blue { box-shadow: 0 4px 14px -6px var(--rh-glow); transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; } .btn-full:hover, .btn--blue:hover { box-shadow: 0 6px 20px -6px var(--rh-glow), 0 0 0 1px rgba(92, 157, 255, 0.35); } .btn-full:active, .btn--blue:active { transform: translateY(1px); } /* Secondary ghost button: smooth fill on hover */ .btn--blue-border { transition: background-color .15s ease, color .15s ease, border-color .15s ease; } /* Inputs: clear dark field, bright blue focus ring */ .form input.form-control, .form textarea.form-control, .selectize-input, input.form-control { background-color: var(--input-bg); border: 1px solid var(--rh-border-soft); color: var(--input-clr); border-radius: 8px; } .form input.form-control::placeholder, .form textarea.form-control::placeholder { color: #667082; } .form input.form-control:hover, .form textarea.form-control:hover { border-color: var(--rh-border); } .form input.form-control:focus, .form textarea.form-control:focus, .selectize-input.focus { border-color: var(--tertiary) !important; box-shadow: 0 0 0 3px rgba(92, 157, 255, 0.22) !important; outline: 0; } /* Search bar block: framed, with a faint blue wash */ .help-search { background-color: color-mix(in srgb, var(--primary) 6%, var(--surface)); border-color: var(--rh-border); } /* Dropdown / selectize menus on dark */ .selectize-dropdown, .dropdown-select .dropdown { background-color: var(--surface) !important; border: 1px solid var(--rh-border) !important; color: var(--font__pri-clr); } .selectize-dropdown .active { background-color: var(--primary) !important; color: var(--white-1) !important; } /* Tables: framed, bluish header, readable rows */ .table-wrap { border: 1px solid var(--rh-border-soft); border-radius: var(--rh-radius); overflow: hidden; } .table thead th { background-color: color-mix(in srgb, var(--primary) 16%, var(--surface)); } /* Modals: framed surface + soft blue rim */ .modal { background: var(--surface) !important; border: 1px solid var(--rh-border) !important; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85); } /* Alerts / notifications: keep colored accents, dark backing */ .alert { background: color-mix(in srgb, var(--surface) 88%, var(--primary)) !important; } /* Footer links */ .footer, footer { color: var(--font__sec-clr); } /* Selection + scrollbar niceties */ ::selection { background: rgba(63, 131, 248, 0.35); color: #fff; } .theme_rhinomc_dark * { scrollbar-color: #2a3346 transparent; scrollbar-width: thin; } .theme_rhinomc_dark *::-webkit-scrollbar { width: 10px; height: 10px; } .theme_rhinomc_dark *::-webkit-scrollbar-thumb { background: #2a3346; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .theme_rhinomc_dark *::-webkit-scrollbar-thumb:hover { background: #37425a; background-clip: padding-box; }