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