tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

boxmodel.css (8858B)

      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 :root {
      6  --position-text-color: light-dark(var(--grey-90), var(--grey-30));
      7  --position-border-color: light-dark(var(--grey-50), var(--grey-40));
      8 
      9  --margin-box-color: light-dark(#fdffdf, #73764a);
     10  --margin-box-text-color: light-dark(var(--grey-90), var(--grey-10));
     11  --margin-box-border-color: light-dark(#d8e60a, #bdca00);
     12 
     13  --border-box-color: light-dark(var(--grey-50), var(--grey-70));
     14  --border-box-text-color: light-dark(var(--theme-selection-color), var(--grey-10));
     15 
     16  --padding-box-color: light-dark(#e3dcff, #6657a6);
     17  --padding-box-text-color: light-dark(var(--grey-90), var(--grey-10));
     18 
     19  --content-box-color: light-dark(#cff0fb, #407aa4);
     20  --content-box-border-color: light-dark(#54a9ff, #00b8ff);
     21 
     22  --box-border-width: 1px;
     23 
     24  &[forced-colors-active] {
     25    --margin-box-color: Canvas;
     26 
     27    --border-box-color: CanvasText;
     28    --border-box-text-color: Canvas;
     29 
     30    --padding-box-color: Canvas;
     31 
     32    --box-border-width: 2px;
     33  }
     34 }
     35 
     36 .boxmodel-container {
     37  overflow: auto;
     38  padding-bottom: 4px;
     39  max-width: 600px;
     40  margin: 0 auto;
     41 }
     42 
     43 /* Header */
     44 
     45 .boxmodel-header,
     46 .boxmodel-info {
     47  display: flex;
     48  align-items: center;
     49  padding: 4px 19px;
     50 }
     51 
     52 .layout-geometry-editor::before {
     53  background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
     54 }
     55 
     56 /* Main: contains the box-model regions */
     57 
     58 .boxmodel-main {
     59  position: relative;
     60  /* Make sure there is some space between the window's edges and the regions */
     61  margin: 14px auto;
     62  width: calc(100% - 2 * 14px);
     63  min-width: 240px;
     64  /* The view will grow bigger as the window gets resized, until 400px */
     65  max-width: 400px;
     66 }
     67 
     68 .boxmodel-box {
     69  margin: 25px;
     70 }
     71 
     72 .boxmodel-size {
     73  color: var(--grey-90);
     74 }
     75 
     76 .boxmodel-position,
     77 .boxmodel-margin,
     78 .boxmodel-padding {
     79  color: var(--grey-50);
     80 }
     81 
     82 .theme-dark .boxmodel-margin,
     83 .theme-dark .boxmodel-border,
     84 .theme-dark .boxmodel-padding,
     85 .theme-dark .boxmodel-size {
     86  color: var(--grey-10);
     87 }
     88 
     89 .theme-dark .boxmodel-position {
     90  color: var(--grey-30);
     91 }
     92 
     93 /* Regions are 3 nested elements with wide borders and outlines */
     94 
     95 .boxmodel-contents {
     96  height: 18px;
     97  outline: dashed var(--box-border-width) var(--content-box-border-color);
     98 }
     99 
    100 .boxmodel-margins {
    101  border-width: 22px;
    102  border-style: solid;
    103  outline: dashed var(--box-border-width) var(--margin-box-border-color);
    104 }
    105 
    106 .boxmodel-borders {
    107  border-width: 5px;
    108  border-style: solid;
    109 }
    110 
    111 .boxmodel-paddings {
    112  border-width: 27px;
    113  border-style: solid;
    114 }
    115 
    116 /* Regions colors */
    117 
    118 .boxmodel-margins {
    119  border-color: var(--margin-box-color);
    120 }
    121 
    122 .boxmodel-borders {
    123  border-color: var(--border-box-color);
    124 }
    125 
    126 .boxmodel-paddings {
    127  border-color: var(--padding-box-color);
    128 }
    129 
    130 .boxmodel-contents {
    131  background-color: var(--content-box-color);
    132 }
    133 
    134 /* Editable region sizes are contained in absolutely positioned <p> */
    135 
    136 .boxmodel-main > p,
    137 .boxmodel-size {
    138  position: absolute;
    139  pointer-events: none;
    140  margin: 0;
    141  text-align: center;
    142  direction: ltr;
    143 }
    144 
    145 .boxmodel-main > p > span,
    146 .boxmodel-main > p > input,
    147 .boxmodel-content,
    148 .boxmodel-size > span {
    149  vertical-align: middle;
    150  pointer-events: auto;
    151 }
    152 
    153 /* Coordinates for the region sizes */
    154 
    155 .boxmodel-top,
    156 .boxmodel-bottom {
    157  width: calc(100% - 2px);
    158  text-align: center;
    159  z-index: 1; /* workaround for bug 1559706 */
    160 }
    161 
    162 .boxmodel-padding.boxmodel-top {
    163  top: 34px;
    164 }
    165 
    166 .boxmodel-padding.boxmodel-bottom {
    167  bottom: 35px;
    168 }
    169 
    170 .boxmodel-border.boxmodel-top {
    171  top: 17px;
    172 }
    173 
    174 .boxmodel-border.boxmodel-bottom {
    175  bottom: 17px;
    176 }
    177 
    178 .boxmodel-margin.boxmodel-top {
    179  top: 0;
    180 }
    181 
    182 .boxmodel-margin.boxmodel-bottom {
    183  bottom: 1px;
    184 }
    185 
    186 .boxmodel-size,
    187 .boxmodel-position.boxmodel-left,
    188 .boxmodel-position.boxmodel-right,
    189 .boxmodel-margin.boxmodel-left,
    190 .boxmodel-margin.boxmodel-right,
    191 .boxmodel-border.boxmodel-left,
    192 .boxmodel-border.boxmodel-right,
    193 .boxmodel-padding.boxmodel-left,
    194 .boxmodel-padding.boxmodel-right {
    195  top: 22px;
    196  line-height: 80px;
    197  z-index: 1; /* workaround for bug 1559706 */
    198 }
    199 
    200 .boxmodel-size {
    201  width: calc(100% - 2px);
    202 }
    203 
    204 .boxmodel-position.boxmodel-top,
    205 .boxmodel-position.boxmodel-bottom,
    206 .boxmodel-position.boxmodel-left,
    207 .boxmodel-position.boxmodel-right,
    208 .boxmodel-margin.boxmodel-right,
    209 .boxmodel-margin.boxmodel-left,
    210 .boxmodel-border.boxmodel-right,
    211 .boxmodel-border.boxmodel-left,
    212 .boxmodel-padding.boxmodel-right,
    213 .boxmodel-padding.boxmodel-left {
    214  width: 21px;
    215 }
    216 
    217 .boxmodel-padding.boxmodel-left {
    218  left: 56px;
    219 }
    220 
    221 .boxmodel-padding.boxmodel-right {
    222  right: 56px;
    223 }
    224 
    225 .boxmodel-border.boxmodel-left {
    226  left: 39px;
    227 }
    228 
    229 .boxmodel-border.boxmodel-right {
    230  right: 39px;
    231 }
    232 
    233 .boxmodel-margin.boxmodel-right {
    234  right: 24px;
    235 }
    236 
    237 .boxmodel-margin.boxmodel-left {
    238  left: 24px;
    239 }
    240 
    241 .boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
    242  transform: rotate(-90deg);
    243 }
    244 
    245 .boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
    246  transform: rotate(90deg);
    247 }
    248 
    249 .boxmodel-rotate.boxmodel-left.boxmodel-position:not(.boxmodel-editing) {
    250  border-top: none;
    251  border-right: 1px solid var(--theme-highlight-purple);
    252  width: auto;
    253  height: 30px;
    254 }
    255 
    256 .boxmodel-size > p {
    257  display: inline-block;
    258  margin: auto;
    259  line-height: 0;
    260 }
    261 
    262 .boxmodel-rotate.boxmodel-right.boxmodel-position:not(.boxmodel-editing) {
    263  border-top: none;
    264  border-left: 1px solid var(--theme-highlight-purple);
    265  width: auto;
    266  height: 30px;
    267 }
    268 
    269 /* Box Model Positioning: contains top, right, bottom, left */
    270 
    271 .boxmodel-position.boxmodel-top,
    272 .boxmodel-position.boxmodel-bottom {
    273  border-left: 1px solid var(--position-border-color);
    274  left: calc(50% - 2px);
    275  padding-left: 1px;
    276 }
    277 
    278 .boxmodel-position.boxmodel-right,
    279 .boxmodel-position.boxmodel-left {
    280  border-top: 1px solid var(--position-border-color);
    281  line-height: 15px;
    282  top: calc(50% - 1px);
    283  width: 30px;
    284 }
    285 
    286 .boxmodel-position.boxmodel-top {
    287  top: -18px;
    288 }
    289 
    290 .boxmodel-position.boxmodel-right {
    291  right: -9px;
    292 }
    293 
    294 .boxmodel-position.boxmodel-bottom {
    295  bottom: -18px;
    296 }
    297 
    298 .boxmodel-position.boxmodel-left {
    299  left: -9px;
    300 }
    301 
    302 /* Legend: displayed inside regions */
    303 
    304 .boxmodel-legend {
    305  position: absolute;
    306  z-index: 1;
    307  cursor: default;
    308 }
    309 
    310 .boxmodel-legend[data-box="margin"] {
    311  margin-left: 9px;
    312  margin-top: 4px;
    313  color: var(--margin-box-text-color);
    314 }
    315 
    316 .boxmodel-legend[data-box="position"] {
    317  color: var(--position-text-color);
    318  margin: -18px 13px;
    319 }
    320 
    321 .boxmodel-legend[data-box="padding"] {
    322  margin-top: 12px;
    323  margin-left: 12px;
    324  color: var(--padding-box-text-color);
    325 }
    326 
    327 .boxmodel-legend[data-box="border"] {
    328  background-color: var(--border-box-color);
    329  color: var(--border-box-text-color);
    330  height: 15px;
    331  padding-top: 1px;
    332  padding-left: 4px;
    333  padding-right: 4px;
    334  border-radius: 3px;
    335  margin: 0 0;
    336 }
    337 
    338 /* Editable fields */
    339 
    340 .boxmodel-editable {
    341  position: relative;
    342  border: 1px dashed transparent;
    343  user-select: none;
    344  white-space: nowrap;
    345  cursor: pointer;
    346 }
    347 
    348 .boxmodel-editable[data-box="border"] {
    349  background-color: var(--border-box-color);
    350  color: var(--border-box-text-color);
    351  border-radius: 3px;
    352  padding: 0 2px;
    353 }
    354 
    355 .boxmodel-editable:hover {
    356  border-bottom-color: hsl(0, 0%, 50%);
    357 }
    358 
    359 .boxmodel-editable:active {
    360  border: 1px solid var(--blue-50);
    361  outline: none;
    362 }
    363 
    364 .boxmodel-editable[data-box="margin"]:hover {
    365  background-color: var(--margin-box-border-color);
    366 }
    367 
    368 .boxmodel-editable[data-box="padding"]:hover {
    369  background-color: #c78fc7b3;
    370 }
    371 
    372 .boxmodel-editable[data-box="border"]:hover {
    373  background-color: #545454;
    374 }
    375 
    376 .boxmodel-editable[data-box="content"]:hover {
    377  background-color: var(--content-box-border-color);
    378 }
    379 
    380 .boxmodel-editable[data-box]:hover {
    381  border-radius: 3px;
    382 }
    383 
    384 :root[forced-colors-active] .boxmodel-editable[data-box] {
    385  background-color: ButtonFace;
    386  color: ButtonText;
    387  border-style: solid;
    388  border-color: ButtonText;
    389 
    390  &:hover:not(:active) {
    391    background-color: SelectedItem;
    392    color: SelectedItemText;
    393  }
    394 }
    395 
    396 .boxmodel-size > span {
    397  cursor: default;
    398 }
    399 
    400 /* Box Model Info: contains the position and size of the element */
    401 
    402 .boxmodel-element-size {
    403  flex: 1;
    404  direction: ltr;
    405  text-align: match-parent;
    406 }
    407 
    408 .boxmodel-position-group {
    409  display: flex;
    410  align-items: center;
    411 }
    412 
    413 /* Tag displayed next to DOM Node previews (used to display reference elements) */
    414 
    415 .boxmodel-container .reference-element {
    416  margin-inline-start: 14px;
    417  margin-block-start: 4px;
    418  display: block;
    419 }
    420 
    421 .boxmodel-container .reference-element-type {
    422  background: var(--theme-highlight-purple);
    423  color: light-dark(white, black);
    424  padding: 1px 2px;
    425  border-radius: 2px;
    426  font-size: 9px;
    427  margin-inline-end: 5px;
    428 }
    429 
    430 /* Box Model Main - Offset Parent */
    431 
    432 .boxmodel-offset-parent {
    433  position: absolute;
    434  top: -20px;
    435  right: -10px;
    436  color: var(--theme-highlight-purple);
    437 }