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/. */
6 @import url(variables.css);
7 @import url(common.css);
8 @import url(toolbars.css);
9 @import url(tooltips.css);
17 background: var(--theme-body-background);
18 color: var(--theme-body-color);
22 background: var(--theme-sidebar-background);
23 color: var(--theme-content-color1);
27 background-color: var(--theme-selection-background);
28 color: var(--theme-selection-color);
32 background: var(--theme-selection-background-semitransparent);
36 .CodeMirror-hint-active {
37 background-color: var(--theme-selection-background2);
38 color: var(--theme-selection-color2);
42 .variable-or-property:not([overridden])[changed] {
43 background: var(--theme-contrast-background);
47 .cm-s-mozilla .cm-link { /* original: blue */
48 color: var(--theme-text-blue);
52 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
53 * failures in debug builds.
56 .cm-s-mozilla .cm-link:visited,
57 .CodeMirror-Tern-type {
58 color: var(--theme-text-blue);
62 .cm-s-mozilla .cm-meta,
64 .cm-s-mozilla .cm-comment,
65 .variable-or-property .token-undefined,
66 .variable-or-property .token-null,
67 .CodeMirror-Tern-completion-unknown:before {
68 color: var(--theme-comment);
72 background-color: var(--theme-tab-toolbar-background);
73 color: var(--theme-content-color3);
74 border-color: var(--theme-splitter-color);
78 border-color: var(--theme-splitter-color);
82 .cm-s-mozilla .cm-number,
83 .variable-or-property .token-number,
84 .variable-or-property[return] > .title > .name,
85 .variable-or-property[scope] > .title > .name {
86 color: var(--theme-highlight-green);
89 .CodeMirror-Tern-completion-number:before {
90 background-color: #008484;
94 .cm-s-mozilla .cm-attribute,
95 .cm-s-mozilla .cm-variable,
96 .cm-s-mozilla .cm-def,
97 .cm-s-mozilla .cm-property,
98 .cm-s-mozilla .cm-qualifier,
99 .variables-view-variable > .title > .name {
100 color: var(--theme-highlight-blue);
103 .CodeMirror-Tern-completion-object:before {
104 background-color: #9C9CFF;
107 .cm-s-mozilla .cm-unused-line {
108 text-decoration: line-through;
109 text-decoration-color: #8050B0;
112 .cm-s-mozilla .cm-executed-line {
113 background-color: #404000;
117 .cm-s-mozilla .cm-builtin,
118 .cm-s-mozilla .cm-tag,
119 .cm-s-mozilla .cm-header,
120 .cm-s-mozilla .cm-bracket,
121 .variables-view-property > .title > .name {
122 color: var(--theme-highlight-pink);
125 .CodeMirror-Tern-completion-array:before {
126 color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
130 color: var(--theme-highlight-purple);
134 .cm-s-mozilla .cm-keyword {
135 color: var(--theme-highlight-lightorange);
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? */
146 .CodeMirror-Tern-completion-string:before,
147 .CodeMirror-Tern-completion-fn:before {
148 background-color: #E7ADE7;
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);
161 .CodeMirror-Tern-completion-bool:before {
162 background-color: #FF0000;
165 .variable-or-property .token-domnode {
171 .devtools-sidebar-tabs tabs,
172 .devtools-sidebar-alltabs,
173 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
174 /* color: var(--theme-body-color-alt);
175 background-color: var(--theme-toolbar-background);*/
178 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
183 .computedview-colorswatch {
184 /* box-shadow: 0 0 0 1px #818181; */
187 .variables-view-scope:focus > .title,
188 .variable-or-property:focus > .title {
189 background-color: #008484; /* fg-color2 */
193 /* CodeMirror specific styles.
194 * Best effort to match the existing theme, some of the colors
195 * are duplicated here to prevent weirdness in the main theme. */
197 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
198 font-family: inherit;
200 background: transparent;
203 .CodeMirror.cm-s-mozilla pre,
204 .cm-s-mozilla .cm-variable-2,
205 .cm-s-mozilla .cm-variable-3,
206 .cm-s-mozilla .cm-operator,
207 .cm-s-mozilla .cm-special {
208 color: var(--theme-content-color1);
211 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
212 border-left: solid 1px #FF9F00;
215 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
220 .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
225 .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
226 background: rgba(0, 132, 132, .25);
229 div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
230 outline: solid 1px rgba(0, 132, 132, .4);
234 /* Highlight for a line that contains an error. */
235 div.CodeMirror div.error-line {
236 background: rgba(255, 0, 0, 0.2);
239 /* Generic highlighted text */
240 div.CodeMirror span.marked-text {
241 background: rgba(255,207,0,0.2);
242 border: 1px dashed rgba(156, 156, 255, 0.6);
243 -moz-margin-start: -1px;
244 -moz-margin-end: -1px;
247 /* Highlight for evaluating current statement. */
248 div.CodeMirror span.eval-text {
249 background-color: #403800;
252 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
253 color: var(--theme-content-color2);
256 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
257 border-right-color: var(--theme-contrast-border);
258 background-color: var(--theme-contrast-background);
261 .cm-s-markup-view pre {
266 /* Twisty and checkbox controls */
267 .theme-twisty, .theme-checkbox {
270 background-repeat: no-repeat;
271 background-image: url("chrome://devtools/skin/images/controls.png");
272 background-size: 28px 28px;
277 background-position: -0px -14px;
280 .theme-twisty:-moz-focusring {
284 .theme-twisty[open] {
285 background-position: -14px -14px;
288 .theme-twisty[invisible] {
293 display: inline-block;
297 background-position: 0 0;
300 .theme-checkbox[checked] {
301 background-position: -14px 0;
304 @media (min-resolution: 1.1dppx) {
305 .theme-twisty, .theme-checkbox {
306 background-image: url("chrome://devtools/skin/images/controls@2x.png");
310 /* XUL panel styling (see devtools/client/shared/widgets/Tooltip.js) */
312 .theme-tooltip-panel .panel-arrowcontent {
314 background: rgba(0, 0, 0, .9);
315 /* border-radius: 5px;
317 border: 3px solid #9C9CFF; */
320 /* Overring panel arrow images to fit with our light and dark themes */
322 .theme-tooltip-panel .panel-arrow {
323 --arrow-margin: -4px;
326 :root[platform="win"] .theme-tooltip-panel .panel-arrow {
327 --arrow-margin: -7px;
330 .theme-tooltip-panel .panel-arrow[side="top"],
331 .theme-tooltip-panel .panel-arrow[side="bottom"] {
332 list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
333 / !important is needed to override the popup.css rules in toolkit/themes /
334 width: 39px !important;
335 height: 16px !important;
338 .theme-tooltip-panel .panel-arrow[side="left"],
339 .theme-tooltip-panel .panel-arrow[side="right"] {
340 list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
341 / !important is needed to override the popup.css rules in toolkit/themes /
342 width: 16px !important;
343 height: 39px !important;
346 .theme-tooltip-panel .panel-arrow[side="top"] {
347 margin-bottom: var(--arrow-margin);
350 .theme-tooltip-panel .panel-arrow[side="bottom"] {
351 margin-top: var(--arrow-margin);
354 .theme-tooltip-panel .panel-arrow[side="left"] {
355 margin-right: var(--arrow-margin);
358 .theme-tooltip-panel .panel-arrow[side="right"] {
359 margin-left: var(--arrow-margin);
362 @media (min-resolution: 1.1dppx) {
363 .theme-tooltip-panel .panel-arrow[side="top"],
364 .theme-tooltip-panel .panel-arrow[side="bottom"] {
365 list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
368 .theme-tooltip-panel .panel-arrow[side="left"],
369 .theme-tooltip-panel .panel-arrow[side="right"] {
370 list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
374 .theme-tooltip-panel .devtools-tooltip-simple-text {
376 border-bottom: 1px solid #A09090;
379 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
384 .devtools-filterinput,
385 .devtools-searchinput {
386 background-color: #000000;
388 border: 1px solid #9C9CFF;
391 .devtools-textinput:focus,
392 .devtools-filterinput:focus,
393 .devtools-searchinput:focus {
394 border-color: #008484;
397 .CodeMirror-Tern-fname {
402 .CodeMirror-Tern-tooltip {
403 background-color: #000000;
404 color: var(--theme-body-color);