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: #000000;
  72   color: var(--theme-content-color3);
  73   border-color: #9C9CFF;
  74 }
  75
  76 .theme-separator { /* original: grey */
  77   border-color: #8050B0;
  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 .variable-or-property[safe-getter] > .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
 179 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 180   color: #FFCF00;
 181 }
 182
 183 .ruleview-colorswatch,
 184 .computedview-colorswatch,
 185 .ruleview-bezierswatch {
 186 /*  box-shadow: 0 0 0 1px #818181; */
 187 }
 188
 189 .variables-view-scope:focus > .title,
 190 .variable-or-property:focus > .title {
 191   background-color: #008484; /* fg-color2 */
 192   color: #000000;
 193 }
 194
 195 /* CodeMirror specific styles.
 196  * Best effort to match the existing theme, some of the colors
 197  * are duplicated here to prevent weirdness in the main theme. */
 198
 199 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
 200   font-family: inherit;
 201   font-size: inherit;
 202   background: transparent;
 203 }
 204
 205 .CodeMirror.cm-s-mozilla pre,
 206 .cm-s-mozilla .cm-variable-2,
 207 .cm-s-mozilla .cm-variable-3,
 208 .cm-s-mozilla .cm-operator,
 209 .cm-s-mozilla .cm-special {
 210   color: var(--theme-content-color1);
 211 }
 212
 213 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 214   border-left: solid 1px #FF9F00;
 215 }
 216
 217 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 218   background: #008484;
 219   color: #FFCF00;
 220 }
 221
 222 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 223   background: #008484;
 224   color: #000000;
 225 }
 226
 227 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 228   background: rgba(0, 132, 132, .25);
 229 }
 230
 231 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 232   outline: solid 1px rgba(0, 132, 132, .4);
 233   color: #FFCF00;
 234 }
 235
 236 /* Highlight for a line that contains an error. */
 237 div.CodeMirror div.error-line {
 238   background: rgba(255, 0, 0, 0.2);
 239 }
 240
 241 /* Highlight for a line that represents a stack frame's location. */
 242 div.CodeMirror div.debug-line {
 243   background: rgba(156, 156, 255, 0.2);
 244 }
 245
 246 /* Generic highlighted text */
 247 div.CodeMirror span.marked-text {
 248   background: rgba(255,207,0,0.2);
 249   border: 1px dashed rgba(156, 156, 255, 0.6);
 250   -moz-margin-start: -1px;
 251   -moz-margin-end: -1px;
 252 }
 253
 254 /* Highlight for evaluating current statement. */
 255 div.CodeMirror span.eval-text {
 256   background-color: #403800;
 257 }
 258
 259 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 260   color: var(--theme-content-color2);
 261 }
 262
 263 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 264   border-right-color: var(--theme-contrast-border);
 265   background-color: var(--theme-contrast-background);
 266 }
 267
 268 .cm-s-markup-view pre {
 269   line-height: 1.4em;
 270   min-height: 1.4em;
 271 }
 272
 273 /* Twisty and checkbox controls */
 274 .theme-twisty, .theme-checkbox {
 275   width: 14px;
 276   height: 14px;
 277   background-repeat: no-repeat;
 278   background-image: url("chrome://devtools/skin/controls.png");
 279   background-size: 28px 28px;
 280 }
 281
 282 .theme-twisty {
 283   cursor: pointer;
 284   background-position: -0px -14px;
 285 }
 286
 287 .theme-twisty:-moz-focusring {
 288   outline-style: none;
 289 }
 290
 291 .theme-twisty[open] {
 292   background-position: -14px -14px;
 293 }
 294
 295 .theme-twisty[invisible] {
 296   visibility: hidden;
 297 }
 298
 299 .theme-checkbox {
 300   display: inline-block;
 301   border: 0;
 302   padding: 0;
 303   outline: none;
 304   background-position: 0 0;
 305 }
 306
 307 .theme-checkbox[checked] {
 308   background-position: -14px 0;
 309 }
 310
 311 @media (min-resolution: 1.1dppx) {
 312   .theme-twisty, .theme-checkbox {
 313     background-image: url("chrome://devtools/skin/controls@2x.png");
 314   }
 315 }
 316
 317 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
 318
 319 .theme-tooltip-panel .panel-arrowcontent {
 320 /*  padding: 5px; */
 321   background: rgba(0, 0, 0, .9);
 322 /*  border-radius: 5px;
 323   box-shadow: none;
 324   border: 3px solid #9C9CFF; */
 325 }
 326
 327 /* Overring panel arrow images to fit with our light and dark themes */
 328 /*
 329 .theme-tooltip-panel .panel-arrow {
 330   --arrow-margin: -4px;
 331 }
 332
 333 :root[platform="win"] .theme-tooltip-panel .panel-arrow {
 334   --arrow-margin: -7px;
 335 }
 336
 337 .theme-tooltip-panel .panel-arrow[side="top"],
 338 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 339   list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
 340   / !important is needed to override the popup.css rules in toolkit/themes /
 341   width: 39px !important;
 342   height: 16px !important;
 343 }
 344
 345 .theme-tooltip-panel .panel-arrow[side="left"],
 346 .theme-tooltip-panel .panel-arrow[side="right"] {
 347   list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
 348   / !important is needed to override the popup.css rules in toolkit/themes /
 349   width: 16px !important;
 350   height: 39px !important;
 351 }
 352
 353 .theme-tooltip-panel .panel-arrow[side="top"] {
 354   margin-bottom: var(--arrow-margin);
 355 }
 356
 357 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 358   margin-top: var(--arrow-margin);
 359 }
 360
 361 .theme-tooltip-panel .panel-arrow[side="left"] {
 362   margin-right: var(--arrow-margin);
 363 }
 364
 365 .theme-tooltip-panel .panel-arrow[side="right"] {
 366   margin-left: var(--arrow-margin);
 367 }
 368
 369 @media (min-resolution: 1.1dppx) {
 370   .theme-tooltip-panel .panel-arrow[side="top"],
 371   .theme-tooltip-panel .panel-arrow[side="bottom"] {
 372     list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
 373   }
 374
 375   .theme-tooltip-panel .panel-arrow[side="left"],
 376   .theme-tooltip-panel .panel-arrow[side="right"] {
 377     list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
 378   }
 379 }
 380 */
 381 .theme-tooltip-panel .devtools-tooltip-simple-text {
 382 /*  color: white; */
 383   border-bottom: 1px solid #A09090;
 384 }
 385
 386 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
 387  border-bottom: 0;
 388 }
 389
 390 .devtools-textinput,
 391 .devtools-searchinput {
 392   background-color: #000000;
 393   color: #E7ADE7;
 394   border: 1px solid #9C9CFF;
 395 }
 396
 397 .devtools-textinput:focus,
 398 .devtools-searchinput:focus {
 399   border-color: #008484;
 400 }
 401
 402 .CodeMirror-Tern-fname {
 403   color: #A09090;
 404 }
 405
 406 .CodeMirror-hints,
 407 .CodeMirror-Tern-tooltip {
 408   background-color: #000000;
 409   color: var(--theme-body-color);
 410 }