Commit | Line | Data |
---|---|---|
f7d5404c RK |
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; | |
dae45075 | 69 | margin-inline-end: 5px; |
f7d5404c RK |
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; | |
dae45075 | 77 | margin-inline-end: 5px; |
f7d5404c RK |
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; | |
dae45075 | 84 | margin-inline-end: 2px; |
f7d5404c RK |
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 | } |