Merge branch 'master' into 'convert-to-csss'
This commit is contained in:
Guilherme Danno
commit
b38aec0526
606 changed files with 57780 additions and 51916 deletions
|
|
@ -235,6 +235,15 @@ div[data-role=controlgroup] a.ui-btn-active {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.localUsers .cardText-secondary {
|
||||
white-space: pre-wrap;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.customCssContainer textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 70em) {
|
||||
.dashboardSections {
|
||||
-webkit-flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -30,6 +30,10 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-items-flex-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -38,6 +42,10 @@
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-content-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-wrap-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
html {
|
||||
@include font;
|
||||
font-size: 93%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -26,7 +25,9 @@ h3 {
|
|||
}
|
||||
|
||||
.layout-tv {
|
||||
font-size: 130%;
|
||||
/* Per WebOS and Tizen guidelines, fonts must be 20px minimum.
|
||||
This takes the 16px baseline and multiplies it by 1.25 to get 20px. */
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.layout-mobile {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
html {
|
||||
font-size: 82% !important;
|
||||
}
|
||||
|
||||
.formDialogFooter {
|
||||
position: static !important;
|
||||
margin: 0 -1em !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
padding-top: 7em !important;
|
||||
}
|
||||
|
||||
.layout-mobile .libraryPage {
|
||||
padding-top: 4em !important;
|
||||
}
|
||||
|
||||
.itemDetailPage {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.layout-tv .itemDetailPage {
|
||||
padding-top: 4.2em !important;
|
||||
}
|
||||
|
||||
.standalonePage {
|
||||
padding-top: 4.5em !important;
|
||||
}
|
||||
|
|
@ -164,6 +164,13 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: layout style paint;
|
||||
transition: background ease-in-out 0.5s;
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader {
|
||||
/* In TV layout, it makes more sense to keep the top bar at the top of the page
|
||||
Having it follow the view only makes us lose vertical space, while not being focusable */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hiddenViewMenuBar .skinHeader {
|
||||
|
|
@ -178,6 +185,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-tv .sectionTabs {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.selectedMediaFolder {
|
||||
background-color: #f2f2f2 !important;
|
||||
}
|
||||
|
|
@ -235,12 +246,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-desktop .searchTabButton,
|
||||
.layout-mobile .searchTabButton,
|
||||
.layout-tv .headerSearchButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mainDrawer-scrollContainer {
|
||||
padding-bottom: 10vh;
|
||||
}
|
||||
|
|
@ -272,7 +277,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 84em) {
|
||||
@media all and (max-width: 100em) {
|
||||
.withSectionTabs .headerTop {
|
||||
padding-bottom: 0.55em;
|
||||
}
|
||||
|
|
@ -280,9 +285,13 @@
|
|||
.sectionTabs {
|
||||
font-size: 83.5%;
|
||||
}
|
||||
|
||||
.layout-tv .sectionTabs {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 84em) {
|
||||
@media all and (min-width: 100em) {
|
||||
.headerTop {
|
||||
padding: 0.8em 0.8em;
|
||||
}
|
||||
|
|
@ -438,16 +447,17 @@
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
height: 50vh;
|
||||
height: 40vh;
|
||||
position: relative;
|
||||
animation: backdrop-fadein 800ms ease-in normal both;
|
||||
}
|
||||
|
||||
.layout-mobile .itemBackdrop {
|
||||
background-attachment: scroll;
|
||||
height: 26.5vh;
|
||||
}
|
||||
|
||||
.layout-desktop .itemBackdrop::after,
|
||||
.layout-tv .itemBackdrop::after {
|
||||
.layout-desktop .itemBackdrop::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -455,18 +465,28 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .itemBackdrop,
|
||||
.layout-tv .noBackdrop .itemBackdrop {
|
||||
.layout-tv .itemBackdrop,
|
||||
.layout-desktop .noBackdrop .itemBackdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detailPageContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 2%;
|
||||
padding-left: 32.45vw;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPageContent {
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
}
|
||||
|
||||
.layout-desktop .detailPageContent .emby-scroller,
|
||||
.layout-tv .detailPageContent .emby-scroller {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailPageContent,
|
||||
.layout-tv .noBackdrop .detailPageContent {
|
||||
margin-top: 2.5em;
|
||||
|
|
@ -477,6 +497,10 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.detailSectionContent a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.personBackdrop {
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -495,7 +519,23 @@
|
|||
|
||||
.parentName {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
margin: 0 0 0;
|
||||
}
|
||||
|
||||
.layout-mobile .parentName {
|
||||
margin: 0.6em 0 0;
|
||||
}
|
||||
|
||||
.musicParentName {
|
||||
margin: 0.15em 0 0.2em;
|
||||
}
|
||||
|
||||
.layout-mobile .musicParentName {
|
||||
margin: -0.25em 0 0.25em;
|
||||
}
|
||||
|
||||
.layout-mobile .itemExternalLinks {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mainDetailButtons {
|
||||
|
|
@ -503,8 +543,6 @@
|
|||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
|
|
@ -520,6 +558,35 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.itemName.originalTitle {
|
||||
margin: 0.2em 0 0.2em;
|
||||
}
|
||||
|
||||
.itemName.parentNameLast {
|
||||
margin: 0 0 0;
|
||||
}
|
||||
|
||||
.layout-mobile .itemName.parentNameLast {
|
||||
margin: 0.4em 0 0.4em;
|
||||
}
|
||||
|
||||
.layout-mobile h1.itemName,
|
||||
.layout-mobile h1.parentName {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.itemName.parentNameLast.withOriginalTitle {
|
||||
margin: 0 0 0;
|
||||
}
|
||||
|
||||
.layout-mobile .itemName.parentNameLast.withOriginalTitle {
|
||||
margin: 0.6em 0 0;
|
||||
}
|
||||
|
||||
.layout-mobile .itemName.originalTitle {
|
||||
margin: 0.5em 0 0.5em;
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -546,6 +613,19 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-mobile .mainDetailButtons {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0.15em 0 0.2em;
|
||||
}
|
||||
|
||||
.layout-mobile .subtitle {
|
||||
margin: 0.2em 0 0.2em;
|
||||
}
|
||||
|
||||
.detailPagePrimaryContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -553,10 +633,14 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.layout-tv .detailPagePrimaryContainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-mobile .detailPagePrimaryContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0.5em 3.3% 0.5em;
|
||||
}
|
||||
|
||||
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
|
||||
|
|
@ -566,13 +650,18 @@
|
|||
padding-left: 32.45vw;
|
||||
}
|
||||
|
||||
.layout-desktop .detailSticky,
|
||||
.layout-tv .detailSticky {
|
||||
.layout-desktop .detailRibbon {
|
||||
margin-top: -7.2em;
|
||||
height: 7.2em;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailSticky,
|
||||
.layout-tv .noBackdrop .detailSticky {
|
||||
.layout-tv .detailRibbon {
|
||||
margin-top: 0;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailRibbon,
|
||||
.layout-tv .noBackdrop .detailRibbon {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -584,6 +673,9 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-mobile .infoText {
|
||||
|
|
@ -594,12 +686,29 @@
|
|||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.detailImageContainer {
|
||||
position: relative;
|
||||
margin-top: -25vh;
|
||||
.layout-mobile .detailPageSecondaryContainer {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.layout-mobile .detailImageContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detailImageContainer .card {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
float: left;
|
||||
width: 25vw;
|
||||
z-index: 3;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.detailImageContainer .card.backdropCard {
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
.detailImageContainer .card.squareCard {
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailImageContainer,
|
||||
|
|
@ -612,11 +721,11 @@
|
|||
}
|
||||
|
||||
.detailLogo {
|
||||
width: 30vw;
|
||||
height: 25vh;
|
||||
width: 25vw;
|
||||
height: 16vh;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
right: 20vw;
|
||||
right: 25vw;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
|
@ -641,7 +750,8 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
|
||||
.itemDetailGalleryLink.defaultCardBackground {
|
||||
height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
|
||||
/* Dirty hack to get it to look somewhat square. Less than ideal. */
|
||||
height: 23vw;
|
||||
}
|
||||
|
||||
.itemDetailGalleryLink.defaultCardBackground > .material-icons {
|
||||
|
|
@ -655,14 +765,18 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.layout-desktop .detailPageWrapperContainer,
|
||||
.layout-tv .detailPageWrapperContainer {
|
||||
margin-top: 7.2em;
|
||||
.layout-desktop .itemBackdrop {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
|
||||
.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
|
||||
padding-left: 3.3%;
|
||||
.layout-desktop .detailPageWrapperContainer,
|
||||
.layout-tv .detailPageWrapperContainer {
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
|
||||
.layout-desktop .detailImageContainer .card,
|
||||
.layout-tv .detailImageContainer .card {
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.btnPlaySimple {
|
||||
|
|
@ -677,13 +791,8 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
|
||||
.emby-button.detailFloatingButton {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -2.2em 0 0 -2.2em;
|
||||
padding: 0.4em !important;
|
||||
font-size: 1.4em;
|
||||
margin-right: 0.5em !important;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
|
|
@ -693,16 +802,12 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
|
||||
@media all and (max-width: 62.5em) {
|
||||
.parentName {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.itemDetailPage {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.detailimg-hidemobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 31.25em) {
|
||||
|
|
@ -750,7 +855,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
margin: 0 !important;
|
||||
padding: 0.5em 0.7em !important;
|
||||
padding: 0.7em 0.7em !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 29em) {
|
||||
|
|
@ -797,9 +902,9 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
|
||||
.detailImageProgressContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 22.786458333333332vw;
|
||||
margin-top: -0.4vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detailButton-text {
|
||||
|
|
@ -818,25 +923,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 62.5em) {
|
||||
.headerTop {
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
}
|
||||
|
||||
.headerTabs {
|
||||
align-self: center;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -4.2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detailFloatingButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 100em) {
|
||||
.personBackdrop {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -845,6 +932,11 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
font-size: 108%;
|
||||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.layout-tv .mainDetailButtons {
|
||||
font-size: 108%;
|
||||
margin: 1em 0 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 50em) {
|
||||
|
|
@ -866,6 +958,10 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
}
|
||||
}
|
||||
|
||||
.detailVerticalSection .emby-scrollbuttons {
|
||||
padding-top: 0.4em;
|
||||
}
|
||||
|
||||
.layout-tv .detailVerticalSection {
|
||||
margin-bottom: 3.4em !important;
|
||||
}
|
||||
|
|
@ -954,6 +1050,10 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
margin-bottom: 2.7em;
|
||||
}
|
||||
|
||||
.layout-mobile .verticalSection-extrabottompadding {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.sectionTitleButton,
|
||||
.sectionTitleIconButton {
|
||||
margin-right: 0 !important;
|
||||
|
|
@ -979,7 +1079,13 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
|
||||
div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
||||
margin: 0;
|
||||
padding-top: 1.25em;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
||||
margin: 0;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.sectionTitleButton {
|
||||
|
|
@ -1046,13 +1152,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
|||
}
|
||||
|
||||
.layout-tv .padded-top-focusscale {
|
||||
padding-top: 1em;
|
||||
margin-top: -1em;
|
||||
padding-top: 1.5em;
|
||||
margin-top: -1.5em;
|
||||
}
|
||||
|
||||
.layout-tv .padded-bottom-focusscale {
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: -1em;
|
||||
padding-bottom: 1.5em;
|
||||
margin-bottom: -1.5em;
|
||||
}
|
||||
|
||||
@media all and (min-height: 31.25em) {
|
||||
|
|
@ -1132,6 +1238,12 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
|||
|
||||
.trackSelections .selectContainer .selectLabel {
|
||||
margin: 0 0.2em 0 0;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.layout-mobile .detailsGroupItem .label,
|
||||
.layout-mobile .trackSelections .selectContainer .selectLabel {
|
||||
flex-basis: 4.5em;
|
||||
}
|
||||
|
||||
.trackSelections .selectContainer .detailTrackSelect {
|
||||
|
|
@ -1144,3 +1256,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
|
|||
margin-top: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.overview-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.detail-clamp-text {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 12;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@media all and (min-width: 40em) {
|
||||
.detail-clamp-text {
|
||||
-webkit-line-clamp: 6;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
.hiddenScrollX,
|
||||
.layout-tv .scrollX {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.hiddenScrollX-forced {
|
||||
|
|
@ -40,6 +41,7 @@
|
|||
.hiddenScrollY,
|
||||
.layout-tv .smoothScrollY {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ body {
|
|||
|
||||
.material-icons {
|
||||
/* Fix font ligatures on older WebOS versions */
|
||||
-webkit-font-feature-settings: "liga";
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.backgroundContainer {
|
||||
|
|
@ -44,10 +44,6 @@ body {
|
|||
.layout-mobile,
|
||||
.layout-tv {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -126,3 +122,30 @@ form {
|
|||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
/* make sure the bottom of the drawer is visible when music is playing */
|
||||
padding-bottom: 4em;
|
||||
}
|
||||
|
||||
.force-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.hide-scroll {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.margin-auto-x {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.margin-auto-y {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,31 +6,43 @@
|
|||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.osdPoster img,
|
||||
.pageContainer,
|
||||
.videoOsdBottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
|
||||
padding-top: 7.5em;
|
||||
padding-bottom: 1.75em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
will-change: opacity;
|
||||
transition: opacity 0.3s ease-out;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.osdHeader {
|
||||
-webkit-transition: opacity 0.3s ease-out;
|
||||
-o-transition: opacity 0.3s ease-out;
|
||||
.skinHeader-withBackground.osdHeader {
|
||||
transition: opacity 0.3s ease-out;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.7) !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
color: #eee !important;
|
||||
background: linear-gradient(180deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
|
||||
backdrop-filter: none;
|
||||
color: #eee;
|
||||
height: 7.5em;
|
||||
}
|
||||
|
||||
.osdHeader-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
|
||||
.osdHeader .headerTop {
|
||||
max-height: 3.5em;
|
||||
}
|
||||
|
||||
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton):not(.headerSyncButton) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -87,34 +99,17 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.videoOsdBottom {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 1%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
will-change: opacity;
|
||||
-webkit-transition: opacity 0.3s ease-out;
|
||||
-o-transition: opacity 0.3s ease-out;
|
||||
transition: opacity 0.3s ease-out;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.videoOsdBottom-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.osdControls {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
|
||||
.layout-desktop .osdControls {
|
||||
max-width: calc(100vh * 1.77 - 2vh);
|
||||
}
|
||||
|
||||
.videoOsdBottom .buttons {
|
||||
|
|
@ -146,7 +141,7 @@
|
|||
}
|
||||
|
||||
.volumeButtons {
|
||||
margin: 0 0.5em 0 auto;
|
||||
margin: 0 1em 0 0.29em;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
|
|
@ -154,33 +149,13 @@
|
|||
|
||||
.osdTimeText {
|
||||
margin-left: 1em;
|
||||
margin-right: auto;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.osdPoster {
|
||||
width: 10%;
|
||||
position: relative;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.osdPoster img {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 0 0 1.9vh #000;
|
||||
box-shadow: 0 0 1.9vh #000;
|
||||
border: 0.08em solid #222;
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.osdTitle,
|
||||
.osdTitleSmall {
|
||||
margin: 0 1em 0 0;
|
||||
|
|
@ -248,14 +223,7 @@
|
|||
animation: spin 4s linear infinite;
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@media all and (max-width: 30em) {
|
||||
.btnFastForward,
|
||||
.btnRewind,
|
||||
.osdMediaInfo,
|
||||
.osdPoster {
|
||||
display: none !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue