|
1 %if 0 |
|
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/. */ |
|
5 %endif |
|
6 |
|
7 /* Developer toolbar */ |
|
8 |
|
9 #developer-toolbar { |
|
10 -moz-appearance: none; |
|
11 padding: 0; |
|
12 min-height: 32px; |
|
13 background-image: url(devtools/background-noise-toolbar.png), linear-gradient(#303840, #2d3640); |
|
14 border-top: 1px solid #060a0d; |
|
15 box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset; |
|
16 } |
|
17 |
|
18 #developer-toolbar > toolbarbutton { |
|
19 -moz-appearance: none; |
|
20 border: none; |
|
21 background: transparent; |
|
22 margin: 0; |
|
23 padding: 0 10px; |
|
24 width: 32px; |
|
25 } |
|
26 |
|
27 .developer-toolbar-button > image { |
|
28 margin: auto 10px; |
|
29 } |
|
30 |
|
31 #developer-toolbar-toolbox-button { |
|
32 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png"); |
|
33 -moz-image-region: rect(0px, 16px, 16px, 0px); |
|
34 } |
|
35 |
|
36 #developer-toolbar-toolbox-button > label { |
|
37 display: none; |
|
38 } |
|
39 |
|
40 #developer-toolbar-toolbox-button:hover { |
|
41 -moz-image-region: rect(0px, 32px, 16px, 16px); |
|
42 } |
|
43 |
|
44 #developer-toolbar-toolbox-button:hover:active { |
|
45 -moz-image-region: rect(0px, 48px, 16px, 32px); |
|
46 } |
|
47 |
|
48 #developer-toolbar-toolbox-button[checked=true] { |
|
49 -moz-image-region: rect(0px, 64px, 16px, 48px); |
|
50 } |
|
51 |
|
52 #developer-toolbar-closebutton { |
|
53 list-style-image: url("chrome://browser/skin/devtools/close.png"); |
|
54 -moz-appearance: none; |
|
55 border: none; |
|
56 margin: 0 4px; |
|
57 min-width: 16px; |
|
58 width: 16px; |
|
59 opacity: 0.6; |
|
60 } |
|
61 |
|
62 #developer-toolbar-closebutton > .toolbarbutton-icon { |
|
63 /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must |
|
64 use evil CSS to give the impression of smaller content */ |
|
65 margin: -4px; |
|
66 } |
|
67 |
|
68 #developer-toolbar-closebutton > .toolbarbutton-text { |
|
69 display: none; |
|
70 } |
|
71 |
|
72 #developer-toolbar-closebutton:hover { |
|
73 opacity: 0.8; |
|
74 } |
|
75 |
|
76 #developer-toolbar-closebutton:hover:active { |
|
77 opacity: 1; |
|
78 } |
|
79 |
|
80 /* GCLI */ |
|
81 |
|
82 html|*#gcli-tooltip-frame, |
|
83 html|*#gcli-output-frame { |
|
84 padding: 0; |
|
85 border-width: 0; |
|
86 background-color: transparent; |
|
87 } |
|
88 |
|
89 #gcli-output, |
|
90 #gcli-tooltip { |
|
91 border-width: 0; |
|
92 background-color: transparent; |
|
93 -moz-appearance: none; |
|
94 } |
|
95 |
|
96 .gclitoolbar-input-node, |
|
97 .gclitoolbar-complete-node { |
|
98 margin: 0; |
|
99 -moz-box-align: center; |
|
100 padding-top: 0; |
|
101 padding-bottom: 0; |
|
102 padding-right: 8px; |
|
103 text-shadow: none; |
|
104 box-shadow: none; |
|
105 border-width: 0; |
|
106 background-color: transparent; |
|
107 } |
|
108 |
|
109 .gclitoolbar-input-node { |
|
110 -moz-appearance: none; |
|
111 color: hsl(210,30%,85%); |
|
112 padding-left: 20px; |
|
113 background-color: #242b33; |
|
114 background-repeat: no-repeat; |
|
115 background-position: 4px center; |
|
116 box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset, |
|
117 1px 0 0 hsla(206,37%,4%,.2) inset, |
|
118 -1px 0 0 hsla(206,37%,4%,.2) inset; |
|
119 line-height: 32px; |
|
120 outline-style: none; |
|
121 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0); |
|
122 } |
|
123 |
|
124 .gclitoolbar-input-node[focused="true"] { |
|
125 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); |
|
126 background-color: #232e38; |
|
127 } |
|
128 |
|
129 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { |
|
130 background-color: hsl(210,30%,85%); |
|
131 color: hsl(210,24%,16%); |
|
132 text-shadow: none; |
|
133 } |
|
134 |
|
135 .gclitoolbar-complete-node { |
|
136 padding-left: 21px; |
|
137 background-color: transparent; |
|
138 color: transparent; |
|
139 z-index: 100; |
|
140 pointer-events: none; |
|
141 } |
|
142 |
|
143 .gcli-in-incomplete, |
|
144 .gcli-in-error, |
|
145 .gcli-in-ontab, |
|
146 .gcli-in-todo, |
|
147 .gcli-in-closebrace, |
|
148 .gcli-in-param, |
|
149 .gcli-in-valid { |
|
150 margin: 0; |
|
151 padding: 0; |
|
152 } |
|
153 |
|
154 .gcli-in-incomplete { |
|
155 border-bottom: 2px dotted #999; |
|
156 } |
|
157 |
|
158 .gcli-in-error { |
|
159 border-bottom: 2px dotted #F00; |
|
160 } |
|
161 |
|
162 .gcli-in-ontab { |
|
163 color: hsl(210,0%,35%); |
|
164 } |
|
165 |
|
166 .gcli-in-todo { |
|
167 color: hsl(210,50%,35%); |
|
168 } |
|
169 |
|
170 .gcli-in-closebrace { |
|
171 color: hsl(0,0%,80%); |
|
172 } |