• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
5body,
6html {
7  color: rgb(48, 57, 66);
8  font-family: 'Helvetica Neue', Ubuntu, Arial, sans-serif;
9  height: 100%;
10  overflow: hidden;
11  width: 100%;
12}
13
14hr {
15  color: rgb(115, 111, 110);
16  margin: 15px 0;
17}
18
19/* Override the visual style of tabs. */
20
21#tabs-header-container {
22  margin: 0 20px;
23  position: relative;
24  width: calc(100% - 40px);
25}
26
27#tabs {
28  border-bottom: none;
29  padding: 0;
30  position: relative;
31}
32
33tabs tab {
34  -webkit-margin-end: 20px;
35  background: white;
36  border: none;
37  color: #7f7f7f;
38  font-size: 13px;
39  font-weight: bold;
40  height: 14px;
41  margin: 0;
42  min-width: 100px;
43  padding: 20px 0;
44}
45
46tabs > [selected] {
47  background: white;
48  border-bottom: 4px solid #7f7f7f;
49  color: #333;
50}
51
52html.focus-outline-visible :focus > tab[selected] {
53  background: white;
54  border-color: rgb(160, 160, 255);
55  outline: none;
56}
57
58tabs > :not([selected]) {
59  background: white;
60}
61
62tabs > :not([selected]):hover {
63  background: white;
64  border-bottom: 4px solid #eee;
65}
66
67tabpanels {
68  height: calc(100% - 60px);
69  padding: 0;
70  width: 100%;
71}
72
73tabpanel {
74  width: 100%;
75}
76
77/* Header */
78
79#header {
80  border-top: 1px solid #d1d1d1;
81  height: 58px;
82  width: 100%;
83}
84
85#header-bottom-separator {
86  border-bottom: 1px solid #d1d1d1;
87  margin: 0 20px;
88  width: calc(100% - 40px);
89}
90
91#developer-controls {
92  margin-top: 0;
93  max-width: none;
94  padding: 3px 10px 8px;
95  width: calc(100% - 20px);
96}
97
98#header-title {
99  -webkit-margin-start: 50px;
100  display: inline-block;
101  font-size: 1.2em;
102  position: relative;
103  top: 3px;
104}
105
106#search {
107  -webkit-padding-end: 5px;
108  -webkit-padding-start: 34px;
109  background-image: -webkit-image-set(
110      url(../images/search.png) 1x,
111      url(../images/2x/search.png) 2x);
112  background-position: 10px 8px;
113  background-repeat: no-repeat;
114  border: none;
115  font-size: 13px;
116  height: 18px;
117  position: absolute;
118  right: 0;
119  top: 16px;
120  width: 230px;
121}
122
123html[dir='rtl'] #search {
124  background-position-x: calc(100% - 16px);
125  left: 16px;
126  right: auto;
127}
128
129#search::-webkit-search-cancel-button {
130  -webkit-appearance: none;
131  background-image: -webkit-image-set(
132      url(../images/search_clear.png) 1x,
133      url(../images/2x/search_clear.png) 2x);
134  background-repeat: no-repeat;
135  height: 16px;
136  width: 16px;
137}
138
139#search::-webkit-search-cancel-button:hover {
140  background-image: -webkit-image-set(
141      url(../images/search_clear_hover.png) 1x,
142      url(../images/2x/search_clear_hover.png) 2x);
143}
144
145#search::-webkit-search-cancel-button:active {
146  background-image: -webkit-image-set(
147      url(../images/search_clear_active.png) 1x,
148      url(../images/2x/search_clear_active.png) 2x);
149}
150
151/* Contents */
152
153#extension-settings {
154  height: 100%;
155  margin: 0;
156  max-width: 100%;
157  padding: 0 0 10px;
158}
159
160#tab-box {
161  height: 100%;
162}
163
164#no-extensions-message,
165#no-apps-message {
166  font-weight: bold;
167}
168
169.update-items-container,
170.load-unpacked {
171  float: right;
172}
173
174html[dir='rtl'] .update-items-container,
175html[dir='rtl'] .load-unpacked {
176  float: left;
177}
178
179.update-items-progress.updating ~ .update-items-now,
180.update-items-progress {
181  display: none;
182}
183
184.update-items-progress ~ .update-items-now,
185.update-items-progress.updating {
186  display: inline;
187}
188
189#no-packed-extensions,
190#no-unpacked-extensions,
191#no-packed-apps,
192#no-unpacked-apps {
193  color: #aaa;
194  margin-top: 10px;
195}
196
197.packed-list:not(.empty-item-list) #no-packed-extensions,
198.unpacked-list:not(.empty-item-list) #no-unpacked-extensions,
199.packed-list:not(.empty-item-list) #no-packed-apps,
200.unpacked-list:not(.empty-item-list) #no-unpacked-apps,
201.loading #no-packed-extensions,
202.loading #no-unpacked-extensions,
203.loading #no-packed-apps,
204.loading #no-unpacked-apps {
205  display: none;
206}
207
208.empty-item-list {
209  height: 8em;
210}
211
212#no-extensions,
213#no-apps {
214  margin: 10px;
215}
216
217#apps-tab,
218#extensions-tab {
219  height: 100%;
220  overflow-y: scroll;
221}
222
223.packed-list,
224.unpacked-list {
225  margin: 0 20px;
226  width: calc(100% - 40px);
227}
228
229.loading #no-extensions,
230.loading #no-apps,
231#apps-tab:not(.empty-item-list) #no-apps,
232#extensions-tab:not(.empty-item-list) #no-extensions {
233  display: none;
234}
235
236.list-header {
237  border-bottom: 1px solid #d1d1d1;
238  font-size: 13px;
239  font-weight: bold;
240  padding-bottom: 15px;
241  padding-top: 20px;
242}
243
244.list-header .title {
245  display: inline-block;
246  margin-top: 6px;
247}
248
249.items {
250  margin-top: 15px;
251}
252
253.extension-list-item-wrapper {
254  margin: 0 0 25px;
255}
256
257.extension-list-item-wrapper.highlighted {
258  background-color: rgba(255, 255, 128, 255);
259  transition: background-color 500ms;
260}
261
262.extension-list-item {
263  /* Set in ItemsList.createNode_(). */
264  background-position: 26px 0;
265  background-repeat: no-repeat;
266  display: -webkit-box;
267  min-height: 48px;
268}
269
270html[dir='rtl'] .extension-list-item {
271  background-position: calc(100% - 26px) 0;
272}
273
274.extension-title {
275  -webkit-user-select: text;
276  color: rgb(48, 57, 66);
277  font-size: 13px;
278  font-weight: 500;
279  text-decoration: none;
280}
281
282.extension-title:hover {
283  text-decoration: underline;
284}
285
286/**
287 * extension-title should be unhighlighted as the parent when the extension is
288 * inactive.
289 */
290.inactive-extension .extension-title {
291  color: inherit;
292}
293
294.extension-title-container {
295  margin-bottom: 5px;
296}
297
298.extension-version {
299  -webkit-padding-end: 7px;
300  -webkit-user-select: text;
301  font-size: 12px;
302  font-weight: 400;
303}
304
305.extension-disabled {
306  font-size: 12px;
307}
308
309.extension-description {
310  -webkit-padding-end: 5px;
311  -webkit-user-select: text;
312  font-size: 13px;
313  margin: 1px 0;
314  white-space: normal;
315}
316
317.extension-details {
318  -webkit-box-flex: 1;
319  -webkit-padding-start: 100px;
320  font-size: 12px;
321  margin-top: 15px;
322  max-width: 600px;
323}
324
325.extension-description,
326.extension-list-item-wrapper.inactive-extension .extension-details,
327.location-text,
328.enable-checkbox input:disabled + .enable-checkbox-text {
329  color: rgb(151, 156, 160);
330}
331
332html[dir='rtl'] .enable-control {
333  float: left;
334}
335
336.file-access-control,
337.incognito-control {
338  left: 0;
339  position: relative;
340  right: 0;
341}
342
343.enable-checkbox-text {
344  -webkit-margin-end: 30px;
345  min-width: 62px;
346}
347
348.checkbox {
349  display: inline-block;
350}
351
352.extension-list-item-wrapper.inactive-extension .enabled-text,
353.extension-list-item-wrapper:not(.inactive-extension) .enable-text,
354.extension-list-item-wrapper.inactive-extension .optional-controls {
355  display: none;
356}
357
358.controls-container {
359  margin: 10px 0;
360}
361
362.controls,
363.optional-controls {
364  display: inline-block;
365}
366
367.active-views {
368  margin-bottom: 14px;
369  margin-top: 10px;
370}
371
372.load-path > span {
373  word-wrap: break-word;
374}
375
376.terminated-reload-link {
377  -webkit-margin-end: 2.5em;
378  padding-top: 7px;
379}
380
381.extension-list-item a {
382  -webkit-margin-end: 0.5em;
383  -webkit-margin-start: 0;
384  display: inline-block;
385}
386
387.extension-warnings,
388.install-warnings {
389  background: pink;
390  border-radius: 3px;
391  margin-top: 5px;
392  padding: 2px 5px;
393}
394
395.extension-warnings a,
396.install-warnings a {
397  -webkit-margin-start: 0;
398}
399
400.extension-warnings ul,
401.install-warnings ul {
402  margin: 0;
403}
404
405.extension-warnings li,
406.install-warnings li {
407  word-wrap: break-word;
408}
409
410.extension-details-summary {
411  margin-bottom: 5px;
412}
413
414.extension-details-all {
415  margin-top: 6px;
416}
417
418.extension-details-all div.item {
419  margin: 5px 0;
420}
421
422html[dir='rtl'] .delete-link {
423  float: left;
424}
425
426.enable-checkbox-text {
427  -webkit-margin-end: 0;
428}
429
430:-webkit-any(.checkbox, .radio) label input ~ span {
431  -webkit-margin-start: 0;
432  display: inline;
433}
434
435#tabs {
436  background: none;
437}
438
439#tab-panels {
440  box-shadow: none;
441}
442
443/* Overlays */
444
445#overlay {
446  background-color: rgba(0, 0, 0, 0.6);
447  z-index: 5;
448}
449
450#overlay .page {
451  -webkit-border-radius: 0;
452  border: 1px solid rgba(0, 0, 0, 0.5);
453  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
454  padding: 25px;
455}
456
457#overlay .page:not(.showing) {
458  display: none;
459}
460
461#overlay .page h1 {
462  font-size: 21px;
463  padding: 0;
464}
465
466#overlay .page .content-area,
467#overlay .page .action-area {
468  font-size: 13px;
469  margin-top: 40px;
470  padding: 0;
471}
472
473/* Pack dialog button size and delete dialog button size */
474#packItemOverlay .button-strip button,
475#item-private-key-container button,
476#alertOverlay .button-strip button {
477  width: 90px;
478}
479
480.extension-id {
481  -webkit-user-select: text;
482}
483
484.may-not-disable .optional-controls .optional-controls-disableable {
485  display: none;
486}
487
488a {
489  color: rgb(60, 128, 246);
490  text-decoration: none;
491}
492
493a:active {
494  color: rgb(17, 85, 204);
495  text-decoration: underline;
496}
497
498a:hover {
499  text-decoration: underline;
500}
501
502.optional-controls .terminated-reload-link,
503.controls .enable-checkbox,
504.optional-controls .incognito-control,
505.optional-controls .file-access-control {
506  -webkit-margin-end: 20px;
507}
508
509button {
510  background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
511  border: 1px solid rgba(0, 0, 0, 0.1);
512  border-radius: 2px;
513  color: #444;
514  font-family: 'Helvetica Neue', Ubuntu, Arial, sans-serif;
515  font-size: 12px;
516  font-weight: bold;
517  height: 29px;
518  padding: 0 15px;
519  transition: border 250ms;
520}
521
522button:hover {
523  background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
524  border-color: #dcdcdc;
525  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
526}
527
528button:active {
529  background-image: -webkit-linear-gradient(top, #f6f6f6, #f1f1f1);
530  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
531}
532
533button:focus {
534  outline: none;
535}
536
537button[disabled],
538button[disabled]:hover,
539button[disabled]:active {
540  background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
541  border-color: rgba(0, 0, 0, 0.1);
542  box-shadow: none;
543  color: #888;
544}
545
546/* Pack dialog styling */
547#item-private-key-container {
548  display: -webkit-box;
549}
550
551#item-private-key-label {
552  margin: 20px 0 10px;
553  text-align: start;
554}
555
556#item-private-key {
557  -webkit-box-flex: 1;
558  display: block;
559}
560
561#browse-private-key {
562  margin-left: 10px;
563}
564