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