1/* Popups contents syles */
2
3@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
4
5/* Style main context menu & buttons */
6#context-navigation {
7	padding: 4px 8px 8px;
8}
9#context-navigation > menuitem > .menu-iconic-left {
10	margin: auto !important;
11}
12#context-navigation menuitem {
13	--toolbarbutton-active-background: transparent !important;
14	--toolbarbutton-hover-background: transparent !important;
15}
16
17/* Remove icons from the main context menu */
18#contentAreaContextMenu menuitem image,
19#contentAreaContextMenu menu image {
20	visibility: hidden;
21}
22#contentAreaContextMenu menugroup menuitem image,
23#contentAreaContextMenu .menu-right image {
24	visibility: visible;
25}
26
27/* Main menu */
28#appMenu-popup .panel-banner-item:after {
29	-moz-box-ordinal-group: 0;
30	margin: 0 8px 0 0 !important;
31}
32#appMenu-popup .toolbaritem-combined-buttons {
33	margin-inline-end: 0 !important;
34}
35#appMenu-popup .toolbaritem-combined-buttons .before-label {
36	width: 32px !important;
37}
38#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
39	padding-left: 28px !important;
40}
41#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
42	margin-inline-start: 5px !important;
43}
44
45/* User sync account remove avatar */
46#fxa-menu-avatar {
47	display: none;
48}
49
50/* Add search engine button remove icon */
51#pageAction-panel-addSearchEngine .toolbarbutton-badge-stack {
52	display: none !important;
53}
54
55/* All tabs popover */
56.all-tabs-item[selected] {
57	border-left: 3px solid var(--gnome-tabbar-tab-active-border-bottom-color);
58	box-shadow: none !important;
59}
60
61.all-tabs-item > .all-tabs-secondary-button label {
62	margin: 0 !important;
63}
64
65/* Downloads popover */
66#downloadsPanel-mainView .download-state {
67	padding: 8px !important;
68	border: 0 !important;
69	border-radius: 3px !important;
70	display: flex;
71	align-items: center;
72}
73#downloadsPanel-mainView .download-state:hover {
74	background-color: var(--gnome-popover-button-hover-background) !important;
75}
76#downloadsPanel-mainView .download-state:last-child {
77	margin-bottom: 8px !important;
78}
79
80#downloadsPanel-mainView .downloadMainArea {
81	flex: 1;
82	display: flex;
83}
84#downloadsPanel-mainView .downloadMainArea:hover {
85	background: transparent !important;
86}
87
88#downloadsPanel-mainView .downloadTypeIcon {
89	margin: 0 !important;
90	margin-right: 6px !important;
91}
92
93#downloadsPanel-mainView .downloadContainer {
94	margin-inline-end: 0 !important;
95	flex: 1;
96	display: flex;
97	flex-direction: column;
98}
99
100#downloadsPanel-mainView .download-state .downloadButton .button-box {
101	padding: 0 !important;
102	margin: 0 !important;
103}
104#downloadsPanel-mainView .download-state toolbarseparator {
105	display: none;
106}
107
108/* Customization overflow menu position */
109#customization-panel-container {
110	padding: 0 75px 25px !important;
111	margin-top: 10px;
112	z-index: 10;
113}
114#customization-panelWrapper > .panel-arrowbox {
115	margin-bottom: -5px !important;
116}
117
118/* Confirmation Hint */
119#confirmation-hint .panel-arrowcontent {
120	background: var(--gnome-button-suggested-action-background) !important;
121	border-color: var(--gnome-button-suggested-action-border-color) !important;
122}
123#confirmation-hint .panel-arrow {
124	fill: var(--gnome-button-suggested-action-border-color) !important;
125	stroke: var(--gnome-button-suggested-action-border-color) !important;
126}
127#confirmation-hint-message {
128	color: white !important;
129}
130
131/* Identity popup */
132#identity-popup-security,
133.identity-popup-section,
134#identity-popup-security-expander .button-box,
135.identity-popup-security-content {
136	border: 0 !important;
137}
138
139.identity-popup-security-content, #identity-popup-permissions-content, #identity-popup-content-blocking-content {
140	padding-inline-end: 0 !important;
141	padding-inline-start: 0 !important;
142}
143#identity-popup-permissions-content, #identity-popup-content-blocking-content {
144	background-image: none !important;
145}
146.identity-popup-security-content {
147	background-position: 0em 0.8em !important;
148	background-size: 24px auto;
149}
150.identity-popup-security-content .identity-popup-headline {
151	margin-left: 1.4em !important;
152}
153
154#identity-popup-content-blocking-category-list, #identity-popup-permission-list {
155	margin-inline-start: 0 !important;
156}
157
158.identity-popup-security-connection {	/* FF70 */
159	background-position: 0 50% !important;
160	padding-inline-start: 16px !important;
161}
162#identity-popup-security-description { /* FF70 */
163	padding-inline-start: 0 !important;
164}
165
166.identity-popup-content-blocking-category-icon, .identity-popup-permission-icon {
167	margin-inline-start: 0 !important;
168}
169.identity-popup-content-blocking-category-label {
170	margin-inline-start: 6px !important;
171}
172.identity-popup-content-blocking-category-state-label {
173	opacity: 0.7;
174}
175
176#identity-popup-permissions-content {
177	padding-right: 0 !important;
178}
179#identity-popup-permissions-content description  {
180	margin-inline-start: 0 !important;
181}
182#identity-popup-permissions-content {
183	padding-bottom: 10px !important;
184}
185
186/* TODO: create custom --gnome-list vars */
187#identity-popup-permission-list:not(:empty) {
188	border: 1px solid var(--gnome-button-border-color);
189	border-bottom: 0 !important;
190	padding: 0 !important;
191}
192.identity-popup-permission-item {
193	background: var(--gnome-menu-background);
194	border-bottom: 1px solid var(--gnome-button-border-color);
195	padding: 6px !important;
196	margin: 0 !important;
197}
198
199/* Protections popup */
200.protections-popup-section,
201#protections-popup-not-blocking-section-header {
202	border: 0 !important;
203}
204#protections-popup-mainView-panel-header-section {
205	background: transparent !important;
206}
207
208#protections-popup-mainView-panel-header {
209	background: var(--gnome-button-suggested-action-background) !important;
210	border: 1px solid var(--gnome-button-suggested-action-border-color) !important;
211	border-radius: 3px 3px 0 0;
212	min-height: 34px !important;
213}
214#protections-popup[toast] #protections-popup-mainView-panel-header {
215	border-radius: 3px !important;
216}
217
218#protections-popup-message {
219	height: 100% !important;
220	margin: 0 !important;
221	border-radius: 0 !important;
222}
223
224#protections-popup-tp-switch-section {
225	background: var(--gnome-button-background) !important;
226	border: 1px solid var(--gnome-button-border-color) !important;
227	border-top: 0 !important;
228	border-radius: 0 0 3px 3px;
229}
230#protections-popup[hasException] #protections-popup-tp-switch-section {
231	margin-bottom: 10px !important;
232	color: white !important;
233}
234
235#protections-popup[hasException] #protections-popup-tp-switch-section,
236#protections-popup[hasException] #protections-popup-mainView-panel-header{
237	background: var(--gnome-button-destructive-action-background) !important;
238	border-color: var(--gnome-button-destructive-action-border-color) !important;
239}
240
241#protections-popup-no-trackers-found-description {
242	margin: 10px 0 !important;
243}
244
245#protections-popup-blocking-section-header,
246#protections-popup-not-found-section-header,
247#protections-popup-not-blocking-section-header{
248	padding: 0px 5px !important;
249	margin-top: 20px !important;
250	height: auto !important;
251}
252
253#protections-popup-category-list {
254	margin: 0 !important;
255}
256.protections-popup-category-label {
257	margin-inline-start: 6px !important;
258}
259.protections-popup-category-state-label {
260	opacity: 0.7;
261}
262
263#protections-popup-content,
264#protections-popup-footer  {
265	padding: 0 !important;
266}
267
268#protections-popup-footer  {
269	display: flex;
270	justify-content: flex-end;
271	flex-wrap: wrap;
272	margin-top: 3px;
273}
274#protections-popup-show-report-stack {
275	width: 100% !important;
276	display: flex;
277	justify-content: space-between;
278	align-items: center;
279	margin-top: 10px;
280}
281
282#protections-popup-trackers-blocked-counter-box {
283	margin-inline-end: 0 !important;
284}
285
286/* TODO: consider switchers section */
287.protections-popup-tp-switch-box {
288	margin-top: 16px;
289	padding: 0 !important;
290	-moz-box-pack: start !important;
291}
292#protections-popup-tp-switch:not([enabled])[showdotindicator]::after {
293	display: none !important;
294}
295#protections-popup-tp-switch {
296	background: var(--gnome-switch-background) !important;
297	border: 1px solid var(--gnome-switch-border-color) !important;
298	border-radius: 24px !important;
299	min-width: 50px !important;
300	width: 50px !important;
301	min-height: 26px !important;
302	padding: 0 !important;
303	position: relative !important;
304	display: block !important;
305	margin: 0 !important;
306}
307#protections-popup-tp-switch:hover {
308	border-color: var(--gnome-switch-border-color) !important;
309}
310#protections-popup-tp-switch::before {
311	position: absolute !important;
312	top: 0px;
313	left: 0px;
314	background: var(--gnome-switch-slider-background) !important;
315	border: 1px solid var(--gnome-switch-slider-border-color) !important;
316	box-shadow: var(--gnome-switch-slider-box-shadow);
317	border-radius: 24px !important;
318	height: 24px !important;
319	width: 24px !important;
320	transition: left .2s ease;
321	outline: 0 !important;
322}
323#protections-popup-tp-switch[enabled] {
324	background: var(--gnome-switch-active-background) !important;
325	border-color: var(--gnome-switch-active-border-color) !important;
326	padding-inline-start: 24px !important;
327}
328#protections-popup-tp-switch[enabled]:hover {
329	border-color: var(--gnome-switch-active-border-color) !important;
330}
331#protections-popup-tp-switch[enabled]::before {
332	border-color: var(--gnome-switch-active-slider-border-color) !important;
333	left: 24px;
334}
335
336/* Feature recommendation notification, fix width */
337#contextual-feature-recommendation-notification {
338	width: auto !important;
339}
340