LCARStrek/browser/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("toolbox.css"); /* workaround until the move to toolbars.inc.css is done */
   7
   8 /* According to:
   9  * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
  10  */
  11 .theme-body {
  12   background: #000000;
  13   color: #FF9F00;
  14 }
  15
  16 .theme-twisty {
  17   cursor: pointer;
  18   width: 14px;
  19   height: 14px;
  20   background-repeat: no-repeat;
  21   background-image: url("chrome://browser/skin/devtools/controls.png");
  22   background-position: 0 -14px;
  23 }
  24
  25 .theme-twisty:-moz-focusring {
  26   outline-style: none;
  27 }
  28
  29 .theme-twisty[open] {
  30   background-position: -14px -14px;
  31 }
  32
  33 .theme-checkbox {
  34   display: inline-block;
  35   border: 0;
  36   width: 14px;
  37   height: 14px;
  38   padding: 0;
  39   outline: none;
  40   background-image: url("chrome://browser/skin/devtools/controls.png");
  41   background-position: 0 0;
  42 }
  43
  44 .theme-checkbox[checked] {
  45   background-position: -14px 0;
  46 }
  47
  48 .theme-selected {
  49   background: #004242;
  50 }
  51
  52 .theme-bg-darker {
  53   background-color: rgba(0,0,0,0.5);
  54 }
  55
  56 .theme-bg-contrast { /* contrast bg color to attract attention on a container */
  57   background: #404000;
  58 }
  59
  60 .theme-link,
  61 .cm-s-mozilla .cm-link { /* original: blue */
  62   color: #3333FF;
  63 }
  64
  65 /*
  66  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  67  * failures in debug builds.
  68  */
  69 .theme-link:visited,
  70 .cm-s-mozilla .cm-link:visited { /* original: blue */
  71   color: #3333FF;
  72 }
  73
  74 .theme-comment,
  75 .cm-s-mozilla .cm-meta,
  76 .cm-s-mozilla .cm-hr,
  77 .cm-s-mozilla .cm-comment { /* original: grey */
  78   color: #A09090;
  79 }
  80
  81 .theme-gutter {
  82   background-color: #000000;
  83   color: #FF9F00;
  84   border-color: #9C9CFF;
  85 }
  86
  87 .theme-separator { /* original: grey */
  88   border-color: #8050B0;
  89 }
  90
  91 .theme-fg-color1,
  92 .cm-s-mozilla .cm-number { /* original: green */
  93   color: #008484;
  94 }
  95
  96 .theme-fg-color2,
  97 .cm-s-mozilla .cm-attribute,
  98 .cm-s-mozilla .cm-variable,
  99 .cm-s-mozilla .cm-def,
 100 .cm-s-mozilla .cm-property,
 101 .cm-s-mozilla .cm-qualifier { /* original: blue */
 102   color: #9C9CFF;
 103 }
 104
 105 .theme-fg-color3,
 106 .cm-s-mozilla .cm-builtin,
 107 .cm-s-mozilla .cm-tag,
 108 .cm-s-mozilla .cm-header { /* original: pink/lavender */
 109   color: #E7ADE7;
 110 }
 111
 112 .theme-fg-color4 { /* original: purple/violet */
 113   color: #C09070;
 114 }
 115
 116 .theme-fg-color5,
 117 .cm-s-mozilla .cm-bracket,
 118 .cm-s-mozilla .cm-keyword { /* original: Yellow */
 119   color: #FFCF00;
 120 }
 121
 122 .theme-fg-color6,
 123 .cm-s-mozilla .cm-string,
 124 .cm-s-mozilla .cm-string-2 { /* original: Orange */
 125   color: #E7ADE7;
 126 }
 127
 128 .theme-fg-color7,
 129 .cm-s-mozilla .cm-atom,
 130 .cm-s-mozilla .cm-quote,
 131 .cm-s-mozilla .cm-error { /* original: Red */
 132   color: #FF0000;
 133 }
 134
 135 .theme-toolbar,
 136 .devtools-toolbar { /* General toolbar styling */
 137 }
 138
 139
 140 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 141   color: #FFCF00;
 142 }
 143
 144 .ruleview-colorswatch,
 145 .computedview-colorswatch,
 146 .markupview-colorswatch {
 147 /*  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
 148 }
 149
 150 /* CodeMirror specific styles.
 151  * Best effort to match the existing theme, some of the colors
 152  * are duplicated here to prevent weirdness in the main theme. */
 153
 154 .CodeMirror { /* Inherit platform specific font sizing and styles */
 155   font-family: inherit;
 156   font-size: inherit;
 157   background: transparent;
 158 }
 159
 160 .CodeMirror pre,
 161 .cm-s-mozilla .cm-variable-2,
 162 .cm-s-mozilla .cm-variable-3,
 163 .cm-s-mozilla .cm-operator,
 164 .cm-s-mozilla .cm-special { /* theme-body color */
 165   color: #FF9F00;
 166 }
 167
 168 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 169   border-left: solid 1px #FF9F00;
 170 }
 171
 172 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 173   background: #008484;
 174   color: #FFCF00;
 175 }
 176
 177 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 178   background: #008484;
 179   color: #000000;
 180 }
 181
 182 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 183   background: rgba(0, 132, 132, .15);
 184 }
 185
 186 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 187   outline: solid 1px rgba(0, 132, 132, .25);
 188   color: #FFCF00;
 189 }
 190
 191 /* Highlight for a line that contains an error. */
 192 div.CodeMirror div.error-line {
 193   background: rgba(255,0,0,0.2);
 194 }
 195
 196 /* Highlight for a line that represents a stack frame's location. */
 197 div.CodeMirror div.debug-line {
 198   background: rgba(156,156,255,0.1);
 199 }
 200
 201 /* Generic highlighted text */
 202 div.CodeMirror span.marked-text {
 203   background: rgba(255,207,0,0.2);
 204   border: 1px dashed rgba(156,156,255,0.6);
 205   -moz-margin-start: -1px;
 206   -moz-margin-end: -1px;
 207 }
 208
 209 /* Highlight for evaluating current statement. */
 210 div.CodeMirror span.eval-text {
 211   background-color: #403800;
 212 }
 213
 214 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 215   color: #A09090;
 216 }
 217
 218 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 219   border-right-color: #A09090;
 220   background-color: #402800;
 221 }
 222
 223 .cm-s-markup-view pre {
 224   line-height: 1.4em;
 225   min-height: 1.4em;
 226 }
 227
 228 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
 229
 230 .theme-tooltip-panel .panel-arrowcontent {
 231 /*  padding: 5px; */
 232   background: rgba(0, 0, 0, .9);
 233 /*  border-radius: 5px;
 234   box-shadow: none;
 235   border: 3px solid #9C9CFF; */
 236 }
 237
 238 /* Overring panel arrow images to fit with our light and dark themes */
 239 /*
 240 .theme-tooltip-panel .panel-arrow[side="top"] {
 241   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 242   margin-bottom: -4px;
 243 }
 244
 245 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 246   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 247   margin-top: -4px;
 248 }
 249
 250 .theme-tooltip-panel .panel-arrow[side="left"] {
 251   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 252   margin-right: -4px;
 253 }
 254
 255 .theme-tooltip-panel .panel-arrow[side="right"] {
 256   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 257   margin-left: -4px;
 258 }
 259
 260 @media (min-resolution: 2dppx) {
 261   .theme-tooltip-panel .panel-arrow[side="top"],
 262   .theme-tooltip-panel .panel-arrow[side="bottom"] {
 263     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
 264   }
 265
 266   .theme-tooltip-panel .panel-arrow[side="left"],
 267   .theme-tooltip-panel .panel-arrow[side="right"] {
 268     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
 269   }
 270 }
 271 */
 272 .theme-tooltip-panel .devtools-tooltip-simple-text {
 273 /*  color: white; */
 274   border-bottom: 1px solid #A09090;
 275 }
 276
 277 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
 278  border-bottom: 0;
 279 }
 280
 281 /* remove import on top of file when toolbars.inc.css work is done */