Add Themepo-ElegantFin customized theme

2026-04-27 02:29:22 -04:00 · 2026-04-27 02:29:22 -04:00 · d375dc9364
commit d375dc9364
parent 40810118bd
1 changed files with 132 additions and 0 deletions
--- a/themepo-elegantfin.css
+++ b/themepo-elegantfin.css
@ -0,0 +1,132 @@
+/* 
+  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);
+}