second and final part of syncing both themes with toolkit windows theme changes in...
[themes.git] / LCARStrek / navigator / webDeveloper.css
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2  * License, v. 2.0. If a copy of the MPL was not distributed with this
3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
6 @namespace html url("http://www.w3.org/1999/xhtml");
7
8 /* Mostly copied from mozilla/devtools/client/themes/commandline.inc.css  */
9 /* Developer Tools */
10
11 /* Developer toolbar */
12
13 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
14    We are copy/pasting variables from light-theme and dark-theme,
15    since they aren't loaded in this context (within browser.css). */
16 #developer-toolbar[devtoolstheme="light"],
17 #developer-toolbar[devtoolstheme="dark"] {
18   --gcli-background-color: #000000; /* --theme-toolbar-background */
19   --gcli-input-background: #000000; /* --theme-tab-toolbar-background */
20   --gcli-input-focused-background: #402800; /* --theme-tab-toolbar-background */
21   --gcli-input-color: #A09090; /* --theme-body-color-alt */
22   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
23   --selection-background: #008484; /* --theme-selection-background */
24   --selection-color: #000000; /* --theme-selection-color */
25 }
26
27 #developer-toolbar {
28   padding: 0;
29   background-color: var(--gcli-background-color);
30   border-top: 1px solid var(--gcli-border-color);
31 }
32
33 #developer-toolbar[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
34   filter: invert(1);
35 }
36
37 #developer-toolbar-toolbox-button {
38   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
39   -moz-image-region: rect(0px, 64px, 16px, 48px);
40 }
41
42 #developer-toolbar-toolbox-button:hover > .toolbarbutton-icon {
43   filter: brightness(120%);
44 }
45
46 #developer-toolbar-toolbox-button:hover:active > .toolbarbutton-icon {
47   filter: saturate(150%);
48 }
49
50 #developer-toolbar-toolbox-button[checked=true] > .toolbarbutton-icon {
51   filter: hue-rotate(180deg);
52 }
53
54 @media (min-resolution: 1.1dppx) {
55   #developer-toolbar-toolbox-button {
56     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
57     -moz-image-region: rect(0px, 128px, 32px, 96px);
58   }
59 }
60
61 /* Error counter */
62
63 #developer-toolbar-toolbox-button[error-count]:before {
64   color: #000000;
65   min-width: 16px;
66   text-shadow: none;
67   background-color: #FF0000;
68   border-radius: 1px;
69   margin-inline-end: 5px;
70 /*
71   Firefox browser/themes/windows/browser.css
72   color: #FDF3DE;
73   min-width: 16px;
74   text-shadow: none;
75   background-image: linear-gradient(#B4211B, #8A1915);
76   border-radius: 1px;
77   margin-inline-end: 5px;
78   Firefox browser/themes/linux/browser.css
79   color: #FDF3DE;
80   min-width: 16px;
81   text-shadow: none;
82   background-image: linear-gradient(#B4211B, #8A1915);
83   border-radius: 1px;
84   margin-inline-end: 2px;
85 */
86 }
87
88 /* GCLI */
89
90 html|*#gcli-tooltip-frame,
91 html|*#gcli-output-frame {
92   padding: 0;
93   border-width: 0;
94   background-color: transparent;
95 }
96
97 #gcli-output,
98 #gcli-tooltip {
99   border-width: 0;
100   background-color: transparent;
101   -moz-appearance: none;
102 }
103
104 .gclitoolbar-input-node,
105 .gclitoolbar-complete-node {
106   -moz-box-align: center;
107   padding-top: 0;
108   padding-bottom: 0;
109   padding-right: 8px;
110   text-shadow: none;
111   box-shadow: none;
112   background-color: transparent;
113 }
114
115 .gclitoolbar-input-node {
116   -moz-appearance: none;
117   color: var(--gcli-input-color);
118   background-color: var(--gcli-input-background);
119   background-repeat: no-repeat;
120   background-position: 4px center;
121   box-shadow: 1px 0 0 var(--gcli-border-color) inset,
122               -1px 0 0 var(--gcli-border-color) inset;
123   outline-style: none;
124   padding: 0;
125 }
126
127 .gclitoolbar-input-node[focused="true"] {
128   background-color: var(--gcli-input-focused-background);
129 }
130
131 .gclitoolbar-input-node::before {
132   content: "";
133   display: inline-block;
134   -moz-box-ordinal-group: 0;
135   width: 16px;
136   height: 16px;
137   margin: 0 2px;
138   background-image: url("chrome://devtools/skin/images/commandline-icon.png");
139   background-position: 0 center;
140   background-size: 32px 16px;
141 }
142
143 .gclitoolbar-input-node[focused="true"]::before {
144   background-position: -16px center;
145 }
146
147 @media (min-resolution: 1.1dppx) {
148   .gclitoolbar-input-node::before {
149     background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
150   }
151 }
152
153 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
154   background-color: var(--selection-background);
155   color: var(--selection-color);
156   text-shadow: none;
157 }
158
159 .gclitoolbar-complete-node {
160   padding-left: 21px;
161   background-color: transparent;
162   color: transparent;
163   z-index: 100;
164   pointer-events: none;
165 }
166
167 .gcli-in-incomplete,
168 .gcli-in-error,
169 .gcli-in-ontab,
170 .gcli-in-todo,
171 .gcli-in-closebrace,
172 .gcli-in-param,
173 .gcli-in-valid {
174   margin: 0;
175   padding: 0;
176 }
177
178 .gcli-in-incomplete {
179   border-bottom: 2px dotted #8050B0;
180 }
181
182 .gcli-in-error {
183   border-bottom: 2px dotted #FF0000;
184 }
185
186 .gcli-in-ontab {
187   color: #9C9CFF;
188 }
189
190 .gcli-in-todo {
191   color: #795900;
192 }
193
194 .gcli-in-closebrace {
195   color: #8050B0;
196 }