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 .cm-s-mozilla .CodeMirror-gutters {
  54   background-color: rgba(0,0,0,0.5);
  55 }
  56
  57 .theme-bg-contrast { /* contrast bg color to attract attention on a container */
  58   background: #404000;
  59 }
  60
  61 .theme-link,
  62 .cm-s-mozilla .cm-link { /* original: blue */
  63   color: #3333FF;
  64 }
  65
  66 /*
  67  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  68  * failures in debug builds.
  69  */
  70 .theme-link:visited,
  71 .cm-s-mozilla .cm-link:visited { /* original: blue */
  72   color: #3333FF;
  73 }
  74
  75 .theme-comment,
  76 .cm-s-mozilla .cm-meta,
  77 .cm-s-mozilla .cm-hr,
  78 .cm-s-mozilla .cm-comment { /* original: grey */
  79   color: #A09090;
  80 }
  81
  82 .theme-gutter {
  83   background-color: #000000;
  84   color: #FF9F00;
  85   border-color: #9C9CFF;
  86 }
  87
  88 .theme-separator { /* original: grey */
  89   border-color: #8050B0;
  90 }
  91
  92 .theme-fg-color1,
  93 .cm-s-mozilla .cm-number { /* original: green */
  94   color: #008484;
  95 }
  96
  97 .theme-fg-color2,
  98 .cm-s-mozilla .cm-attribute,
  99 .cm-s-mozilla .cm-variable,
 100 .cm-s-mozilla .cm-def,
 101 .cm-s-mozilla .cm-property,
 102 .cm-s-mozilla .cm-qualifier { /* original: blue */
 103   color: #9C9CFF;
 104 }
 105
 106 .theme-fg-color3,
 107 .cm-s-mozilla .cm-builtin,
 108 .cm-s-mozilla .cm-tag,
 109 .cm-s-mozilla .cm-header { /* original: pink/lavender */
 110   color: #E7ADE7;
 111 }
 112
 113 .theme-fg-color4 { /* original: purple/violet */
 114   color: #C09070;
 115 }
 116
 117 .theme-fg-color5,
 118 .cm-s-mozilla .cm-bracket,
 119 .cm-s-mozilla .cm-keyword { /* original: Yellow */
 120   color: #FFCF00;
 121 }
 122
 123 .theme-fg-color6,
 124 .cm-s-mozilla .cm-string,
 125 .cm-s-mozilla .cm-string-2 { /* original: Orange */
 126   color: #E7ADE7;
 127 }
 128
 129 .theme-fg-color7,
 130 .cm-s-mozilla .cm-atom,
 131 .cm-s-mozilla .cm-quote,
 132 .cm-s-mozilla .cm-error { /* original: Red */
 133   color: #FF0000;
 134 }
 135
 136 .theme-toolbar,
 137 .devtools-toolbar { /* General toolbar styling */
 138 }
 139
 140
 141 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
 142   color: #FFCF00;
 143 }
 144
 145 .ruleview-colorswatch,
 146 .computedview-colorswatch,
 147 .markupview-colorswatch {
 148 /*  box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */
 149 }
 150
 151 /* CodeMirror specific styles.
 152  * Best effort to match the existing theme, some of the colors
 153  * are duplicated here to prevent weirdness in the main theme. */
 154
 155 .CodeMirror { /* Inherit platform specific font sizing and styles */
 156   font-family: inherit;
 157   font-size: inherit;
 158   background: transparent;
 159 }
 160
 161 .CodeMirror pre,
 162 .cm-s-mozilla .cm-variable-2,
 163 .cm-s-mozilla .cm-variable-3,
 164 .cm-s-mozilla .cm-operator,
 165 .cm-s-mozilla .cm-special { /* theme-body color */
 166   color: #FF9F00;
 167 }
 168
 169 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
 170   border-left: solid 1px #FF9F00;
 171 }
 172
 173 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
 174   background: #008484;
 175   color: #FFCF00;
 176 }
 177
 178 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
 179   background: #008484;
 180   color: #000000;
 181 }
 182
 183 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
 184   background: rgba(0, 132, 132, .15);
 185 }
 186
 187 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
 188   outline: solid 1px rgba(0, 132, 132, .25);
 189   color: #FFCF00;
 190 }
 191
 192 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
 193   color: #A09090;
 194 }
 195
 196 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
 197   border-right-color: #A09090;
 198   background: #402800;
 199 }
 200
 201 .cm-s-markup-view pre {
 202   line-height: 1.4em;
 203   min-height: 1.4em;
 204 }
 205
 206 /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
 207
 208 .theme-tooltip-panel .panel-arrowcontent {
 209 /*  padding: 5px; */
 210   background: rgba(0, 0, 0, .9);
 211 /*  border-radius: 5px;
 212   box-shadow: none;
 213   border: 3px solid #9C9CFF; */
 214 }
 215
 216 /* Overring panel arrow images to fit with our light and dark themes */
 217 /*
 218 .theme-tooltip-panel .panel-arrow[side="top"] {
 219   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 220   margin-bottom: -4px;
 221 }
 222
 223 .theme-tooltip-panel .panel-arrow[side="bottom"] {
 224   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
 225   margin-top: -4px;
 226 }
 227
 228 .theme-tooltip-panel .panel-arrow[side="left"] {
 229   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 230   margin-right: -4px;
 231 }
 232
 233 .theme-tooltip-panel .panel-arrow[side="right"] {
 234   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
 235   margin-left: -4px;
 236 }
 237
 238 @media (min-resolution: 2dppx) {
 239   .theme-tooltip-panel .panel-arrow[side="top"],
 240   .theme-tooltip-panel .panel-arrow[side="bottom"] {
 241     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
 242   }
 243
 244   .theme-tooltip-panel .panel-arrow[side="left"],
 245   .theme-tooltip-panel .panel-arrow[side="right"] {
 246     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
 247   }
 248 }
 249 */
 250 .theme-tooltip-panel .devtools-tooltip-simple-text {
 251 /*  color: white; */
 252   border-bottom: 1px solid #A09090;
 253 }
 254
 255 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
 256  border-bottom: 0;
 257 }
 258
 259 /* remove import on top of file when toolbars.inc.css work is done */