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/ */
6 box-sizing: border-box;
9 #sidebar-panel-layoutview {
16 /* The view will grow bigger as the window gets resized, until 400px */
20 /* "Contain" the absolutely positioned #layout-main element */
24 /* Header: contains the position and size of the element */
28 box-sizing: border-box;
35 #header:-moz-dir(rtl),
36 #layout-header:-moz-dir(rtl) {
37 -moz-box-direction: reverse;
41 #layout-header > span {
46 #layout-element-size {
50 #element-size:-moz-dir(rtl),
51 #layout-element-size:-moz-dir(rtl) {
55 @media (max-height: 250px) {
65 /* Main: contains the box-model regions */
70 box-sizing: border-box;
71 /* The regions are semi-transparent, so the white background is partly
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);
84 /* color: var(--theme-highlight-blue); */
87 /* Regions are 3 nested elements with wide borders and outlines */
100 border-color: var(--theme-splitter-color);
103 outline: dotted 1px var(--theme-splitter-color);
108 /* This opacity applies to all of the regions, since they are nested */
112 /* Respond to window size change by changing the size of the regions */
114 @media (max-height: 250px) {
134 border-color: #FFCF00;
139 border-color: #A09090;
144 border-color: #8050B0;
149 background-color: #008484;
152 .theme-firebug #layout-main,
153 .theme-firebug #layout-borders,
154 .theme-firebug #layout-content {
158 .theme-firebug #layout-main,
159 .theme-firebug #layout-header {
160 font-family: var(--proportional-font-family);
163 .theme-firebug #layout-main {
164 color: var(--theme-body-color);
165 font-size: var(--theme-toolbar-font-size);
168 .theme-firebug #layout-header {
169 font-size: var(--theme-toolbar-font-size);
172 /* Editable region sizes are contained in absolutely positioned <p> */
177 pointer-events: none;
184 #layout-main > p > span,
185 #layout-main > p > input {
186 vertical-align: middle;
187 pointer-events: auto;
190 /* Coordinates for the region sizes */
196 width: calc(100% - 2px);
201 .layout-padding.layout-top {
206 .layout-padding.layout-bottom {
211 .layout-border.layout-top {
216 .layout-border.layout-bottom {
221 .layout-margin.layout-top {
226 .layout-margin.layout-bottom {
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 {
250 width: calc(100% - 2px);
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 {
269 .layout-padding.layout-left {
274 .layout-padding.layout-right {
279 .layout-border.layout-left {
284 .layout-border.layout-right {
289 .layout-margin.layout-right {
294 .layout-margin.layout-left {
298 .rotate.left:not(.editing),
299 .layout-rotate.layout-left:not(.layout-editing) {
300 transform: rotate(-90deg);
303 .rotate.right:not(.editing),
304 .layout-rotate.layout-right:not(.layout-editing) {
305 transform: rotate(90deg);
308 /* Coordinates should be different when the window is small, because we make
309 the regions smaller then */
311 @media (max-height: 250px) {
313 .layout-padding.layout-top {
318 .layout-padding.layout-bottom {
323 .layout-border.layout-top {
328 .layout-border.layout-bottom {
333 .layout-margin.layout-top {
338 .layout-margin.layout-bottom {
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 {
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 {
375 .layout-padding.layout-left {
380 .layout-padding.layout-right {
385 .layout-border.layout-left {
390 .layout-border.layout-right {
395 /* Legend, displayed inside regions */
404 .legend[data-box="margin"],
405 .layout-legend[data-box="margin"] {
406 color: #000000; /*var(--theme-highlight-blue);*/
409 @media (max-height: 250px) {
416 /* Editable fields */
420 border: 1px dashed transparent;
421 -moz-user-select: text;
425 .layout-editable:hover {
426 border-bottom-color: #E7ADE7;
429 .styleinspector-propertyeditor {
430 border: 1px solid #008484;
434 /* Make sure the content size doesn't appear as editable like the other sizes */
437 .layout-size > span {
441 /* Hide all values when the view is inactive */
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 {
452 #layout-position-group {
457 #layout-geometry-editor {
461 #layout-geometry-editor::before {
462 background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;