gecko/browser/devtools/layoutview/view.css

264 lines
3.1 KiB
CSS

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
body {
max-width: 320px;
position: relative;
margin: 0px auto;
padding: 0;
}
#header {
box-sizing: border-box;
width: 100%;
padding: 4px 13px;
display: -moz-box;
vertical-align: top;
}
#header:-moz-dir(rtl) {
-moz-box-direction: reverse;
}
#header > span {
display: -moz-box;
}
#element-size {
-moz-box-flex: 1;
}
#element-size:-moz-dir(rtl) {
-moz-box-pack: end;
}
#main {
margin: 0 14px 10px 14px;
box-sizing: border-box;
width: calc(100% - 2 * 14px);
position: absolute;
border-width: 1px;
}
#content,
#borders {
border-width: 1px;
}
#content {
height: 25px;
}
#margins,
#padding {
border-style: solid;
border-width: 25px;
}
#borders {
padding: 25px;
}
#main > p {
position: absolute;
pointer-events: none;
}
#main > p {
margin: 0;
text-align: center;
}
#main > p > span {
vertical-align: middle;
pointer-events: auto;
}
.size > span {
cursor: default;
}
.editable {
-moz-user-select: text;
}
.top,
.bottom {
width: calc(100% - 2px);
text-align: center;
}
.padding.top {
top: 55px;
}
.padding.bottom {
bottom: 57px;
}
.border.top {
top: 30px;
}
.border.bottom {
bottom: 31px;
}
.margin.top {
top: 5px;
}
.margin.bottom {
bottom: 6px;
}
.size,
.margin.left,
.margin.right,
.border.left,
.border.right,
.padding.left,
.padding.right {
top: 22px;
line-height: 132px;
}
.size {
width: calc(100% - 2px);
}
.margin.right,
.margin.left,
.border.left,
.border.right,
.padding.right,
.padding.left {
width: 25px;
}
.padding.left {
left: 52px;
}
.padding.right {
right: 51px;
}
.border.left {
left: 26px;
}
.border.right {
right: 26px;
}
.margin.right {
right: 0;
}
.margin.left {
left: 0;
}
.rotate.left:not(.editing) {
transform: rotate(-90deg);
}
.rotate.right:not(.editing) {
transform: rotate(90deg);
}
.tooltip {
position: absolute;
bottom: 0;
right: 2px;
pointer-events: none;
}
body.dim > #header > #element-position,
body.dim > #main > p,
body.dim > #main > .tooltip {
visibility: hidden;
}
@media (max-height: 228px) {
#header {
padding-top: 0;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 8px;
}
#margins,
#padding {
border-width: 21px;
}
#borders {
padding: 21px;
}
#content {
height: 21px;
}
.padding.top {
top: 46px;
}
.padding.bottom {
bottom: 46px;
}
.border.top {
top: 25px;
}
.border.bottom {
bottom: 25px;
}
.margin.top {
top: 4px;
}
.margin.bottom {
bottom: 4px;
}
.size,
.margin.left,
.margin.right,
.border.left,
.border.right,
.padding.left,
.padding.right {
line-height: 106px;
}
.margin.right,
.margin.left,
.border.left,
.border.right,
.padding.right,
.padding.left {
width: 21px;
}
.padding.left {
left: 43px;
}
.padding.right {
right: 43px;
}
.border.left {
left: 22px;
}
.border.right {
right: 22px;
}
}