Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Polish video player CSS, add timer on fullscreen/modal/public pages (#5928)

Browse source
This commit is contained in:
Eugen Rochko 2017-12-09 00:55:58 +01:00 • committed by GitHub
parent b0db4dad79
commit 70ce2a2095
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 104 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

69
app/javascript/styles/mastodon/components.scss
View file

@ -3998,6 +3998,7 @@ button.icon-button.active i.fa-retweet {
position: relative;
background: $base-shadow-color;
max-width: 100%;
border-radius: 4px;
video {
height: 100%;
@ -4032,8 +4033,8 @@ button.icon-button.active i.fa-retweet {
left: 0;
right: 0;
box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent);
padding: 0 10px;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
padding: 0 15px;
opacity: 0;
transition: opacity .1s ease;
@ -4086,40 +4087,67 @@ button.icon-button.active i.fa-retweet {
}
}
&__buttons {
&__buttons-bar {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}
&__buttons {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.left {
float: left;
button {
padding-right: 10px;
padding-left: 0;
}
}
&.right {
float: right;
button {
padding-left: 10px;
padding-right: 0;
}
}
button {
background: transparent;
padding: 0;
padding: 2px 10px;
font-size: 16px;
border: 0;
color: $white;
color: rgba($white, 0.75);
&:active,
&:hover,
&:focus {
color: $ui-highlight-color;
color: $white;
}
}
}
&__time-sep,
&__time-total,
&__time-current {
font-size: 14px;
font-weight: 500;
}
&__time-current {
color: $white;
margin-left: 10px;
}
&__time-sep {
display: inline-block;
margin: 0 6px;
}
&__time-sep,
&__time-total {
color: $white;
}
&__seek {
cursor: pointer;
height: 24px;
@ -4129,6 +4157,7 @@ button.icon-button.active i.fa-retweet {
content: "";
width: 100%;
background: rgba($white, 0.35);
border-radius: 4px;
display: block;
position: absolute;
height: 4px;
@ -4140,8 +4169,9 @@ button.icon-button.active i.fa-retweet {
display: block;
position: absolute;
height: 4px;
border-radius: 4px;
top: 10px;
background: $ui-highlight-color;
background: lighten($ui-highlight-color, 8%);
}
&__buffer {
@ -4158,7 +4188,8 @@ button.icon-button.active i.fa-retweet {
top: 6px;
margin-left: -6px;
transition: opacity .1s ease;
background: $ui-highlight-color;
background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
pointer-events: none;
&.active {
@ -4172,6 +4203,16 @@ button.icon-button.active i.fa-retweet {
}
}
}
&.detailed,
&.fullscreen {
.video-player__buttons {
button {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
}
.media-spoiler-video {