X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Flayout.css;fp=LCARStrek%2Fdevtools%2Flayout.css;h=ab95a05d95b2698c0ff5c41ac2062e1eb178d1bb;hp=0000000000000000000000000000000000000000;hb=dc9d5d64a3f915cb832f43050545b432f33504f7;hpb=ecfc58b0361c617fa298d4b1bb69ea2484d37de2

diff --git a/LCARStrek/devtools/layout.css b/LCARStrek/devtools/layout.css
new file mode 100644
index 00000000..ab95a05d
--- /dev/null
+++ b/LCARStrek/devtools/layout.css
@@ -0,0 +1,463 @@
+/* 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;
+}