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