fix some optical glitches with oembedded links and videos

diff --git a/view/global.css b/view/global.css
index b8fe5723f2c3d78535243ed49ffce33cc8535b17..ab57a762dd9edcf75d1c07f857ebeeb83ec2b89d 100644 (file)
--- 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 c782e62335cba5c38021fdaaaf71847c395e2bcb..0e8b11afdaba3a133880b79505c8da89034c5fb6 100644 (file)
--- 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;