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 border-bottom-style: solid;
7 border-bottom-width: 1px;
8 border-color: var(--theme-splitter-color);
12 /* The view will grow bigger as the window gets resized, until 400px */
27 #layout-geometry-editor {
31 #layout-geometry-editor::before {
32 background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
35 /* Main: contains the box-model regions */
39 box-sizing: border-box;
40 /* The regions are semi-transparent, so the white background is partly
42 background-color: #FF9F00;
43 color: var(--theme-selection-color);
44 /* Make sure there is some space between the window's edges and the regions */
45 margin: 0 14px 4px 14px;
46 width: calc(100% - 2 * 14px);
51 /* color: var(--theme-highlight-blue); */
54 /* Regions are 3 nested elements with wide borders and outlines */
63 border-color: var(--theme-splitter-color);
66 outline: dotted 1px var(--theme-splitter-color);
70 /* This opacity applies to all of the regions, since they are nested */
77 border-color: #FFCF00;
81 border-color: #A09090;
85 border-color: #8050B0;
89 background-color: #008484;
92 .theme-firebug #boxmodel-main,
93 .theme-firebug #boxmodel-borders,
94 .theme-firebug #boxmodel-content {
98 .theme-firebug #boxmodel-main,
99 .theme-firebug #boxmodel-header {
100 font-family: var(--proportional-font-family);
103 .theme-firebug #boxmodel-main {
104 color: var(--theme-body-color);
105 font-size: var(--theme-toolbar-font-size);
108 .theme-firebug #boxmodel-header {
109 font-size: var(--theme-toolbar-font-size);
112 /* Editable region sizes are contained in absolutely positioned <p> */
116 pointer-events: none;
121 #boxmodel-main > p > span,
122 #boxmodel-main > p > input {
123 vertical-align: middle;
124 pointer-events: auto;
127 /* Coordinates for the region sizes */
131 width: calc(100% - 2px);
135 .boxmodel-padding.boxmodel-top {
139 .boxmodel-padding.boxmodel-bottom {
143 .boxmodel-border.boxmodel-top {
147 .boxmodel-border.boxmodel-bottom {
151 .boxmodel-margin.boxmodel-top {
155 .boxmodel-margin.boxmodel-bottom {
160 .boxmodel-margin.boxmodel-left,
161 .boxmodel-margin.boxmodel-right,
162 .boxmodel-border.boxmodel-left,
163 .boxmodel-border.boxmodel-right,
164 .boxmodel-padding.boxmodel-left,
165 .boxmodel-padding.boxmodel-right {
171 width: calc(100% - 2px);
174 .boxmodel-margin.boxmodel-right,
175 .boxmodel-margin.boxmodel-left,
176 .boxmodel-border.boxmodel-left,
177 .boxmodel-border.boxmodel-right,
178 .boxmodel-padding.boxmodel-right,
179 .boxmodel-padding.boxmodel-left {
183 .boxmodel-padding.boxmodel-left {
187 .boxmodel-padding.boxmodel-right {
191 .boxmodel-border.boxmodel-left {
195 .boxmodel-border.boxmodel-right {
199 .boxmodel-margin.boxmodel-right {
203 .boxmodel-margin.boxmodel-left {
207 .boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
208 transform: rotate(-90deg);
211 .boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
212 transform: rotate(90deg);
215 /* Legend: displayed inside regions */
223 .boxmodel-legend[data-box="margin"] {
224 color: #000000; /*var(--theme-highlight-blue);*/
227 /* Editable fields */
230 border: 1px dashed transparent;
231 -moz-user-select: text;
234 .boxmodel-editable:hover {
235 border-bottom-color: #E7ADE7;
238 .styleinspector-propertyeditor {
239 border: 1px solid #008484;
243 /* Make sure the content size doesn't appear as editable like the other sizes */
245 .boxmodel-size > span {
249 /* Box Model Info: contains the position and size of the element */
251 #boxmodel-element-size {
255 #boxmodel-position-group {