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 }
   9
  10 #layout-container {
  11   /* The view will grow bigger as the window gets resized, until 400px */
  12   max-width: 400px;
  13   margin: 0px auto;
  14   padding: 0;
  15   /* "Contain" the absolutely positioned #layout-main element */
  16   position: relative;
  17 }
  18
  19 /* Header: contains the position and size of the element */
  20
  21 #layout-header {
  22   box-sizing: border-box;
  23   width: 100%;
  24   padding: 4px 14px;
  25   display: -moz-box;
  26   vertical-align: top;
  27 }
  28
  29 #layout-header:-moz-dir(rtl) {
  30   -moz-box-direction: reverse;
  31 }
  32
  33 #layout-header > span {
  34   display: -moz-box;
  35 }
  36
  37 #layout-element-size {
  38   -moz-box-flex: 1;
  39 }
  40
  41 #layout-element-size:-moz-dir(rtl) {
  42   -moz-box-pack: end;
  43 }
  44
  45 @media (max-height: 250px) {
  46   #layout-header {
  47     padding-top: 0;
  48     padding-bottom: 0;
  49     margin-top: 10px;
  50     margin-bottom: 8px;
  51   }
  52 }
  53
  54 /* Main: contains the box-model regions */
  55
  56 #layout-main {
  57   position: absolute;
  58   box-sizing: border-box;
  59   /* The regions are semi-transparent, so the white background is partly
  60      visible */
  61   background-color: #FF9F00;
  62   color: var(--theme-selection-color);
  63   /* Make sure there is some space between the window's edges and the regions */
  64   margin: 0 14px 10px 14px;
  65   width: calc(100% - 2 * 14px);
  66 }
  67
  68 .layout-margin,
  69 .layout-size {
  70 /*  color: var(--theme-highlight-blue); */
  71 }
  72
  73 /* Regions are 3 nested elements with wide borders and outlines */
  74
  75 #layout-content {
  76   height: 25px;
  77 }
  78
  79 #layout-margins,
  80 #layout-borders,
  81 #layout-padding {
  82   border-color: var(--theme-splitter-color);
  83   border-width: 25px;
  84   border-style: solid;
  85   outline: dotted 1px var(--theme-splitter-color);
  86 }
  87
  88 #layout-margins {
  89   /* This opacity applies to all of the regions, since they are nested */
  90   opacity: .8;
  91 }
  92
  93 /* Respond to window size change by changing the size of the regions */
  94
  95 @media (max-height: 250px) {
  96   #layout-content {
  97     height: 18px;
  98   }
  99
 100   #layout-margins,
 101   #layout-borders,
 102   #layout-padding {
 103     border-width: 18px;
 104   }
 105 }
 106
 107 /* Regions colors */
 108
 109 #layout-margins {
 110   border-color: #FFCF00;
 111 }
 112
 113 #layout-borders {
 114   border-color: #A09090;
 115 }
 116
 117 #layout-padding {
 118   border-color: #8050B0;
 119 }
 120
 121 #layout-content {
 122   background-color: #008484;
 123 }
 124 /*
 125 .theme-firebug #layout-main,
 126 .theme-firebug #layout-borders,
 127 .theme-firebug #layout-content {
 128   border-style: solid;
 129 }
 130
 131 .theme-firebug #layout-main,
 132 .theme-firebug #layout-header {
 133   font-family: var(--proportional-font-family);
 134 }
 135
 136 .theme-firebug #layout-main {
 137   color: var(--theme-body-color);
 138   font-size: var(--theme-toolbar-font-size);
 139 }
 140
 141 .theme-firebug #layout-header {
 142   font-size: var(--theme-toolbar-font-size);
 143 }
 144 */
 145 /* Editable region sizes are contained in absolutely positioned <p> */
 146
 147 #layout-main > p {
 148   position: absolute;
 149   pointer-events: none;
 150   margin: 0;
 151   text-align: center;
 152 }
 153
 154 #layout-main > p > span,
 155 #layout-main > p > input {
 156   vertical-align: middle;
 157   pointer-events: auto;
 158 }
 159
 160 /* Coordinates for the region sizes */
 161
 162 .layout-top,
 163 .layout-bottom {
 164   width: calc(100% - 2px);
 165   text-align: center;
 166 }
 167
 168 .layout-padding.layout-top {
 169   top: 55px;
 170 }
 171
 172 .layout-padding.layout-bottom {
 173   bottom: 57px;
 174 }
 175
 176 .layout-border.layout-top {
 177   top: 30px;
 178 }
 179
 180 .layout-border.layout-bottom {
 181   bottom: 31px;
 182 }
 183
 184 .layout-margin.layout-top {
 185   top: 5px;
 186 }
 187
 188 .layout-margin.layout-bottom {
 189   bottom: 6px;
 190 }
 191
 192 .layout-size,
 193 .layout-margin.layout-left,
 194 .layout-margin.layout-right,
 195 .layout-border.layout-left,
 196 .layout-border.layout-right,
 197 .layout-padding.layout-left,
 198 .layout-padding.layout-right {
 199   top: 22px;
 200   line-height: 132px;
 201 }
 202
 203 .layout-size {
 204   width: calc(100% - 2px);
 205 }
 206
 207 .layout-margin.layout-right,
 208 .layout-margin.layout-left,
 209 .layout-border.layout-left,
 210 .layout-border.layout-right,
 211 .layout-padding.layout-right,
 212 .layout-padding.layout-left {
 213   width: 25px;
 214 }
 215
 216 .layout-padding.layout-left {
 217   left: 52px;
 218 }
 219
 220 .layout-padding.layout-right {
 221   right: 51px;
 222 }
 223
 224 .layout-border.layout-left {
 225   left: 26px;
 226 }
 227
 228 .layout-border.layout-right {
 229   right: 26px;
 230 }
 231
 232 .layout-margin.layout-right {
 233   right: 0;
 234 }
 235
 236 .layout-margin.layout-left {
 237   left: 0;
 238 }
 239
 240 .layout-rotate.layout-left:not(.layout-editing) {
 241   transform: rotate(-90deg);
 242 }
 243
 244 .layout-rotate.layout-right:not(.layout-editing) {
 245   transform: rotate(90deg);
 246 }
 247
 248 /* Coordinates should be different when the window is small, because we make
 249    the regions smaller then */
 250
 251 @media (max-height: 250px) {
 252   .layout-padding.layout-top {
 253     top: 37px;
 254   }
 255
 256   .layout-padding.layout-bottom {
 257     bottom: 38px;
 258   }
 259
 260   .layout-border.layout-top {
 261     top: 19px;
 262   }
 263
 264   .layout-border.layout-bottom {
 265     bottom: 20px;
 266   }
 267
 268   .layout-margin.layout-top {
 269     top: 1px;
 270   }
 271
 272   .layout-margin.layout-bottom {
 273     bottom: 2px;
 274   }
 275
 276   .layout-size,
 277   .layout-margin.layout-left,
 278   .layout-margin.layout-right,
 279   .layout-border.layout-left,
 280   .layout-border.layout-right,
 281   .layout-padding.layout-left,
 282   .layout-padding.layout-right {
 283     line-height: 80px;
 284   }
 285
 286   .layout-margin.layout-right,
 287   .layout-margin.layout-left,
 288   .layout-border.layout-left,
 289   .layout-border.layout-right,
 290   .layout-padding.layout-right,
 291   .layout-padding.layout-left {
 292     width: 21px;
 293   }
 294
 295   .layout-padding.layout-left {
 296     left: 35px;
 297   }
 298
 299   .layout-padding.layout-right {
 300     right: 35px;
 301   }
 302
 303   .layout-border.layout-left {
 304     left: 16px;
 305   }
 306
 307   .layout-border.layout-right {
 308     right: 17px;
 309   }
 310 }
 311
 312 /* Legend, displayed inside regions */
 313
 314 .layout-legend {
 315   position: absolute;
 316   margin: 5px 6px;
 317   z-index: 1;
 318 }
 319
 320 .layout-legend[data-box="margin"] {
 321   color: #000000; /*var(--theme-highlight-blue);*/
 322 }
 323
 324 @media (max-height: 250px) {
 325   .layout-legend {
 326     margin: 2px 6px;
 327   }
 328 }
 329
 330 /* Editable fields */
 331
 332 .layout-editable {
 333   border: 1px dashed transparent;
 334   -moz-user-select: text;
 335 }
 336
 337 .layout-editable:hover {
 338   border-bottom-color: #E7ADE7;
 339 }
 340
 341 .styleinspector-propertyeditor {
 342   border: 1px solid #008484;
 343   padding: 0;
 344 }
 345
 346 /* Make sure the content size doesn't appear as editable like the other sizes */
 347
 348 .layout-size > span {
 349   cursor: default;
 350 }
 351
 352 /* Hide all values when the view is inactive */
 353
 354 #layout-container.inactive > #layout-header > #layout-element-position,
 355 #layout-container.inactive > #layout-header > #layout-element-size,
 356 #layout-container.inactive > #layout-main > p {
 357    visibility: hidden;
 358 }
 359
 360 #layout-position-group {
 361   display: flex;
 362   align-items: center;
 363 }
 364
 365 #layout-geometry-editor {
 366   visibility: hidden;
 367 }
 368
 369 #layout-geometry-editor::before {
 370   background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
 371 }