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 /* Main: contains the box-model regions */
65 box-sizing: border-box;
66 /* The regions are semi-transparent, so the white background is partly
68 background-color: #FF9F00;
69 color: var(--theme-selection-color);
70 /* Make sure there is some space between the window's edges and the regions */
71 margin: 0 14px 4px 14px;
72 width: calc(100% - 2 * 14px);
77 /* color: var(--theme-highlight-blue); */
80 /* Regions are 3 nested elements with wide borders and outlines */
89 border-color: var(--theme-splitter-color);
92 outline: dotted 1px var(--theme-splitter-color);
96 /* This opacity applies to all of the regions, since they are nested */
103 border-color: #FFCF00;
107 border-color: #A09090;
111 border-color: #8050B0;
115 background-color: #008484;
118 /* Editable region sizes are contained in absolutely positioned <p> */
122 pointer-events: none;
127 #layout-main > p > span,
128 #layout-main > p > input {
129 vertical-align: middle;
130 pointer-events: auto;
133 /* Coordinates for the region sizes */
137 width: calc(100% - 2px);
141 .layout-padding.layout-top {
145 .layout-padding.layout-bottom {
149 .layout-border.layout-top {
153 .layout-border.layout-bottom {
157 .layout-margin.layout-top {
161 .layout-margin.layout-bottom {
166 .layout-margin.layout-left,
167 .layout-margin.layout-right,
168 .layout-border.layout-left,
169 .layout-border.layout-right,
170 .layout-padding.layout-left,
171 .layout-padding.layout-right {
177 width: calc(100% - 2px);
180 .layout-margin.layout-right,
181 .layout-margin.layout-left,
182 .layout-border.layout-left,
183 .layout-border.layout-right,
184 .layout-padding.layout-right,
185 .layout-padding.layout-left {
189 .layout-padding.layout-left {
193 .layout-padding.layout-right {
197 .layout-border.layout-left {
201 .layout-border.layout-right {
205 .layout-margin.layout-right {
209 .layout-margin.layout-left {
213 .layout-rotate.layout-left:not(.layout-editing) {
214 transform: rotate(-90deg);
217 .layout-rotate.layout-right:not(.layout-editing) {
218 transform: rotate(90deg);
221 /* Legend, displayed inside regions */
229 .layout-legend[data-box="margin"] {
230 color: #000000; /*var(--theme-highlight-blue);*/
233 /* Editable fields */
236 border: 1px dashed transparent;
237 -moz-user-select: text;
240 .layout-editable:hover {
241 border-bottom-color: #E7ADE7;
244 .styleinspector-propertyeditor {
245 border: 1px solid #008484;
249 /* Make sure the content size doesn't appear as editable like the other sizes */
251 .layout-size > span {
255 /* Hide all values when the view is inactive */
257 #layout-container.inactive > #layout-header > #layout-element-position,
258 #layout-container.inactive > #layout-header > #layout-element-size,
259 #layout-container.inactive > #layout-main > p {
263 #layout-position-group {
268 #layout-geometry-editor {
272 #layout-geometry-editor::before {
273 background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;