OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2012 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 html.loading [jsdisplay] { | |
6 display: none; | |
7 } | |
8 | |
9 [hidden] { | |
10 display: none !important; | |
11 } | |
12 | |
13 body { | |
14 background: url('images/stripe.png') rgb(140, 0, 0); | |
15 margin: 0; | |
16 } | |
17 | |
18 .box { | |
19 -webkit-border-radius: 5px; | |
20 -webkit-box-shadow: 3px 3px 8px rgb(140, 0, 0); | |
21 background-color: white; | |
22 color: rgb(75, 75, 77); | |
23 margin: 40px auto; | |
24 padding: 40px; | |
25 text-align: start; | |
26 width: 700px; | |
27 } | |
28 | |
29 .float { | |
30 float: right; | |
31 } | |
32 | |
33 html[dir='rtl'] .float { | |
34 float: left; | |
35 } | |
36 | |
37 .icon { | |
38 margin-top: 23px; | |
39 } | |
40 | |
41 .clear { | |
42 clear: both; | |
43 } | |
44 | |
45 #logo { | |
46 content: -webkit-image-set( | |
47 url('../../../app/theme/%DISTRIBUTION%/product_logo_name_48.png') 1x, | |
48 url('../../../app/theme/%DISTRIBUTION%/product_logo_name_96.png') 2x); | |
49 max-width: 100%; | |
50 } | |
51 | |
52 #headline { | |
53 -webkit-margin-end: 260px; | |
54 color: #333; | |
55 font-size: 22px; | |
56 font-weight: bold; | |
57 margin-top: 20px; | |
58 } | |
59 | |
60 .main { | |
61 -webkit-margin-end: 260px; | |
62 font-size: 16px; | |
63 line-height: 22px; | |
64 margin-bottom: 21px; | |
65 margin-top: 14px; | |
66 } | |
67 | |
68 .advanced { | |
69 -webkit-margin-start: 10px; | |
70 display: inline-block; | |
71 font-size: 13px; | |
72 } | |
73 | |
74 footer { | |
75 font-size: 13px; | |
76 margin-top: 50px; | |
77 } | |
78 | |
79 #learn-more-link { | |
80 display: inline-block; | |
81 font-size: 13px; | |
82 } | |
83 | |
84 #privacy-link { | |
85 display: inline-block; | |
86 } | |
87 | |
88 .submission { | |
89 -webkit-margin-end: 5px; | |
90 margin-bottom: 15px; | |
91 padding: 0; | |
92 } | |
93 | |
94 button { | |
95 -webkit-box-shadow: inset 0 1px 0 0 rgb(129, 169, 243), | |
96 0 1px 2px rgba(0, 0, 0, .2); | |
97 background: -webkit-linear-gradient(rgb(112, 154, 241), | |
98 rgb(108, 148, 240) 44%, rgb(95, 132, 238)); | |
99 border: 1px solid rgb(53, 116, 203); | |
100 border-radius: 3px; | |
101 color: white; | |
102 cursor: pointer; | |
103 display: inline-block; | |
104 font-size: 14px; | |
105 font-weight: bold; | |
106 line-height: 1; | |
107 padding: 11px 38px 10px 38px; | |
108 text-align: center; | |
109 text-decoration: none; | |
110 text-shadow: 0 -1px 0 rgb(72, 101, 228); | |
111 } | |
112 | |
113 button:hover, | |
114 button:focus { | |
115 -webkit-box-shadow: inset 0 1px 0 0 rgb(129, 169, 243), | |
116 0 1px 2px rgba(0, 0, 0, .3); | |
117 background: -webkit-linear-gradient(rgb(165, 188, 245), | |
118 rgb(108, 148, 240) 70%, rgb(95, 132, 238)); | |
119 border: 1px solid rgb(53, 116, 203); | |
120 } | |
121 | |
122 button:active { | |
123 -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, .1); | |
124 background: -webkit-linear-gradient(rgb(112, 154, 241), | |
125 rgb(108, 148, 240) 44%, rgb(95, 132, 238)); | |
126 border: 1px solid rgb(53, 116, 203); | |
127 } | |
128 | |
129 a { | |
130 color: rgb(17, 84, 204); | |
131 } | |
132 | |
133 a:link, | |
134 a:visited { | |
135 text-decoration: none; | |
136 } | |
137 | |
138 a:hover, | |
139 a:active { | |
140 text-decoration: underline; | |
141 } | |
142 | |
143 .checkbox { | |
144 margin-top: 11px; | |
145 position: relative; | |
146 } | |
147 | |
148 .checkbox input { | |
149 -webkit-margin-start: 1px; | |
150 margin-top: 3px; | |
151 position: absolute; | |
152 } | |
153 | |
154 .checkbox span { | |
155 -webkit-margin-start: 21px; | |
156 display: inline-block; | |
157 } | |
158 | |
159 /* When the window is 860px or smaller, switch to dynamically scaling the | |
160 * contents. The text is also allowed to flow around the icon rather than | |
161 * staying in a separate column. The percentage values below are derived so | |
162 * that at 860px everything is the same size as the static values above, and | |
163 * then scales down smoothly from there. */ | |
164 @media screen and (max-width: 860px) { | |
165 .box { | |
166 margin: 4.6%; | |
167 padding: 4.6%; | |
168 width: 81.6%; | |
169 } | |
170 .icon { | |
171 -webkit-margin-start: 2%; | |
172 margin-bottom: 2%; | |
173 max-width: 33%; | |
174 } | |
175 #headline, | |
176 .main { | |
177 -webkit-margin-end: 0; | |
178 } | |
179 } | |
OLD | NEW |