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   -webkit-user-select: text;
 184   color: rgb(48, 57, 66);
 185   display: inline;
 186   font-size: 14px;
 187   font-weight: 500;
 188 }
 189
 190 .inactive-extension .extension-title {
 191   color: inherit;
 192 }
 193
 194 .extension-version {
 195   -webkit-padding-end: 7px;
 196   font-size: 13px;
 197   font-weight: 400;
 198 }
 199
 200 .extension-description,
 201 .corrupt-install-message {
 202   -webkit-padding-end: 5px;
 203   font-size: 13px;
 204   margin: 5px 0;
 205   white-space: normal;
 206 }
 207
 208 .corrupt-install-message {
 209   color: rgb(196, 42, 23);
 210 }
 211
 212 .action-links {
 213   margin-bottom: 0.5em;
 214 }
 215
 216 .action-links a {
 217   -webkit-margin-end: 1em;
 218   -webkit-margin-start: 0;
 219 }
 220
 221 .action-links .errors-link {
 222   align-items: center;
 223   display: inline-flex;
 224   vertical-align: bottom;
 225 }
 226
 227 .extension-details {
 228   -webkit-box-flex: 1;
 229   -webkit-padding-end: 7px;
 230   -webkit-padding-start: 60px;
 231   padding-top: 6px;
 232 }
 233
 234 .extension-description,
 235 .extension-version,
 236 .extension-list-item-wrapper.inactive-extension .extension-details,
 237 .location-text,
 238 .blacklist-text,
 239 .enable-checkbox input:disabled + .enable-checkbox-text {
 240   color: rgb(115, 119, 122);
 241 }
 242
 243 .enable-controls {
 244   /* Matches right: position of dev controls toggle. */
 245   -webkit-margin-end: 0;
 246   position: relative;
 247 }
 248
 249 .enable-controls > .controlled-setting-indicator {
 250   width: 23px;
 251 }
 252
 253 .enable-controls > .controlled-setting-indicator > div {
 254   left: 11px;
 255   right: 11px;
 256 }
 257
 258 /* We use x[is='action-link'] here so that we get higher specifity than the
 259  * action link rules without resorting to the Dark Side (!IMPORTANT). */
 260 .terminated-reload-link[is='action-link'],
 261 .corrupted-repair-button[is='action-link'] {
 262   /* Matches width of trash. */
 263   -webkit-margin-end: 30px;
 264 }
 265
 266 .checkbox {
 267   display: inline-block;
 268 }
 269
 270 .enabled-text {
 271   font-weight: bold;
 272 }
 273
 274 .extension-list-item-wrapper.inactive-extension .enabled-text,
 275 .extension-list-item-wrapper:not(.inactive-extension) .enable-text,
 276 .extension-list-item-wrapper.inactive-extension .optional-controls,
 277 .extension-list-item-wrapper.inactive-extension .butter-bar {
 278   display: none;
 279 }
 280
 281 .optional-controls .checkbox {
 282   -webkit-margin-end: 12px;
 283 }
 284
 285 .load-path > span {
 286   word-wrap: break-word;
 287 }
 288
 289 .terminated-reload-link,
 290 .corrupted-repair-button {
 291   display: inline-block;
 292   padding-top: 7px;
 293 }
 294
 295 .install-warnings a {
 296   -webkit-margin-start: 0;
 297 }
 298
 299 .butter-bar,
 300 .install-warnings,
 301 .extension-warnings {
 302   border-radius: 3px;
 303   line-height: 150%;
 304   margin: 8px 0;
 305   padding: 8px 12px;
 306 }
 307
 308 .butter-bar {
 309   background: rgb(255, 242, 153);
 310 }
 311
 312 .install-warnings,
 313 .extension-warnings {
 314   background: pink;
 315 }
 316
 317 .install-warnings ul,
 318 .extension-warnings ul {
 319   margin: 0;
 320 }
 321
 322 .error-collection-control {
 323   -webkit-margin-start: 5px;
 324 }
 325
 326 #extension-settings:not(.dev-mode) .developer-extras,
 327 #extension-settings:not(.dev-mode) .error-collection-control {
 328   display: none;
 329 }
 330
 331 #font-measuring-div {
 332   /* Remove from the flow and hide. */
 333   position: absolute;
 334   visibility: hidden;
 335 }
 336
 337 .extension-commands-config {
 338   float: right;
 339 }
 340
 341 html[dir=rtl] .extension-commands-config {
 342   float: left;
 343 }
 344
 345 /* Overlays */
 346
 347 #overlay {
 348   z-index: 5;
 349 }
 350
 351 #overlay .page:not(.showing) {
 352   display: none;
 353 }
 354
 355 #drop-target-overlay {
 356   color: rgb(48, 57, 66);
 357   font-size: 18px;
 358   text-align: center;
 359 }
 360
 361 #drop-target-overlay div {
 362   margin: 1em;
 363 }
 364
 365 .location-text,
 366 .blacklist-text {
 367   display: block;
 368   width: 100px;
 369 }
 370
 371 .enable-checkbox {
 372   /* Reserve enough space to match .location-text */
 373   min-width: 100px;
 374 }
 375
 376 /* Trash */
 377
 378 #extension-settings .trash {
 379   height: 22px;
 380   opacity: 0.8;
 381   position: relative;
 382   right: -8px;
 383   top: 6px;
 384   transition: opacity 200ms;
 385   vertical-align: top;
 386 }
 387
 388 html[dir='rtl'] #extension-settings .trash {
 389   left: -8px;
 390   right: auto;
 391 }
 392
 393 .extension-list-item:not(:hover) .trash:not(:focus) {
 394   opacity: 0;
 395 }
 396
 397 .extension-list-item-wrapper.may-not-remove .trash {
 398   visibility: hidden;
 399 }
 400
 401 /* In case the extension is policy controlled the trash icon must be hidden by
 402  * setting display:none rather than only setting visibility:hidden to completely
 403  * remove it from the layout and make space for the controlled indicator.
 404  * TODO(cschuet): rather than hide always replace it with something meaningful.
 405  */
 406 .extension-list-item-wrapper.controlled .trash {
 407   display: none;
 408 }
 409
 410 /* Supervised users */
 411
 412 .page:not(.profile-is-supervised) .profile-is-supervised-banner,
 413 .profile-is-supervised .more-extensions-link {
 414   display: none;
 415 }
 416
 417 .profile-is-supervised-banner .page-banner-text {
 418   background-image: url(../../../../ui/webui/resources/images/warning.svg);
 419 }
 420
 421 /* Sideload Wipeout */
 422
 423 .sideload-wipeout-learn-more {
 424   text-decoration: none;
 425 }
 426
 427 .sideload-wipeout-banner .page-banner-text {
 428   -webkit-padding-start: 8px;
 429   background-image: none;
 430 }
 431
 432 .extension-highlight {
 433   background-color: rgba(0, 0, 0, .05);
 434 }