diff options
Diffstat (limited to 'webapp/sass/layout/_webhooks.scss')
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 69 |
1 files changed, 62 insertions, 7 deletions
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index 904c50ccc..f3a8c6fd3 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -38,6 +38,9 @@ .post { .attachment { + &.attachment--opengraph { + max-width: 800px; + } .attachment__content { border-radius: 4px; border-style: solid; @@ -68,11 +71,29 @@ &.attachment__container--danger { border-left-color: #e40303; } + &.attachment__container--opengraph { + display: table; + table-layout: fixed; + width: 100%; + margin: 0; + padding-bottom: 13px; + div { + margin: 0; + } + } .sitename { color: #A3A3A3; } } + .attachment__body__wrap { + &.attachment__body__wrap--opengraph { + display: table-cell; + width: 100%; + vertical-align: top; + } + } + .attachment__body { float: left; overflow-x: auto; @@ -83,13 +104,11 @@ &.attachment__body--no_thumb { width: 100%; } - .attachment__image { - margin-bottom: 0; - max-height: 150px; - max-width: 150px; - &.loading { - height: 150px; - } + &.attachment__body--opengraph { + float: none; + padding-right: 0; + width: 100%; + word-wrap: break-word; } } @@ -97,10 +116,38 @@ display: inline-block; } + .attachment__image__container--openraph { + display: table-cell; + vertical-align: top; + padding-top: 3px; + padding-left: 15px; + } + .attachment__image { margin-bottom: 1em; max-height: 300px; max-width: 500px; + + &.attachment__image--openraph { + margin-bottom: 0; + max-height: 80px; + max-width: 200px; + + &.loading { + height: 80px; + } + + &.large_image { + border-radius: 3px; + margin-top: 10px; + max-height: 200px; + max-width: 400px; + + &.loading { + height: 150px; + } + } + } } .attachment__author-name { @@ -121,6 +168,14 @@ overflow: hidden; white-space: nowrap; } + + &.attachment__title--opengraph { + height: auto; + word-wrap: break-word; + &.is-url { + word-break: break-all + } + } } .attachment-link-more { |