Mirrors/streaming-website
2
0
Fork 0
mirror of https://github.com/voc/streaming-website synced 2024-09-20 22:41:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix ugly loading indicator

Browse source
This commit is contained in:
MaZderMind 2014-12-13 01:16:26 +01:00
parent f22e26f0cb
commit 5fcd49ade5
3 changed files with 71 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/css/lustige-styles.css
View file

@ -5603,7 +5603,6 @@ a.inverted {
opacity: 0; }
.mejs-container .mejs-subs-line.error .error {
opacity: 1; }
.mejs-container .mejs-controls {
visibility: visible !important;
height: 39px; }
@ -5632,6 +5631,8 @@ a.inverted {
left: 6px; }
.mejs-container .mejs-controls .mejs-fullscreen-button button {
background-position: -48px 0; }
.mejs-container .mejs-overlay-loading {
background: none !important; }
/* and now for medium screens: */
@media all and (min-width: 450px) and (max-width: 700px) {

2
assets/css/lustige-styles.css.map
View file

File diff suppressed because one or more lines are too long

130
assets/css/src/lustige-styles.scss
View file

@ -403,76 +403,82 @@ a.inverted {
}
}
.mejs-container .mejs-subs-line {
position: absolute;
bottom: 50px;
height: 85px;
width: 100%;
background-color: rgba(white, .85);
color: black;
font-size: 65px;
text-align: center;
opacity: 0;
padding: 5px 0;
overflow: hidden;
.silence {
font-size: 49%;
.mejs-container {
.mejs-subs-line {
position: absolute;
bottom: 50px;
height: 85px;
width: 100%;
background-color: rgba(white, .85);
color: black;
font-size: 65px;
text-align: center;
opacity: 0;
color: #555;
}
&.silence .silence { opacity: 1; }
padding: 5px 0;
overflow: hidden;
.error {
color: red;
opacity: 0;
}
&.error .error { opacity: 1; }
}
.silence {
font-size: 49%;
opacity: 0;
color: #555;
}
&.silence .silence { opacity: 1; }
.mejs-container .mejs-controls {
$factor: 1.5;
visibility: visible !important;
.mejs-subs-button > span {
cursor: pointer;
color: #e3e3e3;
font-size: 28px;
padding-top: 5px;
padding-left: 5px;
.error {
color: red;
opacity: 0;
}
&.error .error { opacity: 1; }
}
height: 12px + 18px * $factor;
div {
width: 26px * $factor;
height: 26px * $factor;
}
.mejs-button button {
background-size: 144px * $factor 32px * $factor !important;
width: 16px * $factor;
height: 16px * $factor;
}
.mejs-playpause-button {
&.mejs-play button {
background-position: 0 0;
.mejs-controls {
$factor: 1.5;
visibility: visible !important;
.mejs-subs-button > span {
cursor: pointer;
color: #e3e3e3;
font-size: 28px;
padding-top: 5px;
padding-left: 5px;
}
&.mejs-pause button {
background-position: 0 -16px * $factor;
height: 12px + 18px * $factor;
div {
width: 26px * $factor;
height: 26px * $factor;
}
.mejs-button button {
background-size: 144px * $factor 32px * $factor !important;
width: 16px * $factor;
height: 16px * $factor;
}
.mejs-playpause-button {
&.mejs-play button {
background-position: 0 0;
}
&.mejs-pause button {
background-position: 0 -16px * $factor;
}
}
.mejs-volume-button {
&.mejs-mute button {
background-position: -16px * $factor -16px * $factor;
}
&.mejs-unmute button {
background-position: -16px * $factor 0;
}
.mejs-volume-slider {
left: 4px * $factor;
}
}
.mejs-fullscreen-button button {
background-position: -32px * $factor 0;
}
}
.mejs-volume-button {
&.mejs-mute button {
background-position: -16px * $factor -16px * $factor;
}
&.mejs-unmute button {
background-position: -16px * $factor 0;
}
.mejs-volume-slider {
left: 4px * $factor;
}
}
.mejs-fullscreen-button button {
background-position: -32px * $factor 0;
.mejs-overlay-loading {
background: none !important;
}
}