OLD | NEW |
| (Empty) |
1 /* Copyright 2014 The Chromium Authors. All rights reserved. | |
2 Use of this source code is governed by a BSD-style license that can be | |
3 found in the LICENSE file. */ | |
4 | |
5 a { | |
6 color: #585858; | |
7 } | |
8 | |
9 body { | |
10 background-color: #f7f7f7; | |
11 color: #585858; | |
12 font-size: 125%; | |
13 } | |
14 | |
15 body.safe-browsing { | |
16 background-color: rgb(206, 52, 38); | |
17 color: white; | |
18 } | |
19 | |
20 button { | |
21 background: rgb(76, 142, 250); | |
22 border: 0; | |
23 border-radius: 2px; | |
24 box-sizing: border-box; | |
25 color: #fff; | |
26 cursor: pointer; | |
27 float: right; | |
28 font-size: .875em; | |
29 height: 36px; | |
30 margin: -6px 0 0; | |
31 outline: 0; | |
32 padding: 8px 24px; | |
33 transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); | |
34 } | |
35 | |
36 [dir='rtl'] button { | |
37 float: left; | |
38 } | |
39 | |
40 button:active { | |
41 background: rgb(50, 102, 213); | |
42 } | |
43 | |
44 button:hover { | |
45 box-shadow: 0 1px 3px rgba(0, 0, 0, .50); | |
46 } | |
47 | |
48 #details { | |
49 color: #696969; | |
50 margin: 45px 0 50px; | |
51 } | |
52 | |
53 #details p:not(:first-of-type) { | |
54 margin-top: 20px; | |
55 } | |
56 | |
57 #error-code { | |
58 color: black; | |
59 opacity: .35; | |
60 text-transform: uppercase; | |
61 } | |
62 | |
63 h1 { | |
64 -webkit-margin-after: 16px; | |
65 color: #585858; | |
66 font-size: 1.6em; | |
67 font-weight: normal; | |
68 line-height: 1.25em; | |
69 } | |
70 | |
71 h2 { | |
72 font-size: 1.2em; | |
73 font-weight: normal; | |
74 } | |
75 | |
76 .hidden { | |
77 display: none; | |
78 } | |
79 | |
80 .icon { | |
81 background-repeat: no-repeat; | |
82 background-size: 100%; | |
83 height: 72px; | |
84 margin: 0 0 40px; | |
85 width: 72px; | |
86 } | |
87 | |
88 input[type=checkbox] { | |
89 visibility: hidden; | |
90 } | |
91 | |
92 .interstitial-wrapper { | |
93 box-sizing: border-box; | |
94 font-size: 1em; | |
95 line-height: 1.6em; | |
96 margin: 100px auto 0; | |
97 max-width: 600px; | |
98 width: 100%; | |
99 } | |
100 | |
101 #malware-opt-in { | |
102 font-size: .875em; | |
103 margin-top: 39px; | |
104 } | |
105 | |
106 .nav-wrapper { | |
107 margin-top: 51px; | |
108 } | |
109 | |
110 .nav-wrapper::after { | |
111 clear: both; | |
112 content: ''; | |
113 display: table; | |
114 width: 100%; | |
115 } | |
116 | |
117 #opt-in-label { | |
118 -webkit-margin-start: 32px; | |
119 } | |
120 | |
121 .safe-browsing :-webkit-any( | |
122 a, #details, #details-button, h1, h2, p, .small-link) { | |
123 color: white; | |
124 } | |
125 | |
126 .safe-browsing button { | |
127 background-color: rgb(206, 52, 38); | |
128 border: 1px solid white; | |
129 } | |
130 | |
131 .safe-browsing button:active { | |
132 background-color: rgb(206, 52, 38); | |
133 border-color: rgba(255, 255, 255, .6); | |
134 } | |
135 | |
136 .safe-browsing button:hover { | |
137 box-shadow: 0 2px 3px rgba(0, 0, 0, .5); | |
138 } | |
139 | |
140 .safe-browsing .icon { | |
141 background-image: -webkit-image-set( | |
142 url(../safe_browsing/images/1x/stop_sign.png) 1x, | |
143 url(../safe_browsing/images/2x/stop_sign.png) 2x); | |
144 } | |
145 | |
146 .small-link { | |
147 color: #696969; | |
148 font-size: .875em; | |
149 } | |
150 | |
151 .ssl .icon { | |
152 background-image: -webkit-image-set( | |
153 url(images/1x/brokenssl_red.png) 1x, | |
154 url(images/2x/brokenssl_red.png) 2x); | |
155 } | |
156 | |
157 .styled-checkbox { | |
158 float: left; | |
159 height: 16px; | |
160 margin-top: .36em; | |
161 position: relative; | |
162 width: 16px; | |
163 } | |
164 | |
165 [dir='rtl'] .styled-checkbox { | |
166 float: right; | |
167 } | |
168 | |
169 .styled-checkbox label { | |
170 background: transparent; | |
171 border: white solid 1px; | |
172 border-radius: 2px; | |
173 height: 14px; | |
174 left: 0; | |
175 position: absolute; | |
176 right: 0; | |
177 top: 0; | |
178 width: 14px; | |
179 } | |
180 | |
181 .styled-checkbox label::after { | |
182 background: transparent; | |
183 border: 2px solid white; | |
184 border-right-width: 0; | |
185 border-top-width: 0; | |
186 content: ''; | |
187 height: 4px; | |
188 left: 2px; | |
189 opacity: 0.3; | |
190 position: absolute; | |
191 top: 3px; | |
192 transform: rotate(-45deg); | |
193 width: 9px; | |
194 } | |
195 | |
196 .styled-checkbox input[type=checkbox]:checked + label::after { | |
197 opacity: 1; | |
198 } | |
199 | |
200 .yellow :-webkit-any( | |
201 a, #details, #details-button, h1, .small-link) { | |
202 color: black; | |
203 } | |
204 | |
205 .yellow .icon { | |
206 background-image: -webkit-image-set( | |
207 url(images/1x/brokenssl_yellow.png) 1x, | |
208 url(images/2x/brokenssl_yellow.png) 2x); | |
209 } | |
210 | |
211 @media (max-width: 700px) { | |
212 .interstitial-wrapper { | |
213 padding: 0 10%; | |
214 } | |
215 } | |
216 | |
217 @media (max-height: 600px) { | |
218 .interstitial-wrapper { | |
219 margin-top: 13%; | |
220 } | |
221 } | |
222 | |
223 @media (max-width: 400px) { | |
224 button, | |
225 [dir='rtl'] button { | |
226 float: none; | |
227 font-size: 1em; | |
228 width: 100%; | |
229 } | |
230 | |
231 #details { | |
232 margin: 20px 0 20px 0; | |
233 } | |
234 | |
235 #details p:not(:first-of-type) { | |
236 margin-top: 10px; | |
237 } | |
238 | |
239 #details-button { | |
240 display: block; | |
241 padding-top: 14px; | |
242 text-align: center; | |
243 width: 100%; | |
244 } | |
245 | |
246 .interstitial-wrapper { | |
247 padding: 0 5%; | |
248 } | |
249 | |
250 #malware-opt-in { | |
251 margin-top: 24px; | |
252 } | |
253 | |
254 .nav-wrapper { | |
255 margin-top: 30px; | |
256 } | |
257 | |
258 .small-link { | |
259 font-size: 1em; | |
260 } | |
261 } | |
OLD | NEW |