docs: upload netgrimoire-theme.css
This commit is contained in:
Administrator
John Smith
parent
48ae8078fc
commit
f1e298d578
1 changed files with 379 additions and 0 deletions
379
netgrimoire-theme.css
Normal file
379
netgrimoire-theme.css
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
/* ============================================================
|
||||
NETGRIMOIRE THEME FOR WIKI.JS
|
||||
Dark arcane aesthetic — teal/cyan glowing network nodes
|
||||
Paste into: Administration → Theme → Custom CSS
|
||||
============================================================ */
|
||||
|
||||
/* ── Google Fonts ─────────────────────────────────────────── */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Share+Tech+Mono&family=Raleway:wght@300;400;500&display=swap');
|
||||
|
||||
/* ── CSS Variables ────────────────────────────────────────── */
|
||||
:root {
|
||||
--ng-teal: #00e5cc;
|
||||
--ng-teal-dim: #00b39e;
|
||||
--ng-teal-glow: rgba(0, 229, 204, 0.35);
|
||||
--ng-teal-faint: rgba(0, 229, 204, 0.08);
|
||||
--ng-bg-deep: #070b0f;
|
||||
--ng-bg-base: #0a0d12;
|
||||
--ng-bg-raised: #0d1117;
|
||||
--ng-bg-surface: #111922;
|
||||
--ng-border: rgba(0, 229, 204, 0.18);
|
||||
--ng-text: #b8d4d0;
|
||||
--ng-text-bright: #d9eeeb;
|
||||
--ng-text-muted: #5a7f7a;
|
||||
}
|
||||
|
||||
/* ── Page & Application Background ───────────────────────── */
|
||||
body,
|
||||
.application--wrap,
|
||||
.main-bg {
|
||||
background-color: var(--ng-bg-base) !important;
|
||||
color: var(--ng-text) !important;
|
||||
}
|
||||
|
||||
/* Constellation-style radial shimmer behind content */
|
||||
.contents {
|
||||
background-color: var(--ng-bg-base) !important;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 15% 20%, rgba(0, 180, 150, 0.05) 0%, transparent 55%),
|
||||
radial-gradient(ellipse at 85% 75%, rgba(0, 130, 110, 0.04) 0%, transparent 55%) !important;
|
||||
}
|
||||
|
||||
/* ── Header / Top Nav ─────────────────────────────────────── */
|
||||
.v-toolbar,
|
||||
.v-toolbar__content,
|
||||
nav.v-toolbar {
|
||||
background: linear-gradient(180deg, #060a0d 0%, #0a0d12 100%) !important;
|
||||
border-bottom: 1px solid var(--ng-border) !important;
|
||||
box-shadow: 0 2px 18px rgba(0, 229, 204, 0.08) !important;
|
||||
}
|
||||
|
||||
/* Site title */
|
||||
.v-toolbar__title,
|
||||
.v-toolbar .site-title {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
color: var(--ng-teal) !important;
|
||||
letter-spacing: 0.08em;
|
||||
text-shadow: 0 0 14px var(--ng-teal-glow);
|
||||
}
|
||||
|
||||
/* Header icons & buttons */
|
||||
.v-toolbar .v-btn,
|
||||
.v-toolbar .v-icon {
|
||||
color: var(--ng-teal-dim) !important;
|
||||
transition: color 0.2s, text-shadow 0.2s !important;
|
||||
}
|
||||
.v-toolbar .v-btn:hover,
|
||||
.v-toolbar .v-icon:hover {
|
||||
color: var(--ng-teal) !important;
|
||||
text-shadow: 0 0 8px var(--ng-teal-glow);
|
||||
}
|
||||
|
||||
/* ── Sidebar / Left Nav ───────────────────────────────────── */
|
||||
nav.navigation,
|
||||
.navigation-drawer,
|
||||
.v-navigation-drawer {
|
||||
background: var(--ng-bg-raised) !important;
|
||||
border-right: 1px solid var(--ng-border) !important;
|
||||
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Nav items */
|
||||
.v-list-item,
|
||||
.v-list__tile {
|
||||
color: var(--ng-text) !important;
|
||||
font-family: 'Raleway', sans-serif !important;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s, background 0.2s, padding-left 0.2s !important;
|
||||
}
|
||||
|
||||
.v-list-item:hover,
|
||||
.v-list__tile:hover {
|
||||
background: var(--ng-teal-faint) !important;
|
||||
color: var(--ng-teal) !important;
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
/* Active nav item */
|
||||
.v-list-item--active,
|
||||
.v-list__tile--active {
|
||||
color: var(--ng-teal) !important;
|
||||
border-left: 3px solid var(--ng-teal) !important;
|
||||
background: rgba(0, 229, 204, 0.06) !important;
|
||||
}
|
||||
|
||||
/* Nav section headers */
|
||||
.v-subheader {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
font-size: 0.65rem !important;
|
||||
letter-spacing: 0.18em !important;
|
||||
color: var(--ng-text-muted) !important;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Nav icons */
|
||||
.v-list-item .v-icon,
|
||||
.v-list__tile .v-icon {
|
||||
color: var(--ng-teal-dim) !important;
|
||||
}
|
||||
|
||||
/* ── Page Content Area ────────────────────────────────────── */
|
||||
.page-content-wrap,
|
||||
.editor-page-content,
|
||||
article.contents {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ── Typography ───────────────────────────────────────────── */
|
||||
.contents h1,
|
||||
.contents h2,
|
||||
.contents h3,
|
||||
.page-header h1 {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
color: var(--ng-teal) !important;
|
||||
text-shadow: 0 0 16px rgba(0, 229, 204, 0.25);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.contents h4,
|
||||
.contents h5,
|
||||
.contents h6 {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
color: var(--ng-teal-dim) !important;
|
||||
}
|
||||
|
||||
.contents h1 { border-bottom: 1px solid var(--ng-border); padding-bottom: 0.4em; }
|
||||
.contents h2 { border-bottom: 1px solid rgba(0, 229, 204, 0.08); padding-bottom: 0.2em; }
|
||||
|
||||
.contents p,
|
||||
.contents li,
|
||||
.contents td {
|
||||
font-family: 'Raleway', sans-serif !important;
|
||||
color: var(--ng-text) !important;
|
||||
line-height: 1.75 !important;
|
||||
}
|
||||
|
||||
/* ── Links ────────────────────────────────────────────────── */
|
||||
.contents a {
|
||||
color: var(--ng-teal-dim) !important;
|
||||
text-decoration: none !important;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 0.2s, border-color 0.2s, text-shadow 0.2s !important;
|
||||
}
|
||||
|
||||
.contents a:hover {
|
||||
color: var(--ng-teal) !important;
|
||||
border-bottom-color: var(--ng-teal-dim);
|
||||
text-shadow: 0 0 8px var(--ng-teal-glow);
|
||||
}
|
||||
|
||||
/* ── Code Blocks ──────────────────────────────────────────── */
|
||||
.contents pre,
|
||||
.contents pre code {
|
||||
background: #060b10 !important;
|
||||
border: 1px solid var(--ng-border) !important;
|
||||
border-radius: 6px !important;
|
||||
font-family: 'Share Tech Mono', monospace !important;
|
||||
color: #7df3d6 !important;
|
||||
box-shadow: inset 0 0 20px rgba(0, 229, 204, 0.04), 0 0 12px rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.contents code {
|
||||
font-family: 'Share Tech Mono', monospace !important;
|
||||
background: rgba(0, 229, 204, 0.07) !important;
|
||||
color: var(--ng-teal) !important;
|
||||
border-radius: 3px !important;
|
||||
padding: 0.1em 0.4em !important;
|
||||
border: 1px solid rgba(0, 229, 204, 0.12) !important;
|
||||
}
|
||||
|
||||
/* ── Blockquotes ──────────────────────────────────────────── */
|
||||
.contents blockquote {
|
||||
border-left: 3px solid var(--ng-teal) !important;
|
||||
background: var(--ng-teal-faint) !important;
|
||||
color: var(--ng-text-bright) !important;
|
||||
border-radius: 0 6px 6px 0 !important;
|
||||
box-shadow: inset 0 0 16px rgba(0, 229, 204, 0.03) !important;
|
||||
padding: 0.8em 1.2em !important;
|
||||
}
|
||||
|
||||
/* ── Tables ───────────────────────────────────────────────── */
|
||||
.contents table {
|
||||
border-collapse: collapse !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.contents thead tr {
|
||||
background: rgba(0, 229, 204, 0.1) !important;
|
||||
}
|
||||
|
||||
.contents thead th {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
color: var(--ng-teal) !important;
|
||||
border-bottom: 1px solid var(--ng-border) !important;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 0.85em !important;
|
||||
}
|
||||
|
||||
.contents tbody tr {
|
||||
border-bottom: 1px solid rgba(0, 229, 204, 0.06) !important;
|
||||
transition: background 0.15s !important;
|
||||
}
|
||||
|
||||
.contents tbody tr:hover {
|
||||
background: var(--ng-teal-faint) !important;
|
||||
}
|
||||
|
||||
.contents td, .contents th {
|
||||
padding: 0.6em 1em !important;
|
||||
color: var(--ng-text) !important;
|
||||
}
|
||||
|
||||
/* ── Horizontal Rules ─────────────────────────────────────── */
|
||||
.contents hr {
|
||||
border: none !important;
|
||||
border-top: 1px solid var(--ng-border) !important;
|
||||
box-shadow: 0 0 8px var(--ng-teal-glow) !important;
|
||||
margin: 2em 0 !important;
|
||||
}
|
||||
|
||||
/* ── Page Cards / Navigation Tiles ───────────────────────── */
|
||||
.page-card,
|
||||
.v-card {
|
||||
background: var(--ng-bg-surface) !important;
|
||||
border: 1px solid var(--ng-border) !important;
|
||||
border-radius: 8px !important;
|
||||
transition: box-shadow 0.3s, border-color 0.3s, transform 0.2s !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
.page-card:hover,
|
||||
.v-card:hover {
|
||||
border-color: var(--ng-teal-dim) !important;
|
||||
box-shadow: 0 0 20px rgba(0, 229, 204, 0.2), 0 4px 20px rgba(0, 0, 0, 0.5) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
}
|
||||
|
||||
.v-card__title {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
color: var(--ng-teal) !important;
|
||||
}
|
||||
|
||||
.v-card__text {
|
||||
color: var(--ng-text) !important;
|
||||
font-family: 'Raleway', sans-serif !important;
|
||||
}
|
||||
|
||||
/* ── Search Bar ───────────────────────────────────────────── */
|
||||
.v-input__slot {
|
||||
background: var(--ng-bg-raised) !important;
|
||||
border: 1px solid var(--ng-border) !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.v-input__slot:focus-within {
|
||||
border-color: var(--ng-teal) !important;
|
||||
box-shadow: 0 0 10px rgba(0, 229, 204, 0.2) !important;
|
||||
}
|
||||
|
||||
.v-input input,
|
||||
.v-input textarea {
|
||||
color: var(--ng-text-bright) !important;
|
||||
font-family: 'Raleway', sans-serif !important;
|
||||
caret-color: var(--ng-teal) !important;
|
||||
}
|
||||
|
||||
/* Search result items */
|
||||
.v-list,
|
||||
.v-autocomplete__content {
|
||||
background: var(--ng-bg-raised) !important;
|
||||
border: 1px solid var(--ng-border) !important;
|
||||
}
|
||||
|
||||
/* ── Breadcrumbs ──────────────────────────────────────────── */
|
||||
.v-breadcrumbs,
|
||||
.breadcrumbs {
|
||||
font-family: 'Raleway', sans-serif !important;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
.v-breadcrumbs li,
|
||||
.v-breadcrumbs__item {
|
||||
color: var(--ng-text-muted) !important;
|
||||
}
|
||||
|
||||
.v-breadcrumbs a,
|
||||
.v-breadcrumbs__item--link {
|
||||
color: var(--ng-teal-dim) !important;
|
||||
}
|
||||
|
||||
/* ── Tags / Chips ─────────────────────────────────────────── */
|
||||
.v-chip {
|
||||
background: rgba(0, 229, 204, 0.1) !important;
|
||||
border: 1px solid var(--ng-border) !important;
|
||||
color: var(--ng-teal) !important;
|
||||
font-family: 'Share Tech Mono', monospace !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────── */
|
||||
.v-btn--flat,
|
||||
.v-btn:not(.v-btn--icon):not(.v-btn--floating) {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
letter-spacing: 0.08em !important;
|
||||
}
|
||||
|
||||
.v-btn.primary,
|
||||
.v-btn--color.primary {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--ng-teal) !important;
|
||||
color: var(--ng-teal) !important;
|
||||
box-shadow: 0 0 12px rgba(0, 229, 204, 0.2) !important;
|
||||
transition: box-shadow 0.3s, background 0.3s !important;
|
||||
}
|
||||
|
||||
.v-btn.primary:hover {
|
||||
background: rgba(0, 229, 204, 0.1) !important;
|
||||
box-shadow: 0 0 20px rgba(0, 229, 204, 0.35) !important;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ────────────────────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--ng-bg-deep); }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 229, 204, 0.25);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 204, 0.45); }
|
||||
|
||||
/* ── Selection ────────────────────────────────────────────── */
|
||||
::selection {
|
||||
background: rgba(0, 229, 204, 0.2);
|
||||
color: var(--ng-text-bright);
|
||||
}
|
||||
|
||||
/* ── Animated Rune Pulse on Active Nav Item ───────────────── */
|
||||
@keyframes runePulse {
|
||||
0%, 100% { box-shadow: inset 3px 0 0 var(--ng-teal), 0 0 8px rgba(0, 229, 204, 0.15); }
|
||||
50% { box-shadow: inset 3px 0 0 var(--ng-teal), 0 0 18px rgba(0, 229, 204, 0.35); }
|
||||
}
|
||||
|
||||
.v-list-item--active,
|
||||
.v-list__tile--active {
|
||||
animation: runePulse 3s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
/* ── Subtle Constellation Dots (background decorative) ────── */
|
||||
@keyframes starFloat {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.7; transform: scale(1.4); }
|
||||
}
|
||||
|
||||
/* ── Footer ───────────────────────────────────────────────── */
|
||||
footer.v-footer {
|
||||
background: var(--ng-bg-raised) !important;
|
||||
border-top: 1px solid var(--ng-border) !important;
|
||||
color: var(--ng-text-muted) !important;
|
||||
font-family: 'Share Tech Mono', monospace !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue