diff options
Diffstat (limited to 'app/javascript/styles/mastodon')
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 68 |
1 files changed, 46 insertions, 22 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index be554a502..46a790a7e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -794,6 +794,10 @@ cursor: pointer; } +.status__content { + clear: both; +} + .status__content, .reply-indicator__content { position: relative; @@ -1067,16 +1071,15 @@ } .status__relative-time, -.status__visibility-icon, .notification__relative_time { color: $dark-text-color; float: right; font-size: 14px; + padding-bottom: 1px; } .status__visibility-icon { - margin-left: 4px; - margin-right: 4px; + padding: 0 4px; } .status__display-name { @@ -1717,6 +1720,20 @@ a.account__display-name { align-items: center; justify-content: center; flex-direction: column; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE 10+ */ + + * { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE 10+ */ + } + + &::-webkit-scrollbar, + *::-webkit-scrollbar { + width: 0; + height: 0; + background: transparent; /* Chrome/Safari/Webkit */ + } .image-loader__preview-canvas { max-width: $media-modal-media-max-width; @@ -4603,6 +4620,21 @@ a.status-card.compact:hover { z-index: 100; } +.media-modal__zoom-button { + position: absolute; + right: 64px; + top: 8px; + z-index: 100; + pointer-events: auto; + transition: opacity 0.3s linear; + will-change: opacity; +} + +.media-modal__zoom-button--hidden { + pointer-events: none; + opacity: 0; +} + .onboarding-modal, .error-modal, .embed-modal { @@ -5384,7 +5416,6 @@ a.status-card.compact:hover { } .video-player__controls { - padding: 0 15px; padding-top: 10px; background: transparent; } @@ -5503,7 +5534,8 @@ a.status-card.compact:hover { &__buttons-bar { display: flex; justify-content: space-between; - padding-bottom: 10px; + padding-bottom: 8px; + margin: 0 -5px; .video-player__download__icon { color: inherit; @@ -5520,22 +5552,13 @@ a.status-card.compact:hover { overflow: hidden; text-overflow: ellipsis; - &.left { - button { - padding-left: 0; - } - } - - &.right { - button { - padding-right: 0; - } - } + .player-button { + display: inline-block; + outline: 0; - button { flex: 0 0 auto; background: transparent; - padding: 2px 10px; + padding: 5px; font-size: 16px; border: 0; color: rgba($white, 0.75); @@ -5553,6 +5576,7 @@ a.status-card.compact:hover { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; + margin: 0 5px; } &__time-sep, @@ -5672,7 +5696,7 @@ a.status-card.compact:hover { display: block; position: absolute; height: 4px; - top: 10px; + top: 14px; } &__progress, @@ -5681,7 +5705,7 @@ a.status-card.compact:hover { position: absolute; height: 4px; border-radius: 4px; - top: 10px; + top: 14px; background: lighten($ui-highlight-color, 8%); } @@ -5696,7 +5720,7 @@ a.status-card.compact:hover { border-radius: 50%; width: 12px; height: 12px; - top: 6px; + top: 10px; margin-left: -6px; background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -5720,7 +5744,7 @@ a.status-card.compact:hover { &.detailed, &.fullscreen { .video-player__buttons { - button { + .player-button { padding-top: 10px; padding-bottom: 10px; } |