1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/light-theme.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,342 @@
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: #fcfcfc; /* Background - Editor */
1.14 + color: #18191a;
1.15 +}
1.16 +
1.17 +.theme-sidebar {
1.18 + background: #f7f7f7; /* Background - Sidebars */
1.19 + color: #18191a;
1.20 +}
1.21 +
1.22 +::-moz-selection {
1.23 + background-color: #4c9ed9;
1.24 + color: #f5f7fa;
1.25 +}
1.26 +
1.27 +.theme-bg-darker {
1.28 + background: #EFEFEF;
1.29 +}
1.30 +
1.31 +.theme-selected {
1.32 + background-color: #4c9ed9;
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: hsl(208,56%,40%);
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: hsl(208,56%,40%);
1.53 +}
1.54 +
1.55 +.theme-comment,
1.56 +.cm-s-mozilla .cm-meta,
1.57 +.cm-s-mozilla .cm-hr,
1.58 +.cm-s-mozilla .cm-comment,
1.59 +.variable-or-property .token-undefined,
1.60 +.variable-or-property .token-null { /* grey */
1.61 + color: hsl(90,2%,46%);
1.62 +}
1.63 +
1.64 +.theme-gutter {
1.65 + background-color: hsl(0,0%,90%);
1.66 + color: #667380;
1.67 + border-color: hsl(0,0%,65%);
1.68 +}
1.69 +
1.70 +.theme-separator { /* grey */
1.71 + border-color: #cddae5;
1.72 +}
1.73 +
1.74 +.theme-fg-color1,
1.75 +.cm-s-mozilla .cm-number,
1.76 +.variable-or-property .token-number,
1.77 +.variable-or-property[return] > .title > .name,
1.78 +.variable-or-property[scope] > .title > .name { /* green */
1.79 + color: hsl(72,100%,27%);
1.80 +}
1.81 +
1.82 +.theme-fg-color2,
1.83 +.cm-s-mozilla .cm-attribute,
1.84 +.cm-s-mozilla .cm-builtin,
1.85 +.cm-s-mozilla .cm-def,
1.86 +.cm-s-mozilla .cm-property,
1.87 +.cm-s-mozilla .cm-qualifier,
1.88 +.variables-view-variable > .title > .name { /* blue */
1.89 + color: hsl(208,56%,40%);
1.90 +}
1.91 +
1.92 +.theme-fg-color3,
1.93 +.cm-s-mozilla .cm-variable,
1.94 +.cm-s-mozilla .cm-tag,
1.95 +.cm-s-mozilla .cm-header,
1.96 +.variables-view-property > .title > .name { /* dark blue */
1.97 + color: hsl(208,81%,21%)
1.98 +}
1.99 +
1.100 +.theme-fg-color4 { /* Orange */
1.101 + color: hsl(24,85%,39%);
1.102 +}
1.103 +
1.104 +.theme-fg-color5,
1.105 +.cm-s-mozilla .cm-bracket,
1.106 +.cm-s-mozilla .cm-keyword { /* Yellow */
1.107 + color: #a18650;
1.108 +}
1.109 +
1.110 +.theme-fg-color6,
1.111 +.cm-s-mozilla .cm-string,
1.112 +.cm-s-mozilla .cm-string-2,
1.113 +.variable-or-property .token-string { /* Orange */
1.114 + color: hsl(24,85%,39%);
1.115 +}
1.116 +
1.117 +.theme-fg-color7,
1.118 +.cm-s-mozilla .cm-atom,
1.119 +.cm-s-mozilla .cm-quote,
1.120 +.cm-s-mozilla .cm-error,
1.121 +.variable-or-property .token-boolean,
1.122 +.variable-or-property .token-domnode,
1.123 +.variable-or-property[exception] > .title > .name { /* Red */
1.124 + color: #bf5656;
1.125 +}
1.126 +
1.127 +.variable-or-property .token-domnode {
1.128 + font-weight: bold;
1.129 +}
1.130 +
1.131 +.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
1.132 + color: black;
1.133 +}
1.134 +
1.135 +.theme-toolbar,
1.136 +.devtools-toolbar,
1.137 +.devtools-sidebar-tabs > tabs,
1.138 +.CodeMirror-dialog { /* General toolbar styling */
1.139 + color: #585959;
1.140 + background-color: #f0f1f2;
1.141 + border-color: #aaa;
1.142 +}
1.143 +
1.144 +.ruleview-colorswatch,
1.145 +.computedview-colorswatch,
1.146 +.markupview-colorswatch {
1.147 + box-shadow: 0 0 0 1px #EFEFEF;
1.148 +}
1.149 +
1.150 +/* CodeMirror specific styles.
1.151 + * Best effort to match the existing theme, some of the colors
1.152 + * are duplicated here to prevent weirdness in the main theme. */
1.153 +
1.154 +.CodeMirror { /* Inherit platform specific font sizing and styles */
1.155 + font-family: inherit;
1.156 + font-size: inherit;
1.157 + background: transparent;
1.158 +}
1.159 +
1.160 +.CodeMirror pre,
1.161 +.cm-s-mozilla .cm-variable-2,
1.162 +.cm-s-mozilla .cm-variable-3,
1.163 +.cm-s-mozilla .cm-operator,
1.164 +.cm-s-mozilla .cm-special { /* theme-body color */
1.165 + color: black;
1.166 +}
1.167 +
1.168 +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
1.169 + border-left: solid 1px black;
1.170 +}
1.171 +
1.172 +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
1.173 + background: rgb(185, 215, 253);
1.174 +}
1.175 +
1.176 +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
1.177 + background: rgb(176, 176, 176);
1.178 +}
1.179 +
1.180 +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
1.181 + background: rgba(185, 215, 253, .35);
1.182 +}
1.183 +
1.184 +div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
1.185 + outline: solid 1px rgba(0, 0, 0, .25);
1.186 + color: black;
1.187 +}
1.188 +
1.189 +/* Highlight for a line that contains an error. */
1.190 +div.CodeMirror div.error-line {
1.191 + background: rgba(255,0,0,0.2);
1.192 +}
1.193 +
1.194 +/* Highlight for a line that represents a stack frame's location. */
1.195 +div.CodeMirror div.debug-line {
1.196 + background: rgba(0,128,255,0.1);
1.197 + box-shadow:
1.198 + 0 1px 0 0 rgba(0,128,255,0.4),
1.199 + 0 -1px 0 0 rgba(0,128,255,0.4);
1.200 +}
1.201 +
1.202 +/* Generic highlighted text */
1.203 +div.CodeMirror span.marked-text {
1.204 + background: rgba(255,255,0,0.2);
1.205 + border: 1px dashed rgba(192,192,0,0.6);
1.206 + -moz-margin-start: -1px;
1.207 + -moz-margin-end: -1px;
1.208 +}
1.209 +
1.210 +/* Highlight for evaluating current statement. */
1.211 +div.CodeMirror span.eval-text {
1.212 + background-color: #ccd;
1.213 +}
1.214 +
1.215 +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
1.216 + color: #667380;
1.217 +}
1.218 +
1.219 +.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
1.220 + border-right-color: #a6a6a6;
1.221 + background-color: #f7f7f7;
1.222 +}
1.223 +
1.224 +.cm-s-markup-view pre {
1.225 + line-height: 1.4em;
1.226 + min-height: 1.4em;
1.227 +}
1.228 +
1.229 +/* Twisty and checkbox controls */
1.230 +
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: 0 -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: -14px -14px;
1.250 +}
1.251 +
1.252 +/* Use white twisty when next to a selected item in markup view */
1.253 +.theme-selected ~ .theme-twisty {
1.254 + background-position: -28px -14px;
1.255 +}
1.256 +
1.257 +.theme-selected ~ .theme-twisty[open] {
1.258 + background-position: -42px -14px;
1.259 +}
1.260 +
1.261 +.theme-checkbox {
1.262 + display: inline-block;
1.263 + border: 0;
1.264 + padding: 0;
1.265 + outline: none;
1.266 + background-position: 0 0;
1.267 +}
1.268 +
1.269 +.theme-checkbox[checked] {
1.270 + background-position: -14px 0;
1.271 +}
1.272 +
1.273 +@media (min-resolution: 2dppx) {
1.274 + .theme-twisty, .theme-checkbox {
1.275 + background-image: url("chrome://browser/skin/devtools/controls@2x.png");
1.276 + }
1.277 +}
1.278 +
1.279 +/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
1.280 +
1.281 +.theme-tooltip-panel .panel-arrowcontent {
1.282 + padding: 4px;
1.283 + background: rgba(255, 255, 255, .9);
1.284 + border-radius: 5px;
1.285 + box-shadow: none;
1.286 + border: 3px solid #d9e1e8;
1.287 +}
1.288 +
1.289 +/* Overring panel arrow images to fit with our light and dark themes */
1.290 +
1.291 +.theme-tooltip-panel .panel-arrow[side="top"] {
1.292 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png");
1.293 + margin-bottom: -4px;
1.294 +}
1.295 +
1.296 +.theme-tooltip-panel .panel-arrow[side="bottom"] {
1.297 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png");
1.298 + margin-top: -4px;
1.299 +}
1.300 +
1.301 +.theme-tooltip-panel .panel-arrow[side="left"] {
1.302 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png");
1.303 + margin-right: -4px;
1.304 +}
1.305 +
1.306 +.theme-tooltip-panel .panel-arrow[side="right"] {
1.307 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png");
1.308 + margin-left: -4px;
1.309 +}
1.310 +
1.311 +@media (min-resolution: 2dppx) {
1.312 + .theme-tooltip-panel .panel-arrow[side="top"],
1.313 + .theme-tooltip-panel .panel-arrow[side="bottom"] {
1.314 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png");
1.315 + }
1.316 +
1.317 + .theme-tooltip-panel .panel-arrow[side="left"],
1.318 + .theme-tooltip-panel .panel-arrow[side="right"] {
1.319 + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light@2x.png");
1.320 + }
1.321 +}
1.322 +
1.323 +.theme-tooltip-panel .devtools-tooltip-simple-text {
1.324 + color: black;
1.325 + border-bottom: 1px solid #d9e1e8;
1.326 +}
1.327 +
1.328 +.theme-tooltip-panel .devtools-tooltip-font-previewer-text {
1.329 + color: black;
1.330 +}
1.331 +
1.332 +.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
1.333 + border-bottom: 0;
1.334 +}
1.335 +
1.336 +.devtools-horizontal-splitter {
1.337 + border-bottom: 1px solid #aaa;
1.338 +}
1.339 +
1.340 +.devtools-side-splitter {
1.341 + -moz-border-end: 1px solid #aaa;
1.342 + border-color: #aaa; /* Needed for responsive container at low width. */
1.343 +}
1.344 +
1.345 +%include toolbars.inc.css
