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 @import url(variables.css); /* No idea why this is needed but we get error messages without it */
8 border-bottom-style: solid;
9 border-bottom-width: 1px;
10 border-color: var(--theme-splitter-color);
14 /* The view will grow bigger as the window gets resized, until 400px */
29 #layout-geometry-editor {
33 #layout-geometry-editor::before {
34 background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
37 /* Main: contains the box-model regions */
41 box-sizing: border-box;
42 /* The regions are semi-transparent, so the white background is partly
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);
53 /* color: var(--theme-highlight-blue); */
56 /* Regions are 3 nested elements with wide borders and outlines */
65 border-color: var(--theme-splitter-color);
68 outline: dotted 1px var(--theme-splitter-color);
72 /* This opacity applies to all of the regions, since they are nested */
79 border-color: #FFCF00;
83 border-color: #A09090;
87 border-color: #8050B0;
91 background-color: #008484;
94 .theme-firebug #boxmodel-main,
95 .theme-firebug #boxmodel-borders,
96 .theme-firebug #boxmodel-content {
100 .theme-firebug #boxmodel-main,
101 .theme-firebug #boxmodel-header {
102 font-family: var(--proportional-font-family);
105 .theme-firebug #boxmodel-main {
106 color: var(--theme-body-color);
107 font-size: var(--theme-toolbar-font-size);
110 .theme-firebug #boxmodel-header {
111 font-size: var(--theme-toolbar-font-size);
114 /* Editable region sizes are contained in absolutely positioned <p> */
118 pointer-events: none;
123 #boxmodel-main > p > span,
124 #boxmodel-main > p > input {
125 vertical-align: middle;
126 pointer-events: auto;
129 /* Coordinates for the region sizes */
133 width: calc(100% - 2px);
137 .boxmodel-padding.boxmodel-top {
141 .boxmodel-padding.boxmodel-bottom {
145 .boxmodel-border.boxmodel-top {
149 .boxmodel-border.boxmodel-bottom {
153 .boxmodel-margin.boxmodel-top {
157 .boxmodel-margin.boxmodel-bottom {
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 {
173 width: calc(100% - 2px);
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 {
185 .boxmodel-padding.boxmodel-left {
189 .boxmodel-padding.boxmodel-right {
193 .boxmodel-border.boxmodel-left {
197 .boxmodel-border.boxmodel-right {
201 .boxmodel-margin.boxmodel-right {
205 .boxmodel-margin.boxmodel-left {
209 .boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
210 transform: rotate(-90deg);
213 .boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
214 transform: rotate(90deg);
217 /* Legend: displayed inside regions */
225 .boxmodel-legend[data-box="margin"] {
226 color: #000000; /*var(--theme-highlight-blue);*/
229 /* Editable fields */
232 border: 1px dashed transparent;
233 -moz-user-select: text;
236 .boxmodel-editable:hover {
237 border-bottom-color: #E7ADE7;
240 .styleinspector-propertyeditor {
241 border: 1px solid #008484;
245 /* Make sure the content size doesn't appear as editable like the other sizes */
247 .boxmodel-size > span {
251 /* Box Model Info: contains the position and size of the element */
253 #boxmodel-element-size {
257 #boxmodel-position-group {