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