/* ========================================================================== A-NET ONLINE — full re-skin of webv4 Auto-loaded by root/index.xjs when this file exists. Loaded LAST, after bootstrap.min.css, offcanvas.css, style.css, checkbox.css. Targets BS3 markup directly so unmodified stock pages also re-skin. ========================================================================== */ /* ========================================================================== THEME SYSTEM The site supports two themes selected via an `html.theme-*` class: theme-underground (DEFAULT) — gritty street/comic vibe; warm dark palette with orange-red primary, amber-gold accent, deep red highlight. Inspired by A-Net's underground BBS art and street typography. theme-neon — clean cyberpunk; cool dark palette with neon teal/green/purple. Original re-skin. anet-enhance.js applies the saved theme class on before first paint (FOUC-free). All color/glow/shadow values come from CSS variables — every downstream rule (button, hero, sidebar, gallery, etc.) automatically swaps. To add a new theme: add another `html.theme-NAME { ... }` block redefining the variables. ========================================================================== */ /* Shared structural tokens */ :root { --anet-radius: 14px; --anet-radius-sm: 9px; --anet-font-display: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; --anet-font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace; --anet-font-display-bold-stack: 'Bebas Neue', 'Oswald', 'Impact', var(--anet-font-display); } /* ============== THEME: UNDERGROUND (default) ============== */ :root, html.theme-underground { --anet-bg-0: #0d0604; --anet-bg-1: #160a05; --anet-bg-2: #1f0e07; --anet-card-1: #1f100a; --anet-card-2: #2a160c; --anet-card-3: #3d1f0f; --anet-line: rgba(255, 107, 53, 0.20); --anet-line-strong: rgba(255, 107, 53, 0.42); --anet-text: #f4ead0; --anet-text-dim: #c4a878; --anet-text-muted: #8a7050; --anet-cyan: #ff6b35; /* PRIMARY — warm orange-red */ --anet-green: #ffb627; /* SECONDARY — amber gold */ --anet-purple: #c8102e; /* TERTIARY — deep red */ --anet-pink: #ffd166; /* ACCENT — soft yellow */ --anet-yellow: #ffce47; /* warning yellow */ /* Theme-specific: sub-tone gradients used in hero/cards */ --anet-grad-bg-a: rgba(255, 107, 53, 0.08); --anet-grad-bg-b: rgba(200, 16, 46, 0.10); --anet-grad-bg-c: linear-gradient(180deg, #0a0403 0%, #100604 40%, #100604 100%); --anet-grad-card: linear-gradient(160deg, #1f100a 0%, #2a160c 100%); --anet-grad-hero: linear-gradient(160deg, #1a0907 0%, #2a160c 50%, #3d1f0f 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(255,107,53,0.22), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(200,16,46,0.18), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #ff6b35 0%, #c8102e 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #ff8a5c 0%, #e1374a 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #ffd166 0%, #ff6b35 50%, #c8102e 100%); --anet-shadow-glow: 0 0 24px rgba(255, 107, 53, 0.22), 0 6px 30px rgba(0, 0, 0, 0.65); /* Heading style preference for this theme — bigger, blockier */ --anet-heading-tracking: 0.02em; --anet-heading-transform: none; } /* Underground gets a faint grit overlay on the body for street/comic vibe. Falls through unmodified to neon if it's not the active theme. */ html.theme-underground body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.35; mix-blend-mode: overlay; background-image: radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.10), transparent 50%), radial-gradient(circle at 80% 70%, rgba(200, 16, 46, 0.08), transparent 50%); } /* ============== THEME: NEON (alternate) ============== */ html.theme-neon { --anet-bg-0: #08090f; --anet-bg-1: #0c0e18; --anet-bg-2: #11142a; --anet-card-1: #1a1d2e; --anet-card-2: #1f2147; --anet-card-3: #2a2d6e; --anet-line: rgba(0, 255, 234, 0.14); --anet-line-strong: rgba(0, 255, 234, 0.32); --anet-text: #e7ecf3; --anet-text-dim: #9aa3c4; --anet-text-muted: #6f7895; --anet-cyan: #00ffea; /* PRIMARY */ --anet-green: #39ff14; /* SECONDARY */ --anet-purple: #b56cff; /* TERTIARY */ --anet-pink: #ff4fa3; /* ACCENT */ --anet-yellow: #ffd166; --anet-grad-bg-a: rgba(0, 255, 234, 0.06); --anet-grad-bg-b: rgba(181, 108, 255, 0.06); --anet-grad-bg-c: linear-gradient(180deg, #06070d 0%, #0a0c1a 40%, #0a0c1a 100%); --anet-grad-card: linear-gradient(160deg, #1a1d2e 0%, #1f2147 100%); --anet-grad-hero: linear-gradient(160deg, #0d1124 0%, #14183a 60%, #1a1f55 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(181,108,255,0.18), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(0,255,234,0.16), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #00ffea 0%, #00b4ff 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #5cffe8 0%, #4cc8ff 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #5cffe8 0%, #00ffea 50%, #00b4ff 100%); --anet-shadow-glow: 0 0 24px rgba(0, 255, 234, 0.18), 0 6px 30px rgba(0, 0, 0, 0.55); --anet-heading-tracking: -0.01em; --anet-heading-transform: none; } /* ============== THEME: WASTELAND (heavy grunge / post-apocalyptic) ============== */ html.theme-wasteland { --anet-bg-0: #0e0805; --anet-bg-1: #15100a; --anet-bg-2: #1f1810; --anet-card-1: #251812; --anet-card-2: #36231a; --anet-card-3: #4a3023; --anet-line: rgba(214, 63, 31, 0.22); --anet-line-strong: rgba(214, 63, 31, 0.48); --anet-text: #d4c8a8; /* dirty parchment */ --anet-text-dim: #998873; /* dust */ --anet-text-muted: #6b5e4e; /* shadow brown */ --anet-cyan: #d63f1f; /* PRIMARY — blood red */ --anet-green: #b8821a; /* SECONDARY — rust gold */ --anet-purple: #8b3a1a; /* TERTIARY — dark rust */ --anet-pink: #ffac4c; /* ACCENT — orange flame */ --anet-yellow: #e0a82e; /* warning amber */ --anet-grad-bg-a: rgba(214, 63, 31, 0.10); --anet-grad-bg-b: rgba(139, 58, 26, 0.14); --anet-grad-bg-c: linear-gradient(180deg, #0a0604 0%, #100a06 40%, #100a06 100%); --anet-grad-card: linear-gradient(160deg, #251812 0%, #36231a 100%); --anet-grad-hero: linear-gradient(160deg, #1a0e08 0%, #2a1a12 50%, #4a2a1a 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(214,63,31,0.25), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(139,58,26,0.22), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #d63f1f 0%, #8b3a1a 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #ed5a3a 0%, #a84a26 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #ffac4c 0%, #d63f1f 50%, #8b3a1a 100%); --anet-shadow-glow: 0 0 24px rgba(214, 63, 31, 0.28), 0 6px 30px rgba(0, 0, 0, 0.75); --anet-heading-tracking: 0.05em; --anet-heading-transform: uppercase; } /* Wasteland — heavy grit overlay simulating dust / scratched metal */ html.theme-wasteland body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.45; mix-blend-mode: overlay; background-image: radial-gradient(circle at 30% 20%, rgba(214, 63, 31, 0.15), transparent 50%), radial-gradient(circle at 70% 80%, rgba(139, 58, 26, 0.12), transparent 50%), repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(214,63,31,0.02) 4px, rgba(214,63,31,0.02) 5px); } /* Wasteland — hero gets aggressive diagonal grunge stripes */ html.theme-wasteland .anet-hero { background: repeating-linear-gradient(135deg, transparent 0, transparent 80px, rgba(0,0,0,0.20) 80px, rgba(0,0,0,0.20) 84px), var(--anet-grad-hero-glow-a), var(--anet-grad-hero-glow-b), var(--anet-grad-hero); } html.theme-wasteland .anet-hero-title { font-family: var(--anet-font-display-bold-stack); font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; text-shadow: 3px 3px 0 rgba(0,0,0,0.7), 0 0 30px rgba(214,63,31,0.4); } html.theme-wasteland .anet-hero-eyebrow { letter-spacing: 0.28em; } /* ============== THEME: SYNTHWAVE (80s retro futuristic) ============== */ html.theme-synthwave { --anet-bg-0: #07021a; --anet-bg-1: #0d0521; --anet-bg-2: #1a0a3a; --anet-card-1: #1f0c4a; --anet-card-2: #2a0d6b; --anet-card-3: #3d1a8a; --anet-line: rgba(255, 0, 110, 0.24); --anet-line-strong: rgba(255, 0, 110, 0.50); --anet-text: #fce8ff; --anet-text-dim: #b89eee; --anet-text-muted: #8c75c4; --anet-cyan: #ff006e; /* PRIMARY — hot pink */ --anet-green: #00f0ff; /* SECONDARY — electric cyan */ --anet-purple: #b829ff; /* TERTIARY — vivid purple */ --anet-pink: #ffea00; /* ACCENT — sunset yellow */ --anet-yellow: #ffea00; --anet-grad-bg-a: rgba(255, 0, 110, 0.10); --anet-grad-bg-b: rgba(184, 41, 255, 0.10); --anet-grad-bg-c: linear-gradient(180deg, #050118 0%, #0d0521 30%, #1a0a3a 100%); --anet-grad-card: linear-gradient(160deg, #1f0c4a 0%, #2a0d6b 100%); --anet-grad-hero: linear-gradient(180deg, #ff006e 0%, #b829ff 35%, #2a0d6b 80%, #0d0521 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(255,234,0,0.18), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(0,240,255,0.16), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #ff006e 0%, #b829ff 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #ff3a8d 0%, #cc4dff 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #ffea00 0%, #ff006e 50%, #b829ff 100%); --anet-shadow-glow: 0 0 28px rgba(255, 0, 110, 0.32), 0 0 60px rgba(0, 240, 255, 0.18), 0 6px 30px rgba(0, 0, 0, 0.55); --anet-heading-tracking: 0.02em; --anet-heading-transform: none; } /* Synthwave — sunset glow at the top of the page */ html.theme-synthwave body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.55; background-image: radial-gradient(ellipse 1400px 500px at 50% -10%, rgba(255, 0, 110, 0.25), transparent 60%), radial-gradient(ellipse 800px 300px at 50% -15%, rgba(255, 234, 0, 0.18), transparent 70%); } /* Synthwave — perspective grid floor at the bottom */ html.theme-synthwave body::after { content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 35vh; pointer-events: none; z-index: -1; opacity: 0.18; background-image: linear-gradient(to right, rgba(255,0,110,0.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,0,110,0.55) 1px, transparent 1px); background-size: 5vw 4vh; transform: perspective(400px) rotateX(60deg); transform-origin: center bottom; mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%); } html.theme-synthwave .anet-hero { background: linear-gradient(180deg, transparent 60%, rgba(13,5,33,0.92) 100%), linear-gradient(180deg, #ff006e 0%, #b829ff 40%, #1a0a3a 80%, #0d0521 100%); border-color: var(--anet-line-strong); } html.theme-synthwave .anet-hero-title { text-shadow: 0 0 20px rgba(255,0,110,0.55), 0 0 40px rgba(184,41,255,0.35), 2px 2px 0 rgba(0,0,0,0.5); color: #fff; } /* End theme system ------------------------------------------------------ */ /* ----- Global reset / base ----- */ html, body { background: radial-gradient(1200px 700px at 12% -10%, var(--anet-grad-bg-a), transparent 60%), radial-gradient(900px 600px at 90% 0%, var(--anet-grad-bg-b), transparent 60%), var(--anet-grad-bg-c) !important; background-attachment: fixed !important; color: var(--anet-text); font-family: var(--anet-font-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Override any per-page background-image hack from old home page */ body { background-image: none !important; background-size: cover !important; } /* Selection */ ::selection { background: rgba(0, 255, 234, 0.28); color: #fff; } /* Scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } *::-webkit-scrollbar-thumb { background: rgba(0, 255, 234, 0.18); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 234, 0.34); } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #f4f7ff; font-family: var(--anet-font-display); letter-spacing: -0.01em; } h1, .h1 { font-weight: 800; letter-spacing: -0.02em; } h2, .h2 { font-weight: 700; } h3, .h3 { font-weight: 700; } /* Links */ a { color: var(--anet-cyan); transition: color .18s ease, text-shadow .18s ease; } a:hover, a:focus { color: #baffff; text-shadow: 0 0 10px rgba(0, 255, 234, 0.5); text-decoration: none; } hr { border-color: var(--anet-line); } /* ========================================================================== TOP STRIP (mods/components/header.xjs branded social row) The strip is fixed at top:0 and the navbar is offset down by its height so they stack cleanly. Hidden on very narrow screens to save vertical space. ========================================================================== */ .anet-topstrip { position: fixed; top: 0; left: 0; right: 0; z-index: 1042; background: linear-gradient(90deg, rgba(8,9,15,.94) 0%, rgba(17,20,42,.94) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--anet-line); padding: 6px 14px; height: 34px; box-sizing: border-box; } .anet-topstrip-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: flex-end; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } .anet-topstrip-link { color: var(--anet-text-dim); text-decoration: none; padding: 2px 6px; border-radius: 6px; transition: color .15s ease, background .15s ease; } .anet-topstrip-link:hover { color: var(--anet-cyan); background: rgba(0,255,234,.06); text-shadow: none; } /* ========================================================================== NAVBAR (override BS3 navbar-default look) ========================================================================== */ .navbar.anet-navbar, .navbar-default { background: linear-gradient(90deg, rgba(10,12,26,.92) 0%, rgba(20,23,55,.92) 100%) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0 !important; border-bottom: 1px solid var(--anet-line) !important; border-radius: 0 !important; margin-bottom: 0 !important; min-height: 60px !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55); } /* offset fixed navbar by topstrip height */ .navbar-default.navbar-fixed-top, .navbar.anet-navbar.navbar-fixed-top { top: 34px !important; } .navbar.anet-navbar .navbar-brand, .navbar-default .navbar-brand { color: #fff !important; font-weight: 800; letter-spacing: 0.02em; font-size: 18px; height: auto; padding: 18px 16px; display: flex; align-items: center; gap: 10px; } .navbar.anet-navbar .navbar-brand:hover, .navbar-default .navbar-brand:hover { color: var(--anet-cyan) !important; text-shadow: 0 0 12px rgba(0,255,234,.55); } /* Brand mark — pixel-A SVG. Four variants exist (one per theme); CSS shows the one matching the active theme. The base `.anet-brand-mark` rule below does NOT set display, so it doesn't fight with the show/hide rules. */ .anet-brand-mark { width: 32px; height: 32px; transition: filter .2s ease, transform .2s ease; } /* Hide all logo variants by default; show only the one matching active theme. `!important` defeats any framework rule (BS3 has no display rule for these classes, but adding for safety against stale caches and inline styles). */ img.anet-brand-mark-underground, img.anet-brand-mark-wasteland, img.anet-brand-mark-synthwave, img.anet-brand-mark-neon { display: none !important; } html.theme-underground img.anet-brand-mark-underground, html.theme-wasteland img.anet-brand-mark-wasteland, html.theme-synthwave img.anet-brand-mark-synthwave, html.theme-neon img.anet-brand-mark-neon { display: inline-block !important; } html.theme-underground .anet-brand-mark { filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.55)); } html.theme-wasteland .anet-brand-mark { filter: drop-shadow(0 0 6px rgba(214, 63, 31, 0.6)); } html.theme-synthwave .anet-brand-mark { filter: drop-shadow(0 0 8px rgba(255, 0, 110, 0.7)) drop-shadow(0 0 16px rgba(184, 41, 255, 0.4)); } html.theme-neon .anet-brand-mark { filter: drop-shadow(0 0 6px rgba(0, 255, 234, 0.45)); } .navbar-brand:hover .anet-brand-mark { transform: scale(1.05); } html.theme-underground .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.85)); } html.theme-wasteland .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 12px rgba(214, 63, 31, 0.9)); } html.theme-synthwave .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 14px rgba(255, 0, 110, 0.9)) drop-shadow(0 0 28px rgba(184, 41, 255, 0.6)); } html.theme-neon .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 12px rgba(0, 255, 234, 0.85)); } /* Theme switch button (sits next to dark-mode toggle in the navbar) */ .anet-theme-switch-li { display: flex; align-items: center; } .anet-theme-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--anet-line); background: rgba(255, 255, 255, 0.04); color: var(--anet-text); font-family: var(--anet-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .anet-theme-switch:hover { background: var(--anet-line); border-color: var(--anet-line-strong); color: var(--anet-cyan); } .anet-theme-switch-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--anet-grad-primary-btn); box-shadow: 0 0 8px var(--anet-line-strong); flex: 0 0 auto; } .anet-theme-switch-label { white-space: nowrap; } /* ========================================================================== SIDEBAR DRAWER — converts the always-visible right column into a slide-in panel toggled by the navbar "Panel" button. When open: sidebar visible, content gets right padding. When closed: sidebar slides off-screen, content reclaims full width. On screens <992px the drawer overlays content with a dim backdrop. ========================================================================== */ .anet-sb-toggle-li { display: flex; align-items: center; } .anet-sb-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--anet-line); background: rgba(255,255,255,0.04); color: var(--anet-text); font-family: var(--anet-font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .anet-sb-toggle:hover { background: var(--anet-line); border-color: var(--anet-line-strong); color: var(--anet-cyan); } .anet-sb-toggle-icon { display: inline-flex; flex-direction: column; justify-content: space-between; width: 16px; height: 12px; } .anet-sb-toggle-icon span { display: block; height: 2px; background: var(--anet-cyan); border-radius: 1px; transition: transform .25s ease, opacity .25s ease; } .anet-sb-toggle-icon span:nth-child(1) { width: 100%; } .anet-sb-toggle-icon span:nth-child(2) { width: 70%; } .anet-sb-toggle-icon span:nth-child(3) { width: 100%; } html.anet-sb-closed .anet-sb-toggle-icon span:nth-child(2) { opacity: 0.3; transform: translateX(-4px); } /* Sidebar slide animation. The sidebar lives inside a Bootstrap row column `.col-xs-6.col-sm-3.sidebar-offcanvas` rendered by index.xjs. We slide the #sidebar element itself (it's positioned by BS3 normally) and re-flow the content column to fill freed width. */ #sidebar { transition: transform .3s ease, opacity .3s ease; transform-origin: right top; } html.anet-sb-closed #sidebar { transform: translateX(110%); opacity: 0; pointer-events: none; } /* Reclaim sidebar width when drawer is closed (desktop only). BS3 uses floats, not flexbox, so the only thing that actually matters is `width`. */ @media (min-width: 992px) { html.anet-sb-closed .col-sm-9 { width: 100% !important; } } /* Mobile / narrow: drawer overlays main content with a backdrop */ @media (max-width: 991px) { /* Hide the BS3 default offcanvas toggle since our drawer replaces it */ .container > .row-offcanvas > .col-xs-12 > div > p.pull-left.visible-xs, .container > .row-offcanvas > .col-xs-12 > div > p.pull-right.visible-xs, .container-fluid > .row-offcanvas > .col-xs-12 > div > p.pull-left.visible-xs, .container-fluid > .row-offcanvas > .col-xs-12 > div > p.pull-right.visible-xs { display: none !important; } #sidebar.sidebar-offcanvas { position: fixed !important; top: 94px; right: 0; bottom: 0; width: min(380px, 92vw); max-width: 92vw; z-index: 1050; overflow-y: auto; padding: 14px 12px 24px !important; background: linear-gradient(180deg, rgba(8,9,15,0.96) 0%, rgba(15,12,8,0.96) 100%); border-left: 1px solid var(--anet-line); box-shadow: -10px 0 40px rgba(0,0,0,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Backdrop overlay when drawer is open (mobile) */ html.anet-sb-open body::after { content: ""; position: fixed; inset: 0; z-index: 1049; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; } } /* Underground theme — backdrop tint */ html.theme-underground.anet-sb-open body::after { background: rgba(20,8,4,0.65); } .navbar-default .navbar-nav > li > a { color: var(--anet-text-dim) !important; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 22px 14px !important; position: relative; transition: color .15s ease; } /* Hover/focus/open — must override BS3 .navbar-default { color:#555; bg:#e7e7e7 } for the right-side items (Dark / Register / Login) so they don't go white-on-near-white. Every selector permutation, including .navbar-right nested forms. */ .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:link, .navbar-default .navbar-nav > li > a:visited { color: var(--anet-text-dim) !important; background: transparent !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus, .navbar-default .navbar-nav > li.open > a, .navbar-default .navbar-nav > li.open > a:hover, .navbar-default .navbar-nav > li.open > a:focus, .navbar-default .navbar-nav.navbar-right > li > a:hover, .navbar-default .navbar-nav.navbar-right > li > a:focus, .navbar-default .navbar-nav.navbar-right > li.open > a, .navbar-default .navbar-nav.navbar-right > li.open > a:hover, .navbar-default .navbar-nav.navbar-right > li.open > a:focus { color: var(--anet-cyan) !important; background: rgba(0, 255, 234, 0.08) !important; text-shadow: 0 0 10px rgba(0, 255, 234, 0.4); } .navbar-default .navbar-nav > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 2px; background: linear-gradient(90deg, var(--anet-cyan), var(--anet-purple)); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .navbar-default .navbar-nav > li > a:hover::after, .navbar-default .navbar-nav > .active > a::after, .navbar-default .navbar-nav > .open > a::after { transform: scaleX(1); } /* Dark-mode toggle label inside the navbar — keep readable on hover too */ .navbar .dark-switch label, .navbar .dark-switch .checkbox label { color: var(--anet-text-dim) !important; } .navbar .dark-switch:hover label, .navbar .dark-switch label:hover { color: var(--anet-cyan) !important; } /* checkbox.css ships the toggle pill with `background: rgb(255,255,255)` and the moving knob also white. Reskin to brand colors so nothing in the navbar ever shows a hard white block. */ .checkbox.checbox-switch label span, .checkbox-inline.checbox-switch span { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--anet-line-strong) !important; box-shadow: rgba(0, 255, 234, 0.0) 0 0 0 0 inset !important; } .checkbox.checbox-switch label span:before, .checkbox-inline.checbox-switch span:before { background: linear-gradient(135deg, var(--anet-cyan), #00b4ff) !important; box-shadow: 0 0 8px rgba(0, 255, 234, 0.55) !important; } .checkbox.checbox-switch label > input:checked + span, .checkbox-inline.checbox-switch > input:checked + span { background-color: rgba(0, 255, 234, 0.16) !important; border-color: var(--anet-cyan) !important; box-shadow: rgba(0, 255, 234, 0.18) 0 0 0 8px inset !important; } /* Defensive: any element inside the navbar that BS3 / external CSS sets to a hard white background gets neutralized. Targets only `background-color` so our intentional translucent cyan hovers still work. */ .navbar-default *[style*="background:#fff"], .navbar-default *[style*="background-color:#fff"], .navbar-default *[style*="background: #fff"], .navbar-default *[style*="background-color: #fff"] { background-color: transparent !important; } .navbar-default a, .navbar-default a:link, .navbar-default a:visited { background-color: transparent !important; } /* Dropdown menus */ .dropdown-menu, .anet-dropdown { background: linear-gradient(180deg, #14172a 0%, #0e1020 100%) !important; border: 1px solid var(--anet-line) !important; border-radius: var(--anet-radius-sm) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--anet-line); padding: 6px !important; min-width: 200px; } .dropdown-menu > li > a, .dropdown-menu .dropdown-item { color: var(--anet-text) !important; border-radius: 6px; padding: 8px 12px !important; font-weight: 500; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu .dropdown-item:hover { background: rgba(0, 255, 234, 0.08) !important; color: var(--anet-cyan) !important; } /* User chip in navbar */ .anet-user { display: flex !important; align-items: center; gap: 8px; } .anet-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--anet-cyan), var(--anet-purple)); color: #06070d; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 0 12px rgba(0, 255, 234, 0.35); } /* Login form in dropdown */ .anet-login-form input.form-control, .anet-input { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line) !important; color: var(--anet-text) !important; border-radius: 8px !important; margin-bottom: 8px !important; } .anet-login-form input.form-control:focus, .anet-input:focus { outline: none; border-color: var(--anet-cyan) !important; box-shadow: 0 0 0 3px rgba(0, 255, 234, 0.16) !important; } /* Badge */ .badge.scanned, .anet-badge { background: linear-gradient(135deg, var(--anet-cyan), var(--anet-purple)) !important; color: #06070d !important; font-weight: 800; border-radius: 999px; padding: 2px 7px; font-size: 11px; } /* Toggle button (mobile hamburger) */ .navbar-default .navbar-toggle { border: 1px solid var(--anet-line) !important; background: rgba(0, 255, 234, 0.06) !important; } .navbar-default .navbar-toggle .icon-bar { background: var(--anet-cyan) !important; } /* Dark switch in navbar */ .dark-switch label { color: var(--anet-text-dim); } /* Push body content below fixed top-strip (34px) + fixed navbar (60px) */ body { padding-top: 94px; } /* ========================================================================== BUTTONS (override BS3 + add .anet-btn variants) ========================================================================== */ .btn, .anet-btn { border-radius: 10px !important; font-weight: 600 !important; letter-spacing: 0.01em; padding: 10px 18px !important; border: 1px solid var(--anet-line) !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--anet-text) !important; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn:hover, .btn:focus, .anet-btn:hover, .anet-btn:focus { background: rgba(0, 255, 234, 0.08) !important; color: var(--anet-cyan) !important; border-color: var(--anet-line-strong) !important; box-shadow: 0 6px 20px rgba(0, 255, 234, 0.15); transform: translateY(-1px); } .btn-primary, .anet-btn-primary { background: var(--anet-grad-primary-btn) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 24px var(--anet-line-strong), inset 0 -2px 0 rgba(0,0,0,.18); } .btn-primary:hover, .anet-btn-primary:hover, .btn-primary:focus, .anet-btn-primary:focus { background: var(--anet-grad-primary-btn-hover) !important; color: #fff !important; box-shadow: 0 12px 36px var(--anet-line-strong); } .btn-default { background: rgba(255, 255, 255, 0.04) !important; } .anet-btn-ghost { background: transparent !important; border: 1px solid var(--anet-line-strong) !important; color: var(--anet-text) !important; } .anet-btn-ghost:hover { background: rgba(0, 255, 234, 0.08) !important; color: var(--anet-cyan) !important; } /* ========================================================================== HERO (home page) ========================================================================== */ .anet-hero { position: relative; border-radius: var(--anet-radius); overflow: hidden; padding: clamp(36px, 7vw, 84px) clamp(20px, 4vw, 56px); margin: 6px 0 28px; border: 1px solid var(--anet-line); background: var(--anet-grad-hero-glow-a), var(--anet-grad-hero-glow-b), var(--anet-grad-hero); box-shadow: var(--anet-shadow-glow); } .anet-hero-bg, .anet-hero-grid { position: absolute; inset: 0; pointer-events: none; } .anet-hero-grid { background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 100%); opacity: .6; } .anet-hero-content { position: relative; z-index: 1; max-width: 880px; } .anet-hero-eyebrow { display: inline-block; font-family: var(--anet-font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--anet-cyan); text-shadow: 0 0 12px rgba(0,255,234,0.5); padding: 4px 10px; border: 1px solid var(--anet-line-strong); border-radius: 999px; margin-bottom: 18px; } .anet-hero-title { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin: 0 0 16px; color: #fff; letter-spacing: var(--anet-heading-tracking); } /* In Underground theme, hero title gets a heavier, all-caps street feel */ html.theme-underground .anet-hero-title { font-family: var(--anet-font-display-bold-stack); font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.0; text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 20px rgba(255,107,53,0.18); } html.theme-underground .anet-hero-eyebrow { letter-spacing: 0.24em; } .anet-hero-accent { background: linear-gradient(90deg, var(--anet-cyan), #4cc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .anet-hero-accent2 { background: linear-gradient(90deg, var(--anet-purple), var(--anet-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .anet-hero-tagline { font-size: clamp(15px, 1.6vw, 18px); color: var(--anet-text-dim); margin: 0 0 24px; max-width: 60ch; } .anet-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .anet-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 22px; font-family: var(--anet-font-mono); font-size: 13px; color: var(--anet-text-muted); } .anet-hero-stat strong { color: var(--anet-green); margin-right: 6px; } /* ========================================================================== FEATURE GRID (home) ========================================================================== */ .anet-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 28px; } .anet-feature { display: block; text-decoration: none; padding: 22px 20px; border-radius: var(--anet-radius); background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); color: var(--anet-text); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; } .anet-feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 0% 0%, rgba(0,255,234,0.10), transparent 60%); opacity: 0; transition: opacity .25s ease; } .anet-feature:hover { transform: translateY(-4px); border-color: var(--anet-line-strong); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--anet-line-strong); text-shadow: none; } .anet-feature:hover::before { opacity: 1; } .anet-feature h3 { margin: 0 0 6px; font-size: 18px; color: #fff; } .anet-feature p { margin: 0; color: var(--anet-text-dim); font-size: 14px; } .anet-feature-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(0,255,234,0.18), rgba(181,108,255,0.18)); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; border: 1px solid var(--anet-line); } /* ========================================================================== SECTIONS (home modules) ========================================================================== */ .anet-section { margin: 0 0 28px; padding: 22px; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } .anet-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .anet-section-head h2 { margin: 0; font-size: 22px; } .anet-section-sub { color: var(--anet-text-muted); font-size: 13px; font-family: var(--anet-font-mono); } /* Live pulse indicator */ .anet-live-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--anet-pink); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 8px var(--anet-pink); animation: anet-pulse-soft 1.6s ease-in-out infinite; } @keyframes anet-pulse-soft { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } } /* Radio iframe */ .anet-radio-frame { border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--anet-line); } .anet-radio-frame iframe { width: 100%; height: 700px; border: 0; display: block; } .anet-radio-fallback { display: none; margin-top: 12px; text-align: center; } .anet-radio-fallback audio { width: 100%; max-width: 880px; border-radius: 8px; } /* ========================================================================== TERMINAL FRAME (around fTelnet) ========================================================================== */ .anet-terminal-frame { border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--anet-line); box-shadow: inset 0 0 60px rgba(0, 255, 234, 0.04); } .anet-terminal-chrome { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #1a1d2e, #11142a); padding: 8px 12px; border-bottom: 1px solid var(--anet-line); font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-dim); } .anet-term-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 4px rgba(0,0,0,.5); } .anet-term-dot-r { background: #ff5f56; } .anet-term-dot-y { background: #ffbd2e; } .anet-term-dot-g { background: #27c93f; } .anet-term-title { margin-left: 8px; } .anet-connect-btnrow { display: flex; justify-content: center; margin: 18px 0 4px; } .fTelnetContainer { background: #000 !important; } /* ========================================================================== QUICKLINKS (home) ========================================================================== */ .anet-ql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .anet-ql-card { display: block; padding: 16px 18px; border-radius: var(--anet-radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--anet-line); text-decoration: none; color: var(--anet-text); position: relative; transition: border-color .18s ease, transform .12s ease, background .18s ease; } .anet-ql-card:hover { transform: translateY(-2px); border-color: var(--anet-line-strong); background: rgba(0,255,234,0.05); text-shadow: none; } .anet-ql-tag { display: inline-block; font-family: var(--anet-font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--anet-green); margin-bottom: 6px; text-transform: uppercase; } .anet-ql-title { font-size: 15px; font-weight: 600; color: #fff; } .anet-ql-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--anet-cyan); font-size: 18px; opacity: .8; } /* ========================================================================== FOOTER ========================================================================== */ .anet-footer { margin-top: 40px; padding: 28px 22px 18px; background: linear-gradient(180deg, rgba(10,12,26,.6), rgba(8,9,15,.95)); border-top: 1px solid var(--anet-line); border-radius: var(--anet-radius); } .anet-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1.2fr; gap: 18px; align-items: center; } .anet-footer-brand { display: flex; align-items: center; gap: 10px; } /* No `display` here — show/hide is handled by the brand-mark variant rules. */ .anet-footer-mark { width: 36px; height: 36px; } html.theme-underground .anet-footer-mark { filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.55)); } html.theme-wasteland .anet-footer-mark { filter: drop-shadow(0 0 8px rgba(214, 63, 31, 0.6)); } html.theme-synthwave .anet-footer-mark { filter: drop-shadow(0 0 10px rgba(255, 0, 110, 0.7)) drop-shadow(0 0 18px rgba(184, 41, 255, 0.4)); } html.theme-neon .anet-footer-mark { filter: drop-shadow(0 0 8px rgba(0, 255, 234, 0.5)); } .anet-footer-name { font-weight: 800; letter-spacing: .02em; font-size: 16px; color: #fff; } .anet-footer-links, .anet-footer-social { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .anet-footer-links a, .anet-footer-social a { color: var(--anet-text-dim); text-decoration: none; } .anet-footer-links a:hover, .anet-footer-social a:hover { color: var(--anet-cyan); } .anet-footer-meta { font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-muted); display: flex; flex-direction: column; gap: 4px; text-align: right; } @media (max-width: 880px) { .anet-footer-inner { grid-template-columns: 1fr 1fr; } .anet-footer-meta { text-align: left; } } @media (max-width: 520px) { .anet-footer-inner { grid-template-columns: 1fr; } } /* Hide the bare `

© ...

` fallback if it slipped in */ footer > p:only-child { color: var(--anet-text-muted); font-size: 12px; text-align: center; } /* ========================================================================== GENERIC PAGE WIDGETS (forum / files / mail / games inherit these) ========================================================================== */ /* Container background already handled via body bg */ .container, .container-fluid { color: var(--anet-text); } /* Page title (breadcrumb area) */ .breadcrumb { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line); border-radius: var(--anet-radius-sm) !important; padding: 10px 14px !important; margin-bottom: 16px !important; color: var(--anet-text-dim); } .breadcrumb a { color: var(--anet-cyan); } .breadcrumb > .active { color: #fff !important; } /* Panels (BS3) */ .panel { background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%) !important; border: 1px solid var(--anet-line) !important; border-radius: var(--anet-radius) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); color: var(--anet-text); } .panel-default > .panel-heading, .panel-heading { background: rgba(0,255,234,0.06) !important; border-bottom: 1px solid var(--anet-line) !important; color: #fff !important; border-radius: var(--anet-radius) var(--anet-radius) 0 0 !important; } .panel-body { background: transparent !important; color: var(--anet-text); } .panel-footer { background: rgba(0,0,0,0.25) !important; border-top: 1px solid var(--anet-line) !important; color: var(--anet-text-dim) !important; } /* List groups (forum lists, mail) */ .list-group { border-radius: var(--anet-radius) !important; overflow: hidden; } .list-group-item { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line) !important; color: var(--anet-text) !important; padding: 12px 14px !important; transition: background .15s ease, border-color .15s ease; } .list-group-item + .list-group-item { border-top-width: 0 !important; } a.list-group-item { color: var(--anet-text) !important; } a.list-group-item:hover, a.list-group-item:focus, li.list-group-item.mail:hover { background: rgba(0, 255, 234, 0.06) !important; color: var(--anet-cyan) !important; border-color: var(--anet-line-strong) !important; text-shadow: none; } a.list-group-item.scanned, .scanned { color: var(--anet-cyan) !important; } a.unread { background: rgba(0, 255, 234, 0.08) !important; } a.read { background: rgba(255, 255, 255, 0.02) !important; color: var(--anet-text-muted) !important; } /* Tables */ .table { color: var(--anet-text); } .table > thead > tr > th { color: var(--anet-cyan); border-bottom-color: var(--anet-line) !important; } .table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--anet-line) !important; } .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th, .striped:nth-of-type(even) { background: rgba(255, 255, 255, 0.025) !important; } .table-hover > tbody > tr:hover { background: rgba(0, 255, 234, 0.05) !important; } /* Forms */ .form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line) !important; color: var(--anet-text) !important; border-radius: 8px !important; box-shadow: none !important; } .form-control:focus, textarea:focus, input:focus, select:focus { border-color: var(--anet-cyan) !important; box-shadow: 0 0 0 3px rgba(0, 255, 234, 0.16) !important; outline: none !important; } label { color: var(--anet-text-dim); } /* Modals */ .modal-content { background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%) !important; border: 1px solid var(--anet-line) !important; border-radius: var(--anet-radius) !important; color: var(--anet-text) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6); } .modal-header { border-bottom-color: var(--anet-line) !important; } .modal-footer { border-top-color: var(--anet-line) !important; } /* ========================================================================== SIDEBAR — collapsible glass panels (anet-enhance.js wraps each widget) Hard-overrides BS3 list-group whiteness for every nested element. ========================================================================== */ #sidebar, .anet-sidebar { padding-top: 8px; } #sidebar h4 { color: var(--anet-cyan); } /* Each widget gets wrapped in .anet-sb-panel by anet-enhance.js */ .anet-sb-panel { background: linear-gradient(160deg, rgba(26,29,46,0.85) 0%, rgba(31,33,71,0.85) 100%); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); margin-bottom: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .2s ease, box-shadow .2s ease; } .anet-sb-panel:hover { border-color: var(--anet-line-strong); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--anet-line-strong); } .anet-sb-panel-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: linear-gradient(90deg, rgba(0,255,234,0.08) 0%, rgba(181,108,255,0.06) 100%); border: 0; border-bottom: 1px solid var(--anet-line); color: #fff; cursor: pointer; font-family: var(--anet-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; transition: background .2s ease; } .anet-sb-panel-head:hover { background: linear-gradient(90deg, rgba(0,255,234,0.14) 0%, rgba(181,108,255,0.10) 100%); } .anet-sb-panel-title { color: var(--anet-cyan); text-shadow: 0 0 10px rgba(0,255,234,0.35); } .anet-sb-panel-chev { color: var(--anet-cyan); font-size: 12px; transition: transform .25s ease; } .anet-sb-panel.is-collapsed .anet-sb-panel-chev { transform: rotate(-90deg); } .anet-sb-panel-body { padding: 14px; background: rgba(8, 9, 15, 0.3); max-height: 4000px; transition: max-height .3s ease, padding .3s ease, opacity .25s ease; overflow: hidden; } .anet-sb-panel.is-collapsed .anet-sb-panel-body { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } /* Force-kill any white BS3 backgrounds anywhere inside the sidebar */ #sidebar h4, #sidebar h5, #sidebar h6 { color: var(--anet-cyan) !important; background: transparent !important; text-shadow: 0 0 10px rgba(0,255,234,0.25); } #sidebar table, #sidebar .table, #sidebar .table tbody, #sidebar .table thead, #sidebar .table tr, #sidebar .table td, #sidebar .table th, #sidebar .list-group, #sidebar .list-group-item, #sidebar .panel, #sidebar .panel-body, #sidebar div[style*="background"] { background: transparent !important; background-image: none !important; border-color: rgba(0,255,234,0.10) !important; color: var(--anet-text) !important; } #sidebar .table-striped > tbody > tr:nth-child(odd) > td, #sidebar .table-striped > tbody > tr:nth-child(odd) > th { background: rgba(255,255,255,0.025) !important; } #sidebar .table > tbody > tr > td, #sidebar .table > tbody > tr > th { border-color: rgba(0,255,234,0.10) !important; padding: 6px 8px !important; font-size: 13px; } #sidebar .table > thead > tr > th { color: var(--anet-cyan) !important; border-bottom-color: var(--anet-line-strong) !important; } #sidebar .list-group-item { background: rgba(255,255,255,0.025) !important; border-color: rgba(0,255,234,0.08) !important; border-radius: 8px !important; margin-bottom: 6px !important; padding: 10px 12px !important; } #sidebar .list-group-item:hover { background: rgba(0,255,234,0.08) !important; border-color: var(--anet-line-strong) !important; color: #fff !important; } /* Sidebar imagery */ #sidebar img { border-radius: 10px; max-width: 100%; height: auto; } /* Tighten heading spacing inside legacy widgets */ #sidebar .anet-sb-panel-body > h4:first-child, #sidebar .anet-sb-panel-body > h5:first-child { margin-top: 0; } /* Old inline-style widgets shipped from sidebar/*.xjs use linear-gradient backgrounds directly. Override their inline-style backgrounds via attribute selector tricks — works for the gradient strings the user has hardcoded. Belt-and-suspenders: even if someone keeps the legacy 001/002/003 files instead of the override versions, theme switching still works. */ #sidebar [style*="linear-gradient"] { background: transparent !important; background-image: none !important; border-radius: var(--anet-radius-sm) !important; box-shadow: none !important; padding: 0 !important; } #sidebar [style*="#00ffea"], #sidebar [style*="#00FFEA"], #sidebar [style*="rgb(0, 255, 234)"] { color: var(--anet-cyan) !important; } #sidebar [style*="#39ff14"], #sidebar [style*="#39FF14"] { color: var(--anet-green) !important; } #sidebar [style*="#23245d"], #sidebar [style*="#22242e"] { background: transparent !important; } #sidebar [style*="#90f"], #sidebar [style*="#9900ff"] { color: var(--anet-purple) !important; } /* New theme-aware sidebar widget classes used by the override files */ .anet-nodelist { display: block; } .anet-nodelist-table { background: transparent !important; } .anet-nodelist-id { color: var(--anet-green); font-family: var(--anet-font-mono); } .anet-nodelist-user { color: var(--anet-cyan); } .anet-recent-visitors { background: transparent !important; padding: 0 !important; border: 0 !important; } .anet-rv-item { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--anet-line) !important; border-radius: 8px !important; margin-bottom: 6px !important; padding: 10px 12px !important; font-size: 13px; line-height: 1.5; } .anet-rv-alias { color: var(--anet-cyan); font-size: 14px; } .anet-rv-time { color: var(--anet-text-muted); font-size: 11px; font-family: var(--anet-font-mono); font-style: normal; } .anet-rv-label { color: var(--anet-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; } .anet-rv-loc { color: var(--anet-text); } .anet-rv-conn { color: var(--anet-green); font-family: var(--anet-font-mono); } .anet-sys-host { text-align: center; margin-bottom: 12px; } .anet-sys-host-name { margin: 0 0 8px; font-family: var(--anet-font-mono); color: var(--anet-cyan); font-size: 16px; text-shadow: 0 0 8px var(--anet-line-strong); } .anet-sys-ports { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-bottom: 10px; font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-dim); } .anet-sys-port strong { color: var(--anet-green); margin-right: 4px; font-weight: 700; } .anet-sys-cta { margin: 0; } .anet-sys-banner { width: 100%; max-width: 220px; height: auto; border-radius: 8px; border: 1px solid var(--anet-line); box-shadow: 0 6px 20px rgba(0,0,0,0.5); transition: border-color .15s ease, box-shadow .15s ease; } .anet-sys-banner:hover { border-color: var(--anet-line-strong); box-shadow: 0 8px 28px var(--anet-line-strong); } .anet-sys-table { background: transparent !important; } .anet-sys-table th[scope="row"] { color: var(--anet-cyan) !important; font-weight: 600; } .anet-sys-stat-on { color: var(--anet-green); } .anet-sys-stat-off { color: var(--anet-cyan); } /* Sidebar list-group host: kill the BS3 list border so the panels stand alone */ #sidebar ul.list-group { background: transparent !important; border: 0 !important; margin-bottom: 0; } #sidebar li.list-group-item.sidebar { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; } #sidebar li.list-group-item.sidebar:empty { display: none !important; } /* MRC stats widget (mods/sidebar/004-mrcstats.xjs) */ .anet-mrc-grid { display: flex; flex-direction: column; gap: 6px; } .anet-mrc-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; font-family: var(--anet-font-mono); font-size: 13px; } .anet-mrc-label { color: var(--anet-text-dim); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; } .anet-mrc-value { color: var(--anet-green); font-weight: 800; font-size: 16px; text-shadow: 0 0 8px rgba(57,255,20,0.4); } .anet-mrc-foot { margin-top: 6px; font-family: var(--anet-font-mono); font-size: 11px; color: var(--anet-text-muted); text-align: right; } /* Recent-posts widget (mods/sidebar/005-recent-posts.xjs) */ .anet-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .anet-recent-item { padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; transition: background .15s ease, border-color .15s ease; } .anet-recent-item:hover { background: rgba(255,255,255,0.05); border-color: var(--anet-line-strong); } .anet-recent-subj { font-weight: 600; font-size: 13px; color: #fff; line-height: 1.3; margin-bottom: 3px; } .anet-recent-meta { font-family: var(--anet-font-mono); font-size: 11px; color: var(--anet-text-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; } .anet-recent-from { color: var(--anet-cyan); font-weight: 600; } .anet-recent-sep { opacity: 0.5; } .anet-recent-sub { color: var(--anet-green); } .anet-recent-ago { margin-left: auto; background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--anet-line); } .anet-recent-empty { font-size: 12px; color: var(--anet-text-muted); font-style: italic; padding: 6px 2px; } /* Blockquote (forum messages) */ blockquote { background: rgba(0, 255, 234, 0.04); border-left: 4px solid var(--anet-line-strong) !important; color: var(--anet-text-dim); border-radius: 8px; padding: 10px 14px !important; } div.message { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--anet-line); border-radius: var(--anet-radius-sm); padding: 14px; margin: 12px 0; } /* Pagination */ .pagination > li > a, .pagination > li > span { background: rgba(255, 255, 255, 0.03) !important; border-color: var(--anet-line) !important; color: var(--anet-text) !important; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover { background: var(--anet-cyan) !important; color: #06070d !important; border-color: var(--anet-cyan) !important; } .pagination > li > a:hover { background: rgba(0,255,234,0.08) !important; color: var(--anet-cyan) !important; } /* Alerts */ .alert { border-radius: var(--anet-radius-sm) !important; border: 1px solid var(--anet-line) !important; background: rgba(255, 255, 255, 0.03) !important; color: var(--anet-text); } .alert-info { border-left: 4px solid var(--anet-cyan) !important; } .alert-success { border-left: 4px solid var(--anet-green) !important; } .alert-warning { border-left: 4px solid var(--anet-yellow) !important; } .alert-danger { border-left: 4px solid var(--anet-pink) !important; } /* Glyphicons (BS3) — keep visible */ .glyphicon { color: inherit; } /* Pre/code */ pre, code, kbd, samp { font-family: var(--anet-font-mono); background: rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--anet-line); border-radius: 6px; color: var(--anet-cyan); } pre.ansi { background: #000 !important; } /* ========================================================================== DARK MODE — already-dark theme; prevent BS3 .dark from re-applying weirdly ========================================================================== */ .dark { background-color: transparent !important; color: var(--anet-text) !important; } .dark .navbar { background-color: transparent !important; } .dark .navbar-brand { color: #fff !important; } .dark .dropdown-menu { background-color: #14172a !important; } .dark .list-group-item { background-color: rgba(255,255,255,0.03) !important; color: var(--anet-text) !important; border-color: var(--anet-line) !important; } .dark .breadcrumb { background-color: rgba(255,255,255,0.03) !important; } .dark .modal-content { background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%) !important; color: var(--anet-text) !important; } .dark a.btn, .dark .btn { background-color: rgba(255,255,255,0.04) !important; color: var(--anet-text) !important; } .dark .btn-primary { background: linear-gradient(135deg, var(--anet-cyan), #00b4ff) !important; color: #06070d !important; } .dark input, .dark select, .dark textarea { background: rgba(255,255,255,0.03) !important; color: var(--anet-text) !important; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 991px) { body { padding-top: 94px; } .navbar-default .navbar-nav > li > a { padding: 12px 14px !important; } .navbar-default .navbar-nav > li > a::after { display: none; } .navbar-collapse { background: rgba(10,12,26,0.95); border-top: 1px solid var(--anet-line); } } @media (max-width: 480px) { /* hide topstrip on tiny screens to save vertical space */ .anet-topstrip { display: none; } .navbar-default.navbar-fixed-top, .navbar.anet-navbar.navbar-fixed-top { top: 0 !important; } body { padding-top: 60px; } } /* ========================================================================== COMPACT HERO (used on subpages like the gallery) ========================================================================== */ .anet-hero-compact { padding: 28px 22px; margin-bottom: 18px; } /* ========================================================================== GAME GALLERY (mods/pages/008-gameservers.xjs) ========================================================================== */ .anet-gallery-toolbar { position: sticky; top: 94px; z-index: 10; margin: 0 -4px 18px; padding: 12px 14px; background: linear-gradient(180deg, rgba(8,9,15,0.92) 0%, rgba(10,12,26,0.92) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); box-shadow: 0 12px 30px rgba(0,0,0,0.45); } .anet-gallery-search { margin-bottom: 10px; } .anet-gallery-search input.anet-input { width: 100%; padding: 12px 14px !important; font-size: 14px !important; } .anet-gallery-filter { display: flex; flex-wrap: wrap; gap: 8px; } .anet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--anet-line); color: var(--anet-text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; } .anet-chip:hover { background: rgba(0,255,234,0.08); color: var(--anet-cyan); border-color: var(--anet-line-strong); } .anet-chip.is-active { background: linear-gradient(135deg, var(--anet-cyan), #00b4ff); color: #06070d; border-color: transparent; box-shadow: 0 4px 16px rgba(0,255,234,0.34); } .anet-chip-count { background: rgba(0,0,0,0.25); color: inherit; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-family: var(--anet-font-mono); } .anet-chip.is-active .anet-chip-count { background: rgba(0,0,0,0.35); } .anet-chip-icon { font-size: 14px; } .anet-gal-section { margin: 0 0 30px; } .anet-gal-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--anet-line); flex-wrap: wrap; } .anet-gal-cat-icon { font-size: 22px; } .anet-gal-section-head h2 { margin: 0; font-size: 20px; color: #fff; } .anet-gal-cat-count { background: rgba(0,255,234,0.1); color: var(--anet-cyan); border: 1px solid var(--anet-line-strong); padding: 2px 10px; border-radius: 999px; font-family: var(--anet-font-mono); font-size: 12px; } .anet-gal-cat-desc { color: var(--anet-text-muted); font-size: 13px; flex: 1; } .anet-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .anet-gal-card { display: block; border-radius: var(--anet-radius); background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); overflow: hidden; text-decoration: none; color: var(--anet-text); position: relative; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .anet-gal-card:hover { transform: translateY(-3px); border-color: var(--anet-line-strong); box-shadow: 0 14px 38px rgba(0,0,0,0.6), 0 0 0 1px var(--anet-line-strong); text-shadow: none; } .anet-gal-thumb { position: relative; background: #000; aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center; } .anet-gal-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s ease; } .anet-gal-card:hover .anet-gal-thumb img { transform: scale(1.04); } .anet-gal-thumb-shine { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.65) 100%); pointer-events: none; } .anet-gal-meta { padding: 12px 14px; border-top: 1px solid var(--anet-line); } .anet-gal-cat-tag { font-family: var(--anet-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--anet-green); text-transform: uppercase; margin-bottom: 4px; } .anet-gal-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; } .anet-gallery-empty { text-align: center; padding: 60px 20px; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); } .anet-gallery-empty h3 { margin: 12px 0 6px; } .anet-gallery-empty p { color: var(--anet-text-muted); } /* ========================================================================== LIGHTBOX (game gallery) ========================================================================== */ html.anet-lb-open, html.anet-lb-open body { overflow: hidden; } /* Override our display:flex when the [hidden] attribute is set so that lb.hidden = true actually hides the lightbox. Browsers treat [hidden] as display:none by default but our .anet-lightbox display:flex wins without this explicit rule. */ .anet-lightbox[hidden] { display: none !important; } .anet-lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; } .anet-lightbox-backdrop { position: absolute; inset: 0; background: radial-gradient(800px 500px at 50% 50%, rgba(0,255,234,0.10), rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .anet-lightbox-frame { position: relative; z-index: 1; max-width: min(1100px, 96vw); max-height: 92vh; width: 100%; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line-strong); border-radius: var(--anet-radius); box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--anet-line); overflow: hidden; animation: anet-lb-in .22s ease-out both; } @keyframes anet-lb-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .anet-lightbox-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, #1a1d2e, #11142a); border-bottom: 1px solid var(--anet-line); font-family: var(--anet-font-mono); font-size: 13px; color: var(--anet-text-dim); } .anet-lightbox-chrome .anet-term-dot[data-anet-lb-close] { cursor: pointer; } .anet-lightbox-title { flex: 1; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .anet-lightbox-x { background: transparent; border: 0; color: var(--anet-text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; } .anet-lightbox-x:hover { color: var(--anet-cyan); } .anet-lightbox-body { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: auto; min-height: 200px; } .anet-lightbox-body img { max-width: 100%; max-height: calc(92vh - 110px); display: block; background: #000; } .anet-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: 1px solid var(--anet-line); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 1; transition: background .15s ease, border-color .15s ease, transform .12s ease; display: flex; align-items: center; justify-content: center; } .anet-lb-nav:hover { background: rgba(0,255,234,0.14); border-color: var(--anet-line-strong); color: var(--anet-cyan); transform: translateY(-50%) scale(1.06); } .anet-lb-prev { left: 12px; } .anet-lb-next { right: 12px; } .anet-lightbox-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--anet-line); background: rgba(0,0,0,0.25); } .anet-lightbox-counter { font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-muted); } @media (max-width: 640px) { .anet-gallery-toolbar { top: 60px; } .anet-gal-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .anet-gal-thumb { aspect-ratio: 4 / 3; } .anet-gal-meta { padding: 10px; } .anet-gal-title { font-size: 13px; } .anet-lb-nav { width: 38px; height: 38px; font-size: 20px; } } @media (max-width: 420px) { .anet-gal-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .anet-hero { padding: 28px 18px; } .anet-section { padding: 16px; } .anet-feature-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .anet-feature { padding: 14px; } .anet-feature h3 { font-size: 16px; } .anet-radio-frame iframe { height: 520px; } } @media (max-width: 420px) { .anet-feature-grid { grid-template-columns: 1fr; } } /* ========================================================================== FINAL NAVBAR HOVER OVERRIDE — placed last so source-order wins any tie. The Log-in link kept getting a white block because BS3's .navbar-default .navbar-nav > .open > a { background-color: #d5d5d5 } plus its descendant rules layer on the dropdown-toggle. This block is broad: any link/button/dropdown-toggle/list-item inside the navbar in any state gets cyan-on-glass (or transparent for non-interactive states). ========================================================================== */ .navbar-default, .navbar-default ul, .navbar-default li, .navbar-default .nav-item, .navbar-default .navbar-nav, .navbar-default .navbar-collapse, .navbar-default .open, .navbar-default .open > a, .navbar-default .nav-link, .navbar-default .dropdown-toggle, .navbar-default a, .navbar-default a:link, .navbar-default a:visited { background-color: transparent !important; } .navbar-default a:hover, .navbar-default a:focus, .navbar-default a:active, .navbar-default .nav-link:hover, .navbar-default .nav-link:focus, .navbar-default .nav-link:active, .navbar-default .dropdown-toggle:hover, .navbar-default .dropdown-toggle:focus, .navbar-default .dropdown-toggle:active, .navbar-default li:hover > a, .navbar-default li.open > a, .navbar-default li.open > a:hover, .navbar-default li.open > a:focus, .navbar-default li.active > a, .navbar-default li.active > a:hover, .navbar-default li.active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; text-shadow: 0 0 8px rgba(0, 255, 234, 0.4); } /* Dropdown menu itself — make the entire menu (including dim padding zones) immune to BS3's `background-color: #fff` default. */ .navbar-default .dropdown-menu, .navbar-default .dropdown-menu.anet-dropdown, #login-form.dropdown-menu { background: linear-gradient(180deg, #14172a 0%, #0e1020 100%) !important; background-color: #14172a !important; border: 1px solid var(--anet-line) !important; } /* The Login dropdown-toggle specifically (anet-login-toggle class) */ .navbar-default a.anet-login-toggle, .navbar-default a.anet-login-toggle:hover, .navbar-default a.anet-login-toggle:focus, .navbar-default a.anet-login-toggle:active, .navbar-default .open > a.anet-login-toggle { background: transparent !important; background-color: transparent !important; } .navbar-default a.anet-login-toggle:hover, .navbar-default a.anet-login-toggle:focus, .navbar-default .open > a.anet-login-toggle { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; } /* ========================================================================== FORUM / FILES / MAIL — polish pass on the inherited stock pages. These pages emit standard BS3 markup (panel + list-group + table). The rules below tighten visual hierarchy: avatars become circular, message bodies get card framing, timestamps go monospace, sub/forum lists get a left accent bar, and replies/quotes use the brand accent. ========================================================================== */ /* Forum: thread/sub list rows */ a.list-group-item.scanned, a.list-group-item.unread { position: relative; padding-left: 18px !important; } a.list-group-item.scanned::before, a.list-group-item.unread::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--anet-cyan); border-radius: 2px; box-shadow: 0 0 8px var(--anet-line-strong); } a.list-group-item.read::before { background: var(--anet-text-muted); box-shadow: none; } /* Sub-board listing: badge counters */ .list-group-item .badge { background: rgba(0,0,0,0.3) !important; border: 1px solid var(--anet-line); color: var(--anet-text-dim) !important; font-family: var(--anet-font-mono); font-weight: 600; } .list-group-item .badge.scanned, .list-group-item .badge.new { background: var(--anet-grad-primary-btn) !important; color: #fff !important; border-color: transparent; } /* Message viewer: header (from/to/date/subject) */ div.message { background: var(--anet-grad-card); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); padding: 0; overflow: hidden; margin: 14px 0; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } div.message > .message-header, div.message > .panel-heading { background: rgba(0,0,0,0.35) !important; padding: 10px 14px !important; border-bottom: 1px solid var(--anet-line) !important; font-family: var(--anet-font-mono); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; } div.message .message-from, div.message [class*="from"] strong { color: var(--anet-cyan); font-weight: 700; } div.message .message-date, div.message [class*="date"] { color: var(--anet-text-muted); font-size: 12px; } div.message > .panel-body, div.message > .message-body { padding: 14px 16px !important; background: transparent !important; font-size: 14px; line-height: 1.55; } /* Avatars (forum/recent visitors) */ div.message img, .message-from img, .list-group-item img:not(.anet-brand-mark) { border-radius: 8px; border: 1px solid var(--anet-line); } .icon, img.icon, img.avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover; border: 1px solid var(--anet-line-strong) !important; background: rgba(0,0,0,0.35); } /* Reply/compose form */ .reply, .compose, form.compose { background: var(--anet-grad-card); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); padding: 14px; margin: 18px 0; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } textarea.form-control { font-family: var(--anet-font-mono) !important; min-height: 160px; line-height: 1.5; } /* Quoted text in messages — use a brand-accent bar */ blockquote { background: rgba(255, 255, 255, 0.02) !important; border-left: 3px solid var(--anet-line-strong) !important; position: relative; padding-left: 16px !important; font-style: normal; margin: 8px 0; } .dark blockquote, html.theme-underground blockquote { background: rgba(255, 255, 255, 0.02) !important; } /* Vote buttons (forum reactions) */ .btn-uv, .btn-dv { font-size: 12px; padding: 4px 8px !important; font-family: var(--anet-font-mono); } .upvote-bg { background-color: var(--anet-cyan) !important; color: #06070d !important; } .downvote-bg { background-color: var(--anet-purple) !important; color: #fff !important; } .upvote-fg, .upvote:hover { color: var(--anet-cyan) !important; } .downvote-fg, .downvote:hover { color: var(--anet-purple) !important; } /* Mail list: unread vs read */ li.list-group-item.mail { display: flex; align-items: center; gap: 10px; } a.unread { font-weight: 700; background: rgba(255,255,255,0.05) !important; } a.read { font-weight: 400; opacity: 0.85; } /* Files: directory and file rows */ .list-group-item .glyphicon-folder-open, .list-group-item .glyphicon-folder-close, .list-group-item .glyphicon-file { margin-right: 8px; color: var(--anet-cyan); } .list-group-item .glyphicon-folder-close { color: var(--anet-green); } /* Pagination polish (already styled — tighten spacing) */ .pagination > li > a, .pagination > li > span { padding: 6px 12px !important; margin: 0 2px; border-radius: 8px !important; font-family: var(--anet-font-mono); font-size: 13px; } /* Page header (h1/h2 on subpages) */ .container > h1, .container > h2, .container-fluid > h1, .container-fluid > h2 { margin-top: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--anet-line); } html.theme-underground .container > h1, html.theme-underground .container > h2, html.theme-underground .container-fluid > h1, html.theme-underground .container-fluid > h2 { font-family: var(--anet-font-display-bold-stack); text-transform: uppercase; letter-spacing: 0.02em; } /* ========================================================================== GENERIC .nav HOVER OVERRIDE — BS3 also has a non-navbar-scoped rule: .nav > li > a:focus, .nav > li > a:hover { background-color: #eee } That's the actual source of the "white" highlight on Login (it's #eee, light gray, but reads as white on most monitors). Override it for any .nav inside any .navbar. ========================================================================== */ .navbar .nav > li > a, .navbar .nav > li > a:link, .navbar .nav > li > a:visited { background-color: transparent !important; } .navbar .nav > li > a:hover, .navbar .nav > li > a:focus, .navbar .nav > li > a:active, .navbar .nav > li.open > a, .navbar .nav > li.open > a:hover, .navbar .nav > li.open > a:focus, .navbar .nav > li.active > a, .navbar .nav > li.active > a:hover, .navbar .nav > li.active > a:focus, .anet-navbar .nav > li > a:hover, .anet-navbar .nav > li > a:focus, .anet-navbar .nav > li.open > a, .anet-navbar .nav > li.active > a { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; text-shadow: 0 0 8px rgba(0, 255, 234, 0.4); } /* Anet-navbar variant — target the Log-in toggle by its unique class chain. These selectors don't depend on .navbar-default at all. */ .anet-navbar a.anet-login-toggle, .anet-navbar a.anet-nav-link { background-color: transparent !important; } .anet-navbar a.anet-login-toggle:hover, .anet-navbar a.anet-login-toggle:focus, .anet-navbar a.anet-login-toggle:active, .anet-navbar a.anet-nav-link:hover, .anet-navbar a.anet-nav-link:focus, .anet-navbar a.anet-nav-link:active, .anet-navbar li.open > a.anet-login-toggle, .anet-navbar li.open > a.anet-nav-link { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; }