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