michael@0: /* vim:set ts=2 sw=2 sts=2 et: */
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* According to:
michael@0:  * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
michael@0:  */
michael@0: .theme-body {
michael@0:   background: #14171a;
michael@0:   color: #a9bacb;
michael@0: }
michael@0: 
michael@0: .theme-sidebar {
michael@0:   background: #181d20;
michael@0:   color: #a9bacb;
michael@0: }
michael@0: 
michael@0: ::-moz-selection {
michael@0:   background-color: #1d4f73;
michael@0:   color: #f5f7fa;
michael@0: }
michael@0: 
michael@0: .theme-bg-darker {
michael@0:   background-color: rgba(0,0,0,0.5);
michael@0: }
michael@0: 
michael@0: .theme-selected {
michael@0:   background-color: #1d4f73;
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-bg-contrast,
michael@0: .variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */
michael@0:   background: #a18650;
michael@0: }
michael@0: 
michael@0: .theme-link,
michael@0: .cm-s-mozilla .cm-link { /* blue */
michael@0:   color: #3689b2;
michael@0: }
michael@0: 
michael@0: /*
michael@0:  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
michael@0:  * failures in debug builds.
michael@0:  */
michael@0: .theme-link:visited,
michael@0: .cm-s-mozilla .cm-link:visited { /* blue */
michael@0:   color: #3689b2;
michael@0: }
michael@0: 
michael@0: 
michael@0: .theme-comment,
michael@0: .cm-s-mozilla .cm-meta,
michael@0: .cm-s-mozilla .cm-hr,
michael@0: .cm-s-mozilla .cm-comment,
michael@0: .variable-or-property .token-undefined,
michael@0: .variable-or-property .token-null { /* grey */
michael@0:   color: #5c6773;
michael@0: }
michael@0: 
michael@0: .theme-gutter {
michael@0:   background-color: #0f171f;
michael@0:   color: #667380;
michael@0:   border-color: #303b47;
michael@0: }
michael@0: 
michael@0: .theme-separator { /* grey */
michael@0:   border-color: #303b47;
michael@0: }
michael@0: 
michael@0: .theme-fg-color1,
michael@0: .cm-s-mozilla .cm-number,
michael@0: .variable-or-property .token-number,
michael@0: .variable-or-property[return] > .title > .name,
michael@0: .variable-or-property[scope] > .title > .name { /* green */
michael@0:   color: #5c9966;
michael@0: }
michael@0: 
michael@0: .theme-fg-color2,
michael@0: .cm-s-mozilla .cm-attribute,
michael@0: .cm-s-mozilla .cm-variable,
michael@0: .cm-s-mozilla .cm-def,
michael@0: .cm-s-mozilla .cm-property,
michael@0: .cm-s-mozilla .cm-qualifier,
michael@0: .variables-view-variable > .title > .name { /* blue */
michael@0:   color: #3689b2;
michael@0: }
michael@0: 
michael@0: .theme-fg-color3,
michael@0: .cm-s-mozilla .cm-builtin,
michael@0: .cm-s-mozilla .cm-tag,
michael@0: .cm-s-mozilla .cm-header,
michael@0: .variables-view-property > .title > .name { /* pink/lavender */
michael@0:   color: #a673bf;
michael@0: }
michael@0: 
michael@0: .theme-fg-color4 { /* purple/violet */
michael@0:   color: #6270b2;
michael@0: }
michael@0: 
michael@0: .theme-fg-color5,
michael@0: .cm-s-mozilla .cm-bracket,
michael@0: .cm-s-mozilla .cm-keyword { /* Yellow */
michael@0:   color: #a18650;
michael@0: }
michael@0: 
michael@0: .theme-fg-color6,
michael@0: .cm-s-mozilla .cm-string,
michael@0: .cm-s-mozilla .cm-string-2,
michael@0: .variable-or-property .token-string { /* Orange */
michael@0:   color: #b26b47;
michael@0: }
michael@0: 
michael@0: .theme-fg-color7,
michael@0: .cm-s-mozilla .cm-atom,
michael@0: .cm-s-mozilla .cm-quote,
michael@0: .cm-s-mozilla .cm-error,
michael@0: .variable-or-property .token-boolean,
michael@0: .variable-or-property .token-domnode,
michael@0: .variable-or-property[exception] > .title > .name { /* Red */
michael@0:   color: #bf5656;
michael@0: }
michael@0: 
michael@0: .variable-or-property .token-domnode {
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: .theme-toolbar,
michael@0: .devtools-toolbar,
michael@0: .devtools-sidebar-tabs > tabs,
michael@0: .CodeMirror-dialog { /* General toolbar styling */
michael@0:   color: #b6babf;
michael@0:   background-color: #343c45;
michael@0:   border-color: hsla(210,8%,5%,.6);
michael@0: }
michael@0: 
michael@0: .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
michael@0:   color: black;
michael@0: }
michael@0: 
michael@0: .ruleview-colorswatch,
michael@0: .computedview-colorswatch,
michael@0: .markupview-colorswatch {
michael@0:   box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
michael@0: }
michael@0: 
michael@0: /* CodeMirror specific styles.
michael@0:  * Best effort to match the existing theme, some of the colors
michael@0:  * are duplicated here to prevent weirdness in the main theme. */
michael@0: 
michael@0: .CodeMirror { /* Inherit platform specific font sizing and styles */
michael@0:   font-family: inherit;
michael@0:   font-size: inherit;
michael@0:   background: transparent;
michael@0: }
michael@0: 
michael@0: .CodeMirror pre,
michael@0: .cm-s-mozilla .cm-variable-2,
michael@0: .cm-s-mozilla .cm-variable-3,
michael@0: .cm-s-mozilla .cm-operator,
michael@0: .cm-s-mozilla .cm-special { /* theme-body color */
michael@0:   color: #a9bacb;
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
michael@0:   border-left: solid 1px #fff;
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
michael@0:   background: rgb(185, 215, 253);
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
michael@0:   background: rgb(176, 176, 176);
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
michael@0:   background: rgba(185, 215, 253, .15);
michael@0: }
michael@0: 
michael@0: div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
michael@0:   outline: solid 1px rgba(255, 255, 255, .25);
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: /* Highlight for a line that contains an error. */
michael@0: div.CodeMirror div.error-line {
michael@0:   background: rgba(255,0,0,0.2);
michael@0: }
michael@0: 
michael@0: /* Highlight for a line that represents a stack frame's location. */
michael@0: div.CodeMirror div.debug-line {
michael@0:   background: rgba(0,128,255,0.1);
michael@0:   box-shadow:
michael@0:     0 1px 0 0 rgba(0,128,255,0.4),
michael@0:     0 -1px 0 0 rgba(0,128,255,0.4);
michael@0: }
michael@0: 
michael@0: /* Generic highlighted text */
michael@0: div.CodeMirror span.marked-text {
michael@0:   background: rgba(255,255,0,0.2);
michael@0:   border: 1px dashed rgba(192,192,0,0.6);
michael@0:   -moz-margin-start: -1px;
michael@0:   -moz-margin-end: -1px;
michael@0: }
michael@0: 
michael@0: /* Highlight for evaluating current statement. */
michael@0: div.CodeMirror span.eval-text {
michael@0:   background-color: #556;
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
michael@0:   color: #5f7387;
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
michael@0:   border-right-color: #343c45;
michael@0:   background-color: #181d20;
michael@0: }
michael@0: 
michael@0: .cm-s-markup-view pre {
michael@0:   line-height: 1.4em;
michael@0:   min-height: 1.4em;
michael@0: }
michael@0: 
michael@0: /* Twisty and checkbox controls */
michael@0: .theme-twisty, .theme-checkbox {
michael@0:   width: 14px;
michael@0:   height: 14px;
michael@0:   background-repeat: no-repeat;
michael@0:   background-image: url("chrome://browser/skin/devtools/controls.png");
michael@0:   background-size: 56px 28px;
michael@0: }
michael@0: 
michael@0: .theme-twisty {
michael@0:   cursor: pointer;
michael@0:   background-position: -28px -14px;
michael@0: }
michael@0: 
michael@0: .theme-twisty:-moz-focusring {
michael@0:   outline-style: none;
michael@0: }
michael@0: 
michael@0: .theme-twisty[open] {
michael@0:   background-position: -42px -14px;
michael@0: }
michael@0: 
michael@0: .theme-checkbox {
michael@0:   display: inline-block;
michael@0:   border: 0;
michael@0:   padding: 0;
michael@0:   outline: none;
michael@0:   background-position: -28px 0;
michael@0: }
michael@0: 
michael@0: .theme-checkbox[checked] {
michael@0:   background-position: -42px 0;
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   .theme-twisty, .theme-checkbox {
michael@0:     background-image: url("chrome://browser/skin/devtools/controls@2x.png");
michael@0:   }
michael@0: }
michael@0: 
michael@0: /* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
michael@0: 
michael@0: .theme-tooltip-panel .panel-arrowcontent {
michael@0:   padding: 5px;
michael@0:   background: rgba(19, 28, 38, .9);
michael@0:   border-radius: 5px;
michael@0:   box-shadow: none;
michael@0:   border: 3px solid #434850;
michael@0: }
michael@0: 
michael@0: /* Overring panel arrow images to fit with our light and dark themes */
michael@0: 
michael@0: .theme-tooltip-panel .panel-arrow[side="top"] {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
michael@0:   margin-bottom: -4px;
michael@0: }
michael@0: 
michael@0: .theme-tooltip-panel .panel-arrow[side="bottom"] {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
michael@0:   margin-top: -4px;
michael@0: }
michael@0: 
michael@0: .theme-tooltip-panel .panel-arrow[side="left"] {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
michael@0:   margin-right: -4px;
michael@0: }
michael@0: 
michael@0: .theme-tooltip-panel .panel-arrow[side="right"] {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
michael@0:   margin-left: -4px;
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   .theme-tooltip-panel .panel-arrow[side="top"],
michael@0:   .theme-tooltip-panel .panel-arrow[side="bottom"] {
michael@0:     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
michael@0:   }
michael@0: 
michael@0:   .theme-tooltip-panel .panel-arrow[side="left"],
michael@0:   .theme-tooltip-panel .panel-arrow[side="right"] {
michael@0:     list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
michael@0:   }
michael@0: }
michael@0: 
michael@0: .theme-tooltip-panel .devtools-tooltip-simple-text {
michael@0:   color: white;
michael@0:   border-bottom: 1px solid #434850;
michael@0: }
michael@0: 
michael@0: .theme-tooltip-panel .devtools-tooltip-font-previewer-text {
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
michael@0:   border-bottom: 0;
michael@0: }
michael@0: 
michael@0: .devtools-horizontal-splitter {
michael@0:   border-bottom: 1px solid black;
michael@0: }
michael@0: 
michael@0: .devtools-side-splitter {
michael@0:   -moz-border-end: 1px solid black;
michael@0:   border-color: black; /* Needed for responsive container at low width. */
michael@0: }
michael@0: 
michael@0: .devtools-textinput,
michael@0: .devtools-searchinput {
michael@0:   background-color: rgba(24, 29, 32, 1);
michael@0:   color: rgba(184, 200, 217, 1);
michael@0: }
michael@0: 
michael@0: %include toolbars.inc.css