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