mirror of
https://github.com/lscambo13/ElegantFin.git
synced 2025-09-22 17:49:34 +00:00
Compare commits
57 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
cfd2811bb5 | ||
|
ea4fe17e61 | ||
|
039eb70ae6 | ||
|
ba38dc5d4d | ||
|
0bf21ae4a0 | ||
|
f7843b9cb5 | ||
|
d763c5d8f2 | ||
|
90344ea57e | ||
|
1c7c9236aa | ||
|
8277988cb6 | ||
|
341e8bc381 | ||
|
8eccecfceb | ||
|
646dae0b7b | ||
|
41468099fc | ||
|
5245f3a8e5 | ||
|
11a19d4689 | ||
|
379062d92d | ||
|
03a0246173 | ||
|
8ffa28de7e | ||
|
8ac698929b | ||
|
e883ebde72 | ||
|
130ad3a35b | ||
|
005264f1a4 | ||
|
651ceacb48 | ||
|
165cf7634a | ||
|
80e01f6494 | ||
|
022552d620 | ||
|
5347a360b9 | ||
|
37b67dead1 | ||
|
e17e918e09 | ||
|
841393f1bd | ||
|
02dae71880 | ||
|
17cf180851 | ||
|
f9fe918fda | ||
|
ba6f376173 | ||
|
23ad03be9f | ||
|
32f877bed6 | ||
|
7ec5c4a35e | ||
|
33f9b007f6 | ||
|
d8e026e227 | ||
|
b47314e482 | ||
|
44b04a5392 | ||
|
c8ed881184 | ||
|
80fd3026ed | ||
|
fa2dcc9cab | ||
|
93ca788eea | ||
|
a175b1e738 | ||
|
e7ff77eaf3 | ||
|
944eb4e461 | ||
|
00df125088 | ||
|
86043467de | ||
|
c3108fab74 | ||
|
d30ab165fe | ||
|
8b0a341c52 | ||
|
20ec8f131d | ||
|
8b60a8d3c4 | ||
|
7ff5766cee |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/tmp.txt
|
File diff suppressed because one or more lines are too long
@@ -5,19 +5,28 @@
|
||||
|
||||
:root {
|
||||
--darkerGradientPoint: #111827;
|
||||
--darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
|
||||
--lighterGradientPoint: #1d2635;
|
||||
--borderColor: rgb(71, 80, 92);
|
||||
--headerColor: rgba(30, 40, 54, 0.8);
|
||||
--drawerColor: rgba(30, 40, 54, 0.9);
|
||||
--lighterBorderColor: rgb(255 255 255 / 20%);
|
||||
--selectorBackgroundColor: rgb(55, 65, 81);
|
||||
--btnDeleteColor: rgb(169, 29, 29);
|
||||
--btnDeleteBorderColor: rgb(217, 84, 84);
|
||||
--btnSubmitColor: rgb(61, 54, 178);
|
||||
--btnSubmitBorderColor: rgb(117 111 226);
|
||||
--checkboxCheckedBgColor: rgb(79, 70, 229);
|
||||
--highlightOutlineColor: rgb(37, 99, 235);
|
||||
--textColor: rgb(209, 213, 219);
|
||||
--dimTextColor: rgb(156, 163, 175);
|
||||
--activeColorAlpha: rgb(201 143 255 / 40%);
|
||||
--activeColor: rgb(119 82 153);
|
||||
--tableBodyColor: rgb(31 41 55 / 1);
|
||||
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
|
||||
--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%);
|
||||
--activeColor: rgb(201 143 255 / 40%);
|
||||
--hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
|
||||
--hoverGradientB: radial-gradient(100% 250% at 90% 190%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.33) 100%);
|
||||
--largerRadius: 1.25em;
|
||||
--largeRadius: 1em;
|
||||
--smallRadius: .5em;
|
||||
@@ -58,7 +67,6 @@ html {
|
||||
.emby-button.show-focus:focus,
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
background: #2f3a53;
|
||||
/* border-radius: var(--smallRadius); */
|
||||
outline: var(--borderWidth) rgb(255 255 255) solid !important;
|
||||
outline-offset: calc(-1*var(--borderWidth));
|
||||
color: #fff;
|
||||
@@ -95,32 +103,102 @@ html {
|
||||
|
||||
.cardScalable {
|
||||
border-radius: var(--largeRadius);
|
||||
border: var(--borderColor) solid var(--borderWidth) !important;
|
||||
border: var(--borderColor) solid calc(2 * var(--borderWidth)) !important;
|
||||
overflow: hidden !important;
|
||||
transition: 125ms transform;
|
||||
/* box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); */
|
||||
}
|
||||
|
||||
.layout-mobile .cardScalable {
|
||||
border: var(--borderColor) solid var(--borderWidth) !important;
|
||||
}
|
||||
|
||||
.cardImageContainer {
|
||||
border-radius: var(--largeRadius) !important
|
||||
transition: transform .375s;
|
||||
}
|
||||
|
||||
.card.card-hoverable:hover .cardScalable {
|
||||
border-color: var(--textColor) !important;
|
||||
}
|
||||
|
||||
.card.card-hoverable:hover .cardImageContainer {
|
||||
transform: scale(1.025);
|
||||
}
|
||||
|
||||
.card.card-hoverable:hover .itemSelectionPanel {
|
||||
transform: scale(1.025);
|
||||
}
|
||||
|
||||
.cardOverlayContainer {
|
||||
border-radius: var(--largeRadius) !important;
|
||||
border: solid rgb(255 255 255 / 65%) var(--borderWidth);
|
||||
mix-blend-mode: plus-lighter;
|
||||
background: var(--hoverGradient);
|
||||
transition: .25s;
|
||||
background: var(--hoverGradientA);
|
||||
background-size: 200%;
|
||||
background-position-x: 100%;
|
||||
}
|
||||
|
||||
.layout-desktop .card.card-hoverable:hover .cardOverlayContainer {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
|
||||
.cardBox:not(.visualCardBox) .cardPadder {
|
||||
background-color: var(--lighterGradientPoint);
|
||||
border-radius: var(--largeRadius);
|
||||
}
|
||||
|
||||
.cardOverlayContainer>.cardOverlayFab-primary {
|
||||
left: unset;
|
||||
margin-left: unset;
|
||||
margin-top: unset;
|
||||
top: unset;
|
||||
right: 1.25em;
|
||||
bottom: 1.25em;
|
||||
}
|
||||
|
||||
.cardOverlayContainer>.cardOverlayFab-primary,
|
||||
.listItemImageButton {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: var(--textColor);
|
||||
border: solid var(--borderColor) var(--borderWidth);
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.cardOverlayContainer>.cardOverlayFab-primary:hover,
|
||||
.listItemImageButton:hover {
|
||||
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
.layout-desktop .cardOverlayButton-br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-mobile .portraitCard .cardOverlayButton-br,
|
||||
.layout-mobile .backdropCard .cardOverlayButton-br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cardOverlayContainer:has(.cardOverlayButton:hover) {
|
||||
backdrop-filter: blur(.25em);
|
||||
}
|
||||
|
||||
.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.card.card-hoverable:hover .cardScalable {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.listViewUserDataButtons {
|
||||
flex-direction: column;
|
||||
padding-inline-end: .75em;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
.smallBackdropCard,
|
||||
.squareCard,
|
||||
.backdropCard,
|
||||
.bannerCard {
|
||||
width: 46%;
|
||||
max-width: 18em;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25em) {
|
||||
|
||||
@@ -149,13 +227,13 @@ html {
|
||||
|
||||
@media (min-width: 25em) {
|
||||
.backdropCard {
|
||||
width: 49%;
|
||||
width: 46%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48.125em) {
|
||||
.backdropCard {
|
||||
width: 32%;
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -167,6 +245,20 @@ h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.detailPageWrapperContainer {
|
||||
padding-top: unset;
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPageWrapperContainer {
|
||||
background: var(--darkerGradientPointAlpha);
|
||||
}
|
||||
|
||||
.layout-desktop .detailPageWrapperContainer {
|
||||
background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent);
|
||||
min-height: calc(100vh - 13em);
|
||||
}
|
||||
|
||||
.detailPagePrimaryContainer {
|
||||
align-content: space-between;
|
||||
align-items: stretch;
|
||||
@@ -174,14 +266,33 @@ h1 {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[dir=ltr] .detailPagePrimaryContent {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPagePrimaryContainer {
|
||||
background: linear-gradient(0deg, var(--darkerGradientPoint) 70%, transparent);
|
||||
}
|
||||
|
||||
.layout-desktop .detailPagePrimaryContainer {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPageSecondaryContainer {
|
||||
background-color: var(--darkerGradientPoint);
|
||||
}
|
||||
|
||||
.layout-desktop .detailPageSecondaryContainer {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
min-width: 5em;
|
||||
width: 29.5%;
|
||||
max-width: 12.9em;
|
||||
}
|
||||
|
||||
.headerHomeButton,
|
||||
.cardOverlayButton {
|
||||
.headerHomeButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -198,6 +309,10 @@ h1 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
|
||||
padding-top: 1.25em !important;
|
||||
}
|
||||
|
||||
.emby-scrollbuttons-button.paper-icon-button-light>.material-icons {
|
||||
font-size: 1.5em;
|
||||
place-content: center;
|
||||
@@ -232,22 +347,41 @@ h1 {
|
||||
top: unset !important;
|
||||
}
|
||||
|
||||
.detailPageWrapperContainer {
|
||||
padding-top: unset;
|
||||
margin-top: unset;
|
||||
background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 62.5em) {
|
||||
.layout-desktop .itemBackdrop {
|
||||
height: 7em !important;
|
||||
}
|
||||
|
||||
.layout-desktop .detailPageWrapperContainer {
|
||||
min-height: calc(100vh - 7em);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 50em) {
|
||||
.homeLibraryButton {
|
||||
width: 45% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.homeLibraryButton {
|
||||
min-width: 15%;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (min-width: 40em) {
|
||||
.layout-mobile .itemBackdrop {
|
||||
height: 40vh;
|
||||
opacity: .10;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPageWrapperContainer {
|
||||
padding-top: 35vh;
|
||||
margin-top: -47vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) and (max-width: 40em) {
|
||||
.layout-mobile .itemBackdrop {
|
||||
height: 40vh;
|
||||
opacity: .35;
|
||||
}
|
||||
|
||||
.mediaInfoOfficialRating {
|
||||
@@ -256,15 +390,22 @@ h1 {
|
||||
padding-block-start: 0.470em;
|
||||
}
|
||||
|
||||
.detailPageWrapperContainer {
|
||||
.layout-mobile .detailPageWrapperContainer {
|
||||
padding-top: 35vh;
|
||||
margin-top: -45vh;
|
||||
margin-top: -47vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 31.25em) {
|
||||
.itemBackdrop {
|
||||
height: 62vh;
|
||||
@media (orientation: landscape) and (max-height: 40em) {
|
||||
|
||||
.portraitCard {
|
||||
min-width: 2em;
|
||||
width: 8.5%;
|
||||
max-width: 6.5em;
|
||||
}
|
||||
|
||||
.backdropCard {
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -272,6 +413,11 @@ h1 {
|
||||
margin-top: 3.5em;
|
||||
}
|
||||
|
||||
.layout-tv .itemBackdrop {
|
||||
display: block;
|
||||
height: 13vh;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
@@ -285,6 +431,8 @@ h2 {
|
||||
font-size: 1.3em;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
font-style: italic;
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.nowPlayingPlaylist,
|
||||
@@ -319,16 +467,48 @@ html {
|
||||
transition: all .375s ease-in-out;
|
||||
}
|
||||
|
||||
.itemProgressBar {
|
||||
.itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
|
||||
backdrop-filter: blur(.1em);
|
||||
background-color: rgb(123 123 123 / 30%) !important;
|
||||
height: .2em;
|
||||
height: .3em;
|
||||
box-shadow: inset 0px 0px 0.01em .01em #969696;
|
||||
overflow: hidden;
|
||||
border-radius: var(--largeRadius);
|
||||
}
|
||||
|
||||
.itemProgressBarForeground {
|
||||
border-radius: var(--largeRadius);
|
||||
background-color: var(--activeColor);
|
||||
background-color: var(--btnSubmitBorderColor);
|
||||
}
|
||||
|
||||
.backgroundProgress>div {
|
||||
background-color: var(--darkerGradientPoint);
|
||||
}
|
||||
|
||||
.playbackProgress>div {
|
||||
background-color: var(--btnSubmitBorderColor);
|
||||
}
|
||||
|
||||
::-moz-progress-bar {
|
||||
background: var(--btnSubmitBorderColor) !important;
|
||||
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
|
||||
}
|
||||
|
||||
::-webkit-progress-value {
|
||||
background: var(--btnSubmitBorderColor) !important;
|
||||
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
|
||||
}
|
||||
|
||||
progress,
|
||||
::-webkit-progress-bar {
|
||||
background: var(--darkerGradientPoint) !important;
|
||||
border: solid var(--borderColor) var(--borderWidth) !important;
|
||||
border-radius: var(--smallRadius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
progress+span {
|
||||
color: var(--btnSubmitBorderColor) !important;
|
||||
}
|
||||
|
||||
.selectLabel {
|
||||
@@ -339,16 +519,6 @@ html {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.emby-select-withcolor,
|
||||
.emby-select,
|
||||
.emby-input,
|
||||
.emby-textarea {
|
||||
background-color: var(--selectorBackgroundColor);
|
||||
border: var(--lighterBorderColor) solid var(--borderWidth);
|
||||
border-radius: var(--smallRadius);
|
||||
padding: .5em !important;
|
||||
}
|
||||
|
||||
.btnPlay {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: solid var(--lighterBorderColor) var(--borderWidth);
|
||||
@@ -408,7 +578,8 @@ html {
|
||||
|
||||
.btnPlay>.detailButton-content::after {
|
||||
padding-left: .25em;
|
||||
margin-top: .1em;
|
||||
padding-right: .5em;
|
||||
place-content: center;
|
||||
content: "Play";
|
||||
}
|
||||
|
||||
@@ -419,11 +590,22 @@ html {
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.mainDrawer-scrollContainer {
|
||||
padding-bottom: 5vh;
|
||||
}
|
||||
|
||||
.detailButton {
|
||||
border-radius: var(--smallRadius);
|
||||
border: solid var(--lighterBorderColor) var(--borderWidth);
|
||||
padding: .5em .5em !important;
|
||||
margin: 0.125em !important;
|
||||
backdrop-filter: blur(.1em);
|
||||
}
|
||||
|
||||
.btnHeaderSave.button-flat {
|
||||
color: var(--btnSubmitBorderColor) !important;
|
||||
gap: 0.3em;
|
||||
border-radius: var(--smallRadius);
|
||||
}
|
||||
|
||||
.button-flat:hover {
|
||||
@@ -466,6 +648,15 @@ html {
|
||||
|
||||
.detailsGroupItem>.content {
|
||||
text-align: end;
|
||||
color: var(--dimTextColor);
|
||||
}
|
||||
|
||||
.detailsGroupItem>.label {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.itemExternalLinks {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.itemTags,
|
||||
@@ -477,6 +668,7 @@ html {
|
||||
|
||||
.detail-clamp-text {
|
||||
text-align: start;
|
||||
color: var(--dimTextColor);
|
||||
}
|
||||
|
||||
.itemMiscInfo {
|
||||
@@ -505,13 +697,17 @@ html {
|
||||
background-color: var(--drawerColor);
|
||||
border-radius: var(--largeRadius) !important;
|
||||
border: solid var(--borderColor) var(--borderWidth);
|
||||
min-width: 15em;
|
||||
min-width: 11em;
|
||||
}
|
||||
|
||||
.dialogBackdropOpened {
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
[dir=ltr] .actionsheetMenuItemIcon.check {
|
||||
margin: 0 .45em 0 .45em !important;
|
||||
}
|
||||
|
||||
.subtitleEditor-dropZone,
|
||||
.imageEditor-dropZone {
|
||||
border-radius: var(--largeRadius);
|
||||
@@ -521,8 +717,10 @@ html {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.formDialogHeader>h1 {
|
||||
.formDialogHeaderTitle {
|
||||
margin-inline: 0 !important;
|
||||
text-align: center;
|
||||
padding: 0 0.5em !important;
|
||||
}
|
||||
|
||||
.collapseContent {
|
||||
@@ -572,26 +770,28 @@ html {
|
||||
height: calc(100% - 1.75em);
|
||||
}
|
||||
|
||||
.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
|
||||
.checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline {
|
||||
border-radius: var(--largeRadius) !important;
|
||||
}
|
||||
|
||||
.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
|
||||
border-radius: var(--largeRadius) !important;
|
||||
}
|
||||
|
||||
.cardText-secondary+.itemSelectionPanel>.checkboxContainer {
|
||||
.cardText-secondary+.itemSelectionPanel>.checkboxContainer,
|
||||
.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
|
||||
height: calc(100% - 3.125em);
|
||||
}
|
||||
|
||||
.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
|
||||
border-radius: var(--largeRadius) !important;
|
||||
.cardFooter+.itemSelectionPanel>.checkboxContainer {
|
||||
height: calc(100% - 3.75em);
|
||||
}
|
||||
|
||||
.cardScalable+.itemSelectionPanel>.checkboxContainer {
|
||||
height: calc(100% - 0em);
|
||||
}
|
||||
|
||||
.checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
|
||||
border-color: var(--checkboxCheckedBgColor);
|
||||
border-width: calc(2 * var(--borderWidth));
|
||||
}
|
||||
|
||||
.checkboxOutline.multiSelectCheckboxOutline {
|
||||
border-radius: var(--largeRadius);
|
||||
border-width: 0;
|
||||
@@ -599,12 +799,49 @@ html {
|
||||
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(--highlightOutlineColor) !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(--highlightOutlineColor);
|
||||
}
|
||||
|
||||
.cardIndicators {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
top: .2em;
|
||||
top: .5em;
|
||||
}
|
||||
|
||||
[dir=ltr] .cardIndicators {
|
||||
right: .5em;
|
||||
}
|
||||
|
||||
.layout-mobile .cardIndicators {
|
||||
top: .2em;
|
||||
right: .2em;
|
||||
}
|
||||
|
||||
|
||||
.indicator {
|
||||
border: solid rgb(124 124 124 / 50%) var(--borderWidth);
|
||||
border-radius: 100em;
|
||||
@@ -669,8 +906,8 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
|
||||
#btnDeleteImage,
|
||||
.button-delete {
|
||||
background: rgb(169, 29, 29);
|
||||
border: solid rgb(217, 84, 84) var(--borderWidth);
|
||||
background: var(--btnDeleteColor);
|
||||
border: solid var(--btnDeleteBorderColor) var(--borderWidth);
|
||||
}
|
||||
|
||||
.button-submit {
|
||||
@@ -710,6 +947,20 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
background-color: var(--lighterGradientPoint) !important;
|
||||
}
|
||||
|
||||
.listItemIcon.notification_important {
|
||||
background-color: var(--btnDeleteColor) !important;
|
||||
border: solid var(--btnDeleteBorderColor) var(--borderWidth);
|
||||
}
|
||||
|
||||
.listItemIcon.notifications:not(.listItemIcon-transparent),
|
||||
.listItemIcon.schedule:not(.listItemIcon-transparent),
|
||||
.listItemIcon.person:not(.listItemIcon-transparent),
|
||||
.listItemIcon.live_tv:not(.listItemIcon-transparent) {
|
||||
background-color: rgb(41, 49, 83) !important;
|
||||
border: solid var(--borderColor) var(--borderWidth);
|
||||
}
|
||||
|
||||
|
||||
.readOnlyContent {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
@@ -734,10 +985,14 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
padding: .75em 1em !important;
|
||||
}
|
||||
|
||||
[dir=ltr] .listItem:not(.actionSheetMenuItem) {
|
||||
[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) {
|
||||
padding: 0.25em 0.25em 0.25em 1.5em !important;
|
||||
}
|
||||
|
||||
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] {
|
||||
padding: .5em 0.25em 0.5em 0.5em !important;
|
||||
}
|
||||
|
||||
.actionSheetContent {
|
||||
padding: .4em !important;
|
||||
}
|
||||
@@ -772,10 +1027,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
border: solid var(--lighterBorderColor) var(--borderWidth) !important;
|
||||
}
|
||||
|
||||
.noBackdropTransparency .detailPageSecondaryContainer {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.detailSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -856,14 +1107,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
padding-inline: 1em;
|
||||
}
|
||||
|
||||
.smallBackdropCard,
|
||||
.squareCard,
|
||||
.backdropCard,
|
||||
.bannerCard {
|
||||
width: 46%;
|
||||
max-width: 18em;
|
||||
}
|
||||
|
||||
.layout-mobile #myPreferencesMenuPage {
|
||||
padding-top: 3.75em !important;
|
||||
}
|
||||
@@ -898,6 +1141,11 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
padding-inline: .5em;
|
||||
}
|
||||
|
||||
.sectionTitleTextButton:hover {
|
||||
background: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.sectionTitleTextButton>* {
|
||||
padding: .3em 0 !important;
|
||||
margin: 0 0 !important;
|
||||
@@ -910,18 +1158,40 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
}
|
||||
|
||||
.sectionTitleTextButton>.material-icons::before {
|
||||
border: solid var(--borderWidth);
|
||||
border-radius: var(--largeRadius);
|
||||
font-size: .85em;
|
||||
line-height: unset;
|
||||
font-weight: 600;
|
||||
margin-inline-start: .5em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sectionTitleTextButton>.material-icons.chevron_right {
|
||||
margin-left: .5rem !important;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
|
||||
background-size: contain;
|
||||
/* Stops miscalculating the size on hover effect */
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--headerColor);
|
||||
border: solid var(--borderWidth) var(--borderColor);
|
||||
border-radius: var(--smallRadius);
|
||||
}
|
||||
|
||||
.upNextContainer {
|
||||
border-radius: var(--largeRadius);
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.upNextContainer .btnStartNow {
|
||||
background-color: var(--btnSubmitColor);
|
||||
border-color: var(--btnSubmitBorderColor);
|
||||
}
|
||||
|
||||
.upNextContainer .upNextDialog-countdownText {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast,
|
||||
.upNextContainer {
|
||||
background: var(--headerColor) !important;
|
||||
border: solid var(--borderWidth) var(--borderColor) !important;
|
||||
backdrop-filter: blur(1em);
|
||||
}
|
||||
|
||||
@@ -930,11 +1200,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
max-width: 27rem !important;
|
||||
}
|
||||
|
||||
.layout-tv .itemBackdrop {
|
||||
display: block;
|
||||
height: 13vh;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #c1c1c1;
|
||||
}
|
||||
@@ -951,6 +1216,16 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
background-color: rgb(255 255 255 / 5%);
|
||||
}
|
||||
|
||||
.emby-select-withcolor,
|
||||
.emby-select,
|
||||
.emby-input,
|
||||
.emby-textarea {
|
||||
background-color: var(--selectorBackgroundColor);
|
||||
border: var(--lighterBorderColor) solid var(--borderWidth);
|
||||
border-radius: var(--smallRadius);
|
||||
padding: .5em !important;
|
||||
}
|
||||
|
||||
.inputLabelFocused,
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused {
|
||||
@@ -960,7 +1235,19 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
.emby-select-withcolor:focus,
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus {
|
||||
border-color: #c1c1c1 !important;
|
||||
border-color: var(--highlightOutlineColor) !important;
|
||||
outline: thin solid var(--highlightOutlineColor) !important;
|
||||
}
|
||||
|
||||
.emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
|
||||
.emby-input:hover:not(:focus),
|
||||
.emby-textarea:hover:not(:focus) {
|
||||
border-color: var(--dimTextColor) !important;
|
||||
}
|
||||
|
||||
.emby-select-withcolor>option {
|
||||
color: inherit;
|
||||
background-color: var(--selectorBackgroundColor);
|
||||
}
|
||||
|
||||
.layout-mobile [dir=ltr] .infoWrapper {
|
||||
@@ -968,6 +1255,7 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
}
|
||||
|
||||
[dir=ltr] .mediaInfoItem {
|
||||
transform-origin: left;
|
||||
transform: scale(.85);
|
||||
margin: 0 .4em 0 0;
|
||||
}
|
||||
@@ -998,12 +1286,70 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.libraryPage:not(.noSecondaryNavPage) {
|
||||
.libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
|
||||
padding-top: 4.8em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.emby-select-withcolor>option {
|
||||
color: inherit;
|
||||
background-color: var(--selectorBackgroundColor);
|
||||
.layout-tv .headerLeft {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.mdl-spinner__circle {
|
||||
border-color: var(--dimTextColor);
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.subtitleappearance-preview {
|
||||
border-radius: var(--smallRadius);
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
background-color: var(--headerColor) !important;
|
||||
border-radius: var(--largeRadius) !important;
|
||||
border: solid var(--borderColor) var(--borderWidth) !important;
|
||||
}
|
||||
|
||||
.sliderBubbleText {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-radius: var(--smallRadius);
|
||||
border-color: var(--borderColor) solid var(--borderWidth);
|
||||
}
|
||||
|
||||
#serverActivityPage .MuiPaper-elevation2 {
|
||||
border: solid var(--borderColor) var(--borderWidth) !important;
|
||||
box-shadow: unset !important;
|
||||
background-color: var(--tableBodyColor);
|
||||
}
|
||||
|
||||
#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
|
||||
#serverActivityPage .MuiTableRow-root.MuiTableRow-head,
|
||||
#serverActivityPage .MuiTableRow-root {
|
||||
background-color: var(--tableBodyColor) !important;
|
||||
}
|
||||
|
||||
.MuiList-root.MuiMenu-list {
|
||||
background-color: var(--drawerColor);
|
||||
}
|
||||
|
||||
ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
|
||||
/* ! Don't change these units. They are rem because that is standard for MUI */
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.playerStats {
|
||||
border-radius: var(--largeRadius);
|
||||
}
|
||||
|
||||
#scenesContent .cardScalable:hover {
|
||||
border-color: var(--dimTextColor) !important;
|
||||
}
|
||||
|
||||
.progressring-spiner {
|
||||
border-color: var(--btnSubmitBorderColor);
|
||||
}
|
1355
Theme/ElegantFin-theme-v25.01.03.css
Normal file
1355
Theme/ElegantFin-theme-v25.01.03.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user