X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Flayout.css;h=d9bcd5febcda41c9e103ff219a97e295a9d4b5b5;hp=a91259d745e2cfae87ed114058f0ed92eda95803;hb=d0a8de80597f65fb17a8508078deae45f0ae80d4;hpb=dadba0f24ba2459f70e098788b20b0e4ba96a7d2 diff --git a/LCARStrek/devtools/layout.css b/LCARStrek/devtools/layout.css index a91259d7..d9bcd5fe 100644 --- a/LCARStrek/devtools/layout.css +++ b/LCARStrek/devtools/layout.css @@ -2,16 +2,11 @@ * 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/ */ -.theme-sidebar { - box-sizing: border-box; -} - #sidebar-panel-layoutview { display: block; overflow: auto; } -body.theme-sidebar, #layout-container { /* The view will grow bigger as the window gets resized, until 400px */ max-width: 400px; @@ -23,7 +18,6 @@ body.theme-sidebar, /* Header: contains the position and size of the element */ -#header, #layout-header { box-sizing: border-box; width: 100%; @@ -32,28 +26,23 @@ body.theme-sidebar, vertical-align: top; } -#header:-moz-dir(rtl), #layout-header:-moz-dir(rtl) { -moz-box-direction: reverse; } -#header > span, #layout-header > span { display: -moz-box; } -#element-size, #layout-element-size { -moz-box-flex: 1; } -#element-size:-moz-dir(rtl), #layout-element-size:-moz-dir(rtl) { -moz-box-pack: end; } @media (max-height: 250px) { - #header, #layout-header { padding-top: 0; padding-bottom: 0; @@ -64,7 +53,6 @@ body.theme-sidebar, /* Main: contains the box-model regions */ -#main, #layout-main { position: absolute; box-sizing: border-box; @@ -77,8 +65,6 @@ body.theme-sidebar, width: calc(100% - 2 * 14px); } -.margin, -.size, .layout-margin, .layout-size { /* color: var(--theme-highlight-blue); */ @@ -86,14 +72,10 @@ body.theme-sidebar, /* Regions are 3 nested elements with wide borders and outlines */ -#content, #layout-content { height: 25px; } -#margins, -#borders, -#padding, #layout-margins, #layout-borders, #layout-padding { @@ -103,7 +85,6 @@ body.theme-sidebar, outline: dotted 1px var(--theme-splitter-color); } -#margins, #layout-margins { /* This opacity applies to all of the regions, since they are nested */ opacity: .8; @@ -112,14 +93,10 @@ body.theme-sidebar, /* Respond to window size change by changing the size of the regions */ @media (max-height: 250px) { - #content, #layout-content { height: 18px; } - #margins, - #borders, - #padding, #layout-margins, #layout-borders, #layout-padding { @@ -129,22 +106,18 @@ body.theme-sidebar, /* Regions colors */ -#margins, #layout-margins { border-color: #FFCF00; } -#borders, #layout-borders { border-color: #A09090; } -#padding, #layout-padding { border-color: #8050B0; } -#content, #layout-content { background-color: #008484; } @@ -171,7 +144,6 @@ body.theme-sidebar, */ /* Editable region sizes are contained in absolutely positioned

*/ -#main > p, #layout-main > p { position: absolute; pointer-events: none; @@ -179,8 +151,6 @@ body.theme-sidebar, text-align: center; } -#main > p > span, -#main > p > input, #layout-main > p > span, #layout-main > p > input { vertical-align: middle; @@ -189,51 +159,36 @@ body.theme-sidebar, /* Coordinates for the region sizes */ -.top, -.bottom, .layout-top, .layout-bottom { width: calc(100% - 2px); text-align: center; } -.padding.top, .layout-padding.layout-top { top: 55px; } -.padding.bottom, .layout-padding.layout-bottom { bottom: 57px; } -.border.top, .layout-border.layout-top { top: 30px; } -.border.bottom, .layout-border.layout-bottom { bottom: 31px; } -.margin.top, .layout-margin.layout-top { top: 5px; } -.margin.bottom, .layout-margin.layout-bottom { bottom: 6px; } -.size, -.margin.left, -.margin.right, -.border.left, -.border.right, -.padding.left, -.padding.right, .layout-size, .layout-margin.layout-left, .layout-margin.layout-right, @@ -245,17 +200,10 @@ body.theme-sidebar, line-height: 132px; } -.size, .layout-size { width: calc(100% - 2px); } -.margin.right, -.margin.left, -.border.left, -.border.right, -.padding.right, -.padding.left, .layout-margin.layout-right, .layout-margin.layout-left, .layout-border.layout-left, @@ -265,42 +213,34 @@ body.theme-sidebar, width: 25px; } -.padding.left, .layout-padding.layout-left { left: 52px; } -.padding.right, .layout-padding.layout-right { right: 51px; } -.border.left, .layout-border.layout-left { left: 26px; } -.border.right, .layout-border.layout-right { right: 26px; } -.margin.right, .layout-margin.layout-right { right: 0; } -.margin.left, .layout-margin.layout-left { left: 0; } -.rotate.left:not(.editing), .layout-rotate.layout-left:not(.layout-editing) { transform: rotate(-90deg); } -.rotate.right:not(.editing), .layout-rotate.layout-right:not(.layout-editing) { transform: rotate(90deg); } @@ -309,43 +249,30 @@ body.theme-sidebar, the regions smaller then */ @media (max-height: 250px) { - .padding.top, .layout-padding.layout-top { top: 37px; } - .padding.bottom, .layout-padding.layout-bottom { bottom: 38px; } - .border.top, .layout-border.layout-top { top: 19px; } - .border.bottom, .layout-border.layout-bottom { bottom: 20px; } - .margin.top, .layout-margin.layout-top { top: 1px; } - .margin.bottom, .layout-margin.layout-bottom { bottom: 2px; } - .size, - .margin.left, - .margin.right, - .border.left, - .border.right, - .padding.left, - .padding.right, .layout-size, .layout-margin.layout-left, .layout-margin.layout-right, @@ -356,12 +283,6 @@ body.theme-sidebar, line-height: 80px; } - .margin.right, - .margin.left, - .border.left, - .border.right, - .padding.right, - .padding.left, .layout-margin.layout-right, .layout-margin.layout-left, .layout-border.layout-left, @@ -371,22 +292,18 @@ body.theme-sidebar, width: 21px; } - .padding.left, .layout-padding.layout-left { left: 35px; } - .padding.right, .layout-padding.layout-right { right: 35px; } - .border.left, .layout-border.layout-left { left: 16px; } - .border.right, .layout-border.layout-right { right: 17px; } @@ -394,20 +311,17 @@ body.theme-sidebar, /* Legend, displayed inside regions */ -.legend, .layout-legend { position: absolute; margin: 5px 6px; z-index: 1; } -.legend[data-box="margin"], .layout-legend[data-box="margin"] { color: #000000; /*var(--theme-highlight-blue);*/ } @media (max-height: 250px) { - .legend, .layout-legend { margin: 2px 6px; } @@ -415,13 +329,11 @@ body.theme-sidebar, /* Editable fields */ -.editable, .layout-editable { border: 1px dashed transparent; -moz-user-select: text; } -.editable:hover, .layout-editable:hover { border-bottom-color: #E7ADE7; } @@ -433,16 +345,12 @@ body.theme-sidebar, /* Make sure the content size doesn't appear as editable like the other sizes */ -.size > span, .layout-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, #layout-container.inactive > #layout-header > #layout-element-position, #layout-container.inactive > #layout-header > #layout-element-size, #layout-container.inactive > #layout-main > p {