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 #layout-geometry-editor {
  62   visibility: hidden;
  63 }
  64
  65 #layout-geometry-editor::before {
  66   background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
  67 }
  68
  69 /* Main: contains the box-model regions */
  70
  71 #layout-main {
  72   position: relative;
  73   box-sizing: border-box;
  74   /* The regions are semi-transparent, so the white background is partly
  75      visible */
  76   background-color: #FF9F00;
  77   color: var(--theme-selection-color);
  78   /* Make sure there is some space between the window's edges and the regions */
  79   margin: 0 14px 4px 14px;
  80   width: calc(100% - 2 * 14px);
  81 }
  82
  83 .layout-margin,
  84 .layout-size {
  85 /*  color: var(--theme-highlight-blue); */
  86 }
  87
  88 /* Regions are 3 nested elements with wide borders and outlines */
  89
  90 #layout-content {
  91   height: 18px;
  92 }
  93
  94 #layout-margins,
  95 #layout-borders,
  96 #layout-padding {
  97   border-color: var(--theme-splitter-color);
  98   border-width: 18px;
  99   border-style: solid;
 100   outline: dotted 1px var(--theme-splitter-color);
 101 }
 102
 103 #layout-margins {
 104   /* This opacity applies to all of the regions, since they are nested */
 105   opacity: .8;
 106 }
 107
 108 /* Regions colors */
 109
 110 #layout-margins {
 111   border-color: #FFCF00;
 112 }
 113
 114 #layout-borders {
 115   border-color: #A09090;
 116 }
 117
 118 #layout-padding {
 119   border-color: #8050B0;
 120 }
 121
 122 #layout-content {
 123   background-color: #008484;
 124 }
 125
 126 /* Editable region sizes are contained in absolutely positioned <p> */
 127
 128 #layout-main > p {
 129   position: absolute;
 130   pointer-events: none;
 131   margin: 0;
 132   text-align: center;
 133 }
 134
 135 #layout-main > p > span,
 136 #layout-main > p > input {
 137   vertical-align: middle;
 138   pointer-events: auto;
 139 }
 140
 141 /* Coordinates for the region sizes */
 142
 143 .layout-top,
 144 .layout-bottom {
 145   width: calc(100% - 2px);
 146   text-align: center;
 147 }
 148
 149 .layout-padding.layout-top {
 150   top: 37px;
 151 }
 152
 153 .layout-padding.layout-bottom {
 154   bottom: 38px;
 155 }
 156
 157 .layout-border.layout-top {
 158   top: 19px;
 159 }
 160
 161 .layout-border.layout-bottom {
 162   bottom: 20px;
 163 }
 164
 165 .layout-margin.layout-top {
 166   top: 1px;
 167 }
 168
 169 .layout-margin.layout-bottom {
 170   bottom: 2px;
 171 }
 172
 173 .layout-size,
 174 .layout-margin.layout-left,
 175 .layout-margin.layout-right,
 176 .layout-border.layout-left,
 177 .layout-border.layout-right,
 178 .layout-padding.layout-left,
 179 .layout-padding.layout-right {
 180   top: 22px;
 181   line-height: 88px;
 182 }
 183
 184 .layout-size {
 185   width: calc(100% - 2px);
 186 }
 187
 188 .layout-margin.layout-right,
 189 .layout-margin.layout-left,
 190 .layout-border.layout-left,
 191 .layout-border.layout-right,
 192 .layout-padding.layout-right,
 193 .layout-padding.layout-left {
 194   width: 21px;
 195 }
 196
 197 .layout-padding.layout-left {
 198   left: 35px;
 199 }
 200
 201 .layout-padding.layout-right {
 202   right: 35px;
 203 }
 204
 205 .layout-border.layout-left {
 206   left: 16px;
 207 }
 208
 209 .layout-border.layout-right {
 210   right: 17px;
 211 }
 212
 213 .layout-margin.layout-right {
 214   right: 0;
 215 }
 216
 217 .layout-margin.layout-left {
 218   left: 0;
 219 }
 220
 221 .layout-rotate.layout-left:not(.layout-editing) {
 222   transform: rotate(-90deg);
 223 }
 224
 225 .layout-rotate.layout-right:not(.layout-editing) {
 226   transform: rotate(90deg);
 227 }
 228
 229 /* Legend, displayed inside regions */
 230
 231 .layout-legend {
 232   position: absolute;
 233   margin: 2px 6px;
 234   z-index: 1;
 235 }
 236
 237 .layout-legend[data-box="margin"] {
 238   color: #000000; /*var(--theme-highlight-blue);*/
 239 }
 240
 241 /* Editable fields */
 242
 243 .layout-editable {
 244   border: 1px dashed transparent;
 245   -moz-user-select: text;
 246 }
 247
 248 .layout-editable:hover {
 249   border-bottom-color: #E7ADE7;
 250 }
 251
 252 .styleinspector-propertyeditor {
 253   border: 1px solid #008484;
 254   padding: 0;
 255 }
 256
 257 /* Make sure the content size doesn't appear as editable like the other sizes */
 258
 259 .layout-size > span {
 260   cursor: default;
 261 }
 262
 263 /* Layout info: contains the position and size of the element */
 264
 265 #layout-element-size {
 266   flex: 1;
 267 }
 268
 269 #layout-position-group {
 270   display: flex;
 271   align-items: center;
 272 }