Commit | Line | Data |
---|---|---|
1e9e1791 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 | ||
c877146a RK |
5 | @import url(variables.css); /* No idea why this is needed but we get error messages without it */ |
6 | ||
1e9e1791 RK |
7 | #boxmodel-wrapper { |
8 | border-bottom-style: solid; | |
9 | border-bottom-width: 1px; | |
10 | border-color: var(--theme-splitter-color); | |
11 | } | |
12 | ||
13 | #boxmodel-container { | |
14 | /* The view will grow bigger as the window gets resized, until 400px */ | |
15 | max-width: 400px; | |
16 | margin: 0px auto; | |
17 | padding: 0; | |
18 | } | |
19 | ||
20 | /* Header */ | |
21 | ||
22 | #boxmodel-header, | |
23 | #boxmodel-info { | |
24 | display: flex; | |
25 | align-items: center; | |
26 | padding: 4px 17px; | |
27 | } | |
28 | ||
29 | #layout-geometry-editor { | |
30 | visibility: hidden; | |
31 | } | |
32 | ||
33 | #layout-geometry-editor::before { | |
34 | background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px; | |
35 | } | |
36 | ||
37 | /* Main: contains the box-model regions */ | |
38 | ||
39 | #boxmodel-main { | |
40 | position: relative; | |
41 | box-sizing: border-box; | |
42 | /* The regions are semi-transparent, so the white background is partly | |
43 | visible */ | |
44 | background-color: #FF9F00; | |
45 | color: var(--theme-selection-color); | |
46 | /* Make sure there is some space between the window's edges and the regions */ | |
47 | margin: 0 14px 4px 14px; | |
48 | width: calc(100% - 2 * 14px); | |
49 | } | |
50 | ||
51 | .boxmodel-margin, | |
52 | .boxmodel-size { | |
53 | /* color: var(--theme-highlight-blue); */ | |
54 | } | |
55 | ||
56 | /* Regions are 3 nested elements with wide borders and outlines */ | |
57 | ||
58 | #boxmodel-content { | |
59 | height: 18px; | |
60 | } | |
61 | ||
62 | #boxmodel-margins, | |
63 | #boxmodel-borders, | |
64 | #boxmodel-padding { | |
65 | border-color: var(--theme-splitter-color); | |
66 | border-width: 18px; | |
67 | border-style: solid; | |
68 | outline: dotted 1px var(--theme-splitter-color); | |
69 | } | |
70 | ||
71 | #boxmodel-margins { | |
72 | /* This opacity applies to all of the regions, since they are nested */ | |
73 | opacity: .8; | |
74 | } | |
75 | ||
76 | /* Regions colors */ | |
77 | ||
78 | #boxmodel-margins { | |
79 | border-color: #FFCF00; | |
80 | } | |
81 | ||
82 | #boxmodel-borders { | |
83 | border-color: #A09090; | |
84 | } | |
85 | ||
86 | #boxmodel-padding { | |
87 | border-color: #8050B0; | |
88 | } | |
89 | ||
90 | #boxmodel-content { | |
91 | background-color: #008484; | |
92 | } | |
93 | /* | |
94 | .theme-firebug #boxmodel-main, | |
95 | .theme-firebug #boxmodel-borders, | |
96 | .theme-firebug #boxmodel-content { | |
97 | border-style: solid; | |
98 | } | |
99 | ||
100 | .theme-firebug #boxmodel-main, | |
101 | .theme-firebug #boxmodel-header { | |
102 | font-family: var(--proportional-font-family); | |
103 | } | |
104 | ||
105 | .theme-firebug #boxmodel-main { | |
106 | color: var(--theme-body-color); | |
107 | font-size: var(--theme-toolbar-font-size); | |
108 | } | |
109 | ||
110 | .theme-firebug #boxmodel-header { | |
111 | font-size: var(--theme-toolbar-font-size); | |
112 | } | |
113 | */ | |
114 | /* Editable region sizes are contained in absolutely positioned <p> */ | |
115 | ||
116 | #boxmodel-main > p { | |
117 | position: absolute; | |
118 | pointer-events: none; | |
119 | margin: 0; | |
120 | text-align: center; | |
121 | } | |
122 | ||
123 | #boxmodel-main > p > span, | |
124 | #boxmodel-main > p > input { | |
125 | vertical-align: middle; | |
126 | pointer-events: auto; | |
127 | } | |
128 | ||
129 | /* Coordinates for the region sizes */ | |
130 | ||
131 | .boxmodel-top, | |
132 | .boxmodel-bottom { | |
133 | width: calc(100% - 2px); | |
134 | text-align: center; | |
135 | } | |
136 | ||
137 | .boxmodel-padding.boxmodel-top { | |
138 | top: 37px; | |
139 | } | |
140 | ||
141 | .boxmodel-padding.boxmodel-bottom { | |
142 | bottom: 38px; | |
143 | } | |
144 | ||
145 | .boxmodel-border.boxmodel-top { | |
146 | top: 19px; | |
147 | } | |
148 | ||
149 | .boxmodel-border.boxmodel-bottom { | |
150 | bottom: 20px; | |
151 | } | |
152 | ||
153 | .boxmodel-margin.boxmodel-top { | |
154 | top: 1px; | |
155 | } | |
156 | ||
157 | .boxmodel-margin.boxmodel-bottom { | |
158 | bottom: 2px; | |
159 | } | |
160 | ||
161 | .boxmodel-size, | |
162 | .boxmodel-margin.boxmodel-left, | |
163 | .boxmodel-margin.boxmodel-right, | |
164 | .boxmodel-border.boxmodel-left, | |
165 | .boxmodel-border.boxmodel-right, | |
166 | .boxmodel-padding.boxmodel-left, | |
167 | .boxmodel-padding.boxmodel-right { | |
168 | top: 22px; | |
169 | line-height: 80px; | |
170 | } | |
171 | ||
172 | .boxmodel-size { | |
173 | width: calc(100% - 2px); | |
174 | } | |
175 | ||
176 | .boxmodel-margin.boxmodel-right, | |
177 | .boxmodel-margin.boxmodel-left, | |
178 | .boxmodel-border.boxmodel-left, | |
179 | .boxmodel-border.boxmodel-right, | |
180 | .boxmodel-padding.boxmodel-right, | |
181 | .boxmodel-padding.boxmodel-left { | |
182 | width: 21px; | |
183 | } | |
184 | ||
185 | .boxmodel-padding.boxmodel-left { | |
186 | left: 35px; | |
187 | } | |
188 | ||
189 | .boxmodel-padding.boxmodel-right { | |
190 | right: 35px; | |
191 | } | |
192 | ||
193 | .boxmodel-border.boxmodel-left { | |
194 | left: 16px; | |
195 | } | |
196 | ||
197 | .boxmodel-border.boxmodel-right { | |
198 | right: 17px; | |
199 | } | |
200 | ||
201 | .boxmodel-margin.boxmodel-right { | |
202 | right: 0; | |
203 | } | |
204 | ||
205 | .boxmodel-margin.boxmodel-left { | |
206 | left: 0; | |
207 | } | |
208 | ||
209 | .boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) { | |
210 | transform: rotate(-90deg); | |
211 | } | |
212 | ||
213 | .boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) { | |
214 | transform: rotate(90deg); | |
215 | } | |
216 | ||
217 | /* Legend: displayed inside regions */ | |
218 | ||
219 | .boxmodel-legend { | |
220 | position: absolute; | |
221 | margin: 2px 6px; | |
222 | z-index: 1; | |
223 | } | |
224 | ||
225 | .boxmodel-legend[data-box="margin"] { | |
226 | color: #000000; /*var(--theme-highlight-blue);*/ | |
227 | } | |
228 | ||
229 | /* Editable fields */ | |
230 | ||
231 | .boxmodel-editable { | |
232 | border: 1px dashed transparent; | |
233 | -moz-user-select: text; | |
234 | } | |
235 | ||
236 | .boxmodel-editable:hover { | |
237 | border-bottom-color: #E7ADE7; | |
238 | } | |
239 | ||
240 | .styleinspector-propertyeditor { | |
241 | border: 1px solid #008484; | |
242 | padding: 0; | |
243 | } | |
244 | ||
245 | /* Make sure the content size doesn't appear as editable like the other sizes */ | |
246 | ||
247 | .boxmodel-size > span { | |
248 | cursor: default; | |
249 | } | |
250 | ||
251 | /* Box Model Info: contains the position and size of the element */ | |
252 | ||
253 | #boxmodel-element-size { | |
254 | flex: 1; | |
255 | } | |
256 | ||
257 | #boxmodel-position-group { | |
258 | display: flex; | |
259 | align-items: center; | |
260 | } |