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