132 lines
3.8 KiB
CSS
132 lines
3.8 KiB
CSS
/*
|
|
Themepo Customization for ElegantFin
|
|
Combines ElegantFin's modern layout with Themepo's Arcane/Fantasy aesthetic.
|
|
*/
|
|
|
|
/* 1. Import ElegantFin Nightly */
|
|
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-theme-nightly.css");
|
|
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
|
|
|
|
/* 2. Import Custom Fonts */
|
|
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500&family=JetBrains+Mono&display=swap");
|
|
|
|
:root {
|
|
/* --- Themepo Core Variables --- */
|
|
--obsidian: #08090C;
|
|
--mithral: #E2E8F0;
|
|
--mithral-dim: #94A3B8;
|
|
--mithral-dark: #334155;
|
|
--arcane-blue: #38BDF8;
|
|
--arcane-glow: rgba(56, 189, 248, 0.4);
|
|
--mithral-glow: rgba(226, 232, 240, 0.2);
|
|
|
|
/* Status Colors */
|
|
--success: #10B981;
|
|
--danger: #EF4444;
|
|
--warning: #F59E0B;
|
|
|
|
/* Surfaces */
|
|
--surface-card: rgba(226, 232, 240, 0.02);
|
|
--surface-card-hover: rgba(56, 189, 248, 0.05);
|
|
--border-arcane: rgba(56, 189, 248, 0.1);
|
|
|
|
/* Typography */
|
|
--font-rune: 'Cinzel Decorative', serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
/* --- ElegantFin Override Mapping --- */
|
|
--darkerGradientPoint: var(--obsidian);
|
|
--lighterGradientPoint: #111827;
|
|
--textColor: var(--mithral);
|
|
--dimTextColor: var(--mithral-dim);
|
|
--activeColor: var(--arcane-blue);
|
|
--uiAccentColor: var(--arcane-blue);
|
|
--borderColor: var(--mithral-dark);
|
|
--darkerBorderColor: var(--obsidian);
|
|
--headerColor: rgba(8, 9, 12, 0.8);
|
|
--drawerColor: rgba(8, 9, 12, 0.9);
|
|
|
|
/* Buttons & UI Elements */
|
|
--btnSubmitColor: var(--arcane-blue);
|
|
--btnSubmitBorderColor: var(--arcane-blue);
|
|
--checkboxCheckedBgColor: var(--arcane-blue);
|
|
--highlightOutlineColor: var(--arcane-blue);
|
|
|
|
/* Backgrounds */
|
|
--backgroundGradient: linear-gradient(180deg, var(--obsidian) 0%, #0c0e14 100%);
|
|
|
|
/* Radii */
|
|
--largeRadius: 4px;
|
|
--largerRadius: 8px;
|
|
--smallRadius: 2px;
|
|
--smallerRadius: 2px;
|
|
|
|
/* Play Button Positioning */
|
|
--overlayPlayButtonPosition: 50%;
|
|
}
|
|
|
|
/* --- Base Enhancements --- */
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background-color: var(--obsidian) !important;
|
|
}
|
|
|
|
/* Titles and Headers use the Rune Font */
|
|
h1, h2, h3, .title-rune, .itemTitle, .cardText {
|
|
font-family: var(--font-rune) !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* --- Custom Background Effects --- */
|
|
|
|
/* Film grain overlay */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 100; /* Lowered z-index to avoid covering content */
|
|
}
|
|
|
|
/* Arcane Background Circle */
|
|
html::after {
|
|
content: "";
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 120vw;
|
|
height: 120vw;
|
|
max-width: 1400px;
|
|
max-height: 1400px;
|
|
border: 1px solid rgba(56, 189, 248, 0.03);
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
animation: themepo-spin 120s linear infinite;
|
|
}
|
|
|
|
/* --- Animations --- */
|
|
@keyframes themepo-spin {
|
|
from { transform: translate(-50%, -50%) rotate(0deg); }
|
|
to { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
/* Scrollbar Enhancement */
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--mithral-dark) !important;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--arcane-blue) !important;
|
|
}
|
|
|
|
/* Glassmorphism for some elements */
|
|
.headerTop, .drawer-open, .mainDrawer {
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|