LCARStrek/browser/devtools/dark-theme.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 /* According to:
   7  * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
   8  */
   9 .theme-body {
  10   background: #000000;
  11   color: #FF9F00;
  12 }
  13
  14 .theme-twisty {
  15   cursor: pointer;
  16   width: 14px;
  17   height: 14px;
  18   background-repeat: no-repeat;
  19   background-image: url("chrome://browser/skin/devtools/controls.png");
  20   background-position: 0 -14px;
  21 }
  22
  23 .theme-twisty:-moz-focusring {
  24   outline-style: none;
  25 }
  26
  27 .theme-twisty[open] {
  28   background-position: -14px -14px;
  29 }
  30
  31 .theme-checkbox {
  32   display: inline-block;
  33   border: 0;
  34   width: 14px;
  35   height: 14px;
  36   padding: 0;
  37   outline: none;
  38   background-image: url("chrome://browser/skin/devtools/controls.png");
  39   background-position: 0 0;
  40 }
  41
  42 .theme-checkbox[checked] {
  43   background-position: -14px 0;
  44 }
  45
  46 .theme-selected {
  47   background: #004242;
  48 }
  49
  50 .theme-bg-darker {
  51   background-color: rgba(0,0,0,0.5);
  52 }
  53
  54 .theme-bg-contrast { /* contrast bg color to attract attention on a container */
  55   background: #404000;
  56 }
  57
  58 .theme-link,
  59 .cm-s-mozilla .cm-link { /* original: blue */
  60   color: #3333FF;
  61 }
  62
  63 /*
  64  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  65  * failures in debug builds.
  66  */
  67 .theme-link:visited,
  68 .cm-s-mozilla .cm-link:visited { /* original: blue */
  69   color: #3333FF;
  70 }
  71
  72 .theme-comment,
  73 .cm-s-mozilla .cm-meta,
  74 .cm-s-mozilla .cm-hr,
  75 .cm-s-mozilla .cm-comment { /* original: grey */
  76   color: #A09090;
  77 }
  78
  79 .theme-gutter {
  80   background-color: #000000;
  81   color: #FF9F00;
  82   border-color: #9C9CFF;
  83 }
  84
  85 .theme-separator { /* original: grey */
  86   border-color: #8050B0;
  87 }
  88
  89 .theme-fg-color1,
  90 .cm-s-mozilla .cm-number { /* original: green */
  91   color: #008484;
  92 }
  93
  94 .theme-fg-color2,
  95 .cm-s-mozilla .cm-attribute,
  96 .cm-s-mozilla .cm-variable,
  97 .cm-s-mozilla .cm-def,
  98 .cm-s-mozilla .cm-property,
  99 .cm-s-mozilla .cm-qualifier { /* original: blue */
 100   color: #9C9CFF;
 101 }
 102
 103 .theme-fg-color3,
 104 .cm-s-mozilla .cm-builtin,
 105 .cm-s-mozilla .cm-tag,
 106 .cm-s-mozilla .cm-header { /* original: pink/lavender */
 107   color: #E7ADE7;
 108 }
 109
 110 .theme-fg-color4 { /* original: purple/violet */
 111   color: #C09070;
 112 }
 113
 114 .theme-fg-color5,
 115 .cm-s-mozilla .cm-bracket,
 116 .cm-s-mozilla .cm-keyword { /* original: Yellow */
 117   color: #FFCF00;
 118 }
 119
 120 .theme-fg-color6,
 121 .cm-s-mozilla .cm-string,
 122 .cm-s-mozilla .cm-string-2 { /* original: Orange */
 123   color: #E7ADE7;
 124 }
 125
 126 .theme-fg-color7,
 127 .cm-s-mozilla .cm-atom,
 128 .cm-s-mozilla .cm-quote,
 129 .cm-s-mozilla .cm-error { /* original: Red */
 130   color: #FF0000;
 131 }
 132
 133 .theme-toolbar,
 134 .devtools-toolbar { /* General toolbar styling */
 135 }
 136
 137
 138 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 139   color: #FFCF00;
 140 }
 141
 142 .ruleview-colorswatch,
 143 .computedview-colorswatch,
 144 .markupview-colorswatch {
 145 /*  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
 146 }
 147
 148 /* CodeMirror specific styles.
 149  * Best effort to match the existing theme, some of the colors
 150  * are duplicated here to prevent weirdness in the main theme. */
 151
 152 .CodeMirror { /* Inherit platform specific font sizing and styles */
 153   font-family: inherit;
 154   font-size: inherit;
 155   background: transparent;
 156 }
 157
 158 .CodeMirror pre,
 159 .cm-s-mozilla .cm-variable-2,
 160 .cm-s-mozilla .cm-variable-3,
 161 .cm-s-mozilla .cm-operator,
 162 .cm-s-mozilla .cm-special { /* theme-body color */
 163   color: #FF9F00;
 164 }
 165
 166 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 167   border-left: solid 1px #FF9F00;
 168 }
 169
 170 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 171   background: #008484;
 172   color: #FFCF00;
 173 }
 174
 175 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 176   background: #008484;
 177   color: #000000;
 178 }
 179
 180 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 181   background: rgba(0, 132, 132, .25);
 182 }
 183
 184 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 185   outline: solid 1px rgba(0, 132, 132, .4);
 186   color: #FFCF00;
 187 }
 188
 189 /* Highlight for a line that contains an error. */
 190 div.CodeMirror div.error-line {
 191   background: rgba(255, 0, 0, 0.2);
 192 }
 193
 194 /* Highlight for a line that represents a stack frame's location. */
 195 div.CodeMirror div.debug-line {
 196   background: rgba(156, 156, 255, 0.2);
 197 }
 198
 199 /* Generic highlighted text */
 200 div.CodeMirror span.marked-text {
 201   background: rgba(255,207,0,0.2);
 202   border: 1px dashed rgba(156, 156, 255, 0.6);
 203   -moz-margin-start: -1px;
 204   -moz-margin-end: -1px;
 205 }
 206
 207 /* Highlight for evaluating current statement. */
 208 div.CodeMirror span.eval-text {
 209   background-color: #403800;
 210 }
 211
 212 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 213   color: #A09090;
 214 }
 215
 216 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 217   border-right-color: #A09090;
 218   background-color: #402800;
 219 }
 220
 221 .cm-s-markup-view pre {
 222   line-height: 1.4em;
 223   min-height: 1.4em;
 224 }
 225
 226 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
 227
 228 .theme-tooltip-panel .panel-arrowcontent {
 229 /*  padding: 5px; */
 230   background: rgba(0, 0, 0, .9);
 231 /*  border-radius: 5px;
 232   box-shadow: none;
 233   border: 3px solid #9C9CFF; */
 234 }
 235
 236 /* Overring panel arrow images to fit with our light and dark themes */
 237 /*
 238 .theme-tooltip-panel .panel-arrow[side="top"] {
 239   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 240   margin-bottom: -4px;
 241 }
 242
 243 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 244   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 245   margin-top: -4px;
 246 }
 247
 248 .theme-tooltip-panel .panel-arrow[side="left"] {
 249   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 250   margin-right: -4px;
 251 }
 252
 253 .theme-tooltip-panel .panel-arrow[side="right"] {
 254   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 255   margin-left: -4px;
 256 }
 257
 258 @media (min-resolution: 2dppx) {
 259   .theme-tooltip-panel .panel-arrow[side="top"],
 260   .theme-tooltip-panel .panel-arrow[side="bottom"] {
 261     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
 262   }
 263
 264   .theme-tooltip-panel .panel-arrow[side="left"],
 265   .theme-tooltip-panel .panel-arrow[side="right"] {
 266     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
 267   }
 268 }
 269 */
 270 .theme-tooltip-panel .devtools-tooltip-simple-text {
 271 /*  color: white; */
 272   border-bottom: 1px solid #A09090;
 273 }
 274
 275 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
 276  border-bottom: 0;
 277 }
 278
 279 /* === BEGIN toolbars.inc.css === */
 280
 281 .devtools-toolbar {
 282 }
 283
 284 /* LCARStrek checkbox colors don't work well against toolbar background */
 285 .devtools-toolbar > checkbox {
 286   background-color: #000000;
 287   padding: 2px;
 288 }
 289
 290 .devtools-menulist,
 291 .devtools-toolbarbutton {
 292 }
 293
 294 devtools-menulist:-moz-focusring,
 295 .devtools-toolbarbutton:-moz-focusring {
 296   outline: 1px dotted #008484;
 297 }
 298
 299 .devtools-toolbarbutton > .toolbarbutton-icon {
 300 }
 301
 302 .devtools-toolbarbutton:not([label]) {
 303   min-width: 20px;
 304 }
 305
 306 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
 307   display: none;
 308 }
 309
 310 .devtools-toolbarbutton > .toolbarbutton-menubutton-button {
 311   /*-moz-box-orient: horizontal;*/
 312 }
 313
 314 .devtools-toolbarbutton:not([checked=true]):hover:active {
 315 }
 316
 317 .devtools-menulist[open=true],
 318 .devtools-toolbarbutton[open=true],
 319 .devtools-toolbarbutton[checked=true] {
 320 }
 321
 322 .devtools-toolbarbutton[checked=true] {
 323 }
 324
 325 .devtools-toolbarbutton[checked=true]:hover:active {
 326 }
 327
 328 .devtools-option-toolbarbutton {
 329   list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
 330   -moz-image-region: rect(0px 16px 16px 0px);
 331 /*  background: none;
 332   border: none; */
 333 }
 334
 335 .devtools-option-toolbarbutton:hover,
 336 .devtools-option-toolbarbutton[open=true] {
 337   -moz-image-region: rect(0px 32px 16px 16px);
 338 }
 339
 340 .devtools-menulist > .menulist-label-box {
 341   text-align: center;
 342 }
 343
 344 .devtools-menulist > .menulist-dropmarker {
 345 }
 346
 347 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
 348 }
 349
 350 .devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
 351 }
 352
 353 .devtools-toolbarbutton[type=menu-button] {
 354   padding: 0 1px;
 355   -moz-box-align: stretch;
 356 }
 357
 358 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 359 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
 360   -moz-box-align: center;
 361 }
 362
 363 /* Text input */
 364
 365 .devtools-textinput,
 366 .devtools-searchinput {
 367   -moz-appearance: none;
 368 /*  margin: 0 3px;
 369   min-height: 22px;
 370   border: 1px solid hsla(211,68%,6%,.6);
 371   box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
 372   border-radius: 2px;
 373   background-color: transparent;
 374   background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
 375   padding: 3px;*/
 376   transition-property: background-color, border-color, box-shadow;
 377   transition-duration: 150ms;
 378   transition-timing-function: ease;
 379 /*  color: inherit; */
 380 }
 381
 382 .devtools-searchinput {
 383   background-image: url("magnifying-glass.png")/*, linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35))*/;
 384   background-repeat: no-repeat;
 385   background-position: 4px center, top left, top left;
 386 /*  padding-top: 0;
 387   padding-bottom: 0;*/
 388   -moz-padding-start: 18px;
 389   -moz-padding-end: 12px;
 390   font-size: inherit;
 391 }
 392
 393 .devtools-searchinput:-moz-locale-dir(rtl) {
 394   background-position: calc(100% - 4px) center, top left, top left;
 395 }
 396
 397 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
 398   display: none;
 399 }
 400
 401 .devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
 402 /*  color: hsl(208,10%,66%);*/
 403 }
 404
 405 .devtools-no-search-result {
 406 /*  box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
 407   border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;*/
 408   background-image: url("magnifying-glass.png"), linear-gradient(rgba(255,0,0,.15), rgba(255,0,0,.35));
 409 }
 410
 411 /* Close button */
 412
 413 .devtools-closebutton {
 414   list-style-image: url("chrome://global/skin/icons/close-button.gif");
 415   min-width: 16px;
 416   width: 16px;
 417 }
 418
 419 .devtools-closebutton > .toolbarbutton-text {
 420   display: none;
 421 }
 422
 423 .devtools-closebutton:hover,
 424 .devtools-closebutton:hover:active {
 425   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
 426 }
 427
 428 /* In-tools sidebar */
 429
 430 .devtools-sidebar-tabs {
 431 }
 432
 433 .devtools-sidebar-tabs > tabpanels {
 434   padding: 0;
 435   border: 0;
 436 }
 437
 438 .devtools-sidebar-tabs > tabs {
 439   position: static;
 440   overflow: hidden;
 441 }
 442
 443 .devtools-sidebar-tabs > tabs > .tabs-right,
 444 .devtools-sidebar-tabs > tabs > .tabs-left {
 445   display: none;
 446 }
 447
 448 .devtools-sidebar-tabs > tabs > tab {
 449   min-width: 78px;
 450   text-align: center;
 451   -moz-box-flex: 1;
 452   position: static;
 453   margin-top: 0;
 454 }
 455
 456 .devtools-sidebar-tabs > tabs > tab:-moz-focusring {
 457   position: static;
 458 }
 459
 460 .devtools-sidebar-tabs > tabs > tab:last-of-type {
 461   -moz-border-end-width: 0;
 462 }
 463
 464 .devtools-sidebar-tabs > tabs > tab:first-of-type {
 465   -moz-margin-start: 0;
 466 }
 467
 468 .devtools-sidebar-tabs > tabs > tab {
 469 }
 470
 471 .devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
 472 }
 473
 474 .devtools-sidebar-tabs > tabs > tab {
 475 }
 476
 477 .devtools-sidebar-tabs > tabs > tab:hover {
 478 }
 479
 480 .devtools-sidebar-tabs > tabs > tab:hover:active {
 481 }
 482
 483 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
 484 }
 485
 486 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
 487 }
 488
 489 .devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
 490 }
 491
 492 .devtools-sidebar-tabs > tabs > tab[selected=true] {
 493 }
 494
 495 .devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
 496 }
 497
 498 .devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
 499 }
 500
 501 /* Toolbox - moved from toolbox.css.
 502  * Rules that apply to the global toolbox like command buttons,
 503  * devtools tabs, docking buttons, etc. */
 504
 505 #toolbox-controls {
 506   margin: 0 2px;
 507 }
 508
 509 #toolbox-controls > toolbarbutton,
 510 #toolbox-dock-buttons > toolbarbutton {
 511   min-width: 16px;
 512 /*  padding: 1px 3px; */
 513 }
 514
 515 #toolbox-dock-bottom {
 516   list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
 517   -moz-image-region: rect(0px, 16px, 16px, 0px);
 518 }
 519
 520 #toolbox-dock-bottom:hover {
 521   -moz-image-region: rect(0px, 32px, 16px, 16px);
 522 }
 523
 524 #toolbox-dock-side {
 525   list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
 526   -moz-image-region: rect(0px, 16px, 16px, 0px);
 527 }
 528
 529 #toolbox-dock-side:hover {
 530   -moz-image-region: rect(0px, 32px, 16px, 16px);
 531 }
 532
 533 #toolbox-dock-window {
 534   list-style-image: url("chrome://browser/skin/devtools/undock.png");
 535   -moz-image-region: rect(0px, 16px, 16px, 0px);
 536 }
 537
 538 #toolbox-dock-window:hover {
 539   -moz-image-region: rect(0px, 32px, 16px, 16px);
 540 }
 541
 542 #toolbox-dock-window,
 543 #toolbox-dock-bottom,
 544 #toolbox-dock-side {
 545 }
 546
 547 #toolbox-dock-window:hover,
 548 #toolbox-dock-bottom:hover,
 549 #toolbox-dock-side:hover {
 550 }
 551
 552 #toolbox-controls-separator {
 553   -moz-margin-start: 4px;
 554 }
 555
 556 /* Command buttons */
 557
 558 .command-button {
 559 /*  padding: 1px 4px; */
 560   min-width: 16px;
 561 }
 562
 563 .command-button:hover {
 564 }
 565 .command-button:hover:active {
 566 }
 567
 568 #command-button-paintflashing {
 569   list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
 570   -moz-image-region: rect(0px, 16px, 16px, 0px);
 571 }
 572
 573 #command-button-paintflashing:hover,
 574 #command-button-paintflashing:hover:active,
 575 #command-button-paintflashing[checked=true] {
 576   -moz-image-region: rect(0px, 32px, 16px, 16px);
 577 }
 578
 579 #command-button-responsive {
 580   list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
 581   -moz-image-region: rect(0px, 16px, 16px, 0px);
 582 }
 583
 584 #command-button-responsive:hover,
 585 #command-button-responsive:hover:active,
 586 #command-button-responsive[checked=true] {
 587   -moz-image-region: rect(0px, 32px, 16px, 16px);
 588 }
 589
 590 #command-button-tilt {
 591   list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
 592   -moz-image-region: rect(0px, 16px, 16px, 0px);
 593 }
 594
 595 #command-button-tilt:hover,
 596 #command-button-tilt:hover:active,
 597 #command-button-tilt[checked=true] {
 598   -moz-image-region: rect(0px, 32px, 16px, 16px);
 599 }
 600
 601 #command-button-scratchpad {
 602   list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
 603   -moz-image-region: rect(0px, 16px, 16px, 0px);
 604 }
 605
 606 #command-button-scratchpad:hover,
 607 #command-button-scratchpad:hover:active {
 608   -moz-image-region: rect(0px, 32px, 16px, 16px);
 609 }
 610
 611 #command-button-pick {
 612   list-style-image: url("chrome://browser/skin/devtools/command-pick.png");
 613   -moz-image-region: rect(0px, 16px, 16px, 0px);
 614 }
 615
 616 #command-button-pick:hover,
 617 #command-button-pick:hover:active {
 618   -moz-image-region: rect(0px, 32px, 16px, 16px);
 619 }
 620
 621 #command-button-splitconsole {
 622   list-style-image: url("chrome://browser/skin/devtools/command-console.png");
 623   -moz-image-region: rect(0px, 16px, 16px, 0px);
 624 }
 625
 626 #command-button-splitconsole:hover,
 627 #command-button-splitconsole:hover:active {
 628   -moz-image-region: rect(0px, 32px, 16px, 16px);
 629 }
 630
 631 /* Tabs */
 632
 633 .devtools-tabbar {
 634 }
 635
 636 #toolbox-tabs {
 637   margin: 0;
 638   background-color: #000000;
 639   color: #FFCF00;
 640 }
 641
 642 .devtools-tab {
 643   min-width: 32px;
 644   max-width: 110px;
 645   color: #000000;
 646   margin: 0;
 647   -moz-margin-end: 3px;
 648   padding: 1px;
 649   -moz-padding-start: 3px;
 650   background-color: #C09070;
 651   border-radius: 8px 8px 0 0;
 652 }
 653
 654 .devtools-tab > image {
 655   -moz-margin-end: 0px;
 656 /*  -moz-margin-start: 4px; */
 657   max-height: 16px;
 658   width: 16px; /* Prevents collapse during theme switching */
 659 }
 660
 661 #toolbox-tab-options > image {
 662 /*  margin: 0 8px; */
 663 }
 664
 665 .devtools-tab:hover > image {
 666 }
 667
 668 .devtools-tab:active > image,
 669 .devtools-tab[selected=true] > image {
 670 }
 671
 672 .devtools-tab:hover,
 673 .devtools-tab:hover:active {
 674   background-color: #FFCF00;
 675   color: #000000;
 676 }
 677
 678 .devtools-tab[selected=true] {
 679   background-color: #008484;
 680   color: #000000;
 681 }
 682
 683 .devtools-tab > spacer {
 684   max-width: 0;
 685   -moz-box-flex: 0;
 686 }
 687
 688 .devtools-tab > image {
 689   -moz-margin-end: 0;
 690   -moz-margin-start: 0;
 691 }
 692
 693 #toolbox-tab-options {
 694   min-width: 20px;
 695 }
 696
 697 #toolbox-tab-options > image {
 698   -moz-margin-end: 3px;
 699 }
 700
 701 .devtools-tab:not(.highlighted) > .highlighted-icon,
 702 .devtools-tab[selected=true] > .highlighted-icon,
 703 .devtools-tab:not([selected=true]).highlighted > .default-icon {
 704   visibility: collapse;
 705 }
 706
 707 .devtools-tab:not([selected=true]).highlighted {
 708   color: #FFCF00;
 709 }
 710
 711 .devtools-tab:not(.highlighted) > .highlighted-icon,
 712 .devtools-tab[selected=true] > .highlighted-icon,
 713 .devtools-tab:not([selected=true]).highlighted > .default-icon {
 714   visibility: collapse;
 715 }
 716
 717 .hidden-labels-box:not(.visible) > label,
 718 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
 719   display: none;
 720 }
 721
 722 /* === END toolbars.inc.css === */