Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/css/main.css

Issue 29703633: Noissue - Abstracted embedded video for use in blog (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Addressed #7, moved video* to main*, and refactored Video class Created Feb. 23, 2018, 1:30 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -711,8 +711,93 @@
}
/* overriding display:none above */
#footer #social-list
{
display: block;
}
}
+
+/* Video
+ ****************************************************************************/
+
+.video-parent
+{
+ position: relative;
+ display: block;
+ width: 100%;
+ padding: 0;
+ border: 1px solid #c9c9c9;
+ box-shadow: 1px 1px 0 0 #dbdbdb;
+ overflow: hidden;
+}
+
+.video-parent.has-iframe::before
+{
+ display: block;
+ content: "";
+ padding-top: 56.25%;
+}
+
+.video-parent iframe
+{
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+}
+
+.video-link
+{
+ display: block;
+ position: relative;
+}
+
+.video-thumbnail
+{
+ width: 100%;
+ transition: opacity 0.8s;
+ opacity: 0.2;
+}
+
+.hide-disclaimer .video-thumbnail
+{
+ opacity: 1;
+}
+
+.video-disclaimer
+{
+ visibility: visible;
+ opacity: 1;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: 0 1em;
+ background-color: #fff;
+ font-size: 0.9em;
+ text-align: center;
+ transition: opacity 0.8s;
+}
+
+.hide-disclaimer .video-disclaimer
+{
+ visibility: hidden;
+ opacity: 0;
+}
+
+.video-play
+{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ margin-top: -60px;
+ margin-left: -40px;
+}
+
+.hide-disclaimer .video-play
+{
+ margin-top: -40px;
+}

Powered by Google App Engine
This is Rietveld