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 /* 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] {
34 /* Hide redundant messages based on insecure login forms presence. */
35 #identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
38 #identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
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] {
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;
56 #identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
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. */
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;
67 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
71 .panel-mainview[panelid=identity-popup] {
75 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
76 transform: translateX(100%);
80 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
81 transform: translateX(-100%);
84 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
85 background: var(--panel-arrowcontent-background);
89 .identity-popup-section:not(:first-child) {
90 border-top: 1px solid var(--panel-separator-color);
93 #identity-popup-securityView,
94 #identity-popup-security-content,
95 #identity-popup-permissions-content,
96 #tracking-protection-content {
97 background-repeat: no-repeat;
98 background-position: 1em 1em;
99 background-size: 24px auto;
102 #identity-popup-security-content,
103 #identity-popup-permissions-content,
104 #tracking-protection-content {
105 padding: 0.5em 0 1em;
106 /* .identity-popup-headline.host depends on this width */
107 padding-inline-start: calc(2em + 24px);
108 padding-inline-end: 1em;
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;
120 .identity-popup-expander {
123 width: var(--identity-popup-expander-width);
124 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow");
125 background-size: 16px, auto;
126 background-position: center;
127 background-repeat: no-repeat;
128 background-color: transparent;
129 border-radius: 0 5px 5px 0;
132 .identity-popup-expander:-moz-locale-dir(rtl) {
133 transform: scaleX(-1);
136 .identity-popup-expander[panel-multiview-anchor] {
137 transition: background-color 250ms ease-in;
138 background-color: #008484;
139 background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
143 .identity-popup-expander > .button-box,
144 .identity-popup-expander > .button-box:focus {
146 border-radius: 0 5px 5px 0;
149 .identity-popup-expander[panel-multiview-anchor] > .button-box,
150 .identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
153 .identity-popup-expander:hover {
154 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
155 background-color: var(--arrowpanel-hover);
158 .identity-popup-expander:hover > .button-box > .button-icon {
159 filter: url(chrome://global/skin/filters.svg#fill);
163 .identity-popup-expander:hover:active {
164 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
165 background-color: var(--arrowpanel-active);
170 .identity-popup-permission-label,
171 .identity-popup-permission-state-label,
172 #identity-popup-security-content > description,
173 #identity-popup-security-descriptions > description,
174 #identity-popup-securityView-header > description,
175 #identity-popup-securityView-body > description,
176 #identity-popup-permissions-content > description,
177 #tracking-protection-content > label,
178 .identity-popup-text {
179 white-space: pre-wrap;
184 .identity-popup-headline {
189 .identity-popup-headline.host {
190 word-wrap: break-word;
191 /* 1em + 2em + 24px is #identity-popup-security-content padding
192 * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
193 max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
196 .identity-popup-warning-gray {
197 padding-inline-start: 24px;
198 background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
201 .identity-popup-warning-yellow {
202 padding-inline-start: 24px;
203 background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
206 .identity-popup-warning-gray:-moz-locale-dir(rtl),
207 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
208 background-position: 100% 50%;
213 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
217 .identity-popup-connection-secure {
221 .identity-popup-connection-not-secure {
225 #identity-popup-security-content.chromeUI {
226 background-image: url(chrome://branding/content/icon48.png);
229 /* SECURITY SUBVIEW */
231 #identity-popup-securityView {
235 #identity-popup-securityView,
236 #identity-popup-security-content {
237 background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
240 #identity-popup[connection=chrome] #identity-popup-securityView,
241 #identity-popup[connection=chrome] #identity-popup-security-content {
242 background-image: url(chrome://branding/content/icon48.png);
245 #identity-popup[connection^=secure] #identity-popup-securityView,
246 #identity-popup[connection^=secure] #identity-popup-security-content {
247 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
250 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
251 #identity-popup[ciphers=weak] #identity-popup-securityView,
252 #identity-popup[ciphers=weak] #identity-popup-security-content,
253 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
254 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
255 background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
258 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
259 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
260 background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
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-security-descriptions > description {
275 #identity-popup-securityView-header,
276 #identity-popup-securityView-body {
277 margin-inline-start: calc(2em + 24px);
278 margin-inline-end: 1em;
281 #identity-popup-securityView-header {
283 border-bottom: 1px solid var(--panel-separator-color);
287 #identity-popup-securityView-body {
288 padding-inline-end: 1em;
291 #identity-popup-securityView-footer {
293 background-color: var(--arrowpanel-dimmed);
296 #identity-popup-securityView-footer > button {
299 #identity-popup-securityView-footer > button:hover,
300 #identity-popup-securityView-footer > button:focus {
303 #identity-popup-securityView-footer > button:hover:active {
306 #identity-popup-content-verifier ~ description {
311 description#identity-popup-content-verified-by,
312 description#identity-popup-content-owner,
313 description#identity-popup-content-verifier,
314 #identity-popup-securityView-body > button {
318 #identity-popup-securityView-body > button {
319 margin-inline-start: 0;
320 margin-inline-end: 0;
323 /* TRACKING PROTECTION */
325 #tracking-protection-content {
326 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
329 #tracking-protection-content[state="loaded-tracking-content"] {
330 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
333 #tracking-action-block,
334 #tracking-action-unblock,
335 #tracking-action-unblock-private,
336 #identity-popup-securityView-body > button {
340 #tracking-protection-content[state] > #tracking-not-detected,
341 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
342 #main-window[privatebrowsingmode] #tracking-action-unblock,
343 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
344 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
345 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
346 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
347 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
348 #tracking-protection-content:not([state]) > #tracking-actions {
354 #identity-popup-permissions-content {
355 background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
358 #identity-popup-permissions-headline {
359 /* Make sure the label is as tall as the icon so that the permission list
360 which is aligned with the icon doesn't cover it up. */
364 #identity-popup-permission-list {
365 /* Offset the padding set on #identity-popup-permissions-content so that it
366 shows up just below the section. The permission icons are 16px wide and
367 should be right aligned with the section icon. */
368 margin-inline-start: calc(-1em - 16px);
371 .identity-popup-permission-item {
375 #identity-popup-permission-list:not(:empty) {
379 .identity-popup-permission-icon {
384 .identity-popup-permission-icon.in-use {
386 animation: 1.5s ease in-use-blink infinite;
389 @keyframes in-use-blink {
393 .identity-popup-permission-label,
394 .identity-popup-permission-state-label {
395 /* We need to align the action buttons and permission icons with the text.
396 This is tricky because the icon height is defined in pixels, while the
397 font height can vary with platform and system settings, and at least on
398 Windows the default font metrics reserve more extra space for accents.
399 This value is a good compromise for different platforms and font sizes. */
403 .identity-popup-permission-label {
404 margin-inline-start: 1em;
407 .identity-popup-permission-state-label {
408 margin-inline-end: 5px;
413 .identity-popup-permission-remove-button {
419 background-color: transparent;
422 .identity-popup-permission-remove-button > .button-box {
426 .identity-popup-permission-remove-button > .button-box > .button-icon {
430 list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
431 filter: url(chrome://global/skin/filters.svg#fill);
435 .identity-popup-permission-remove-button > .button-box > .button-text {
439 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
440 background-color: #FFCF00;
443 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
447 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
448 background-color: #FF9F00;
451 /* === END panel.inc.css === */
453 .identity-popup-expander:-moz-focusring {
457 .identity-popup-expander:-moz-focusring > .button-box {
458 outline: 1px #008484 dotted;