/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ #sidebar-panel-layoutview { display: block; overflow: auto; } #layout-container { /* The view will grow bigger as the window gets resized, until 400px */ max-width: 400px; margin: 0px auto; padding: 0; /* "Contain" the absolutely positioned #layout-main element */ position: relative; } /* Header: contains the position and size of the element */ #layout-header { box-sizing: border-box; width: 100%; padding: 4px 14px; display: -moz-box; vertical-align: top; } #layout-header:-moz-dir(rtl) { -moz-box-direction: reverse; } #layout-header > span { display: -moz-box; } #layout-element-size { -moz-box-flex: 1; } #layout-element-size:-moz-dir(rtl) { -moz-box-pack: end; } @media (max-height: 250px) { #layout-header { padding-top: 0; padding-bottom: 0; margin-top: 10px; margin-bottom: 8px; } } /* Main: contains the box-model regions */ #layout-main { position: absolute; box-sizing: border-box; /* The regions are semi-transparent, so the white background is partly visible */ background-color: #FF9F00; color: var(--theme-selection-color); /* Make sure there is some space between the window's edges and the regions */ margin: 0 14px 10px 14px; width: calc(100% - 2 * 14px); } .layout-margin, .layout-size { /* color: var(--theme-highlight-blue); */ } /* Regions are 3 nested elements with wide borders and outlines */ #layout-content { height: 25px; } #layout-margins, #layout-borders, #layout-padding { border-color: var(--theme-splitter-color); border-width: 25px; border-style: solid; outline: dotted 1px var(--theme-splitter-color); } #layout-margins { /* This opacity applies to all of the regions, since they are nested */ opacity: .8; } /* Respond to window size change by changing the size of the regions */ @media (max-height: 250px) { #layout-content { height: 18px; } #layout-margins, #layout-borders, #layout-padding { border-width: 18px; } } /* Regions colors */ #layout-margins { border-color: #FFCF00; } #layout-borders { border-color: #A09090; } #layout-padding { border-color: #8050B0; } #layout-content { background-color: #008484; } /* .theme-firebug #layout-main, .theme-firebug #layout-borders, .theme-firebug #layout-content { border-style: solid; } .theme-firebug #layout-main, .theme-firebug #layout-header { font-family: var(--proportional-font-family); } .theme-firebug #layout-main { color: var(--theme-body-color); font-size: var(--theme-toolbar-font-size); } .theme-firebug #layout-header { font-size: var(--theme-toolbar-font-size); } */ /* Editable region sizes are contained in absolutely positioned

*/ #layout-main > p { position: absolute; pointer-events: none; margin: 0; text-align: center; } #layout-main > p > span, #layout-main > p > input { vertical-align: middle; pointer-events: auto; } /* Coordinates for the region sizes */ .layout-top, .layout-bottom { width: calc(100% - 2px); text-align: center; } .layout-padding.layout-top { top: 55px; } .layout-padding.layout-bottom { bottom: 57px; } .layout-border.layout-top { top: 30px; } .layout-border.layout-bottom { bottom: 31px; } .layout-margin.layout-top { top: 5px; } .layout-margin.layout-bottom { bottom: 6px; } .layout-size, .layout-margin.layout-left, .layout-margin.layout-right, .layout-border.layout-left, .layout-border.layout-right, .layout-padding.layout-left, .layout-padding.layout-right { top: 22px; line-height: 132px; } .layout-size { width: calc(100% - 2px); } .layout-margin.layout-right, .layout-margin.layout-left, .layout-border.layout-left, .layout-border.layout-right, .layout-padding.layout-right, .layout-padding.layout-left { width: 25px; } .layout-padding.layout-left { left: 52px; } .layout-padding.layout-right { right: 51px; } .layout-border.layout-left { left: 26px; } .layout-border.layout-right { right: 26px; } .layout-margin.layout-right { right: 0; } .layout-margin.layout-left { left: 0; } .layout-rotate.layout-left:not(.layout-editing) { transform: rotate(-90deg); } .layout-rotate.layout-right:not(.layout-editing) { transform: rotate(90deg); } /* Coordinates should be different when the window is small, because we make the regions smaller then */ @media (max-height: 250px) { .layout-padding.layout-top { top: 37px; } .layout-padding.layout-bottom { bottom: 38px; } .layout-border.layout-top { top: 19px; } .layout-border.layout-bottom { bottom: 20px; } .layout-margin.layout-top { top: 1px; } .layout-margin.layout-bottom { bottom: 2px; } .layout-size, .layout-margin.layout-left, .layout-margin.layout-right, .layout-border.layout-left, .layout-border.layout-right, .layout-padding.layout-left, .layout-padding.layout-right { line-height: 80px; } .layout-margin.layout-right, .layout-margin.layout-left, .layout-border.layout-left, .layout-border.layout-right, .layout-padding.layout-right, .layout-padding.layout-left { width: 21px; } .layout-padding.layout-left { left: 35px; } .layout-padding.layout-right { right: 35px; } .layout-border.layout-left { left: 16px; } .layout-border.layout-right { right: 17px; } } /* Legend, displayed inside regions */ .layout-legend { position: absolute; margin: 5px 6px; z-index: 1; } .layout-legend[data-box="margin"] { color: #000000; /*var(--theme-highlight-blue);*/ } @media (max-height: 250px) { .layout-legend { margin: 2px 6px; } } /* Editable fields */ .layout-editable { border: 1px dashed transparent; -moz-user-select: text; } .layout-editable:hover { border-bottom-color: #E7ADE7; } .styleinspector-propertyeditor { border: 1px solid #008484; padding: 0; } /* Make sure the content size doesn't appear as editable like the other sizes */ .layout-size > span { cursor: default; } /* Hide all values when the view is inactive */ #layout-container.inactive > #layout-header > #layout-element-position, #layout-container.inactive > #layout-header > #layout-element-size, #layout-container.inactive > #layout-main > p { visibility: hidden; } #layout-position-group { display: flex; align-items: center; } #layout-geometry-editor { visibility: hidden; } #layout-geometry-editor::before { background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px; }