mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Emilio Cobos Álvarez
f7551929f8
gNotificationBox doesn't go there anymore (it goes inside the toolbox), so we have really no use for that. Simplify how the devtools theme is set on the browser, so that it is set on the root. Differential Revision: https://phabricator.services.mozilla.com/D220769
154 lines
5.1 KiB
CSS
154 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 > .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;
|
|
}
|