diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-09-10 17:53:28 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2018-09-10 19:53:55 +0200 |
commit | bc5009cd45a4fd8fb2178909e1da981e878b879e (patch) | |
tree | 9834adce5e145f934ad48eeef1bbd52674bbbb88 /app/javascript/flavours/glitch/styles/components | |
parent | dfa6fb49277d385b6de93ea43e428d53eb7721a9 (diff) |
[Glitch] Click card to embed external content
Port front-end changes from f7765acf9d92951a616f41b738d5d23ede58c162 to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/status.scss | 63 |
1 files changed, 52 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index b841d73c4..5c1cb62a8 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -623,7 +623,6 @@ .status-card { display: flex; - cursor: pointer; font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; @@ -632,20 +631,58 @@ text-decoration: none; overflow: hidden; - &:hover { - background: lighten($ui-base-color, 8%); + &__actions { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + display: flex; + justify-content: center; + align-items: center; + + & > div { + background: rgba($base-shadow-color, 0.6); + border-radius: 4px; + padding: 12px 9px; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + } + + button, + a { + display: inline; + color: $primary-text-color; + background: transparent; + border: 0; + padding: 0 5px; + text-decoration: none; + opacity: 0.6; + font-size: 18px; + line-height: 18px; + + &:hover, + &:active, + &:focus { + opacity: 1; + } + } + + a { + font-size: 19px; + position: relative; + bottom: -1px; + } } } -.status-card-video, -.status-card-rich, -.status-card-photo { - margin-top: 14px; - overflow: hidden; +a.status-card { + cursor: pointer; - iframe { - width: 100%; - height: auto; + &:hover { + background: lighten($ui-base-color, 8%); } } @@ -673,6 +710,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + text-decoration: none; } .status-card__content { @@ -694,6 +732,7 @@ .status-card__image { flex: 0 0 100px; background: lighten($ui-base-color, 8%); + position: relative; } .status-card.horizontal { @@ -719,6 +758,8 @@ width: 100%; height: 100%; object-fit: cover; + background-size: cover; + background-position: center center; } .status__video-player { |