mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
improve landscape remote controls
This commit is contained in:
parent
1a0ca75287
commit
5187a0d558
3 changed files with 119 additions and 73 deletions
|
@ -1,16 +1,36 @@
|
|||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
padding: 14px 0;
|
||||
margin: 3px 1px;
|
||||
width: 70px;
|
||||
background: #383838;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 250px;
|
||||
max-width: 250px;
|
||||
max-height: 220px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.nowPlayingTimeContainer {
|
||||
max-width: 280px;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
.nowPlayingPage .positionSliderContainer {
|
||||
width: 350px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.nowPlayingPage .positionSliderContainer .ui-slider-track {
|
||||
margin: 0 0 !important;
|
||||
}
|
||||
|
||||
.nowPlayingPage .positionSliderContainer .ui-slider {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nowPlayingNavButtonContainer {
|
||||
width: 400px;
|
||||
}
|
||||
|
@ -47,12 +67,12 @@
|
|||
}
|
||||
|
||||
.chapterPosterItem {
|
||||
width: 240px!important;
|
||||
width: 240px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chapterPosterItem .posterItemImage {
|
||||
height: 135px!important;
|
||||
height: 135px !important;
|
||||
}
|
||||
|
||||
.currentChapter {
|
||||
|
@ -61,49 +81,63 @@
|
|||
box-shadow: 0 0 12px 7px #cc3333;
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
|
||||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
font-size: 26px;
|
||||
}
|
||||
@media all and (max-width: 700px) {
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 160px;
|
||||
max-width: 250px;
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingPage .positionSliderContainer {
|
||||
width: 300px;
|
||||
@media all and (max-width: 600px) {
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 160px;
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 600px) {
|
||||
|
||||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 160px;
|
||||
max-width: 250px;
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 500px) {
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
||||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
font-size: 24px;
|
||||
.nowPlayingPageImage img {
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
|
||||
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.nowPlayingPage .positionSliderContainer {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.nowPlayingNavButtonContainer {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingPageTitle {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.nowPlayingInfoMetadata, .nowPlayingInfoButtons {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons {
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue