diff options
author | 2017-06-02 21:29:45 +0300 | |
---|---|---|
committer | 2017-06-03 15:08:24 +0300 | |
commit | 1f1f4c6be8e7a3a8c2dc5425cb9d71ac76aaf04f (patch) | |
tree | 431b863f3c5aba32a7deff59695a0fbec4820a53 /juick-www/src/main/static/style.css | |
parent | 7817d34a3f012f6c2cd446b70f97d6dcc72e6170 (diff) |
juick-www: embed fixes
Diffstat (limited to 'juick-www/src/main/static/style.css')
-rw-r--r-- | juick-www/src/main/static/style.css | 62 |
1 files changed, 47 insertions, 15 deletions
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css index d34da0e0..fd81070b 100644 --- a/juick-www/src/main/static/style.css +++ b/juick-www/src/main/static/style.css @@ -730,26 +730,58 @@ fieldset { border: 1px dotted #ccc; margin-top: 25px; } +/* embeds */ .embedContainer { - height: 0; - overflow: hidden; - padding-bottom: 56.25%; - padding-top: 30px; - position: relative; - text-align: center; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding: 0; + margin: 30px -3px 15px -3px; } -.embedContainer iframe, -.embedContainer object, -.embedContainer embed { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; +.embedContainer > * { + box-sizing: border-box; + flex-grow: 1; + margin: 3px; + min-width: 49%; } -.embedContainer img { +.embedContainer > .compact { + flex-grow: 0; +} +.embedContainer .picture img { + display: block; +} +.embedContainer img, +.embedContainer video { max-width: 100%; + max-height: 80vh; +} +.embedContainer > .audio, +.embedContainer > .youtube { + min-width: 90%; +} +.embedContainer audio { + width: 100%; +} +.embedContainer iframe { + overflow:hidden; + resize: vertical; + display: block; +} +/* end of embeds*/ +/* nsfw */ +article.nsfw .embedContainer img, +article.nsfw .embedContainer iframe, +article.nsfw .ir img { + opacity: 0.1; + transition: opacity 0.05s; +} +article.nsfw .embedContainer img:hover, +article.nsfw .embedContainer iframe:hover, +article.nsfw .ir img:hover { + opacity: 1.0; } +/* end of nsfw */ @media screen and (max-width: 850px) { body { -moz-text-size-adjust: 100%; |