LCARStrek/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 @import url(variables.css);
   7 @import url(common.css);
   8 @import url(toolbars.css);
   9 @import url(tooltips.css);
  10
  11 body, html {
  12   padding: 0;
  13   margin: 0;
  14 }
  15
  16 .theme-body {
  17   background: var(--theme-body-background);
  18   color: var(--theme-body-color);
  19 }
  20
  21 .theme-sidebar {
  22   background: var(--theme-sidebar-background);
  23   color: var(--theme-content-color1);
  24 }
  25
  26 ::-moz-selection {
  27   background-color: var(--theme-selection-background);
  28   color: var(--theme-selection-color);
  29 }
  30
  31 .theme-bg-darker {
  32   background: var(--theme-selection-background-semitransparent);
  33 }
  34
  35 .theme-selected,
  36 .CodeMirror-hint-active {
  37   background-color: var(--theme-selection-background2);
  38   color: var(--theme-selection-color2);
  39 }
  40
  41 .theme-bg-contrast,
  42 .variable-or-property:not([overridden])[changed] {
  43   background: var(--theme-contrast-background);
  44 }
  45
  46 .theme-link,
  47 .cm-s-mozilla .cm-link { /* original: blue */
  48   color: var(--theme-text-blue);
  49 }
  50
  51 /*
  52  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  53  * failures in debug builds.
  54  */
  55 .theme-link:visited,
  56 .cm-s-mozilla .cm-link:visited,
  57 .CodeMirror-Tern-type {
  58   color: var(--theme-text-blue);
  59 }
  60
  61 .theme-comment,
  62 .cm-s-mozilla .cm-meta,
  63 .cm-s-mozilla .cm-hr,
  64 .cm-s-mozilla .cm-comment,
  65 .variable-or-property .token-undefined,
  66 .variable-or-property .token-null,
  67 .CodeMirror-Tern-completion-unknown:before {
  68   color: var(--theme-comment);
  69 }
  70
  71 .theme-gutter {
  72   background-color: var(--theme-tab-toolbar-background);
  73   color: var(--theme-content-color3);
  74   border-color: var(--theme-splitter-color);
  75 }
  76
  77 .theme-separator {
  78   border-color: var(--theme-splitter-color);
  79 }
  80
  81 .theme-fg-color1,
  82 .cm-s-mozilla .cm-number,
  83 .variable-or-property .token-number,
  84 .variable-or-property[return] > .title > .name,
  85 .variable-or-property[scope] > .title > .name {
  86   color: var(--theme-highlight-green);
  87 }
  88
  89 .CodeMirror-Tern-completion-number:before {
  90   background-color: #008484;
  91 }
  92
  93 .theme-fg-color2,
  94 .cm-s-mozilla .cm-attribute,
  95 .cm-s-mozilla .cm-variable,
  96 .cm-s-mozilla .cm-def,
  97 .cm-s-mozilla .cm-property,
  98 .cm-s-mozilla .cm-qualifier,
  99 .variables-view-variable > .title > .name {
 100   color: var(--theme-highlight-blue);
 101 }
 102
 103 .CodeMirror-Tern-completion-object:before {
 104   background-color: #9C9CFF;
 105 }
 106
 107 .cm-s-mozilla .cm-unused-line {
 108   text-decoration: line-through;
 109   text-decoration-color: #8050B0;
 110 }
 111
 112 .cm-s-mozilla .cm-executed-line {
 113   background-color: #404000;
 114 }
 115
 116 .theme-fg-color3,
 117 .cm-s-mozilla .cm-builtin,
 118 .cm-s-mozilla .cm-tag,
 119 .cm-s-mozilla .cm-header,
 120 .cm-s-mozilla .cm-bracket,
 121 .variables-view-property > .title > .name {
 122   color: var(--theme-highlight-pink);
 123 }
 124
 125 .CodeMirror-Tern-completion-array:before {
 126   color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
 127 }
 128
 129 .theme-fg-color4 {
 130   color: var(--theme-highlight-purple);
 131 }
 132
 133 .theme-fg-color5,
 134 .cm-s-mozilla .cm-keyword {
 135   color: var(--theme-highlight-lightorange);
 136 }
 137
 138 .theme-fg-color6,
 139 .cm-s-mozilla .cm-string,
 140 .cm-s-mozilla .cm-string-2,
 141 .variable-or-property .token-string,
 142 .CodeMirror-Tern-farg {
 143   color: var(--theme-highlight-pink); /* -orange? */
 144 }
 145
 146 .CodeMirror-Tern-completion-string:before,
 147 .CodeMirror-Tern-completion-fn:before {
 148   background-color: #E7ADE7;
 149 }
 150
 151 .theme-fg-color7,
 152 .cm-s-mozilla .cm-atom,
 153 .cm-s-mozilla .cm-quote,
 154 .cm-s-mozilla .cm-error,
 155 .variable-or-property .token-boolean,
 156 .variable-or-property .token-domnode,
 157 .variable-or-property[exception] > .title > .name {
 158   color: var(--theme-highlight-red);
 159 }
 160
 161 .CodeMirror-Tern-completion-bool:before {
 162   background-color: #FF0000;
 163 }
 164
 165 .variable-or-property .token-domnode {
 166   font-weight: bold;
 167 }
 168
 169 .theme-toolbar,
 170 .devtools-toolbar,
 171 .devtools-sidebar-tabs tabs,
 172 .devtools-sidebar-alltabs,
 173 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
 174 /*  color: var(--theme-body-color-alt);
 175   background-color: var(--theme-toolbar-background);*/
 176 }
 177
 178 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 179   color: #FFCF00;
 180 }
 181
 182 .ruleview-swatch,
 183 .computedview-colorswatch {
 184 /*  box-shadow: 0 0 0 1px #818181; */
 185 }
 186
 187 .variables-view-scope:focus > .title,
 188 .variable-or-property:focus > .title {
 189   background-color: #008484; /* fg-color2 */
 190   color: #000000;
 191 }
 192
 193 /* CodeMirror specific styles.
 194  * Best effort to match the existing theme, some of the colors
 195  * are duplicated here to prevent weirdness in the main theme. */
 196
 197 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
 198   font-family: inherit;
 199   font-size: inherit;
 200   background: transparent;
 201 }
 202
 203 .CodeMirror.cm-s-mozilla pre,
 204 .cm-s-mozilla .cm-variable-2,
 205 .cm-s-mozilla .cm-variable-3,
 206 .cm-s-mozilla .cm-operator,
 207 .cm-s-mozilla .cm-special {
 208   color: var(--theme-content-color1);
 209 }
 210
 211 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 212   border-left: solid 1px #FF9F00;
 213 }
 214
 215 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 216   background: #008484;
 217   color: #FFCF00;
 218 }
 219
 220 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 221   background: #008484;
 222   color: #000000;
 223 }
 224
 225 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 226   background: rgba(0, 132, 132, .25);
 227 }
 228
 229 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 230   outline: solid 1px rgba(0, 132, 132, .4);
 231   color: #FFCF00;
 232 }
 233
 234 /* Highlight for a line that contains an error. */
 235 div.CodeMirror div.error-line {
 236   background: rgba(255, 0, 0, 0.2);
 237 }
 238
 239 /* Generic highlighted text */
 240 div.CodeMirror span.marked-text {
 241   background: rgba(255,207,0,0.2);
 242   border: 1px dashed rgba(156, 156, 255, 0.6);
 243   margin-inline-start: -1px;
 244   margin-inline-end: -1px;
 245 }
 246
 247 /* Highlight for evaluating current statement. */
 248 div.CodeMirror span.eval-text {
 249   background-color: #403800;
 250 }
 251
 252 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 253   color: var(--theme-content-color2);
 254 }
 255
 256 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 257   border-right-color: var(--theme-contrast-border);
 258   background-color: var(--theme-contrast-background);
 259 }
 260
 261 .cm-s-markup-view pre {
 262   line-height: 1.4em;
 263   min-height: 1.4em;
 264 }
 265
 266 /* Twisty and checkbox controls */
 267 .theme-twisty, .theme-checkbox {
 268   width: 14px;
 269   height: 14px;
 270   background-repeat: no-repeat;
 271   background-image: url("chrome://devtools/skin/images/controls.png");
 272   background-size: 28px 28px;
 273 }
 274
 275 .theme-twisty {
 276   cursor: pointer;
 277   background-position: -0px -14px;
 278 }
 279
 280 .theme-twisty:-moz-focusring {
 281   outline-style: none;
 282 }
 283
 284 .theme-twisty[open] {
 285   background-position: -14px -14px;
 286 }
 287
 288 .theme-twisty[invisible] {
 289   visibility: hidden;
 290 }
 291
 292 .theme-checkbox {
 293   display: inline-block;
 294   border: 0;
 295   padding: 0;
 296   outline: none;
 297   background-position: 0 0;
 298 }
 299
 300 .theme-checkbox[checked] {
 301   background-position: -14px 0;
 302 }
 303
 304 @media (min-resolution: 1.1dppx) {
 305   .theme-twisty, .theme-checkbox {
 306     background-image: url("chrome://devtools/skin/images/controls@2x.png");
 307   }
 308 }
 309
 310 /* XUL panel styling (see devtools/client/shared/widgets/Tooltip.js) */
 311
 312 .theme-tooltip-panel .panel-arrowcontent {
 313 /*  padding: 5px; */
 314   background: rgba(0, 0, 0, .9);
 315 /*  border-radius: 5px;
 316   box-shadow: none;
 317   border: 3px solid #9C9CFF; */
 318 }
 319
 320 /* Overring panel arrow images to fit with our light and dark themes */
 321 /*
 322 .theme-tooltip-panel .panel-arrow {
 323   --arrow-margin: -4px;
 324 }
 325
 326 :root[platform="win"] .theme-tooltip-panel .panel-arrow {
 327   --arrow-margin: -7px;
 328 }
 329
 330 .theme-tooltip-panel .panel-arrow[side="top"],
 331 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 332   list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
 333   / !important is needed to override the popup.css rules in toolkit/themes /
 334   width: 39px !important;
 335   height: 16px !important;
 336 }
 337
 338 .theme-tooltip-panel .panel-arrow[side="left"],
 339 .theme-tooltip-panel .panel-arrow[side="right"] {
 340   list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
 341   / !important is needed to override the popup.css rules in toolkit/themes /
 342   width: 16px !important;
 343   height: 39px !important;
 344 }
 345
 346 .theme-tooltip-panel .panel-arrow[side="top"] {
 347   margin-bottom: var(--arrow-margin);
 348 }
 349
 350 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 351   margin-top: var(--arrow-margin);
 352 }
 353
 354 .theme-tooltip-panel .panel-arrow[side="left"] {
 355   margin-right: var(--arrow-margin);
 356 }
 357
 358 .theme-tooltip-panel .panel-arrow[side="right"] {
 359   margin-left: var(--arrow-margin);
 360 }
 361
 362 @media (min-resolution: 1.1dppx) {
 363   .theme-tooltip-panel .panel-arrow[side="top"],
 364   .theme-tooltip-panel .panel-arrow[side="bottom"] {
 365     list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
 366   }
 367
 368   .theme-tooltip-panel .panel-arrow[side="left"],
 369   .theme-tooltip-panel .panel-arrow[side="right"] {
 370     list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
 371   }
 372 }
 373 */
 374 .theme-tooltip-panel .devtools-tooltip-simple-text {
 375 /*  color: white; */
 376   border-bottom: 1px solid #A09090;
 377 }
 378
 379 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
 380   border-bottom: 0;
 381 }
 382
 383 .devtools-textinput,
 384 .devtools-filterinput,
 385 .devtools-searchinput {
 386   background-color: #000000;
 387   color: #E7ADE7;
 388   border: 1px solid #9C9CFF;
 389 }
 390
 391 .devtools-textinput:focus,
 392 .devtools-filterinput:focus,
 393 .devtools-searchinput:focus {
 394   border-color: #008484;
 395 }
 396
 397 .CodeMirror-Tern-fname {
 398   color: #A09090;
 399 }
 400
 401 .CodeMirror-hints,
 402 .CodeMirror-Tern-tooltip {
 403   background-color: #000000;
 404   color: var(--theme-body-color);
 405 }