third_party/WebKit/Source/devtools/front_end/inspectorStyle.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 html {
  31     height: 100%;
  32     overflow: hidden;
  33 }
  34
  35 body {
  36     height: 100%;
  37     width: 100%;
  38     position: relative;
  39     overflow: hidden;
  40     margin: 0;
  41     cursor: default;
  42     font-family: Lucida Grande, sans-serif;
  43     font-size: 12px;
  44     tab-size: 4;
  45     -webkit-user-select: none;
  46     color: #222;
  47 }
  48
  49 .platform-linux {
  50     color: rgb(48, 57, 66);
  51     font-family: Ubuntu, Arial, sans-serif;
  52 }
  53
  54 .platform-mac {
  55     color: rgb(48, 57, 66);
  56     font-family: 'Lucida Grande', sans-serif;
  57 }
  58
  59 .platform-windows {
  60     font-family: 'Segoe UI', Tahoma, sans-serif;
  61 }
  62
  63 label:hover input {
  64     box-shadow: 0 0 3px highlight;
  65 }
  66
  67 fieldset[disabled] label:hover input {
  68     box-shadow: none;
  69 }
  70
  71 .object-popover-container {
  72     display: inline-block;
  73 }
  74
  75 .inspected-page-placeholder {
  76     background-color: white;
  77 }
  78
  79 .toolbar-background {
  80     padding-left: 1px;
  81     border-bottom: 1px solid rgb(64%, 64%, 64%);
  82     background-origin: padding-box;
  83     background-clip: padding-box;
  84 }
  85
  86 .inspector-view-toolbar-left {
  87     margin-right: -5px; /* Should compensate for .tabbed-pane-header-contents margin-left. */
  88 }
  89
  90 .bubble-repeat-count {
  91     display: inline-block;
  92     height: 14px;
  93     background-color: rgb(128, 151, 189);
  94     vertical-align: middle;
  95     white-space: nowrap;
  96     padding: 1px 4px;
  97     text-align: left;
  98     font-size: 11px;
  99     line-height: normal;
 100     font-weight: bold;
 101     text-shadow: none;
 102     color: white;
 103     margin-top: -1px;
 104     border-radius: 7px;
 105 }
 106
 107 .error-message {
 108     color: red;
 109 }
 110
 111 .error-input {
 112     background-color: rgb(220, 130, 130);
 113 }
 114
 115 .panel {
 116     display: flex;
 117     overflow: hidden;
 118     position: absolute;
 119     top: 0;
 120     left: 0;
 121     right: 0;
 122     bottom: 0;
 123     z-index: 0;
 124 }
 125
 126 iframe.extension {
 127     flex: auto;
 128     width: 100%;
 129     height: 100%;
 130 }
 131
 132 iframe.panel.extension {
 133     display: block;
 134     height: 100%;
 135 }
 136
 137 .outline-disclosure {
 138     padding: 0 0 0 4px;
 139     margin: 0;
 140 }
 141
 142 .outline-disclosure li.hovered:not(.selected) .selection {
 143     display: block;
 144     left: 3px;
 145     right: 3px;
 146     background-color: rgba(56, 121, 217, 0.1);
 147     border-radius: 5px;
 148 }
 149
 150 .outline-disclosure li .selection {
 151     display: none;
 152     position: absolute;
 153     left: 0;
 154     right: 0;
 155     height: 15px;
 156     z-index: -1;
 157 }
 158
 159 .outline-disclosure li.selected .selection {
 160     display: block;
 161     background-color: #dadada;
 162 }
 163
 164 .outline-disclosure li.in-clipboard .highlight {
 165     outline: 1px dotted darkgrey;
 166 }
 167
 168 .outline-disclosure li.elements-drag-over .selection {
 169     display: block;
 170     margin-top: -2px;
 171     border-top: 2px solid rgb(56, 121, 217);
 172 }
 173
 174 ol.outline-disclosure:focus li.selected .selection {
 175     background-color: rgb(56, 121, 217);
 176 }
 177
 178 ol.outline-disclosure:focus li.parent.selected::before {
 179     background-color: white;
 180 }
 181
 182 ol.outline-disclosure,
 183 .outline-disclosure ol {
 184     list-style-type: none;
 185 }
 186
 187 .outline-disclosure-no-padding {
 188     padding: 0;
 189 }
 190
 191 .outline-disclosure ol {
 192     padding-left: 12px;
 193 }
 194
 195 .outline-disclosure li {
 196     margin-top: 1px;
 197     text-overflow: ellipsis;
 198     white-space: nowrap;
 199     overflow: hidden;
 200 }
 201
 202 ol.outline-disclosure:focus li.selected {
 203     color: white;
 204 }
 205
 206 ol.outline-disclosure:focus li.selected * {
 207     color: inherit;
 208 }
 209
 210 .outline-disclosure li::before {
 211     float: left;
 212     -webkit-user-select: none;
 213     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
 214     -webkit-mask-size: 352px 144px;
 215     content: "a";
 216     color: transparent;
 217     text-shadow: none;
 218     position: relative;
 219     top: 2px;
 220     margin-right: 1px;
 221     width: 10px;
 222     height: 10px;
 223 }
 224
 225 .outline-disclosure li:not(.parent)::before {
 226     background-color: transparent;
 227 }
 228
 229 @media (-webkit-min-device-pixel-ratio: 1.5) {
 230 .outline-disclosure li::before {
 231     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 232 }
 233 } /* media */
 234
 235 .outline-disclosure li::before {
 236     -webkit-mask-position: -4px -96px;
 237     background-color: rgb(110, 110, 110);
 238 }
 239
 240 .outline-disclosure li.parent.expanded::before {
 241     -webkit-mask-position: -20px -96px;
 242 }
 243
 244 .outline-disclosure ol.children {
 245     display: none;
 246 }
 247
 248 .outline-disclosure ol.children.expanded {
 249     display: block;
 250 }
 251
 252 .properties-accessor-property-name {
 253     font-style: italic;
 254 }
 255
 256 .editing {
 257     -webkit-user-select: text;
 258     box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
 259     outline: 1px solid rgb(66%, 66%, 66%) !important;
 260     background-color: white;
 261     -webkit-user-modify: read-write-plaintext-only;
 262     text-overflow: clip !important;
 263     padding-left: 2px;
 264     margin-left: -2px;
 265     padding-right: 2px;
 266     margin-right: -2px;
 267     margin-bottom: -1px;
 268     padding-bottom: 1px;
 269     opacity: 1.0 !important;
 270 }
 271
 272 .editing,
 273 .editing * {
 274     color: #222 !important;
 275     text-decoration: none !important;
 276 }
 277
 278 .child-editing {
 279     color: #222 !important;
 280     text-decoration: none !important;
 281     overflow: visible !important;
 282 }
 283
 284 .sidebar {
 285     overflow-x: hidden;
 286     background-color: #f3f3f3;
 287 }
 288
 289 .pane-title-button {
 290     color: rgb(6, 6, 6);
 291     background-color: transparent;
 292     border: 1px solid rgb(165, 165, 165);
 293     background-color: #eee;
 294     background-image: linear-gradient(to bottom, rgb(252, 252, 252), rgb(223, 223, 223));
 295     border-radius: 12px;
 296     -webkit-appearance: none;
 297 }
 298
 299 .pane-title-button:active {
 300     background-color: rgb(215, 215, 215);
 301     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(239, 239, 239));
 302 }
 303
 304 .sidebar-tree,
 305 .sidebar-tree .children {
 306     position: relative;
 307     padding: 0;
 308     margin: 0;
 309     list-style: none;
 310 }
 311
 312 .sidebar-tree-section {
 313     position: relative;
 314     height: 18px;
 315     padding: 1px 10px 6px 10px;
 316     white-space: nowrap;
 317     margin-top: 1px;
 318     color: rgb(92, 110, 129);
 319     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 320 }
 321
 322 .sidebar-tree-item {
 323     position: relative;
 324     height: 36px;
 325     padding: 0 5px 0 5px;
 326     white-space: nowrap;
 327     overflow-x: hidden;
 328     overflow-y: hidden;
 329     margin-top: 1px;
 330     line-height: 34px;
 331     border-top: 1px solid transparent;
 332 }
 333
 334 .sidebar-tree .children {
 335     display: none;
 336 }
 337
 338 .sidebar-tree .children.expanded {
 339     display: block;
 340 }
 341
 342 .sidebar-tree-section + .children > .sidebar-tree-item {
 343     padding-left: 10px !important;
 344 }
 345
 346 .sidebar-tree-section + .children.small > .sidebar-tree-item {
 347     padding-left: 17px !important;
 348 }
 349
 350 .sidebar-tree > .children > .sidebar-tree-item {
 351     padding-left: 37px;
 352 }
 353
 354 .sidebar-tree > .children > .children > .sidebar-tree-item {
 355     padding-left: 37px;
 356 }
 357
 358 .sidebar-tree.some-expandable > .sidebar-tree-item:not(.parent) .icon {
 359     margin-left: 16px;
 360 }
 361
 362 .sidebar-tree-item .disclosure-button {
 363     float: left;
 364     width: 10px;
 365     height: 10px;
 366     border: 0;
 367     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
 368     -webkit-mask-size: 352px 144px;
 369     -webkit-appearance: none;
 370     background-color: rgba(0, 0, 0, 0.75);
 371     position: relative;
 372     top: 10px;
 373 }
 374
 375 @media (-webkit-min-device-pixel-ratio: 1.5) {
 376 .sidebar-tree-item .disclosure-button {
 377     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 378 }
 379 } /* media */
 380
 381 .sidebar-tree-item .disclosure-button {
 382     -webkit-mask-position: -4px -96px;
 383 }
 384
 385 .sidebar-tree-item.selected .disclosure-button {
 386     background-color: white;
 387     -webkit-mask-position: -4px -96px;
 388 }
 389
 390 .sidebar-tree-item.expanded .disclosure-button {
 391     -webkit-mask-position: -20px -96px;
 392 }
 393
 394 .sidebar-tree-item.selected.expanded .disclosure-button {
 395     background-color: white;
 396     -webkit-mask-position: -20px -96px;
 397 }
 398
 399 .sidebar-tree-item .icon {
 400     float: left;
 401     width: 32px;
 402     height: 32px;
 403     margin-top: 1px;
 404     margin-right: 3px;
 405 }
 406
 407 .sidebar-tree-item.wait .icon {
 408     content: none;
 409 }
 410
 411 .spinner-icon::before,
 412 .sidebar-tree-item.wait .icon::before {
 413     display: block;
 414     width: 24px;
 415     height: 24px;
 416     margin: 4px;
 417     border: 3px solid grey;
 418     border-radius: 12px;
 419     clip: rect(0, 15px, 15px, 0);
 420     content: "";
 421     position: absolute;
 422     -webkit-animation: spinner-animation 1s linear infinite;
 423     box-sizing: border-box;
 424 }
 425
 426 .spinner-icon.small::before,
 427 .sidebar-tree-item.wait.small .icon::before {
 428     width: 14px;
 429     height: 14px;
 430     margin: 1px;
 431     clip: rect(0, 9px, 9px, 0);
 432     border-width: 2px;
 433 }
 434
 435 .sidebar-tree-item.wait.selected .icon::before {
 436     border-color: white;
 437 }
 438
 439 @-webkit-keyframes spinner-animation {
 440     from { transform: rotate(0); }
 441     to { transform: rotate(360deg); }
 442 }
 443
 444 li .status {
 445     float: right;
 446     height: 16px;
 447     margin-top: 9px;
 448     margin-left: 4px;
 449     line-height: 1em;
 450 }
 451
 452 li .status:empty {
 453     display: none;
 454 }
 455
 456 li .status .bubble-repeat-count:empty {
 457     display: none;
 458 }
 459
 460 li.selected .status .bubble-repeat-count {
 461     background-color: white !important;
 462     color: rgb(132, 154, 190) !important;
 463 }
 464
 465 :focus li.selected .status .bubble-repeat-count {
 466     color: rgb(36, 98, 172) !important;
 467 }
 468
 469 body.inactive li.selected .status .bubble-repeat-count {
 470     color: rgb(159, 159, 159) !important;
 471 }
 472
 473 .sidebar-tree.small .sidebar-tree-item,
 474 .sidebar-tree .children.small .sidebar-tree-item,
 475 .sidebar-tree-item.small {
 476     height: 20px;
 477 }
 478
 479 .sidebar-tree.small .sidebar-tree-item .icon,
 480 .sidebar-tree .children.small .sidebar-tree-item .icon,
 481 .sidebar-tree-item.small .icon {
 482     width: 16px;
 483     height: 16px;
 484 }
 485
 486 .sidebar-tree.small .sidebar-tree-item .status,
 487 .sidebar-tree .children.small .sidebar-tree-item .status,
 488 .sidebar-tree-item.small .status {
 489     margin-top: 1px;
 490 }
 491
 492 .sidebar-tree-item.selected {
 493     color: white;
 494     text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
 495     background-origin: padding-box;
 496     background-clip: padding-box;
 497     background-color: rgb(56, 121, 217);
 498 }
 499
 500 :focus .sidebar-tree-item.selected {
 501     background-color: rgb(56, 121, 217);
 502 }
 503
 504 body.inactive .sidebar-tree-item.selected {
 505     background-color: rgb(180,180,180);
 506 }
 507
 508 .sidebar-tree-item .titles {
 509     display: flex;
 510     flex-direction: column;
 511     position: relative;
 512     top: 5px;
 513     line-height: 12px;
 514     padding-bottom: 1px;
 515     text-overflow: ellipsis;
 516     overflow: hidden;
 517     white-space: nowrap;
 518 }
 519
 520 .titles > .title-container {
 521     display: flex;
 522 }
 523
 524 .sidebar-tree-item .titles.no-subtitle {
 525     top: 10px;
 526 }
 527
 528 .sidebar-tree.small .sidebar-tree-item .titles,
 529 .sidebar-tree .children.small .sidebar-tree-item .titles,
 530 .sidebar-tree-item.small .titles {
 531     top: 2px;
 532     line-height: normal;
 533 }
 534
 535 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after,
 536 .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
 537     content: "\A";
 538     white-space: pre;
 539 }
 540
 541 .sidebar-tree-item .subtitle {
 542     font-size: 80%;
 543 }
 544
 545 .sidebar-tree.small .sidebar-tree-item .subtitle,
 546 .sidebar-tree .children.small .sidebar-tree-item .subtitle,
 547 .sidebar-tree-item.small .subtitle {
 548     display: none;
 549 }
 550
 551 .sidebar-tree-item.selected .subtitle {
 552     color: white;
 553 }
 554
 555 .bubble-repeat-count.debug,
 556 .console-debug-level .bubble-repeat-count {
 557     background-color: rgb(0, 0, 255) !important;
 558 }
 559
 560 .bubble-repeat-count.warning,
 561 .console-warning-level .bubble-repeat-count {
 562     background-color: rgb(232, 164, 0) !important;
 563 }
 564
 565 .bubble-repeat-count.error,
 566 .console-error-level .bubble-repeat-count {
 567     background-color: rgb(216, 35, 35) !important;
 568 }
 569
 570 .soft-context-menu-glass-pane {
 571     z-index: 20000;
 572 }
 573
 574 .root-view {
 575     overflow: hidden;
 576     position: absolute !important;
 577     left: 0;
 578     top: 0;
 579     right: 0;
 580     bottom: 0;
 581 }
 582
 583 .viewport-control-gap-element {
 584     color: transparent;
 585 }
 586
 587 .chrome-select {
 588     -webkit-appearance: none;
 589     -webkit-user-select: none;
 590     border: 1px solid rgba(0, 0, 0, 0.25);
 591     border-radius: 2px;
 592     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
 593     inset 0 1px 2px rgba(255, 255, 255, 0.75);
 594     color: #444;
 595     font: inherit;
 596     margin: 0 1px 0 0;
 597     outline: none;
 598     text-shadow: 0 1px 0 rgb(240, 240, 240);
 599     padding-right: 20px;
 600     padding-left: 6px;
 601     background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#ededed, #ededed 38%, #dedede);
 602     background-position: right center;
 603     background-repeat: no-repeat;
 604     min-height: 24px;
 605 }
 606
 607 .chrome-select:enabled:hover {
 608     background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 609     border-color: rgba(0, 0, 0, 0.3);
 610     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
 611     inset 0 1px 2px rgba(255, 255, 255, 0.95);
 612     color: black;
 613 }
 614
 615 .chrome-select:enabled:active {
 616     background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 617     box-shadow: none;
 618     text-shadow: none;
 619 }
 620
 621 .chrome-select:enabled:focus {
 622     /* OVERRIDE */
 623     -webkit-transition: border-color 200ms;
 624     /* We use border color because it follows the border radius (unlike outline).
 625      * This is particularly noticeable on mac. */
 626     border-color: rgb(77, 144, 254);
 627     outline: none;
 628 }
 629
 630 body.inactive select.chrome-select,
 631 .chrome-select:disabled {
 632     background-image: -webkit-image-set(url(Images/chromeDisabledSelect.png) 1x, url(Images/chromeDisabledSelect_2x.png) 2x), linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 633     border-color: rgba(80, 80, 80, 0.2);
 634     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
 635     inset 0 1px 2px rgba(255, 255, 255, 0.75);
 636     color: #aaa;
 637 }