Commit | Line | Data |
---|---|---|
a40f6a79 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 | |
b336389b | 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ |
a40f6a79 | 4 | |
cae267ab | 5 | .theme-sidebar { |
1783ea50 | 6 | box-sizing: border-box; |
a40f6a79 RK |
7 | } |
8 | ||
1f756abf RK |
9 | body { |
10 | /* The view will grow bigger as the window gets resized, until 400px */ | |
11 | max-width: 400px; | |
12 | margin: 0px auto; | |
13 | padding: 0; | |
14 | /* "Contain" the absolutely positioned #main element */ | |
15 | position: relative; | |
16 | } | |
17 | ||
18 | /* Header: contains the position and size of the element */ | |
19 | ||
20 | #header { | |
21 | box-sizing: border-box; | |
22 | width: 100%; | |
23 | padding: 4px 14px; | |
24 | display: -moz-box; | |
25 | vertical-align: top; | |
26 | } | |
27 | ||
28 | #header:-moz-dir(rtl) { | |
29 | -moz-box-direction: reverse; | |
30 | } | |
31 | ||
32 | #header > span { | |
33 | display: -moz-box; | |
34 | } | |
35 | ||
36 | #element-size { | |
37 | -moz-box-flex: 1; | |
38 | } | |
39 | ||
40 | #element-size:-moz-dir(rtl) { | |
41 | -moz-box-pack: end; | |
42 | } | |
43 | ||
44 | @media (max-height: 228px) { | |
45 | #header { | |
46 | padding-top: 0; | |
47 | padding-bottom: 0; | |
48 | margin-top: 10px; | |
49 | margin-bottom: 8px; | |
50 | } | |
51 | } | |
52 | ||
53 | /* Main: contains the box-model regions */ | |
54 | ||
a40f6a79 | 55 | #main { |
1f756abf RK |
56 | position: absolute; |
57 | box-sizing: border-box; | |
58 | /* The regions are semi-transparent, so the white background is partly | |
59 | visible */ | |
cae267ab | 60 | background-color: #FF9F00; |
b3bf08b1 | 61 | color: var(--theme-selection-color); |
1f756abf RK |
62 | /* Make sure there is some space between the window's edges and the regions */ |
63 | margin: 0 14px 10px 14px; | |
64 | width: calc(100% - 2 * 14px); | |
b3bf08b1 RK |
65 | } |
66 | ||
67 | .margin, | |
68 | .size { | |
1f756abf | 69 | /* color: var(--theme-highlight-blue); */ |
a40f6a79 RK |
70 | } |
71 | ||
1f756abf RK |
72 | /* Regions are 3 nested elements with wide borders and outlines */ |
73 | ||
cae267ab | 74 | #content { |
1f756abf RK |
75 | height: 25px; |
76 | } | |
77 | ||
78 | #margins, | |
79 | #borders, | |
80 | #padding { | |
81 | border-color: var(-theme-splitter-color); | |
82 | border-width: 25px; | |
83 | border-style: solid; | |
84 | outline: dotted 1px var(-theme-splitter-color); | |
fff8097b RK |
85 | } |
86 | ||
cae267ab | 87 | #margins { |
1f756abf RK |
88 | /* This opacity applies to all of the regions, since they are nested */ |
89 | opacity: .8; | |
a40f6a79 RK |
90 | } |
91 | ||
1f756abf RK |
92 | /* Respond to window size change by changing the size of the regions */ |
93 | ||
94 | @media (max-height: 228px) { | |
95 | #content { | |
96 | height: 18px; | |
97 | } | |
98 | ||
99 | #margins, | |
100 | #borders, | |
101 | #padding { | |
102 | border-width: 18px; | |
103 | } | |
a40f6a79 RK |
104 | } |
105 | ||
1f756abf RK |
106 | /* Regions colors */ |
107 | ||
108 | #margins { | |
cae267ab RK |
109 | border-color: #FFCF00; |
110 | } | |
111 | ||
1f756abf | 112 | #borders { |
cae267ab | 113 | border-color: #A09090; |
a40f6a79 | 114 | } |
bb9362a9 | 115 | |
1f756abf RK |
116 | #padding { |
117 | border-color: #8050B0; | |
118 | } | |
119 | ||
120 | #content { | |
121 | background-color: #008484; | |
122 | } | |
123 | ||
124 | /* Editable region sizes are contained in absolutely positioned <p> */ | |
125 | ||
126 | #main > p { | |
127 | position: absolute; | |
128 | pointer-events: none; | |
129 | } | |
130 | ||
131 | #main > p { | |
132 | margin: 0; | |
133 | text-align: center; | |
134 | } | |
135 | ||
136 | #main > p > span { | |
137 | vertical-align: middle; | |
138 | pointer-events: auto; | |
139 | } | |
140 | ||
141 | /* Coordinates for the region sizes */ | |
142 | ||
143 | .top, | |
144 | .bottom { | |
145 | width: calc(100% - 2px); | |
146 | text-align: center; | |
147 | } | |
148 | ||
149 | .padding.top { | |
150 | top: 55px; | |
151 | } | |
152 | ||
153 | .padding.bottom { | |
154 | bottom: 57px; | |
155 | } | |
156 | ||
157 | .border.top { | |
158 | top: 30px; | |
159 | } | |
160 | ||
161 | .border.bottom { | |
162 | bottom: 31px; | |
163 | } | |
164 | ||
165 | .margin.top { | |
166 | top: 5px; | |
167 | } | |
168 | ||
169 | .margin.bottom { | |
170 | bottom: 6px; | |
171 | } | |
172 | ||
173 | .size, | |
174 | .margin.left, | |
175 | .margin.right, | |
176 | .border.left, | |
177 | .border.right, | |
178 | .padding.left, | |
179 | .padding.right { | |
180 | top: 22px; | |
181 | line-height: 132px; | |
182 | } | |
183 | ||
184 | .size { | |
185 | width: calc(100% - 2px); | |
186 | } | |
187 | ||
188 | .margin.right, | |
189 | .margin.left, | |
190 | .border.left, | |
191 | .border.right, | |
192 | .padding.right, | |
193 | .padding.left { | |
194 | width: 25px; | |
195 | } | |
196 | ||
197 | .padding.left { | |
198 | left: 52px; | |
199 | } | |
200 | ||
201 | .padding.right { | |
202 | right: 51px; | |
203 | } | |
204 | ||
205 | .border.left { | |
206 | left: 26px; | |
207 | } | |
208 | ||
209 | .border.right { | |
210 | right: 26px; | |
211 | } | |
212 | ||
213 | .margin.right { | |
214 | right: 0; | |
215 | } | |
216 | ||
217 | .margin.left { | |
218 | left: 0; | |
219 | } | |
220 | ||
221 | .rotate.left:not(.editing) { | |
222 | transform: rotate(-90deg); | |
223 | } | |
224 | ||
225 | .rotate.right:not(.editing) { | |
226 | transform: rotate(90deg); | |
227 | } | |
228 | ||
229 | /* Coordinates should be different when the window is small, because we make | |
230 | the regions smaller then */ | |
231 | ||
232 | @media (max-height: 228px) { | |
233 | .padding.top { | |
234 | top: 37px; | |
235 | } | |
236 | ||
237 | .padding.bottom { | |
238 | bottom: 38px; | |
239 | } | |
240 | ||
241 | .border.top { | |
242 | top: 19px; | |
243 | } | |
244 | ||
245 | .border.bottom { | |
246 | bottom: 20px; | |
247 | } | |
248 | ||
249 | .margin.top { | |
250 | top: 1px; | |
251 | } | |
252 | ||
253 | .margin.bottom { | |
254 | bottom: 2px; | |
255 | } | |
256 | ||
257 | .size, | |
258 | .margin.left, | |
259 | .margin.right, | |
260 | .border.left, | |
261 | .border.right, | |
262 | .padding.left, | |
263 | .padding.right { | |
264 | line-height: 80px; | |
265 | } | |
266 | ||
267 | .margin.right, | |
268 | .margin.left, | |
269 | .border.left, | |
270 | .border.right, | |
271 | .padding.right, | |
272 | .padding.left { | |
273 | width: 21px; | |
274 | } | |
275 | ||
276 | .padding.left { | |
277 | left: 35px; | |
278 | } | |
279 | ||
280 | .padding.right { | |
281 | right: 35px; | |
282 | } | |
283 | ||
284 | .border.left { | |
285 | left: 16px; | |
286 | } | |
287 | ||
288 | .border.right { | |
289 | right: 17px; | |
290 | } | |
291 | } | |
292 | ||
293 | /* Legend, displayed inside regions */ | |
294 | ||
295 | .legend { | |
296 | position: absolute; | |
297 | margin: 5px 6px; | |
298 | z-index: 1; | |
299 | } | |
300 | ||
301 | .legend[data-box="margin"] { | |
302 | color: #000000; | |
303 | } | |
304 | ||
305 | @media (max-height: 228px) { | |
306 | .legend { | |
307 | margin: 2px 6px; | |
308 | } | |
309 | } | |
310 | ||
311 | /* Editable fields */ | |
312 | ||
bb9362a9 | 313 | .editable { |
a5cb6e53 | 314 | border: 1px dashed transparent; |
1f756abf | 315 | -moz-user-select: text; |
bb9362a9 RK |
316 | } |
317 | ||
318 | .editable:hover { | |
319 | border-bottom-color: #E7ADE7; | |
320 | } | |
321 | ||
322 | .styleinspector-propertyeditor { | |
323 | border: 1px solid #008484; | |
324 | padding: 0; | |
1f756abf RK |
325 | } |
326 | ||
327 | /* Make sure the content size doesn't appear as editable like the other sizes */ | |
328 | ||
329 | .size > span { | |
330 | cursor: default; | |
331 | } | |
332 | ||
333 | /* Hide all values when the view is inactive */ | |
334 | ||
335 | body.inactive > #header > #element-position, | |
336 | body.inactive > #header > #element-size, | |
337 | body.inactive > #main > p { | |
338 | visibility: hidden; | |
339 | } |