boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-22 17:49:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

New: Revamped the list views completely

Browse Source 
New: Enabled showing list images in lists on smaller screens; our new list style allows it
New: Reduced brightness on icons in cards
Fix: Info Outline icon was not displaying
Fix: Some cards without images had an abnormally video title; I've replaced it with '?'
Fix: Mini play button on episode thumnails had a blue tint on hover
dev: reorganised code
dev: put used often repeated border into a variable
This commit is contained in:
lscambo13
2025-01-20 09:40:49 -08:00
parent e0a01acb6c
commit 6f02cab725
1 changed files with 140 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
Theme/ElegantFin-theme-nightly.css
View File

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