mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

improve landscape remote controls

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-13 14:04:00 -04:00
parent 1a0ca75287
commit 5187a0d558
3 changed files with 119 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

88
dashboard-ui/css/nowplaying.css
View file

@ -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;
}
}