LCARStrek/devtools/layout.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/ */
   4
   5 #sidebar-panel-layoutview {
   6   display: block;
   7   overflow: auto;
   8   height: 100%;
   9 }
  10
  11 #layout-wrapper {
  12   /* The sidebar-panel is not focusable, this wrapper will catch click events in
  13      all the empty area around the layout-container */
  14   height: 100%;
  15 }
  16
  17 #layout-container {
  18   /* The view will grow bigger as the window gets resized, until 400px */
  19   max-width: 400px;
  20   margin: 0px auto;
  21   padding: 0;
  22   /* "Contain" the absolutely positioned #layout-main element */
  23   position: relative;
  24 }
  25
  26 /* Header: contains the position and size of the element */
  27
  28 #layout-header {
  29   box-sizing: border-box;
  30   width: 100%;
  31   padding: 4px 14px;
  32   display: -moz-box;
  33   vertical-align: top;
  34 }
  35
  36 #layout-header:dir(rtl) {
  37   -moz-box-direction: reverse;
  38 }
  39
  40 #layout-header > span {
  41   display: -moz-box;
  42 }
  43
  44 #layout-element-size {
  45   -moz-box-flex: 1;
  46 }
  47
  48 #layout-element-size:dir(rtl) {
  49   -moz-box-pack: end;
  50 }
  51
  52 @media (max-height: 250px) {
  53   #layout-header {
  54     padding-top: 0;
  55     padding-bottom: 0;
  56     margin-top: 10px;
  57     margin-bottom: 8px;
  58   }
  59 }
  60
  61 /* Main: contains the box-model regions */
  62
  63 #layout-main {
  64   position: absolute;
  65   box-sizing: border-box;
  66   /* The regions are semi-transparent, so the white background is partly
  67      visible */
  68   background-color: #FF9F00;
  69   color: var(--theme-selection-color);
  70   /* Make sure there is some space between the window's edges and the regions */
  71   margin: 0 14px 4px 14px;
  72   width: calc(100% - 2 * 14px);
  73 }
  74
  75 .layout-margin,
  76 .layout-size {
  77 /*  color: var(--theme-highlight-blue); */
  78 }
  79
  80 /* Regions are 3 nested elements with wide borders and outlines */
  81
  82 #layout-content {
  83   height: 18px;
  84 }
  85
  86 #layout-margins,
  87 #layout-borders,
  88 #layout-padding {
  89   border-color: var(--theme-splitter-color);
  90   border-width: 18px;
  91   border-style: solid;
  92   outline: dotted 1px var(--theme-splitter-color);
  93 }
  94
  95 #layout-margins {
  96   /* This opacity applies to all of the regions, since they are nested */
  97   opacity: .8;
  98 }
  99
 100 /* Regions colors */
 101
 102 #layout-margins {
 103   border-color: #FFCF00;
 104 }
 105
 106 #layout-borders {
 107   border-color: #A09090;
 108 }
 109
 110 #layout-padding {
 111   border-color: #8050B0;
 112 }
 113
 114 #layout-content {
 115   background-color: #008484;
 116 }
 117
 118 /* Editable region sizes are contained in absolutely positioned <p> */
 119
 120 #layout-main > p {
 121   position: absolute;
 122   pointer-events: none;
 123   margin: 0;
 124   text-align: center;
 125 }
 126
 127 #layout-main > p > span,
 128 #layout-main > p > input {
 129   vertical-align: middle;
 130   pointer-events: auto;
 131 }
 132
 133 /* Coordinates for the region sizes */
 134
 135 .layout-top,
 136 .layout-bottom {
 137   width: calc(100% - 2px);
 138   text-align: center;
 139 }
 140
 141 .layout-padding.layout-top {
 142   top: 37px;
 143 }
 144
 145 .layout-padding.layout-bottom {
 146   bottom: 38px;
 147 }
 148
 149 .layout-border.layout-top {
 150   top: 19px;
 151 }
 152
 153 .layout-border.layout-bottom {
 154   bottom: 20px;
 155 }
 156
 157 .layout-margin.layout-top {
 158   top: 1px;
 159 }
 160
 161 .layout-margin.layout-bottom {
 162   bottom: 2px;
 163 }
 164
 165 .layout-size,
 166 .layout-margin.layout-left,
 167 .layout-margin.layout-right,
 168 .layout-border.layout-left,
 169 .layout-border.layout-right,
 170 .layout-padding.layout-left,
 171 .layout-padding.layout-right {
 172   top: 22px;
 173   line-height: 88px;
 174 }
 175
 176 .layout-size {
 177   width: calc(100% - 2px);
 178 }
 179
 180 .layout-margin.layout-right,
 181 .layout-margin.layout-left,
 182 .layout-border.layout-left,
 183 .layout-border.layout-right,
 184 .layout-padding.layout-right,
 185 .layout-padding.layout-left {
 186   width: 21px;
 187 }
 188
 189 .layout-padding.layout-left {
 190   left: 35px;
 191 }
 192
 193 .layout-padding.layout-right {
 194   right: 35px;
 195 }
 196
 197 .layout-border.layout-left {
 198   left: 16px;
 199 }
 200
 201 .layout-border.layout-right {
 202   right: 17px;
 203 }
 204
 205 .layout-margin.layout-right {
 206   right: 0;
 207 }
 208
 209 .layout-margin.layout-left {
 210   left: 0;
 211 }
 212
 213 .layout-rotate.layout-left:not(.layout-editing) {
 214   transform: rotate(-90deg);
 215 }
 216
 217 .layout-rotate.layout-right:not(.layout-editing) {
 218   transform: rotate(90deg);
 219 }
 220
 221 /* Legend, displayed inside regions */
 222
 223 .layout-legend {
 224   position: absolute;
 225   margin: 2px 6px;
 226   z-index: 1;
 227 }
 228
 229 .layout-legend[data-box="margin"] {
 230   color: #000000; /*var(--theme-highlight-blue);*/
 231 }
 232
 233 /* Editable fields */
 234
 235 .layout-editable {
 236   border: 1px dashed transparent;
 237   -moz-user-select: text;
 238 }
 239
 240 .layout-editable:hover {
 241   border-bottom-color: #E7ADE7;
 242 }
 243
 244 .styleinspector-propertyeditor {
 245   border: 1px solid #008484;
 246   padding: 0;
 247 }
 248
 249 /* Make sure the content size doesn't appear as editable like the other sizes */
 250
 251 .layout-size > span {
 252   cursor: default;
 253 }
 254
 255 /* Hide all values when the view is inactive */
 256
 257 #layout-container.inactive > #layout-header > #layout-element-position,
 258 #layout-container.inactive > #layout-header > #layout-element-size,
 259 #layout-container.inactive > #layout-main > p {
 260    visibility: hidden;
 261 }
 262
 263 #layout-position-group {
 264   display: flex;
 265   align-items: center;
 266 }
 267
 268 #layout-geometry-editor {
 269   visibility: hidden;
 270 }
 271
 272 #layout-geometry-editor::before {
 273   background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
 274 }