... |
... |
@@ -127,6 +127,11 @@ body { |
127
|
127
|
-moz-window-dragging: drag;
|
128
|
128
|
}
|
129
|
129
|
|
|
130
|
+/**
|
|
131
|
+ Never modify the following selector without synchronizing
|
|
132
|
+ LETTERBOX_CSS_SELECTOR in RFPHelper.sys.jsm, where
|
|
133
|
+ --letterboxing-width & --letterboxing-height are actually set.
|
|
134
|
+**/
|
130
|
135
|
.letterboxing .browserContainer {
|
131
|
136
|
/*
|
132
|
137
|
From Firefox 115 on, .browserContainer layout is flex / column,
|
... |
... |
@@ -137,6 +142,14 @@ body { |
137
|
142
|
background: var(--letterboxing-bgcolor);
|
138
|
143
|
}
|
139
|
144
|
|
|
145
|
+.browserDecorator {
|
|
146
|
+ display: none;
|
|
147
|
+ pointer-events: none;
|
|
148
|
+ background: transparent;
|
|
149
|
+ position: relative;
|
|
150
|
+ z-index: 1;
|
|
151
|
+}
|
|
152
|
+
|
140
|
153
|
.letterboxing {
|
141
|
154
|
--letterboxing-border-radius: 8px;
|
142
|
155
|
--letterboxing-border-top-radius: 0;
|
... |
... |
@@ -145,6 +158,7 @@ body { |
145
|
158
|
--letterboxing-bgcolor: var(--tabpanel-background-color);
|
146
|
159
|
--letterboxing-gradient-color1: var(--letterboxing-bgcolor);
|
147
|
160
|
--letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
|
|
161
|
+ --letterboxing-border-color: var(--letterboxing-bgcolor);
|
148
|
162
|
}
|
149
|
163
|
|
150
|
164
|
.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
|
... |
... |
@@ -157,6 +171,26 @@ body { |
157
|
171
|
box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
|
158
|
172
|
}
|
159
|
173
|
|
|
174
|
+:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)
|
|
175
|
+ > .browserStack:not(.exclude-letterboxing)
|
|
176
|
+ > .browserDecorator {
|
|
177
|
+ display: initial;
|
|
178
|
+ visibility: visible;
|
|
179
|
+ border-radius: var(--letterboxing-border-radius);
|
|
180
|
+ border-top-left-radius: var(--letterboxing-border-top-radius);
|
|
181
|
+ border-top-right-radius: var(--letterboxing-border-top-radius);
|
|
182
|
+ box-shadow: var(--letterboxing-border-color) 0px 0px .1px inset, var(--letterboxing-border-color) 0 0 .1px;
|
|
183
|
+ border: .1px solid var(--letterboxing-border-color);
|
|
184
|
+ outline: .1px solid var(--letterboxing-bgcolor);
|
|
185
|
+ height: calc(var(--letterboxing-height) + 1px);
|
|
186
|
+ top: -1px;
|
|
187
|
+}
|
|
188
|
+
|
|
189
|
+.letterboxing-vcenter .browserDecorator {
|
|
190
|
+ height: auto !important;
|
|
191
|
+ top: 0 !important;
|
|
192
|
+}
|
|
193
|
+
|
160
|
194
|
/*
|
161
|
195
|
Align status bar with content.
|
162
|
196
|
TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)
|
... |
... |
@@ -167,6 +201,7 @@ body { |
167
|
201
|
place-self: end left;
|
168
|
202
|
left: 0;
|
169
|
203
|
right: 0;
|
|
204
|
+ z-index: 2;
|
170
|
205
|
--letterboxing-status-left-radius: var(--letterboxing-border-radius);
|
171
|
206
|
--letterboxing-status-right-radius: 0;
|
172
|
207
|
}
|
... |
... |
@@ -184,23 +219,24 @@ body { |
184
|
219
|
.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
|
185
|
220
|
#statuspanel-label {
|
186
|
221
|
border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);
|
|
222
|
+ margin: 0;
|
|
223
|
+ border: 1px solid var(--letterboxing-border-color);
|
|
224
|
+ max-width: calc(var(--letterboxing-width) * .5);
|
187
|
225
|
}
|
188
|
226
|
|
189
|
|
-/**
|
190
|
|
- Never modify the following selector without synchronizing
|
191
|
|
- LETTERBOX_CSS_SELECTOR in RFPHelper.jsm!
|
192
|
|
-**/
|
193
|
227
|
.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
|
194
|
|
- /* width & height to be dynamically set by RFPHelper.jsm */
|
195
|
228
|
box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);
|
196
|
229
|
border-radius: var(--letterboxing-border-radius);
|
197
|
230
|
border-top-left-radius: var(--letterboxing-border-top-radius);
|
198
|
231
|
border-top-right-radius: var(--letterboxing-border-top-radius);
|
|
232
|
+ width: var(--letterboxing-width) !important;
|
|
233
|
+ height: var(--letterboxing-height) !important;
|
199
|
234
|
}
|
200
|
235
|
|
201
|
236
|
:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
|
202
|
237
|
> .browserStack:not(.exclude-letterboxing) {
|
203
|
238
|
place-content: var(--letterboxing-vertical-alignment) center;
|
|
239
|
+ background: var(--letterboxing-bgcolor);
|
204
|
240
|
}
|
205
|
241
|
|
206
|
242
|
#toolbar-menubar[autohide="true"] {
|