src/chrome/browser/resources/extensions/extensions.css

   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 * {
   6   -webkit-transition-duration: 0 !important;
   7 }
   8
   9 html:not(.focus-outline-visible)
  10 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
  11   /* Cancel border-color for :focus specified in widgets.css. */
  12   border-color: rgba(0, 0, 0, 0.25);
  13 }
  14
  15 .no-scroll {
  16   overflow-y: hidden;
  17 }
  18
  19 /* Developer mode */
  20
  21 #dev-controls {
  22   -webkit-margin-end: 20px;
  23   -webkit-transition: padding 100ms, height 100ms, opacity 100ms;
  24   border-bottom: 1px solid #eee;
  25   height: 0;
  26   opacity: 0;
  27   overflow: hidden;
  28 }
  29
  30 #dev-controls .buttons-container {
  31   -webkit-padding-end: 3px;
  32   -webkit-padding-start: 4px;
  33 }
  34
  35 #dev-controls .buttons-container {
  36   display: -webkit-box;
  37   height: 32px;  /* height + padding-top matches #dev-controls height. */
  38   padding-top: 13px;
  39 }
  40
  41 #dev-controls button {
  42   white-space: nowrap;
  43 }
  44
  45 #apps-developer-tools-promo {
  46   -webkit-padding-end: 3px;
  47   align-items: center;
  48   border-top: 1px solid #eee;
  49   display: flex;
  50   font-size: 13px;
  51   margin-top: 7px;  /* This matches #dev-controls padding-bottom. */
  52   padding-top: 5px;
  53 }
  54
  55 #apps-developer-tools-promo img {
  56   content: url(apps_developer_tools_promo_48.png);
  57 }
  58
  59 #apps-developer-tools-promo-text {
  60   -webkit-margin-start: 5px;
  61 }
  62
  63 #apps-developer-tools-promo-close-wrapper {
  64   display: flex;
  65   flex-grow: 1;
  66   justify-content: flex-end;
  67 }
  68
  69 #apps-developer-tools-promo .close-button {
  70   background: url(chrome://theme/IDR_CLOSE_DIALOG) no-repeat center center;
  71   border: 0;
  72   height: 14px;
  73   width: 14px;
  74   z-index: 1;
  75 }
  76
  77 #apps-developer-tools-promo .close-button:hover {
  78   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
  79 }
  80
  81 #apps-developer-tools-promo .close-button:active {
  82   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
  83 }
  84
  85 #extension-settings.dev-mode #dev-controls {
  86   -webkit-transition-duration: 250ms;
  87   height: 45px;
  88   opacity: 1;
  89   padding-bottom: 7px;
  90 }
  91
  92 #extension-settings.dev-mode.adt-promo #dev-controls {
  93   height: 105px;  /* Allow more height for the Apps Developer Tools promo. */
  94 }
  95
  96 #dev-controls-spacer {
  97   -webkit-box-flex: 1;
  98 }
  99
 100 #dev-toggle {
 101   margin-top: 0;
 102   text-align: end;
 103 }
 104
 105 .extension-code {
 106   border: 1px solid #ccc;
 107   display: flex;
 108   font-family: monospace;
 109   overflow: auto;
 110   white-space: pre;
 111 }
 112
 113 .extension-code > * {
 114   padding: 3px;
 115 }
 116
 117 .extension-code-line-numbers {
 118   align-self: flex-start;
 119   background-color: rgba(240, 240, 240, 1);
 120   border-right: 1px solid #ccc;
 121   color: rgba(128, 128, 128, 1);
 122   flex-shrink: 0;
 123   text-align: right;
 124 }
 125
 126 #extension-settings:not(.dev-mode) .developer-extras {
 127   display: none;
 128 }
 129
 130 .developer-extras > div,
 131 .permanent-warnings > div {
 132   margin: 5px 0;
 133 }
 134
 135 #extension-settings #page-header {
 136   /* These values match the .page values. */
 137   -webkit-margin-end: 24px;
 138   min-width: 576px;
 139 }
 140
 141 /* Contents */
 142
 143 #extension-settings {
 144   max-width: 738px;
 145 }
 146
 147 #no-extensions-message {
 148   font-weight: bold;
 149 }
 150
 151 #suggest-gallery {
 152   -webkit-padding-start: 10px;
 153 }
 154
 155 #footer-section {
 156   background: url(chrome://theme/IDR_WEBSTORE_ICON_32) no-repeat left center;
 157   background-size: 32px 32px;
 158   font-size: 1.25em;
 159 }
 160
 161 html[dir=rtl] #footer-section {
 162   background: url(chrome://theme/IDR_WEBSTORE_ICON_32) no-repeat right center;
 163 }
 164
 165 #footer-section > a {
 166   -webkit-margin-start: 42px;
 167   line-height: 32px;
 168 }
 169
 170 .empty-extension-list {
 171   height: 3em;
 172 }
 173
 174 .loading #no-extensions,
 175 .loading #footer-section,
 176 #extension-settings-list:not(.empty-extension-list) ~ #no-extensions,
 177 .empty-extension-list ~ #footer-section {
 178   display: none;
 179 }
 180
 181 .extension-list-item-wrapper {
 182   margin: 23px 0;
 183 }
 184
 185 .extension-list-item {
 186   background-repeat: no-repeat;
 187   display: -webkit-box;
 188   min-height: 48px;
 189 }
 190
 191 .extension-list-item a {
 192   -webkit-margin-start: 0.5em;
 193   display: inline-block;
 194 }
 195
 196 html[dir='rtl'] .extension-list-item {
 197   background-position: right;
 198 }
 199
 200 .extension-title {
 201   -webkit-padding-end: 20px;
 202   color: rgb(48, 57, 66);
 203   font-size: 14px;
 204   font-weight: 500;
 205 }
 206
 207 .inactive-extension .extension-title {
 208   color: inherit;
 209 }
 210
 211 .extension-version {
 212   -webkit-padding-end: 7px;
 213   font-size: 13px;
 214   font-weight: 400;
 215 }
 216
 217 .extension-description,
 218 .corrupt-install-message {
 219   -webkit-padding-end: 5px;
 220   font-size: 13px;
 221   margin: 5px 0;
 222   white-space: normal;
 223 }
 224
 225 .corrupt-install-message {
 226   color: rgb(196, 42, 23);
 227 }
 228
 229 .action-links {
 230   margin-bottom: 0.5em;
 231 }
 232
 233 .action-links a {
 234   -webkit-margin-end: 1em;
 235   -webkit-margin-start: 0;
 236 }
 237
 238 .extension-details {
 239   -webkit-box-flex: 1;
 240   -webkit-padding-end: 7px;
 241   -webkit-padding-start: 55px;
 242 }
 243
 244 .extension-description,
 245 .extension-version,
 246 .extension-list-item-wrapper.inactive-extension .extension-details,
 247 .location-text,
 248 .blacklist-text,
 249 .enable-checkbox input:disabled + .enable-checkbox-text {
 250   color: rgb(151, 156, 160);
 251 }
 252
 253 .enable-controls {
 254   /* Matches right: position of dev controls toggle. */
 255   -webkit-margin-end: 20px;
 256   position: relative;
 257 }
 258
 259 /* We use x[is='action-link'] here so that we get higher specifity than the
 260  * action link rules without resorting to the Dark Side (!IMPORTANT). */
 261 .terminated-reload-link[is='action-link'],
 262 .corrupted-repair-button[is='action-link'] {
 263   /* Matches width of trash. */
 264   -webkit-margin-end: 30px;
 265 }
 266
 267 .checkbox {
 268   display: inline-block;
 269 }
 270
 271 .enabled-text {
 272   font-weight: bold;
 273 }
 274
 275 .extension-list-item-wrapper.inactive-extension .enabled-text,
 276 .extension-list-item-wrapper:not(.inactive-extension) .enable-text,
 277 .extension-list-item-wrapper.inactive-extension .optional-controls,
 278 .extension-list-item-wrapper.inactive-extension .butter-bar {
 279   display: none;
 280 }
 281
 282 .load-path > span {
 283   word-wrap: break-word;
 284 }
 285
 286 .terminated-reload-link,
 287 .corrupted-repair-button {
 288   display: inline-block;
 289   padding-top: 7px;
 290 }
 291
 292 .install-warnings a {
 293   -webkit-margin-start: 0;
 294 }
 295
 296 .butter-bar,
 297 .install-warnings,
 298 .extension-warnings {
 299   border-radius: 3px;
 300   margin-top: 5px;
 301   padding: 2px 5px;
 302 }
 303
 304 .butter-bar {
 305   background: rgb(255, 242, 153);
 306 }
 307
 308 .install-warnings,
 309 .extension-warnings {
 310   background: pink;
 311 }
 312
 313 .install-warnings ul,
 314 .extension-warnings ul {
 315   margin: 0;
 316 }
 317
 318 .error-collection-control {
 319   -webkit-margin-start: 5px;
 320   display: none;
 321 }
 322
 323 #extension-settings.dev-mode .error-collection-control {
 324   display: initial;
 325 }
 326
 327 #font-measuring-div {
 328   /* Remove from the flow and hide. */
 329   position: absolute;
 330   visibility: hidden;
 331 }
 332
 333 .extension-commands-config {
 334   float: right;
 335 }
 336
 337 html[dir=rtl] .extension-commands-config {
 338   float: left;
 339 }
 340
 341 /* Overlays */
 342
 343 #overlay {
 344   z-index: 5;
 345 }
 346
 347 #overlay .page:not(.showing) {
 348   display: none;
 349 }
 350
 351 #drop-target-overlay {
 352   color: rgb(48, 57, 66);
 353   font-size: 18px;
 354   text-align: center;
 355 }
 356
 357 #drop-target-overlay div {
 358   margin: 1em;
 359 }
 360
 361 .location-text,
 362 .blacklist-text {
 363   display: block;
 364   width: 100px;
 365 }
 366
 367 /* Trash */
 368
 369 #extension-settings .trash {
 370   -webkit-transition: opacity 200ms;
 371   height: 22px;
 372   opacity: 0.8;
 373   position: relative;
 374   right: 0;
 375   top: 6px;
 376 }
 377
 378 html[dir='rtl'] #extension-settings .trash {
 379   left: 0;
 380   right: auto;
 381 }
 382
 383 .extension-list-item:not(:hover) .trash:not(:focus) {
 384   opacity: 0;
 385 }
 386
 387 .extension-list-item-wrapper.may-not-remove .trash {
 388   visibility: hidden;
 389 }
 390
 391 .extension-highlight {
 392   background: rgb(250, 250, 250);
 393   border-radius: 3px;
 394   padding: 5px 0 5px 5px;
 395 }
 396
 397 /* Supervised users */
 398
 399 .page:not(.profile-is-supervised) .profile-is-supervised-banner,
 400 .profile-is-supervised .more-extensions-link {
 401   display: none;
 402 }
 403
 404 .profile-is-supervised-banner .page-banner-text {
 405   background-image: url(chrome://theme/IDR_WARNING);
 406 }
 407
 408 /* Sideload Wipeout */
 409
 410 .sideload-wipeout-learn-more {
 411   text-decoration: none;
 412 }
 413
 414 .sideload-wipeout-banner .page-banner-text {
 415   -webkit-padding-start: 8px;
 416   background-image: none;
 417 }