diff options
author | ThibG <thib@sitedethib.com> | 2018-08-01 15:29:35 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-01 15:29:35 +0200 |
commit | 20e75666b2c52be6bbc7fe3f6fbe4278f35dde15 (patch) | |
tree | ea47c70306d15e6b187ce0d37f9dd2936ee9b29d /app/javascript/flavours/glitch/styles/stream_entries.scss | |
parent | 88b593a63ff3d607d6f98553654c46bc7cfc0b7b (diff) | |
parent | a0d01119794655dc789eda94905304679de070e8 (diff) |
Merge pull request #619 from ThibG/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/styles/stream_entries.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/stream_entries.scss | 411 |
1 files changed, 114 insertions, 297 deletions
diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index a26859ba1..0094f672c 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -1,368 +1,185 @@ .activity-stream { - clear: both; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border-radius: 4px; + overflow: hidden; + margin-bottom: 10px; + + @media screen and (max-width: $no-gap-breakpoint) { + margin-bottom: 0; + border-radius: 0; + box-shadow: none; + } + + &--headless { + border-radius: 0; + margin: 0; + box-shadow: none; + + .detailed-status, + .status { + border-radius: 0 !important; + } + } div[data-component] { width: 100%; } .entry { - background: $simple-background-color; + background: $ui-base-color; - .detailed-status.light, - .status.light, - .more.light { - border-bottom: 1px solid $ui-secondary-color; + .detailed-status, + .status, + .load-more { animation: none; } &:last-child { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-bottom: 0; border-radius: 0 0 4px 4px; } } &:first-child { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-radius: 4px 4px 0 0; } &:last-child { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-radius: 4px; } } } @media screen and (max-width: 740px) { - &, - .detailed-status.light, - .status.light { + .detailed-status, + .status { border-radius: 0 !important; } } } +} - &.with-header { - .entry { - &:first-child { - &, - .detailed-status.light, - .status.light { - border-radius: 0; - } - - &:last-child { - &, - .detailed-status.light, - .status.light { - border-radius: 0 0 4px 4px; - } - } - } - } - } - - .media-gallery__gifv__label { - bottom: 9px; - } - - .status.light { - padding: 14px 14px 14px (48px + 14px * 2); - position: relative; - min-height: 48px; - cursor: default; - - .status__header { - font-size: 15px; - - .status__meta { - float: right; - font-size: 14px; - - .status__relative-time { - color: $lighter-text-color; - } - } - } - - .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - color: $inverted-text-color; - } - - .status__avatar { - position: absolute; - left: 14px; - top: 14px; - width: 48px; - height: 48px; - @include avatar-size(48px); - - & > div { - width: 48px; - height: 48px; - @include avatar-size(48px); - } - - img { - display: block; - border-radius: 4px; - @include avatar-radius(); - } - } - - .display-name { - display: block; - max-width: 100%; - //overflow: hidden; - //white-space: nowrap; - //text-overflow: ellipsis; - - strong { - font-weight: 500; - color: $inverted-text-color; +.button.logo-button { + flex: 0 auto; + font-size: 14px; + background: $ui-highlight-color; + color: $primary-text-color; + text-transform: none; + line-height: 36px; + height: auto; + padding: 3px 15px; + border: 0; - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } + svg { + width: 20px; + height: auto; + vertical-align: middle; + margin-right: 5px; - span { - font-size: 14px; - color: $light-text-color; - } + path:first-child { + fill: $primary-text-color; } - .status__content { - color: $inverted-text-color; - - a { - color: $highlight-text-color; - } - - a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-base-color; - - &:hover { - background: lighten($ui-base-color, 8%); - } - } + path:last-child { + fill: $ui-highlight-color; } } - .detailed-status.light { - padding: 14px; - background: $simple-background-color; - cursor: default; - - .detailed-status__display-name { - display: block; - overflow: hidden; - margin-bottom: 15px; + &:active, + &:focus, + &:hover { + background: lighten($ui-highlight-color, 10%); - & > div { - float: left; - margin-right: 10px; - } - - .display-name { - display: block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - strong { - font-weight: 500; - color: $inverted-text-color; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } - } - - span { - font-size: 14px; - color: $light-text-color; - } - } - } - - .avatar { - width: 48px; - height: 48px; - @include avatar-size(48px); - - img { - display: block; - border-radius: 4px; - @include avatar-radius(); - } - } - - .status__content { - color: $inverted-text-color; - - a { - color: $highlight-text-color; - } - - a.status__content__spoiler-link { - color: $primary-text-color; - background: $ui-base-color; - - &:hover { - background: lighten($ui-base-color, 8%); - } - } - } - - .detailed-status__meta { - margin-top: 15px; - color: $light-text-color; - font-size: 14px; - line-height: 18px; - - a { - color: inherit; - } - - span > span { - font-weight: 500; - font-size: 12px; - margin-left: 6px; - display: inline-block; - } - } - - .status-card { - border-color: lighten($ui-secondary-color, 4%); - color: $lighter-text-color; - - &:hover { - background: lighten($ui-secondary-color, 4%); - } - } - - .status-card__title, - .status-card__description { - color: $inverted-text-color; + svg path:last-child { + fill: lighten($ui-highlight-color, 10%); } + } - .status-card__image { - background: $ui-secondary-color; + @media screen and (max-width: $no-gap-breakpoint) { + svg { + display: none; } } +} - .media-spoiler { - background: $ui-base-color; - color: $darker-text-color; +.embed, +.public-layout { + .detailed-status { + padding: 15px; } - .pre-header { - padding: 14px 0; - padding-left: (48px + 14px * 2); - padding-bottom: 0; - margin-bottom: -4px; - color: $light-text-color; - font-size: 14px; - position: relative; + .status { + padding: 15px 15px 15px (48px + 15px * 2); + min-height: 48px + 2px; - .pre-header__icon { - position: absolute; - left: (48px + 14px * 2 - 30px); + &__avatar { + left: 15px; + top: 17px; } - .status__display-name.muted strong { - color: $light-text-color; + &__content { + padding-top: 5px; } - } - .open-in-web-link { - text-decoration: none; - - &:hover { - text-decoration: underline; + &__prepend { + margin-left: 48px + 15px * 2; + padding-top: 15px; } - } - .more { - color: $darker-text-color; - display: block; - padding: 14px; - text-align: center; - - &:not(:hover) { - text-decoration: none; + &__prepend-icon-wrapper { + left: -32px; } - } -} -.embed { - .activity-stream { - box-shadow: none; + .media-gallery, + &__action-bar, + .video-player { + margin-top: 10px; + } } } -.entry { - - .detailed-status.light { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; +// Styling from upstream's WebUI, as public pages use the same layout +.embed, +.public-layout { + .status { + .status__info .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; + } - .detailed-status__display-name { - flex: 1; - margin: 0 5px 15px 0; + .status__info { + font-size: 15px; + display: initial; } - .button.button-secondary.logo-button { - flex: 0 auto; + .status__relative-time { + color: $dark-text-color; + float: right; font-size: 14px; + width: auto; + margin: initial; + padding: initial; + } - svg { - width: 20px; - height: auto; - vertical-align: middle; - margin-right: 5px; - - path:first-child { - fill: $ui-primary-color; - } - - path:last-child { - fill: $simple-background-color; - } - } - - &:active, - &:focus, - &:hover { - svg path:first-child { - fill: lighten($ui-primary-color, 4%); - } - } + .status__info .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; + margin: initial; } - .status__content, - .detailed-status__meta { - flex: 100%; + .status__avatar { + height: 48px; + position: absolute; + width: 48px; + margin: initial; } } } |