/* THOST client area theme: light by default, dark when . Matches www.t-host.co.uk. Loaded after huraga.css. */ :root { --thost-accent: #ff6a1a; --thost-accent-d: #e2560a; --thost-good: #16a34a; --thost-ink: #0d1428; --thost-bg: #f5f7fb; --thost-surface: #ffffff; --thost-surface-2: #eef2f8; --thost-border: rgba(13, 20, 40, 0.1); --thost-text: #16202b; --thost-muted: #5b6875; } html[data-thost-theme="dark"], html[data-bs-theme="dark"] { --thost-good: #34d399; --thost-bg: #070a12; --thost-surface: #111a30; --thost-surface-2: #0f172a; --thost-border: rgba(148, 163, 184, 0.18); --thost-text: #e8edf8; --thost-muted: #9aa8c2; } body, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--thost-bg); --bs-body-color: var(--thost-text); --bs-secondary-color: var(--thost-muted); --bs-tertiary-color: var(--thost-muted); --bs-border-color: var(--thost-border); --bs-primary: var(--thost-accent); --bs-primary-rgb: 255, 106, 26; --bs-heading-color: var(--thost-ink); --bs-card-bg: var(--thost-surface); --bs-tertiary-bg: var(--thost-surface-2); --bs-secondary-bg: var(--thost-surface-2); --bs-link-color: #4f46e5; --bs-link-hover-color: var(--thost-accent); } html[data-thost-theme="dark"] body, html[data-bs-theme="dark"] body { --bs-heading-color: #fff; --bs-link-color: #a99cff; } body { font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--thost-bg); color: var(--thost-text); } h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--bs-heading-color); } h1, .h1 { font-weight: 800; } .card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .form-control, .form-select, .input-group-text, .accordion-item { background-color: var(--thost-surface); color: var(--thost-text); border-color: var(--thost-border); } .card { border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.08); } html[data-thost-theme="dark"] .card, html[data-bs-theme="dark"] .card { box-shadow: 0 12px 34px rgba(0,0,0,.45); } .card-header { background: var(--thost-surface-2); border-bottom: 1px solid var(--thost-border); } .table { --bs-table-bg: transparent; --bs-table-color: var(--thost-text); --bs-table-striped-color: var(--thost-text); --bs-table-striped-bg: rgba(13,20,40,.03); --bs-table-hover-bg: rgba(255,106,26,.08); --bs-table-hover-color: var(--thost-text); --bs-table-border-color: var(--thost-border); color: var(--thost-text); } html[data-thost-theme="dark"] .table, html[data-bs-theme="dark"] .table { --bs-table-striped-bg: rgba(255,255,255,.04); } .table > :not(caption) > * > * { color: var(--thost-text); background-color: transparent; } .table thead th { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--thost-muted); } .form-control::placeholder { color: var(--thost-muted); } .form-control:focus, .form-select:focus { border-color: var(--thost-accent); box-shadow: 0 0 0 .2rem rgba(255,106,26,.25); } .btn { font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 10px; } .btn-primary { --bs-btn-bg: var(--thost-accent); --bs-btn-border-color: var(--thost-accent); --bs-btn-hover-bg: var(--thost-accent-d); --bs-btn-hover-border-color: var(--thost-accent-d); --bs-btn-active-bg: var(--thost-accent-d); --bs-btn-active-border-color: var(--thost-accent-d); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; box-shadow: 0 8px 22px rgba(255,106,26,.28); } .btn-outline-primary { --bs-btn-color: var(--thost-accent-d); --bs-btn-border-color: rgba(255,106,26,.6); --bs-btn-hover-bg: var(--thost-accent); --bs-btn-hover-border-color: var(--thost-accent); --bs-btn-hover-color: #fff; } .btn-outline-secondary { --bs-btn-color: var(--thost-text); --bs-btn-border-color: var(--thost-border); --bs-btn-hover-bg: var(--thost-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--thost-ink); } .badge.bg-success { background-color: var(--thost-good) !important; } .nav-tabs { border-bottom-color: var(--thost-border); } .nav-tabs .nav-link { color: var(--thost-muted); font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; border: 0; } .nav-tabs .nav-link.active { color: var(--bs-heading-color); background: transparent; box-shadow: inset 0 -3px 0 var(--thost-accent); } /* header / sidebar */ .navbar, header.navbar, .navbar-expand-lg, .sidebar, .offcanvas-body { background: var(--thost-surface) !important; border-color: var(--thost-border) !important; } .navbar .nav-link, .sidebar .nav-link, .offcanvas .nav-link { color: var(--thost-muted) !important; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .navbar .nav-link.active, .sidebar .nav-link.active, .offcanvas .nav-link.active, .nav-link[aria-current="page"] { color: var(--bs-heading-color) !important; box-shadow: inset 3px 0 0 var(--thost-accent); } .navbar-brand, .brand { color: var(--bs-heading-color) !important; font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; } .thost-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-heading-color); text-decoration: none; } .thost-brand .mark { width: 30px; height: 30px; border-radius: 7px; background: var(--thost-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .thost-theme-toggle { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--thost-border); background: var(--thost-surface); color: var(--bs-heading-color); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .thost-theme-toggle:hover { background: rgba(255,106,26,.12); } .thost-theme-toggle { display: none !important; } .breadcrumb-item a { color: var(--thost-muted); } .breadcrumb-item.active { color: var(--bs-heading-color); } .text-secondary, .text-muted { color: var(--thost-muted) !important; } .alert-info { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.35); color: inherit; } .alert-success { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.4); color: inherit; } .alert-warning { background: rgba(255,106,26,.1); border-color: rgba(255,106,26,.45); color: inherit; } .alert-danger { background: rgba(225,29,72,.1); border-color: rgba(225,29,72,.45); color: inherit; } code { background: var(--thost-surface-2); color: inherit; border: 1px solid var(--thost-border); padding: .1em .35em; border-radius: 4px; } .thost-stat .fs-2 { font-family: "Barlow Condensed", sans-serif; } .thost-portal .list-group-item { border-color: var(--thost-border); background: transparent; } .thost-portal .list-group-item:hover { background: rgba(255,106,26,.06); } footer, .footer { background: var(--thost-surface); color: var(--thost-muted); border-top: 1px solid var(--thost-border); } ::selection { background: rgba(255,106,26,.45); color: #fff; } /* base theme forces black text on striped rows */ .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped > tbody > tr:nth-of-type(even) > * { color: var(--thost-text) !important; }