+++ /dev/null
-/* 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 <p> */
-
-#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;
-}
projects / themes.git / blobdiff