feat: initial import of Jellyfin Aurora Noir theme and assets
This commit is contained in:
eldov
@@ -0,0 +1,582 @@
|
||||
/* ============================================================
|
||||
AURORA NOIR - cinematic theme for Stream Xtream
|
||||
Accent: aurora cyan -> indigo | Base: deep space #050810
|
||||
Perf: single external bg asset, blur only on chrome surfaces
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--an-bg: #050810;
|
||||
--an-surface: rgba(13, 18, 30, 0.62);
|
||||
--an-surface-solid: #0b101c;
|
||||
--an-border: rgba(148, 163, 184, 0.14);
|
||||
--an-border-hover: rgba(34, 211, 238, 0.55);
|
||||
--an-accent: #22d3ee;
|
||||
--an-accent-2: #818cf8;
|
||||
--an-text: #f1f5f9;
|
||||
--an-text-dim: #94a3b8;
|
||||
--an-radius: 14px;
|
||||
--an-glow: 0 0 24px rgba(34, 211, 238, 0.30);
|
||||
--an-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
scrollbar-color: rgba(34, 211, 238, 0.45) #070b14;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--an-bg);
|
||||
color: var(--an-text);
|
||||
}
|
||||
|
||||
/* ---------------- Ambient background ---------------- */
|
||||
|
||||
.backgroundContainer {
|
||||
background: #050810 url(/web/custom-assets/custom_bg.webp) center / cover no-repeat fixed !important;
|
||||
}
|
||||
|
||||
/* Cinematic grade over fanart backdrops so text stays readable */
|
||||
.backdropImage {
|
||||
filter: saturate(1.05) brightness(0.45) !important;
|
||||
}
|
||||
|
||||
.backgroundContainer::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(5, 8, 16, 0.66) 0%,
|
||||
rgba(5, 8, 16, 0.18) 34%,
|
||||
rgba(5, 8, 16, 0.30) 62%,
|
||||
rgba(5, 8, 16, 0.78) 100%);
|
||||
}
|
||||
|
||||
/* ---------------- Header ---------------- */
|
||||
|
||||
.skinHeader {
|
||||
background: linear-gradient(180deg, rgba(5, 8, 16, 0.92), rgba(5, 8, 16, 0.55)) !important;
|
||||
backdrop-filter: blur(18px) saturate(1.25);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.25);
|
||||
border-bottom: 1px solid var(--an-border) !important;
|
||||
}
|
||||
|
||||
.headerTop {
|
||||
padding: 0.6em 0.9em;
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: var(--an-text-dim);
|
||||
}
|
||||
|
||||
.emby-tab-button-active {
|
||||
color: var(--an-accent) !important;
|
||||
text-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: var(--an-accent);
|
||||
background-color: rgba(34, 211, 238, 0.10);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus-visible {
|
||||
outline: 2px solid var(--an-accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.headerButton {
|
||||
color: var(--an-text);
|
||||
}
|
||||
|
||||
/* ---------------- Drawer / side menu ---------------- */
|
||||
|
||||
.mainDrawer {
|
||||
background: rgba(7, 11, 20, 0.96) !important;
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-right: 1px solid var(--an-border);
|
||||
}
|
||||
|
||||
.navDrawerMask {
|
||||
background: rgba(2, 4, 8, 0.55);
|
||||
}
|
||||
|
||||
.navMenuOption {
|
||||
border-radius: 10px;
|
||||
margin: 0.25em 0.6em;
|
||||
}
|
||||
|
||||
.navMenuOptionIcon {
|
||||
color: var(--an-accent) !important;
|
||||
text-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
|
||||
}
|
||||
|
||||
.navMenuOption:hover,
|
||||
.navMenuOption.showFocus {
|
||||
background: rgba(34, 211, 238, 0.12) !important;
|
||||
}
|
||||
|
||||
.navMenuOptionText {
|
||||
color: var(--an-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---------------- Cards ---------------- */
|
||||
|
||||
.cardBox {
|
||||
border-radius: var(--an-radius);
|
||||
border: 1px solid var(--an-border);
|
||||
background: var(--an-surface);
|
||||
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
|
||||
transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
|
||||
box-shadow 0.28s ease, border-color 0.28s ease;
|
||||
}
|
||||
|
||||
.card:hover .cardBox,
|
||||
.card.showFocus .cardBox {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--an-border-hover);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.60), var(--an-glow);
|
||||
}
|
||||
|
||||
.cardImageContainer {
|
||||
border-radius: calc(var(--an-radius) - 2px) calc(var(--an-radius) - 2px) 0 0;
|
||||
background: #0b101c;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
color: var(--an-text-dim);
|
||||
}
|
||||
|
||||
.cardText:first-child {
|
||||
color: var(--an-text);
|
||||
}
|
||||
|
||||
.defaultCardBackground {
|
||||
background: linear-gradient(135deg, #101b2e, #0a1120) !important;
|
||||
}
|
||||
|
||||
/* Watched / unwatched indicators */
|
||||
|
||||
.playedIndicator {
|
||||
background: rgba(52, 211, 153, 0.92) !important;
|
||||
color: #052015 !important;
|
||||
border-radius: 8px 0 0 0;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 12px rgba(52, 211, 153, 0.5);
|
||||
}
|
||||
|
||||
.countIndicator {
|
||||
background: linear-gradient(135deg, var(--an-accent), var(--an-accent-2)) !important;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--an-glow);
|
||||
}
|
||||
|
||||
/* Progress bars under cards */
|
||||
|
||||
.itemProgressBar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border-radius: 0 0 var(--an-radius) var(--an-radius);
|
||||
}
|
||||
|
||||
.itemProgressBarForeground {
|
||||
background: linear-gradient(90deg, var(--an-accent), var(--an-accent-2)) !important;
|
||||
border-radius: 0 0 var(--an-radius) var(--an-radius);
|
||||
}
|
||||
|
||||
/* ---------------- Buttons ---------------- */
|
||||
|
||||
.button-submit,
|
||||
.btnPlay,
|
||||
.fab.primary {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #818cf8 100%) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
border-radius: 10px !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 6px 18px rgba(34, 211, 238, 0.25);
|
||||
transition: filter 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.button-submit:hover,
|
||||
.button-submit:focus,
|
||||
.btnPlay:hover,
|
||||
.fab.primary:hover {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 8px 26px rgba(34, 211, 238, 0.45);
|
||||
}
|
||||
|
||||
.emby-button:not(.raised):focus-visible,
|
||||
.emby-button:not(.raised):hover {
|
||||
color: var(--an-accent);
|
||||
}
|
||||
|
||||
/* ---------------- Detail page ---------------- */
|
||||
|
||||
.itemDetailImage,
|
||||
.detailImageContainer img {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--an-border);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--an-text) !important;
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.nameContainer,
|
||||
.itemName,
|
||||
.itemMiscInfo {
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.secondaryText,
|
||||
.itemMiscInfo,
|
||||
.mediaInfoText {
|
||||
color: var(--an-text-dim) !important;
|
||||
}
|
||||
|
||||
.mediaInfoText {
|
||||
background: rgba(13, 18, 30, 0.72);
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.25em 0.7em;
|
||||
}
|
||||
|
||||
/* ---------------- Dialogs, sheets, menus ---------------- */
|
||||
|
||||
.dialog {
|
||||
background: rgba(9, 13, 23, 0.97) !important;
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--an-shadow);
|
||||
}
|
||||
|
||||
.actionSheet {
|
||||
background: rgba(9, 13, 23, 0.97) !important;
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: 16px !important;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--an-shadow);
|
||||
}
|
||||
|
||||
.formDialogHeader {
|
||||
border-bottom: 1px solid var(--an-border);
|
||||
}
|
||||
|
||||
.formDialogFooter {
|
||||
border-top: 1px solid var(--an-border);
|
||||
}
|
||||
|
||||
.actionSheetMenuItem,
|
||||
.listItem {
|
||||
border-radius: 10px;
|
||||
color: var(--an-text) !important;
|
||||
}
|
||||
|
||||
.actionSheetMenuItem:hover,
|
||||
.actionSheetMenuItem.showFocus,
|
||||
.listItem:hover {
|
||||
background: rgba(34, 211, 238, 0.10) !important;
|
||||
}
|
||||
|
||||
.listItem:hover .listItemBody,
|
||||
.listItem .secondary {
|
||||
color: var(--an-text-dim);
|
||||
}
|
||||
|
||||
.paperList {
|
||||
background: rgba(9, 13, 23, 0.72);
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ---------------- Inputs ---------------- */
|
||||
|
||||
.emby-input,
|
||||
.emby-select,
|
||||
.emby-textarea {
|
||||
background: rgba(10, 15, 26, 0.85) !important;
|
||||
border: 1px solid var(--an-border) !important;
|
||||
border-radius: 10px !important;
|
||||
color: var(--an-text) !important;
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-select:focus,
|
||||
.emby-textarea:focus {
|
||||
border-color: var(--an-accent) !important;
|
||||
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
|
||||
}
|
||||
|
||||
.emby-select option {
|
||||
background: #0b101c;
|
||||
color: var(--an-text);
|
||||
}
|
||||
|
||||
.checkboxOutline {
|
||||
border-radius: 6px;
|
||||
border-color: var(--an-border);
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + .checkboxOutline {
|
||||
background: linear-gradient(135deg, var(--an-accent), var(--an-accent-2)) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Player sliders */
|
||||
|
||||
.mdl-slider-background-lower {
|
||||
background: linear-gradient(90deg, var(--an-accent), var(--an-accent-2)) !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ---------------- Player OSD ---------------- */
|
||||
|
||||
.videoOsdBottom {
|
||||
background: linear-gradient(0deg, rgba(3, 6, 12, 0.94), rgba(3, 6, 12, 0.0));
|
||||
}
|
||||
|
||||
.osdHeader {
|
||||
background: linear-gradient(180deg, rgba(3, 6, 12, 0.85), rgba(3, 6, 12, 0.0));
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
/* ---------------- Login page ---------------- */
|
||||
|
||||
#loginPage .visualLoginForm {
|
||||
background: rgba(7, 11, 20, 0.78);
|
||||
backdrop-filter: blur(22px) saturate(1.25);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(1.25);
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--an-shadow);
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 2.6em 2.8em !important;
|
||||
}
|
||||
|
||||
#loginPage .visualLoginForm h1 {
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#loginPage .disclaimerContainer {
|
||||
text-align: center;
|
||||
color: var(--an-text-dim);
|
||||
}
|
||||
|
||||
/* ---------------- Toasts & misc ---------------- */
|
||||
|
||||
.toast {
|
||||
background: rgba(9, 13, 23, 0.95) !important;
|
||||
border: 1px solid var(--an-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--an-shadow);
|
||||
color: var(--an-text) !important;
|
||||
}
|
||||
|
||||
.itemSelectionPanel {
|
||||
background: rgba(34, 211, 238, 0.85) !important;
|
||||
}
|
||||
|
||||
.sectionTitle,
|
||||
.sectionTitleText {
|
||||
color: var(--an-text) !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #070b14;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(34, 211, 238, 0.35);
|
||||
border-radius: 8px;
|
||||
border: 2px solid #070b14;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(34, 211, 238, 0.6);
|
||||
}
|
||||
|
||||
/* ---------------- Motion safety ---------------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.cardBox,
|
||||
.button-submit,
|
||||
.btnPlay,
|
||||
.fab.primary {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.card:hover .cardBox,
|
||||
.card.showFocus .cardBox {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- Admin-SPA (MUI) Overrides ---------------- */
|
||||
|
||||
.MuiPaper-root,
|
||||
.MuiCard-root,
|
||||
.MuiAccordion-root,
|
||||
.MuiDrawer-paper {
|
||||
background-color: var(--an-surface-solid) !important;
|
||||
background-image: linear-gradient(160deg, rgba(13, 18, 30, 0.92), rgba(8, 12, 22, 0.97)) !important;
|
||||
border: 1px solid var(--an-border) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
|
||||
color: var(--an-text) !important;
|
||||
}
|
||||
|
||||
.MuiCard-root:hover {
|
||||
border-color: var(--an-border-hover);
|
||||
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6), var(--an-glow) !important;
|
||||
}
|
||||
|
||||
.MuiAppBar-root,
|
||||
.MuiToolbar-root {
|
||||
background: linear-gradient(180deg, rgba(5, 8, 16, 0.95), rgba(5, 8, 16, 0.72)) !important;
|
||||
backdrop-filter: blur(18px) saturate(1.25);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.25);
|
||||
border-bottom: 1px solid var(--an-border) !important;
|
||||
color: var(--an-text) !important;
|
||||
}
|
||||
|
||||
.MuiTypography-root,
|
||||
.MuiListItemText-primary,
|
||||
.MuiListItemText-secondary,
|
||||
.MuiTableCell-root {
|
||||
color: var(--an-text) !important;
|
||||
}
|
||||
|
||||
.MuiListItemText-secondary,
|
||||
.MuiTypography-colorTextSecondary {
|
||||
color: var(--an-text-dim) !important;
|
||||
}
|
||||
|
||||
.MuiButton-containedPrimary,
|
||||
.MuiButton-contained {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #818cf8 100%) !important;
|
||||
color: #ffffff !important;
|
||||
border-radius: 10px !important;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6px 18px rgba(34, 211, 238, 0.25);
|
||||
}
|
||||
|
||||
.MuiButton-contained:hover {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 8px 26px rgba(34, 211, 238, 0.45);
|
||||
}
|
||||
|
||||
.MuiButton-outlined,
|
||||
.MuiButton-text {
|
||||
color: var(--an-accent) !important;
|
||||
border-color: var(--an-border-hover) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.MuiListItem-root:hover,
|
||||
.MuiListItem-button:hover {
|
||||
background: rgba(34, 211, 238, 0.10) !important;
|
||||
}
|
||||
|
||||
.MuiListItemButton-root:hover {
|
||||
background: rgba(34, 211, 238, 0.10) !important;
|
||||
}
|
||||
|
||||
.Mui-selected,
|
||||
.Mui-selected:hover {
|
||||
background: rgba(34, 211, 238, 0.16) !important;
|
||||
}
|
||||
|
||||
.MuiInputBase-root,
|
||||
.MuiOutlinedInput-root,
|
||||
.MuiFilledInput-root {
|
||||
background: rgba(10, 15, 26, 0.85) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.MuiOutlinedInput-notchedOutline {
|
||||
border-color: var(--an-border) !important;
|
||||
}
|
||||
|
||||
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
|
||||
border-color: var(--an-accent) !important;
|
||||
}
|
||||
|
||||
.MuiSwitch-switchBase.Mui-checked {
|
||||
color: var(--an-accent) !important;
|
||||
}
|
||||
|
||||
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
|
||||
background: linear-gradient(90deg, var(--an-accent), var(--an-accent-2)) !important;
|
||||
}
|
||||
|
||||
.MuiChip-root {
|
||||
background: rgba(13, 18, 30, 0.85) !important;
|
||||
border: 1px solid var(--an-border) !important;
|
||||
color: var(--an-text) !important;
|
||||
border-radius: 999px !important;
|
||||
}
|
||||
|
||||
.MuiChip-root.MuiChip-colorPrimary {
|
||||
background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(129, 140, 248, 0.2)) !important;
|
||||
color: var(--an-accent) !important;
|
||||
}
|
||||
|
||||
.MuiTableCell-root {
|
||||
border-bottom: 1px solid var(--an-border) !important;
|
||||
}
|
||||
|
||||
.MuiTableHead-root .MuiTableCell-root {
|
||||
color: var(--an-accent) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.MuiDivider-root {
|
||||
border-color: var(--an-border) !important;
|
||||
}
|
||||
|
||||
.MuiDialog-paper,
|
||||
.MuiMenu-paper,
|
||||
.MuiPopover-paper {
|
||||
background: rgba(9, 13, 23, 0.97) !important;
|
||||
border: 1px solid var(--an-border) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--an-shadow) !important;
|
||||
}
|
||||
|
||||
.MuiLinearProgress-bar {
|
||||
background: linear-gradient(90deg, var(--an-accent), var(--an-accent-2)) !important;
|
||||
}
|
||||
|
||||
.MuiCircularProgress-root {
|
||||
color: var(--an-accent) !important;
|
||||
}
|
||||
|
||||
.MuiAlert-root {
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid var(--an-border) !important;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Reference in New Issue
Block a user