diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 4b3ab62..1ec2ab1 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -44,10 +44,12 @@ --smallRadius: .5em; --smallerRadius: .375em; --borderWidth: 0.075em; + --defaultBorder: var(--borderWidth) solid var(--borderColor); + --defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor); /* login page customizations */ --loginPageBgUrl: url(""); - --loginPageText: "Sign in to continue"; + --loginPageText: "Sign in to continue"; } html { @@ -80,6 +82,18 @@ html { 'opsz' 24 } +.material-icons.info_outline:before { + font-family: Material Icons; +} + +::selection { + background: var(--activeColorAlpha); +} + +.cardImageIcon { + color: var(--borderColor); +} + .dashboardFooter { font-family: Noto Sans; transition: transform 50ms; @@ -125,7 +139,7 @@ html { .fullSyncIndicator, .mediaSourceIndicator { background: rgb(31, 80, 189); - border: var(--lighterBorderColor) solid var(--borderWidth); + border: var(--defaultLighterBorder); } .cardScalable { @@ -136,13 +150,25 @@ html { } .layout-mobile .cardScalable { - border: var(--borderColor) solid var(--borderWidth) !important; + border: var(--defaultBorder) !important; } .cardImageContainer { transition: transform .375s; } +.cardImageContainer>.cardDefaultText { + font-size: 2em; + padding-top: 1.5em; + color: transparent; + white-space: pre; +} + +.cardImageContainer>.cardDefaultText::before { + content: "?\A"; + color: var(--borderColor); +} + .card.card-hoverable:hover .cardScalable { border-color: var(--textColor) !important; } @@ -198,13 +224,14 @@ html { .listItemImageButton { background-color: rgba(0, 0, 0, 0.9); color: var(--textColor); - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); font-size: 75%; } .cardOverlayContainer>.cardOverlayFab-primary:hover, .listItemImageButton:hover { background-color: rgba(0, 0, 0, 0.75) !important; + color: unset; } .layout-desktop .cardOverlayButton-br { @@ -216,7 +243,7 @@ html { } .layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon { - border: solid var(--lighterBorderColor) var(--borderWidth); + border: var(--defaultLighterBorder); } .layout-mobile .portraitCard .cardOverlayButton-br, @@ -231,8 +258,7 @@ html { .listViewUserDataButtons { flex-direction: column; - padding-inline-end: .75em; - padding-inline-start: 1em; + font-size: x-small; } .smallBackdropCard, @@ -411,6 +437,10 @@ html { padding-top: 1.25em !important; } +.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { + text-align: left; +} + .emby-scrollbuttons-button.paper-icon-button-light>.material-icons { font-size: 1.5em; place-content: center; @@ -433,7 +463,7 @@ html { padding-block-start: .4em; font-weight: 600; background: transparent !important; - border: solid var(--borderWidth) var(--borderColor); + border: var(--defaultBorder); } .layout-desktop .detailRibbon { @@ -493,6 +523,11 @@ html { padding-top: 35vh; margin-top: -47vh; } + + [data-type=Movie] .listItemImage, + [data-type=Series] .listItemImage { + display: unset; + } } @media (orientation: landscape) and (max-height: 40em) { @@ -624,7 +659,7 @@ html { progress, ::-webkit-progress-bar { background: var(--darkerGradientPoint) !important; - border: solid var(--borderColor) var(--borderWidth) !important; + border: var(--defaultBorder) !important; border-radius: var(--smallRadius); overflow: hidden; } @@ -657,7 +692,7 @@ progress+span { .detailButton { border-radius: var(--smallRadius); - border: solid var(--lighterBorderColor) var(--borderWidth); + border: var(--defaultLighterBorder); padding: .5em .5em !important; margin: 0.125em !important; backdrop-filter: blur(.1em); @@ -665,7 +700,7 @@ progress+span { .btnPlay.detailButton { background-color: rgba(255, 255, 255, 0.05); - border: solid var(--lighterBorderColor) var(--borderWidth); + border: var(--defaultLighterBorder); } .btnPlay>.detailButton-content { @@ -691,7 +726,7 @@ progress+span { .mainDrawer, .drawer-open { background-color: var(--drawerColor); - border-right: solid var(--borderColor) var(--borderWidth); + border-right: var(--defaultBorder); backdrop-filter: blur(8px); } @@ -722,20 +757,20 @@ progress+span { outline: none; overflow: hidden; margin-top: 1.5em; - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); border-radius: var(--smallRadius); } @supports(display:revert) { .itemDetailsGroup { - outline: var(--borderWidth) solid var(--borderColor); + outline: var(--defaultBorder); outline-offset: calc(-1*var(--borderWidth)); border: none; } } .itemDetailsGroup>div:not(:last-child) { - border-bottom: solid var(--borderColor) var(--borderWidth); + border-bottom: var(--defaultBorder); } .detailsGroupItem { @@ -805,7 +840,7 @@ progress+span { backdrop-filter: blur(5px); background-color: var(--drawerColor); border-radius: var(--largeRadius) !important; - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); min-width: 11em; } @@ -844,7 +879,7 @@ progress+span { .selectionCommandsPanel { background: var(--lighterGradientPoint); - border-bottom: solid var(--borderColor) var(--borderWidth); + border-bottom: var(--defaultBorder); backdrop-filter: blur(10px); } @@ -932,7 +967,7 @@ div[data-isfolder="true"] .cardText-first+.itemSelectionPanel>.checkboxContainer .emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) { box-shadow: none; background: var(--checkboxCheckedBgColor); - border: var(--lighterBorderColor) solid var(--borderWidth); + border: var(--defaultLighterBorder); } .emby-checkbox:focus:not(:checked)+span+.checkboxOutline { @@ -987,14 +1022,14 @@ div[data-isfolder="true"] .cardText-first+.itemSelectionPanel>.checkboxContainer .playedIndicator { background: rgb(34, 197, 94); - border: var(--lighterBorderColor) solid var(--borderWidth); + border: var(--defaultLighterBorder); } -.videoIndicator{ - background: rgb(142 70 45); +.videoIndicator { + background: rgb(121 65 5); padding: .5em; transform: scale(.85); - border: var(--lighterBorderColor) solid var(--borderWidth); + border: var(--defaultLighterBorder); } .defaultCardBackground, @@ -1002,8 +1037,11 @@ div[data-isfolder="true"] .cardText-first+.itemSelectionPanel>.checkboxContainer background: var(--cardBackgroundGradient); } -.listItemImage { - border-radius: var(--smallRadius); +.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground { + filter: contrast(0.85); + background-size: cover !important; + background-position: 50% !important; + background-blend-mode: multiply; } .emby-button.block, @@ -1014,7 +1052,7 @@ div[data-isfolder="true"] .cardText-first+.itemSelectionPanel>.checkboxContainer color: #fff; border-radius: var(--smallRadius); background: var(--lighterGradientPoint); - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); } .btnBrowse>.folder { @@ -1024,7 +1062,7 @@ div[data-isfolder="true"] .cardText-first+.itemSelectionPanel>.checkboxContainer .fab { color: #fff; background: var(--lighterGradientPoint); - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); } .fab:focus { @@ -1076,7 +1114,7 @@ div[data-role=controlgroup] a.ui-btn-active { .paperList { background-color: var(--headerColor) !important; border-radius: var(--largeRadius) !important; - border: solid var(--borderColor) var(--borderWidth) !important; + border: var(--defaultBorder) !important; box-shadow: unset !important; } @@ -1107,7 +1145,7 @@ div[data-role=controlgroup] a.ui-btn-active { .listItemIcon.person:not(.listItemIcon-transparent), .listItemIcon.live_tv:not(.listItemIcon-transparent) { background-color: rgb(41, 49, 83) !important; - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); } @@ -1118,43 +1156,61 @@ div[data-role=controlgroup] a.ui-btn-active { .MuiAppBar-root { background: var(--headerColor); backdrop-filter: blur(5px); - border-bottom: solid var(--borderColor) var(--borderWidth); + border-bottom: var(--defaultBorder); } .MuiDrawer-paper { background: var(--drawerColor); backdrop-filter: blur(5px); - border-right: solid var(--borderColor) var(--borderWidth); + border-right: var(--defaultBorder); } .MuiDrawer-paper:first-child { margin-block-start: .25em; } -[dir=ltr] .navMenuOption { - padding: .75em 1em !important; +.listItemImage { + border-radius: var(--smallRadius); + margin-right: .75em !important; + border: var(--defaultBorder); } [dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) { - padding: 0.25em 0.25em 0.25em 1.5em !important; + padding: 0.375em !important; + /* background-color: #ffffff12; */ + margin-bottom: .5em; + /* box-shadow: var(--shadow); */ } [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] { - padding: .5em 0.25em 0.5em 0.5em !important; + padding: .375em; + margin-bottom: .5em; } -.actionSheetContent { - padding: .4em !important; +.listItemBody { + padding: 0; } -.navMenuOption { - border-radius: var(--smallRadius) !important; - margin: .5em 1em !important; +.listItemBody>.listItemBodyText:not(.secondary) { + font-size: 1.125em; + font-weight: 600; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + color: var(--textColor); } -.navMenuOption-selected { - background-color: var(--activeColor) !important; - border: solid var(--lighterBorderColor) var(--borderWidth); +.listItem-overview { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.listItem-bottomoverview { + margin-top: .75em; + margin-bottom: 0em; } .listItem, @@ -1173,6 +1229,14 @@ div[data-role=controlgroup] a.ui-btn-active { background: rgba(255, 255, 255, 0.125); } +.listItem-border { + border-color: transparent !important; +} + +.listItem-border.emby-button.show-focus:focus { + border-radius: var(--smallRadius); +} + .MuiListItem-root>a, .MuiList-root>a, .MuiListItem-root>div { @@ -1184,7 +1248,25 @@ div[data-role=controlgroup] a.ui-btn-active { .Mui-selected { background-color: var(--activeColor) !important; - border: solid var(--lighterBorderColor) var(--borderWidth) !important; + border: var(--defaultLighterBorder) !important; +} + +.actionSheetContent { + padding: .4em !important; +} + +.navMenuOption { + border-radius: var(--smallRadius) !important; + margin: .5em 1em !important; +} + +[dir=ltr] .navMenuOption { + padding: .75em 1em !important; +} + +.navMenuOption-selected { + background-color: var(--activeColor) !important; + border: var(--defaultLighterBorder); } .detailSection { @@ -1228,18 +1310,10 @@ div[data-role=controlgroup] a.ui-btn-active { .sliderBubble { border-radius: var(--largeRadius); - border: solid var(--borderWidth) var(--borderColor); + border: var(--defaultBorder); overflow: hidden; } -.listItem-border { - border-color: transparent !important; -} - -.listItem-border.emby-button.show-focus:focus { - border-radius: var(--smallRadius); -} - .alphaPickerButton { font-family: monospace; margin: .15em; @@ -1282,13 +1356,13 @@ div[data-role=controlgroup] a.ui-btn-active { width: 2em; height: 2em; margin-inline-end: 1em; - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); } .MuiAvatar-circular { width: 1.5em; height: 1.5em; - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); } .dashboardDocument .content-primary { @@ -1361,7 +1435,7 @@ div[data-role=controlgroup] a.ui-btn-active { .toast, .upNextContainer { background: var(--headerColor) !important; - border: solid var(--borderWidth) var(--borderColor) !important; + border: var(--defaultBorder) !important; backdrop-filter: blur(1em); } @@ -1435,7 +1509,7 @@ div[data-role=controlgroup] a.ui-btn-active { background-color: rgb(255 255 255 / 5%); } -.emby-textarea{ +.emby-textarea { font-family: consolas; } @@ -1444,7 +1518,7 @@ div[data-role=controlgroup] a.ui-btn-active { .emby-input, .emby-textarea { background-color: var(--selectorBackgroundColor); - border: var(--lighterBorderColor) solid var(--borderWidth); + border: var(--defaultLighterBorder); border-radius: var(--smallRadius); padding: .5em !important; } @@ -1510,11 +1584,11 @@ div[data-role=controlgroup] a.ui-btn-active { padding-bottom: 2%; } -.infoWrapper h1.itemName{ +.infoWrapper h1.itemName { font-size: xx-large; } -.layout-mobile .infoWrapper h1.itemName{ +.layout-mobile .infoWrapper h1.itemName { font-size: x-large; } @@ -1532,7 +1606,7 @@ div[data-role=controlgroup] a.ui-btn-active { .emby-select-iconbutton { background-color: var(--selectorBackgroundColor); - border: var(--lighterBorderColor) solid var(--borderWidth); + border: var(--defaultLighterBorder); border-radius: var(--smallRadius); margin-inline-start: 1em; } @@ -1594,7 +1668,7 @@ div[data-role=controlgroup] a.ui-btn-active { place-content: center; background-color: var(--headerColor) !important; border-radius: var(--largeRadius) !important; - border: solid var(--borderColor) var(--borderWidth) !important; + border: var(--defaultBorder) !important; } .sliderBubbleText { @@ -1603,11 +1677,11 @@ div[data-role=controlgroup] a.ui-btn-active { fieldset { border-radius: var(--smallRadius); - border: solid var(--borderColor) var(--borderWidth); + border: var(--defaultBorder); } #serverActivityPage .MuiPaper-elevation2 { - border: solid var(--borderColor) var(--borderWidth) !important; + border: var(--defaultBorder) !important; box-shadow: unset !important; background-color: var(--tableBodyColor); } @@ -1757,10 +1831,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { background: var(--activeColor); } -.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { - text-align: left; -} - .card-withuserdata[data-isfolder="true"] .cardPadder-overflowBackdrop { padding-bottom: 50%; } @@ -1775,23 +1845,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { text-align: center; } -/* .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before, */ -.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardText-first, -.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardText.cardTextCentered{ +.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"]) .cardText-first, +.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"]) .cardText.cardTextCentered { display: none; } -.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageContainer .material-icons:not(.indicatorIcon):before { - opacity: .1; -} - -.padded-right-withalphapicker .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) { +.padded-right-withalphapicker .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"]) { margin-bottom: -1.5em; -} - -.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground { - filter: contrast(0.85); - background-size: cover !important; - background-position: 50% !important; - background-blend-mode: multiply; } \ No newline at end of file