beautify and login page improvement
This commit is contained in:
parent
f296adf7b0
commit
511e5bc21e
1 changed files with 184 additions and 255 deletions
437
style.css
437
style.css
|
|
@ -1,439 +1,378 @@
|
|||
/* --- Variables --- */
|
||||
|
||||
:root {
|
||||
--default-blue-1: #dc007d;
|
||||
--default-blue-2: #ef0d98;
|
||||
--default-blue-3: #f4428f;
|
||||
--translucent-hover-1: rgba(220, 0, 114, 0.2);
|
||||
--translucent-hover-2: rgba(220, 0, 93, 0.2);
|
||||
--translucent-hover-3: rgba(220, 0, 110, 0.28);
|
||||
--card-background-1: #5c0036;
|
||||
--card-background-2: #e14483;
|
||||
--card-background-3: #db0070;
|
||||
--card-background-4: #5c1c3a;
|
||||
--card-background-5: #a80051;
|
||||
--rounding: 12px;
|
||||
--default-blue-1: #dc007d;
|
||||
--default-blue-2: #ef0d98;
|
||||
--default-blue-3: #f4428f;
|
||||
--translucent-hover-1: rgba(220, 0, 114, 0.2);
|
||||
--translucent-hover-2: rgba(220, 0, 93, 0.2);
|
||||
--translucent-hover-3: rgba(220, 0, 110, 0.28);
|
||||
--card-background-1: #5c0036;
|
||||
--card-background-2: #e14483;
|
||||
--card-background-3: #db0070;
|
||||
--card-background-4: #5c1c3a;
|
||||
--card-background-5: #a80051;
|
||||
--rounding: 12px;
|
||||
}
|
||||
|
||||
/* --- Subtitles --- */
|
||||
|
||||
.htmlvideoplayer::cue {
|
||||
text-shadow: .08em .08em .08em #000 !important;
|
||||
text-shadow: .08em .08em .08em #000 !important;
|
||||
}
|
||||
|
||||
/* --- Dashboard Width --- */
|
||||
|
||||
.dashboardDocument {
|
||||
max-width: 75vw;
|
||||
max-width: 75vw;
|
||||
}
|
||||
|
||||
/* --- Backdrop & Header --- */
|
||||
|
||||
.mainAnimatedPage {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop {
|
||||
background-color: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.skinHeader {
|
||||
background: transparent !important;
|
||||
position: static;
|
||||
background: transparent !important;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.detailRibbon {
|
||||
background: none;
|
||||
background: none;
|
||||
}
|
||||
.backdropContainer {
|
||||
filter:
|
||||
blur(8px) saturate(140%) contrast(120%) brightness(65%);
|
||||
mask-image: none;
|
||||
-webkit-mask-image: none;
|
||||
}
|
||||
|
||||
.backdropContainer {
|
||||
filter:
|
||||
blur(8px) saturate(140%) contrast(120%) brightness(65%);
|
||||
mask-image: none;
|
||||
-webkit-mask-image: none;
|
||||
/* --- Login Backdrop --- */
|
||||
#loginPage:after {
|
||||
background:url(https://levi.land/public/jf-login-bg.webp);
|
||||
filter: blur(8px);
|
||||
background-size:cover;
|
||||
content:"";
|
||||
height:100vh;
|
||||
left:0;
|
||||
position:fixed;
|
||||
top:0;
|
||||
width:100vw;
|
||||
z-index:-1;
|
||||
}
|
||||
#loginPage>div {
|
||||
left:50%;
|
||||
max-width:50vw;
|
||||
min-width:40vw;
|
||||
padding:0!important;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translate(-50%,0%);
|
||||
z-index:2;
|
||||
}
|
||||
#loginPage #divUsers .card {
|
||||
width:8vw;
|
||||
}
|
||||
.layout-mobile #loginPage>div {
|
||||
max-width:85vw;
|
||||
width:85vw;
|
||||
}
|
||||
|
||||
/* --- Header Padding --- */
|
||||
|
||||
.pageWithAbsoluteTabs:not(.noSecondaryNavPage) {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/* --- Sidebar --- */
|
||||
|
||||
.mainDrawer,
|
||||
.drawer-open {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
backdrop-filter: blur(10px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
backdrop-filter: blur(10px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
|
||||
}
|
||||
|
||||
/* --- Dialog Boxes --- */
|
||||
|
||||
.focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.centeredDialog.opened {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
.backgroundContainer,
|
||||
.dialog,
|
||||
.nowPlayingPlaylist,
|
||||
.nowPlayingContextMenu {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.opened {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
.focuscontainer.dialog.smoothScrollY.dialog-fixedSize.dialog-small.opened {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
|
||||
/* --- Colors --- */
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: var(--default-blue-1) !important;
|
||||
background-color: var(--translucent-hover-1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.paper-icon-button-light:active:not(:disabled) {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: var(--default-blue-1) !important;
|
||||
background-color: var(--translucent-hover-1) !important;
|
||||
}
|
||||
}
|
||||
.paper-icon-button-light:active:not(:disabled) {
|
||||
color: var(--default-blue-1) !important;
|
||||
background-color: var(--translucent-hover-1) !important;
|
||||
}
|
||||
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.button-submit {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.inputLabelFocused,
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.itemSelectionPanel {
|
||||
border: 1px solid var(--default-blue-1) !important;
|
||||
border: 1px solid var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.selectionCommandsPanel {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.upNextDialog-countdownText {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.alphaPickerButton-tv:focus {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.progressring-spiner {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.button-flat:hover {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
color: #fff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-select-withcolor:focus {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-select-tv-withcolor:focus {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked+span+.checkboxOutline {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked+span+.checkboxOutline,
|
||||
.itemProgressBarForeground {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.countIndicator,
|
||||
.fullSyncIndicator,
|
||||
.mediaSourceIndicator,
|
||||
.playedIndicator {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-button.show-focus:focus {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.guide-channelHeaderCell:focus,
|
||||
.programCell:focus {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-tab-button-active,
|
||||
.guide-date-tab-button:focus {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.buttonActive {
|
||||
color: var(--default-blue-1) !important !important;
|
||||
color: var(--default-blue-1) !important !important;
|
||||
}
|
||||
|
||||
.card:focus .cardBox.visualCardBox,
|
||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.metadataSidebarIcon {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.emby-button.detailFloatingButton {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.layout-tv .emby-button.detailFloatingButton:focus {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
#dialogToc .bookplayerButtonIcon:hover {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
#dialogToc .toc li a:active,
|
||||
#dialogToc .toc li a:hover {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.listItemIcon.material-icons.notifications {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
progress {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
progress[aria-valuenow]:before {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 0px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 0px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
#divRunningTasks span {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
}
|
||||
|
||||
.taskProgressOuter {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.taskProgressInner {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
#scheduledTasksPage span {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
}
|
||||
|
||||
.mdl-spinner__layer-1 {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-spinner__layer-2 {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-spinner__layer-3 {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-spinner__layer-4 {
|
||||
border-color: var(--default-blue-1) !important;
|
||||
border-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.listItemImageButton:hover {
|
||||
background: var(--translucent-hover-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
background: var(--translucent-hover-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.listItemIcon:not(.listItemIcon-transparent) {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
div[data-role=controlgroup] a.ui-btn-active {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.playbackProgress>div {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.button-accent-flat {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
color: var(--default-blue-1) !important;
|
||||
color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-thumb {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.mdl-slider-background-lower {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.sliderMarker.watched {
|
||||
background-color: var(--default-blue-1) !important;
|
||||
background-color: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.iconOsdProgressInner {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.taskProgressInner {
|
||||
background: var(--default-blue-1) !important;
|
||||
background: var(--default-blue-1) !important;
|
||||
}
|
||||
|
||||
.downloadbutton-icon-complete,
|
||||
.downloadbutton-icon-on {
|
||||
color: var(--default-blue-3) !important;
|
||||
color: var(--default-blue-3) !important;
|
||||
}
|
||||
|
||||
.defaultCardBackground1 {
|
||||
background-color: var(--card-background-1) !important;
|
||||
background-color: var(--card-background-1) !important;
|
||||
}
|
||||
|
||||
.defaultCardBackground2 {
|
||||
background-color: var(--card-background-2) !important;
|
||||
background-color: var(--card-background-2) !important;
|
||||
}
|
||||
|
||||
.defaultCardBackground3 {
|
||||
background-color: var(--card-background-3) !important;
|
||||
background-color: var(--card-background-3) !important;
|
||||
}
|
||||
|
||||
.defaultCardBackground4 {
|
||||
background-color: var(--card-background-4) !important;
|
||||
background-color: var(--card-background-4) !important;
|
||||
}
|
||||
|
||||
.defaultCardBackground5 {
|
||||
background-color: var(--card-background-5) !important;
|
||||
background-color: var(--card-background-5) !important;
|
||||
}
|
||||
|
||||
.button-submit:focus {
|
||||
background: var(--default-blue-2) !important;
|
||||
background: var(--default-blue-2) !important;
|
||||
}
|
||||
|
||||
.Mui-selected {
|
||||
background-color: var(--translucent-hover-2) !important;
|
||||
background-color: var(--translucent-hover-2) !important;
|
||||
}
|
||||
|
||||
.Mui-selected:hover {
|
||||
background-color: var(--translucent-hover-3) !important;
|
||||
background-color: var(--translucent-hover-3) !important;
|
||||
}
|
||||
|
||||
|
||||
/* --- Rounded Corners --- */
|
||||
|
||||
.detailButton {
|
||||
border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
progress {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
.taskProgressOuter,
|
||||
.taskProgressInner {
|
||||
border-radius: var(--rounding) !important;
|
||||
border-radius: var(--rounding) !important;
|
||||
}
|
||||
|
||||
.formDialogHeader {
|
||||
border-top-left-radius: var(--rounding);
|
||||
border-top-right-radius: var(--rounding);
|
||||
border-top-left-radius: var(--rounding);
|
||||
border-top-right-radius: var(--rounding);
|
||||
}
|
||||
|
||||
.formDialogFooter {
|
||||
border-bottom-left-radius: var(--rounding);
|
||||
border-bottom-right-radius: var(--rounding);
|
||||
border-bottom-left-radius: var(--rounding);
|
||||
border-bottom-right-radius: var(--rounding);
|
||||
}
|
||||
|
||||
.cardOverlayContainer {
|
||||
border-radius: var(--rounding) !important;
|
||||
border-radius: var(--rounding) !important;
|
||||
}
|
||||
|
||||
.missingIndicator,
|
||||
.unairedIndicator,
|
||||
.detailTable,
|
||||
|
|
@ -476,80 +415,70 @@ progress::-webkit-progress-value {
|
|||
.upNextDialog-poster-img,
|
||||
.upNextContainer,
|
||||
.cardOverlayButtonIcon {
|
||||
border-radius: var(--rounding) !important;
|
||||
border-radius: var(--rounding) !important;
|
||||
}
|
||||
|
||||
.card.portraitCard {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
.osdPoster img {
|
||||
border-radius: var(--rounding);
|
||||
border: none;
|
||||
border-radius: var(--rounding);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-thumb {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role="button"]:first-child {
|
||||
border-bottom-left-radius: var(--rounding);
|
||||
border-top-left-radius: var(--rounding);
|
||||
border-bottom-left-radius: var(--rounding);
|
||||
border-top-left-radius: var(--rounding);
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role="button"]:last-child {
|
||||
border-bottom-right-radius: var(--rounding);
|
||||
border-top-right-radius: var(--rounding);
|
||||
border-bottom-right-radius: var(--rounding);
|
||||
border-top-right-radius: var(--rounding);
|
||||
}
|
||||
|
||||
#dashboardPage .cardContent,
|
||||
#dashboardPage .sessionNowPlayingInnerContent {
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
}
|
||||
|
||||
#divVirtualFolders .cardImageContainer,
|
||||
#divVirtualFolders .cardContent {
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
}
|
||||
|
||||
#userProfilesPage .cardImage,
|
||||
#userProfilesPage .cardContent {
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
}
|
||||
|
||||
.sliderBubble {
|
||||
border-radius: var(--rounding);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
/* --- Skip Intro Button --- */
|
||||
|
||||
#skipIntro .emby-button:hover, #skipIntro .emby-button:focus {
|
||||
background-color: rgba(168,0,81,0.7);
|
||||
transform: 0.3s;
|
||||
#skipIntro .emby-button:hover,
|
||||
#skipIntro .emby-button:focus {
|
||||
background-color: rgba(168,0,81,0.7);
|
||||
transform: 0.3s;
|
||||
}
|
||||
|
||||
/* --- Poster Cards --- */
|
||||
|
||||
.collapseContent, .formDialogFooter:not(.formDialogFooter-clear), .formDialogHeader:not(.formDialogHeader-clear), .paperList, .visualCardBox {
|
||||
background-color: transparent !important;
|
||||
backdrop-filter: blur(20px) brightness(80%) !important;
|
||||
-webkit-backdrop-filter: blur(20px) brightness(80%) !important;
|
||||
.collapseContent,
|
||||
.formDialogFooter:not(.formDialogFooter-clear),
|
||||
.formDialogHeader:not(.formDialogHeader-clear),
|
||||
.paperList,
|
||||
.visualCardBox {
|
||||
background-color: transparent !important;
|
||||
backdrop-filter: blur(20px) brightness(80%) !important;
|
||||
-webkit-backdrop-filter: blur(20px) brightness(80%) !important;
|
||||
}
|
||||
|
||||
/* --- Animations --- */
|
||||
|
||||
.listItem {
|
||||
transition: 0.18s ease-out;
|
||||
transition: 0.18s ease-out;
|
||||
}
|
||||
|
||||
.listItem:hover {
|
||||
transition: 0.18s ease-in;
|
||||
transition: 0.18s ease-in;
|
||||
}
|
||||
Loading…
Reference in a new issue