diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/status.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/status.scss | 141 |
1 files changed, 125 insertions, 16 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 453923901..22787ea94 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -3,13 +3,17 @@ } .status__content { + position: relative; + margin: 10px 0; + padding: 0 12px; font-size: 15px; line-height: 20px; + color: $primary-text-color; word-wrap: break-word; font-weight: 400; - overflow: hidden; + overflow: visible; white-space: pre-wrap; - padding-top: 2px; + padding-top: 5px; &:focus { outline: 0; @@ -64,6 +68,15 @@ } } + .status__content__spoiler { + background: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + } + .status__content__spoiler-link { background: lighten($ui-base-color, 30%); @@ -76,7 +89,7 @@ .status__content__text { display: none; - &.status__content__text--visible { + &.status__content__spoiler--visible { display: block; } } @@ -85,20 +98,54 @@ .status__content__spoiler-link { display: inline-block; border-radius: 2px; - background: transparent; - border: 0; + background: lighten($ui-base-color, 30%); + border: none; color: lighten($ui-base-color, 8%); font-weight: 500; font-size: 11px; - padding: 0 6px; + padding: 0 5px; text-transform: uppercase; line-height: inherit; cursor: pointer; + vertical-align: bottom; + + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + + .status__content__spoiler-icon { + display: inline-block; + margin: 0 0 0 5px; + border-left: 1px solid currentColor; + padding: 0 0 0 4px; + font-size: 16px; + vertical-align: -2px; + } +} + +.notif-cleaning { + .status, .notification-follow { + padding-right: ($dismiss-overlay-width + 0.5rem); + } } .status__prepend-icon-wrapper { - left: -26px; - position: absolute; + float: left; + margin: 0 10px 0 -58px; + width: 48px; + text-align: right; +} + +.notification-follow { + position: relative; + + // same like Status + border-bottom: 1px solid lighten($ui-base-color, 8%); + + .account { + border-bottom: 0 none; + } } .focusable { @@ -123,8 +170,8 @@ .status { padding: 8px 10px; - padding-left: 68px; position: relative; + height: auto; min-height: 48px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -190,6 +237,41 @@ } } } + + &.collapsed { + background-position: center; + background-size: cover; + user-select: none; + + &.has-background::before { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8)); + content: ""; + } + + .display-name:hover .display-name__html { + text-decoration: none; + } + + .status__content { + height: 20px; + overflow: hidden; + text-overflow: ellipsis; + + a:hover { + text-decoration: none; + } + } + } + + .notification__message { + margin: -10px -10px 10px; + } } } @@ -204,13 +286,22 @@ } .status__relative-time { + display: inline-block; + margin-left: auto; + padding-left: 18px; + width: 120px; color: $ui-base-lighter-color; - float: right; font-size: 14px; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .status__display-name { + margin: 0 auto 0 0; color: $ui-base-lighter-color; + overflow: hidden; } .status__info .status__display-name { @@ -220,7 +311,20 @@ } .status__info { + display: flex; + margin: 2px 0 5px; font-size: 15px; + line-height: 24px; +} + +.status__info__icons { + flex: none; + position: relative; + color: lighten($ui-base-color, 26%); + + .status__visibility-icon { + padding-left: 6px; + } } .status-check-box { @@ -233,6 +337,13 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + .status__content { + color: #3a3a3a; + a { + color: #005aa9; + } + } } } @@ -245,10 +356,9 @@ } .status__prepend { - margin-left: 68px; + margin: -10px -10px 10px; color: $ui-base-lighter-color; - padding: 8px 0; - padding-bottom: 2px; + padding: 8px 10px 0 68px; font-size: 14px; position: relative; @@ -405,10 +515,9 @@ } .status__avatar { + flex: none; + margin: 0 10px 0 0; height: 48px; - left: 10px; - position: absolute; - top: 10px; width: 48px; } |