| ... |
... |
@@ -66,45 +66,12 @@ |
|
66
|
66
|
}
|
|
67
|
67
|
}
|
|
68
|
68
|
|
|
69
|
|
- background: var(--letterboxing-bgcolor);
|
|
70
|
|
-
|
|
71
|
|
- &:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) {
|
|
72
|
|
- /* Letterboxing outline is visible for the current tab. Replace the usual
|
|
73
|
|
- * outline to match the Letterboxing outline. For most scenarios, this
|
|
74
|
|
- * should be mostly the same colour as when Letterboxing is not visible. But
|
|
75
|
|
- * it may make a difference for some theme combinations. */
|
|
76
|
|
- outline-color: var(--letterboxing-outline-color);
|
|
77
|
|
- outline-width: var(--letterboxing-outline-width);
|
|
78
|
|
- }
|
|
79
|
|
-
|
|
80
|
69
|
/* Override the --tabpanel-background-color. */
|
|
81
|
70
|
/* TODO: FIX this for newtab pages. tor-browser#44085 */
|
|
82
|
71
|
--tabpanel-background-color: transparent;
|
|
83
|
72
|
|
|
84
|
|
- /* stylelint-disable-next-line media-query-no-invalid */
|
|
85
|
|
- @media -moz-pref("sidebar.revamp") {
|
|
86
|
|
- :root:not([inDOMFullscreen]) &[sidebar-shown]:not(.letterboxing-nav-toolbox-hidden):is(
|
|
87
|
|
- /* When the Letterboxing area is aligned to the top, show the rounded
|
|
88
|
|
- * corner if there is enough vertical space between the sidebar and the
|
|
89
|
|
- * browser element, which is not rounded at the top. */
|
|
90
|
|
- :not(.letterboxing-vcenter):has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-sidebar-corner),
|
|
91
|
|
- /* When the Letterboxing area is aligned to the centre, show the rounded
|
|
92
|
|
- * corner if the Letterboxing border is shown. */
|
|
93
|
|
- .letterboxing-vcenter:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline)
|
|
94
|
|
- ) {
|
|
95
|
|
- /* stylelint-disable-next-line media-query-no-invalid */
|
|
96
|
|
- @media -moz-pref("sidebar.position_start") {
|
|
97
|
|
- border-start-start-radius: var(--letterboxing-border-radius);
|
|
98
|
|
- }
|
|
99
|
|
-
|
|
100
|
|
- /* stylelint-disable-next-line media-query-no-invalid */
|
|
101
|
|
- @media not -moz-pref("sidebar.position_start") {
|
|
102
|
|
- border-start-end-radius: var(--letterboxing-border-radius);
|
|
103
|
|
- }
|
|
104
|
|
- }
|
|
105
|
|
- }
|
|
106
|
|
-
|
|
107
|
73
|
.browserContainer {
|
|
|
74
|
+ background: var(--letterboxing-bgcolor);
|
|
108
|
75
|
/*
|
|
109
|
76
|
* From Firefox 115 on, .browserContainer layout is flex / column,
|
|
110
|
77
|
* and without this trick the .browserStack's resize observer
|
| ... |
... |
@@ -119,29 +86,22 @@ |
|
119
|
86
|
}
|
|
120
|
87
|
}
|
|
121
|
88
|
|
|
122
|
|
-.browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
|
|
123
|
|
- :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready & {
|
|
|
89
|
+.letterboxing .deck-selected .browserContainer:not(.responsive-mode):has(> .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) {
|
|
|
90
|
+ /* Letterboxing outline is visible for the current tab. Replace the usual
|
|
|
91
|
+ * outline to match the Letterboxing outline. For most scenarios, this
|
|
|
92
|
+ * should be mostly the same colour as when Letterboxing is not visible. But
|
|
|
93
|
+ * it may make a difference for some theme combinations. */
|
|
|
94
|
+ outline-color: var(--letterboxing-outline-color);
|
|
|
95
|
+ outline-width: var(--letterboxing-outline-width);
|
|
|
96
|
+}
|
|
|
97
|
+
|
|
|
98
|
+.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
|
|
|
99
|
+ :root:not([inDOMFullscreen]) .letterboxing-ready & {
|
|
124
|
100
|
place-content: var(--letterboxing-vertical-alignment) center;
|
|
125
|
101
|
}
|
|
126
|
102
|
|
|
127
|
|
- :root:not([inDOMFullscreen]) .letterboxing &.letterboxing-show-outline {
|
|
|
103
|
+ :root:not([inDOMFullscreen]) &.letterboxing-show-outline {
|
|
128
|
104
|
browser {
|
|
129
|
|
- /* We use clip-path rather than border-radius because border-radius on its
|
|
130
|
|
- * own leads to rendering artefacts in the corners (tested with GNOME).
|
|
131
|
|
- * See tor-browser#44214 (comment 3262962). */
|
|
132
|
|
- /* TODO: Use border-radius once bugzilla bug 1991874 is resolved. */
|
|
133
|
|
- clip-path: rect(
|
|
134
|
|
- auto auto auto auto round var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius)
|
|
135
|
|
- var(--letterboxing-border-radius)
|
|
136
|
|
- );
|
|
137
|
|
- }
|
|
138
|
|
-
|
|
139
|
|
- .browserDecorator {
|
|
140
|
|
- /* Need a separate browserDecorator element because the clip-path on the
|
|
141
|
|
- * browser would exclude the outline and box-shadow. */
|
|
142
|
|
- /* TODO: Move these rules to the browser element once bugzilla bug 1991874
|
|
143
|
|
- * is resolved, and drop browserDecorator. */
|
|
144
|
|
- display: block;
|
|
145
|
105
|
border-radius: var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius)
|
|
146
|
106
|
var(--letterboxing-border-radius);
|
|
147
|
107
|
/* NOTE: The top outline will not be visible when this is aligned to the
|
| ... |
... |
@@ -175,11 +135,3 @@ |
|
175
|
135
|
max-width: calc(var(--letterboxing-width) * 0.5);
|
|
176
|
136
|
}
|
|
177
|
137
|
} |
|
178
|
|
-
|
|
179
|
|
-.browserDecorator {
|
|
180
|
|
- display: none;
|
|
181
|
|
- pointer-events: none;
|
|
182
|
|
- background: transparent;
|
|
183
|
|
- position: relative;
|
|
184
|
|
- z-index: 1;
|
|
185
|
|
-} |