From 511e5bc21e62d0c9315ad35320896eec91ad6d6f Mon Sep 17 00:00:00 2001 From: Levi Date: Sun, 9 Jun 2024 21:52:47 +0200 Subject: [PATCH] beautify and login page improvement --- style.css | 439 +++++++++++++++++++++++------------------------------- 1 file changed, 184 insertions(+), 255 deletions(-) diff --git a/style.css b/style.css index d844634..cdc06bc 100644 --- a/style.css +++ b/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; -} \ No newline at end of file + transition: 0.18s ease-in; +}