Source code
Revision control
Copy as Markdown
Other Tools
/* 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
#appcontent[devtoolstheme="light"] {
--rdm-browser-container-background: #F5F5F6;
--rdm-browser-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
}
#appcontent[devtoolstheme="dark"] {
--rdm-browser-container-background: #18181a; /* This should map to --theme-toolbar-background. */
--rdm-browser-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
}
.browserContainer.responsive-mode {
background-color: var(--rdm-browser-container-background);
}
.browserContainer.responsive-mode > .rdm-toolbar {
border: none;
position: absolute;
z-index: var(--browser-stack-z-index-rdm-toolbar);
height: 30px;
top: 0;
left: 0;
width: 100%;
}
.browserContainer.responsive-mode > .rdm-toolbar.accomodate-ua {
height: 60px;
}
.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: var(--rdm-browser-box-shadow);
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;
}