|
|
|
|
Quelle responsive-browser.css
Sprache: unbekannt
|
|
/* 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;
}
[ Dauer der Verarbeitung: 0.17 Sekunden
(vorverarbeitet)
]
|
2026-03-28
|
|
|
|
|
