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

Side by Side Diff: static/css/index.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.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
1 #content 1 #content
2 { 2 {
3 padding-top: 5em; 3 padding-top: 5em;
4 } 4 }
5 5
6 #key-facts h1 6 #key-facts h1
7 { 7 {
8 font-size: 16px; 8 font-size: 16px;
9 } 9 }
10 10
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
62 { 62 {
63 display: block; 63 display: block;
64 } 64 }
65 65
66 #content.ua-android #adblock-browser-notification, 66 #content.ua-android #adblock-browser-notification,
67 #content.ua-ios #adblock-browser-notification 67 #content.ua-ios #adblock-browser-notification
68 { 68 {
69 display: none; 69 display: none;
70 } 70 }
71 71
72 #main, #video-container 72 #main, #home-video
73 { 73 {
74 display: inline-block; 74 display: inline-block;
75 vertical-align: top; /* Fix for https://bugzil.la/1320660 */ 75 vertical-align: top; /* Fix for https://bugzil.la/1320660 */
76 } 76 }
77 77
78 #video-container, #maxthon-instruction, #edge-teaser 78 #maxthon-instruction, #edge-teaser
79 { 79 {
80 background: #ffffff; 80 background: #ffffff;
81 padding: 10px; 81 padding: 10px;
82 border: 1px solid #c9c9c9; 82 border: 1px solid #c9c9c9;
83 box-shadow: 1px 1px 0 0 #dbdbdb; 83 box-shadow: 1px 1px 0 0 #dbdbdb;
84 } 84 }
85 85
86 #maxthon-instruction, 86 #maxthon-instruction,
87 html[lang^="zh_"] #content.maxthon #video, 87 html[lang^="zh_"] #content.maxthon #home-video,
88 #content.maxthon #feature-free, 88 #content.maxthon #feature-free,
89 #content.maxthon #terms-message, 89 #content.maxthon #terms-message,
90 #feature-maxthon 90 #feature-maxthon
91 { 91 {
92 display: none; 92 display: none;
93 } 93 }
94 94
95 #video-container 95 #home-video
96 { 96 {
97 position: relative;
98 box-sizing: border-box;
99 width: 100%;
100 max-width: 520px; 97 max-width: 520px;
101 } 98 }
102 99
103 #video
104 {
105 display: block;
106 position: relative;
107 width: 100%;
108 }
109
110 #video-thumbnail
111 {
112 width: 100%;
113 transition: opacity 0.8s;
114 }
115
116 @media(min-width: 768px)
117 {
118 #video-thumbnail
119 {
120 height: 275px;
121 }
122 }
123
124 .no-js #video-thumbnail,
125 .show-disclaimer #video-thumbnail
126 {
127 opacity: 0.2;
128 }
129
130 #video-disclaimer
131 {
132 visibility: hidden;
133 opacity: 0;
134 position: absolute;
135 bottom: 0;
136 left: 0;
137 margin: 20px;
138 background-color: #fff;
139 font-size: 0.9em;
140 text-align: center;
141 transition: opacity 0.8s;
142 }
143
144 .no-js #video-disclaimer,
145 .show-disclaimer #video-disclaimer
146 {
147 visibility: visible;
148 opacity: 1;
149 }
150
151 #video-play
152 {
153 position: absolute;
154 top: 50%;
155 left: 50%;
156 width: 80px;
157 margin-top: -40px;
158 margin-left: -40px;
159 }
160
161 .no-js #video-play,
162 .show-disclaimer #video-play
163 {
164 margin-top: -60px;
165 }
166
167 html[lang^="zh_"] #content.maxthon #maxthon-instruction 100 html[lang^="zh_"] #content.maxthon #maxthon-instruction
168 { 101 {
169 display: inline-block; 102 display: inline-block;
170 padding: 0px; 103 padding: 0px;
171 } 104 }
172 105
173 #content.maxthon #feature-maxthon 106 #content.maxthon #feature-maxthon
174 { 107 {
175 display: inline-block; 108 display: inline-block;
176 } 109 }
(...skipping 337 matching lines...) Expand 10 before | Expand all | Expand 10 after
514 background-position: -68px -151px; 447 background-position: -68px -151px;
515 } 448 }
516 449
517 #content h3.subscribe-header 450 #content h3.subscribe-header
518 { 451 {
519 font-size: 18px; 452 font-size: 18px;
520 margin-bottom: 0px; 453 margin-bottom: 0px;
521 } 454 }
522 455
523 #other-platform > div, 456 #other-platform > div,
524 #content.edge #video, 457 #content.edge #home-video,
525 #edge-teaser 458 #edge-teaser
526 { 459 {
527 display: none; 460 display: none;
528 } 461 }
529 462
530 .warning-platform, 463 .warning-platform,
531 .disclaimer, 464 .disclaimer,
532 #maxthon-notification 465 #maxthon-notification
533 { 466 {
534 display: none; 467 display: none;
(...skipping 147 matching lines...) Expand 10 before | Expand all | Expand 10 after
682 line-height: 1.4; 615 line-height: 1.4;
683 color: #000; 616 color: #000;
684 background-color: #fff; 617 background-color: #fff;
685 border: 2px solid #a1a1a1; 618 border: 2px solid #a1a1a1;
686 } 619 }
687 620
688 #ready-for-windows-notice 621 #ready-for-windows-notice
689 { 622 {
690 margin-bottom: 30px; 623 margin-bottom: 30px;
691 } 624 }
OLDNEW

Powered by Google App Engine
This is Rietveld