2675 lines
55 KiB
CSS
2675 lines
55 KiB
CSS
/* 1. IMPORTS & FONTS
|
|
- Override this to customise font of abyss for your setup. */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'Material Icons Round';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(https://cdn.jsdelivr.net/npm/material-icons@1.13.12/iconfont/material-icons-round.woff2) format('woff2');
|
|
}
|
|
|
|
/* Force rendering on icon elements across the theme */
|
|
.material-icons-round,
|
|
.material-symbols-rounded,
|
|
[class*="material-icons"] {
|
|
font-family: 'Material Icons Round' !important;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
|
|
-webkit-font-feature-settings: 'liga';
|
|
font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* 2. THEME VARIABLES
|
|
— Override these to customise abyss for your setup. */
|
|
|
|
:root {
|
|
/* Primary accent colour — used for highlights, active states, progress bars.
|
|
Format: R, G, B (no rgb() wrapper) so opacity variants work cleanly. */
|
|
--abyss-accent: 245, 245, 247;
|
|
|
|
/* Corner rounding applied globally */
|
|
--abyss-radius: 12px;
|
|
|
|
/* Fixed defaults */
|
|
|
|
/* Indicator pill background (episode count, etc.) */
|
|
--abyss-indicator: 55, 55, 55;
|
|
|
|
/* Backgorund for drawers and dialogs */
|
|
--abyss-glass-tint: 42, 42, 42;
|
|
|
|
/* Custom cubic-bezier */
|
|
--abyss-ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--abyss-ease-snappy: cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
|
|
/* 3. BASE / GLOBAL */
|
|
|
|
#reactRoot {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
body {
|
|
font-family: "Google Sans", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-style: normal;
|
|
font-variation-settings: "GRAD" 0;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
.material-icons {
|
|
font-family: 'Material Icons Round' !important;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
font-feature-settings: 'liga';
|
|
-webkit-font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
* {
|
|
scrollbar-color: rgba(var(--abyss-accent), 0.8) #0000 !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: #0000;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: #0000;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--abyss-accent), 0.8) !important;
|
|
border-radius: var(--abyss-radius);
|
|
}
|
|
|
|
fieldset {
|
|
border: 1px solid rgba(40, 40, 40, 0.8);
|
|
border-radius: 0.4em;
|
|
}
|
|
|
|
progress {
|
|
border-radius: var(--abyss-radius);
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
border: 1px solid rgba(var(--abyss-accent), 0.22);
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
border-radius: var(--abyss-radius);
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
border: 0px solid rgba(var(--abyss-accent), 0.22);
|
|
}
|
|
|
|
progress::-moz-progress-bar {
|
|
border-radius: var(--abyss-radius);
|
|
background-color: rgba(var(--abyss-accent), 0.75);
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
border-radius: var(--abyss-radius);
|
|
background-color: rgba(var(--abyss-accent), 0.75);
|
|
}
|
|
|
|
.taskProgressOuter,
|
|
.taskProgressInner {
|
|
border-radius: var(--abyss-radius) !important;
|
|
}
|
|
|
|
.taskProgressOuter {
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
border: 1px solid rgba(var(--abyss-accent), 0.22);
|
|
}
|
|
|
|
.taskProgressInner,
|
|
#videoOsdPage .sliderMarker.watched {
|
|
background: rgba(var(--abyss-accent), 1) !important;
|
|
}
|
|
|
|
#videoOsdPage .sliderMarker.unwatched {
|
|
background: hsl(0deg 0% 30%) !important;
|
|
}
|
|
|
|
.mdl-slider-background-flex {
|
|
background: hsl(0deg 0% 30%) !important;
|
|
}
|
|
|
|
#divRunningTasks span {
|
|
color: rgba(var(--abyss-accent), 0.75) !important;
|
|
}
|
|
|
|
#scheduledTasksPage span {
|
|
color: rgba(var(--abyss-accent), 0.75) !important;
|
|
}
|
|
|
|
/* Override browser default blue focus/selection colour */
|
|
::selection {
|
|
background: rgba(var(--abyss-accent), 0.25);
|
|
color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: rgba(var(--abyss-accent), 0.25);
|
|
color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
:focus-visible {
|
|
outline-color: rgba(var(--abyss-accent), 0.6) !important;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus,
|
|
.emby-input:focus,
|
|
.emby-textarea:focus,
|
|
.emby-select:focus,
|
|
.emby-select-withcolor:focus,
|
|
.checkboxOutline:focus {
|
|
border-color: rgba(var(--abyss-accent), 0.4) !important;
|
|
}
|
|
|
|
input[type="checkbox"]:checked,
|
|
input[type="radio"]:checked {
|
|
accent-color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
/* Override Chromium/Electron blue accent globally */
|
|
* {
|
|
accent-color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
/* 4. TYPOGRAPHY */
|
|
|
|
.headerTabs.sectionTabs {
|
|
text-size-adjust: 110%;
|
|
font-size: 95%;
|
|
padding-top: 0px;
|
|
margin-top: -2em;
|
|
width: fit-content;
|
|
max-width: 90vw;
|
|
align-self: center !important;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.pageTitle {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
font-size: x-large;
|
|
opacity: 0.8;
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.pageTitle:not(:empty) {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.pageTitle.pageTitleWithLogo.pageTitleWithDefaultLogo {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
#tvRecommendedPage .pageTitle,
|
|
#moviesPage .pageTitle,
|
|
#musicRecommendedPage .pageTitle,
|
|
#itemDetailPage .pageTitle {
|
|
display: none !important;
|
|
}
|
|
|
|
#videoOsdPage .pageTitle {
|
|
display: flex !important;
|
|
}
|
|
|
|
.sectionTitle {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.homeScreenSettingsContainer .sectionTitle,
|
|
#quickConnectPreferencesPage .sectionTitle,
|
|
.settingsContainer .sectionTitle {
|
|
font-size: xx-large;
|
|
}
|
|
|
|
#favoritesTab .sectionTitle,
|
|
.homeSectionsContainer .sectionTitle {
|
|
margin-left: .4em !important;
|
|
margin-top: .2em !important;
|
|
margin-bottom: .2em !important;
|
|
}
|
|
|
|
.sectionTitleTextButton>.material-icons {
|
|
margin: 0;
|
|
}
|
|
|
|
.sectionTitleTextButton:not(.padded-left) {
|
|
padding: 4px 12px 6px 6px !important;
|
|
margin-left: -6px !important;
|
|
border-radius: var(--abyss-radius);
|
|
}
|
|
|
|
.sectionTitleTextButton>.sectionTitle {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.inputLabel,
|
|
.selectLabel,
|
|
.checkboxLabel {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cardText {
|
|
padding: .06em .5em 0 .06em;
|
|
font-weight: 200;
|
|
font-size: medium;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.cardText-first {
|
|
margin-top: 4px !important;
|
|
font-weight: 600;
|
|
font-size: larger !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.cardTextCentered,
|
|
.cardTextCentered>.textActionButton {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.itemName {
|
|
margin: .5em 0 !important;
|
|
}
|
|
|
|
.starIcon {
|
|
color: rgba(var(--abyss-accent), .8);
|
|
}
|
|
|
|
.dialog {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.formDialogHeaderTitle {
|
|
font-weight: bold !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
#dialogToc {
|
|
overflow: clip;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#dialogToc .toc {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#dialogToc .toc li {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
|
|
/* 5. LAYOUT & STRUCTURE */
|
|
|
|
/* Header */
|
|
.headerTop {
|
|
padding: 2em 0 !important;
|
|
}
|
|
|
|
.skinHeader {
|
|
background-color: transparent;
|
|
display: flex !important;
|
|
justify-items: center !important;
|
|
align-self: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.skinHeader.semiTransparent {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.skinHeader-withBackground::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 8em;
|
|
pointer-events: none;
|
|
background: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.headerLeft,
|
|
.headerRight {
|
|
padding: 0 31px;
|
|
align-items: center;
|
|
}
|
|
|
|
.headerUserButtonRound {
|
|
border-radius: 50px !important;
|
|
}
|
|
|
|
/* Main content */
|
|
.withSectionTabs .backdropImage {
|
|
-webkit-filter: blur(23px) saturate(120%) contrast(120%) brightness(25%);
|
|
filter: blur(23px) saturate(120%) contrast(120%) brightness(25%);
|
|
}
|
|
|
|
body:has(#itemDetailPage) .backdropImage {
|
|
-webkit-filter: blur(23px) saturate(120%) contrast(120%) brightness(25%);
|
|
filter: blur(23px) saturate(120%) contrast(120%) brightness(25%);
|
|
}
|
|
|
|
.backdropContainer {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: visible;
|
|
}
|
|
|
|
.backgroundContainer.withBackdrop {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.libraryPage, .libraryPage:not(.noSecondaryNavPage) {
|
|
padding-top: 4.5em !important; /* Reduce spacing from header to library content */
|
|
}
|
|
|
|
/* Navigation / drawer */
|
|
.editPageSidebar,
|
|
.mainDrawer {
|
|
background-color: rgba(var(--abyss-glass-tint), 0.69);
|
|
margin: 24px 0;
|
|
border-radius: 32px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
border: solid 1px rgba(245, 245, 247, 0.2) !important;
|
|
}
|
|
|
|
.mainDrawer.drawer-open {
|
|
margin: 24px;
|
|
}
|
|
|
|
.sidebarHeader {
|
|
margin: 0.9em 0 0.2em;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[dir=ltr] .sidebarHeader {
|
|
padding-left: 0.8em;
|
|
}
|
|
|
|
.emby-tabs {
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.emby-tabs-slider {
|
|
border-radius: 50px;
|
|
padding: 5px 2.5px;
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
background-color: rgba(var(--abyss-glass-tint), 0.9);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(87, 87, 87, 0.18);
|
|
}
|
|
|
|
/* Engines without scrollbar-width support (Chromium <121, e.g. JMP) */
|
|
.emby-tabs-slider::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.navMenuOptionText {
|
|
margin-top: 0;
|
|
font-weight: 500;
|
|
font-size: large;
|
|
}
|
|
|
|
.navMenuOptionIcon,
|
|
.listItemIcon {
|
|
background: #cccccf69;
|
|
border-radius: 50px;
|
|
padding: 10px;
|
|
}
|
|
|
|
[dir=ltr] .navMenuOptionIcon {
|
|
margin-right: 0.75em;
|
|
}
|
|
|
|
[dir=ltr] .listItemIcon {
|
|
background: #cccccf69 !important;
|
|
border-radius: 50px !important;
|
|
padding: 10px !important;
|
|
}
|
|
|
|
[dir=ltr] .navMenuOption {
|
|
padding: 0.5em 0.9em !important;
|
|
margin-bottom: 2px !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.scrollContainer {
|
|
padding: 36px 12px 0 12px;
|
|
}
|
|
|
|
/* Footer */
|
|
.appfooter {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
margin: 24px;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
/* Backdrop / detail ribbon */
|
|
.itemBackdrop {
|
|
height: 31vh !important;
|
|
display: inherit;
|
|
}
|
|
|
|
.layout-desktop .detailRibbon {
|
|
background: rgba(0, 0, 0, .2) !important;
|
|
margin-top: 0;
|
|
padding-top: .5em;
|
|
padding-bottom: .5em;
|
|
}
|
|
|
|
.itemBackdrop::after {
|
|
background: rgba(0, 0, 0, .5) !important;
|
|
}
|
|
|
|
/* Detail logo */
|
|
.detailLogo {
|
|
display: none;
|
|
}
|
|
|
|
#itemDetailPage .detailLogo {
|
|
position: static;
|
|
margin-left: 32.5%;
|
|
display: block;
|
|
filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
|
|
-webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
|
|
flex-shrink: 0;
|
|
background-position: 0 50%;
|
|
margin-top: -18vh;
|
|
margin-bottom: 2vh;
|
|
}
|
|
|
|
/* Infobanner */
|
|
.infoBanner {
|
|
background: #101010;
|
|
}
|
|
|
|
/* Blurhash canvas */
|
|
.blurhash-canvas {
|
|
-webkit-filter: blur(23px) saturate(120%) contrast(120%) brightness(25%);
|
|
filter: opacity(60%) saturate(60%);
|
|
}
|
|
|
|
/* Default card backgrounds */
|
|
.defaultCardBackground1 {
|
|
background-color: #0a0a0a;
|
|
}
|
|
|
|
.defaultCardBackground2 {
|
|
background-color: #141414;
|
|
}
|
|
|
|
.defaultCardBackground3 {
|
|
background-color: #212121;
|
|
}
|
|
|
|
.defaultCardBackground4 {
|
|
background-color: #333333;
|
|
}
|
|
|
|
.defaultCardBackground5 {
|
|
background-color: #666666;
|
|
}
|
|
|
|
/* Hide card text in My Media section */
|
|
.homeSectionsContainer .verticalSection:has([data-type="CollectionFolder"]) .cardText {
|
|
display: none !important;
|
|
}
|
|
|
|
.homeSectionsContainer {
|
|
top: 67vh !important;
|
|
padding: 0 7px !important;
|
|
}
|
|
|
|
#indexPage:has(.featurediframe) #favoritesTab {
|
|
margin-top: 7.5rem !important;
|
|
}
|
|
|
|
|
|
|
|
/* Disable theme selectors - managed by Abyss */
|
|
|
|
.selectContainer:has(#selectTheme),
|
|
.selectDashboardThemeContainer {
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
/* Lock theme selectors only when dark theme is active */
|
|
.selectContainer:has(#selectTheme option[value="dark"]:checked),
|
|
.selectContainer:has(#selectDashboardTheme option[value="dark"]:checked) {
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
.selectContainer:has(#selectTheme option[value="dark"]:checked) #selectTheme,
|
|
.selectContainer:has(#selectDashboardTheme option[value="dark"]:checked) #selectDashboardTheme {
|
|
pointer-events: none !important;
|
|
opacity: 0.4 !important;
|
|
}
|
|
|
|
.selectContainer:has(#selectTheme option[value="dark"]:checked) #selectTheme+.selectArrow,
|
|
.selectContainer:has(#selectDashboardTheme option[value="dark"]:checked) #selectDashboardTheme+.selectArrow {
|
|
opacity: 0.4 !important;
|
|
}
|
|
|
|
|
|
/* 6. COMPONENTS */
|
|
|
|
/* Buttons & Interactive */
|
|
|
|
.raised,
|
|
.fab,
|
|
a[data-role="button"] {
|
|
background: rgba(40, 40, 40, 0.8) !important;
|
|
transition: background 0.37s var(--abyss-ease),
|
|
color 0.37s var(--abyss-ease),
|
|
border-color 0.37s var(--abyss-ease),
|
|
box-shadow 0.37s var(--abyss-ease) !important;
|
|
}
|
|
|
|
.raised:hover,
|
|
.fab:hover,
|
|
a[data-role="button"]:hover {
|
|
background: rgba(var(--abyss-accent), 0.5) !important;
|
|
}
|
|
|
|
.raised:hover,
|
|
.fab:hover,
|
|
.navMenuOption:hover,
|
|
.listItem:hover,
|
|
.actionSheetMenuItem:hover,
|
|
.css-17c09up:hover {
|
|
background: rgb(var(--abyss-accent)) !important;
|
|
color: #121212;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.listItem-content:hover {
|
|
color: #121212;
|
|
}
|
|
|
|
.actionSheetMenuItem {
|
|
border-radius: var(--abyss-radius) !important;
|
|
}
|
|
|
|
.actionSheetContent {
|
|
padding: .7em .6em !important;
|
|
}
|
|
|
|
.cardContent.cardImageContainer {
|
|
box-shadow: 0 0 3px rgba(200, 200, 200, 0.35) inset;
|
|
}
|
|
|
|
/* Round Cast Images */
|
|
.personCard .cardContent.cardImageContainer {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.personCard {
|
|
margin-right: 20px !important;
|
|
}
|
|
|
|
.paper-icon-button-light:hover,
|
|
.paper-icon-button-light:hover:not(:disabled) {
|
|
background-color: rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.paper-icon-button-light {
|
|
border-radius: var(--abyss-radius);
|
|
}
|
|
|
|
.emby-button.show-focus:focus {
|
|
background: rgba(var(--abyss-accent), 0.5) !important;
|
|
}
|
|
|
|
.paper-icon-button-light.show-focus:focus {
|
|
color: rgb(var(--abyss-accent)) !important;
|
|
}
|
|
|
|
.emby-tab-button {
|
|
padding: 0.5em 1.5em;
|
|
margin: 0 2.5px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.emby-tab-button-active {
|
|
background: rgb(var(--abyss-accent));
|
|
color: white;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.guideDateTabsSlider .emby-tab-button-active {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.emby-tab-button-active:hover {
|
|
color: #121212 !important;
|
|
}
|
|
|
|
.button-flat:hover {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
color: rgb(var(--abyss-accent)) !important;
|
|
}
|
|
|
|
.detailButton {
|
|
border-radius: var(--abyss-radius);
|
|
max-width: 15vw !important;
|
|
}
|
|
|
|
.button-submit {
|
|
position: sticky;
|
|
bottom: 24px;
|
|
margin-top: 48px !important;
|
|
box-shadow: 0 0 24px 2px rgba(var(--abyss-accent), 0.2);
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Active / played / link states */
|
|
.paper-icon-button-light:hover,
|
|
.raised.homeLibraryButton:hover,
|
|
.button-flat:hover,
|
|
.playstatebutton-icon-played,
|
|
.ratingbutton-icon-withrating,
|
|
.paper-icon-button-light:hover:not(:disabled),
|
|
.emby-tab-button:hover,
|
|
.selectLabelFocused,
|
|
.inputLabelFocused,
|
|
.textareaLabelFocused,
|
|
.buttonActive,
|
|
.button-link {
|
|
color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
#itemDetailPage .button-link {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.ratingbutton-icon-withrating {
|
|
color: rgb(249, 38, 114) !important;
|
|
}
|
|
|
|
/* Theme user setting tab buttons */
|
|
div[data-role="controlgroup"] a.ui-btn-active {
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
div[data-role="controlgroup"] a[data-role="button"] {
|
|
display: table-cell !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Home Library Buttons */
|
|
|
|
.homeLibraryButton {
|
|
min-width: 12em;
|
|
margin: 0.4em;
|
|
width: auto !important;
|
|
}
|
|
|
|
.raised.homeLibraryButton {
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
transition: background 0.37s var(--abyss-ease),
|
|
border-color 0.37s var(--abyss-ease),
|
|
box-shadow 0.37s var(--abyss-ease);
|
|
border: solid 1px rgba(var(--abyss-accent), 0) !important;
|
|
}
|
|
|
|
.raised.homeLibraryButton:hover {
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
|
|
/* Dialogs & Overlays */
|
|
|
|
.playerStats-stats,
|
|
.upNextContainer,
|
|
.dialog,
|
|
.toast {
|
|
border-radius: 24px !important;
|
|
}
|
|
|
|
.iconOsd {
|
|
right: 24px;
|
|
top: 8.5%;
|
|
border-radius: 18px !important;
|
|
}
|
|
|
|
.iconOsdIcon {
|
|
margin: .5em .63em 0 .63em;
|
|
}
|
|
|
|
.iconOsdProgressOuter {
|
|
margin: 1.5em .25em 0.35em;
|
|
}
|
|
|
|
.formDialogHeader {
|
|
border-top-left-radius: var(--abyss-radius);
|
|
border-top-right-radius: var(--abyss-radius);
|
|
}
|
|
|
|
.formDialogFooter {
|
|
border-bottom-left-radius: var(--abyss-radius);
|
|
border-bottom-right-radius: var(--abyss-radius);
|
|
}
|
|
|
|
.formDialogFooter-clear,
|
|
.formDialogHeader-clear,
|
|
.innerCardFooterClear {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.formDialogContent {
|
|
margin-bottom: 6.2em;
|
|
}
|
|
|
|
.dialogContentInner {
|
|
padding: .5em 1em 1em;
|
|
padding-right: 1em;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/* Cards */
|
|
|
|
.visualCardBox,
|
|
.cardImageContainer {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.cardBox-bottompadded {
|
|
margin-bottom: 0.6em !important;
|
|
}
|
|
|
|
.cardOverlayContainer {
|
|
border-radius: var(--abyss-radius) !important;
|
|
border: solid 1px rgba(var(--abyss-accent), 0.0) !important;
|
|
transition: border-color 0.15s var(--abyss-ease) !important;
|
|
}
|
|
|
|
.button-submit,
|
|
.cardOverlayContainer:hover,
|
|
.dialog,
|
|
.toast,
|
|
.upNextContainer,
|
|
.playerStats-stats,
|
|
.raised.homeLibraryButton:hover {
|
|
border: solid 1px rgba(245, 245, 247, 0.2) !important;
|
|
}
|
|
|
|
.cardPadder {
|
|
background-color: #0000 !important;
|
|
box-shadow: none !important;
|
|
border-radius: var(--abyss-radius) !important;
|
|
}
|
|
|
|
.card.show-animation:focus>.cardBox {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
transition: transform 0.37s var(--abyss-ease) !important;
|
|
}
|
|
|
|
|
|
|
|
/* Card Indicators */
|
|
|
|
.cardIndicators,
|
|
.listItemIndicators {
|
|
right: .225em;
|
|
top: .225em;
|
|
padding: 2px;
|
|
}
|
|
|
|
.mediaSourceIndicator {
|
|
left: 0.5em;
|
|
top: 0.5em;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
box-shadow: none;
|
|
border-radius: var(--abyss-radius);
|
|
}
|
|
|
|
.innerCardFooter {
|
|
margin: .5em;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.countIndicator {
|
|
background: rgba(var(--abyss-indicator), 0.8);
|
|
box-shadow: none;
|
|
border-radius: 10px !important;
|
|
padding: 4px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.playedIndicator {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
box-shadow: none;
|
|
border-radius: 10px !important;
|
|
padding: 4px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.cardOverlayButton-br.cardIndicators {
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Indicators & Progress */
|
|
|
|
.missingIndicator,
|
|
.unairedIndicator {
|
|
background: #ae3030eb;
|
|
padding: .3em .6em;
|
|
color: #fff;
|
|
}
|
|
|
|
.transcodingProgress>div,
|
|
.itemProgressBarForeground {
|
|
background-color: rgba(var(--abyss-accent), 0.3);
|
|
}
|
|
|
|
.playbackProgress>div {
|
|
background-color: rgba(var(--abyss-accent), 0.75);
|
|
}
|
|
|
|
.backgroundProgress>div {
|
|
background: rgba(0, 0, 0, 0);
|
|
background-color: #0000;
|
|
}
|
|
|
|
.itemProgressBar {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Sliders */
|
|
|
|
.mdl-slider-background-lower {
|
|
background-color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.mdl-slider::-moz-range-thumb {
|
|
border-radius: var(--abyss-radius);
|
|
background: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.mdl-slider::-ms-thumb {
|
|
border-radius: var(--abyss-radius);
|
|
background: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.mdl-slider::-webkit-slider-thumb {
|
|
border-radius: var(--abyss-radius);
|
|
background: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.sliderMarker {
|
|
width: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Toggle Switches */
|
|
|
|
.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__track {
|
|
background: rgba(var(--abyss-accent), 0.5);
|
|
}
|
|
|
|
.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__thumb {
|
|
background: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
/* Spinner */
|
|
|
|
.mdl-spinner__layer-1 {
|
|
border-color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.mdl-spinner__layer-2 {
|
|
border-color: rgba(128, 128, 128, 1);
|
|
}
|
|
|
|
.mdl-spinner__layer-3 {
|
|
border-color: rgba(40, 40, 40, 1);
|
|
}
|
|
|
|
.mdl-spinner__layer-4 {
|
|
border-color: rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
/* Progress Ring */
|
|
|
|
.progressring-spiner {
|
|
border-color: rgb(var(--abyss-accent));
|
|
border-width: .35em;
|
|
}
|
|
|
|
.progressring {
|
|
margin: .4em;
|
|
}
|
|
|
|
.progressring-bg {
|
|
display: none;
|
|
}
|
|
|
|
/* Lists */
|
|
|
|
.listItem {
|
|
padding-left: 1em;
|
|
margin-bottom: 2px !important;
|
|
}
|
|
|
|
.listItem bdi:first-of-type {
|
|
font-weight: 500;
|
|
font-variation-settings: "wght" 500;
|
|
transition:
|
|
color 0.3s ease,
|
|
font-variation-settings 0.3s ease;
|
|
}
|
|
|
|
.listItem bdi p {
|
|
font-weight: 400 !important;
|
|
font-variation-settings: "wght" 400 !important;
|
|
}
|
|
|
|
.listItem:hover bdi:first-of-type {
|
|
font-weight: 600;
|
|
font-variation-settings: "wght" 600;
|
|
}
|
|
|
|
.listItem:hover bdi p,
|
|
.listItem:hover bdi p::before {
|
|
font-weight: 400 !important;
|
|
font-variation-settings: "wght" 400 !important;
|
|
}
|
|
|
|
.listItem-border {
|
|
border-color: rgba(var(--abyss-accent), 0) !important;
|
|
}
|
|
|
|
.listItemIcon {
|
|
background: #0000 !important;
|
|
border-radius: var(--abyss-radius) !important;
|
|
}
|
|
|
|
.listItem-indexnumberleft {
|
|
margin: 1em;
|
|
}
|
|
|
|
.listItemImageButton {
|
|
margin: auto;
|
|
font-size: 1.6em !important;
|
|
border-radius: var(--abyss-radius) !important;
|
|
}
|
|
|
|
.listItemImageButton-icon {
|
|
padding: 0;
|
|
}
|
|
|
|
.listItemImageButton:hover {
|
|
color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.secondary.listItem-overview.listItemBodyText {
|
|
height: unset !important;
|
|
margin: 0;
|
|
}
|
|
|
|
.listItem:hover,
|
|
.listItem:hover .secondary,
|
|
.listItem:hover .listItem-secondaryText,
|
|
.listItem:hover p,
|
|
.listItem:hover span,
|
|
.listItem:hover div,
|
|
.listItem:hover .runtime,
|
|
.listItem:hover .starIcon::before,
|
|
.listItem:hover .starRatingContainer,
|
|
.listItem:hover .listItem-overview {
|
|
color: #121212b7 !important;
|
|
}
|
|
|
|
.listItem:hover,
|
|
.listItem:hover .listItemBodyText {
|
|
color: #121212 !important;
|
|
}
|
|
|
|
.listItem:hover .material-icons,
|
|
.listItem:hover .listItemImageButton {
|
|
color: #121212 !important;
|
|
}
|
|
|
|
.listItem:hover .countIndicator,
|
|
.listItem:hover .playedIndicator {
|
|
background: rgba(0, 0, 0, 0.15) !important;
|
|
color: #121212 !important;
|
|
}
|
|
|
|
.listItem:hover .itemProgressBarForeground {
|
|
background-color: rgba(18, 18, 18, 0.6) !important;
|
|
}
|
|
|
|
.listItem:hover .itemProgressBar {
|
|
background: rgba(18, 18, 18, 0.2) !important;
|
|
}
|
|
|
|
.listItem:hover .ratingbutton-icon-withrating {
|
|
color: rgb(249, 38, 114) !important;
|
|
}
|
|
|
|
.listItem:hover .listItemImageButton-icon {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
}
|
|
|
|
/* Form Inputs */
|
|
#homeScreenPreferencesPage,
|
|
#languagePreferencesPage {
|
|
& form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
& .button-submit {
|
|
width: 97%;
|
|
align-self: center !important;
|
|
}
|
|
}
|
|
|
|
#quickConnectPreferencesPage .inputContainer {
|
|
text-align: center;
|
|
}
|
|
|
|
.emby-input,
|
|
.emby-textarea {
|
|
padding: .4em .55em;
|
|
}
|
|
|
|
.emby-textarea {
|
|
font-family: monospace;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.emby-select {
|
|
padding: .35em 1.9em .35em .35em;
|
|
}
|
|
|
|
.selectArrow {
|
|
margin-top: 1.05em;
|
|
}
|
|
|
|
.itemSelectionPanel,
|
|
.checkboxOutline,
|
|
.emby-input,
|
|
.emby-textarea,
|
|
.emby-select-withcolor,
|
|
.checkboxOutline:focus,
|
|
.emby-input:focus,
|
|
.emby-textarea:focus,
|
|
.emby-select-withcolor:focus {
|
|
border: 1px solid rgba(40, 40, 40, 0.8);
|
|
}
|
|
|
|
.checkboxOutline {
|
|
border-color: rgba(var(--abyss-accent), 0.3) !important;
|
|
transition: background 0.2s var(--abyss-ease),
|
|
border-color 0.2s var(--abyss-ease);
|
|
}
|
|
|
|
input[type="checkbox"]:checked~.checkboxOutline,
|
|
input[type="checkbox"]:checked+.checkboxOutline {
|
|
background: rgb(var(--abyss-accent)) !important;
|
|
border-color: rgb(var(--abyss-accent)) !important;
|
|
}
|
|
|
|
.checkboxIcon {
|
|
color: #121212 !important;
|
|
}
|
|
|
|
input[type="checkbox"]:focus~.checkboxOutline,
|
|
input[type="checkbox"]:focus+.checkboxOutline {
|
|
outline: 2px solid rgba(var(--abyss-accent), 0.4) !important;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
#txtQuickConnectCode {
|
|
font-size: xxx-large;
|
|
font-weight: 900;
|
|
letter-spacing: 12px;
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* Paper / Table */
|
|
|
|
.sessionCardFooter {
|
|
border: none;
|
|
}
|
|
|
|
#user_usage_report_table,
|
|
.detailTable {
|
|
background: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.detailTableBodyRow-shaded {
|
|
background: #0000 !important;
|
|
}
|
|
|
|
/* Sync Play */
|
|
|
|
.syncPlayIconCircle {
|
|
color: rgb(var(--abyss-accent)) !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
/* Subtitle Preview */
|
|
|
|
.subtitleappearance-preview {
|
|
background: linear-gradient(140deg, rgb(var(--abyss-accent)), #111) !important;
|
|
}
|
|
|
|
.subtitleappearance-preview #sliderVertical {
|
|
margin: 24px !important;
|
|
}
|
|
|
|
.subtitle {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
/* Others */
|
|
#userProfilePage .readOnlyContent,
|
|
.readOnlyContent .verticalSection,
|
|
#languagePreferencesPage .settingsContainer .verticalSection,
|
|
.subtitleAppearanceSection,
|
|
.homeScreenSettingsContainer .perLibrarySettings,
|
|
.homeScreenSettingsContainer .verticalSection-extrabottompadding {
|
|
padding: 16px;
|
|
background-color: rgba(var(--abyss-glass-tint), 0.69);
|
|
border-radius: 32px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
border: solid 1px rgba(245, 245, 247, 0.2) !important;
|
|
}
|
|
|
|
.homeScreenSettingsContainer .verticalSection-extrabottompadding .verticalSection {
|
|
padding: 0 !important;
|
|
border-radius: 0;
|
|
background: none !important;
|
|
box-shadow: none;
|
|
border: none !important;
|
|
}
|
|
|
|
.homeScreenSettingsContainer .perLibrarySettings {
|
|
margin-bottom: 36px !important;
|
|
}
|
|
|
|
.homeScreenSettingsContainer .paperList {
|
|
padding: 12px;
|
|
background-color: rgba(var(--abyss-glass-tint), 0.69);
|
|
border-radius: 24px !important;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.readOnlyContent .adminSection {
|
|
border-radius: 32px 32px 6px 6px !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
|
|
.readOnlyContent .userSection {
|
|
border-radius: 6px 6px 32px 32px !important;
|
|
}
|
|
|
|
.readOnlyContent .userSection .sectionTitle {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
#userProfilePage .readOnlyContent {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
#userProfilePage .readOnlyContent div {
|
|
align-items: baseline !important;
|
|
margin-right: 12px !important;
|
|
}
|
|
|
|
#image,
|
|
#uploadImage {
|
|
border-radius: 24px !important;
|
|
margin: 12px !important;
|
|
}
|
|
|
|
#quickConnectPreferencesPage {
|
|
justify-items: center;
|
|
}
|
|
|
|
.itemSelectionPanel {
|
|
padding: 12px !important;
|
|
}
|
|
|
|
.selectionCommandsPanel {
|
|
padding: 1.5em 24px !important;
|
|
}
|
|
|
|
[dir=ltr] .playerStats-stats {
|
|
padding: 1em 3em 2em 2em;
|
|
}
|
|
|
|
|
|
.playerStats-stat {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.playerStats-stat-header {
|
|
font-size: medium !important;
|
|
}
|
|
|
|
.playerStats-stat-label {
|
|
opacity: 0.5;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.playerStats-stat-value {
|
|
font-family: monospace;
|
|
font-size: medium;
|
|
}
|
|
|
|
.playerStats-closeButton {
|
|
margin: 10px;
|
|
}
|
|
|
|
[dir="ltr"] .upNextContainer {
|
|
margin: 0px 2em 10.4em 0px;
|
|
}
|
|
|
|
#castCollapsible,
|
|
#scenesCollapsible,
|
|
#similarCollapsible,
|
|
.moreFromSeasonSection {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.playstatebutton-icon-played::before {
|
|
background-color: rgba(var(--abyss-accent), 0.8);
|
|
border-radius: 8px;
|
|
color: #000;
|
|
}
|
|
|
|
/* Exclusive to Lukeflix badge */
|
|
.elsewhere-custom-branding-icon {
|
|
width: 54px !important;
|
|
height: auto !important;
|
|
margin-left: 5px !important;
|
|
}
|
|
|
|
/* 7. ROUNDED CORNERS */
|
|
|
|
.missingIndicator,
|
|
.unairedIndicator,
|
|
.detailTable,
|
|
.primaryImageWrapper>img,
|
|
.toast,
|
|
.paperList,
|
|
.cardContent,
|
|
.sessionNowPlayingInnerContent,
|
|
.subtitleappearance-preview,
|
|
.listItemImage,
|
|
.listItemImageButton,
|
|
.listItemButton,
|
|
.listItem,
|
|
.cardImage,
|
|
.fab,
|
|
.raised,
|
|
.multiSelectCheckboxOutline,
|
|
.itemSelectionPanel,
|
|
.cardContent-button,
|
|
.cardContent-shadow,
|
|
.itemDetailImage,
|
|
.cardImageContainer,
|
|
.listItemIcon,
|
|
.blurhash-canvas,
|
|
.countIndicator,
|
|
.playedIndicator,
|
|
.listItem-border,
|
|
.visualCardBox,
|
|
.chapterThumbTextContainer,
|
|
.chapterThumbContainer,
|
|
.chapterThumb,
|
|
.emby-input,
|
|
.emby-textarea,
|
|
.nowPlayingPageImage,
|
|
.upNextDialog-poster-img,
|
|
.cardOverlayButtonIcon,
|
|
.innerCardFooter {
|
|
border-radius: var(--abyss-radius) !important;
|
|
}
|
|
|
|
.osdPoster img {
|
|
border-radius: var(--abyss-radius);
|
|
border: none;
|
|
}
|
|
|
|
div[data-role="controlgroup"] a[data-role="button"]:first-child {
|
|
border-bottom-left-radius: var(--abyss-radius);
|
|
border-top-left-radius: var(--abyss-radius);
|
|
}
|
|
|
|
div[data-role="controlgroup"] a[data-role="button"]:last-child {
|
|
border-bottom-right-radius: var(--abyss-radius);
|
|
border-top-right-radius: var(--abyss-radius);
|
|
}
|
|
|
|
#dashboardPage .cardContent,
|
|
#dashboardPage .sessionNowPlayingInnerContent {
|
|
border-radius: var(--abyss-radius) var(--abyss-radius) 0 0 !important;
|
|
}
|
|
|
|
#divVirtualFolders .cardImageContainer,
|
|
#divVirtualFolders .cardContent {
|
|
border-radius: var(--abyss-radius) var(--abyss-radius) 0 0 !important;
|
|
}
|
|
|
|
#userProfilesPage .cardImage,
|
|
#userProfilesPage .cardContent {
|
|
border-radius: var(--abyss-radius) var(--abyss-radius) 0 0 !important;
|
|
}
|
|
|
|
[dir=ltr] .emby-select,
|
|
#inputTextColor,
|
|
.checkboxOutline {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.dialog-fullscreen {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.upNextContainer,
|
|
.playerStats,
|
|
.playerStats-stats {
|
|
border-radius: 24px !important;
|
|
}
|
|
|
|
.detailImageContainer .cardImageContainer,
|
|
.detailImageContainer .card {
|
|
border-radius: 24px !important;
|
|
}
|
|
|
|
/* 8. MEDIA PLAYER */
|
|
|
|
.nowPlayingPageImage {
|
|
border: none;
|
|
}
|
|
|
|
.osdPoster img {
|
|
border-radius: var(--abyss-radius);
|
|
border: none;
|
|
}
|
|
|
|
.startTimeText,
|
|
.endTimeText {
|
|
width: 3.4em;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.osdTitle {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.skinHeader.osdHeader {
|
|
height: 5em;
|
|
}
|
|
|
|
.osdTextContainer {
|
|
margin: 0 !important;
|
|
margin-top: 0.2em !important;
|
|
padding-left: 0.5em !important;
|
|
padding-right: 0.5em !important;
|
|
}
|
|
|
|
.nowPlayingBarCurrentTime {
|
|
width: 6em;
|
|
}
|
|
|
|
.upNextDialog-countdownText {
|
|
color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
.iconOsdProgressInner {
|
|
background: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
/* Chapter thumb */
|
|
.chapterThumb {
|
|
height: 14vh;
|
|
min-width: 14vh;
|
|
box-shadow: 0 0 1.9vh #000;
|
|
}
|
|
|
|
.chapterThumbText {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.chapterThumbTextContainer {
|
|
right: auto;
|
|
bottom: 4px;
|
|
padding: .25em 0.7em;
|
|
}
|
|
|
|
.chapterThumbContainer {
|
|
box-shadow: 0 0 1.9vh #000;
|
|
}
|
|
|
|
.sliderBubble {
|
|
background: #0000;
|
|
-webkit-transform: translate3d(-50%, -108%, 0);
|
|
transform: translate3d(-50%, -108%, 0);
|
|
}
|
|
|
|
/* Playing Bar */
|
|
.nowPlayingBarTop {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.videoOsdBottom .osdControls,
|
|
.nowPlayingBar {
|
|
border-radius: 24px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
padding: 12px;
|
|
}
|
|
|
|
.nowPlayingBar .nowPlayingImage {
|
|
width: 2.91em;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.nowPlayingBarPositionContainer {
|
|
top: -1.5em;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.nowPlayingBarInfoContainer {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.videoOsdBottom {
|
|
padding: 0 !important;
|
|
margin: 24px !important;
|
|
border-radius: 24px;
|
|
background: none !important;
|
|
}
|
|
|
|
.osdTimeText {
|
|
margin-left: 0 !important;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Track selector */
|
|
.trackSelections .selectContainer .detailTrackSelect {
|
|
padding: .5em 1.9em .5em .5em;
|
|
}
|
|
|
|
.trackSelections .selectContainer .selectArrowContainer .selectArrow {
|
|
margin-top: .2em;
|
|
}
|
|
|
|
.trackSelections .selectContainer {
|
|
align-items: center;
|
|
}
|
|
|
|
/* Slider track rounding */
|
|
.mdl-slider-background-flex,
|
|
.mdl-slider-background-flex-inner,
|
|
.mdl-slider-background-upper,
|
|
.mdl-slider-background-lower {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
|
|
/* 9. DASHBOARD & ADMIN */
|
|
|
|
.dashboardSection h3 {
|
|
margin: .5em 0em .5em .5em;
|
|
}
|
|
|
|
.dashboardSection .sectionTitleTextButton>.material-icons.material-icons {
|
|
margin-top: .5em;
|
|
margin-bottom: .5em;
|
|
margin-right: .2em;
|
|
}
|
|
|
|
#dashboardPage .playbackProgress>div {
|
|
background-color: rgba(var(--abyss-accent), 0.75) !important;
|
|
}
|
|
|
|
#dashboardPage .transcodingProgress>div {
|
|
background-color: rgba(var(--abyss-accent), 0.35) !important;
|
|
}
|
|
|
|
.css-4yt2of {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-right: 1px solid rgba(var(--abyss-accent), 0.12);
|
|
}
|
|
|
|
.navMenuOption-selected,
|
|
.css-17c09up.Mui-selected {
|
|
color: rgb(var(--abyss-accent));
|
|
}
|
|
|
|
|
|
/* 10. ITEM DETAIL PAGE */
|
|
|
|
.mainDetailButtons {
|
|
font-size: 120%;
|
|
}
|
|
|
|
#itemDetailPage .itemName.infoText.parentNameLast {
|
|
display: none;
|
|
}
|
|
|
|
.hide+.detailPageWrapperContainer .itemName {
|
|
display: block !important;
|
|
}
|
|
|
|
#itemDetailPage .button-link {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.sectionTitleTextButton:hover {
|
|
color: transparent;
|
|
}
|
|
|
|
/* Progress bars on item pages */
|
|
#indexPage .innerCardFooterClear,
|
|
.libraryPage .innerCardFooterClear,
|
|
#itemDetailPage .innerCardFooterClear {
|
|
background-color: transparent !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#indexPage .itemProgressBarForeground,
|
|
.libraryPage .itemProgressBarForeground,
|
|
#itemDetailPage .itemProgressBarForeground,
|
|
#indexPage .itemProgressBar,
|
|
.libraryPage .itemProgressBar,
|
|
#itemDetailPage .itemProgressBar {
|
|
border-radius: var(--abyss-radius);
|
|
}
|
|
|
|
#indexPage .itemProgressBarForeground,
|
|
.libraryPage .itemProgressBarForeground,
|
|
#itemDetailPage .itemProgressBarForeground {
|
|
background-color: rgba(var(--abyss-accent), 0.95) !important;
|
|
}
|
|
|
|
#indexPage .itemProgressBar,
|
|
.libraryPage .itemProgressBar,
|
|
#itemDetailPage .itemProgressBar {
|
|
height: 7px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
margin: .5em .8em;
|
|
}
|
|
|
|
|
|
/* 11. LOGIN PAGE */
|
|
|
|
#loginPage {
|
|
background-size: cover !important;
|
|
}
|
|
|
|
#loginPage .readOnlyContent,
|
|
#loginPage form {
|
|
max-width: 22em;
|
|
}
|
|
|
|
#loginPage h1 {
|
|
display: none;
|
|
}
|
|
|
|
#loginPage .padded-left.padded-right.padded-bottom-page {
|
|
margin-top: 8em;
|
|
}
|
|
|
|
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
|
|
margin-top: 0.8em;
|
|
background: rgba(var(--abyss-accent), 0.0) !important;
|
|
}
|
|
|
|
#loginPage .raised.cancel.block.btnForgotPassword.emby-button:hover {
|
|
color: rgb(var(--abyss-accent)) !important;
|
|
}
|
|
|
|
.manualLoginForm {
|
|
border-radius: 24px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
border: solid 1px rgba(245, 245, 247, 0.2) !important;
|
|
padding: 24px 12px 7px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
|
|
/* 12. CAST THUMBNAILS (responsive sizing) */
|
|
|
|
@media all and (min-width: 131.25em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 6.3vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(6.3vw - 0.6em) !important;
|
|
height: calc(6.3vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 120em) and (max-width: 131.25em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 6.4vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(6.4vw - 0.6em) !important;
|
|
height: calc(6.4vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 100em) and (max-width: 120em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 7.6vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(7.6vw - 0.6em) !important;
|
|
height: calc(7.6vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 87.5em) and (max-width: 100em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 9.3vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(9.3vw - 0.6em) !important;
|
|
height: calc(9.3vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 75em) and (max-width: 87.5em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 10.5vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(10.5vw - 0.6em) !important;
|
|
height: calc(10.5vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 50em) and (max-width: 75em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 15vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(15vw - 0.6em) !important;
|
|
height: calc(15vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 43.75em) and (max-width: 50em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 20.1vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(20.1vw - 0.6em) !important;
|
|
height: calc(20.1vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 25em) and (max-width: 43.75em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 31.2vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(31.2vw - 0.6em) !important;
|
|
height: calc(31.2vw - 0.6em) !important;
|
|
}
|
|
|
|
.innerCardFooterClear {
|
|
padding-right: 24px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 31.2vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(31.2vw - 0.6em) !important;
|
|
height: calc(31.2vw - 0.6em) !important;
|
|
}
|
|
|
|
.innerCardFooterClear {
|
|
padding-right: 24px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 770px) {
|
|
|
|
/* Push navigation tabs down when overflowing */
|
|
.emby-tabs-slider {
|
|
margin: 50px 0 !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 25em) {
|
|
|
|
#castContent .card.overflowPortraitCard,
|
|
#guestCastContent .card.overflowPortraitCard {
|
|
width: 40vw !important;
|
|
font-size: 90% !important;
|
|
}
|
|
|
|
#castContent .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
width: calc(40vw - 0.6em) !important;
|
|
height: calc(40vw - 0.6em) !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* 13. RESPONSIVE / MEDIA QUERIES */
|
|
|
|
/* Mobile layout tweaks */
|
|
.layout-mobile .detailPagePrimaryContainer {
|
|
background: transparent;
|
|
}
|
|
|
|
.layout-mobile .adminDrawerLogo {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.layout-mobile .itemBackdrop {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.layout-mobile .detailLogo {
|
|
display: none !important;
|
|
}
|
|
|
|
.layout-mobile .sectionTitleTextButton>.material-icons {
|
|
padding-top: .2em;
|
|
}
|
|
|
|
.layout-mobile .listItemImageButton {
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.layout-mobile .sectionTitle {
|
|
padding-top: 0em;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast {
|
|
display: block;
|
|
}
|
|
|
|
/* Desktop layout */
|
|
.layout-desktop .detailImageContainer .card {
|
|
position: fixed !important;
|
|
top: 10% !important;
|
|
}
|
|
|
|
.layout-mobile .detailImageContainer .card {
|
|
position: absolute !important;
|
|
}
|
|
|
|
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
|
|
padding-top: 0em;
|
|
}
|
|
|
|
.withSectionTabs .headerTop {
|
|
width: 100% !important;
|
|
align-self: center !important;
|
|
}
|
|
|
|
@media (max-width: 100em) {
|
|
.withSectionTabs .headerTop {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 75em) {
|
|
.cardOverlayFab-primary {
|
|
background-color: #00000000;
|
|
}
|
|
|
|
.cardOverlayButtonIcon {
|
|
background-color: #00000000 !important;
|
|
}
|
|
|
|
.cardOverlayContainer {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.headerTabs.sectionTabs {
|
|
margin-top: -4.9em !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 75em) {
|
|
.cardOverlayFab-primary {
|
|
background-color: #00000000;
|
|
}
|
|
|
|
.cardOverlayButtonIcon {
|
|
background-color: #00000000 !important;
|
|
}
|
|
|
|
.cardOverlayContainer {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.cardOverlayButton {
|
|
padding: 0.25em;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 26em) {
|
|
.homeLibraryButton {
|
|
min-width: 45%;
|
|
width: auto !important;
|
|
}
|
|
|
|
.pageTitle {
|
|
font-size: medium !important;
|
|
font-weight: 500;
|
|
padding: 0 6px !important;
|
|
}
|
|
|
|
.sectionTitle {
|
|
font-size: 1.2em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.headerLeft,
|
|
.headerRight {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.detailImageContainer .cardImageContainer,
|
|
.detailImageContainer .card {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.emby-tab-button {
|
|
padding: 0.4em 1.2em;
|
|
}
|
|
|
|
.paper-icon-button-light>.material-icons {
|
|
font-size: 1.4em !important;
|
|
}
|
|
|
|
.paper-icon-button-light {
|
|
padding: 8px;
|
|
}
|
|
|
|
.btnPause {
|
|
position: fixed !important;
|
|
left: 42vw;
|
|
transform: translateY(-45vh);
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 26em) and (orientation: landscape) {
|
|
.pageTitle {
|
|
font-size: large !important;
|
|
}
|
|
|
|
.btnPause {
|
|
position: fixed !important;
|
|
left: 42vw;
|
|
transform: translateY(-45vh);
|
|
font-size: 2em;
|
|
backdrop-filter: blur(15px) !important;
|
|
background-color: rgba(var(--abyss-glass-tint), 0.69) !important;
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
body:has(#indexPage.homePage:not(.hide)) .headerTabs.sectionTabs {
|
|
margin-top: -4.9em !important;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 100em) {
|
|
.button-flat {
|
|
margin: .2em !important;
|
|
padding: .85em !important;
|
|
}
|
|
|
|
.listItemImage.listItemImage-large.itemAction.lazy {
|
|
height: 160px !important;
|
|
}
|
|
|
|
.listItem-content {
|
|
height: unset !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 100em) {
|
|
.mainDetailButtons {
|
|
font-size: 155%;
|
|
}
|
|
|
|
.listItemImage.listItemImage-large.itemAction.lazy {
|
|
height: 160px !important;
|
|
}
|
|
|
|
.listItem-content {
|
|
height: unset !important;
|
|
}
|
|
|
|
.secondary.listItem-overview.listItemBodyText {
|
|
height: unset !important;
|
|
margin: 0;
|
|
}
|
|
|
|
#indexPage .itemProgressBar,
|
|
.libraryPage .itemProgressBar,
|
|
#itemDetailPage .itemProgressBar {
|
|
margin-right: .8em;
|
|
}
|
|
}
|
|
|
|
@media (min-aspect-ratio: 1.98/1) {
|
|
.detailImageContainer .card {
|
|
width: 21vw !important;
|
|
}
|
|
|
|
.detailRibbon {
|
|
padding-left: 28.45vw !important;
|
|
}
|
|
|
|
.detailPagePrimaryContent {
|
|
padding-left: 28.45vw !important;
|
|
}
|
|
|
|
.detailPageContent {
|
|
padding-left: 28.45vw !important;
|
|
}
|
|
}
|
|
|
|
@media (min-aspect-ratio: 2.7/1) {
|
|
.detailImageContainer .card {
|
|
width: 16vw !important;
|
|
}
|
|
|
|
.detailRibbon {
|
|
padding-left: 23.45vw !important;
|
|
}
|
|
|
|
.detailPagePrimaryContent {
|
|
padding-left: 23.45vw !important;
|
|
}
|
|
|
|
.detailPageContent {
|
|
padding-left: 23.45vw !important;
|
|
}
|
|
}
|
|
|
|
/* Backdrop filter support */
|
|
@supports (backdrop-filter: blur(15px)) {
|
|
|
|
.manualLoginForm,
|
|
.dialog,
|
|
.iconOsd,
|
|
.mainDrawer,
|
|
.toast,
|
|
.emby-tabs-slider,
|
|
.videoOsdBottom .osdControls,
|
|
.readOnlyContent .verticalSection,
|
|
.button-submit,
|
|
.upNextContainer,
|
|
.selectionCommandsPanel,
|
|
.playerStats-stats,
|
|
.appfooter {
|
|
backdrop-filter: blur(15px) !important;
|
|
background-color: rgba(var(--abyss-glass-tint), 0.69) !important;
|
|
}
|
|
|
|
.raised.cancel.block.btnForgotPassword.emby-button,
|
|
.btnQuick,
|
|
.pageTitle,
|
|
.videoOsdBottom,
|
|
.headerButton {
|
|
backdrop-filter: blur(15px) !important;
|
|
}
|
|
|
|
.paper-icon-button-light:hover,
|
|
#itemDetailPage .itemProgressBar,
|
|
#dashboardPage .backgroundProgress>div {
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.indicator {
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
@media all and (max-width: 75em) {
|
|
.cardOverlayButtonIcon {
|
|
background-color: rgba(0, 0, 0, 0.35) !important;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
}
|
|
|
|
#indexPage .itemProgressBar,
|
|
.libraryPage .itemProgressBar,
|
|
#itemDetailPage .itemProgressBar {
|
|
backdrop-filter: blur(4px);
|
|
background: rgba(0, 0, 0, 0.35) !important;
|
|
}
|
|
|
|
body:has(.nowPlayingBar) .backgroundContainer.withBackdrop {
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
}
|
|
|
|
/* Item container margins */
|
|
.itemsContainer>.card>.cardBox {
|
|
margin-left: 0.6em !important;
|
|
margin-right: 0.8em;
|
|
}
|
|
|
|
/* Episode list image sizing */
|
|
.listItemImage.listItemImage-large.itemAction.lazy {
|
|
transition: filter 0.15s var(--abyss-ease);
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
/* 14. SEARCH PAGE */
|
|
|
|
.searchSuggestionsList .emby-button {
|
|
color: rgba(var(--abyss-accent), 0.6);
|
|
font-weight: 100;
|
|
font-size: 18px;
|
|
letter-spacing: 1px;
|
|
text-align: left;
|
|
}
|
|
|
|
#searchTextInput {
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
padding: 12px 18px;
|
|
letter-spacing: 1.1px;
|
|
}
|
|
|
|
.searchFieldsInner .inputLabel {
|
|
display: none;
|
|
}
|
|
|
|
.searchfields-icon {
|
|
align-self: center !important;
|
|
}
|
|
|
|
.verticalSection.searchSuggestions .sectionTitle {
|
|
display: none;
|
|
}
|
|
|
|
.verticalSection.searchSuggestions {
|
|
text-align: left !important;
|
|
padding: 12px 0 0 0 !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-height: calc(100vh - 190px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.searchSuggestionsList {
|
|
width: fit-content;
|
|
min-width: min(908px, calc(100vw - 70px));
|
|
padding-left: 50px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
max-height: 100%;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(var(--abyss-accent), 0.5) transparent;
|
|
}
|
|
|
|
.searchSuggestionsList::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.searchSuggestionsList::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--abyss-accent), 0.5);
|
|
border-radius: var(--abyss-radius);
|
|
}
|
|
|
|
.searchSuggestionsList::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
#searchPage .scrollSlider {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.noItemsMessage.centerMessage {
|
|
font-weight: 100 !important;
|
|
font-size: 36px;
|
|
letter-spacing: 1.2px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.centerMessage {
|
|
padding: 2em 0 !important;
|
|
}
|
|
|
|
@media all and (max-width: 50em) {
|
|
.searchSuggestionsList {
|
|
min-width: calc(100vw - 80px);
|
|
padding-left: 44px;
|
|
}
|
|
}
|
|
|
|
/* 15. ANIMATIONS & KEYFRAMES */
|
|
|
|
.playstatebutton-icon-played::before,
|
|
.cardOverlayContainer,
|
|
.cardOverlayButtonIcon,
|
|
.cardOverlayButton,
|
|
.paper-icon-button-light,
|
|
.emby-tab-button,
|
|
.emby-tab-button-active,
|
|
.button-flat,
|
|
.navMenuOption,
|
|
.listItem,
|
|
.actionSheetMenuItem {
|
|
transition: background 0.37s var(--abyss-ease),
|
|
color 0.37s var(--abyss-ease),
|
|
border-color 0.37s var(--abyss-ease),
|
|
border-radius 0.37s var(--abyss-ease),
|
|
opacity 0.37s var(--abyss-ease),
|
|
box-shadow 0.37s var(--abyss-ease),
|
|
transform 0.37s var(--abyss-ease) !important;
|
|
}
|
|
|
|
.mainDrawer {
|
|
transition: transform 0.18s var(--abyss-ease-snappy),
|
|
left 0.18s var(--abyss-ease-snappy),
|
|
width 0.18s var(--abyss-ease-snappy) !important;
|
|
}
|
|
|
|
/* Favourite button heart animation — all contexts */
|
|
@keyframes abyss-heart-pop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes abyss-heart-glow {
|
|
0% {
|
|
filter: drop-shadow(0 0 0px rgba(249, 38, 114, 0));
|
|
}
|
|
|
|
40% {
|
|
filter: drop-shadow(0 0 10px rgba(249, 38, 114, 0.9));
|
|
}
|
|
|
|
100% {
|
|
filter: drop-shadow(0 0 0px rgba(249, 38, 114, 0));
|
|
}
|
|
}
|
|
|
|
.ratingbutton-withrating .material-icons.favorite {
|
|
animation: abyss-heart-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) normal none,
|
|
abyss-heart-glow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) normal none;
|
|
}
|
|
|
|
/* Section entrance animations, all pages */
|
|
@keyframes abyss-section-fade-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.verticalSection:nth-child(1) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.05s;
|
|
}
|
|
|
|
.verticalSection:nth-child(2) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.1s;
|
|
}
|
|
|
|
.verticalSection:nth-child(3) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.15s;
|
|
}
|
|
|
|
.verticalSection:nth-child(4) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.2s;
|
|
}
|
|
|
|
.verticalSection:nth-child(5) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.25s;
|
|
}
|
|
|
|
.verticalSection:nth-child(6) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.3s;
|
|
}
|
|
|
|
.verticalSection:nth-child(7) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.35s;
|
|
}
|
|
|
|
.verticalSection:nth-child(8) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.4s;
|
|
}
|
|
|
|
.verticalSection:nth-child(n+9) {
|
|
animation: abyss-section-fade-up 0.7s var(--abyss-ease) both 0.45s;
|
|
}
|
|
|
|
/* 16. LIBRARY */
|
|
|
|
/* Resize movie logo */
|
|
#itemDetailPage .detailLogo {
|
|
margin-left: 31% !important;
|
|
margin-top: -18vh !important;
|
|
margin-bottom: 2vh !important;
|
|
}
|
|
|
|
/* Resize backdrop above action ribbon */
|
|
.itemBackdrop {
|
|
height: 20vh !important;
|
|
}
|
|
|
|
/* Remove background of action ribbon */
|
|
.layout-desktop .detailRibbon {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Remove background of page background */
|
|
.noBackdropTransparency .detailPagePrimaryContainer,
|
|
.noBackdropTransparency .detailPageSecondaryContainer {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Make movie tagline larger and bolder */
|
|
.tagline {
|
|
font-size: 1.5em !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.detailRibbon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.infoWrapper {
|
|
display: contents;
|
|
}
|
|
|
|
.detailImageContainer,
|
|
.nameContainer,
|
|
.itemMiscInfo-secondary {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
.mainDetailButtons {
|
|
order: 3;
|
|
}
|
|
|
|
.itemMiscInfo-primary {
|
|
order: 4;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Hide details section (subtitles/quality/etc. ) */
|
|
.trackSelections {
|
|
display: none !important;
|
|
}
|
|
|
|
/* == DETAIL RIBBON BUTTONS == */
|
|
|
|
.play_arrow {
|
|
color: black;
|
|
background-color: rgba(var(--abyss-accent)) !important;
|
|
padding: 15px 15px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* 167. LIVE TV STRUCTURE & COMPONENTS */
|
|
|
|
/* */
|
|
.absolutePageTabContent {
|
|
top: 4.3em !important;
|
|
}
|
|
|
|
/* */
|
|
.headerTop {
|
|
padding: 1.1em 0 !important;
|
|
}
|
|
|
|
/* Reduce spacing between category and date selector tabs */
|
|
.headerTabs.sectionTabs {
|
|
margin-top: -4.4em !important;
|
|
}
|
|
|
|
/* Restyle Date Selector */
|
|
.emby-tabs-slider.guideDateTabsSlider {
|
|
background-color: transparent !important;
|
|
border: none;
|
|
}
|
|
|
|
/* Set active selected dates text in Date Selector to be white */
|
|
.guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button:focus {
|
|
color: white;
|
|
}
|
|
|
|
/* Shrink the Date Selector Text */
|
|
.guideHeaderDateSelection {
|
|
font-size: 80%;
|
|
padding: none !important;
|
|
}
|
|
|
|
/* ========== TIME SLOT BAR ========== */
|
|
|
|
.timeslotHeaders {
|
|
font-size: 110% !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* ========== TV GUIDE ========== */
|
|
|
|
/* ==== GUIDE HEADER ==== */
|
|
|
|
.tvGuideHeader {
|
|
flex-direction: row !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Date Selector */
|
|
.emby-tabs-slider.guideDateTabsSlider {
|
|
border: none;
|
|
background-color: transparent !important;
|
|
width: 140px !important;
|
|
padding: 5px 0 !important;
|
|
}
|
|
|
|
/* Time Interval Spacing & Style */
|
|
.guide-headerTimeslots {
|
|
color: inherit;
|
|
flex: 1 1 0 !important; /* fit rest of length */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ==== PROGRAM CELLS ==== */
|
|
|
|
/* Stylize channel number and logo cells */
|
|
.guide-channelHeaderCell {
|
|
border: none !important;
|
|
}
|
|
|
|
.programContainer.emby-scroller {
|
|
padding: 5px 0 !important;
|
|
}
|
|
|
|
.channelsContainer {
|
|
width: 140px !important; /* Reduce distance channel number and logo */
|
|
}
|
|
|
|
/* Remove borders around each row and program */
|
|
.channelPrograms {
|
|
border: none !important;
|
|
}
|
|
|
|
/* Resize channel logo for each row */
|
|
.guideChannelImage {
|
|
width: 47% !important
|
|
}
|
|
|
|
/* @media (max-width:62.5em) {
|
|
.guideChannelImage {
|
|
width: 47%;
|
|
}
|
|
} */
|
|
|
|
/* Stylize program cell container */
|
|
.programCell {
|
|
border: none !important;
|
|
border-radius: 8px !important;
|
|
margin: 5px 0px 3px 3px !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* ========= ACTIVE PROGRAM CELLS ========= */
|
|
|
|
/* Use correct category coloring for active programs */
|
|
.programCell-active .guideProgramNameText {
|
|
width: 100%;
|
|
padding-left: 15px !important;
|
|
align-content: center;
|
|
color: white;
|
|
height: 60px !important;
|
|
border-radius: 14px !important;
|
|
border: medium !important;
|
|
backdrop-filter: blur(15px) !important;
|
|
}
|
|
|
|
/* Active News Program Cells (Use .guideProgramName with padding to create island effect) */
|
|
.programCell-news.programCell-active .guideProgramNameText {
|
|
background-color: rgba(35, 119, 208, 0.89) !important;
|
|
}
|
|
|
|
/* Active Movie Program Cells */
|
|
.programCell-movie.programCell-active .guideProgramNameText {
|
|
background-color: #5e35b1 !important
|
|
}
|
|
|
|
/* Active Sports Program Cells */
|
|
.programCell-sports.programCell-active .guideProgramNameText {
|
|
background-color: #2fa755 !important
|
|
}
|
|
|
|
/* ========= NEXT-UP PROGRAM CELLS ========= */
|
|
|
|
.guideProgramNameText {
|
|
width: 100%;
|
|
height: 33px;
|
|
align-content: center;
|
|
border-right: 2px solid gray;
|
|
}
|
|
|
|
/* Next-Up News Program Cells */
|
|
.programCell-news .guideProgramNameText {
|
|
border-right: 2px solid rgba(35, 119, 208, 0.89) !important;
|
|
}
|
|
|
|
/* Next-Up Movie Program Cells */
|
|
.programCell-movie .guideProgramNameText {
|
|
border-right: 2px solid #5e35b1 !important
|
|
}
|
|
|
|
/* Next-Up Sports Program Cells */
|
|
.programCell-sports .guideProgramNameText {
|
|
border-right: 2px solid #2fa755 !important;
|
|
}
|
|
|
|
/* ==== STATUS BUTTONS ==== */
|
|
|
|
/* Status button for programs (new, rerun, etc. ) */
|
|
.guideProgramIndicator {
|
|
border: 0.5px solid gray;
|
|
border-radius: 10px;
|
|
font-size: 75%;
|
|
font-weight: 400;
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
/* New program status button */
|
|
.newTvProgram {
|
|
background: rgba(0, 0, 0, 0.47);
|
|
}
|
|
|
|
/* ======== PROGRAM POP-UP ======== */
|
|
|
|
.dialogContainer {
|
|
-webkit-justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
height: 85.5% !important;
|
|
padding: 11px !important;
|
|
margin-top: 100px !important;
|
|
}
|
|
|
|
/* Remove background tint for when pop-up opens */
|
|
.dialogBackdrop {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Set height of show dialog to fill all of above container (.dialogContainer) */
|
|
.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Remove background colors from top and bottom of program pop-up */
|
|
.formDialogHeader, .formDialogFooter {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* ======== CHANNEL PAGE ======== */
|
|
|
|
/* Make channel logo fully expand */
|
|
.cardScalable .cardImageContainer {
|
|
background-size: contain !important;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
/* Remove inner box shadow from channel logo container */
|
|
.cardContent.cardImageContainer {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ====== UNSURE ====== */
|
|
|
|
.padded-top {
|
|
padding-top: 0em !important;
|
|
}
|
|
|
|
/* Test for Channel Selection Hover */
|
|
.guide-channelHeaderCell.itemAction .guideChannelNumber {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 8px;
|
|
background-color: transparent;
|
|
line-height: 1;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
/* Hover — white circle, black number */
|
|
.guide-channelHeaderCell.itemAction:hover .guideChannelNumber {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
/* Click — red circle */
|
|
.guide-channelHeaderCell.itemAction:focus .guideChannelNumber {
|
|
background-color: #e50914;
|
|
color: #fff;
|
|
}
|
|
|
|
.guide-channelHeaderCell:focus, .programCell:focus {
|
|
background-color: transparent !important;
|
|
} |