|
|
@ -1,3 +1,23 @@ |
|
|
|
|
|
|
|
/*TP CUSTOM */ |
|
|
|
h1,h2, h3, h4, h5, h6, |
|
|
|
.inputLabel { |
|
|
|
color: var(--text-hover); |
|
|
|
} |
|
|
|
|
|
|
|
a:not(.emby-button), |
|
|
|
.cardText.cardTextCentered.cardText-first > button { |
|
|
|
color: var(--link-color) !important; |
|
|
|
} |
|
|
|
|
|
|
|
a:hover:not(.emby-button), |
|
|
|
.cardText.cardTextCentered.cardText-first > button:hover |
|
|
|
{ |
|
|
|
color: var(--link-color-hover) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/*TP END*/ |
|
|
|
|
|
|
|
html { |
|
|
|
color: var(--theme-text-color); |
|
|
|
scrollbar-color: var(--scrollbar-thumb-background) transparent |
|
|
@ -22,7 +42,7 @@ html { |
|
|
|
-o-background-size: auto, cover; |
|
|
|
} |
|
|
|
|
|
|
|
.appfooter,.formDialogFooter:not(.formDialogFooter-clear),.formDialogHeader:not(.formDialogHeader-clear) { |
|
|
|
.appfooter,.formDialogFooter:not(.formDialogFooter-clear) { |
|
|
|
background: var(--footer-background); |
|
|
|
background-repeat: repeat, no-repeat; |
|
|
|
background-attachment: fixed, fixed; |
|
|
@ -32,6 +52,27 @@ html { |
|
|
|
-moz-background-size: auto, cover; |
|
|
|
-o-background-size: auto, cover; |
|
|
|
} |
|
|
|
.formDialogHeader:not(.formDialogHeader-clear) { |
|
|
|
background: var(--modal-header-color); |
|
|
|
background-repeat: repeat, no-repeat; |
|
|
|
background-attachment: fixed, fixed; |
|
|
|
background-position: center center, center center; |
|
|
|
background-size: auto, cover; |
|
|
|
-webkit-background-size: auto, cover; |
|
|
|
-moz-background-size: auto, cover; |
|
|
|
-o-background-size: auto, cover; |
|
|
|
} |
|
|
|
|
|
|
|
.dialog { |
|
|
|
background: var(--modal-bg-color); |
|
|
|
background-repeat: repeat, no-repeat; |
|
|
|
background-attachment: fixed, fixed; |
|
|
|
background-position: center center, center center; |
|
|
|
background-size: auto, cover; |
|
|
|
-webkit-background-size: auto, cover; |
|
|
|
-moz-background-size: auto, cover; |
|
|
|
-o-background-size: auto, cover; |
|
|
|
} |
|
|
|
|
|
|
|
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { |
|
|
|
.skinHeader-withBackground { |
|
|
@ -65,7 +106,7 @@ html { |
|
|
|
background-image: url(https://theme-park.dev/Resources/emby/logowhite.png) |
|
|
|
} |
|
|
|
|
|
|
|
.backgroundContainer,.dialog,html { |
|
|
|
.backgroundContainer,html { |
|
|
|
background: var(--theme-background); |
|
|
|
background-repeat: repeat, no-repeat; |
|
|
|
background-attachment: fixed, fixed; |
|
|
@ -94,20 +135,20 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.paper-icon-button-light-tv:focus,.paper-icon-button-light:active { |
|
|
|
color: var(--theme-primary-color); |
|
|
|
color: rgb(var(--theme-primary-color)); |
|
|
|
background-color: var(--theme-icon-focus-background) |
|
|
|
} |
|
|
|
|
|
|
|
@media(hover: hover) and (pointer:fine) { |
|
|
|
.paper-icon-button-light:focus { |
|
|
|
color:var(--theme-primary-color); |
|
|
|
color:rgb(var(--theme-primary-color)); |
|
|
|
background-color: var(--theme-icon-focus-background) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.detailButton-icon,.fab,.raised { |
|
|
|
background: var(--button-background); |
|
|
|
color: var(--theme-text-color) |
|
|
|
background: var(--button-color); |
|
|
|
color: var(--button-text); |
|
|
|
} |
|
|
|
|
|
|
|
.detailButton-icon { |
|
|
@ -116,7 +157,7 @@ html { |
|
|
|
|
|
|
|
.emby-select-withcolor { |
|
|
|
color: inherit; |
|
|
|
background: var(--button-background); |
|
|
|
background: rgba(0, 0, 0, 0.25); |
|
|
|
border: var(--line-size) solid transparent |
|
|
|
} |
|
|
|
|
|
|
@ -147,17 +188,18 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.fab:focus,.raised:focus { |
|
|
|
background: #333 |
|
|
|
background: var(--button-color-hover); |
|
|
|
color: var(--button-text-hover); |
|
|
|
} |
|
|
|
|
|
|
|
.button-submit:not(.emby-button-tv) { |
|
|
|
background: var(--theme-primary-color); |
|
|
|
color: #fff |
|
|
|
background: var(--button-color); |
|
|
|
color: var(--button-text) |
|
|
|
} |
|
|
|
|
|
|
|
.button-submit:not(.emby-button-tv):focus { |
|
|
|
background: var(--theme-primary-color-lightened); |
|
|
|
color: #fff |
|
|
|
background: var(--button-color-hover); |
|
|
|
color: var(--button-text-hover) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-select-withcolor>option { |
|
|
@ -166,11 +208,11 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-select-withcolor:focus { |
|
|
|
border-color: var(--theme-primary-color)!important |
|
|
|
border-color: rgb(var(--theme-primary-color))!important |
|
|
|
} |
|
|
|
|
|
|
|
.emby-select-tv-withcolor:focus { |
|
|
|
background-color: var(--theme-primary-color)!important; |
|
|
|
background-color: rgb(var(--theme-primary-color))!important; |
|
|
|
color: #fff!important |
|
|
|
} |
|
|
|
|
|
|
@ -183,15 +225,15 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.inputLabelFocused,.selectLabelFocused,.textareaLabelFocused { |
|
|
|
color: var(--theme-accent-text-color) |
|
|
|
color: rgb(var(--accent-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.button-link { |
|
|
|
color: var(--theme-accent-text-color) |
|
|
|
color: var(--link-color) |
|
|
|
} |
|
|
|
|
|
|
|
.button-flat-accent { |
|
|
|
color: var(--theme-accent-text-color) |
|
|
|
color: rgb(var(--accent-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.paperList,.visualCardBox { |
|
|
@ -202,10 +244,12 @@ html { |
|
|
|
border: var(--line-size) solid var(--line-background) |
|
|
|
} |
|
|
|
|
|
|
|
.cardText-secondary,.fieldDescription,.listItemBodyText-secondary,.secondaryText { |
|
|
|
.fieldDescription,.listItemBodyText-secondary,.secondaryText { |
|
|
|
color: var(--theme-body-secondary-text-color) |
|
|
|
} |
|
|
|
|
|
|
|
.cardText-secondary { |
|
|
|
color: var(--text) |
|
|
|
} |
|
|
|
.cardText-first { |
|
|
|
color: var(--theme-text-color-opaque) |
|
|
|
} |
|
|
@ -221,12 +265,16 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.selectionCommandsPanel { |
|
|
|
background: var(--theme-primary-color); |
|
|
|
color: #fff |
|
|
|
background: rgb(var(--theme-primary-color)); |
|
|
|
color: var(--label-text-color); |
|
|
|
} |
|
|
|
.itemSelectionCount { |
|
|
|
color: var(--label-text-color)!important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.upNextDialog-countdownText { |
|
|
|
color: var(--theme-primary-color) |
|
|
|
color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.alphaPickerButton { |
|
|
@ -239,7 +287,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.alphaPickerButton-tv:focus { |
|
|
|
background-color: var(--theme-primary-color); |
|
|
|
background-color: rgb(var(--theme-primary-color)); |
|
|
|
color: #fff!important |
|
|
|
} |
|
|
|
|
|
|
@ -257,7 +305,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.progressring-spiner { |
|
|
|
border-color: var(--theme-primary-color) |
|
|
|
border-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.mediaInfoText { |
|
|
@ -274,12 +322,12 @@ html { |
|
|
|
|
|
|
|
.emby-input,.emby-textarea { |
|
|
|
color: inherit; |
|
|
|
background: var(--button-background); |
|
|
|
border: var(--line-size) solid var(--button-background) |
|
|
|
background: rgb(0 0 0 / 25%); |
|
|
|
border: var(--line-size) solid rgba(255, 255, 255, 0.1) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-input:focus,.emby-textarea:focus { |
|
|
|
border-color: var(--theme-primary-color) |
|
|
|
border-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-checkbox:checked+span:before { |
|
|
@ -287,12 +335,16 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-checkbox:checked+span:before { |
|
|
|
border-color: var(--theme-primary-color); |
|
|
|
background-color: var(--theme-primary-color) |
|
|
|
border-color: rgb(var(--theme-primary-color)) !important; |
|
|
|
background-color: rgb(var(--theme-primary-color)) !important; |
|
|
|
|
|
|
|
} |
|
|
|
.checkboxLabel::after { |
|
|
|
color: var(--label-text-color); |
|
|
|
} |
|
|
|
|
|
|
|
.itemProgressBarForeground { |
|
|
|
background-color: var(--theme-primary-color) |
|
|
|
background-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.itemProgressBarForeground-recording { |
|
|
@ -300,11 +352,12 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.countIndicator { |
|
|
|
background: var(--theme-primary-color) |
|
|
|
background: rgb(var(--theme-primary-color)); |
|
|
|
color: var(--label-text-color); |
|
|
|
} |
|
|
|
|
|
|
|
.playedIndicator { |
|
|
|
background: var(--theme-primary-color) |
|
|
|
background: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.mainDrawer { |
|
|
@ -324,11 +377,11 @@ html { |
|
|
|
|
|
|
|
.navMenuOption-selected { |
|
|
|
background-color: var(--theme-icon-focus-background)!important; |
|
|
|
color: var(--theme-accent-text-color) |
|
|
|
color: rgb(var(--accent-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-button-focusscale:focus,.emby-button-focusscale:focus .detailButton-icon { |
|
|
|
background: var(--theme-primary-color); |
|
|
|
background: rgb(var(--theme-primary-color)); |
|
|
|
color: #fff |
|
|
|
} |
|
|
|
|
|
|
@ -337,7 +390,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-tab-button-active { |
|
|
|
color: var(--theme-accent-text-color) |
|
|
|
color: rgb(var(--accent-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-tab-button-active.emby-button-tv { |
|
|
@ -345,12 +398,12 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-tab-button.emby-button-tv:focus { |
|
|
|
color: var(--theme-accent-text-color); |
|
|
|
color: rgb(var(--accent-color)); |
|
|
|
background: 0 0 |
|
|
|
} |
|
|
|
|
|
|
|
.emby-button { |
|
|
|
outline-color: var(--theme-primary-color) |
|
|
|
outline-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.channelCell,.guide-headerTimeslots,.timeslotHeaders { |
|
|
@ -408,7 +461,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.guide-currentTimeIndicatorDot:after { |
|
|
|
border-top-color: var(--theme-primary-color) |
|
|
|
border-top-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.firstChannelCell { |
|
|
@ -432,7 +485,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.channelCell:focus,.programCell:focus { |
|
|
|
background-color: var(--theme-primary-color); |
|
|
|
background-color: rgb(var(--theme-primary-color)); |
|
|
|
color: #fff |
|
|
|
} |
|
|
|
|
|
|
@ -469,7 +522,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.card:focus .card-focuscontent { |
|
|
|
border-color: var(--theme-primary-color) |
|
|
|
border-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.cardContent-button { |
|
|
@ -505,7 +558,10 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.cardOverlayButtonIcon { |
|
|
|
background-color: var(--theme-primary-color) |
|
|
|
background-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
.cardScalable.cardPadder-portrait > div > button > i{ |
|
|
|
color: var(--label-text-color) !important; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track-piece { |
|
|
@ -521,7 +577,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider { |
|
|
|
color: var(--theme-primary-color) |
|
|
|
color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider::-moz-range-track { |
|
|
@ -529,23 +585,23 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider::-moz-range-progress { |
|
|
|
background: var(--theme-primary-color) |
|
|
|
background: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider::-webkit-slider-thumb { |
|
|
|
background: var(--theme-primary-color) |
|
|
|
background: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider::-moz-range-thumb { |
|
|
|
background: var(--theme-primary-color) |
|
|
|
background: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider::-ms-thumb { |
|
|
|
background: var(--theme-primary-color) |
|
|
|
background: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.emby-slider-background-lower { |
|
|
|
background-color: var(--theme-primary-color) |
|
|
|
background-color: rgb(var(--theme-primary-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.scrollbuttoncontainer { |
|
|
@ -567,7 +623,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.emby-search-tab-button.emby-tab-button-active { |
|
|
|
background: var(--theme-accent-text-color)!important |
|
|
|
background: rgb(var(--accent-color))!important |
|
|
|
} |
|
|
|
|
|
|
|
.textActionButton.dragging { |
|
|
@ -575,23 +631,22 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.dragging-over.full-drop-target { |
|
|
|
background: var(--theme-primary-color)!important; |
|
|
|
background: rgb(var(--theme-primary-color))!important; |
|
|
|
color: #fff!important |
|
|
|
} |
|
|
|
|
|
|
|
.dragging-over-top:before { |
|
|
|
background: var(--theme-accent-text-color) |
|
|
|
background: rgb(var(--accent-color)) |
|
|
|
} |
|
|
|
|
|
|
|
.dragging-over-bottom:after { |
|
|
|
background: var(--theme-accent-text-color) |
|
|
|
background: rgb(var(--accent-color)) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* TP CUSTOM */ |
|
|
|
@media (hover: hover) and (pointer: fine) { |
|
|
|
.navMenuOption:hover { |
|
|
|
background: rgb(255 255 255 / 15%) !important; |
|
|
|
.navMenuOption:hover:not(.navMenuOption-selected) { |
|
|
|
background: 0 !important; |
|
|
|
color: var(--accent-color-hover); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@ -600,3 +655,10 @@ html { |
|
|
|
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); |
|
|
|
backdrop-filter: saturate(1.8) blur(1.5em); |
|
|
|
} |
|
|
|
|
|
|
|
.jstree-default .jstree-clicked { |
|
|
|
background: rgb(var(--accent-color)); |
|
|
|
-webkit-border-radius: 2px; |
|
|
|
border-radius: 2px; |
|
|
|
color: var(--label-text-color) !important; |
|
|
|
} |