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   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 html[dir='rtl'] .extension-list-item {
 191   background-position: right;
 192 }
 193
 194 .extension-title {
 195   -webkit-padding-end: 20px;
 196   color: rgb(48, 57, 66);
 197   font-size: 14px;
 198   font-weight: 500;
 199 }
 200
 201 .inactive-extension .extension-title {
 202   color: inherit;
 203 }
 204
 205 .extension-version {
 206   -webkit-padding-end: 7px;
 207   font-size: 13px;
 208   font-weight: 400;
 209 }
 210
 211 .extension-description {
 212   -webkit-padding-end: 5px;
 213   font-size: 13px;
 214   margin: 5px 0;
 215   white-space: normal;
 216 }
 217
 218 .extension-details {
 219   -webkit-box-flex: 1;
 220   -webkit-padding-start: 55px;
 221 }
 222
 223 .extension-description,
 224 .extension-list-item-wrapper.inactive-extension .extension-details,
 225 .location-text,
 226 .blacklist-text,
 227 .enable-checkbox input:disabled + .enable-checkbox-text {
 228   color: rgb(151, 156, 160);
 229 }
 230
 231 .enable-controls {
 232   /* Matches right: position of dev controls toggle. */
 233   -webkit-margin-end: 20px;
 234   position: relative;
 235 }
 236
 237 .enable-checkbox-text {
 238   /* Matches width of trash. */
 239   -webkit-margin-end: 30px;
 240 }
 241
 242 .checkbox {
 243   display: inline-block;
 244 }
 245
 246 .enabled-text {
 247   font-weight: bold;
 248 }
 249
 250 .extension-list-item-wrapper.inactive-extension .enabled-text,
 251 .extension-list-item-wrapper:not(.inactive-extension) .enable-text,
 252 .extension-list-item-wrapper.inactive-extension .optional-controls,
 253 .extension-list-item-wrapper.inactive-extension .butter-bar {
 254   display: none;
 255 }
 256
 257 .load-path > span {
 258   word-wrap: break-word;
 259 }
 260
 261 .terminated-reload-link {
 262   -webkit-margin-end: 2.5em;
 263   padding-top: 7px;
 264 }
 265
 266 .extension-list-item a {
 267   -webkit-margin-start: 0.5em;
 268   display: inline-block;
 269 }
 270
 271 .install-warnings a {
 272   -webkit-margin-start: 0;
 273 }
 274
 275 .butter-bar,
 276 .install-warnings,
 277 .extension-warnings {
 278   border-radius: 3px;
 279   margin-top: 5px;
 280   padding: 2px 5px;
 281 }
 282
 283 .butter-bar {
 284   background: rgb(255, 242, 153);
 285 }
 286
 287 .install-warnings,
 288 .extension-warnings {
 289   background: pink;
 290 }
 291
 292 .install-warnings ul,
 293 .extension-warnings ul {
 294   margin: 0;
 295 }
 296
 297 .error-collection-control {
 298   -webkit-margin-start: 5px;
 299   display: none;
 300 }
 301
 302 #extension-settings.dev-mode .error-collection-control {
 303   display: initial;
 304 }
 305
 306 #font-measuring-div {
 307   /* Remove from the flow and hide. */
 308   position: absolute;
 309   visibility: hidden;
 310 }
 311
 312 .extension-commands-config {
 313   float: right;
 314 }
 315
 316 html[dir=rtl] .extension-commands-config {
 317   float: left;
 318 }
 319
 320 /* Overlays */
 321
 322 #overlay {
 323   z-index: 5;
 324 }
 325
 326 #overlay .page:not(.showing) {
 327   display: none;
 328 }
 329
 330 #drop-target-overlay {
 331   color: rgb(48, 57, 66);
 332   font-size: 18px;
 333   text-align: center;
 334 }
 335
 336 #drop-target-overlay div {
 337   margin: 1em;
 338 }
 339
 340 .location-text,
 341 .blacklist-text {
 342   display: block;
 343   width: 100px;
 344 }
 345
 346 /* Trash */
 347
 348 #extension-settings .trash {
 349   -webkit-transition: opacity 200ms;
 350   height: 22px;
 351   opacity: 0.8;
 352   position: absolute;
 353   right: 0;
 354   top: 3px;
 355   vertical-align: middle;
 356 }
 357
 358 html[dir='rtl'] #extension-settings .trash {
 359   left: 0;
 360   right: auto;
 361 }
 362
 363 .extension-list-item:not(:hover) .trash:not(:focus) {
 364   opacity: 0;
 365 }
 366
 367 .extension-list-item-wrapper.may-not-remove .trash {
 368   visibility: hidden;
 369 }
 370
 371 .extension-highlight {
 372   background: rgb(238, 238, 238);
 373   background-position: auto;
 374   background-repeat: auto;
 375   border-radius: 3px;
 376   padding: 5px 0 5px 5px;
 377 }
 378
 379 .may-not-modify .optional-controls .optional-controls-disableable {
 380   display: none;
 381 }
 382
 383 /* Managed mode */
 384
 385 .page:not(.profile-is-managed) .profile-is-managed-banner,
 386 .profile-is-managed .more-extensions-link {
 387   display: none;
 388 }
 389
 390 .profile-is-managed-banner .page-banner-text {
 391   background-image: url(chrome://theme/IDR_WARNING);
 392 }
 393
 394 /* Sideload Wipeout */
 395
 396 .sideload-wipeout-learn-more {
 397   text-decoration: none;
 398 }
 399
 400 .sideload-wipeout-banner .page-banner-text {
 401   -webkit-padding-start: 8px;
 402   background-image: none;
 403 }