1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/dark-theme.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,339 @@
1.4 +/* vim:set ts=2 sw=2 sts=2 et: */
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +
1.9 +/* According to:
1.10 + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
1.11 + */
1.12 +.theme-body {
1.13 + background: #14171a;
1.14 + color: #a9bacb;
1.15 +}
1.16 +
1.17 +.theme-sidebar {
1.18 + background: #181d20;
1.19 + color: #a9bacb;
1.20 +}
1.21 +
1.22 +::-moz-selection {
1.23 + background-color: #1d4f73;
1.24 + color: #f5f7fa;
1.25 +}
1.26 +
1.27 +.theme-bg-darker {
1.28 + background-color: rgba(0,0,0,0.5);
1.29 +}
1.30 +
1.31 +.theme-selected {
1.32 + background-color: #1d4f73;
1.33 + color: #f5f7fa; /* Light foreground text */
1.34 +}
1.35 +
1.36 +.theme-bg-contrast,
1.37 +.variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */
1.38 + background: #a18650;
1.39 +}
1.40 +
1.41 +.theme-link,
1.42 +.cm-s-mozilla .cm-link { /* blue */
1.43 + color: #3689b2;
1.44 +}
1.45 +
1.46 +/*
1.47 + * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
1.48 + * failures in debug builds.
1.49 + */
1.50 +.theme-link:visited,
1.51 +.cm-s-mozilla .cm-link:visited { /* blue */
1.52 + color: #3689b2;
1.53 +}
1.54 +
1.55 +
1.56 +.theme-comment,
1.57 +.cm-s-mozilla .cm-meta,
1.58 +.cm-s-mozilla .cm-hr,
1.59 +.cm-s-mozilla .cm-comment,
1.60 +.variable-or-property .token-undefined,
1.61 +.variable-or-property .token-null { /* grey */
1.62 + color: #5c6773;
1.63 +}
1.64 +
1.65 +.theme-gutter {
1.66 + background-color: #0f171f;
1.67 + color: #667380;
1.68 + border-color: #303b47;
1.69 +}
1.70 +
1.71 +.theme-separator { /* grey */
1.72 + border-color: #303b47;
1.73 +}
1.74 +
1.75 +.theme-fg-color1,
1.76 +.cm-s-mozilla .cm-number,
1.77 +.variable-or-property .token-number,
1.78 +.variable-or-property[return] > .title > .name,
1.79 +.variable-or-property[scope] > .title > .name { /* green */
1.80 + color: #5c9966;
1.81 +}
1.82 +
1.83 +.theme-fg-color2,
1.84 +.cm-s-mozilla .cm-attribute,
1.85 +.cm-s-mozilla .cm-variable,
1.86 +.cm-s-mozilla .cm-def,
1.87 +.cm-s-mozilla .cm-property,
1.88 +.cm-s-mozilla .cm-qualifier,
1.89 +.variables-view-variable > .title > .name { /* blue */
1.90 + color: #3689b2;
1.91 +}
1.92 +
1.93 +.theme-fg-color3,
1.94 +.cm-s-mozilla .cm-builtin,
1.95 +.cm-s-mozilla .cm-tag,
1.96 +.cm-s-mozilla .cm-header,
1.97 +.variables-view-property > .title > .name { /* pink/lavender */
1.98 + color: #a673bf;
1.99 +}
1.100 +
1.101 +.theme-fg-color4 { /* purple/violet */
1.102 + color: #6270b2;
1.103 +}
1.104 +
1.105 +.theme-fg-color5,
1.106 +.cm-s-mozilla .cm-bracket,
1.107 +.cm-s-mozilla .cm-keyword { /* Yellow */
1.108 + color: #a18650;
1.109 +}
1.110 +
1.111 +.theme-fg-color6,
1.112 +.cm-s-mozilla .cm-string,
1.113 +.cm-s-mozilla .cm-string-2,
1.114 +.variable-or-property .token-string { /* Orange */
1.115 + color: #b26b47;
1.116 +}
1.117 +
1.118 +.theme-fg-color7,
1.119 +.cm-s-mozilla .cm-atom,
1.120 +.cm-s-mozilla .cm-quote,
1.121 +.cm-s-mozilla .cm-error,
1.122 +.variable-or-property .token-boolean,
1.123 +.variable-or-property .token-domnode,
1.124 +.variable-or-property[exception] > .title > .name { /* Red */
1.125 + color: #bf5656;
1.126 +}
1.127 +
1.128 +.variable-or-property .token-domnode {
1.129 + font-weight: bold;
1.130 +}
1.131 +
1.132 +.theme-toolbar,
1.133 +.devtools-toolbar,
1.134 +.devtools-sidebar-tabs > tabs,
1.135 +.CodeMirror-dialog { /* General toolbar styling */
1.136 + color: #b6babf;
1.137 + background-color: #343c45;
1.138 + border-color: hsla(210,8%,5%,.6);
1.139 +}
1.140 +
1.141 +.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
1.142 + color: black;
1.143 +}
1.144 +
1.145 +.ruleview-colorswatch,
1.146 +.computedview-colorswatch,
1.147 +.markupview-colorswatch {
1.148 + box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
1.149 +}
1.150 +
1.151 +/* CodeMirror specific styles.
1.152 + * Best effort to match the existing theme, some of the colors
1.153 + * are duplicated here to prevent weirdness in the main theme. */
1.154 +
1.155 +.CodeMirror { /* Inherit platform specific font sizing and styles */
1.156 + font-family: inherit;
1.157 + font-size: inherit;
1.158 + background: transparent;
1.159 +}
1.160 +
1.161 +.CodeMirror pre,
1.162 +.cm-s-mozilla .cm-variable-2,
1.163 +.cm-s-mozilla .cm-variable-3,
1.164 +.cm-s-mozilla .cm-operator,
1.165 +.cm-s-mozilla .cm-special { /* theme-body color */
1.166 + color: #a9bacb;
1.167 +}
1.168 +
1.169 +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
1.170 + border-left: solid 1px #fff;
1.171 +}
1.172 +
1.173 +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
1.174 + background: rgb(185, 215, 253);
1.175 +}
1.176 +
1.177 +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
1.178 + background: rgb(176, 176, 176);
1.179 +}
1.180 +
1.181 +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
1.182 + background: rgba(185, 215, 253, .15);
1.183 +}
1.184 +
1.185 +div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
1.186 + outline: solid 1px rgba(255, 255, 255, .25);
1.187 + color: white;
1.188 +}
1.189 +
1.190 +/* Highlight for a line that contains an error. */
1.191 +div.CodeMirror div.error-line {
1.192 + background: rgba(255,0,0,0.2);
1.193 +}
1.194 +
1.195 +/* Highlight for a line that represents a stack frame's location. */
1.196 +div.CodeMirror div.debug-line {
1.197 + background: rgba(0,128,255,0.1);
1.198 + box-shadow:
1.199 + 0 1px 0 0 rgba(0,128,255,0.4),
1.200 + 0 -1px 0 0 rgba(0,128,255,0.4);
1.201 +}
1.202 +
1.203 +/* Generic highlighted text */
1.204 +div.CodeMirror span.marked-text {
1.205 + background: rgba(255,255,0,0.2);
1.206 + border: 1px dashed rgba(192,192,0,0.6);
1.207 + -moz-margin-start: -1px;
1.208 + -moz-margin-end: -1px;
1.209 +}
1.210 +
1.211 +/* Highlight for evaluating current statement. */
1.212 +div.CodeMirror span.eval-text {
1.213 + background-color: #556;
1.214 +}
1.215 +
1.216 +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
1.217 + color: #5f7387;
1.218 +}
1.219 +
1.220 +.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
1.221 + border-right-color: #343c45;
1.222 + background-color: #181d20;
1.223 +}
1.224 +
1.225 +.cm-s-markup-view pre {
1.226 + line-height: 1.4em;
1.227 + min-height: 1.4em;
1.228 +}
1.229 +
1.230 +/* Twisty and checkbox controls */
1.231 +.theme-twisty, .theme-checkbox {
1.232 + width: 14px;
1.233 + height: 14px;
1.234 + background-repeat: no-repeat;
1.235 + background-image: url("chrome://browser/skin/devtools/controls.png");
1.236 + background-size: 56px 28px;
1.237 +}
1.238 +
1.239 +.theme-twisty {
1.240 + cursor: pointer;
1.241 + background-position: -28px -14px;
1.242 +}
1.243 +
1.244 +.theme-twisty:-moz-focusring {
1.245 + outline-style: none;
1.246 +}
1.247 +
1.248 +.theme-twisty[open] {
1.249 + background-position: -42px -14px;
1.250 +}
1.251 +
1.252 +.theme-checkbox {
1.253 + display: inline-block;
1.254 + border: 0;
1.255 + padding: 0;
1.256 + outline: none;
1.257 + background-position: -28px 0;
1.258 +}
1.259 +
1.260 +.theme-checkbox[checked] {
1.261 + background-position: -42px 0;
1.262 +}
1.263 +
1.264 +@media (min-resolution: 2dppx) {
1.265 + .theme-twisty, .theme-checkbox {
1.266 + background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1.267 + }
1.268 +}
1.269 +
1.270 +/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
1.271 +
1.272 +.theme-tooltip-panel .panel-arrowcontent {
1.273 + padding: 5px;
1.274 + background: rgba(19, 28, 38, .9);
1.275 + border-radius: 5px;
1.276 + box-shadow: none;
1.277 + border: 3px solid #434850;
1.278 +}
1.279 +
1.280 +/* Overring panel arrow images to fit with our light and dark themes */
1.281 +
1.282 +.theme-tooltip-panel .panel-arrow[side="top"] {
1.283 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
1.284 + margin-bottom: -4px;
1.285 +}
1.286 +
1.287 +.theme-tooltip-panel .panel-arrow[side="bottom"] {
1.288 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
1.289 + margin-top: -4px;
1.290 +}
1.291 +
1.292 +.theme-tooltip-panel .panel-arrow[side="left"] {
1.293 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
1.294 + margin-right: -4px;
1.295 +}
1.296 +
1.297 +.theme-tooltip-panel .panel-arrow[side="right"] {
1.298 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
1.299 + margin-left: -4px;
1.300 +}
1.301 +
1.302 +@media (min-resolution: 2dppx) {
1.303 + .theme-tooltip-panel .panel-arrow[side="top"],
1.304 + .theme-tooltip-panel .panel-arrow[side="bottom"] {
1.305 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
1.306 + }
1.307 +
1.308 + .theme-tooltip-panel .panel-arrow[side="left"],
1.309 + .theme-tooltip-panel .panel-arrow[side="right"] {
1.310 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
1.311 + }
1.312 +}
1.313 +
1.314 +.theme-tooltip-panel .devtools-tooltip-simple-text {
1.315 + color: white;
1.316 + border-bottom: 1px solid #434850;
1.317 +}
1.318 +
1.319 +.theme-tooltip-panel .devtools-tooltip-font-previewer-text {
1.320 + color: white;
1.321 +}
1.322 +
1.323 +.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
1.324 + border-bottom: 0;
1.325 +}
1.326 +
1.327 +.devtools-horizontal-splitter {
1.328 + border-bottom: 1px solid black;
1.329 +}
1.330 +
1.331 +.devtools-side-splitter {
1.332 + -moz-border-end: 1px solid black;
1.333 + border-color: black; /* Needed for responsive container at low width. */
1.334 +}
1.335 +
1.336 +.devtools-textinput,
1.337 +.devtools-searchinput {
1.338 + background-color: rgba(24, 29, 32, 1);
1.339 + color: rgba(184, 200, 217, 1);
1.340 +}
1.341 +
1.342 +%include toolbars.inc.css
