* 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-body {
- background: url("layout-background-grid.png"), radial-gradient(50% 70%, circle cover, #000000 0%, #000000 100%);
+.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;
}
-.theme-body {
- color: #FF9F00 !important;
+/* 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;
}
-#main {
- border-color: #A09090;
- border-style: dotted;
+#header:-moz-dir(rtl) {
+ -moz-box-direction: reverse;
}
-#main > .margin,
-#main > .padding {
- color: #000000;
+#header > span {
+ display: -moz-box;
}
-#main > .border {
+#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);
}
-.border > span {
+.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: #9C9CFF;
+ 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