/* ========================================================================== GorillaServers — Hybula Looking Glass theme Drop-in override stylesheet for hybula/lookingglass (Bootstrap 5.3.8). Wire-up (see README.md in this folder): - LG_THEME = 'dark' - LG_CSS_OVERRIDES = URL/path to this file - LG_CUSTOM_HEAD = contents of gorillaservers-custom-head.html (loads fonts) Targets the stock markup classes/IDs: .card .card-title #outputCard #outputContent #executeButton #backendMethod .form-select .form-control .input-group-text .btn-primary .btn-outline-secondary .form-check-input If your install is a customized fork, a few selectors may need nudging. ========================================================================== */ :root { --gs-brand-200: #9cc0ff; --gs-brand-300: #5e97ff; --gs-brand-400: #2f78ff; --gs-brand-500: #0060f0; /* primary */ --gs-brand-600: #0050d6; --gs-ink-950: #07090d; --gs-ink-900: #0b0e13; --gs-ink-850: #0f131a; --gs-fg: #f4f6fb; --gs-emerald: #34d399; --gs-sans: "Roboto", Helvetica, Arial, system-ui, sans-serif; --gs-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace; } /* --- Bootstrap 5.3 dark-theme variable overrides ---------------------------- These recolor framework components (alerts, dropdowns, borders) globally. Requires LG_THEME='dark' so the attribute is set. */ [data-bs-theme="dark"] { --bs-body-bg: var(--gs-ink-950); --bs-body-color: var(--gs-fg); --bs-emphasis-color: #ffffff; --bs-border-color: rgba(255, 255, 255, 0.1); --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-secondary-bg: var(--gs-ink-850); --bs-tertiary-bg: var(--gs-ink-900); --bs-primary: var(--gs-brand-500); --bs-primary-rgb: 0, 96, 240; --bs-link-color: var(--gs-brand-300); --bs-link-color-rgb: 94, 151, 255; --bs-link-hover-color: var(--gs-brand-200); --bs-body-font-family: var(--gs-sans); --bs-font-monospace: var(--gs-mono); --bs-focus-ring-color: rgba(0, 96, 240, 0.3); } /* --- Page atmosphere — brand top-glow + faint grid, matching the site ------- */ body { font-family: var(--gs-sans); background-color: var(--gs-ink-950); background-image: radial-gradient(60% 45% at 50% -5%, rgba(0, 96, 240, 0.18) 0%, transparent 70%), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: auto, 56px 56px, 56px 56px; background-position: center top; background-attachment: fixed; -webkit-font-smoothing: antialiased; } ::selection { background-color: var(--gs-brand-500); color: #fff; } /* --- Header / footer rules -------------------------------------------------- */ .border-bottom, .border-top { border-color: rgba(255, 255, 255, 0.1) !important; } .text-muted { color: rgba(255, 255, 255, 0.45) !important; } /* --- Cards: glassy ink surface, soft brand shadow --------------------------- */ .card { --bs-card-bg: rgba(15, 19, 26, 0.6); --bs-card-border-color: rgba(255, 255, 255, 0.1); --bs-card-cap-bg: transparent; --bs-card-color: var(--gs-fg); border-radius: 1rem; backdrop-filter: blur(12px); box-shadow: 0 30px 80px -40px rgba(0, 96, 240, 0.35); } .card-title { font-family: var(--gs-sans); font-weight: 600; letter-spacing: -0.01em; color: #fff; } /* --- Form controls: dark wells, brand focus ring ---------------------------- */ .form-control, .form-select { background-color: rgba(7, 9, 13, 0.7); border-color: rgba(255, 255, 255, 0.1); color: var(--gs-fg); font-family: var(--gs-mono); font-size: 0.92rem; } .form-control::placeholder { color: rgba(255, 255, 255, 0.28); } .form-control:focus, .form-select:focus { background-color: rgba(7, 9, 13, 0.85); border-color: rgba(47, 120, 255, 0.55); box-shadow: 0 0 0 0.2rem rgba(0, 96, 240, 0.2); color: #fff; } .input-group-text { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-family: var(--gs-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; } .form-check-input:checked { background-color: var(--gs-brand-500); border-color: var(--gs-brand-500); } .form-check-input:focus { border-color: rgba(47, 120, 255, 0.55); box-shadow: 0 0 0 0.2rem rgba(0, 96, 240, 0.2); } /* --- Primary button (Execute): solid brand + glow --------------------------- */ .btn-primary { --bs-btn-bg: var(--gs-brand-500); --bs-btn-border-color: var(--gs-brand-500); --bs-btn-hover-bg: var(--gs-brand-400); --bs-btn-hover-border-color: var(--gs-brand-400); --bs-btn-active-bg: var(--gs-brand-600); --bs-btn-active-border-color: var(--gs-brand-600); --bs-btn-disabled-bg: rgba(0, 96, 240, 0.5); --bs-btn-disabled-border-color: transparent; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; font-weight: 600; box-shadow: 0 8px 30px -8px rgba(0, 96, 240, 0.7); } /* --- Test-file / secondary buttons: subtle pills ---------------------------- */ .btn-outline-secondary, .btn-secondary { --bs-btn-color: rgba(255, 255, 255, 0.78); --bs-btn-border-color: rgba(255, 255, 255, 0.15); --bs-btn-bg: rgba(255, 255, 255, 0.04); --bs-btn-hover-bg: rgba(0, 96, 240, 0.15); --bs-btn-hover-border-color: rgba(47, 120, 255, 0.4); --bs-btn-hover-color: var(--gs-brand-200); --bs-btn-active-bg: rgba(0, 96, 240, 0.22); font-weight: 500; } /* --- Command output terminal ------------------------------------------------ */ #outputCard .card-body { background-color: var(--gs-ink-950) !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; } #outputContent { font-family: var(--gs-mono) !important; font-size: 12.5px; line-height: 1.55; color: rgba(244, 250, 255, 0.85) !important; background: transparent !important; } #outputContent::-webkit-scrollbar { width: 8px; height: 8px; } #outputContent::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } #outputContent::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* --- Links ------------------------------------------------------------------ */ a { color: var(--gs-brand-300); text-decoration: none; } a:hover { color: var(--gs-brand-200); } /* --- HUD live-dot (for the logo/header snippet in the README) --------------- */ .gs-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--gs-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gs-emerald); } .gs-live-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--gs-emerald); animation: gs-live-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes gs-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } @media (prefers-reduced-motion: reduce) { .gs-live-dot { animation: none; } }