From 4602a46585ed595b4b578b7cd24a098c70d17496 Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Sat, 2 Sep 2017 18:56:22 +0200 Subject: [PATCH] fix some optical glitches with oembedded links and videos --- view/global.css | 24 ++++++++++++++++++------ view/theme/frio/css/style.css | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/view/global.css b/view/global.css index b8fe5723f2..ab57a762dd 100644 --- a/view/global.css +++ b/view/global.css @@ -59,12 +59,18 @@ span.connector { padding-bottom: 5px; margin-top: 10px; } -.type-link:after, .type-video:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; + +.type-link:after, .type-video:after, +.oembed.video:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.type-video .oembed.video:after { + float: left; } .wall-item-container .wall-item-content .type-link img, @@ -93,6 +99,7 @@ span.connector { font-size: 13px; line-height: normal; } + .type-link .oembed, .type-video .oembed { font-size: 18px; font-weight: 300; @@ -121,6 +128,11 @@ span.connector { float: none; } +.oembed.video .embed_video > div { + position: absolute; + top: 0px; + left: 0px; +} .embed_rich { display: block; transition: height .75s; diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index c782e62335..0e8b11afda 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -1662,6 +1662,38 @@ code > .hl-main { .hl-main ol { line-height: 1.7; } +.type-link img.attachment-image { + width: 100%; +} +.type-link blockquote, .type-video blockquote { + margin: 0; + padding: 10px 0; +} +.oembed.video .embed_video > div::before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + vertical-align: top; + font-size: 3em; + content: "\f01d"; + color: #fff; + bottom: 0px; + right: 10px; + position: absolute; +} +.oembed.video .embed_video > div { + background-color: rgba(0,0,0,0.2); + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} +.oembed.video .embed_video > div:hover { + background-color: rgba(0,0,0,0); +} .wall-item-tags, .itemedited { margin-top: 10px;