Minor style fixes

This commit is contained in:
loof2736 2024-06-06 23:04:43 -04:00
parent 468172ccf5
commit 3ac7b77410
2 changed files with 182 additions and 26 deletions

View File

@ -1,7 +1,7 @@
/* Variables */
:root {
--main-accent-color: #00a4dc;
--secondary-accent-color: rgba(0, 164, 220, 0.2);
--secondary-accent-color: #00a4dc20;
--main-background-color: #0F0F0F;
--secondary-background-color: #181818;
--main-background-transparent: rgba(35,35,35,0.5);
@ -12,6 +12,7 @@
/* Setting accent color variable */
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
.emby-checkbox:checked + span + .checkboxOutline,
.selectionCommandsPanel,
.countIndicator {
background: var(--main-accent-color) !important;
}
@ -31,7 +32,8 @@
.textareaLabelFocused,
.inputLabelFocused,
.emby-tab-button:hover,
.metadataSidebarIcon {
.metadataSidebarIcon,
.upNextDialog-countdownText {
color: var(--main-accent-color) !important;
}
@media (hover: hover) and (pointer: fine) {
@ -109,6 +111,17 @@
.layout-desktop .collectionItems .collectionItemsContainer {
padding-left: 0% !important;
}
/* Dynamic buttons */
.layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
transform: scale(1.05) !important;
}
.layout-desktop .listItem {
transition: .2s !important;
border-radius: var(--rounded-cards) !important;
}
.layout-desktop #myPreferencesMenuPage .listItem:hover {
transform: scale(1.015);
}
@ -149,7 +162,7 @@
padding: 0px !important;
backdrop-filter: none !important;
}
.itemProgressBar {
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
height: 10px !important;
background: var(--main-background-transparent) !important;
backdrop-filter: blur(2px) !important;
@ -160,9 +173,32 @@
.innerCardFooter .cardText {
padding: 0 0 0 10px !important
}
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
background: var(--main-accent-color) !important;
}
.itemProgressBarForeground {
border-radius: 100px !important;
background: var(--main-accent-color) !important;
}
.transcodingProgress > div {
background-color: hsla(0,0%,100%,.2) !important;
}
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
bottom: 10px !important;
border-radius: 100px !important;
width: 90% !important;
left: 5% !important;
}
.sessionNowPlayingInnerContent {
padding-bottom: 12px !important;
padding-inline: 17px !important;
}
.sessionAppInfo {
padding: .5em 0em !important;
}
.sessionNowPlayingInfo {
padding: .8em 0em !important;
}
@ -275,11 +311,12 @@
/* Player modifications */
.upNextContainer, .toastVisible {
backdrop-filter: blur(50px) !important;
backdrop-filter: blur(10px) !important;
}
.upNextContainer {
border-radius: var(--rounded-cards) !important;
background-color: rgba(0, 0, 0, 0.7) !important;
background-color: rgba(0, 0, 0, 0.6) !important;
margin: 4% !important;
}
.toastVisible {
border-radius: 30px !important;
@ -290,6 +327,11 @@
background-color: var(--secondary-background-transparent) !important;
backdrop-filter: blur(10px) !important;
}
.sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
background-color: #ffffff00 !important;
top: 25px !important;
backdrop-filter: unset !important;
}
.mdl-slider-background-flex {
height: 10px !important;
margin-top: -5px !important;
@ -300,24 +342,46 @@
border-radius: 100px !important;
background-color: var(--main-accent-color) !important;
}
.mdl-slider::-moz-range-thumb {
background: rgba(0,0,0,0) !important;
.mdl-slider::-moz-range-thumb,
.mdl-slider::-webkit-slider-thumb {
background: #ffffff00 !important;
height: 10px !important;
width: 8px !important;
border-radius: 2px !important;
}
.mdl-slider-hoverthumb:hover::-moz-range-thumb,
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
transform: scaleY(2);
background: #fff !important;
}
.mdl-slider-background-upper {
display: none !important;
border-top-right-radius: 100px !important;
border-bottom-right-radius: 100px !important;
background: hsla(0,0%,100%,.2) !important;
transform: translateX(-3px) !important;
}
.iconOsdProgressInner {
background: var(--main-accent-color) !important;
}
/* Up next card */
.upNextDialog-buttons .upNextDialog-button {
transition: .2s !important;
}
.upNextDialog-buttons .upNextDialog-button:hover {
transform: scale(1.1);
}
/* Support for Jellyscrub plugin */
.chapterThumbContainer {
background: none !important;
border-radius: var(--rounded-cards) !important;
box-shadow: unset !important;
}
.chapterThumb {
border-radius: var(--rounded-cards) !important;
margin-bottom: 40px !important;
margin-bottom: 47px !important;
box-shadow: 0 0 1.9vh #000 !important;
}
.chapterThumbTextContainer {
background: none !important;
@ -329,6 +393,23 @@
display: none !important;
}
/* Support for IntroSkipper plugin */
.skipIntro {
transition: 0.2s;
border-radius: 100px !important;
padding: 5px 10px !important;
backdrop-filter: blur(10px) !important;
border: none !important;
}
.skipIntro:hover {
box-shadow: unset !important;
transition: .2s;
transform: scale(1.05);
}
.skipIntro .paper-icon-button-light:hover:not(:disabled) {
color: #FFF !important;
}
/* Settings and dashboard modifications */
@ -552,9 +633,6 @@
padding-left: 390px !important;
min-height: 550px !important;
}
.layout-desktop .detailPagePrimaryContent:has(.genresGroup.hide):has(.directorsGroup.hide):has(.writersGroup.hide) {
min-height: unset !important;
}
/* Move track selection box */
.detailSection {

View File

@ -1,7 +1,7 @@
/* Variables */
:root {
--main-accent-color: #00a4dc;
--secondary-accent-color: rgba(0, 164, 220, 0.2);
--secondary-accent-color: #00a4dc20;
--main-background-color: #0F0F0F;
--secondary-background-color: #181818;
--main-background-transparent: rgba(35,35,35,0.5);
@ -12,6 +12,7 @@
/* Setting accent color variable */
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
.emby-checkbox:checked + span + .checkboxOutline,
.selectionCommandsPanel,
.countIndicator {
background: var(--main-accent-color) !important;
}
@ -31,7 +32,8 @@
.textareaLabelFocused,
.inputLabelFocused,
.emby-tab-button:hover,
.metadataSidebarIcon {
.metadataSidebarIcon,
.upNextDialog-countdownText {
color: var(--main-accent-color) !important;
}
@media (hover: hover) and (pointer: fine) {
@ -109,6 +111,17 @@
.layout-desktop .collectionItems .collectionItemsContainer {
padding-left: 0% !important;
}
/* Dynamic buttons */
.layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
transform: scale(1.05) !important;
}
.layout-desktop .listItem {
transition: .2s !important;
border-radius: var(--rounded-cards) !important;
}
.layout-desktop #myPreferencesMenuPage .listItem:hover {
transform: scale(1.015);
}
@ -149,7 +162,7 @@
padding: 0px !important;
backdrop-filter: none !important;
}
.itemProgressBar {
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
height: 10px !important;
background: var(--main-background-transparent) !important;
backdrop-filter: blur(2px) !important;
@ -160,9 +173,32 @@
.innerCardFooter .cardText {
padding: 0 0 0 10px !important
}
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
background: var(--main-accent-color) !important;
}
.itemProgressBarForeground {
border-radius: 100px !important;
background: var(--main-accent-color) !important;
}
.transcodingProgress > div {
background-color: hsla(0,0%,100%,.2) !important;
}
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
bottom: 10px !important;
border-radius: 100px !important;
width: 90% !important;
left: 5% !important;
}
.sessionNowPlayingInnerContent {
padding-bottom: 12px !important;
padding-inline: 17px !important;
}
.sessionAppInfo {
padding: .5em 0em !important;
}
.sessionNowPlayingInfo {
padding: .8em 0em !important;
}
@ -278,11 +314,12 @@ html {
/* Player modifications */
.upNextContainer, .toastVisible {
backdrop-filter: blur(50px) !important;
backdrop-filter: blur(10px) !important;
}
.upNextContainer {
border-radius: var(--rounded-cards) !important;
background-color: rgba(0, 0, 0, 0.7) !important;
background-color: rgba(0, 0, 0, 0.6) !important;
margin: 4% !important;
}
.toastVisible {
border-radius: 30px !important;
@ -293,6 +330,11 @@ html {
background-color: var(--secondary-background-transparent) !important;
backdrop-filter: blur(10px) !important;
}
.sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
background-color: #ffffff00 !important;
top: 25px !important;
backdrop-filter: unset !important;
}
.mdl-slider-background-flex {
height: 10px !important;
margin-top: -5px !important;
@ -303,24 +345,46 @@ html {
border-radius: 100px !important;
background-color: var(--main-accent-color) !important;
}
.mdl-slider::-moz-range-thumb {
background: rgba(0,0,0,0) !important;
.mdl-slider::-moz-range-thumb,
.mdl-slider::-webkit-slider-thumb {
background: #ffffff00 !important;
height: 10px !important;
width: 8px !important;
border-radius: 2px !important;
}
.mdl-slider-hoverthumb:hover::-moz-range-thumb,
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
transform: scaleY(2);
background: #fff !important;
}
.mdl-slider-background-upper {
display: none !important;
border-top-right-radius: 100px !important;
border-bottom-right-radius: 100px !important;
background: hsla(0,0%,100%,.2) !important;
transform: translateX(-3px) !important;
}
.iconOsdProgressInner {
background: var(--main-accent-color) !important;
}
/* Up next card */
.upNextDialog-buttons .upNextDialog-button {
transition: .2s !important;
}
.upNextDialog-buttons .upNextDialog-button:hover {
transform: scale(1.1);
}
/* Support for Jellyscrub plugin */
.chapterThumbContainer {
background: none !important;
border-radius: var(--rounded-cards) !important;
box-shadow: unset !important;
}
.chapterThumb {
border-radius: var(--rounded-cards) !important;
margin-bottom: 40px !important;
margin-bottom: 47px !important;
box-shadow: 0 0 1.9vh #000 !important;
}
.chapterThumbTextContainer {
background: none !important;
@ -332,6 +396,23 @@ html {
display: none !important;
}
/* Support for IntroSkipper plugin */
.skipIntro {
transition: 0.2s;
border-radius: 100px !important;
padding: 5px 10px !important;
backdrop-filter: blur(10px) !important;
border: none !important;
}
.skipIntro:hover {
box-shadow: unset !important;
transition: .2s;
transform: scale(1.05);
}
.skipIntro .paper-icon-button-light:hover:not(:disabled) {
color: #FFF !important;
}
/* Settings and dashboard modifications */
@ -542,9 +623,6 @@ html {
padding-left: 390px !important;
min-height: 550px !important;
}
.layout-desktop .detailPagePrimaryContent:has(.genresGroup.hide):has(.directorsGroup.hide):has(.writersGroup.hide) {
min-height: unset !important;
}
/* Move track selection box */
.detailSection {