2012-05-21 15:12:37 +04:00
|
|
|
/* 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
|
2015-06-16 18:04:27 +03:00
|
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/ */
|
2012-03-12 17:39:56 +04:00
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-wrapper {
|
|
|
|
border-bottom-style: solid;
|
|
|
|
border-bottom-width: 1px;
|
|
|
|
border-color: var(--theme-splitter-color);
|
|
|
|
}
|
2016-07-22 21:24:19 +03:00
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-container {
|
2015-06-16 18:04:27 +03:00
|
|
|
/* The view will grow bigger as the window gets resized, until 400px */
|
|
|
|
max-width: 400px;
|
|
|
|
margin: 0px auto;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2016-07-19 11:30:13 +03:00
|
|
|
/* Header */
|
2015-06-16 18:04:27 +03:00
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-header,
|
|
|
|
#boxmodel-info {
|
2016-07-19 11:30:13 +03:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
padding: 4px 17px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#layout-geometry-editor {
|
2016-07-19 11:30:13 +03:00
|
|
|
visibility: hidden;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#layout-geometry-editor::before {
|
2016-07-19 11:30:13 +03:00
|
|
|
background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Main: contains the box-model regions */
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-main {
|
2016-07-19 11:30:13 +03:00
|
|
|
position: relative;
|
2015-06-16 18:04:27 +03:00
|
|
|
box-sizing: border-box;
|
2016-09-16 23:53:22 +03:00
|
|
|
/* The regions are semi-transparent, so the white background is partly
|
|
|
|
visible */
|
|
|
|
background-color: white;
|
|
|
|
color: var(--theme-selection-color);
|
2015-06-16 18:04:27 +03:00
|
|
|
/* Make sure there is some space between the window's edges and the regions */
|
2017-01-28 22:31:04 +03:00
|
|
|
margin: 0 14px 4px 14px;
|
2015-06-16 18:04:27 +03:00
|
|
|
width: calc(100% - 2 * 14px);
|
2014-12-05 00:11:00 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-margin,
|
|
|
|
.boxmodel-size {
|
2016-09-16 23:53:22 +03:00
|
|
|
color: var(--theme-highlight-blue);
|
|
|
|
}
|
|
|
|
|
2015-06-16 18:04:27 +03:00
|
|
|
/* Regions are 3 nested elements with wide borders and outlines */
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-content {
|
2016-09-16 23:53:22 +03:00
|
|
|
height: 18px;
|
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-margins,
|
|
|
|
#boxmodel-borders,
|
|
|
|
#boxmodel-padding {
|
2016-09-16 23:53:22 +03:00
|
|
|
border-color: hsla(210,100%,85%,0.2);
|
|
|
|
border-width: 18px;
|
2015-06-16 18:04:27 +03:00
|
|
|
border-style: solid;
|
2016-09-16 23:53:22 +03:00
|
|
|
outline: dotted 1px hsl(210,100%,85%);
|
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-margins {
|
2016-09-16 23:53:22 +03:00
|
|
|
/* This opacity applies to all of the regions, since they are nested */
|
|
|
|
opacity: .8;
|
2012-03-12 17:39:56 +04:00
|
|
|
}
|
|
|
|
|
2015-06-16 18:04:27 +03:00
|
|
|
/* Regions colors */
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-margins {
|
2016-09-16 23:53:22 +03:00
|
|
|
border-color: #edff64;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-borders {
|
2016-09-16 23:53:22 +03:00
|
|
|
border-color: #444444;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-padding {
|
2016-09-16 23:53:22 +03:00
|
|
|
border-color: #6a5acd;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-content {
|
2016-09-16 23:53:22 +03:00
|
|
|
background-color: #87ceeb;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
.theme-firebug #boxmodel-main,
|
|
|
|
.theme-firebug #boxmodel-borders,
|
|
|
|
.theme-firebug #boxmodel-content {
|
2016-04-06 18:32:18 +03:00
|
|
|
border-style: solid;
|
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
.theme-firebug #boxmodel-main,
|
|
|
|
.theme-firebug #boxmodel-header {
|
2016-04-06 18:32:18 +03:00
|
|
|
font-family: var(--proportional-font-family);
|
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
.theme-firebug #boxmodel-main {
|
2016-04-06 18:32:18 +03:00
|
|
|
color: var(--theme-body-color);
|
|
|
|
font-size: var(--theme-toolbar-font-size);
|
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
.theme-firebug #boxmodel-header {
|
2016-04-06 18:32:18 +03:00
|
|
|
font-size: var(--theme-toolbar-font-size);
|
|
|
|
}
|
|
|
|
|
2015-06-16 18:04:27 +03:00
|
|
|
/* Editable region sizes are contained in absolutely positioned <p> */
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-main > p {
|
2015-06-16 18:04:27 +03:00
|
|
|
position: absolute;
|
|
|
|
pointer-events: none;
|
|
|
|
margin: 0;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-main > p > span,
|
|
|
|
#boxmodel-main > p > input {
|
2015-06-16 18:04:27 +03:00
|
|
|
vertical-align: middle;
|
|
|
|
pointer-events: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Coordinates for the region sizes */
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-top,
|
|
|
|
.boxmodel-bottom {
|
2016-09-16 23:53:22 +03:00
|
|
|
width: calc(100% - 2px);
|
2015-06-16 18:04:27 +03:00
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-padding.boxmodel-top {
|
2016-09-16 23:53:22 +03:00
|
|
|
top: 37px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-padding.boxmodel-bottom {
|
2016-09-16 23:53:22 +03:00
|
|
|
bottom: 38px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-border.boxmodel-top {
|
2016-09-16 23:53:22 +03:00
|
|
|
top: 19px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-border.boxmodel-bottom {
|
2016-09-16 23:53:22 +03:00
|
|
|
bottom: 20px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-margin.boxmodel-top {
|
2016-09-16 23:53:22 +03:00
|
|
|
top: 1px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-margin.boxmodel-bottom {
|
2016-09-16 23:53:22 +03:00
|
|
|
bottom: 2px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-size,
|
|
|
|
.boxmodel-margin.boxmodel-left,
|
|
|
|
.boxmodel-margin.boxmodel-right,
|
|
|
|
.boxmodel-border.boxmodel-left,
|
|
|
|
.boxmodel-border.boxmodel-right,
|
|
|
|
.boxmodel-padding.boxmodel-left,
|
|
|
|
.boxmodel-padding.boxmodel-right {
|
2016-09-16 23:53:22 +03:00
|
|
|
top: 22px;
|
2016-07-29 22:05:54 +03:00
|
|
|
line-height: 80px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-size {
|
2016-09-16 23:53:22 +03:00
|
|
|
width: calc(100% - 2px);
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-margin.boxmodel-right,
|
|
|
|
.boxmodel-margin.boxmodel-left,
|
|
|
|
.boxmodel-border.boxmodel-left,
|
|
|
|
.boxmodel-border.boxmodel-right,
|
|
|
|
.boxmodel-padding.boxmodel-right,
|
|
|
|
.boxmodel-padding.boxmodel-left {
|
2016-09-16 23:53:22 +03:00
|
|
|
width: 21px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-padding.boxmodel-left {
|
2016-09-16 23:53:22 +03:00
|
|
|
left: 35px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-padding.boxmodel-right {
|
2016-09-16 23:53:22 +03:00
|
|
|
right: 35px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-border.boxmodel-left {
|
2016-09-16 23:53:22 +03:00
|
|
|
left: 16px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-border.boxmodel-right {
|
2016-09-16 23:53:22 +03:00
|
|
|
right: 17px;
|
2015-06-16 18:04:27 +03:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-margin.boxmodel-right {
|
2015-06-16 18:04:27 +03:00
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-margin.boxmodel-left {
|
2015-06-16 18:04:27 +03:00
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
|
2015-06-16 18:04:27 +03:00
|
|
|
transform: rotate(-90deg);
|
2012-03-12 17:39:56 +04:00
|
|
|
}
|
2014-04-04 04:37:26 +04:00
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
|
2015-06-16 18:04:27 +03:00
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
|
2016-07-19 11:30:13 +03:00
|
|
|
/* Legend: displayed inside regions */
|
2015-06-16 18:04:27 +03:00
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-legend {
|
2015-06-16 18:04:27 +03:00
|
|
|
position: absolute;
|
2016-09-16 23:53:22 +03:00
|
|
|
margin: 2px 6px;
|
2015-06-16 18:04:27 +03:00
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-legend[data-box="margin"] {
|
2016-09-16 23:53:22 +03:00
|
|
|
color: var(--theme-highlight-blue);
|
|
|
|
}
|
|
|
|
|
2015-06-16 18:04:27 +03:00
|
|
|
/* Editable fields */
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-editable {
|
2015-04-14 09:58:00 +03:00
|
|
|
border: 1px dashed transparent;
|
2015-06-16 18:04:27 +03:00
|
|
|
-moz-user-select: text;
|
2014-04-04 04:37:26 +04:00
|
|
|
}
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-editable:hover {
|
2015-06-16 18:04:27 +03:00
|
|
|
border-bottom-color: hsl(0, 0%, 50%);
|
2014-04-04 04:37:26 +04:00
|
|
|
}
|
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
.styleinspector-propertyeditor {
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2015-06-16 18:04:27 +03:00
|
|
|
/* Make sure the content size doesn't appear as editable like the other sizes */
|
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
.boxmodel-size > span {
|
2015-06-16 18:04:27 +03:00
|
|
|
cursor: default;
|
|
|
|
}
|
2015-06-16 18:10:26 +03:00
|
|
|
|
2016-09-13 23:35:16 +03:00
|
|
|
/* Box Model Info: contains the position and size of the element */
|
2015-06-16 18:10:26 +03:00
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-element-size {
|
2016-07-19 11:30:13 +03:00
|
|
|
flex: 1;
|
2015-06-16 18:10:26 +03:00
|
|
|
}
|
2016-03-17 17:59:03 +03:00
|
|
|
|
2017-01-28 22:31:04 +03:00
|
|
|
#boxmodel-position-group {
|
2016-03-17 17:59:03 +03:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|