Commit | Line | Data |
---|---|---|
dc9d5d64 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 | .theme-sidebar { | |
6 | box-sizing: border-box; | |
7 | } | |
8 | ||
9 | #sidebar-panel-layoutview { | |
10 | display: block; | |
11 | overflow: auto; | |
12 | } | |
13 | ||
14 | body.theme-sidebar, | |
15 | #layout-container { | |
16 | /* The view will grow bigger as the window gets resized, until 400px */ | |
17 | max-width: 400px; | |
18 | margin: 0px auto; | |
19 | padding: 0; | |
20 | /* "Contain" the absolutely positioned #layout-main element */ | |
21 | position: relative; | |
22 | } | |
23 | ||
24 | /* Header: contains the position and size of the element */ | |
25 | ||
26 | #header, | |
27 | #layout-header { | |
28 | box-sizing: border-box; | |
29 | width: 100%; | |
30 | padding: 4px 14px; | |
31 | display: -moz-box; | |
32 | vertical-align: top; | |
33 | } | |
34 | ||
35 | #header:dir(rtl), | |
36 | #layout-header:dir(rtl) { | |
37 | -moz-box-direction: reverse; | |
38 | } | |
39 | ||
40 | #header > span, | |
41 | #layout-header > span { | |
42 | display: -moz-box; | |
43 | } | |
44 | ||
45 | #element-size, | |
46 | #layout-element-size { | |
47 | -moz-box-flex: 1; | |
48 | } | |
49 | ||
50 | #element-size:dir(rtl), | |
51 | #layout-element-size:dir(rtl) { | |
52 | -moz-box-pack: end; | |
53 | } | |
54 | ||
55 | @media (max-height: 250px) { | |
56 | #header, | |
57 | #layout-header { | |
58 | padding-top: 0; | |
59 | padding-bottom: 0; | |
60 | margin-top: 10px; | |
61 | margin-bottom: 8px; | |
62 | } | |
63 | } | |
64 | ||
65 | /* Main: contains the box-model regions */ | |
66 | ||
67 | #main, | |
68 | #layout-main { | |
69 | position: absolute; | |
70 | box-sizing: border-box; | |
71 | /* The regions are semi-transparent, so the white background is partly | |
72 | visible */ | |
73 | background-color: #FF9F00; | |
74 | color: var(--theme-selection-color); | |
75 | /* Make sure there is some space between the window's edges and the regions */ | |
76 | margin: 0 14px 10px 14px; | |
77 | width: calc(100% - 2 * 14px); | |
78 | } | |
79 | ||
80 | .margin, | |
81 | .size, | |
82 | .layout-margin, | |
83 | .layout-size { | |
84 | /* color: var(--theme-highlight-blue); */ | |
85 | } | |
86 | ||
87 | /* Regions are 3 nested elements with wide borders and outlines */ | |
88 | ||
89 | #content, | |
90 | #layout-content { | |
91 | height: 25px; | |
92 | } | |
93 | ||
94 | #margins, | |
95 | #borders, | |
96 | #padding, | |
97 | #layout-margins, | |
98 | #layout-borders, | |
99 | #layout-padding { | |
100 | border-color: var(-theme-splitter-color); | |
101 | border-width: 25px; | |
102 | border-style: solid; | |
103 | outline: dotted 1px var(-theme-splitter-color); | |
104 | } | |
105 | ||
106 | #margins, | |
107 | #layout-margins { | |
108 | /* This opacity applies to all of the regions, since they are nested */ | |
109 | opacity: .8; | |
110 | } | |
111 | ||
112 | /* Respond to window size change by changing the size of the regions */ | |
113 | ||
114 | @media (max-height: 250px) { | |
115 | #content, | |
116 | #layout-content { | |
117 | height: 18px; | |
118 | } | |
119 | ||
120 | #margins, | |
121 | #borders, | |
122 | #padding, | |
123 | #layout-margins, | |
124 | #layout-borders, | |
125 | #layout-padding { | |
126 | border-width: 18px; | |
127 | } | |
128 | } | |
129 | ||
130 | /* Regions colors */ | |
131 | ||
132 | #margins, | |
133 | #layout-margins { | |
134 | border-color: #FFCF00; | |
135 | } | |
136 | ||
137 | #borders, | |
138 | #layout-borders { | |
139 | border-color: #A09090; | |
140 | } | |
141 | ||
142 | #padding, | |
143 | #layout-padding { | |
144 | border-color: #8050B0; | |
145 | } | |
146 | ||
147 | #content, | |
148 | #layout-content { | |
149 | background-color: #008484; | |
150 | } | |
151 | /* | |
152 | .theme-firebug #layout-main, | |
153 | .theme-firebug #layout-borders, | |
154 | .theme-firebug #layout-content { | |
155 | border-style: solid; | |
156 | } | |
157 | ||
158 | .theme-firebug #layout-main, | |
159 | .theme-firebug #layout-header { | |
160 | font-family: var(--proportional-font-family); | |
161 | } | |
162 | ||
163 | .theme-firebug #layout-main { | |
164 | color: var(--theme-body-color); | |
165 | font-size: var(--theme-toolbar-font-size); | |
166 | } | |
167 | ||
168 | .theme-firebug #layout-header { | |
169 | font-size: var(--theme-toolbar-font-size); | |
170 | } | |
171 | */ | |
172 | /* Editable region sizes are contained in absolutely positioned <p> */ | |
173 | ||
174 | #main > p, | |
175 | #layout-main > p { | |
176 | position: absolute; | |
177 | pointer-events: none; | |
178 | margin: 0; | |
179 | text-align: center; | |
180 | } | |
181 | ||
182 | #main > p > span, | |
183 | #main > p > input, | |
184 | #layout-main > p > span, | |
185 | #layout-main > p > input { | |
186 | vertical-align: middle; | |
187 | pointer-events: auto; | |
188 | } | |
189 | ||
190 | /* Coordinates for the region sizes */ | |
191 | ||
192 | .top, | |
193 | .bottom, | |
194 | .layout-top, | |
195 | .layout-bottom { | |
196 | width: calc(100% - 2px); | |
197 | text-align: center; | |
198 | } | |
199 | ||
200 | .padding.top, | |
201 | .layout-padding.layout-top { | |
202 | top: 55px; | |
203 | } | |
204 | ||
205 | .padding.bottom, | |
206 | .layout-padding.layout-bottom { | |
207 | bottom: 57px; | |
208 | } | |
209 | ||
210 | .border.top, | |
211 | .layout-border.layout-top { | |
212 | top: 30px; | |
213 | } | |
214 | ||
215 | .border.bottom, | |
216 | .layout-border.layout-bottom { | |
217 | bottom: 31px; | |
218 | } | |
219 | ||
220 | .margin.top, | |
221 | .layout-margin.layout-top { | |
222 | top: 5px; | |
223 | } | |
224 | ||
225 | .margin.bottom, | |
226 | .layout-margin.layout-bottom { | |
227 | bottom: 6px; | |
228 | } | |
229 | ||
230 | .size, | |
231 | .margin.left, | |
232 | .margin.right, | |
233 | .border.left, | |
234 | .border.right, | |
235 | .padding.left, | |
236 | .padding.right, | |
237 | .layout-size, | |
238 | .layout-margin.layout-left, | |
239 | .layout-margin.layout-right, | |
240 | .layout-border.layout-left, | |
241 | .layout-border.layout-right, | |
242 | .layout-padding.layout-left, | |
243 | .layout-padding.layout-right { | |
244 | top: 22px; | |
245 | line-height: 132px; | |
246 | } | |
247 | ||
248 | .size, | |
249 | .layout-size { | |
250 | width: calc(100% - 2px); | |
251 | } | |
252 | ||
253 | .margin.right, | |
254 | .margin.left, | |
255 | .border.left, | |
256 | .border.right, | |
257 | .padding.right, | |
258 | .padding.left, | |
259 | .layout-margin.layout-right, | |
260 | .layout-margin.layout-left, | |
261 | .layout-border.layout-left, | |
262 | .layout-border.layout-right, | |
263 | .layout-padding.layout-right, | |
264 | .layout-padding.layout-left { | |
265 | width: 25px; | |
266 | } | |
267 | ||
268 | .padding.left, | |
269 | .layout-padding.layout-left { | |
270 | left: 52px; | |
271 | } | |
272 | ||
273 | .padding.right, | |
274 | .layout-padding.layout-right { | |
275 | right: 51px; | |
276 | } | |
277 | ||
278 | .border.left, | |
279 | .layout-border.layout-left { | |
280 | left: 26px; | |
281 | } | |
282 | ||
283 | .border.right, | |
284 | .layout-border.layout-right { | |
285 | right: 26px; | |
286 | } | |
287 | ||
288 | .margin.right, | |
289 | .layout-margin.layout-right { | |
290 | right: 0; | |
291 | } | |
292 | ||
293 | .margin.left, | |
294 | .layout-margin.layout-left { | |
295 | left: 0; | |
296 | } | |
297 | ||
298 | .rotate.left:not(.editing), | |
299 | .layout-rotate.layout-left:not(.layout-editing) { | |
300 | transform: rotate(-90deg); | |
301 | } | |
302 | ||
303 | .rotate.right:not(.editing), | |
304 | .layout-rotate.layout-right:not(.layout-editing) { | |
305 | transform: rotate(90deg); | |
306 | } | |
307 | ||
308 | /* Coordinates should be different when the window is small, because we make | |
309 | the regions smaller then */ | |
310 | ||
311 | @media (max-height: 250px) { | |
312 | .padding.top, | |
313 | .layout-padding.layout-top { | |
314 | top: 37px; | |
315 | } | |
316 | ||
317 | .padding.bottom, | |
318 | .layout-padding.layout-bottom { | |
319 | bottom: 38px; | |
320 | } | |
321 | ||
322 | .border.top, | |
323 | .layout-border.layout-top { | |
324 | top: 19px; | |
325 | } | |
326 | ||
327 | .border.bottom, | |
328 | .layout-border.layout-bottom { | |
329 | bottom: 20px; | |
330 | } | |
331 | ||
332 | .margin.top, | |
333 | .layout-margin.layout-top { | |
334 | top: 1px; | |
335 | } | |
336 | ||
337 | .margin.bottom, | |
338 | .layout-margin.layout-bottom { | |
339 | bottom: 2px; | |
340 | } | |
341 | ||
342 | .size, | |
343 | .margin.left, | |
344 | .margin.right, | |
345 | .border.left, | |
346 | .border.right, | |
347 | .padding.left, | |
348 | .padding.right, | |
349 | .layout-size, | |
350 | .layout-margin.layout-left, | |
351 | .layout-margin.layout-right, | |
352 | .layout-border.layout-left, | |
353 | .layout-border.layout-right, | |
354 | .layout-padding.layout-left, | |
355 | .layout-padding.layout-right { | |
356 | line-height: 80px; | |
357 | } | |
358 | ||
359 | .margin.right, | |
360 | .margin.left, | |
361 | .border.left, | |
362 | .border.right, | |
363 | .padding.right, | |
364 | .padding.left, | |
365 | .layout-margin.layout-right, | |
366 | .layout-margin.layout-left, | |
367 | .layout-border.layout-left, | |
368 | .layout-border.layout-right, | |
369 | .layout-padding.layout-right, | |
370 | .layout-padding.layout-left { | |
371 | width: 21px; | |
372 | } | |
373 | ||
374 | .padding.left, | |
375 | .layout-padding.layout-left { | |
376 | left: 35px; | |
377 | } | |
378 | ||
379 | .padding.right, | |
380 | .layout-padding.layout-right { | |
381 | right: 35px; | |
382 | } | |
383 | ||
384 | .border.left, | |
385 | .layout-border.layout-left { | |
386 | left: 16px; | |
387 | } | |
388 | ||
389 | .border.right, | |
390 | .layout-border.layout-right { | |
391 | right: 17px; | |
392 | } | |
393 | } | |
394 | ||
395 | /* Legend, displayed inside regions */ | |
396 | ||
397 | .legend, | |
398 | .layout-legend { | |
399 | position: absolute; | |
400 | margin: 5px 6px; | |
401 | z-index: 1; | |
402 | } | |
403 | ||
404 | .legend[data-box="margin"], | |
405 | .layout-legend[data-box="margin"] { | |
406 | color: #000000; /*var(--theme-highlight-blue);*/ | |
407 | } | |
408 | ||
409 | @media (max-height: 250px) { | |
410 | .legend, | |
411 | .layout-legend { | |
412 | margin: 2px 6px; | |
413 | } | |
414 | } | |
415 | ||
416 | /* Editable fields */ | |
417 | ||
418 | .editable, | |
419 | .layout-editable { | |
420 | border: 1px dashed transparent; | |
421 | -moz-user-select: text; | |
422 | } | |
423 | ||
424 | .editable:hover, | |
425 | .layout-editable:hover { | |
426 | border-bottom-color: #E7ADE7; | |
427 | } | |
428 | ||
429 | .styleinspector-propertyeditor { | |
430 | border: 1px solid #008484; | |
431 | padding: 0; | |
432 | } | |
433 | ||
434 | /* Make sure the content size doesn't appear as editable like the other sizes */ | |
435 | ||
436 | .size > span, | |
437 | .layout-size > span { | |
438 | cursor: default; | |
439 | } | |
440 | ||
441 | /* Hide all values when the view is inactive */ | |
442 | ||
443 | body.inactive > #header > #element-position, | |
444 | body.inactive > #header > #element-size, | |
445 | body.inactive > #main > p, | |
446 | #layout-container.inactive > #layout-header > #layout-element-position, | |
447 | #layout-container.inactive > #layout-header > #layout-element-size, | |
448 | #layout-container.inactive > #layout-main > p { | |
449 | visibility: hidden; | |
450 | } | |
451 | ||
452 | #layout-position-group { | |
453 | display: flex; | |
454 | align-items: center; | |
455 | } | |
456 | ||
457 | #layout-geometry-editor { | |
458 | visibility: hidden; | |
459 | } | |
460 | ||
461 | #layout-geometry-editor::before { | |
462 | background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px; | |
463 | } |