boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-18 12:40:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

dev: Reworked how floating mini buttons are styled, making their color easier to customise using a variable

Browse Source
This commit is contained in:
lscambo13
2025-01-28 13:48:34 -08:00
parent 0497fbdf0e
commit 2c070e21df
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,6 +37,9 @@
--activeColor: rgb(119, 91, 244); --activeColor: rgb(119, 91, 244);
--tableBodyColor: rgb(31 41 55 / 1); --tableBodyColor: rgb(31 41 55 / 1);
--uiAccentColor: rgb(117 111 226); --uiAccentColor: rgb(117 111 226);
/* --btnPlayColor: rgb(41 154 93); */
--btnPlayColor: rgb(32, 32, 32);
--btnPlayBorderColor: color-mix(in srgb, var(--btnPlayColor), rgb(255, 255, 255) 5%);
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint)); --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
--cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%); --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
--hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%); --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
@@ -246,17 +249,18 @@ html {
} }
.cardOverlayContainer>.cardOverlayFab-primary, .cardOverlayContainer>.cardOverlayFab-primary,
.listItemImageButton { .listItemImageButton,
background-color: rgba(0, 0, 0, 0.9); .layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
color: var(--textColor); background-color: var(--btnPlayColor) !important;
border: var(--defaultBorder); color: white;
border: var(--defaultLighterBorder);
border-color: var(--btnPlayBorderColor);
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; color: white;
color: unset;
} }
.layout-desktop .cardOverlayButton-br { .layout-desktop .cardOverlayButton-br {
@@ -267,12 +271,6 @@ html {
padding: .425em; padding: .425em;
} }
.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
border: var(--defaultLighterBorder);
border-color: rgba(23, 23, 23, 0.6);
backdrop-filter: var(--blurSmallest);
}
.layout-mobile .portraitCard .cardOverlayButton-br, .layout-mobile .portraitCard .cardOverlayButton-br,
.layout-mobile .backdropCard .cardOverlayButton-br, .layout-mobile .backdropCard .cardOverlayButton-br,
.layout-mobile .cardOverlayButton-br[data-action="menu"] { .layout-mobile .cardOverlayButton-br[data-action="menu"] {
@@ -1689,11 +1687,15 @@ 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) { .paper-icon-button-light:hover:not(:disabled, .cardOverlayButton) {
color: #fff; color: #fff;
background-color: rgb(255 255 255 / 5%); background-color: rgb(255 255 255 / 5%);
} }
.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
background-color: rgba(255, 255, 255, 0.125);
}
.emby-select-withcolor:hover:not(.emby-select[disabled], :focus), .emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
.emby-input:hover:not(:focus), .emby-input:hover:not(:focus),
.emby-textarea:hover:not(:focus) { .emby-textarea:hover:not(:focus) {