mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
redesigned actor display
This commit is contained in:
Luke Pulverenti
parent
cb579524df
commit
d76f3f681f
6 changed files with 221 additions and 138 deletions
|
|
@ -64,6 +64,41 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.detailPageContent .ui-collapsible-content {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.galleryImageContainer {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.galleryImageContainer:hover {
|
||||
-moz-box-shadow: 0 0 20px 3px #2572EB;
|
||||
-webkit-box-shadow: 0 0 20px 3px #2572EB;
|
||||
box-shadow: 0 0 20px 3px #2572EB;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
|
||||
.galleryImage {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.galleryImage {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
.libraryPage .ui-content {
|
||||
padding: 10px 20px 100px;
|
||||
|
|
@ -87,12 +122,18 @@
|
|||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.detailPageContent .ui-collapsible-content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
.detailPageContent {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.ehsContent {
|
||||
|
|
@ -110,8 +151,7 @@
|
|||
@media all and (min-width: 1440px) {
|
||||
|
||||
.detailPageContent {
|
||||
width: 70%;
|
||||
max-width: 1200px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.ehsContent {
|
||||
|
|
@ -243,6 +283,7 @@
|
|||
border: 1px solid #666;
|
||||
border-radius: 0;
|
||||
width: 100px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
|
|
@ -293,10 +334,27 @@
|
|||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.userDataIcons .itemProgressText {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.tileItem .itemProgressBar {
|
||||
top: 2px;
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.itemProgressText {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tileItem .itemProgressText {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,18 +101,11 @@
|
|||
height: 150px;
|
||||
}
|
||||
|
||||
|
||||
.posterItemProgress {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
vertical-align: middle;
|
||||
.posterItemProgress .itemProgressBar {
|
||||
height: 12px;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.posterItemProgress .itemProgressBar {
|
||||
height: 12px;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.portraitPosterItem .itemProgressText {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -121,11 +114,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.posterItem .itemProgressText {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
||||
.backdropPosterItem {
|
||||
|
|
|
|||
|
|
@ -684,12 +684,6 @@ progress {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.halfStarRating {
|
||||
background-position: center center;
|
||||
}
|
||||
|
|
@ -724,10 +718,6 @@ progress {
|
|||
width: 57%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
|
|
@ -748,14 +738,6 @@ progress {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.galleryImage {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1440px) {
|
||||
|
||||
.itemDetailImage {
|
||||
|
|
@ -853,8 +835,9 @@ progress {
|
|||
|
||||
/* VideoJS overrides */
|
||||
#videoWindow.tubecss .vjs-controls {
|
||||
height: 5em!important;
|
||||
height: 5em!important;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button {
|
||||
width: 1.5em;
|
||||
border: 0;
|
||||
|
|
@ -874,35 +857,38 @@ progress {
|
|||
background: url("images/media/settings.png");
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
|
||||
opacity: 1.0;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-chapter-button div {
|
||||
background: url("images/media/chapter.png");
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-chapter-button div:hover {
|
||||
opacity: 1.0;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-chapter-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.vjs-chapter-button.vjs-menu-button ul {
|
||||
width: auto;
|
||||
max-width: 25em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.vjs-chapter-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.vjs-chapter-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button {
|
||||
float: left;
|
||||
|
|
@ -911,16 +897,18 @@ progress {
|
|||
width: 2.5em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
|
||||
background: url("images/media/stop.png");
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
margin: -.7em .5em auto 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
|
||||
background: url("images/media/stop.png");
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
margin: -.7em .5em auto 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.vjs-subtitle-button div {
|
||||
background-position: -25px -75px !important;
|
||||
}
|
||||
|
|
@ -931,64 +919,72 @@ progress {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.vjs-subtitle-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.vjs-subtitle-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div {
|
||||
background: url("images/media/language.png") !important;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
|
||||
opacity: 1.0;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.vjs-language-button.vjs-menu-button ul {
|
||||
width: auto;
|
||||
max-width: 25em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.vjs-language-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.vjs-language-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
#videoWindow.tubecss .vjs-mute-control {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-volume-control {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: 4em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: 4em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-time-controls, #videoWindow.tubecss .vjs-time-divider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
height: auto;
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
height: auto;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-time-divider {
|
||||
bottom: 0.4em;
|
||||
left: 25.3em;
|
||||
bottom: 0.4em;
|
||||
left: 25.3em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-item {
|
||||
font-size: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-current-time {
|
||||
left: 26em;
|
||||
left: 26em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-duration {
|
||||
left: 22.5em;
|
||||
}
|
||||
left: 22.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,6 +66,19 @@
|
|||
width: 65%;
|
||||
}
|
||||
|
||||
.smallPosterTileItem .tileImage {
|
||||
height: 125px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.smallPosterTileItem .tileContent {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.smallPosterTileItem .tileName {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.squareTileItem .tileImage {
|
||||
height: 100px;
|
||||
width: 35%;
|
||||
|
|
@ -91,25 +104,38 @@
|
|||
width: 18px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
|
||||
|
||||
.smallPosterTileItem {
|
||||
width: 270px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
.tileItem {
|
||||
width: 46%;
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.backdropTileItem .tileImage {
|
||||
height: 88px;
|
||||
.backdropTileItem, .posterTileItem, .squareTileItem {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.posterTileItem .tileImage {
|
||||
height: 120px;
|
||||
}
|
||||
.backdropTileItem .tileImage {
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.squareTileItem .tileImage {
|
||||
height: 115px;
|
||||
}
|
||||
.posterTileItem .tileImage {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.squareTileItem .tileImage {
|
||||
height: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 850px) {
|
||||
|
|
@ -136,7 +162,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
.tileItem {
|
||||
.backdropTileItem, .posterTileItem, .squareTileItem {
|
||||
width: 47.5%;
|
||||
}
|
||||
|
||||
|
|
@ -170,13 +196,13 @@
|
|||
height: 160px;
|
||||
}
|
||||
|
||||
.tileItem {
|
||||
.backdropTileItem, .posterTileItem, .squareTileItem {
|
||||
width: 31.5%;
|
||||
}
|
||||
|
||||
.squareTileItem .tileImage {
|
||||
height: 130px;
|
||||
}
|
||||
.squareTileItem .tileImage {
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1440px) {
|
||||
|
|
@ -188,13 +214,13 @@
|
|||
height: 150px;
|
||||
}
|
||||
|
||||
.tileItem {
|
||||
.backdropTileItem, .squareTileItem {
|
||||
width: 31.5%;
|
||||
}
|
||||
|
||||
.squareTileItem .tileImage {
|
||||
height: 155px;
|
||||
}
|
||||
.squareTileItem .tileImage {
|
||||
height: 155px;
|
||||
}
|
||||
|
||||
.posterTileItem {
|
||||
width: 23.5%;
|
||||
|
|
@ -211,7 +237,7 @@
|
|||
height: 170px;
|
||||
}
|
||||
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +256,7 @@
|
|||
|
||||
|
||||
@media all and (min-width: 1920px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 31.5%;
|
||||
}
|
||||
|
||||
|
|
@ -256,7 +282,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 2000px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 23.5%;
|
||||
}
|
||||
|
||||
|
|
@ -282,7 +308,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 2200px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 24%;
|
||||
}
|
||||
|
||||
|
|
@ -308,7 +334,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 2540px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 18.75%;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue