diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/status.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/status.scss | 209 |
1 files changed, 127 insertions, 82 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index ee4440e89..00f947cdc 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -1,3 +1,47 @@ +@keyframes spring-flip-in { + 0% { + transform: rotate(0deg); + } + + 30% { + transform: rotate(-242.4deg); + } + + 60% { + transform: rotate(-158.35deg); + } + + 90% { + transform: rotate(-187.5deg); + } + + 100% { + transform: rotate(-180deg); + } +} + +@keyframes spring-flip-out { + 0% { + transform: rotate(-180deg); + } + + 30% { + transform: rotate(62.4deg); + } + + 60% { + transform: rotate(-21.635deg); + } + + 90% { + transform: rotate(7.5deg); + } + + 100% { + transform: rotate(0deg); + } +} + .status__content--with-action { cursor: pointer; } @@ -33,6 +77,13 @@ .status__content__text, .e-content { + overflow: hidden; + + & > ul, + & > ol { + margin-bottom: 20px; + } + h1, h2, h3, h4, h5 { margin-top: 20px; margin-bottom: 20px; @@ -75,6 +126,11 @@ text-align: sub; } + sup { + font-size: smaller; + vertical-align: super; + } + ul, ol { margin-left: 1em; @@ -127,6 +183,15 @@ } } + a.unhandled-link { + color: lighten($ui-highlight-color, 8%); + + .link-origin-tag { + color: $gold-star; + font-size: 0.8em; + } + } + .status__content__spoiler-link { background: lighten($ui-base-color, 30%); @@ -167,7 +232,9 @@ } .notif-cleaning { - .status, .notification-follow { + .status, + .notification-follow, + .notification-follow-request { padding-right: ($dismiss-overlay-width + 0.5rem); } } @@ -187,13 +254,12 @@ } .status__prepend-icon-wrapper { - float: left; - margin: 0 10px 0 -58px; - width: 48px; - text-align: right; + left: -26px; + position: absolute; } -.notification-follow { +.notification-follow, +.notification-follow-request { position: relative; // same like Status @@ -245,7 +311,8 @@ opacity: 1; animation: fade 150ms linear; - .video-player { + .video-player, + .audio-player { margin-top: 8px; } @@ -364,9 +431,7 @@ .status__relative-time { display: inline-block; - margin-left: auto; - padding-left: 18px; - width: 120px; + flex-grow: 1; color: $dark-text-color; font-size: 14px; text-align: right; @@ -376,7 +441,6 @@ } .status__display-name { - margin: 0 auto 0 0; color: $dark-text-color; overflow: hidden; } @@ -388,6 +452,7 @@ .status__info { display: flex; + justify-content: space-between; font-size: 15px; > span { @@ -401,25 +466,41 @@ } .status__info__icons { - margin-left: auto; display: flex; align-items: center; height: 1em; color: $action-button-color; - .status__media-icon { - padding-left: 6px; - padding-right: 1px; + .status__media-icon, + .status__visibility-icon, + .status__reply-icon { + padding-left: 2px; + padding-right: 2px; + } + + .status__collapse-button.active > .fa-angle-double-up { + transform: rotate(-180deg); + } +} + +.no-reduce-motion .status__collapse-button { + &.activate { + & > .fa-angle-double-up { + animation: spring-flip-in 1s linear; + } } - .status__visibility-icon { - padding-left: 4px; + &.deactivate { + & > .fa-angle-double-up { + animation: spring-flip-out 1s linear; + } } } .status__info__account { display: flex; align-items: center; + justify-content: flex-start; } .status-check-box { @@ -439,7 +520,8 @@ white-space: normal; } - .video-player { + .video-player, + .audio-player { margin-top: 8px; max-width: 250px; } @@ -459,9 +541,12 @@ } .status__prepend { - margin: -10px -10px 10px; + margin-top: -10px; + margin-bottom: 10px; + margin-left: 58px; color: $dark-text-color; - padding: 8px 10px 0 68px; + padding: 8px 0; + padding-bottom: 2px; font-size: 14px; position: relative; @@ -544,7 +629,8 @@ } } - .video-player { + .video-player, + .audio-player { margin-top: 8px; } } @@ -620,6 +706,10 @@ a.status__display-name, color: inherit; } +.detailed-status .button.logo-button { + margin-bottom: 15px; +} + .detailed-status__display-name { color: $secondary-text-color; display: block; @@ -653,6 +743,7 @@ a.status__display-name, } .muted { + .status__content, .status__content p, .status__content a, .status__content__text { @@ -866,67 +957,6 @@ a.status-card.compact:hover { background-position: center center; } -.status__video-player { - display: flex; - align-items: center; - background: $base-shadow-color; - box-sizing: border-box; - cursor: default; /* May not be needed */ - margin-top: 8px; - overflow: hidden; - position: relative; - - @include fullwidth-gallery; -} - -.status__video-player-video { - height: 100%; - object-fit: contain; - position: relative; - top: 50%; - transform: translateY(-50%); - width: 100%; - z-index: 1; - - &:not(.letterbox) { - height: 100%; - object-fit: cover; - } -} - -.status__video-player-expand, -.status__video-player-mute { - color: $primary-text-color; - opacity: 0.8; - position: absolute; - right: 4px; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; -} - -.status__video-player-spoiler { - display: none; - color: $primary-text-color; - left: 4px; - position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; - top: 4px; - z-index: 100; - - &.status__video-player-spoiler--visible { - display: block; - } -} - -.status__video-player-expand { - bottom: 4px; - z-index: 100; -} - -.status__video-player-mute { - top: 4px; - z-index: 5; -} - .attachment-list { display: flex; font-size: 14px; @@ -990,3 +1020,18 @@ a.status-card.compact:hover { } } } + +.status__wrapper--filtered__button { + display: inline; + color: lighten($ui-highlight-color, 8%); + border: 0; + background: transparent; + padding: 0; + font-size: inherit; + line-height: inherit; + + &:hover, + &:active { + text-decoration: underline; + } +} |