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

dev: Control border width using variables

Browse Source
This commit is contained in:
lscambo13
2024-12-18 08:36:56 -08:00
parent 84fb11ff79
commit 9b5000ec26
1 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@
--largeRadius: 1em; --largeRadius: 1em;
--smallRadius: .5em; --smallRadius: .5em;
--smallerRadius: .375em; --smallerRadius: .375em;
--borderWidth: 0.1em;
} }
html { html {
@@ -43,8 +44,8 @@ html {
.card:focus .cardBox:not(.visualCardBox) .cardScalable { .card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-radius: var(--largerRadius) !important; border-radius: var(--largerRadius) !important;
border: solid rgba(0, 0, 0, 1) .1em !important; border: solid rgba(0, 0, 0, 1) var(--borderWidth) !important;
outline: .1em rgba(255, 255, 255, 1) solid; outline: var(--borderWidth) rgba(255, 255, 255, 1) solid;
transition: border .1s; transition: border .1s;
filter: brightness(1.125); filter: brightness(1.125);
} }
@@ -52,7 +53,7 @@ html {
.emby-button.show-focus:focus { .emby-button.show-focus:focus {
background: #2f3a53; background: #2f3a53;
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
outline: .1em rgb(255 255 255) solid !important; outline: var(--borderWidth) rgb(255 255 255) solid !important;
outline-offset: -.1em; outline-offset: -.1em;
color: #fff; color: #fff;
transition: outline 0s, border 0s; transition: outline 0s, border 0s;
@@ -78,17 +79,17 @@ html {
.fullSyncIndicator, .fullSyncIndicator,
.mediaSourceIndicator { .mediaSourceIndicator {
background: rgb(31, 80, 189); background: rgb(31, 80, 189);
border: var(--lighterBorderColor) solid 1px; border: var(--lighterBorderColor) solid var(--borderWidth);
} }
.playedIndicator { .playedIndicator {
background: rgb(34, 197, 94); background: rgb(34, 197, 94);
border: var(--lighterBorderColor) solid 1px; border: var(--lighterBorderColor) solid var(--borderWidth);
} }
.cardScalable { .cardScalable {
border-radius: var(--largeRadius); border-radius: var(--largeRadius);
border: var(--borderColor) solid 1px !important; border: var(--borderColor) solid var(--borderWidth) !important;
overflow: hidden !important; overflow: hidden !important;
transition: 125ms transform; transition: 125ms transform;
} }
@@ -99,7 +100,7 @@ html {
.cardOverlayContainer { .cardOverlayContainer {
border-radius: var(--largeRadius) !important; border-radius: var(--largeRadius) !important;
border: solid rgb(255 255 255 / 65%) .1em; border: solid rgb(255 255 255 / 65%) var(--borderWidth);
mix-blend-mode: plus-lighter; mix-blend-mode: plus-lighter;
background: var(--hoverGradient); background: var(--hoverGradient);
} }
@@ -213,7 +214,7 @@ h1 {
padding-block-start: .4em; padding-block-start: .4em;
font-weight: 600; font-weight: 600;
background: transparent !important; background: transparent !important;
border: solid 1px var(--borderColor); border: solid var(--borderWidth) var(--borderColor);
} }
@media (orientation: portrait) and (max-width: 40em) { @media (orientation: portrait) and (max-width: 40em) {
@@ -281,7 +282,7 @@ html {
.skinHeader:not(.osdHeader) { .skinHeader:not(.osdHeader) {
border-style: solid; border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 var(--borderWidth) 0;
border-color: var(--borderColor); border-color: var(--borderColor);
transition: all .375s ease-in-out; transition: all .375s ease-in-out;
} }
@@ -311,14 +312,14 @@ html {
.emby-input, .emby-input,
.emby-textarea { .emby-textarea {
background-color: var(--selectorBackgroundColor); background-color: var(--selectorBackgroundColor);
border: var(--lighterBorderColor) solid 1px; border: var(--lighterBorderColor) solid var(--borderWidth);
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
padding: .5em !important; padding: .5em !important;
} }
.btnPlay { .btnPlay {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
border: solid var(--lighterBorderColor) 1px; border: solid var(--lighterBorderColor) var(--borderWidth);
} }
.inputContainer .emby-input-iconbutton { .inputContainer .emby-input-iconbutton {
@@ -381,13 +382,13 @@ html {
.mainDrawer, .mainDrawer,
.drawer-open { .drawer-open {
background-color: var(--drawerColor); background-color: var(--drawerColor);
border-right: solid var(--borderColor) 1px; border-right: solid var(--borderColor) var(--borderWidth);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
.detailButton { .detailButton {
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
border: solid var(--lighterBorderColor) 1px; border: solid var(--lighterBorderColor) var(--borderWidth);
padding: .5em .5em !important; padding: .5em .5em !important;
margin: 0.125em !important; margin: 0.125em !important;
} }
@@ -402,17 +403,17 @@ html {
} }
.itemDetailsGroup { .itemDetailsGroup {
outline: 1px solid var(--borderColor); outline: var(--borderWidth) solid var(--borderColor);
outline-offset: -1px; outline-offset: -var(--borderWidth);
overflow: hidden; overflow: hidden;
/* border: solid var(--borderColor) 1px; */ /* border: solid var(--borderColor) var(--borderWidth); */
margin-top: 1.5em; margin-top: 1.5em;
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
/* margin: .5em 1em; */ /* margin: .5em 1em; */
} }
.itemDetailsGroup>div:not(:last-child) { .itemDetailsGroup>div:not(:last-child) {
border-bottom: solid var(--borderColor) 1px; border-bottom: solid var(--borderColor) var(--borderWidth);
} }
.detailsGroupItem { .detailsGroupItem {
@@ -455,7 +456,7 @@ html {
.chapterThumbTextContainer { .chapterThumbTextContainer {
background: transparent; background: transparent;
font-weight: 500; font-weight: 500;
text-shadow: 1px 1px 0px black; text-shadow: .1em .1em 0px black;
padding: 1em; padding: 1em;
width: auto; width: auto;
} }
@@ -472,7 +473,7 @@ html {
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) 1px; border: solid var(--borderColor) var(--borderWidth);
} }
.dialogBackdropOpened { .dialogBackdropOpened {
@@ -490,7 +491,7 @@ html {
.selectionCommandsPanel { .selectionCommandsPanel {
background: var(--lighterGradientPoint); background: var(--lighterGradientPoint);
border-bottom: solid var(--borderColor) 1px; border-bottom: solid var(--borderColor) var(--borderWidth);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -564,7 +565,7 @@ html {
} }
.indicator { .indicator {
border: solid rgb(124 124 124 / 50%) 1px; border: solid rgb(124 124 124 / 50%) var(--borderWidth);
border-radius: 100em; border-radius: 100em;
} }
@@ -585,13 +586,13 @@ html {
color: #fff; color: #fff;
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
background: var(--lighterGradientPoint); background: var(--lighterGradientPoint);
border: solid var(--borderColor) 1px; border: solid var(--borderColor) var(--borderWidth);
} }
.fab { .fab {
color: #fff; color: #fff;
background: var(--lighterGradientPoint); background: var(--lighterGradientPoint);
border: solid var(--borderColor) 1px; border: solid var(--borderColor) var(--borderWidth);
} }
.raised:focus { .raised:focus {
@@ -618,12 +619,12 @@ div[data-role=controlgroup] a.ui-btn-active {
#btnDeleteImage, #btnDeleteImage,
.button-delete { .button-delete {
background: rgb(169, 29, 29); background: rgb(169, 29, 29);
border: solid rgb(217, 84, 84) 1px; border: solid rgb(217, 84, 84) var(--borderWidth);
} }
.button-submit { .button-submit {
background: var(--btnSubmitColor) !important; background: var(--btnSubmitColor) !important;
border: solid var(--btnSubmitBorderColor) 1px !important; border: solid var(--btnSubmitBorderColor) var(--borderWidth) !important;
} }
.collapseContent, .collapseContent,
@@ -637,7 +638,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) 1px !important; border: solid var(--borderColor) var(--borderWidth) !important;
box-shadow: unset !important; box-shadow: unset !important;
} }
@@ -665,13 +666,13 @@ 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) 1px; border-bottom: solid var(--borderColor) var(--borderWidth);
} }
.MuiDrawer-paper { .MuiDrawer-paper {
background: var(--drawerColor); background: var(--drawerColor);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
border-right: solid var(--borderColor) 1px; border-right: solid var(--borderColor) var(--borderWidth);
} }
[dir=ltr] .navMenuOption { [dir=ltr] .navMenuOption {
@@ -699,7 +700,7 @@ div[data-role=controlgroup] a.ui-btn-active {
.navMenuOption-selected { .navMenuOption-selected {
background-color: var(--activeColor) !important; background-color: var(--activeColor) !important;
border: solid var(--lighterBorderColor) 1px; border: solid var(--lighterBorderColor) var(--borderWidth);
} }
.noBackdropTransparency .detailPageSecondaryContainer { .noBackdropTransparency .detailPageSecondaryContainer {
@@ -747,7 +748,7 @@ div[data-role=controlgroup] a.ui-btn-active {
.sliderBubble { .sliderBubble {
border-radius: var(--largeRadius); border-radius: var(--largeRadius);
border: solid 1px var(--borderColor); border: solid var(--borderWidth) var(--borderColor);
overflow: hidden; overflow: hidden;
} }
@@ -801,13 +802,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) 1px; border: solid var(--borderColor) var(--borderWidth);
} }
.MuiAvatar-circular { .MuiAvatar-circular {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
border: solid var(--borderColor) 1px; border: solid var(--borderColor) var(--borderWidth);
} }
.dashboardDocument .content-primary { .dashboardDocument .content-primary {
@@ -839,7 +840,7 @@ div[data-role=controlgroup] a.ui-btn-active {
} }
.sectionTitleTextButton>.material-icons::before { .sectionTitleTextButton>.material-icons::before {
border: solid 1px; border: solid var(--borderWidth);
border-radius: var(--largeRadius); border-radius: var(--largeRadius);
font-size: .85em; font-size: .85em;
line-height: unset; line-height: unset;
@@ -849,7 +850,7 @@ div[data-role=controlgroup] a.ui-btn-active {
.toast { .toast {
background: var(--headerColor); background: var(--headerColor);
border: solid 1px var(--borderColor); border: solid var(--borderWidth) var(--borderColor);
border-radius: var(--smallRadius); border-radius: var(--smallRadius);
backdrop-filter: blur(1em); backdrop-filter: blur(1em);
} }