mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Rework details page for TV
This commit is contained in:
parent
350195b5bc
commit
ece0b39d70
9 changed files with 115 additions and 65 deletions
|
@ -23,17 +23,17 @@ html {
|
|||
.skinHeader-withBackground {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background: #303030;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
|
||||
background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-dark.png);
|
||||
}
|
||||
|
@ -238,12 +238,13 @@ html {
|
|||
|
||||
.detailRibbon {
|
||||
background: #303030;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
|
||||
background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #f8f8f8;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
|
|
|
@ -21,22 +21,20 @@ html {
|
|||
|
||||
.skinHeader-withBackground {
|
||||
background: #303030;
|
||||
background: -webkit-gradient(linear, left top, right top, from(#291a31), color-stop(#033664), color-stop(#011432), color-stop(#141a3a), to(#291a31));
|
||||
background: -webkit-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
background: -o-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
@ -235,6 +233,10 @@ html {
|
|||
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(30, 30, 30, 0.9);
|
||||
|
|
|
@ -30,6 +30,10 @@ html {
|
|||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
@ -211,6 +215,10 @@ html {
|
|||
background: rgba(32, 32, 32, 0.8);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.noBackdrop .detailRibbon {
|
||||
background: #202020;
|
||||
}
|
||||
|
@ -458,3 +466,8 @@ html {
|
|||
background-color: #00a4dc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layout-tv .emby-button.detailFloatingButton:focus {
|
||||
background-color: #f2f2f2;
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
|
|
@ -38,6 +38,10 @@ html {
|
|||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
@ -237,6 +241,10 @@ html {
|
|||
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
|
|
@ -17,21 +17,20 @@ html {
|
|||
|
||||
.skinHeader-withBackground {
|
||||
background: #000420;
|
||||
background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
background: -webkit-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
}
|
||||
|
||||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
@ -322,6 +321,10 @@ a[data-role=button] {
|
|||
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(30, 30, 30, 0.9);
|
||||
|
|
|
@ -26,9 +26,6 @@ html {
|
|||
|
||||
.formDialogHeader:not(.formDialogHeader-clear),
|
||||
.skinHeader-withBackground {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#0c2450), to(#081b3b));
|
||||
background: -webkit-linear-gradient(top, #0c2450, #081b3b);
|
||||
background: -o-linear-gradient(top, #0c2450, #081b3b);
|
||||
background: linear-gradient(to bottom, #0c2450, #081b3b);
|
||||
background-color: #0c2450;
|
||||
}
|
||||
|
@ -36,13 +33,14 @@ html {
|
|||
.skinHeader.semiTransparent {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.layout-tv .skinHeader.semiTransparent {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../assets/img/banner-light.png);
|
||||
}
|
||||
|
@ -217,6 +215,10 @@ html {
|
|||
background-color: #081b3b;
|
||||
}
|
||||
|
||||
.layout-tv .detailRibbon {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue