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 {
12 /* The sidebar-panel is not focusable, this wrapper will catch click events in
13 all the empty area around the layout-container */
18 /* The view will grow bigger as the window gets resized, until 400px */
22 /* "Contain" the absolutely positioned #layout-main element */
26 /* Header: contains the position and size of the element */
29 box-sizing: border-box;
36 #layout-header:dir(rtl) {
37 -moz-box-direction: reverse;
40 #layout-header > span {
44 #layout-element-size {
48 #layout-element-size:dir(rtl) {
52 @media (max-height: 250px) {
61 #layout-geometry-editor {
65 #layout-geometry-editor::before {
66 background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
69 /* Main: contains the box-model regions */
73 box-sizing: border-box;
74 /* The regions are semi-transparent, so the white background is partly
76 background-color: #FF9F00;
77 color: var(--theme-selection-color);
78 /* Make sure there is some space between the window's edges and the regions */
79 margin: 0 14px 4px 14px;
80 width: calc(100% - 2 * 14px);
85 /* color: var(--theme-highlight-blue); */
88 /* Regions are 3 nested elements with wide borders and outlines */
97 border-color: var(--theme-splitter-color);
100 outline: dotted 1px var(--theme-splitter-color);
104 /* This opacity applies to all of the regions, since they are nested */
111 border-color: #FFCF00;
115 border-color: #A09090;
119 border-color: #8050B0;
123 background-color: #008484;
126 /* Editable region sizes are contained in absolutely positioned <p> */
130 pointer-events: none;
135 #layout-main > p > span,
136 #layout-main > p > input {
137 vertical-align: middle;
138 pointer-events: auto;
141 /* Coordinates for the region sizes */
145 width: calc(100% - 2px);
149 .layout-padding.layout-top {
153 .layout-padding.layout-bottom {
157 .layout-border.layout-top {
161 .layout-border.layout-bottom {
165 .layout-margin.layout-top {
169 .layout-margin.layout-bottom {
174 .layout-margin.layout-left,
175 .layout-margin.layout-right,
176 .layout-border.layout-left,
177 .layout-border.layout-right,
178 .layout-padding.layout-left,
179 .layout-padding.layout-right {
185 width: calc(100% - 2px);
188 .layout-margin.layout-right,
189 .layout-margin.layout-left,
190 .layout-border.layout-left,
191 .layout-border.layout-right,
192 .layout-padding.layout-right,
193 .layout-padding.layout-left {
197 .layout-padding.layout-left {
201 .layout-padding.layout-right {
205 .layout-border.layout-left {
209 .layout-border.layout-right {
213 .layout-margin.layout-right {
217 .layout-margin.layout-left {
221 .layout-rotate.layout-left:not(.layout-editing) {
222 transform: rotate(-90deg);
225 .layout-rotate.layout-right:not(.layout-editing) {
226 transform: rotate(90deg);
229 /* Legend, displayed inside regions */
237 .layout-legend[data-box="margin"] {
238 color: #000000; /*var(--theme-highlight-blue);*/
241 /* Editable fields */
244 border: 1px dashed transparent;
245 -moz-user-select: text;
248 .layout-editable:hover {
249 border-bottom-color: #E7ADE7;
252 .styleinspector-propertyeditor {
253 border: 1px solid #008484;
257 /* Make sure the content size doesn't appear as editable like the other sizes */
259 .layout-size > span {
263 /* Layout info: contains the position and size of the element */
265 #layout-element-size {
269 #layout-position-group {