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

New: Styled the focus states of checkboxes, particularly noticeable in TV layout

Browse Source 
New: Styled the checkbox colors and outlines by taking cues from Jellyseerr
dev: Reorganised the file to place similar code blocks together and to avoid code repetition in some areas
This commit is contained in:
lscambo13
2024-12-24 08:42:51 -08:00
parent c8ed881184
commit 44b04a5392
1 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,9 +17,11 @@
--btnSubmitColor: rgb(61, 54, 178); --btnSubmitColor: rgb(61, 54, 178);
--btnSubmitBorderColor: rgb(117 111 226); --btnSubmitBorderColor: rgb(117 111 226);
--checkboxCheckedBgColor: rgb(79, 70, 229); --checkboxCheckedBgColor: rgb(79, 70, 229);
--checkboxUncheckedFocusedBorderColor: rgb(37, 99, 235);
--textColor: rgb(209, 213, 219); --textColor: rgb(209, 213, 219);
--dimTextColor: rgb(156, 163, 175); --dimTextColor: rgb(156, 163, 175);
--activeColor: rgb(201 143 255 / 40%); --activeColor: rgb(201 143 255 / 40%);
--tableBodyColor: rgb(31 41 55 / 1);
--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%);
--hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%); --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%);
@@ -28,7 +30,6 @@
--smallRadius: .5em; --smallRadius: .5em;
--smallerRadius: .375em; --smallerRadius: .375em;
--borderWidth: 0.075em; --borderWidth: 0.075em;
--tableBodyColor: rgb(31 41 55 / 1);
} }
html { html {
@@ -683,6 +684,33 @@ html {
height: 100%; height: 100%;
} }
.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon {
font-size: .9em;
font-weight: 900;
}
.checkboxOutline:not(.multiSelectCheckboxOutline) {
border: solid gray var(--borderWidth);
background-color: white;
}
.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) {
box-shadow: none;
background: var(--checkboxCheckedBgColor);
border: var(--lighterBorderColor) solid var(--borderWidth);
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: var(--checkboxUncheckedFocusedBorderColor) !important;
outline: var(--borderWidth) solid gray;
outline-offset: calc(-2.5*var(--borderWidth));
}
.emby-checkbox:focus+span+.checkboxOutline {
border-color: white !important;
outline: var(--borderWidth) solid var(--checkboxUncheckedFocusedBorderColor);
}
.cardIndicators { .cardIndicators {
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
@@ -989,6 +1017,11 @@ div[data-role=controlgroup] a.ui-btn-active {
padding-inline: .5em; padding-inline: .5em;
} }
.sectionTitleTextButton:hover {
background: transparent !important;
color: white !important;
}
.sectionTitleTextButton>* { .sectionTitleTextButton>* {
padding: .3em 0 !important; padding: .3em 0 !important;
margin: 0 0 !important; margin: 0 0 !important;
@@ -1003,7 +1036,7 @@ div[data-role=controlgroup] a.ui-btn-active {
.sectionTitleTextButton>.material-icons::before { .sectionTitleTextButton>.material-icons::before {
border: solid var(--borderWidth); border: solid var(--borderWidth);
border-radius: var(--largeRadius); border-radius: var(--largeRadius);
font-size: .85em; font-size: 1em;
line-height: unset; line-height: unset;
font-weight: 600; font-weight: 600;
margin-inline-start: .5em; margin-inline-start: .5em;
@@ -1119,34 +1152,11 @@ div[data-role=controlgroup] a.ui-btn-active {
font-size: 1.5em; font-size: 1.5em;
} }
.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon {
font-size: 1em;
}
.checkboxOutline:not(.multiSelectCheckboxOutline) {
border-width: var(--borderWidth);
}
.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) {
box-shadow: none;
background: var(--selectorBackgroundColor);
border: var(--lighterBorderColor) solid var(--borderWidth);
}
fieldset { fieldset {
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
border-color: var(--borderColor) solid var(--borderWidth); border-color: var(--borderColor) solid var(--borderWidth);
} }
.sectionTitleTextButton>.material-icons::before {
font-size: 1em;
}
.sectionTitleTextButton:hover {
background: transparent !important;
color: white !important;
}
#serverActivityPage .MuiPaper-elevation2 { #serverActivityPage .MuiPaper-elevation2 {
border: solid var(--borderColor) var(--borderWidth) !important; border: solid var(--borderColor) var(--borderWidth) !important;
box-shadow: unset !important; box-shadow: unset !important;