348 lines
No EOL
10 KiB
CSS
348 lines
No EOL
10 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: #C4B5FD;
|
|
--mithral-dim: #A78BFA;
|
|
--mithral-dark: #334155;
|
|
--arcane-blue: #38BDF8;
|
|
--arcane-purple: #A78BFA;
|
|
--arcane-glow: rgba(167, 139, 250, 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-purple);
|
|
--uiAccentColor: var(--arcane-purple);
|
|
--borderColor: var(--mithral-dark);
|
|
--darkerBorderColor: var(--obsidian);
|
|
--headerColor: transparent;
|
|
--drawerColor: transparent;
|
|
|
|
/* Buttons & UI Elements */
|
|
--btnSubmitColor: var(--arcane-purple);
|
|
--btnSubmitBorderColor: var(--arcane-purple);
|
|
--checkboxCheckedBgColor: var(--arcane-purple);
|
|
--highlightOutlineColor: var(--arcane-purple);
|
|
|
|
/* Backgrounds */
|
|
--backgroundGradient: linear-gradient(180deg, var(--obsidian) 0%, #0c0e14 100%);
|
|
|
|
/* Radii */
|
|
--largeRadius: 4px;
|
|
--largerRadius: 8px;
|
|
--smallRadius: 2px;
|
|
--smallerRadius: 2px;
|
|
|
|
/* Play Button Positioning */
|
|
--overlayPlayButtonPosition: 50%;
|
|
|
|
/* Slim header */
|
|
--appBarHeight: 3.2em;
|
|
}
|
|
|
|
/* --- Base Enhancements --- */
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background-color: var(--obsidian) !important;
|
|
background-image: radial-gradient(ellipse at 50% 120%, rgba(167, 139, 250, 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(167, 139, 250, 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;
|
|
}
|
|
|
|
/* Frutiger Aero glassmorphism header */
|
|
.skinHeader-withBackground,
|
|
.skinHeader-blurred,
|
|
.skinHeader {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
|
|
linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
|
|
backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
|
|
-webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
|
|
border: none !important;
|
|
border-bottom: 1px solid rgba(167, 139, 250, 0.22) !important;
|
|
box-shadow:
|
|
0 1px 0 rgba(255, 255, 255, 0.08) inset,
|
|
0 12px 40px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
/* --- Media Bar Plugin --- */
|
|
|
|
/* Slide card: more transparent glass */
|
|
.slide {
|
|
background: rgba(8, 9, 12, 0.12) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
-webkit-backdrop-filter: blur(12px) !important;
|
|
border: 1px solid rgba(167, 139, 250, 0.1) !important;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
|
|
0 8px 32px rgba(0, 0, 0, 0.25) !important;
|
|
}
|
|
|
|
/* Soften the dark bottom overlay — let the backdrop bleed through */
|
|
.backdrop-overlay {
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(8, 9, 12, 0.82) 0%,
|
|
rgba(8, 9, 12, 0.3) 45%,
|
|
transparent 100%
|
|
) !important;
|
|
}
|
|
|
|
/* Fade the backdrop edges into the page */
|
|
.backdrop,
|
|
.backdrop-container {
|
|
mask-image: linear-gradient(
|
|
180deg,
|
|
transparent 0%,
|
|
rgba(0,0,0,0.6) 10%,
|
|
rgba(0,0,0,1) 40%,
|
|
rgba(0,0,0,0.8) 80%,
|
|
transparent 100%
|
|
) !important;
|
|
-webkit-mask-image: linear-gradient(
|
|
180deg,
|
|
transparent 0%,
|
|
rgba(0,0,0,0.6) 10%,
|
|
rgba(0,0,0,1) 40%,
|
|
rgba(0,0,0,0.8) 80%,
|
|
transparent 100%
|
|
) !important;
|
|
}
|
|
|
|
/* --- Glass Cards --- */
|
|
|
|
/* Give rows padding so scaled cards have room to grow */
|
|
.itemsContainer {
|
|
padding-block: 10px !important;
|
|
}
|
|
|
|
/* Cards stack above siblings when hovered */
|
|
.card,
|
|
.cardBox {
|
|
overflow: visible !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.card-hoverable:hover {
|
|
z-index: 20 !important;
|
|
}
|
|
|
|
/* All show/movie/episode cards */
|
|
.cardScalable {
|
|
background:
|
|
linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
|
|
rgba(8, 9, 12, 0.2) !important;
|
|
border: 1px solid rgba(167, 139, 250, 0.18) !important;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
|
|
0 2px 4px rgba(0, 0, 0, 0.4),
|
|
0 8px 16px rgba(0, 0, 0, 0.45),
|
|
0 24px 48px rgba(0, 0, 0, 0.4) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
-webkit-backdrop-filter: blur(8px) !important;
|
|
transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important;
|
|
}
|
|
|
|
/* Subtle sheen on the image itself */
|
|
.cardImageContainer::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
160deg,
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
transparent 50%,
|
|
rgba(0, 0, 0, 0.2) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Hover: inset glow on all 4 sides (unclippable) + filter bloom on top/bottom */
|
|
.card-hoverable:hover .cardScalable {
|
|
box-shadow:
|
|
inset 0 0 0 2px rgba(167, 139, 250, 0.7),
|
|
inset 0 0 12px rgba(167, 139, 250, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.06) !important;
|
|
filter:
|
|
brightness(1.1)
|
|
drop-shadow(0 0 10px rgba(167, 139, 250, 0.4))
|
|
drop-shadow(0 20px 36px rgba(0, 0, 0, 0.65)) !important;
|
|
}
|
|
|
|
/* Library cards (visualCardBox) */
|
|
.visualCardBox,
|
|
.paperList {
|
|
background:
|
|
linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
|
|
linear-gradient(180deg, rgba(167, 139, 250, 0.07) 0%, rgba(8, 9, 12, 0.35) 100%) !important;
|
|
backdrop-filter: blur(20px) saturate(1.8) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
|
|
border: 1px solid rgba(167, 139, 250, 0.18) !important;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
|
|
0 2px 4px rgba(0, 0, 0, 0.4),
|
|
0 8px 16px rgba(0, 0, 0, 0.45),
|
|
0 24px 48px rgba(0, 0, 0, 0.4) !important;
|
|
transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important;
|
|
}
|
|
|
|
.card-hoverable:hover .visualCardBox {
|
|
box-shadow:
|
|
inset 0 0 0 2px rgba(167, 139, 250, 0.7),
|
|
inset 0 0 12px rgba(167, 139, 250, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.06) !important;
|
|
filter:
|
|
brightness(1.1)
|
|
drop-shadow(0 0 10px rgba(167, 139, 250, 0.4))
|
|
drop-shadow(0 20px 36px rgba(0, 0, 0, 0.65)) !important;
|
|
}
|
|
|
|
/* Frutiger Aero glassmorphism drawer */
|
|
.mainDrawer {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 30%),
|
|
linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
|
|
backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
|
|
-webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
|
|
border-right: 1px solid rgba(167, 139, 250, 0.22) !important;
|
|
box-shadow:
|
|
-1px 0 0 rgba(255, 255, 255, 0.08) inset,
|
|
12px 0 40px rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
/* --- Custom Branding --- */
|
|
|
|
/* Remove Jellyfin's default logo background and padding from the h3 */
|
|
.pageTitleWithDefaultLogo,
|
|
.pageTitleWithLogo {
|
|
background-image: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
/* Hide the h3 itself (hides Jellyfin text + background logo) */
|
|
.headerLeft .pageTitle {
|
|
visibility: hidden !important;
|
|
position: relative !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
gap: 8px !important;
|
|
}
|
|
|
|
/* "The Ark" text via ::after */
|
|
.headerLeft .pageTitle::after {
|
|
content: "The Ark" !important;
|
|
visibility: visible !important;
|
|
position: static !important;
|
|
font-family: var(--font-rune) !important;
|
|
font-size: 0.9rem !important;
|
|
letter-spacing: 0.15em !important;
|
|
text-transform: uppercase !important;
|
|
color: var(--mithral) !important;
|
|
white-space: nowrap !important;
|
|
} |