--- /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;
+}
+
+#sidebar-panel-layoutview {
+ display: block;
+ overflow: auto;
+}
+
+body.theme-sidebar,
+#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 */
+
+#header,
+#layout-header {
+ box-sizing: border-box;
+ width: 100%;
+ padding: 4px 14px;
+ display: -moz-box;
+ vertical-align: top;
+}
+
+#header:dir(rtl),
+#layout-header:dir(rtl) {
+ -moz-box-direction: reverse;
+}
+
+#header > span,
+#layout-header > span {
+ display: -moz-box;
+}
+
+#element-size,
+#layout-element-size {
+ -moz-box-flex: 1;
+}
+
+#element-size:dir(rtl),
+#layout-element-size:dir(rtl) {
+ -moz-box-pack: end;
+}
+
+@media (max-height: 250px) {
+ #header,
+ #layout-header {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-top: 10px;
+ margin-bottom: 8px;
+ }
+}
+
+/* Main: contains the box-model regions */
+
+#main,
+#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);
+}
+
+.margin,
+.size,
+.layout-margin,
+.layout-size {
+/* color: var(--theme-highlight-blue); */
+}
+
+/* Regions are 3 nested elements with wide borders and outlines */
+
+#content,
+#layout-content {
+ height: 25px;
+}
+
+#margins,
+#borders,
+#padding,
+#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);
+}
+
+#margins,
+#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) {
+ #content,
+ #layout-content {
+ height: 18px;
+ }
+
+ #margins,
+ #borders,
+ #padding,
+ #layout-margins,
+ #layout-borders,
+ #layout-padding {
+ border-width: 18px;
+ }
+}
+
+/* Regions colors */
+
+#margins,
+#layout-margins {
+ border-color: #FFCF00;
+}
+
+#borders,
+#layout-borders {
+ border-color: #A09090;
+}
+
+#padding,
+#layout-padding {
+ border-color: #8050B0;
+}
+
+#content,
+#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 <p> */
+
+#main > p,
+#layout-main > p {
+ position: absolute;
+ pointer-events: none;
+ margin: 0;
+ text-align: center;
+}
+
+#main > p > span,
+#main > p > input,
+#layout-main > p > span,
+#layout-main > p > input {
+ vertical-align: middle;
+ pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.top,
+.bottom,
+.layout-top,
+.layout-bottom {
+ width: calc(100% - 2px);
+ text-align: center;
+}
+
+.padding.top,
+.layout-padding.layout-top {
+ top: 55px;
+}
+
+.padding.bottom,
+.layout-padding.layout-bottom {
+ bottom: 57px;
+}
+
+.border.top,
+.layout-border.layout-top {
+ top: 30px;
+}
+
+.border.bottom,
+.layout-border.layout-bottom {
+ bottom: 31px;
+}
+
+.margin.top,
+.layout-margin.layout-top {
+ top: 5px;
+}
+
+.margin.bottom,
+.layout-margin.layout-bottom {
+ bottom: 6px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.border.left,
+.border.right,
+.padding.left,
+.padding.right,
+.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;
+}
+
+.size,
+.layout-size {
+ width: calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left,
+.border.left,
+.border.right,
+.padding.right,
+.padding.left,
+.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;
+}
+
+.padding.left,
+.layout-padding.layout-left {
+ left: 52px;
+}
+
+.padding.right,
+.layout-padding.layout-right {
+ right: 51px;
+}
+
+.border.left,
+.layout-border.layout-left {
+ left: 26px;
+}
+
+.border.right,
+.layout-border.layout-right {
+ right: 26px;
+}
+
+.margin.right,
+.layout-margin.layout-right {
+ right: 0;
+}
+
+.margin.left,
+.layout-margin.layout-left {
+ left: 0;
+}
+
+.rotate.left:not(.editing),
+.layout-rotate.layout-left:not(.layout-editing) {
+ transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing),
+.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) {
+ .padding.top,
+ .layout-padding.layout-top {
+ top: 37px;
+ }
+
+ .padding.bottom,
+ .layout-padding.layout-bottom {
+ bottom: 38px;
+ }
+
+ .border.top,
+ .layout-border.layout-top {
+ top: 19px;
+ }
+
+ .border.bottom,
+ .layout-border.layout-bottom {
+ bottom: 20px;
+ }
+
+ .margin.top,
+ .layout-margin.layout-top {
+ top: 1px;
+ }
+
+ .margin.bottom,
+ .layout-margin.layout-bottom {
+ bottom: 2px;
+ }
+
+ .size,
+ .margin.left,
+ .margin.right,
+ .border.left,
+ .border.right,
+ .padding.left,
+ .padding.right,
+ .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;
+ }
+
+ .margin.right,
+ .margin.left,
+ .border.left,
+ .border.right,
+ .padding.right,
+ .padding.left,
+ .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;
+ }
+
+ .padding.left,
+ .layout-padding.layout-left {
+ left: 35px;
+ }
+
+ .padding.right,
+ .layout-padding.layout-right {
+ right: 35px;
+ }
+
+ .border.left,
+ .layout-border.layout-left {
+ left: 16px;
+ }
+
+ .border.right,
+ .layout-border.layout-right {
+ right: 17px;
+ }
+}
+
+/* Legend, displayed inside regions */
+
+.legend,
+.layout-legend {
+ position: absolute;
+ margin: 5px 6px;
+ z-index: 1;
+}
+
+.legend[data-box="margin"],
+.layout-legend[data-box="margin"] {
+ color: #000000; /*var(--theme-highlight-blue);*/
+}
+
+@media (max-height: 250px) {
+ .legend,
+ .layout-legend {
+ margin: 2px 6px;
+ }
+}
+
+/* Editable fields */
+
+.editable,
+.layout-editable {
+ border: 1px dashed transparent;
+ -moz-user-select: text;
+}
+
+.editable:hover,
+.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 */
+
+.size > span,
+.layout-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,
+#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;
+}
projects / themes.git / blobdiff