mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
replace sliders
This commit is contained in:
Luke Pulverenti
parent
09d4af3357
commit
1b74dbdfbf
13 changed files with 1359 additions and 1439 deletions
|
|
@ -59,19 +59,13 @@
|
|||
.videoAdvancedControls {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
#slider-tooltip {
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
background-color: #eee;
|
||||
border: 1px solid #333;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
.videoAdvancedControls iron-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.nowPlayingInfo {
|
||||
text-align: center;
|
||||
|
|
@ -158,7 +152,7 @@
|
|||
.videoTopControlsLogo {
|
||||
float: left;
|
||||
/* Matches .mediaButton */
|
||||
padding-top: 16px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.videoTopControlsLogo img {
|
||||
|
|
@ -184,29 +178,18 @@
|
|||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* Hack for safari because it doesn't allow clickable content over the video surface. */
|
||||
/*.itemVideo { (;top: 9%!important;height: 91% !important;); }
|
||||
/* Hack for safari because it doesn't allow clickable content over the video surface. */
|
||||
/*.itemVideo { (;top: 9%!important;height: 91% !important;); }
|
||||
.itemVideo { [;top: 9%!important;height: 91% !important;]; }*/
|
||||
|
||||
#mediaPlayer .ui-slider-track, .nowPlayingBar .ui-slider-track, .nowPlayingPage .ui-slider-track {
|
||||
border-color: #2ad !important;
|
||||
height: 2px !important;
|
||||
}
|
||||
|
||||
#videoPlayer .inactive {
|
||||
display: none !important;
|
||||
}
|
||||
#videoPlayer .inactive {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.idlePlayer video {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
#mediaPlayer .sliderContainer {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
|
||||
@media all and (max-width: 1200px), all and (max-height: 720px) {
|
||||
|
|
@ -216,13 +199,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px), all and (max-height: 460px) {
|
||||
|
||||
#mediaPlayer .sliderContainer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1400px), all and (max-height: 800px) {
|
||||
|
||||
#mediaPlayer .nowPlayingInfo {
|
||||
|
|
@ -240,12 +216,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
.videoControls .positionSliderContainer {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1300px) {
|
||||
.nowPlayingInfo {
|
||||
padding-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,47 +1,4 @@
|
|||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid #444;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mediaButton {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
|
||||
vertical-align: middle;
|
||||
color: #e8e8e8;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mediaButton:not(paper-icon-button) {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
paper-icon-button.mediaButton {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mediaButton iron-icon {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.mediaButton.remoteControlButton iron-icon {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.videoTopControls .mediaButton {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.videoControls .mediaButton {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#mediaElement {
|
||||
#mediaElement {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -79,21 +36,6 @@ paper-icon-button.mediaButton {
|
|||
}
|
||||
}
|
||||
|
||||
.nowPlayingDoubleText {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.nowPlayingImage {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nowPlayingImage img {
|
||||
height: 60px;
|
||||
margin-right: .5em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.mediaButton img {
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -106,83 +48,10 @@ paper-icon-button.mediaButton {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mediaSlider {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sliderContainer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.positionSliderContainer {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.nowPlayingBar .sliderContainer {
|
||||
margin-top: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.volumeSliderContainer {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.sliderContainer .ui-slider {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sliderContainer .ui-slider-track {
|
||||
margin: 0 15px !important;
|
||||
}
|
||||
|
||||
.volumeSliderContainer .ui-slider-track {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.volumeButton {
|
||||
margin-right: .5em !important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.nowPlayingBar .mediaButton {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.remoteControlButton, .nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton {
|
||||
float: right;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.remoteControlButton {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.nowPlayingBar .currentTime, .nowPlayingBar .positionSliderContainer, .nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBar {
|
||||
padding: 10px 5px 10px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
#nowPlayingBar .positionSliderContainer {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaPlayerAudioContainer {
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
|
|
@ -195,15 +64,3 @@ paper-icon-button.mediaButton {
|
|||
padding: 1em;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,7 +172,4 @@
|
|||
.nowPlayingSelectedPlayer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingPositionSlider .pin > #sliderKnob > #sliderKnobInner::after {
|
||||
}
|
||||
}
|
||||
230
dashboard-ui/css/nowplayingbar.css
Normal file
230
dashboard-ui/css/nowplayingbar.css
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
border-top: 1px solid #444;
|
||||
text-align: center;
|
||||
/*box-shadow: 0 0 8px rgba(255,255,255,.4);*/
|
||||
}
|
||||
|
||||
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
|
||||
vertical-align: middle;
|
||||
color: #e8e8e8;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nowPlayingBar paper-icon-button.mediaButton {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mediaButton iron-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.mediaButton.remoteControlButton iron-icon, .mediaButton.muteButton iron-icon, .mediaButton.unmuteButton iron-icon {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.nowPlayingDoubleText {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.nowPlayingBarInfoContainer {
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.nowPlayingImage {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.nowPlayingImage img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.nowPlayingBar, .nowPlayingImage img {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.nowPlayingBarText {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.nowPlayingBarText {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.nowPlayingBarText {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionContainer {
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider paper-progress {
|
||||
height: 4px !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider #sliderBar {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider #sliderContainer {
|
||||
width: 100%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider #sliderKnob {
|
||||
top: -14px !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider #progressContainer {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider #sliderKnobInner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.nowPlayingBarRight {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mediaButton img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.nowPlayingBarCurrentTime {
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
bottom: 38px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.nowPlayingBarVolumeSlider {
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
|
||||
.nowPlayingBarUserDataButtons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1000px) {
|
||||
|
||||
.nowPlayingBarVolumeSlider, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBar .playlistButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarRight {
|
||||
bottom: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.nowPlayingBarCurrentTime {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter > *:not(.nowPlayingBarCurrentTime) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarRight {
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.nowPlayingBar, .nowPlayingImage img {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionContainer {
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider paper-progress {
|
||||
height: 3px !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarPositionSlider #sliderKnob {
|
||||
top: -15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.nowPlayingBarRight .pauseButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nowPlayingBarRight .unpauseButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -915,7 +915,7 @@ h1 .imageLink {
|
|||
z-index: 1097;
|
||||
color: #fff;
|
||||
border: 0 !important;
|
||||
background-color: rgba(26,26,26,.9);
|
||||
background-color: rgba(26,26,26,.93);
|
||||
}
|
||||
|
||||
.footerOverBottomTabs {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue