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/ */
5 #sidebar-panel-layoutview {
11 /* The view will grow bigger as the window gets resized, until 400px */
15 /* "Contain" the absolutely positioned #layout-main element */
19 /* Header: contains the position and size of the element */
22 box-sizing: border-box;
29 #layout-header:-moz-dir(rtl) {
30 -moz-box-direction: reverse;
33 #layout-header > span {
37 #layout-element-size {
41 #layout-element-size:-moz-dir(rtl) {
45 @media (max-height: 250px) {
54 /* Main: contains the box-model regions */
58 box-sizing: border-box;
59 /* The regions are semi-transparent, so the white background is partly
61 background-color: #FF9F00;
62 color: var(--theme-selection-color);
63 /* Make sure there is some space between the window's edges and the regions */
64 margin: 0 14px 10px 14px;
65 width: calc(100% - 2 * 14px);
70 /* color: var(--theme-highlight-blue); */
73 /* Regions are 3 nested elements with wide borders and outlines */
82 border-color: var(--theme-splitter-color);
85 outline: dotted 1px var(--theme-splitter-color);
89 /* This opacity applies to all of the regions, since they are nested */
93 /* Respond to window size change by changing the size of the regions */
95 @media (max-height: 250px) {
110 border-color: #FFCF00;
114 border-color: #A09090;
118 border-color: #8050B0;
122 background-color: #008484;
125 .theme-firebug #layout-main,
126 .theme-firebug #layout-borders,
127 .theme-firebug #layout-content {
131 .theme-firebug #layout-main,
132 .theme-firebug #layout-header {
133 font-family: var(--proportional-font-family);
136 .theme-firebug #layout-main {
137 color: var(--theme-body-color);
138 font-size: var(--theme-toolbar-font-size);
141 .theme-firebug #layout-header {
142 font-size: var(--theme-toolbar-font-size);
145 /* Editable region sizes are contained in absolutely positioned <p> */
149 pointer-events: none;
154 #layout-main > p > span,
155 #layout-main > p > input {
156 vertical-align: middle;
157 pointer-events: auto;
160 /* Coordinates for the region sizes */
164 width: calc(100% - 2px);
168 .layout-padding.layout-top {
172 .layout-padding.layout-bottom {
176 .layout-border.layout-top {
180 .layout-border.layout-bottom {
184 .layout-margin.layout-top {
188 .layout-margin.layout-bottom {
193 .layout-margin.layout-left,
194 .layout-margin.layout-right,
195 .layout-border.layout-left,
196 .layout-border.layout-right,
197 .layout-padding.layout-left,
198 .layout-padding.layout-right {
204 width: calc(100% - 2px);
207 .layout-margin.layout-right,
208 .layout-margin.layout-left,
209 .layout-border.layout-left,
210 .layout-border.layout-right,
211 .layout-padding.layout-right,
212 .layout-padding.layout-left {
216 .layout-padding.layout-left {
220 .layout-padding.layout-right {
224 .layout-border.layout-left {
228 .layout-border.layout-right {
232 .layout-margin.layout-right {
236 .layout-margin.layout-left {
240 .layout-rotate.layout-left:not(.layout-editing) {
241 transform: rotate(-90deg);
244 .layout-rotate.layout-right:not(.layout-editing) {
245 transform: rotate(90deg);
248 /* Coordinates should be different when the window is small, because we make
249 the regions smaller then */
251 @media (max-height: 250px) {
252 .layout-padding.layout-top {
256 .layout-padding.layout-bottom {
260 .layout-border.layout-top {
264 .layout-border.layout-bottom {
268 .layout-margin.layout-top {
272 .layout-margin.layout-bottom {
277 .layout-margin.layout-left,
278 .layout-margin.layout-right,
279 .layout-border.layout-left,
280 .layout-border.layout-right,
281 .layout-padding.layout-left,
282 .layout-padding.layout-right {
286 .layout-margin.layout-right,
287 .layout-margin.layout-left,
288 .layout-border.layout-left,
289 .layout-border.layout-right,
290 .layout-padding.layout-right,
291 .layout-padding.layout-left {
295 .layout-padding.layout-left {
299 .layout-padding.layout-right {
303 .layout-border.layout-left {
307 .layout-border.layout-right {
312 /* Legend, displayed inside regions */
320 .layout-legend[data-box="margin"] {
321 color: #000000; /*var(--theme-highlight-blue);*/
324 @media (max-height: 250px) {
330 /* Editable fields */
333 border: 1px dashed transparent;
334 -moz-user-select: text;
337 .layout-editable:hover {
338 border-bottom-color: #E7ADE7;
341 .styleinspector-propertyeditor {
342 border: 1px solid #008484;
346 /* Make sure the content size doesn't appear as editable like the other sizes */
348 .layout-size > span {
352 /* Hide all values when the view is inactive */
354 #layout-container.inactive > #layout-header > #layout-element-position,
355 #layout-container.inactive > #layout-header > #layout-element-size,
356 #layout-container.inactive > #layout-main > p {
360 #layout-position-group {
365 #layout-geometry-editor {
369 #layout-geometry-editor::before {
370 background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;