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 .checkbox {
 254   display: inline-block;
 255 }
 256
 257 .enabled-text {
 258   font-weight: bold;
 259 }
 260
 261 .extension-list-item-wrapper.inactive-extension .enabled-text,
 262 .extension-list-item-wrapper:not(.inactive-extension) .enable-text,
 263 .extension-list-item-wrapper.inactive-extension .optional-controls,
 264 .extension-list-item-wrapper.inactive-extension .butter-bar {
 265   display: none;
 266 }
 267
 268 .load-path > span {
 269   word-wrap: break-word;
 270 }
 271
 272 .terminated-reload-link {
 273   -webkit-margin-end: 2.5em;
 274   padding-top: 7px;
 275 }
 276
 277 .install-warnings a {
 278   -webkit-margin-start: 0;
 279 }
 280
 281 .butter-bar,
 282 .install-warnings,
 283 .extension-warnings {
 284   border-radius: 3px;
 285   margin-top: 5px;
 286   padding: 2px 5px;
 287 }
 288
 289 .butter-bar {
 290   background: rgb(255, 242, 153);
 291 }
 292
 293 .install-warnings,
 294 .extension-warnings {
 295   background: pink;
 296 }
 297
 298 .install-warnings ul,
 299 .extension-warnings ul {
 300   margin: 0;
 301 }
 302
 303 .error-collection-control {
 304   -webkit-margin-start: 5px;
 305   display: none;
 306 }
 307
 308 #extension-settings.dev-mode .error-collection-control {
 309   display: initial;
 310 }
 311
 312 #font-measuring-div {
 313   /* Remove from the flow and hide. */
 314   position: absolute;
 315   visibility: hidden;
 316 }
 317
 318 .extension-commands-config {
 319   float: right;
 320 }
 321
 322 html[dir=rtl] .extension-commands-config {
 323   float: left;
 324 }
 325
 326 /* Overlays */
 327
 328 #overlay {
 329   z-index: 5;
 330 }
 331
 332 #overlay .page:not(.showing) {
 333   display: none;
 334 }
 335
 336 #drop-target-overlay {
 337   color: rgb(48, 57, 66);
 338   font-size: 18px;
 339   text-align: center;
 340 }
 341
 342 #drop-target-overlay div {
 343   margin: 1em;
 344 }
 345
 346 .location-text,
 347 .blacklist-text {
 348   display: block;
 349   width: 100px;
 350 }
 351
 352 /* Trash */
 353
 354 #extension-settings .trash {
 355   -webkit-transition: opacity 200ms;
 356   height: 22px;
 357   opacity: 0.8;
 358   position: relative;
 359   right: 0;
 360   top: 6px;
 361 }
 362
 363 html[dir='rtl'] #extension-settings .trash {
 364   left: 0;
 365   right: auto;
 366 }
 367
 368 .extension-list-item:not(:hover) .trash:not(:focus) {
 369   opacity: 0;
 370 }
 371
 372 .extension-list-item-wrapper.may-not-remove .trash {
 373   visibility: hidden;
 374 }
 375
 376 .extension-highlight {
 377   background: rgb(238, 238, 238);
 378   background-position: auto;
 379   background-repeat: auto;
 380   border-radius: 3px;
 381   padding: 5px 0 5px 5px;
 382 }
 383
 384 /* Supervised users */
 385
 386 .page:not(.profile-is-supervised) .profile-is-supervised-banner,
 387 .profile-is-supervised .more-extensions-link {
 388   display: none;
 389 }
 390
 391 .profile-is-supervised-banner .page-banner-text {
 392   background-image: url(chrome://theme/IDR_WARNING);
 393 }
 394
 395 /* Sideload Wipeout */
 396
 397 .sideload-wipeout-learn-more {
 398   text-decoration: none;
 399 }
 400
 401 .sideload-wipeout-banner .page-banner-text {
 402   -webkit-padding-start: 8px;
 403   background-image: none;
 404 }