589 lines
14 KiB
XML
Executable File
589 lines
14 KiB
XML
Executable File
<?xml version="1.0" encoding="utf-8"?>
|
|
<BrandingOptions>
|
|
<LoginDisclaimer>Private media cloud. Authorized access only.</LoginDisclaimer>
|
|
<CustomCss>/* ============================================================
|
|
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;
|
|
}
|
|
</CustomCss>
|
|
<SplashscreenEnabled>false</SplashscreenEnabled>
|
|
</BrandingOptions>
|