diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools/layoutview.css')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/devtools/layoutview.css | 317 |
1 files changed, 298 insertions, 19 deletions
diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css index 8027a4c..642e89c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/layoutview.css +++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css @@ -1,16 +1,67 @@ /* 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/. */ + * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ .theme-sidebar { box-sizing: border-box; } +body { + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; + margin: 0px auto; + padding: 0; + /* "Contain" the absolutely positioned #main element */ + position: relative; +} + +/* Header: contains the position and size of the element */ + +#header { + box-sizing: border-box; + width: 100%; + padding: 4px 14px; + 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; +} + +@media (max-height: 228px) { + #header { + padding-top: 0; + padding-bottom: 0; + margin-top: 10px; + margin-bottom: 8px; + } +} + +/* Main: contains the box-model regions */ + #main { + position: absolute; + box-sizing: border-box; + /* The regions are semi-transparent, so the white background is partly + visible */ background-color: white; - border-color: hsla(210,100%,85%,0.7); - border-style: dotted; color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 0 14px 10px 14px; + width: calc(100% - 2 * 14px); } .margin, @@ -18,43 +69,271 @@ color: var(--theme-highlight-blue); } +/* Regions are 3 nested elements with wide borders and outlines */ + #content { - background-color: #87ceeb; - border-color: hsl(210,100%,85%); - border-style: dotted; + height: 25px; } -#padding, -#margins { +#margins, +#borders, +#padding { border-color: hsla(210,100%,85%,0.2); + border-width: 25px; + border-style: solid; outline: dotted 1px hsl(210,100%,85%); } -#padding { - background-color: #6a5acd; +#margins { + /* This opacity applies to all of the regions, since they are nested */ + opacity: .8; } -#borders { - background-color: #444444; - border-style: dotted; - border-color: hsl(210,100%,85%); +/* Respond to window size change by changing the size of the regions */ + +@media (max-height: 228px) { + #content { + height: 18px; + } + + #margins, + #borders, + #padding { + border-width: 18px; + } } +/* Regions colors */ + #margins { - background-color: #edff64; - /* This opacity applies to all of the regions, since they are nested. */ - opacity: .8; + border-color: #edff64; +} + +#borders { + border-color: #444444; +} + +#padding { + border-color: #6a5acd; +} + +#content { + background-color: #87ceeb; +} + +/* Editable region sizes are contained in absolutely positioned <p> */ + +#main > p { + position: absolute; + pointer-events: none; } +#main > p { + margin: 0; + text-align: center; +} + +#main > p > span { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.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); +} + +/* Coordinates should be different when the window is small, because we make + the regions smaller then */ + +@media (max-height: 228px) { + .padding.top { + top: 37px; + } + + .padding.bottom { + bottom: 38px; + } + + .border.top { + top: 19px; + } + + .border.bottom { + bottom: 20px; + } + + .margin.top { + top: 1px; + } + + .margin.bottom { + bottom: 2px; + } + + .size, + .margin.left, + .margin.right, + .border.left, + .border.right, + .padding.left, + .padding.right { + line-height: 80px; + } + + .margin.right, + .margin.left, + .border.left, + .border.right, + .padding.right, + .padding.left { + width: 21px; + } + + .padding.left { + left: 35px; + } + + .padding.right { + right: 35px; + } + + .border.left { + left: 16px; + } + + .border.right { + right: 17px; + } +} + +/* Legend, displayed inside regions */ + +.legend { + position: absolute; + margin: 5px 6px; + z-index: 1; +} + +.legend[data-box="margin"] { + color: var(--theme-highlight-blue); +} + +@media (max-height: 228px) { + .legend { + margin: 2px 6px; + } +} + +/* Editable fields */ + .editable { border: 1px dashed transparent; + -moz-user-select: text; } .editable:hover { - border-bottom-color: hsl(0,0%,50%); + border-bottom-color: hsl(0, 0%, 50%); } .styleinspector-propertyeditor { - border: 1px solid #CCC; + border: 1px solid #ccc; padding: 0; } + +/* Make sure the content size doesn't appear as editable like the other sizes */ + +.size > span { + cursor: default; +} + +/* Hide all values when the view is inactive */ + +body.inactive > #header > #element-position, +body.inactive > #header > #element-size, +body.inactive > #main > p { + visibility: hidden; +} |