Private media cloud. Authorized access only.
/* ============================================================
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;
}
false