blob: 3f8b076463a4e4bd5b1f6a4453d513c8ac86c69b [file] [log] [blame]
avm99963a23bf1e2020-12-25 03:02:10 +01001/*
2 * Copyright 2014 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
5 *
6 * This stylesheet is used to apply Chrome styles to extension pages that opt in
7 * to using them.
8 *
9 * These styles have been copied from ui/webui/resources/css/chrome_shared.css
10 * and ui/webui/resources/css/widgets.css *with CSS class logic removed*, so
11 * that it's as close to a user-agent stylesheet as possible.
12 *
13 * For example, extensions shouldn't be able to set a .link-button class and
14 * have it do anything.
15 *
16 * Other than that, keep this file and chrome_shared.css/widgets.cc in sync as
17 * much as possible.
18 */
19
20body {
21 color: #333;
22 cursor: default;
23 /* Note that the correct font-family and font-size are set in
24 * extension_fonts.css. */
25 /* This top margin of 14px matches the top padding on the h1 element on
26 * overlays (see the ".overlay .page h1" selector in overlay.css), which
27 * every dialogue has.
28 *
29 * Similarly, the bottom 14px margin matches the bottom padding of the area
30 * which hosts the buttons (see the ".overlay .page * .action-area" selector
31 * in overlay.css).
32 *
33 * Both have a padding left/right of 17px.
34 *
35 * Note that we're putting this here in the Extension content, rather than
36 * the WebUI element which contains the content, so that scrollbars in the
37 * Extension content don't get a 6px margin, which looks quite odd.
38 */
39 margin: 14px 17px;
40}
41
42p {
43 line-height: 1.8em;
44}
45
46h1,
47h2,
48h3 {
49 -webkit-user-select: none;
50 font-weight: normal;
51 /* Makes the vertical size of the text the same for all fonts. */
52 line-height: 1;
53}
54
55h1 {
56 font-size: 1.5em;
57}
58
59h2 {
60 font-size: 1.3em;
61 margin-bottom: 0.4em;
62}
63
64h3 {
65 color: black;
66 font-size: 1.2em;
67 margin-bottom: 0.8em;
68}
69
70a {
71 color: rgb(17, 85, 204);
72 text-decoration: underline;
73}
74
75a:active {
76 color: rgb(5, 37, 119);
77}
78
79/* Default state **************************************************************/
80
81:-webkit-any(button,
82 input[type='button'],
83 input[type='submit']),
84select,
85input[type='checkbox'],
86input[type='radio'] {
avm99963a23bf1e2020-12-25 03:02:10 +010087 -webkit-user-select: none;
88 background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
89 border: 1px solid rgba(0, 0, 0, 0.25);
90 border-radius: 2px;
91 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
92 inset 0 1px 2px rgba(255, 255, 255, 0.75);
93 color: #444;
94 font: inherit;
95 margin: 0 1px 0 0;
96 outline: none;
97 text-shadow: 0 1px 0 rgb(240, 240, 240);
98}
99
Adrià Vilanova Martínez5120dbb2022-01-04 03:21:17 +0100100select,
101input[type='checkbox']:not(:indeterminate),
102input[type='radio'] {
103 -webkit-appearance: none;
104}
105
avm99963a23bf1e2020-12-25 03:02:10 +0100106:-webkit-any(button,
107 input[type='button'],
108 input[type='submit']),
109select {
110 min-height: 2em;
111 min-width: 4em;
avm99963a23bf1e2020-12-25 03:02:10 +0100112}
113
114:-webkit-any(button,
115 input[type='button'],
116 input[type='submit']) {
117 -webkit-padding-end: 10px;
118 -webkit-padding-start: 10px;
119}
120
121select {
122 -webkit-appearance: none;
123 -webkit-padding-end: 20px;
124 -webkit-padding-start: 6px;
125 /* OVERRIDE */
126 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUUlEQVR4AWP4TxREZkYxpKHAKKzKEhOZvyG4zN8SE7Eq+6+wYCHbTwiT7eeChf8VsFsKVQhTxIDDbVCFfF8ginApgyp82wRShEcZVJIVzoJDAGqrgIJGRl20AAAAAElFTkSuQmCC),
127 linear-gradient(#ededed, #ededed 38%, #dedede);
128 background-position: right center;
129 background-repeat: no-repeat;
130}
131
132html[dir='rtl'] select {
133 background-position: center left;
134}
135
136input[type='checkbox'] {
137 height: 13px;
138 position: relative;
139 vertical-align: middle;
140 width: 13px;
141}
142
143input[type='radio'] {
144 /* OVERRIDE */
145 border-radius: 100%;
146 height: 15px;
147 position: relative;
148 vertical-align: middle;
149 width: 15px;
150}
151
152/* TODO(estade): add more types here? */
153input[type='number'],
154input[type='password'],
155input[type='search'],
156input[type='text'],
157input[type='url'],
158input:not([type]),
159textarea {
160 border: 1px solid #bfbfbf;
161 border-radius: 2px;
162 box-sizing: border-box;
163 color: #444;
164 font: inherit;
165 margin: 0;
166 /* Use min-height to accommodate addditional padding for touch as needed. */
167 min-height: 2em;
168 padding: 3px;
169 outline: none;
avm99963a23bf1e2020-12-25 03:02:10 +0100170}
171
172input[type='search'] {
173 -webkit-appearance: textfield;
174 /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
175 * of the default text in relatively spacious languages (i.e. German). */
176 min-width: 160px;
177}
178
179/* Checked ********************************************************************/
180
Adrià Vilanova Martínez5120dbb2022-01-04 03:21:17 +0100181input[type='checkbox']:checked:not(:indeterminate)::before {
avm99963a23bf1e2020-12-25 03:02:10 +0100182 -webkit-user-select: none;
183 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAZ0lEQVR4AWNAA2xAiAXEM8xiMEAXVGJYz7AZCFEkmBi6wYKtEC4/gxqY9gILrmYQhwiXMWxkiAVyVoOFfSCCpkAmCK4Fk+1QA4GqekECUAMkka0KY9gIFvZDd5oawwyGBqACdIDqOwAQzBnTWnnU+gAAAABJRU5ErkJggg==);
184 background-size: 100% 100%;
185 content: '';
186 display: block;
187 height: 100%;
188 width: 100%;
189}
190
191input[type='radio']:checked::before {
192 background-color: #666;
193 border-radius: 100%;
194 bottom: 3px;
195 content: '';
196 display: block;
197 left: 3px;
198 position: absolute;
199 right: 3px;
200 top: 3px;
201}
202
203/* Hover **********************************************************************/
204
205:enabled:hover:-webkit-any(
206 select,
207 input[type='checkbox'],
208 input[type='radio'],
209 :-webkit-any(
210 button,
211 input[type='button'],
212 input[type='submit'])) {
213 background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
214 border-color: rgba(0, 0, 0, 0.3);
215 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
216 inset 0 1px 2px rgba(255, 255, 255, 0.95);
217 color: black;
218}
219
220:enabled:hover:-webkit-any(select) {
221 /* OVERRIDE */
222 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUUlEQVR4AWP4TxREZkYxpKHAKKzKEhOZvyG4zN8SE7Eq+6+wYCHbTwiT7eeChf8VsFsKVQhTxIDDbVCFfF8ginApgyp82wRShEcZVJIVzoJDAGqrgIJGRl20AAAAAElFTkSuQmCC),
223 linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
224}
225
226/* Active *********************************************************************/
227
228:enabled:active:-webkit-any(
229 select,
230 input[type='checkbox'],
231 input[type='radio'],
232 :-webkit-any(
233 button,
234 input[type='button'],
235 input[type='submit'])) {
236 background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
237 box-shadow: none;
238 text-shadow: none;
239}
240
241:enabled:active:-webkit-any(select) {
242 /* OVERRIDE */
243 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUUlEQVR4AWP4TxREZkYxpKHAKKzKEhOZvyG4zN8SE7Eq+6+wYCHbTwiT7eeChf8VsFsKVQhTxIDDbVCFfF8ginApgyp82wRShEcZVJIVzoJDAGqrgIJGRl20AAAAAElFTkSuQmCC),
244 linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
245}
246
247/* Disabled *******************************************************************/
248
249:disabled:-webkit-any(
250 button,
251 input[type='button'],
252 input[type='submit']),
253select:disabled {
254 background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
255 border-color: rgba(80, 80, 80, 0.2);
256 box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
257 inset 0 1px 2px rgba(255, 255, 255, 0.75);
258 color: #aaa;
259}
260
261select:disabled {
262 /* OVERRIDE */
263 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASUlEQVR4AWP4TxREZkYxpKHAKKzKEhMb/iPDxESsyv4rLFiIULRg4X8F7JaCFSIUMeBwG1QhTBEuZVCFb5tAivAog0qywllwCAAavoiLhz+UlAAAAABJRU5ErkJggg==),
264 linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
265}
266
267input:disabled:-webkit-any([type='checkbox'],
268 [type='radio']) {
269 opacity: .75;
270}
271
272input:disabled:-webkit-any([type='password'],
273 [type='search'],
274 [type='text'],
275 [type='url'],
276 :not([type])) {
277 color: #999;
278}
279
280/* Focus **********************************************************************/
281
282:enabled:focus:-webkit-any(
283 select,
284 input[type='checkbox'],
285 input[type='number'],
286 input[type='password'],
287 input[type='radio'],
288 input[type='search'],
289 input[type='text'],
290 input[type='url'],
291 input:not([type]),
292 :-webkit-any(
293 button,
294 input[type='button'],
295 input[type='submit'])) {
296 /* OVERRIDE */
297 -webkit-transition: border-color 200ms;
298 /* We use border color because it follows the border radius (unlike outline).
299 * This is particularly noticeable on mac. */
300 border-color: rgb(77, 144, 254);
301 outline: none;
302}
303
304/* Checkbox/radio helpers ******************************************************
305 *
306 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
307 * these classes with the markup structure:
308 *
309 * <div class="checkbox">
310 * <label>
311 * <input type="checkbox">
312 * <span>
313 * </label>
314 * </div>
315 */
316
317:-webkit-any(.checkbox, .radio) label {
318 /* Don't expand horizontally: <http://crbug.com/112091>. */
319 align-items: center;
320 display: inline-flex;
321 padding-bottom: 7px;
322 padding-top: 7px;
323}
324
325:-webkit-any(.checkbox, .radio) label input {
326 flex-shrink: 0;
327}
328
329:-webkit-any(.checkbox, .radio) label input ~ span {
330 -webkit-margin-start: 0.6em;
331 /* Make sure long spans wrap at the same horizontal position they start. */
332 display: block;
333}
334
335:-webkit-any(.checkbox, .radio) label:hover {
336 color: black;
337}
338
339label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
340 color: #999;
341}