diff options
Diffstat (limited to 'app/javascript/styles/stream_entries.scss')
| -rw-r--r-- | app/javascript/styles/stream_entries.scss | 372 |
1 files changed, 372 insertions, 0 deletions
diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss new file mode 100644 index 000000000..fac4703b9 --- /dev/null +++ b/app/javascript/styles/stream_entries.scss @@ -0,0 +1,372 @@ +.activity-stream { + clear: both; + box-shadow: 0 0 15px rgba($color8, 0.2); + + .entry { + background: $color5; + + .detailed-status.light, .status.light { + border-bottom: 1px solid $color2; + } + + &:last-child { + &, .detailed-status.light, .status.light { + border-bottom: 0; + border-radius: 0 0 4px 4px; + } + } + + &:first-child { + &, .detailed-status.light, .status.light { + border-radius: 4px 4px 0 0; + } + + &:last-child { + &, .detailed-status.light, .status.light { + border-radius: 4px; + } + } + } + } + + .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: $color4; + } + } + } + + .status__display-name { + display: block; + max-width: 100%; + padding-right: 25px; + color: $color1; + } + + .status__avatar { + position: absolute; + left: 14px; + top: 14px; + width: 48px; + height: 48px; + + & > div { + width: 48px; + height: 48px; + } + + img { + display: block; + border-radius: 4px; + } + } + + .display-name { + display: block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + strong { + font-weight: 500; + color: $color1; + } + + span { + font-size: 14px; + color: $color4; + } + } + + .status__content { + color: $color1; + + a { + color: $color4; + } + + a.status__content__spoiler-link { + color: $color5; + background: $color3; + + &:hover { + background: lighten($color3, 8%); + } + } + } + + .status__attachments { + margin-top: 8px; + overflow: hidden; + width: 100%; + box-sizing: border-box; + position: relative; + + .status__attachments__inner { + display: flex; + height: 214px; + } + } + } + + .detailed-status.light { + padding: 14px; + background: $color5; + cursor: default; + + .detailed-status__display-name { + display: block; + overflow: hidden; + margin-bottom: 15px; + + & > 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: $color1; + } + + span { + font-size: 14px; + color: $color3; + } + } + } + + .avatar { + width: 48px; + height: 48px; + + img { + display: block; + border-radius: 4px; + } + } + + .status__content { + color: $color1; + + a { + color: $color4; + } + + a.status__content__spoiler-link { + color: $color5; + background: $color3; + + &:hover { + background: lighten($color3, 8%); + } + } + } + + .detailed-status__meta { + margin-top: 15px; + color: $color3; + font-size: 14px; + line-height: 18px; + + a { + color: inherit; + } + + span > span { + font-weight: 500; + font-size: 12px; + margin-left: 6px; + display: inline-block; + } + } + + .detailed-status__attachments { + margin-top: 8px; + overflow: hidden; + width: 100%; + box-sizing: border-box; + position: relative; + + .status__attachments__inner { + display: flex; + height: 360px; + } + } + + .video-player { + margin-top: 8px; + height: 300px; + overflow: hidden; + position: relative; + + video { + position: relative; + z-index: 1; + width: 100%; + height: 100%; + object-fit: cover; + top: 50%; + transform: translateY(-50%); + } + } + } + + .media-item, .video-item { + box-sizing: border-box; + position: relative; + left: auto; + top: auto; + right: auto; + bottom: auto; + float: left; + border: medium none; + display: block; + flex: 1 1 auto; + height: 100%; + margin-right: 2px; + + &:last-child { + margin-right: 0; + } + + a { + display: block; + width: 100%; + height: 100%; + background: no-repeat scroll center center / cover; + text-decoration: none; + cursor: zoom-in; + } + + video { + position: relative; + z-index: 1; + width: 100%; + height: 100%; + object-fit: cover; + top: 50%; + transform: translateY(-50%); + } + } + + .video-item { + a { + cursor: pointer; + } + + .video-item__play { + position: absolute; + top: 50%; + left: 50%; + font-size: 36px; + transform: translate(-50%, -50%); + padding: 5px; + border-radius: 100px; + color: rgba($color5, 0.8); + z-index: 1; + } + } + + .media-spoiler { + background: $color3; + width: 100%; + height: 100%; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + transition: all 100ms linear; + z-index: 2; + + &:hover { + background: darken($color3, 5%); + } + + span { + display: block; + + &:first-child { + font-size: 14px; + } + + &:last-child { + font-size: 11px; + font-weight: 500; + } + } + } + + .pre-header { + padding: 14px 0px; + padding-left: (48px + 14px*2); + padding-bottom: 0; + margin-bottom: -4px; + color: $color3; + font-size: 14px; + position: relative; + + .pre-header__icon { + position: absolute; + left: (48px + 14px*2 - 30px); + } + + .status__display-name.muted strong { + color: $color3; + } + } + + .open-in-web-link { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.embed { + .activity-stream { + border-radius: 4px; + box-shadow: none; + + .entry { + &:last-child { + border-radius: 0 0 4px 4px; + } + + &:first-child { + border-radius: 4px 4px 0 0; + + &:last-child { + border-radius: 4px; + } + } + } + } +} |