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