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,
  48 .cm-s-mozilla .cm-keyword {
  49   color: var(--theme-text-green);
  50 }
  51
  52 /*
  53  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  54  * failures in debug builds.
  55  */
  56 .theme-link:visited,
  57 .cm-s-mozilla .cm-link:visited,
  58 .CodeMirror-Tern-type {
  59   color: var(--theme-text-blue);
  60 }
  61
  62 .theme-comment,
  63 .cm-s-mozilla .cm-meta,
  64 .cm-s-mozilla .cm-hr,
  65 .cm-s-mozilla .cm-comment,
  66 .variable-or-property .token-undefined,
  67 .variable-or-property .token-null,
  68 .CodeMirror-Tern-completion-unknown:before {
  69   color: var(--theme-comment);
  70 }
  71
  72 .theme-gutter {
  73   background-color: var(--theme-tab-toolbar-background);
  74   color: var(--theme-content-color3);
  75   border-color: var(--theme-splitter-color);
  76 }
  77
  78 .theme-separator {
  79   border-color: var(--theme-splitter-color);
  80 }
  81
  82 .theme-fg-color1,
  83 .cm-s-mozilla .cm-number,
  84 .variable-or-property .token-number,
  85 .variable-or-property[return] > .title > .name,
  86 .variable-or-property[scope] > .title > .name {
  87   color: var(--theme-highlight-red);
  88 }
  89
  90 .CodeMirror-Tern-completion-number:before {
  91   background-color: #008484;
  92 }
  93
  94 .theme-fg-color2,
  95 .cm-s-mozilla .cm-attribute,
  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-purple);
 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-green);
 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   color: var(--theme-highlight-purple);
 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 .cm-s-mozilla .cm-variable,
 142 .CodeMirror-Tern-farg {
 143   color: var(--theme-highlight-gray);
 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   border-color: var(--theme-splitter-color);*/
 177 }
 178
 179 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 180   color: #FFCF00;
 181 }
 182
 183 .ruleview-swatch,
 184 .computedview-colorswatch {
 185 /*  box-shadow: 0 0 0 1px #818181; */
 186 }
 187
 188 .variables-view-scope:focus > .title,
 189 .variable-or-property:focus > .title {
 190   background-color: #008484; /* fg-color2 */
 191   color: #000000;
 192 }
 193
 194 /* CodeMirror specific styles.
 195  * Best effort to match the existing theme, some of the colors
 196  * are duplicated here to prevent weirdness in the main theme. */
 197
 198 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
 199   font-family: inherit;
 200   font-size: inherit;
 201   background: transparent;
 202 }
 203
 204 .CodeMirror.cm-s-mozilla pre,
 205 .cm-s-mozilla .cm-variable-2,
 206 .cm-s-mozilla .cm-variable-3,
 207 .cm-s-mozilla .cm-operator,
 208 .cm-s-mozilla .cm-special {
 209   color: var(--theme-content-color1);
 210 }
 211
 212 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 213   border-left: solid 1px #FF9F00;
 214 }
 215
 216 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 217   background: #008484;
 218   color: #FFCF00;
 219 }
 220
 221 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 222   background: #008484;
 223   color: #000000;
 224 }
 225
 226 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 227   background: rgba(0, 132, 132, .25);
 228 }
 229
 230 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 231   outline: solid 1px rgba(0, 132, 132, .4);
 232   color: #FFCF00;
 233 }
 234
 235 /* Highlight for a line that contains an error. */
 236 div.CodeMirror div.error-line {
 237   background: rgba(255, 0, 0, 0.2);
 238 }
 239
 240 /* Generic highlighted text */
 241 div.CodeMirror span.marked-text {
 242   background: rgba(255,207,0,0.2);
 243   border: 1px dashed rgba(156, 156, 255, 0.6);
 244   margin-inline-start: -1px;
 245   margin-inline-end: -1px;
 246 }
 247
 248 /* Highlight for evaluating current statement. */
 249 div.CodeMirror span.eval-text {
 250   background-color: #403800;
 251 }
 252
 253 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 254   color: var(--theme-content-color2);
 255 }
 256
 257 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 258   border-right-color: var(--theme-contrast-border);
 259   background-color: var(--theme-contrast-background);
 260 }
 261
 262 .cm-s-markup-view pre {
 263   line-height: 1.4em;
 264   min-height: 1.4em;
 265 }
 266
 267 /* Twisty and checkbox controls */
 268 .theme-twisty, .theme-checkbox {
 269   width: 14px;
 270   height: 14px;
 271   background-repeat: no-repeat;
 272   background-image: url("chrome://devtools/skin/images/controls.png");
 273   background-size: 28px 28px;
 274 }
 275
 276 .theme-twisty {
 277   cursor: pointer;
 278   background-position: -0px -14px;
 279 }
 280
 281 .theme-twisty:-moz-focusring {
 282   outline-style: none;
 283 }
 284
 285 .theme-twisty[open] {
 286   background-position: -14px -14px;
 287 }
 288
 289 .theme-twisty[invisible] {
 290   visibility: hidden;
 291 }
 292
 293 /* Mirror the twisty for rtl direction */
 294 .theme-twisty:dir(rtl),
 295 .theme-twisty:-moz-locale-dir(rtl) {
 296   transform: scaleX(-1);
 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/images/controls@2x.png");
 314   }
 315 }
 316
 317 /* XUL panel styling (see devtools/client/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 .devtools-filterinput,
 393 .devtools-plaininput {
 394   background-color: #000000;
 395   color: #E7ADE7;
 396   border: 1px solid #9C9CFF;
 397   border-radius: 3px;
 398 }
 399
 400 .devtools-textinput:focus,
 401 .devtools-searchinput:focus,
 402 .devtools-filterinput:focus,
 403 .devtools-plaininput:focus {
 404   border-color: #008484;
 405 }
 406
 407 .devtools-textinput::placeholder,
 408 .devtools-searchinput::placeholder,
 409 .devtools-filterinput::placeholder,
 410 .devtools-plaininput::placeholder {
 411   color: #8050B0;
 412   opacity: 1.0;
 413 }
 414
 415 .CodeMirror-Tern-fname {
 416   color: #A09090;
 417 }
 418
 419 .CodeMirror-hints,
 420 .CodeMirror-Tern-tooltip {
 421   background-color: #000000;
 422   color: var(--theme-body-color);
 423 }