diff options
Diffstat (limited to 'app/javascript/styles')
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 63 |
1 files changed, 48 insertions, 15 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 65e075037..8554c19eb 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5309,13 +5309,21 @@ a.status-card.compact:hover { height: 100%; } + .video-player__volume::before, + .video-player__seek::before { + background: rgba($white, 0.15); + } + &.with-light-background { + color: $black; + + .video-player__volume::before, .video-player__seek::before { - color: rgba($black, 0.35); + background: rgba($black, 0.15); } - .video-player__seek__seek { - color: rgba($black, 0.2); + .video-player__seek__buffer { + background: rgba($black, 0.2); } .video-player__buttons button { @@ -5333,10 +5341,6 @@ a.status-card.compact:hover { .video-player__time-current { color: $black; } - - .video-player__volume::before { - background: rgba($black, 0.35); - } } .video-player__seek::before, @@ -5364,6 +5368,7 @@ a.status-card.compact:hover { border-radius: 4px; box-sizing: border-box; direction: ltr; + color: $white; &.editable { border-radius: 0; @@ -5476,6 +5481,10 @@ a.status-card.compact:hover { } &__buttons { + display: flex; + flex: 0 1 auto; + min-width: 30px; + align-items: center; font-size: 16px; white-space: nowrap; overflow: hidden; @@ -5494,6 +5503,7 @@ a.status-card.compact:hover { } button { + flex: 0 0 auto; background: transparent; padding: 2px 10px; font-size: 16px; @@ -5508,6 +5518,13 @@ a.status-card.compact:hover { } } + &__time { + display: inline; + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + } + &__time-sep, &__time-total, &__time-current { @@ -5517,7 +5534,6 @@ a.status-card.compact:hover { &__time-current { color: $white; - margin-left: 60px; } &__time-sep { @@ -5531,9 +5547,22 @@ a.status-card.compact:hover { } &__volume { + flex: 0 0 auto; + display: inline-flex; cursor: pointer; height: 24px; - display: inline; + position: relative; + overflow: hidden; + + .no-reduce-motion & { + transition: all 100ms linear; + } + + &.active { + overflow: visible; + width: 50px; + margin-right: 10px; + } &::before { content: ""; @@ -5543,8 +5572,9 @@ a.status-card.compact:hover { display: block; position: absolute; height: 4px; - left: 70px; - bottom: 20px; + left: 0; + top: 50%; + transform: translate(0, -50%); } &__current { @@ -5552,8 +5582,9 @@ a.status-card.compact:hover { position: absolute; height: 4px; border-radius: 4px; - left: 70px; - bottom: 20px; + left: 0; + top: 50%; + transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); } @@ -5563,8 +5594,10 @@ a.status-card.compact:hover { border-radius: 50%; width: 12px; height: 12px; - bottom: 16px; - left: 70px; + top: 50%; + left: 0; + margin-left: -6px; + transform: translate(0, -50%); transition: opacity .1s ease; background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); |