/* 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/ */ .theme-sidebar { box-sizing: border-box; } body { /* The view will grow bigger as the window gets resized, until 400px */ max-width: 400px; margin: 0px auto; padding: 0; /* "Contain" the absolutely positioned #main element */ position: relative; } /* Header: contains the position and size of the element */ #header { box-sizing: border-box; width: 100%; padding: 4px 14px; display: -moz-box; vertical-align: top; } #header:-moz-dir(rtl) { -moz-box-direction: reverse; } #header > span { display: -moz-box; } #element-size { -moz-box-flex: 1; } #element-size:-moz-dir(rtl) { -moz-box-pack: end; } @media (max-height: 228px) { #header { padding-top: 0; padding-bottom: 0; margin-top: 10px; margin-bottom: 8px; } } /* Main: contains the box-model regions */ #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); } .margin, .size { /* color: var(--theme-highlight-blue); */ } /* Regions are 3 nested elements with wide borders and outlines */ #content { height: 25px; } #margins, #borders, #padding { border-color: var(-theme-splitter-color); border-width: 25px; border-style: solid; outline: dotted 1px var(-theme-splitter-color); } #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: 228px) { #content { height: 18px; } #margins, #borders, #padding { border-width: 18px; } } /* Regions colors */ #margins { border-color: #FFCF00; } #borders { border-color: #A09090; } #padding { border-color: #8050B0; } #content { background-color: #008484; } /* Editable region sizes are contained in absolutely positioned

*/ #main > p { position: absolute; pointer-events: none; } #main > p { margin: 0; text-align: center; } #main > p > span { vertical-align: middle; pointer-events: auto; } /* Coordinates for the region sizes */ .top, .bottom { width: calc(100% - 2px); text-align: center; } .padding.top { top: 55px; } .padding.bottom { bottom: 57px; } .border.top { top: 30px; } .border.bottom { bottom: 31px; } .margin.top { top: 5px; } .margin.bottom { bottom: 6px; } .size, .margin.left, .margin.right, .border.left, .border.right, .padding.left, .padding.right { top: 22px; line-height: 132px; } .size { width: calc(100% - 2px); } .margin.right, .margin.left, .border.left, .border.right, .padding.right, .padding.left { width: 25px; } .padding.left { left: 52px; } .padding.right { right: 51px; } .border.left { left: 26px; } .border.right { right: 26px; } .margin.right { right: 0; } .margin.left { left: 0; } .rotate.left:not(.editing) { transform: rotate(-90deg); } .rotate.right:not(.editing) { transform: rotate(90deg); } /* Coordinates should be different when the window is small, because we make the regions smaller then */ @media (max-height: 228px) { .padding.top { top: 37px; } .padding.bottom { bottom: 38px; } .border.top { top: 19px; } .border.bottom { bottom: 20px; } .margin.top { top: 1px; } .margin.bottom { bottom: 2px; } .size, .margin.left, .margin.right, .border.left, .border.right, .padding.left, .padding.right { line-height: 80px; } .margin.right, .margin.left, .border.left, .border.right, .padding.right, .padding.left { width: 21px; } .padding.left { left: 35px; } .padding.right { right: 35px; } .border.left { left: 16px; } .border.right { right: 17px; } } /* Legend, displayed inside regions */ .legend { position: absolute; margin: 5px 6px; z-index: 1; } .legend[data-box="margin"] { color: #000000; } @media (max-height: 228px) { .legend { margin: 2px 6px; } } /* Editable fields */ .editable { border: 1px dashed transparent; -moz-user-select: text; } .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 */ .size > span { cursor: default; } /* Hide all values when the view is inactive */ body.inactive > #header > #element-position, body.inactive > #header > #element-size, body.inactive > #main > p { visibility: hidden; }