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

fix transcoding progress bars

This commit is contained in:
Luke Pulverenti 2016-08-03 14:26:19 -04:00
parent 29fdb143ab
commit 29f5388ae5
2 changed files with 51 additions and 7 deletions

View file

@ -867,31 +867,75 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
position: absolute;
}
/* All HTML5 progress enabled browsers */
.transcodingProgress, .playbackProgress {
/* Turns off styling - not usually needed, but good to know. */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* gets rid of default border in Firefox and Opera. */
border: 0;
margin: 0;
height: 14px;
border: 0 solid #222;
border-radius: 0;
width: 50px;
margin-right: 5px;
background: #000 !important; /* !important only needed in polyfill */
}
/* Chrome */
.playbackProgress::-webkit-progress-bar, .transcodingProgress::-webkit-progress-bar {
background: #000;
}
.transcodingSession .playbackProgress {
bottom: 5px;
}
/* Firefox */
.transcodingProgress::-moz-progress-bar {
border-radius: 5px;
border-radius: 0;
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
}
/* Chrome */
.transcodingProgress::-webkit-progress-value {
border-radius: 5px;
border-radius: 0;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important;
background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
}
/* Polyfill */
.transcodingProgress[aria-valuenow]:before {
border-radius: 5px;
border-radius: 0;
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
}
/* Firefox */
.playbackProgress::-moz-progress-bar {
border-radius: 0;
background-image: none;
background-color: #52B54B;
}
/* Chrome */
.playbackProgress::-webkit-progress-value {
border-radius: 0;
background-image: none;
background-color: #52B54B;
}
/* Polyfill */
.playbackProgress[aria-valuenow]:before {
border-radius: 0;
background-image: none;
background-color: #52B54B;
}
@media all and (max-width: 550px) {
.sessionAppName {