make pin display better on pinned tiles
[themes.git] / LCARStrek / browser / devtools / common.css
CommitLineData
3d85dbf1 1/* vim:set ts=2 sw=2 sts=2 et: */
9099c61d
RK
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/. */
3d85dbf1 5
3886293f
RK
6/* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */
7window {
8 padding: 0;
56ab361a
RK
9}
10
3886293f
RK
11notification {
12 margin-bottom: 3px;
3d85dbf1 13}
713cf603 14
3886293f 15/* End LCARStrek toolbox rules */
85cfb236 16
85cfb236 17
3886293f
RK
18/* Font for code */
19.devtools-monospace {
20 font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
85cfb236
RK
21}
22
37953ab4 23/* Splitters */
85cfb236
RK
24
25.devtools-horizontal-splitter {
85cfb236
RK
26 min-height: 3px;
27 height: 3px;
85cfb236
RK
28 position: relative;
29}
713cf603 30
8d7ef0d9 31#devtools-side-splitter {
37953ab4
RK
32 min-width: 0;
33 width: 3px;
ed1a91c6
RK
34 border: none;
35 margin: 0 3px;
37953ab4 36 position: relative;
ed1a91c6 37 cursor: e-resize;
713cf603 38}
445863a2 39
0142a07b
RK
40/* In-tools sidebar */
41
82b4252f
RK
42.devtools-toolbox-side-iframe {
43 min-width: 465px;
44}
45
7600e0b1 46/* === BEGIN common.inc.css === */
0142a07b 47
82b4252f
RK
48/* Autocomplete Popup */
49/* Dark and light theme */
50
51.devtools-autocomplete-popup {
82b4252f 52 border-radius: 3px;
6dc70335 53 overflow-x: hidden;
82b4252f
RK
54 max-height: 40rem;
55}
56
57.devtools-autocomplete-listbox {
58 background-color: transparent;
59 border-width: 0px !important;
0142a07b
RK
60}
61
82b4252f
RK
62.devtools-autocomplete-listbox > richlistitem,
63.devtools-autocomplete-listbox > richlistitem[selected] {
64 width: 100%;
65 background-color: transparent;
66 border-radius: 4px;
0142a07b
RK
67}
68
82b4252f
RK
69.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
70.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
71/* background-color: rgba(0,0,0,0.5); */
0142a07b
RK
72}
73
82b4252f
RK
74.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
75.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
76/* color: hsl(208,100%,60%);*/
0142a07b
RK
77}
78
82b4252f
RK
79.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
80/* color: #eee;*/
0142a07b
RK
81}
82
82b4252f
RK
83.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
84/* color: #ccc;*/
0142a07b
RK
85}
86
82b4252f
RK
87.devtools-autocomplete-listbox > richlistitem > .initial-value,
88.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
89 margin: 0;
90 padding: 1px 0;
0142a07b
RK
91}
92
82b4252f 93.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
a21f2959 94 text-align: end;
82b4252f 95}
0142a07b 96
ed88669c
RK
97/* Rest of the dark and light theme */
98
99.devtools-autocomplete-popup,
100.CodeMirror-hints,
101.CodeMirror-Tern-tooltip {
102 border: 1px solid #FF9F00;
103 background-color: #000000;
104}
82b4252f
RK
105
106.devtools-autocomplete-popup.light-theme {
445863a2
RK
107}
108
82b4252f
RK
109.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
110.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
111/* background-color: rgba(128,128,128,0.3); */
112}
113
114.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
115.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
116/* color: #222;*/
117}
118
119.devtools-autocomplete-listbox.light-theme > richlistitem > label {
120/* color: #666;*/
0142a07b 121}
82b4252f 122
ed1a91c6
RK
123/* Responsive container */
124
125.devtools-responsive-container {
126 -moz-box-orient: horizontal;
127}
128
129@media (max-width: 700px) {
130 .devtools-responsive-container {
131 -moz-box-orient: vertical;
132 }
133
134 .devtools-responsive-container > .devtools-side-splitter {
135 border: 0;
136 margin: 3px 0;
137 min-height: 3px;
138 height: 3px;
139 /* In some edge case the cursor is not changed to n-resize */
140 cursor: n-resize;
141 }
142
143 .devtools-responsive-container > .devtools-sidebar-tabs {
144 min-height: 35vh;
145 max-height: 75vh;
146 }
147}
7600e0b1
RK
148
149/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
150
151.devtools-tooltip.devtools-tooltip-tooltip {
152 /* If the tooltip uses a <tooltip> XUL element */
153 padding: 4px;
154 background: #A09090;
155 border-radius: 3px;
156}
5a199ba1 157
d2ce251d 158.devtools-tooltip .panel-arrowcontent {
7600e0b1
RK
159 /* If the tooltip uses a <panel> XUL element instead */
160 padding: 4px;
161}
162
d2ce251d
RK
163.devtools-tooltip .panel-arrowcontainer {
164 /* Reseting the transition used when panels are shown */
165 transition: none;
166 /* Panels slide up/down/left/right when they appear using a transform.
167 Since we want to remove the transition, we don't need to transform anymore
168 plus it can interfeer by causing mouseleave events on the underlying nodes */
169 transform: none;
170}
171
172.devtools-tooltip[clamped-dimensions] {
45dc7657 173 min-height: 100px;
d2ce251d 174 max-height: 400px;
45dc7657 175 min-width: 100px;
d2ce251d
RK
176 max-width: 400px;
177}
1988bb88
RK
178.devtools-tooltip[clamped-dimensions-no-min-height] {
179 min-height: 0;
180 max-height: 400px;
181 min-width: 100px;
182 max-width: 400px;
183}
cac2a998
RK
184.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
185 min-width: 400px;
186 max-width: 400px;
187}
1988bb88 188.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
cac2a998
RK
189.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
190.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
d2ce251d
RK
191 overflow: hidden;
192}
cac2a998
RK
193.devtools-tooltip[wide] {
194 max-width: 600px;
195}
d2ce251d
RK
196
197/* Tooltip: Simple Text */
198
5a199ba1
RK
199.devtools-tooltip-simple-text {
200 background: #000000;
201 max-width: 400px;
202 margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
203 padding: 8px 12px;
204 white-space: pre-wrap;
205}
206
207.devtools-tooltip-simple-text:first-child {
208 margin-top: -4px;
209}
210
211.devtools-tooltip-simple-text:last-child {
212 margin-bottom: -4px;
213}
214
6568957a
RK
215.devtools-tooltip-simple-text {
216 background-color: #000000;
217 max-width: 400px;
218 margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
219 padding: 8px 12px;
220 white-space: pre-wrap;
221}
222
223.devtools-tooltip-simple-text:first-child {
224 margin-top: -4px;
225}
226
227.devtools-tooltip-simple-text:last-child {
228 margin-bottom: -4px;
229}
230
45dc7657
RK
231/* Tooltip: Alert Icon */
232
233.devtools-tooltip-alert-icon {
234 width: 32px;
235 height: 32px;
236 margin: 6px;
237 -moz-margin-end: 20px;
238}
239
240.devtools-tooltip-alert-icon {
241 list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
242}
243
d2ce251d
RK
244/* Tooltip: Variables View */
245
246.devtools-tooltip-variables-view-box {
247 margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
248}
249
dccbbf95
RK
250.devtools-tooltip-variables-view-box .variable-or-property > .title {
251 -moz-padding-end: 6px;
252}
253
d2ce251d
RK
254/* Tooltip: Tiles */
255
7600e0b1
RK
256.devtools-tooltip-tiles {
257 background-color: #A09090;
258 background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF),
259 linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF);
260 background-size: 20px 20px;
261 background-position: 0 0, 10px 10px;
262}
263
589b5528
RK
264.devtools-tooltip-iframe {
265 border: none;
266 background: transparent;
267}
268
269/* Eyedropper Widget */
270
271.devtools-eyedropper-panel {
272 pointer-events: none;
273 -moz-appearance: none;
274 width: 156px;
275 height: 120px;
276 background-color: transparent;
277 border: none;
832af407
RK
278 padding: 0;
279}
280
281#color-value {
282 color: #FF9F00;
589b5528
RK
283}
284
832af407
RK
285#color-value.highlight {
286 color: #FFCF00;
287}
288
289
7600e0b1 290/* === END common.inc.css === */