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