456 lines
No EOL
16 KiB
CSS
Executable file
456 lines
No EOL
16 KiB
CSS
Executable file
/* =============================================================
|
|
NETGRIMOIRE HOMEPAGE — custom.css
|
|
Aesthetic: Dark ops command center / arcane terminal
|
|
============================================================= */
|
|
|
|
/* ── CSS Variables ── */
|
|
:root {
|
|
--ng-teal: #00e5cc;
|
|
--ng-teal-dim: rgba(0, 229, 204, 0.15);
|
|
--ng-teal-border: rgba(0, 229, 204, 0.25);
|
|
--ng-teal-glow: rgba(0, 229, 204, 0.08);
|
|
--ng-amber: #ffaa00;
|
|
--ng-amber-dim: rgba(255, 170, 0, 0.15);
|
|
--ng-red: #ff4455;
|
|
--ng-green: #00ff88;
|
|
--ng-card-bg: rgba(12, 18, 24, 0.72);
|
|
--ng-card-border: rgba(255, 255, 255, 0.07);
|
|
--ng-blur: blur(6px);
|
|
--ng-radius: 10px;
|
|
--ng-transition: 0.2s ease;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
GREMLIN — Logo widget + AI card
|
|
───────────────────────────────────────────── */
|
|
|
|
/* Logo widget — subtle glow matching the badge's green sparks */
|
|
#information-widgets img[src*="gremlin-badge"] {
|
|
filter: drop-shadow(0 0 10px rgba(0, 229, 204, 0.45))
|
|
drop-shadow(0 0 24px rgba(0, 229, 204, 0.15));
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
#information-widgets img[src*="gremlin-badge"]:hover {
|
|
filter: drop-shadow(0 0 16px rgba(0, 229, 204, 0.70))
|
|
drop-shadow(0 0 32px rgba(0, 229, 204, 0.25));
|
|
}
|
|
|
|
/* Gremlin AI service card — scene image as card header */
|
|
.service-card[data-name="Gremlin AI"],
|
|
.service-card[id*="gremlin"] {
|
|
background-image: url("/images/gremlin-scene.png") !important;
|
|
background-size: cover !important;
|
|
background-position: center 20% !important;
|
|
border-color: var(--ng-teal-border) !important;
|
|
box-shadow: 0 0 24px var(--ng-teal-glow),
|
|
0 4px 20px rgba(0, 0, 0, 0.5) !important;
|
|
min-height: 120px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Dark gradient overlay so text stays readable over the scene */
|
|
.service-card[data-name="Gremlin AI"]::before,
|
|
.service-card[id*="gremlin"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(8, 14, 20, 0.20) 0%,
|
|
rgba(8, 14, 20, 0.82) 100%
|
|
);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* Keep card text above the overlay */
|
|
.service-card[data-name="Gremlin AI"] > *,
|
|
.service-card[id*="gremlin"] > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Gremlin card name — teal glow text */
|
|
.service-card[data-name="Gremlin AI"] .service-name,
|
|
.service-card[id*="gremlin"] .service-name {
|
|
color: var(--ng-teal) !important;
|
|
text-shadow: 0 0 12px rgba(0, 229, 204, 0.50);
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
BASE — Background behavior
|
|
───────────────────────────────────────────── */
|
|
|
|
/* Prevent any wrapper div from painting over the body background */
|
|
html,
|
|
body,
|
|
body > div {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body {
|
|
background-size: cover !important;
|
|
background-position: center center !important;
|
|
background-attachment: fixed !important;
|
|
}
|
|
|
|
/* Per-tab backgrounds */
|
|
body.tab-glance { background-image: url("/images/bg-glance.jpg") !important; }
|
|
body.tab-pncharris { background-image: url("/images/pncharris-bg.png") !important; }
|
|
body.tab-netgrimoire { background-image: url("/images/Netgrimoire-bg.png") !important; }
|
|
body.tab-wasted-bandwidth{ background-image: url("/images/Wasted-bandwidth-bg.png") !important; }
|
|
body.tab-nucking-futz { background-image: url("/images/Nucking-futz-bg.png") !important; }
|
|
|
|
/* Page overlay — keep background visible but readable */
|
|
#page-wrapper {
|
|
background-color: rgba(0, 0, 0, 0.42);
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
SERVICE CARDS
|
|
───────────────────────────────────────────── */
|
|
|
|
/* Target the actual Homepage services grid (Tailwind classes) */
|
|
ul.services-list {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
|
}
|
|
|
|
/* Each card fills exactly one column — never spans more */
|
|
ul.services-list > li {
|
|
grid-column: span 1 !important;
|
|
min-width: 0 !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.service-card {
|
|
background: var(--ng-card-bg) !important;
|
|
backdrop-filter: var(--ng-blur);
|
|
border: 1px solid var(--ng-card-border) !important;
|
|
border-radius: var(--ng-radius) !important;
|
|
transition: border-color var(--ng-transition),
|
|
box-shadow var(--ng-transition),
|
|
transform var(--ng-transition);
|
|
min-width: 0 !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.service-card:hover {
|
|
border-color: var(--ng-teal-border) !important;
|
|
box-shadow: 0 0 14px var(--ng-teal-glow),
|
|
0 4px 16px rgba(0, 0, 0, 0.4) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Service name */
|
|
.service-card .service-name,
|
|
.service-card a {
|
|
color: rgba(255, 255, 255, 0.90) !important;
|
|
transition: color var(--ng-transition);
|
|
}
|
|
|
|
.service-card:hover .service-name,
|
|
.service-card:hover a {
|
|
color: var(--ng-teal) !important;
|
|
}
|
|
|
|
/* Description text */
|
|
.service-card .service-description {
|
|
color: rgba(200, 210, 220, 0.55) !important;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
WIDGETS
|
|
───────────────────────────────────────────── */
|
|
|
|
.widget {
|
|
background: var(--ng-card-bg) !important;
|
|
backdrop-filter: var(--ng-blur);
|
|
border: 1px solid var(--ng-card-border) !important;
|
|
border-radius: var(--ng-radius) !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
/* Monitoring / stats widget — teal accent */
|
|
.widget[class*="uptimekuma"],
|
|
.widget[class*="portainer"],
|
|
.widget[class*="resources"] {
|
|
border-color: var(--ng-teal-border) !important;
|
|
box-shadow: 0 0 18px var(--ng-teal-glow),
|
|
0 2px 12px rgba(0, 0, 0, 0.35) !important;
|
|
}
|
|
|
|
/* Mailcow widget — amber accent (mail = caution) */
|
|
.widget[class*="mailcow"] {
|
|
border-color: rgba(255, 170, 0, 0.25) !important;
|
|
box-shadow: 0 0 14px var(--ng-amber-dim),
|
|
0 2px 12px rgba(0, 0, 0, 0.35) !important;
|
|
}
|
|
|
|
/* Widget stat values */
|
|
.widget .widget-value,
|
|
.widget [class*="value"] {
|
|
color: var(--ng-teal) !important;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Widget labels */
|
|
.widget .widget-label,
|
|
.widget [class*="label"] {
|
|
color: rgba(180, 200, 210, 0.60) !important;
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
GROUP HEADERS
|
|
───────────────────────────────────────────── */
|
|
|
|
/* Group title bar */
|
|
.services-group > div:first-child,
|
|
[class*="group-name"],
|
|
[class*="group-title"] {
|
|
color: var(--ng-teal) !important;
|
|
font-size: 0.70rem !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.12em !important;
|
|
text-transform: uppercase !important;
|
|
border-bottom: 1px solid var(--ng-teal-border) !important;
|
|
padding-bottom: 4px !important;
|
|
margin-bottom: 8px !important;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
STATUS INDICATORS (used in widgets)
|
|
───────────────────────────────────────────── */
|
|
|
|
.status-ok, [class*="status-up"], [class*="status-ok"] { color: var(--ng-green) !important; }
|
|
.status-warn, [class*="status-warn"], [class*="status-pend"] { color: var(--ng-amber) !important; }
|
|
.status-crit, [class*="status-down"], [class*="status-err"] { color: var(--ng-red) !important; }
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
GLOBAL WIDGETS BAR (top of page)
|
|
widgets.yaml renders here
|
|
───────────────────────────────────────────── */
|
|
|
|
/* Resource widget nodes */
|
|
#information-widgets .resources-widget {
|
|
background: rgba(12, 18, 24, 0.78) !important;
|
|
backdrop-filter: var(--ng-blur);
|
|
border: 1px solid var(--ng-teal-border) !important;
|
|
border-radius: var(--ng-radius) !important;
|
|
box-shadow: 0 0 20px var(--ng-teal-glow);
|
|
}
|
|
|
|
/* Search bar */
|
|
#information-widgets .search-widget input {
|
|
background: rgba(12, 18, 24, 0.80) !important;
|
|
border: 1px solid var(--ng-teal-border) !important;
|
|
border-radius: 6px !important;
|
|
color: #e0f0f0 !important;
|
|
transition: box-shadow var(--ng-transition),
|
|
border-color var(--ng-transition);
|
|
}
|
|
|
|
#information-widgets .search-widget input:focus {
|
|
outline: none !important;
|
|
border-color: var(--ng-teal) !important;
|
|
box-shadow: 0 0 12px var(--ng-teal-dim) !important;
|
|
}
|
|
|
|
/* Datetime / greeting */
|
|
#information-widgets .datetime-widget,
|
|
#information-widgets .greeting-widget {
|
|
color: rgba(220, 240, 245, 0.85) !important;
|
|
text-shadow: 0 0 20px rgba(0, 229, 204, 0.25);
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
SCROLLBAR — match the aesthetic
|
|
───────────────────────────────────────────── */
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
|
|
::-webkit-scrollbar-thumb { background: var(--ng-teal-border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 204, 0.45); }
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
TAB NAV
|
|
───────────────────────────────────────────── */
|
|
|
|
/* Tab bar background */
|
|
nav, [class*="topnav"], [class*="navbar"] {
|
|
background: rgba(6, 10, 14, 0.82) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border-bottom: 1px solid rgba(0, 229, 204, 0.12) !important;
|
|
}
|
|
|
|
/* Individual tab items */
|
|
nav a, [class*="tab-link"] {
|
|
color: rgba(200, 220, 225, 0.70) !important;
|
|
transition: color var(--ng-transition);
|
|
}
|
|
|
|
nav a:hover, nav a.active, [class*="tab-link"]:hover {
|
|
color: var(--ng-teal) !important;
|
|
}
|
|
|
|
/* Active tab underline */
|
|
nav a.active {
|
|
border-bottom: 2px solid var(--ng-teal) !important;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
NETGRIMOIRE TAB — subtle column dividers
|
|
───────────────────────────────────────────── */
|
|
|
|
body.tab-netgrimoire .services-group {
|
|
border-left: 2px solid rgba(0, 229, 204, 0.08);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
WASTED-BANDWIDTH TAB — amber/pirate tone
|
|
───────────────────────────────────────────── */
|
|
|
|
body.tab-wasted-bandwidth .service-card:hover {
|
|
border-color: rgba(255, 170, 0, 0.35) !important;
|
|
box-shadow: 0 0 14px var(--ng-amber-dim),
|
|
0 4px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
body.tab-wasted-bandwidth .service-card:hover .service-name,
|
|
body.tab-wasted-bandwidth .service-card:hover a {
|
|
color: var(--ng-amber) !important;
|
|
}
|
|
|
|
body.tab-wasted-bandwidth [class*="group-name"],
|
|
body.tab-wasted-bandwidth [class*="group-title"],
|
|
body.tab-wasted-bandwidth .services-group > div:first-child {
|
|
color: var(--ng-amber) !important;
|
|
border-color: rgba(255, 170, 0, 0.25) !important;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
NUCKING-FUTZ TAB — red/danger tone
|
|
───────────────────────────────────────────── */
|
|
|
|
body.tab-nucking-futz .service-card:hover {
|
|
border-color: rgba(255, 68, 85, 0.40) !important;
|
|
box-shadow: 0 0 14px rgba(255, 68, 85, 0.12),
|
|
0 4px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
body.tab-nucking-futz .service-card:hover .service-name,
|
|
body.tab-nucking-futz .service-card:hover a {
|
|
color: var(--ng-red) !important;
|
|
}
|
|
|
|
body.tab-nucking-futz [class*="group-name"],
|
|
body.tab-nucking-futz [class*="group-title"],
|
|
body.tab-nucking-futz .services-group > div:first-child {
|
|
color: var(--ng-red) !important;
|
|
border-color: rgba(255, 68, 85, 0.25) !important;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
PNCHARRIS TAB — narrow centered column
|
|
───────────────────────────────────────────── */
|
|
|
|
body.tab-pncharris main {
|
|
max-width: 900px;
|
|
margin: 0 auto !important;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
body.tab-pncharris section,
|
|
body.tab-pncharris .group {
|
|
max-width: 900px;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
body.tab-pncharris .service-card,
|
|
body.tab-pncharris .widget {
|
|
width: auto !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
GLANCE TAB — fullscreen iframe
|
|
───────────────────────────────────────────── */
|
|
|
|
body.tab-glance main {
|
|
max-width: none !important;
|
|
margin: 0 !important;
|
|
padding-left: 12px !important;
|
|
padding-right: 12px !important;
|
|
}
|
|
|
|
body.tab-glance .service-grid,
|
|
body.tab-glance .services {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Target both old and new Glance URL */
|
|
body.tab-glance iframe[name="glance"],
|
|
body.tab-glance iframe[src*="home.netgrimoire.com"],
|
|
body.tab-glance iframe[src*="glance.netgrimoire.com"] {
|
|
width: 100% !important;
|
|
height: calc(100vh - 170px) !important;
|
|
border: 0 !important;
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
IFRAME WIDGETS (ntfy, Beszel, etc.)
|
|
───────────────────────────────────────────── */
|
|
|
|
.widget iframe {
|
|
border-radius: 8px !important;
|
|
border: 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* ─────────────────────────────────────────────
|
|
UTILITY — fade-in on load
|
|
───────────────────────────────────────────── */
|
|
|
|
@keyframes ng-fadein {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.service-card {
|
|
animation: ng-fadein 0.35s ease both;
|
|
}
|
|
|
|
/* Stagger cards in each group */
|
|
.service-card:nth-child(1) { animation-delay: 0.00s; }
|
|
.service-card:nth-child(2) { animation-delay: 0.04s; }
|
|
.service-card:nth-child(3) { animation-delay: 0.08s; }
|
|
.service-card:nth-child(4) { animation-delay: 0.12s; }
|
|
.service-card:nth-child(5) { animation-delay: 0.16s; }
|
|
.service-card:nth-child(6) { animation-delay: 0.20s; } |