UX changes from the horrible default emby shit
This commit is contained in:
root
parent
2d1f064608
commit
a77cf88166
680
item/item.css
680
item/item.css
File diff suppressed because one or more lines are too long
@ -458,7 +458,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: inherit;
|
||||
line-height: 1 !important;
|
||||
line-height: 2 !important;
|
||||
}
|
||||
.cardTextLinksLine > .cardTextActionButton {
|
||||
width: auto;
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1,80 @@
|
||||
@media (hover:hover) and (pointer:fine){::-webkit-scrollbar{width:1em;height:1em}.scrollX-mini::-webkit-scrollbar{height:.6em}.scrollY-mini::-webkit-scrollbar{width:.6em}.scrollX-mini{scrollbar-width:thin}.scrollY-mini{scrollbar-width:thin}}::-webkit-scrollbar-thumb{border-radius:.42em}.scrollY::-webkit-scrollbar-thumb{min-height:3em}.scrollX::-webkit-scrollbar-thumb{min-width:3em}.scrollX{overflow-x:auto;-webkit-overflow-scrolling:touch;overflow-y:hidden;white-space:nowrap}.smoothScrollX{scroll-behavior:smooth}.hiddenScrollX,.layout-tv .scrollX{-ms-overflow-style:none;scrollbar-width:none}.hiddenScrollX::-webkit-scrollbar,.layout-tv .scrollX::-webkit-scrollbar{height:0!important;display:none}.scrollY{overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-x:hidden}.smoothScrollY{scroll-behavior:smooth}.overflowYScroll{overflow-y:scroll}.hiddenScrollY,.layout-tv .scrollY{-ms-overflow-style:none;scrollbar-width:none}.hiddenScrollY::-webkit-scrollbar,.layout-tv .scrollY::-webkit-scrollbar{width:0!important;display:none}@media (hover:hover){.hiddenScrollY-hover:not(:hover){-ms-overflow-style:none;scrollbar-width:none}.hiddenScrollY-hover:not(:hover)::-webkit-scrollbar{width:0!important;display:none}}.scrollSliderY{width:100%;box-sizing:border-box}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
::-webkit-scrollbar {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.scrollX-mini::-webkit-scrollbar {
|
||||
height: 0.6em;
|
||||
}
|
||||
.scrollY-mini::-webkit-scrollbar {
|
||||
width: 0.6em;
|
||||
}
|
||||
.scrollX-mini {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.scrollY-mini {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.42em;
|
||||
}
|
||||
.scrollY::-webkit-scrollbar-thumb {
|
||||
min-height: 3em;
|
||||
}
|
||||
.scrollX::-webkit-scrollbar-thumb {
|
||||
min-width: 3em;
|
||||
}
|
||||
.scrollX {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.smoothScrollX {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.hiddenScrollX,
|
||||
.layout-tv .scrollX {
|
||||
-ms-overflow-style: auto;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
.hiddenScrollX::-webkit-scrollbar,
|
||||
.layout-tv .scrollX::-webkit-scrollbar {
|
||||
height: 0 !important;
|
||||
}
|
||||
.scrollY {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.smoothScrollY {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.overflowYScroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.hiddenScrollY,
|
||||
.layout-tv .scrollY {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.hiddenScrollY::-webkit-scrollbar,
|
||||
.layout-tv .scrollY::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.hiddenScrollY-hover:not(:hover) {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.hiddenScrollY-hover:not(:hover)::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.scrollSliderY {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -1 +1,207 @@
|
||||
.verticalSection{contain:style}.verticalSection-cards{contain:layout style}.emby-scroller{contain:style}.emby-scroller.dataGrid-mainscroller-scrollX{contain:style}.verticalSection-extrabottompadding{margin-bottom:2.6em}.sectionTitleContainer{margin:.85em 0 .75em;position:relative;contain:layout style}.sectionTitleContainer-withseeall{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.sectionTitleContainer-withseeall:not(.padded-right){-webkit-padding-end:.25em;padding-inline-end:.25em}.sectionSeeAllButton{position:absolute!important;right:0;inset-inline-start:initial;inset-inline-end:0%;-webkit-padding-end:inherit!important;padding-inline-end:inherit!important}.sectionTitleContainer-cards{margin-bottom:0}.sectionTitle{margin-bottom:1em;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.sectionTitle-cards{-webkit-margin-start:.25em;margin-inline-start:.25em;-webkit-margin-end:.25em;margin-inline-end:.25em;margin-bottom:0;margin-top:.6em;margin-top:.85rem}@media all and (min-width:50em){.sectionTitle-cards{-webkit-margin-start:.425em;margin-inline-start:.425em;-webkit-margin-end:.425em;margin-inline-end:.425em}}.sectionTitleContainer>.sectionTitle{margin-top:0;margin-bottom:0;display:inline-block;vertical-align:middle;white-space:nowrap}.sectionTitleButton{-webkit-margin-start:1em!important;margin-inline-start:1em!important;-webkit-margin-end:0!important;margin-inline-end:0!important;-webkit-flex-shrink:0;flex-shrink:0}.sectionTitleButton+.sectionTitleButton{-webkit-margin-start:.5em!important;margin-inline-start:.5em!important}.sectionTitleIconButton{-webkit-margin-start:1em!important;margin-inline-start:1em!important;-webkit-margin-end:0!important;margin-inline-end:0!important;-webkit-flex-shrink:0;flex-shrink:0;display:inline-block;vertical-align:middle;padding:.5em!important}.horizontalItemsContainer{display:-webkit-flex;display:flex}.sectionTitleTextButton{margin:0!important;display:-webkit-inline-flex!important;display:inline-flex!important}.sectionTitleTextButton:not(.padded-left){padding:0!important}.sectionTitleTextButton.padded-left{padding-bottom:0!important;-webkit-padding-end:0!important;padding-inline-end:0!important;padding-top:0!important}.sectionTitleTextButton>.sectionTitle{margin-bottom:0;margin-top:0}.padded-left{-webkit-padding-start:3.4%;padding-inline-start:3.4%}.padded-left-page{-webkit-padding-start:calc(3.4% + env(safe-area-inset-left,0));padding-inline-start:calc(3.4% + env(safe-area-inset-left,0))}.padded-right{-webkit-padding-end:3.4%;padding-inline-end:3.4%}.padded-left-withalphapicker{-webkit-padding-start:4%;padding-inline-start:4%}.padded-left-withalphapicker.padded-left-page{-webkit-padding-start:calc(4% + env(safe-area-inset-left,0));padding-inline-start:calc(4% + env(safe-area-inset-left,0))}.padded-right-withalphapicker{-webkit-padding-end:4%;padding-inline-end:4%}.padded-right-withlist.padded-right-withalphapicker{-webkit-padding-end:clamp(4%,2.25em,5%);padding-inline-end:clamp(4%,2.25em,5%)}.padded-left-withlist-tv{-webkit-padding-start:6%;padding-inline-start:6%}.padded-left-withlist-tv.padded-left-page{-webkit-padding-start:calc(6% + env(safe-area-inset-left,0));padding-inline-start:calc(6% + env(safe-area-inset-left,0))}.padded-right-withlist-tv{-webkit-padding-end:6%;padding-inline-end:6%}.padded-top{padding-top:1em}.padded-bottom{padding-bottom:1em}.padded-bottom-page{padding-bottom:9em;padding-bottom:calc(9em + env(safe-area-inset-bottom,0))}.layout-tv .padded-top-focusscale{padding-top:1.5em;margin-top:-1.5em}.layout-tv .padded-bottom-focusscale{padding-bottom:1.5em;margin-bottom:-1.5em}@media all and (min-width:60em){.skinBody-withDockedDrawer .page .padded-left{-webkit-padding-start:2.7rem;padding-inline-start:2.7rem}.skinBody-withDockedDrawer .page .padded-right{-webkit-padding-end:2.7rem;padding-inline-end:2.7rem}}@media all and (min-width:90em){.skinBody-withDockedDrawer .page .padded-left{-webkit-padding-start:3rem;padding-inline-start:3rem}.skinBody-withDockedDrawer .page .padded-right{-webkit-padding-end:3rem;padding-inline-end:3rem}}@media all and (min-width:60em){.skinBody-withDockedDrawer .page .padded-right-withalphapicker{-webkit-padding-end:3rem;padding-inline-end:3rem}.skinBody-withDockedDrawer .page .padded-right-withlist.padded-right-withalphapicker{-webkit-padding-end:3rem;padding-inline-end:3rem}}
|
||||
.verticalSection {
|
||||
contain: style;
|
||||
}
|
||||
.verticalSection-cards {
|
||||
contain: layout style;
|
||||
}
|
||||
.emby-scroller {
|
||||
contain: style;
|
||||
}
|
||||
.emby-scroller.dataGrid-mainscroller-scrollX {
|
||||
contain: style;
|
||||
}
|
||||
.verticalSection-extrabottompadding {
|
||||
margin-bottom: 2.6em;
|
||||
}
|
||||
.sectionTitleContainer {
|
||||
margin: 0.85em 0 0.75em;
|
||||
position: relative;
|
||||
contain: layout style;
|
||||
}
|
||||
.sectionTitleContainer-withseeall {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sectionTitleContainer-withseeall:not(.padded-right) {
|
||||
-webkit-padding-end: 0.25em;
|
||||
padding-inline-end: 0.25em;
|
||||
}
|
||||
.sectionSeeAllButton {
|
||||
position: absolute !important;
|
||||
right: 0;
|
||||
inset-inline-start: initial;
|
||||
inset-inline-end: 0%;
|
||||
-webkit-padding-end: inherit !important;
|
||||
padding-inline-end: inherit !important;
|
||||
}
|
||||
.sectionTitleContainer-cards {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sectionTitle {
|
||||
margin-bottom: 1em;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sectionTitle-cards {
|
||||
-webkit-margin-start: 0.25em;
|
||||
margin-inline-start: 0.25em;
|
||||
-webkit-margin-end: 0.25em;
|
||||
margin-inline-end: 0.25em;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0.6em;
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
@media all and (min-width: 50em) {
|
||||
.sectionTitle-cards {
|
||||
-webkit-margin-start: 0.425em;
|
||||
margin-inline-start: 0.425em;
|
||||
-webkit-margin-end: 0.425em;
|
||||
margin-inline-end: 0.425em;
|
||||
}
|
||||
}
|
||||
.sectionTitleContainer > .sectionTitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sectionTitleButton {
|
||||
-webkit-margin-start: 1em !important;
|
||||
margin-inline-start: 1em !important;
|
||||
-webkit-margin-end: 0 !important;
|
||||
margin-inline-end: 0 !important;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sectionTitleButton + .sectionTitleButton {
|
||||
-webkit-margin-start: 0.5em !important;
|
||||
margin-inline-start: 0.5em !important;
|
||||
}
|
||||
.sectionTitleIconButton {
|
||||
-webkit-margin-start: 1em !important;
|
||||
margin-inline-start: 1em !important;
|
||||
-webkit-margin-end: 0 !important;
|
||||
margin-inline-end: 0 !important;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0.5em !important;
|
||||
}
|
||||
.horizontalItemsContainer {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
.sectionTitleTextButton {
|
||||
margin: 0 !important;
|
||||
display: -webkit-inline-flex !important;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
.sectionTitleTextButton:not(.padded-left) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.sectionTitleTextButton.padded-left {
|
||||
padding-bottom: 0 !important;
|
||||
-webkit-padding-end: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.sectionTitleTextButton > .sectionTitle {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.padded-left {
|
||||
-webkit-padding-start: 3.4%;
|
||||
padding-inline-start: 3.4%;
|
||||
}
|
||||
.padded-left-page {
|
||||
-webkit-padding-start: calc(3.4% + env(safe-area-inset-left, 0));
|
||||
padding-inline-start: calc(3.4% + env(safe-area-inset-left, 0));
|
||||
}
|
||||
.padded-right {
|
||||
-webkit-padding-end: 3.4%;
|
||||
padding-inline-end: 3.4%;
|
||||
}
|
||||
.padded-left-withalphapicker {
|
||||
-webkit-padding-start: 4%;
|
||||
padding-inline-start: 4%;
|
||||
}
|
||||
.padded-left-withalphapicker.padded-left-page {
|
||||
-webkit-padding-start: calc(4% + env(safe-area-inset-left, 0));
|
||||
padding-inline-start: calc(4% + env(safe-area-inset-left, 0));
|
||||
}
|
||||
.padded-right-withalphapicker {
|
||||
-webkit-padding-end: 4%;
|
||||
padding-inline-end: 4%;
|
||||
}
|
||||
.padded-right-withlist.padded-right-withalphapicker {
|
||||
-webkit-padding-end: clamp(4%, 2.25em, 5%);
|
||||
padding-inline-end: clamp(4%, 2.25em, 5%);
|
||||
}
|
||||
.padded-left-withlist-tv {
|
||||
-webkit-padding-start: 6%;
|
||||
padding-inline-start: 6%;
|
||||
}
|
||||
.padded-left-withlist-tv.padded-left-page {
|
||||
-webkit-padding-start: calc(6% + env(safe-area-inset-left, 0));
|
||||
padding-inline-start: calc(6% + env(safe-area-inset-left, 0));
|
||||
}
|
||||
.padded-right-withlist-tv {
|
||||
-webkit-padding-end: 6%;
|
||||
padding-inline-end: 6%;
|
||||
}
|
||||
.padded-top {
|
||||
padding-top: 1em;
|
||||
}
|
||||
.padded-bottom {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.padded-bottom-page {
|
||||
padding-bottom: 9em;
|
||||
padding-bottom: calc(9em + env(safe-area-inset-bottom, 0));
|
||||
}
|
||||
.layout-tv .padded-top-focusscale {
|
||||
padding-top: 1.5em;
|
||||
margin-top: -1.5em;
|
||||
}
|
||||
.layout-tv .padded-bottom-focusscale {
|
||||
padding-bottom: 1.5em;
|
||||
margin-bottom: -1.5em;
|
||||
}
|
||||
@media all and (min-width: 60em) {
|
||||
.skinBody-withDockedDrawer .page .padded-left {
|
||||
-webkit-padding-start: 2.7rem;
|
||||
padding-inline-start: 2.7rem;
|
||||
}
|
||||
.skinBody-withDockedDrawer .page .padded-right {
|
||||
-webkit-padding-end: 2.7rem;
|
||||
padding-inline-end: 2.7rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 90em) {
|
||||
.skinBody-withDockedDrawer .page .padded-left {
|
||||
-webkit-padding-start: 5rem;
|
||||
padding-inline-start: 5rem;
|
||||
}
|
||||
.skinBody-withDockedDrawer .page .padded-right {
|
||||
-webkit-padding-end: 5rem;
|
||||
padding-inline-end: 5rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 60em) {
|
||||
.skinBody-withDockedDrawer .page .padded-right-withalphapicker {
|
||||
-webkit-padding-end: 3rem;
|
||||
padding-inline-end: 3rem;
|
||||
}
|
||||
.skinBody-withDockedDrawer
|
||||
.page
|
||||
.padded-right-withlist.padded-right-withalphapicker {
|
||||
-webkit-padding-end: 3rem;
|
||||
padding-inline-end: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user