second and last part of syncing LCARStrek with Firefox 53 browser windows theme changes
[themes.git] / LCARStrek / browser / controlcenter / panel.css
CommitLineData
2e389898
RK
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5/* === BEGIN panel.inc.css === */
6
7/* Hide all conditional elements by default. */
8:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
9 display: none;
10}
11
12/* Show the right elements for the right connection states. */
13#identity-popup[connection=not-secure] [when-connection~=not-secure],
7327c957 14#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
2e389898
RK
15#identity-popup[connection=secure-ev] [when-connection~=secure-ev],
16#identity-popup[connection=secure] [when-connection~=secure],
17#identity-popup[connection=chrome] [when-connection~=chrome],
18#identity-popup[connection=file] [when-connection~=file],
19/* Show insecure login forms messages when needed. */
20#identity-popup[loginforms=insecure] [when-loginforms=insecure],
21/* Show weak cipher messages when needed. */
22#identity-popup[ciphers=weak] [when-ciphers~=weak],
23/* Show mixed content warnings when needed */
24#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
25#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
26#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
27/* Show the right elements when there is mixed passive content loaded and active blocked. */
28#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
29/* Show 'disable MCB' button always when there is mixed active content blocked. */
30#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
31 display: inherit;
32}
33
34/* Hide redundant messages based on insecure login forms presence. */
35#identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
36 display: none;
37}
38#identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
470b6552
RK
39 display: none;
40}
41
2e389898
RK
42/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
43#identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure],
44/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
45#identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
46 display: none;
47}
48
49/* Make sure hidden elements don't accidentally become visible from one of the
50 above selectors (see Bug 1194258) */
51#identity-popup [hidden] {
52 display: none !important;
53}
470b6552
RK
54
55#identity-popup,
2e389898 56#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
470b6552
RK
57 /* Tiny hack to ensure the panel shrinks back to its original
58 size after closing a subview that is bigger than the main view. */
59 max-height: 0;
60}
61
2e389898
RK
62.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
63.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
64 -moz-user-focus: ignore;
65}
66
470b6552
RK
67#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
68 padding: 0;
69}
70
71.panel-mainview[panelid=identity-popup] {
72 min-width: 30em;
73}
74
75#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
76 transform: translateX(100%);
77 box-shadow: none;
78}
79
80#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
81 transform: translateX(-100%);
82}
83
84#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
987dae1b 85 background: var(--arrowpanel-background);
470b6552
RK
86 padding: 0;
87}
88
470b6552 89.identity-popup-section:not(:first-child) {
c9b0a396 90 border-top: 1px solid var(--panel-separator-color);
470b6552
RK
91}
92
93#identity-popup-securityView,
94#identity-popup-security-content,
95#identity-popup-permissions-content,
96#tracking-protection-content {
470b6552
RK
97 background-repeat: no-repeat;
98 background-position: 1em 1em;
99 background-size: 24px auto;
100}
101
7327c957
RK
102#identity-popup-security-content,
103#identity-popup-permissions-content,
104#tracking-protection-content {
105 padding: 0.5em 0 1em;
b9060895 106 /* .identity-popup-host depends on this width */
dae45075
RK
107 padding-inline-start: calc(2em + 24px);
108 padding-inline-end: 1em;
7327c957
RK
109}
110
470b6552
RK
111#identity-popup-securityView:-moz-locale-dir(rtl),
112#identity-popup-security-content:-moz-locale-dir(rtl),
113#identity-popup-permissions-content:-moz-locale-dir(rtl),
114#tracking-protection-content:-moz-locale-dir(rtl) {
115 background-position: calc(100% - 1em) 1em;
116}
117
470b6552
RK
118/* EXPAND BUTTON */
119
120.identity-popup-expander {
121 margin: 0;
122 min-width: auto;
7c1e433b 123 width: var(--identity-popup-expander-width);
39819724
RK
124 background: url("chrome://browser/skin/controlcenter/arrow-subview.svg") center no-repeat;
125 background-size: 16px;
470b6552
RK
126 border-radius: 0 5px 5px 0;
127}
128
129.identity-popup-expander:-moz-locale-dir(rtl) {
130 transform: scaleX(-1);
131}
132
133.identity-popup-expander[panel-multiview-anchor] {
134 transition: background-color 250ms ease-in;
135 background-color: #008484;
b336389b 136 background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
b1dfcf32 137 color: #000000;
470b6552
RK
138}
139
140.identity-popup-expander > .button-box,
141.identity-popup-expander > .button-box:focus {
142 padding: 4px 0;
143 border-radius: 0 5px 5px 0;
144}
145
146.identity-popup-expander[panel-multiview-anchor] > .button-box,
147.identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
148}
149
150.identity-popup-expander:hover {
151 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
d23bf94a
RK
152 background-color: var(--arrowpanel-hover);
153}
154
155.identity-popup-expander:hover > .button-box > .button-icon {
156 filter: url(chrome://global/skin/filters.svg#fill);
157 fill: #000000;
470b6552
RK
158}
159
160.identity-popup-expander:hover:active {
161 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
d23bf94a 162 background-color: var(--arrowpanel-active);
470b6552
RK
163}
164
165/* CONTENT */
166
868b4137
RK
167.identity-popup-permission-label,
168.identity-popup-permission-state-label,
b336389b
RK
169#identity-popup-security-content > description,
170#identity-popup-security-descriptions > description,
171#identity-popup-securityView-header > description,
172#identity-popup-securityView-body > description,
173#identity-popup-permissions-content > description,
174#tracking-protection-content > label,
470b6552
RK
175.identity-popup-text {
176 white-space: pre-wrap;
177 font-size: 110%;
178 margin: 0;
179}
180
181.identity-popup-headline {
024a65e9 182 margin: 3px 0 4px;
470b6552
RK
183 font-size: 150%;
184}
e9fbfc3a 185
b9060895 186.identity-popup-host {
7c1e433b
RK
187 word-wrap: break-word;
188 /* 1em + 2em + 24px is #identity-popup-security-content padding
189 * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
190 max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
191}
192
b336389b 193.identity-popup-warning-gray {
dae45075 194 padding-inline-start: 24px;
b336389b
RK
195 background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
196}
197
198.identity-popup-warning-yellow {
dae45075 199 padding-inline-start: 24px;
b336389b
RK
200 background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
201}
202
203.identity-popup-warning-gray:-moz-locale-dir(rtl),
204.identity-popup-warning-yellow:-moz-locale-dir(rtl) {
205 background-position: 100% 50%;
206}
470b6552
RK
207
208/* SECURITY */
209
210#identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
211 margin: 2px 0 4px;
212}
213
214.identity-popup-connection-secure {
215 color: #008484;
216}
217
218.identity-popup-connection-not-secure {
219 color: #9C9CFF;
220}
221
222#identity-popup-security-content.chromeUI {
223 background-image: url(chrome://branding/content/icon48.png);
224}
225
226/* SECURITY SUBVIEW */
227
228#identity-popup-securityView {
470b6552
RK
229 overflow: hidden;
230}
231
232#identity-popup-securityView,
233#identity-popup-security-content {
234 background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
235}
236
024a65e9
RK
237#identity-popup[connection=chrome] #identity-popup-securityView,
238#identity-popup[connection=chrome] #identity-popup-security-content {
239 background-image: url(chrome://branding/content/icon48.png);
240}
241
242#identity-popup[connection^=secure] #identity-popup-securityView,
243#identity-popup[connection^=secure] #identity-popup-security-content {
d23bf94a 244 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
470b6552
RK
245}
246
024a65e9
RK
247/* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
248#identity-popup[ciphers=weak] #identity-popup-securityView,
249#identity-popup[ciphers=weak] #identity-popup-security-content,
250#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
251#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
d23bf94a 252 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
19988d2d
RK
253}
254
024a65e9
RK
255#identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
256#identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
d23bf94a 257 background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
024a65e9
RK
258}
259
260#identity-popup[loginforms=insecure] #identity-popup-securityView,
261#identity-popup[loginforms=insecure] #identity-popup-security-content,
262#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
263#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
470b6552
RK
264 background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
265}
266
024a65e9
RK
267#identity-popup-security-descriptions > description {
268 margin-top: 6px;
269 color: #A09090;
270}
271
272#identity-popup-securityView-header,
273#identity-popup-securityView-body {
dae45075
RK
274 margin-inline-start: calc(2em + 24px);
275 margin-inline-end: 1em;
024a65e9
RK
276}
277
470b6552 278#identity-popup-securityView-header {
024a65e9 279 margin-top: 0.5em;
c9b0a396 280 border-bottom: 1px solid var(--panel-separator-color);
470b6552 281 padding-bottom: 1em;
470b6552
RK
282}
283
024a65e9 284#identity-popup-securityView-body {
dae45075 285 padding-inline-end: 1em;
024a65e9
RK
286}
287
288#identity-popup-securityView-footer {
289 margin-top: 1em;
d23bf94a 290 background-color: var(--arrowpanel-dimmed);
024a65e9
RK
291}
292
293#identity-popup-securityView-footer > button {
294}
295
296#identity-popup-securityView-footer > button:hover,
297#identity-popup-securityView-footer > button:focus {
470b6552
RK
298}
299
024a65e9
RK
300#identity-popup-securityView-footer > button:hover:active {
301}
302
303#identity-popup-content-verifier ~ description {
304 margin-top: 1em;
470b6552
RK
305 color: #A09090;
306}
307
024a65e9
RK
308description#identity-popup-content-verified-by,
309description#identity-popup-content-owner,
310description#identity-popup-content-verifier,
311#identity-popup-securityView-body > button {
470b6552
RK
312 margin-top: 1em;
313}
314
024a65e9
RK
315#identity-popup-securityView-body > button {
316 margin-inline-start: 0;
317 margin-inline-end: 0;
318}
319
470b6552
RK
320/* TRACKING PROTECTION */
321
322#tracking-protection-content {
d23bf94a 323 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
470b6552
RK
324}
325
19988d2d 326#tracking-protection-content[state="loaded-tracking-content"] {
d23bf94a 327 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
470b6552
RK
328}
329
330#tracking-action-block,
b336389b 331#tracking-action-unblock,
b1dfcf32
RK
332#tracking-action-unblock-private,
333#identity-popup-securityView-body > button {
470b6552
RK
334 margin: 1em 0 0;
335}
336
b336389b
RK
337#tracking-protection-content[state] > #tracking-not-detected,
338#tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
339#main-window[privatebrowsingmode] #tracking-action-unblock,
340#main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
341#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
342#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
343#tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
344#tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
19988d2d 345#tracking-protection-content:not([state]) > #tracking-actions {
470b6552
RK
346 display: none;
347}
348
349/* PERMISSIONS */
350
351#identity-popup-permissions-content {
352 background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
353}
354
db1c5db1
RK
355#identity-popup-permissions-headline {
356 /* Make sure the label is as tall as the icon so that the permission list
357 which is aligned with the icon doesn't cover it up. */
358 min-height: 24px;
359}
360
361#identity-popup-permission-list {
362 /* Offset the padding set on #identity-popup-permissions-content so that it
363 shows up just below the section. The permission icons are 16px wide and
364 should be right aligned with the section icon. */
365 margin-inline-start: calc(-1em - 16px);
366}
367
368.identity-popup-permission-item {
369 min-height: 24px;
024a65e9
RK
370}
371
d7b7f7e1 372#identity-popup-permission-list:not(:empty) {
470b6552
RK
373 margin-top: 5px;
374}
375
db1c5db1
RK
376.identity-popup-permission-icon {
377 width: 16px;
378 height: 16px;
379}
380
d23bf94a 381.identity-popup-permission-icon.in-use {
d23bf94a
RK
382 animation: 1.5s ease in-use-blink infinite;
383}
384
385@keyframes in-use-blink {
386 50% { opacity: 0; }
387}
388
389.identity-popup-permission-label,
390.identity-popup-permission-state-label {
391 /* We need to align the action buttons and permission icons with the text.
392 This is tricky because the icon height is defined in pixels, while the
393 font height can vary with platform and system settings, and at least on
394 Windows the default font metrics reserve more extra space for accents.
395 This value is a good compromise for different platforms and font sizes. */
396 margin-top: -0.1em;
397}
398
470b6552 399.identity-popup-permission-label {
db1c5db1
RK
400 margin-inline-start: 1em;
401}
402
403.identity-popup-permission-state-label {
868b4137 404 margin-inline-end: 5px;
db1c5db1 405 text-align: end;
d23bf94a 406 color: #A09090;
db1c5db1
RK
407}
408
409.identity-popup-permission-remove-button {
410 margin: 0;
411 border-width: 0;
412 border-radius: 50%;
413 min-width: 0;
414 padding: 2px;
415 background-color: transparent;
416}
417
418.identity-popup-permission-remove-button > .button-box {
419 padding: 0;
420}
421
422.identity-popup-permission-remove-button > .button-box > .button-icon {
423 margin: 0;
424 width: 16px;
425 height: 16px;
426 list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
2a1534f1 427 filter: url(chrome://global/skin/filters.svg#fill);
db1c5db1
RK
428 fill: #A09090;
429}
430
431.identity-popup-permission-remove-button > .button-box > .button-text {
432 display: none;
433}
434
435.identity-popup-permission-remove-button:not(:-moz-focusring):hover {
436 background-color: #FFCF00;
437}
438
439.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
440 fill: #000000;
441}
442
443.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
444 background-color: #FF9F00;
470b6552
RK
445}
446
2e389898
RK
447/* === END panel.inc.css === */
448
b336389b
RK
449.identity-popup-expander:-moz-focusring {
450 padding: 1px;
2e389898
RK
451}
452
b336389b
RK
453.identity-popup-expander:-moz-focusring > .button-box {
454 outline: 1px #008484 dotted;
2e389898 455}