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