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;
10 /* The view will grow bigger as the window gets resized, until 400px */
14 /* "Contain" the absolutely positioned #main element */
18 /* Header: contains the position and size of the element */
21 box-sizing: border-box;
28 #header:-moz-dir(rtl) {
29 -moz-box-direction: reverse;
40 #element-size:-moz-dir(rtl) {
44 @media (max-height: 228px) {
53 /* Main: contains the box-model regions */
57 box-sizing: border-box;
58 /* The regions are semi-transparent, so the white background is partly
60 background-color: #FF9F00;
61 color: var(--theme-selection-color);
62 /* Make sure there is some space between the window's edges and the regions */
63 margin: 0 14px 10px 14px;
64 width: calc(100% - 2 * 14px);
69 /* color: var(--theme-highlight-blue); */
72 /* Regions are 3 nested elements with wide borders and outlines */
81 border-color: var(-theme-splitter-color);
84 outline: dotted 1px var(-theme-splitter-color);
88 /* This opacity applies to all of the regions, since they are nested */
92 /* Respond to window size change by changing the size of the regions */
94 @media (max-height: 228px) {
109 border-color: #FFCF00;
113 border-color: #A09090;
117 border-color: #8050B0;
121 background-color: #008484;
124 /* Editable region sizes are contained in absolutely positioned <p> */
128 pointer-events: none;
137 vertical-align: middle;
138 pointer-events: auto;
141 /* Coordinates for the region sizes */
145 width: calc(100% - 2px);
185 width: calc(100% - 2px);
221 .rotate.left:not(.editing) {
222 transform: rotate(-90deg);
225 .rotate.right:not(.editing) {
226 transform: rotate(90deg);
229 /* Coordinates should be different when the window is small, because we make
230 the regions smaller then */
232 @media (max-height: 228px) {
293 /* Legend, displayed inside regions */
301 .legend[data-box="margin"] {
305 @media (max-height: 228px) {
311 /* Editable fields */
314 border: 1px dashed transparent;
315 -moz-user-select: text;
319 border-bottom-color: #E7ADE7;
322 .styleinspector-propertyeditor {
323 border: 1px solid #008484;
327 /* Make sure the content size doesn't appear as editable like the other sizes */
333 /* Hide all values when the view is inactive */
335 body.inactive > #header > #element-position,
336 body.inactive > #header > #element-size,
337 body.inactive > #main > p {