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/. */
5 /* === BEGIN panel.inc.css === */
7 /* Hide all conditional elements by default. */
8 :-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
12 /* Show the right elements for the right connection states. */
13 #identity-popup[connection=not-secure] [when-connection~=not-secure],
14 #identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
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 #identity-popup[connection=extension] [when-connection~=extension],
20 /* Show insecure login forms messages when needed. */
21 #identity-popup[loginforms=insecure] [when-loginforms=insecure],
22 /* Show weak cipher messages when needed. */
23 #identity-popup[ciphers=weak] [when-ciphers~=weak],
24 /* Show mixed content warnings when needed */
25 #identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
26 #identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
27 #identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
28 /* Show the right elements when there is mixed passive content loaded and active blocked. */
29 #identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
30 /* Show 'disable MCB' button always when there is mixed active content blocked. */
31 #identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
35 /* Hide redundant messages based on insecure login forms presence. */
36 #identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
39 #identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
43 /* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
44 #identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure],
45 /* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
46 #identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
50 /* Make sure hidden elements don't accidentally become visible from one of the
51 above selectors (see Bug 1194258) */
52 #identity-popup [hidden] {
53 display: none !important;
57 #identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
58 /* Tiny hack to ensure the panel shrinks back to its original
59 size after closing a subview that is bigger than the main view. */
63 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
64 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
65 -moz-user-focus: ignore;
68 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
72 .panel-mainview[panelid=identity-popup] {
76 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
77 transform: translateX(100%);
81 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
82 transform: translateX(-100%);
85 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
86 background: var(--arrowpanel-background);
90 .identity-popup-section:not(:first-child) {
91 border-top: 1px solid var(--panel-separator-color);
94 #identity-popup-securityView,
95 #identity-popup-security-content,
96 #identity-popup-permissions-content,
97 #tracking-protection-content {
98 background-repeat: no-repeat;
99 background-position: 1em 1em;
100 background-size: 24px auto;
103 #identity-popup-security-content,
104 #identity-popup-permissions-content,
105 #tracking-protection-content {
106 padding: 0.5em 0 1em;
107 /* .identity-popup-host depends on this width */
108 padding-inline-start: calc(2em + 24px);
109 padding-inline-end: 1em;
112 #identity-popup-securityView:-moz-locale-dir(rtl),
113 #identity-popup-security-content:-moz-locale-dir(rtl),
114 #identity-popup-permissions-content:-moz-locale-dir(rtl),
115 #tracking-protection-content:-moz-locale-dir(rtl) {
116 background-position: calc(100% - 1em) 1em;
121 .identity-popup-expander {
124 width: var(--identity-popup-expander-width);
125 background: url("chrome://browser/skin/controlcenter/arrow-subview.svg") center no-repeat;
126 background-size: 16px;
127 border-radius: 0 5px 5px 0;
130 .identity-popup-expander:-moz-locale-dir(rtl) {
131 transform: scaleX(-1);
134 .identity-popup-expander[panel-multiview-anchor] {
135 transition: background-color 250ms ease-in;
136 background-color: #008484;
137 background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
141 .identity-popup-expander > .button-box,
142 .identity-popup-expander > .button-box:focus {
144 border-radius: 0 5px 5px 0;
147 .identity-popup-expander[panel-multiview-anchor] > .button-box,
148 .identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
151 .identity-popup-expander:hover {
152 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
153 background-color: var(--arrowpanel-hover);
156 .identity-popup-expander:hover > .button-box > .button-icon {
157 filter: url(chrome://global/skin/filters.svg#fill);
161 .identity-popup-expander:hover:active {
162 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
163 background-color: var(--arrowpanel-active);
168 .identity-popup-permission-label,
169 .identity-popup-permission-state-label,
170 #identity-popup-security-content > description,
171 #identity-popup-security-descriptions > description,
172 #identity-popup-securityView-header > description,
173 #identity-popup-securityView-body > description,
174 #identity-popup-permissions-content > description,
175 #tracking-protection-content > label,
176 .identity-popup-text {
177 white-space: pre-wrap;
182 .identity-popup-headline {
187 .identity-popup-host {
188 word-wrap: break-word;
189 /* 1em + 2em + 24px is #identity-popup-security-content padding
190 * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
191 max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
194 .identity-popup-warning-gray {
195 padding-inline-start: 24px;
196 background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
199 .identity-popup-warning-yellow {
200 padding-inline-start: 24px;
201 background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
204 .identity-popup-warning-gray:-moz-locale-dir(rtl),
205 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
206 background-position: 100% 50%;
211 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
215 .identity-popup-connection-secure {
219 .identity-popup-connection-not-secure {
223 #identity-popup-security-content.chromeUI {
224 background-image: url(chrome://branding/content/icon48.png);
227 /* SECURITY SUBVIEW */
229 #identity-popup-securityView {
233 #identity-popup-securityView,
234 #identity-popup-security-content {
235 background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
238 #identity-popup[connection=chrome] #identity-popup-securityView,
239 #identity-popup[connection=chrome] #identity-popup-security-content {
240 background-image: url(chrome://branding/content/icon48.png);
243 #identity-popup[connection^=secure] #identity-popup-securityView,
244 #identity-popup[connection^=secure] #identity-popup-security-content {
245 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
248 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
249 #identity-popup[ciphers=weak] #identity-popup-securityView,
250 #identity-popup[ciphers=weak] #identity-popup-security-content,
251 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
252 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
253 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
256 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
257 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
258 background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
259 -moz-context-properties: fill;
263 #identity-popup[loginforms=insecure] #identity-popup-securityView,
264 #identity-popup[loginforms=insecure] #identity-popup-security-content,
265 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
266 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
267 background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
270 #identity-popup[connection=extension] #identity-popup-securityView,
271 #identity-popup[connection=extension] #identity-popup-security-content {
272 background-image: url(chrome://browser/skin/controlcenter/extension.svg);
273 -moz-context-properties: fill;
277 #identity-popup-security-descriptions > description {
282 #identity-popup-securityView-header,
283 #identity-popup-securityView-body {
284 margin-inline-start: calc(2em + 24px);
285 margin-inline-end: 1em;
288 #identity-popup-securityView-header {
290 border-bottom: 1px solid var(--panel-separator-color);
294 #identity-popup-securityView-body {
295 padding-inline-end: 1em;
298 #identity-popup-securityView-footer {
300 background-color: var(--arrowpanel-dimmed);
303 #identity-popup-securityView-footer > button {
306 #identity-popup-securityView-footer > button:hover,
307 #identity-popup-securityView-footer > button:focus {
310 #identity-popup-securityView-footer > button:hover:active {
313 #identity-popup-content-verifier ~ description {
318 description#identity-popup-content-verified-by,
319 description#identity-popup-content-owner,
320 description#identity-popup-content-verifier,
321 #identity-popup-securityView-body > button {
325 #identity-popup-securityView-body > button {
326 margin-inline-start: 0;
327 margin-inline-end: 0;
330 /* TRACKING PROTECTION */
332 #tracking-protection-content {
333 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
336 #tracking-protection-content[state="loaded-tracking-content"] {
337 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
340 #tracking-action-block,
341 #tracking-action-unblock,
342 #tracking-action-unblock-private,
343 #identity-popup-securityView-body > button {
347 #tracking-protection-content[state] > #tracking-not-detected,
348 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
349 #main-window[privatebrowsingmode] #tracking-action-unblock,
350 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
351 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
352 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
353 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
354 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
355 #tracking-protection-content:not([state]) > #tracking-actions {
361 #identity-popup-permissions-content {
362 background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
365 #identity-popup-permissions-headline {
366 /* Make sure the label is as tall as the icon so that the permission list
367 which is aligned with the icon doesn't cover it up. */
371 #identity-popup-permission-list {
372 /* Offset the padding set on #identity-popup-permissions-content so that it
373 shows up just below the section. The permission icons are 16px wide and
374 should be right aligned with the section icon. */
375 margin-inline-start: calc(-1em - 16px);
378 .identity-popup-permission-item {
382 #identity-popup-permission-list:not(:empty) {
386 .identity-popup-permission-icon {
391 .identity-popup-permission-icon.in-use {
392 animation: 1.5s ease in-use-blink infinite;
395 @keyframes in-use-blink {
399 .identity-popup-permission-label,
400 .identity-popup-permission-state-label {
401 /* We need to align the action buttons and permission icons with the text.
402 This is tricky because the icon height is defined in pixels, while the
403 font height can vary with platform and system settings, and at least on
404 Windows the default font metrics reserve more extra space for accents.
405 This value is a good compromise for different platforms and font sizes. */
409 .identity-popup-permission-label {
410 margin-inline-start: 1em;
413 .identity-popup-permission-state-label {
414 margin-inline-end: 5px;
419 .identity-popup-permission-remove-button {
425 background-color: transparent;
428 .identity-popup-permission-remove-button > .button-box {
432 .identity-popup-permission-remove-button > .button-box > .button-icon {
436 list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
437 filter: url(chrome://global/skin/filters.svg#fill);
441 .identity-popup-permission-remove-button > .button-box > .button-text {
445 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
446 background-color: #FFCF00;
449 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
453 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
454 background-color: #FF9F00;
457 /* === END panel.inc.css === */
459 .identity-popup-expander:-moz-focusring {
463 .identity-popup-expander:-moz-focusring > .button-box {
464 outline: 1px #008484 dotted;