153 lines
5.1 KiB
CSS
153 lines
5.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/. */
|
|
|
|
:root {
|
|
/* This should map to --theme-toolbar-background. */
|
|
--rdm-background-color: #F5F5F6;
|
|
--rdm-shadow-color: rgba(155, 155, 155, 0.26);
|
|
|
|
&[devtoolstheme="dark"] {
|
|
--rdm-background-color: #18181a;
|
|
--rdm-shadow-color: rgba(105, 105, 105, 0.26);
|
|
}
|
|
}
|
|
|
|
.browserContainer.responsive-mode {
|
|
background-color: var(--rdm-background-color);
|
|
--rdm-toolbar-height: 30px;
|
|
--rdm-toolbar-accomodate-ua-height: 60px;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar {
|
|
border: none;
|
|
position: absolute;
|
|
z-index: var(--browser-stack-z-index-rdm-toolbar);
|
|
height: var(--rdm-toolbar-height);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
/**
|
|
* The .rdm-toolbar will be above the .dialogBox in RDM so we shift the
|
|
* .dialogBox down by the height of the .rdm-toolbar so both are visible
|
|
*/
|
|
+ .browserStack > .dialogStack:not(.content-prompt-dialog) > .dialogTemplate > .dialogBox {
|
|
margin-top: var(--rdm-toolbar-height);
|
|
}
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar.accomodate-ua {
|
|
height: var(--rdm-toolbar-accomodate-ua-height);
|
|
|
|
/**
|
|
* When the browser window is less than 520 pixels wide, the RDM toolbar
|
|
* needs extra space to accomdate for the UA input so the .rdm-toolbar is
|
|
* set to a larger height of --rdm-toolbar-accomodate-ua-height. We also need
|
|
* to shift the .dialogBox down by the same height so both are visible.
|
|
*/
|
|
+ .browserStack > .dialogStack > .dialogTemplate > .dialogBox {
|
|
margin-top: var(--rdm-toolbar-accomodate-ua-height);
|
|
}
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .rdm-toolbar.device-modal-opened {
|
|
height: 100%;
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack {
|
|
--resizer-offset: 4px;
|
|
--browser-viewport-width: calc(var(--rdm-width) + var(--resizer-offset));
|
|
--browser-viewport-height: calc(var(--rdm-height) + var(--resizer-offset));
|
|
--rdm-zoomed-width: calc(var(--rdm-width) * var(--rdm-zoom));
|
|
--rdm-zoomed-height: calc(var(--rdm-height) * var(--rdm-zoom));
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: auto;
|
|
contain: size;
|
|
grid-template-columns: 15px 1fr [center-align] var(--browser-viewport-width) 1fr;
|
|
grid-template-rows: 65px [margin-top-offset] var(--browser-viewport-height);
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > :is(browser, .rdm-viewport-resize-handle) {
|
|
grid-column: center-align;
|
|
grid-row: margin-top-offset;
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > :is(browser, .rdm-viewport-resize-handle) {
|
|
grid-column: left-align;
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack {
|
|
grid-template-columns: 15px [left-align] var(--browser-viewport-width) 1fr;
|
|
}
|
|
|
|
html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
|
|
grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > browser {
|
|
border: 1px solid var(--devtools-splitter-color);
|
|
box-shadow: 0 4px 4px 0 var(--rdm-shadow-color);
|
|
|
|
transform-origin: 50% 0;
|
|
transform: scale(var(--rdm-zoom), var(--rdm-zoom));
|
|
box-sizing: content-box; /* This is important to ensure that the pane has the
|
|
precise number of pixels defined by --rdm-width
|
|
and --rdm-height. */
|
|
height: var(--rdm-height);
|
|
width: var(--rdm-width);
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > browser {
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
/* Resize handles */
|
|
|
|
.browserContainer.responsive-mode > .browserStack > .viewport-resize-handle {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url("./images/grippers.svg");
|
|
margin-inline-end: var(--resizer-offset);
|
|
margin-block-end: var(--resizer-offset);
|
|
background-repeat: no-repeat;
|
|
background-origin: content-box;
|
|
cursor: nwse-resize;
|
|
align-self: end;
|
|
justify-self: right;
|
|
position: relative;
|
|
left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
|
|
top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-resize-handle {
|
|
left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > .viewport-horizontal-resize-handle {
|
|
width: 5px;
|
|
height: calc(var(--rdm-zoomed-height) - 16px);
|
|
cursor: ew-resize;
|
|
justify-self: right;
|
|
position: relative;
|
|
left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-horizontal-resize-handle {
|
|
left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
|
|
}
|
|
|
|
.browserContainer.responsive-mode > .browserStack > .viewport-vertical-resize-handle {
|
|
width: calc(var(--rdm-zoomed-width) - 16px);
|
|
height: 5px;
|
|
cursor: ns-resize;
|
|
align-self: end;
|
|
position: relative;
|
|
top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
|
|
left: calc((-1 * (var(--rdm-zoomed-width) - var(--rdm-width)) / 2));
|
|
}
|
|
|
|
.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-vertical-resize-handle {
|
|
left: 0;
|
|
}
|