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.
« includes/index.tmpl ('K')
|
« static/css/index.css ('k')
|
static/js/index.js » ('j')
|
static/js/main.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| 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; |
| +} |
« includes/index.tmpl ('K')
|
« static/css/index.css ('k')
|
static/js/index.js » ('j')
|
static/js/main.js » ('J')
