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

Unified Diff: static/css/index.css

Issue 29572820: Issue 5727 - Implement non-embedded homepage video on abp.org (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Created Oct. 10, 2017, 6:09 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/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -59,39 +59,89 @@
}
#content.ua-android #adblock-browser-notification,
#content.ua-ios #adblock-browser-notification
{
display: none;
}
-#main, #video
+#main, #video-container
{
display: inline-block;
vertical-align: top; /* Fix for https://bugzil.la/1320660 */
}
-#video, #maxthon-instruction, #edge-teaser
+#video-container, #maxthon-instruction, #edge-teaser
{
background: #ffffff;
padding: 10px;
border: 1px solid #c9c9c9;
box-shadow: 1px 1px 0 0 #dbdbdb;
}
#maxthon-instruction,
html[lang^="zh_"] #content.maxthon #video,
#content.maxthon #feature-free,
#content.maxthon #terms-message,
#feature-maxthon
{
display: none;
}
+#video-container
+{
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 520px;
+}
+
+#video,
+#video img
+{
+ width: 100%;
+}
+
+#video,
+#video-disclaimer
+{
+ transition: opacity 0.8s;
+}
+
+#video-disclaimer
+{
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ box-sizing: border-box;
+ margin: 20px;
+ background-color: #fff;
+ background-color: rgba(255,255,255,0.8);
juliandoucette 2017/10/11 15:52:37 NIT: I think this opacity makes a negligible diffe
+ font-size: 0.9em;
+ text-align: center;
+}
+
+#video-container:hover a#video,
+#video-container:focus a#video,
+.no-js #video
+{
+ opacity: 0.2;
+}
+
+#video-container:hover a#video + #video-disclaimer,
+#video-container:focus a#video + #video-disclaimer,
+.no-js #video-disclaimer
+{
+ visibility: visible;
+ opacity: 1;
+}
+
html[lang^="zh_"] #content.maxthon #maxthon-instruction
{
display: inline-block;
padding: 0px;
}
#content.maxthon #feature-maxthon
{
« includes/index.tmpl ('K') | « includes/index.tmpl ('k') | static/css/index-mobile.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld