blob: 86aa689e7154c73ff5c15b99755a5f84f41b4697 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
/* 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/. */
#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;
}
|
