chrome/browser/resources/apps_debugger/css/items.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 body,
   6 html {
   7   color: rgb(48, 57, 66);
   8   font-family: 'Helvetica Neue', Ubuntu, Arial, sans-serif;
   9   height: 100%;
  10   overflow: hidden;
  11   width: 100%;
  12 }
  13
  14 hr {
  15   color: rgb(115, 111, 110);
  16   margin: 15px 0;
  17 }
  18
  19 /* Override the visual style of tabs. */
  20
  21 #tabs-header-container {
  22   margin: 0 20px;
  23   position: relative;
  24   width: calc(100% - 40px);
  25 }
  26
  27 #tabs {
  28   border-bottom: none;
  29   padding: 0;
  30   position: relative;
  31 }
  32
  33 tabs tab {
  34   -webkit-margin-end: 20px;
  35   background: white;
  36   border: none;
  37   color: #7f7f7f;
  38   font-size: 13px;
  39   font-weight: bold;
  40   height: 14px;
  41   margin: 0;
  42   min-width: 100px;
  43   padding: 20px 0;
  44 }
  45
  46 tabs > [selected] {
  47   background: white;
  48   border-bottom: 4px solid #7f7f7f;
  49   color: #333;
  50 }
  51
  52 html.focus-outline-visible :focus > tab[selected] {
  53   background: white;
  54   border-color: rgb(160, 160, 255);
  55   outline: none;
  56 }
  57
  58 tabs > :not([selected]) {
  59   background: white;
  60 }
  61
  62 tabs > :not([selected]):hover {
  63   background: white;
  64   border-bottom: 4px solid #eee;
  65 }
  66
  67 tabpanels {
  68   height: calc(100% - 60px);
  69   padding: 0;
  70   width: 100%;
  71 }
  72
  73 tabpanel {
  74   width: 100%;
  75 }
  76
  77 /* Header */
  78
  79 #header {
  80   border-top: 1px solid #d1d1d1;
  81   height: 58px;
  82   width: 100%;
  83 }
  84
  85 #header-bottom-separator {
  86   border-bottom: 1px solid #d1d1d1;
  87   margin: 0 20px;
  88   width: calc(100% - 40px);
  89 }
  90
  91 #developer-controls {
  92   margin-top: 0;
  93   max-width: none;
  94   padding: 3px 10px 8px;
  95   width: calc(100% - 20px);
  96 }
  97
  98 #header-title {
  99   -webkit-margin-start: 50px;
 100   display: inline-block;
 101   font-size: 1.2em;
 102   position: relative;
 103   top: 3px;
 104 }
 105
 106 #search {
 107   -webkit-padding-end: 5px;
 108   -webkit-padding-start: 34px;
 109   background-image: -webkit-image-set(
 110       url(../images/search.png) 1x,
 111       url(../images/2x/search.png) 2x);
 112   background-position: 10px 8px;
 113   background-repeat: no-repeat;
 114   border: none;
 115   font-size: 13px;
 116   height: 18px;
 117   position: absolute;
 118   right: 0;
 119   top: 16px;
 120   width: 230px;
 121 }
 122
 123 html[dir='rtl'] #search {
 124   background-position-x: calc(100% - 16px);
 125   left: 16px;
 126   right: auto;
 127 }
 128
 129 #search::-webkit-search-cancel-button {
 130   -webkit-appearance: none;
 131   background-image: -webkit-image-set(
 132       url(../images/search_clear.png) 1x,
 133       url(../images/2x/search_clear.png) 2x);
 134   background-repeat: no-repeat;
 135   height: 16px;
 136   width: 16px;
 137 }
 138
 139 #search::-webkit-search-cancel-button:hover {
 140   background-image: -webkit-image-set(
 141       url(../images/search_clear_hover.png) 1x,
 142       url(../images/2x/search_clear_hover.png) 2x);
 143 }
 144
 145 #search::-webkit-search-cancel-button:active {
 146   background-image: -webkit-image-set(
 147       url(../images/search_clear_active.png) 1x,
 148       url(../images/2x/search_clear_active.png) 2x);
 149 }
 150
 151 /* Contents */
 152
 153 #extension-settings {
 154   height: 100%;
 155   margin: 0;
 156   max-width: 100%;
 157   padding: 0 0 10px;
 158 }
 159
 160 #tab-box {
 161   height: 100%;
 162 }
 163
 164 #no-extensions-message,
 165 #no-apps-message {
 166   font-weight: bold;
 167 }
 168
 169 .update-items-container,
 170 .load-unpacked {
 171   float: right;
 172 }
 173
 174 html[dir='rtl'] .update-items-container,
 175 html[dir='rtl'] .load-unpacked {
 176   float: left;
 177 }
 178
 179 .update-items-progress.updating ~ .update-items-now,
 180 .update-items-progress {
 181   display: none;
 182 }
 183
 184 .update-items-progress ~ .update-items-now,
 185 .update-items-progress.updating {
 186   display: inline;
 187 }
 188
 189 #no-packed-extensions,
 190 #no-unpacked-extensions,
 191 #no-packed-apps,
 192 #no-unpacked-apps {
 193   color: #aaa;
 194   margin-top: 10px;
 195 }
 196
 197 .packed-list:not(.empty-item-list) #no-packed-extensions,
 198 .unpacked-list:not(.empty-item-list) #no-unpacked-extensions,
 199 .packed-list:not(.empty-item-list) #no-packed-apps,
 200 .unpacked-list:not(.empty-item-list) #no-unpacked-apps,
 201 .loading #no-packed-extensions,
 202 .loading #no-unpacked-extensions,
 203 .loading #no-packed-apps,
 204 .loading #no-unpacked-apps {
 205   display: none;
 206 }
 207
 208 .empty-item-list {
 209   height: 8em;
 210 }
 211
 212 #no-extensions,
 213 #no-apps {
 214   margin: 10px;
 215 }
 216
 217 #apps-tab,
 218 #extensions-tab {
 219   height: 100%;
 220   overflow-y: scroll;
 221 }
 222
 223 .packed-list,
 224 .unpacked-list {
 225   margin: 0 20px;
 226   width: calc(100% - 40px);
 227 }
 228
 229 .loading #no-extensions,
 230 .loading #no-apps,
 231 #apps-tab:not(.empty-item-list) #no-apps,
 232 #extensions-tab:not(.empty-item-list) #no-extensions {
 233   display: none;
 234 }
 235
 236 .list-header {
 237   border-bottom: 1px solid #d1d1d1;
 238   font-size: 13px;
 239   font-weight: bold;
 240   padding-bottom: 15px;
 241   padding-top: 20px;
 242 }
 243
 244 .list-header .title {
 245   display: inline-block;
 246   margin-top: 6px;
 247 }
 248
 249 .items {
 250   margin-top: 15px;
 251 }
 252
 253 .extension-list-item-wrapper {
 254   margin: 0 0 25px;
 255 }
 256
 257 .extension-list-item-wrapper.highlighted {
 258   background-color: rgba(255, 255, 128, 255);
 259   transition: background-color 500ms;
 260 }
 261
 262 .extension-list-item {
 263   /* Set in ItemsList.createNode_(). */
 264   background-position: 26px 0;
 265   background-repeat: no-repeat;
 266   display: -webkit-box;
 267   min-height: 48px;
 268 }
 269
 270 html[dir='rtl'] .extension-list-item {
 271   background-position: calc(100% - 26px) 0;
 272 }
 273
 274 .extension-title {
 275   -webkit-user-select: text;
 276   color: rgb(48, 57, 66);
 277   font-size: 13px;
 278   font-weight: 500;
 279   text-decoration: none;
 280 }
 281
 282 .extension-title:hover {
 283   text-decoration: underline;
 284 }
 285
 286 /**
 287  * extension-title should be unhighlighted as the parent when the extension is
 288  * inactive.
 289  */
 290 .inactive-extension .extension-title {
 291   color: inherit;
 292 }
 293
 294 .extension-title-container {
 295   margin-bottom: 5px;
 296 }
 297
 298 .extension-version {
 299   -webkit-padding-end: 7px;
 300   -webkit-user-select: text;
 301   font-size: 12px;
 302   font-weight: 400;
 303 }
 304
 305 .extension-disabled {
 306   font-size: 12px;
 307 }
 308
 309 .extension-description {
 310   -webkit-padding-end: 5px;
 311   -webkit-user-select: text;
 312   font-size: 13px;
 313   margin: 1px 0;
 314   white-space: normal;
 315 }
 316
 317 .extension-details {
 318   -webkit-box-flex: 1;
 319   -webkit-padding-start: 100px;
 320   font-size: 12px;
 321   margin-top: 15px;
 322   max-width: 600px;
 323 }
 324
 325 .extension-description,
 326 .extension-list-item-wrapper.inactive-extension .extension-details,
 327 .location-text,
 328 .enable-checkbox input:disabled + .enable-checkbox-text {
 329   color: rgb(151, 156, 160);
 330 }
 331
 332 html[dir='rtl'] .enable-control {
 333   float: left;
 334 }
 335
 336 .file-access-control,
 337 .incognito-control {
 338   left: 0;
 339   position: relative;
 340   right: 0;
 341 }
 342
 343 .enable-checkbox-text {
 344   -webkit-margin-end: 30px;
 345   min-width: 62px;
 346 }
 347
 348 .checkbox {
 349   display: inline-block;
 350 }
 351
 352 .extension-list-item-wrapper.inactive-extension .enabled-text,
 353 .extension-list-item-wrapper:not(.inactive-extension) .enable-text,
 354 .extension-list-item-wrapper.inactive-extension .optional-controls {
 355   display: none;
 356 }
 357
 358 .controls-container {
 359   margin: 10px 0;
 360 }
 361
 362 .controls,
 363 .optional-controls {
 364   display: inline-block;
 365 }
 366
 367 .active-views {
 368   margin-bottom: 14px;
 369   margin-top: 10px;
 370 }
 371
 372 .load-path > span {
 373   word-wrap: break-word;
 374 }
 375
 376 .terminated-reload-link {
 377   -webkit-margin-end: 2.5em;
 378   padding-top: 7px;
 379 }
 380
 381 .extension-list-item a {
 382   -webkit-margin-end: 0.5em;
 383   -webkit-margin-start: 0;
 384   display: inline-block;
 385 }
 386
 387 .extension-warnings,
 388 .install-warnings {
 389   background: pink;
 390   border-radius: 3px;
 391   margin-top: 5px;
 392   padding: 2px 5px;
 393 }
 394
 395 .extension-warnings a,
 396 .install-warnings a {
 397   -webkit-margin-start: 0;
 398 }
 399
 400 .extension-warnings ul,
 401 .install-warnings ul {
 402   margin: 0;
 403 }
 404
 405 .extension-warnings li,
 406 .install-warnings li {
 407   word-wrap: break-word;
 408 }
 409
 410 .extension-details-summary {
 411   margin-bottom: 5px;
 412 }
 413
 414 .extension-details-all {
 415   margin-top: 6px;
 416 }
 417
 418 .extension-details-all div.item {
 419   margin: 5px 0;
 420 }
 421
 422 html[dir='rtl'] .delete-link {
 423   float: left;
 424 }
 425
 426 .enable-checkbox-text {
 427   -webkit-margin-end: 0;
 428 }
 429
 430 :-webkit-any(.checkbox, .radio) label input ~ span {
 431   -webkit-margin-start: 0;
 432   display: inline;
 433 }
 434
 435 #tabs {
 436   background: none;
 437 }
 438
 439 #tab-panels {
 440   box-shadow: none;
 441 }
 442
 443 /* Overlays */
 444
 445 #overlay {
 446   background-color: rgba(0, 0, 0, 0.6);
 447   z-index: 5;
 448 }
 449
 450 #overlay .page {
 451   -webkit-border-radius: 0;
 452   border: 1px solid rgba(0, 0, 0, 0.5);
 453   box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.25);
 454   padding: 25px;
 455 }
 456
 457 #overlay .page:not(.showing) {
 458   display: none;
 459 }
 460
 461 #overlay .page h1 {
 462   font-size: 21px;
 463   padding: 0;
 464 }
 465
 466 #overlay .page .content-area,
 467 #overlay .page .action-area {
 468   font-size: 13px;
 469   margin-top: 40px;
 470   padding: 0;
 471 }
 472
 473 /* Pack dialog button size and delete dialog button size */
 474 #packItemOverlay .button-strip button,
 475 #item-private-key-container button,
 476 #alertOverlay .button-strip button {
 477   width: 90px;
 478 }
 479
 480 .extension-id {
 481   -webkit-user-select: text;
 482 }
 483
 484 .may-not-disable .optional-controls .optional-controls-disableable {
 485   display: none;
 486 }
 487
 488 a {
 489   color: rgb(60, 128, 246);
 490   text-decoration: none;
 491 }
 492
 493 a:active {
 494   color: rgb(17, 85, 204);
 495   text-decoration: underline;
 496 }
 497
 498 a:hover {
 499   text-decoration: underline;
 500 }
 501
 502 .optional-controls .terminated-reload-link,
 503 .controls .enable-checkbox,
 504 .optional-controls .incognito-control,
 505 .optional-controls .file-access-control {
 506   -webkit-margin-end: 20px;
 507 }
 508
 509 button {
 510   background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
 511   border: 1px solid rgba(0, 0, 0, 0.1);
 512   border-radius: 2px;
 513   color: #444;
 514   font-family: 'Helvetica Neue', Ubuntu, Arial, sans-serif;
 515   font-size: 12px;
 516   font-weight: bold;
 517   height: 29px;
 518   padding: 0 15px;
 519   transition: border 250ms;
 520 }
 521
 522 button:hover {
 523   background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
 524   border-color: #dcdcdc;
 525   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 526 }
 527
 528 button:active {
 529   background-image: -webkit-linear-gradient(top, #f6f6f6, #f1f1f1);
 530   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 531 }
 532
 533 button:focus {
 534   outline: none;
 535 }
 536
 537 button[disabled],
 538 button[disabled]:hover,
 539 button[disabled]:active {
 540   background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
 541   border-color: rgba(0, 0, 0, 0.1);
 542   box-shadow: none;
 543   color: #888;
 544 }
 545
 546 /* Pack dialog styling */
 547 #item-private-key-container {
 548   display: -webkit-box;
 549 }
 550
 551 #item-private-key-label {
 552   margin: 20px 0 10px;
 553   text-align: start;
 554 }
 555
 556 #item-private-key {
 557   -webkit-box-flex: 1;
 558   display: block;
 559 }
 560
 561 #browse-private-key {
 562   margin-left: 10px;
 563 }