New: Brought back three-dot menu on cards on phones

This should allow users to remove items from collections on phones
New: Made the floating mini play button slightly smaller
Fix: card overy button hover effects were not styled on desktops
This commit is contained in:
lscambo13
2025-05-28 09:06:25 -07:00
parent 36ca07cc2d
commit 7fdda3433c

View File

@@ -343,15 +343,29 @@ html {
.layout-mobile .cardOverlayButton { .layout-mobile .cardOverlayButton {
padding: 1em; padding: 1em;
font-size: 75%; font-size: 60%;
} }
.layout-mobile .portraitCard .cardOverlayButton-br, .layout-mobile .cardOverlayButton-br,
.layout-mobile .backdropCard .cardOverlayButton-br, [dir=ltr] .layout-mobile .cardOverlayButton-br {
.layout-mobile .cardOverlayButton-br[data-action="menu"] { /* left: .5em; */
bottom: .5em;
right: .5em;
}
.layout-mobile .portraitCard .cardOverlayButton-br:not([data-action="menu"]),
.layout-mobile .backdropCard .cardOverlayButton-br:not([data-action="menu"]) {
display: none; display: none;
} }
.layout-mobile .cardOverlayButton-br[data-action="menu"]>.cardOverlayButtonIcon {
background-color: transparent !important;
color: white;
border: none;
text-shadow: 1px 1px .1em black;
color: white;
}
.cardOverlayContainer:has(.cardOverlayButton:hover) { .cardOverlayContainer:has(.cardOverlayButton:hover) {
backdrop-filter: var(--blurDefault); backdrop-filter: var(--blurDefault);
} }
@@ -992,7 +1006,7 @@ html {
} }
.layout-mobile .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) { .layout-mobile .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
width: calc(100% - 2.5em); width: calc(100% - 2em);
} }
.layout-mobile .backdropCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress), .layout-mobile .backdropCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress),
@@ -1325,6 +1339,7 @@ progress+span {
width: auto; width: auto;
width: -webkit-fill-available; width: -webkit-fill-available;
padding: 5em 2em 2em 2em; padding: 5em 2em 2em 2em;
/* place-items: end; */
} }
.chapterCardImageContainer { .chapterCardImageContainer {
@@ -2222,7 +2237,7 @@ div[data-role=controlgroup] a.ui-btn-active {
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled, .cardOverlayButton) { .paper-icon-button-light:hover:not(:disabled) {
color: #fff; color: #fff;
background-color: rgb(255 255 255 / 5%); background-color: rgb(255 255 255 / 5%);
} }