OLD | NEW |
| (Empty) |
1 body | |
2 { | |
3 display: flex; | |
4 flex-direction: column; | |
5 align-items: center; | |
6 margin: 1.2rem 0.3rem; | |
7 font-family: Segoe UI, Arial, sans-serif; | |
8 font-size: 1.25rem; | |
9 color: #494949; | |
10 background-color: #F3F3F3; | |
11 } | |
12 | |
13 html:not([dir="rtl"]) header | |
14 { | |
15 text-align: right; | |
16 margin-right: 2rem; | |
17 } | |
18 | |
19 html[dir="rtl"] header | |
20 { | |
21 text-align: left; | |
22 margin-left: 2rem; | |
23 } | |
24 | |
25 header | |
26 { | |
27 display: flex; | |
28 flex-direction: row; | |
29 flex-shrink: 0; | |
30 align-items: flex-end; | |
31 margin-bottom: 2rem; | |
32 } | |
33 | |
34 header > .title | |
35 { | |
36 display: flex; | |
37 flex-direction: column; | |
38 } | |
39 | |
40 .title > h1 | |
41 { | |
42 margin: 0rem; | |
43 font-size: 1.5rem; | |
44 font-weight: 100; | |
45 } | |
46 | |
47 .title > h1 > strong | |
48 { | |
49 font-weight: 700; | |
50 } | |
51 | |
52 .title > p | |
53 { | |
54 margin: 0rem; | |
55 font-size: 2.4rem; | |
56 } | |
57 | |
58 main | |
59 { | |
60 flex-grow: 1; | |
61 display: flex; | |
62 flex-direction: column; | |
63 box-sizing: border-box; | |
64 width: 46.3rem; | |
65 padding: 1.4rem; | |
66 background-color: #FFFFFF; | |
67 border: 1px solid #CDCDCD; | |
68 } | |
69 | |
70 .page:not([hidden]) | |
71 { | |
72 display: flex; | |
73 flex-grow: 1; | |
74 flex-direction: column; | |
75 } | |
76 | |
77 main h1 | |
78 { | |
79 padding: 0; | |
80 margin: 1.4rem 0rem; | |
81 } | |
82 | |
83 #dataCollectorProgressContainer | |
84 { | |
85 display: flex; | |
86 flex-direction: row; | |
87 justify-content: center; | |
88 margin-top: 2rem; | |
89 } | |
90 | |
91 #typeSelectorGroup > p | |
92 { | |
93 margin-top: 0.5em; | |
94 margin-bottom: 1em; | |
95 font-size: 80%; | |
96 } | |
97 | |
98 html:not([dir="rtl"]) #typeSelectorGroup > p | |
99 { | |
100 margin-left: 30px; | |
101 } | |
102 | |
103 html[dir="rtl"] #typeSelectorGroup > p | |
104 { | |
105 margin-right: 30px; | |
106 } | |
107 | |
108 #anonymousSubmissionContainer | |
109 { | |
110 margin-top: 0.5em; | |
111 } | |
112 | |
113 #anonymousSubmissionWarning, | |
114 #commentLengthWarning, | |
115 #error | |
116 { | |
117 margin-top: 0.5em; | |
118 color: #C00000; | |
119 font-size: 80%; | |
120 } | |
121 | |
122 #comment | |
123 { | |
124 flex-grow: 1; | |
125 min-height: 2em; | |
126 } | |
127 | |
128 #sendingProgressContainer:not([hidden]) | |
129 { | |
130 display: flex; | |
131 flex-direction: row; | |
132 justify-content: center; | |
133 margin-top: 2rem; | |
134 } | |
135 | |
136 #result | |
137 { | |
138 flex-grow: 1; | |
139 border-width: 0px; | |
140 } | |
141 | |
142 footer | |
143 { | |
144 display: flex; | |
145 flex-direction: row; | |
146 box-sizing: border-box; | |
147 width: 46.3rem; | |
148 margin-top: 2rem; | |
149 } | |
150 | |
151 #privacyPolicy | |
152 { | |
153 flex-grow: 1; | |
154 align-self: center; | |
155 font-size: 1.125rem; | |
156 font-weight: 700; | |
157 } | |
158 | |
159 /* | |
160 * Generic styles | |
161 */ | |
162 | |
163 [data-invisible="true"] | |
164 { | |
165 visibility: hidden; | |
166 } | |
167 | |
168 button | |
169 { | |
170 padding: 0.8rem 1.2rem; | |
171 background-color: transparent; | |
172 font-size: 1.125rem; | |
173 font-weight: 700; | |
174 text-decoration: none; | |
175 text-transform: uppercase; | |
176 cursor: pointer; | |
177 } | |
178 | |
179 html:not([dir="rtl"]) button | |
180 { | |
181 margin-left: 0.5rem; | |
182 } | |
183 | |
184 html[dir="rtl"] button | |
185 { | |
186 margin-right: 0.5rem; | |
187 } | |
188 | |
189 button.primary | |
190 { | |
191 border: 0px; | |
192 color: #FFF; | |
193 background-color: #099CD0; | |
194 } | |
195 | |
196 button.primary:not([disabled]):hover | |
197 { | |
198 box-shadow: inset 0 0 0 3px #005D80; | |
199 } | |
200 | |
201 button.primary[disabled] | |
202 { | |
203 background-color: #5CBCE1; | |
204 } | |
205 | |
206 button.secondary | |
207 { | |
208 border: 1px solid #099CD0; | |
209 color: #099CD0; | |
210 } | |
211 | |
212 button.secondary:hover | |
213 { | |
214 box-shadow: inset 0 0 0 2px #099CD0; | |
215 } | |
216 | |
217 input[type="text"], | |
218 input[type="email"], | |
219 textarea | |
220 { | |
221 font-size: 1.25rem; | |
222 border: 2px solid #099CD0; | |
223 } | |
224 | |
225 input[type="email"]:invalid | |
226 { | |
227 border-color: #E00000; | |
228 } | |
229 | |
230 input[type="checkbox"], | |
231 input[type="radio"] | |
232 { | |
233 width: 18px; | |
234 height: 18px; | |
235 padding: 0px; | |
236 margin: 0px 3px; | |
237 border: 0px; | |
238 -webkit-appearance: none; | |
239 -moz-appearance: none; | |
240 background-color: transparent; | |
241 background-image: url(icons/checkbox.png); | |
242 display: inline-block; | |
243 } | |
244 | |
245 input[type="checkbox"]:checked, | |
246 input[type="radio"]:checked | |
247 { | |
248 background-position: 0px 18px; | |
249 } | |
OLD | NEW |