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 > description,
176 .identity-popup-text {
181 /* This element needs the pre-wrap because we add newlines to it in the code. */
182 #identity-popup-content-supplemental {
183 white-space: pre-wrap;
186 .identity-popup-headline {
191 .identity-popup-host {
192 word-wrap: break-word;
193 /* 1em + 2em + 24px is #identity-popup-security-content padding
194 * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
195 max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
198 .identity-popup-warning-gray {
199 padding-inline-start: 24px;
200 background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
203 .identity-popup-warning-yellow {
204 padding-inline-start: 24px;
205 background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
208 .identity-popup-warning-gray:-moz-locale-dir(rtl),
209 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
210 background-position: 100% 50%;
215 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
219 .identity-popup-connection-secure {
223 .identity-popup-connection-not-secure {
227 #identity-popup-security-content.chromeUI {
228 background-image: url(chrome://branding/content/icon48.png);
231 /* SECURITY SUBVIEW */
233 #identity-popup-securityView {
237 #identity-popup-securityView,
238 #identity-popup-security-content {
239 background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
242 #identity-popup[connection=chrome] #identity-popup-securityView,
243 #identity-popup[connection=chrome] #identity-popup-security-content {
244 background-image: url(chrome://branding/content/icon48.png);
247 #identity-popup[connection^=secure] #identity-popup-securityView,
248 #identity-popup[connection^=secure] #identity-popup-security-content {
249 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
252 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
253 #identity-popup[ciphers=weak] #identity-popup-securityView,
254 #identity-popup[ciphers=weak] #identity-popup-security-content,
255 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
256 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
257 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
260 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
261 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
262 background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
263 -moz-context-properties: fill;
267 #identity-popup[loginforms=insecure] #identity-popup-securityView,
268 #identity-popup[loginforms=insecure] #identity-popup-security-content,
269 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
270 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
271 background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
274 #identity-popup[connection=extension] #identity-popup-securityView,
275 #identity-popup[connection=extension] #identity-popup-security-content {
276 background-image: url(chrome://browser/skin/controlcenter/extension.svg);
277 -moz-context-properties: fill;
281 #identity-popup-security-descriptions > description {
286 #identity-popup-securityView-header,
287 #identity-popup-securityView-body {
288 margin-inline-start: calc(2em + 24px);
289 margin-inline-end: 1em;
292 #identity-popup-securityView-header {
294 border-bottom: 1px solid var(--panel-separator-color);
298 #identity-popup-securityView-body {
299 padding-inline-end: 1em;
302 #identity-popup-securityView-footer {
304 background-color: var(--arrowpanel-dimmed);
307 #identity-popup-securityView-footer > button {
310 #identity-popup-securityView-footer > button:hover,
311 #identity-popup-securityView-footer > button:focus {
314 #identity-popup-securityView-footer > button:hover:active {
317 #identity-popup-content-verifier ~ description {
322 description#identity-popup-content-verified-by,
323 description#identity-popup-content-owner,
324 description#identity-popup-content-verifier,
325 #identity-popup-securityView-body > button {
329 #identity-popup-securityView-body > button {
330 margin-inline-start: 0;
331 margin-inline-end: 0;
334 /* TRACKING PROTECTION */
336 #tracking-protection-content {
337 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
340 #tracking-protection-content[state="loaded-tracking-content"] {
341 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
344 #tracking-action-block,
345 #tracking-action-unblock,
346 #tracking-action-unblock-private,
347 #identity-popup-securityView-body > button {
351 #tracking-protection-content[state] > #tracking-not-detected,
352 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
353 #main-window[privatebrowsingmode] #tracking-action-unblock,
354 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
355 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
356 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
357 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
358 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
359 #tracking-protection-content:not([state]) > #tracking-actions {
365 #identity-popup-permissions-content {
366 background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
367 padding-bottom: 1.5em;
370 #identity-popup-permissions-headline {
371 /* Make sure the label is as tall as the icon so that the permission list
372 which is aligned with the icon doesn't cover it up. */
376 #identity-popup-permission-list {
377 /* Offset the padding set on #identity-popup-permissions-content so that it
378 shows up just below the section. The permission icons are 16px wide and
379 should be right aligned with the section icon. */
380 margin-inline-start: calc(-1em - 16px);
383 .identity-popup-permission-item {
387 #identity-popup-permission-list:not(:empty) {
391 .identity-popup-permission-icon {
396 .identity-popup-permission-icon.in-use {
397 -moz-context-properties: fill;
399 animation: 1.5s ease in-use-blink infinite;
402 @keyframes in-use-blink {
406 .identity-popup-permission-label,
407 .identity-popup-permission-state-label {
408 /* We need to align the action buttons and permission icons with the text.
409 This is tricky because the icon height is defined in pixels, while the
410 font height can vary with platform and system settings, and at least on
411 Windows the default font metrics reserve more extra space for accents.
412 This value is a good compromise for different platforms and font sizes. */
416 .identity-popup-permission-label {
417 margin-inline-start: 1em;
420 .identity-popup-permission-state-label {
421 margin-inline-end: 5px;
426 .identity-popup-permission-remove-button {
432 background-color: transparent;
435 .identity-popup-permission-remove-button > .button-box {
439 .identity-popup-permission-remove-button > .button-box > .button-icon {
443 list-style-image: url(chrome://browser/skin/panel-icon-cancel.svg);
444 -moz-context-properties: fill;
448 .identity-popup-permission-remove-button > .button-box > .button-text {
452 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
453 background-color: #FFCF00;
456 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
460 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
461 background-color: #FF9F00;
464 /* === END panel.inc.css === */
466 .identity-popup-expander:-moz-focusring {
470 .identity-popup-expander:-moz-focusring > .button-box {
471 outline: 1px #008484 dotted;