Themepo/themepo-elegantfin.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;
  background-image: radial-gradient(ellipse at 50% 120%, rgba(56, 189, 248, 0.06) 0%, transparent 50%) !important;
}

/* Make background transparent ONLY on item pages to reveal the backdrop */
#itemDetailPage {
  background-color: transparent !important;
}

.backgroundContainer.withBackdrop {
  background-color: transparent !important;
  filter: saturate(0.75) brightness(0.9);
}

/* Radial vignette + bottom fade: bleeds backdrop into obsidian base */
.backgroundContainer.withBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(8, 9, 12, 0.65) 100%),
    linear-gradient(to bottom, transparent 40%, #08090C 100%);
  pointer-events: none;
  z-index: 1;
}

/* Allow the body background to be "pushed back" when a backdrop is present */
body:has(.backgroundContainer.withBackdrop),
body:has(#itemDetailPage) {
  background-color: #000 !important; /* Pure black behind backdrops */
}

/* 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 --- */

/* 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;
}

/* Hide the spinning circle on detail pages */
body:has(#itemDetailPage) html::after,
#itemDetailPage ~ html::after {
  display: none !important;
}

/* --- 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);
}

/* --- Custom Branding --- */

/* Replace Jellyfin header logo — hides SVG/img child and uses background */
.headerLogo {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  background-image: url('https://git.mithraic.cloud/ad3laid3/Themepo/raw/branch/master/assets/Logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.headerLogo * {
  display: none !important;
}

/* Replace "Jellyfin" server name text in header with "The Ark" */
.headerLeft .pageTitle {
  visibility: hidden !important;
  position: relative;
}
.headerLeft .pageTitle::after {
  content: "The Ark";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-rune);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mithral);
  white-space: nowrap;
}