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 -moz-padding-start: calc(2em + 24px);
108 -moz-padding-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: #FFCF00;
158 .identity-popup-expander:hover:active {
159 background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
160 background-color: #FF9F00;
165 #identity-popup-security-content > description,
166 #identity-popup-security-descriptions > description,
167 #identity-popup-securityView-header > description,
168 #identity-popup-securityView-body > description,
169 #identity-popup-permissions-content > description,
170 #tracking-protection-content > label,
171 .identity-popup-text {
172 white-space: pre-wrap;
177 .identity-popup-headline {
182 .identity-popup-headline.host {
183 word-wrap: break-word;
184 /* 1em + 2em + 24px is #identity-popup-security-content padding
185 * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
186 max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
189 .identity-popup-warning-gray {
190 -moz-padding-start: 24px;
191 background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
194 .identity-popup-warning-yellow {
195 -moz-padding-start: 24px;
196 background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
199 .identity-popup-warning-gray:-moz-locale-dir(rtl),
200 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
201 background-position: 100% 50%;
206 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
210 .identity-popup-connection-secure {
214 .identity-popup-connection-not-secure {
218 #identity-popup-security-content.chromeUI {
219 background-image: url(chrome://branding/content/icon48.png);
222 /* SECURITY SUBVIEW */
224 #identity-popup-securityView {
228 #identity-popup-securityView,
229 #identity-popup-security-content {
230 background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
233 #identity-popup[connection=chrome] #identity-popup-securityView,
234 #identity-popup[connection=chrome] #identity-popup-security-content {
235 background-image: url(chrome://branding/content/icon48.png);
238 #identity-popup[connection^=secure] #identity-popup-securityView,
239 #identity-popup[connection^=secure] #identity-popup-security-content {
240 background-image: url(chrome://browser/skin/controlcenter/conn-secure.svg);
243 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
244 #identity-popup[ciphers=weak] #identity-popup-securityView,
245 #identity-popup[ciphers=weak] #identity-popup-security-content,
246 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
247 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
248 background-image: url(chrome://browser/skin/controlcenter/conn-degraded.svg);
251 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
252 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
253 background-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
256 #identity-popup[loginforms=insecure] #identity-popup-securityView,
257 #identity-popup[loginforms=insecure] #identity-popup-security-content,
258 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
259 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
260 background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
263 #identity-popup-security-descriptions > description {
268 #identity-popup-securityView-header,
269 #identity-popup-securityView-body {
270 -moz-margin-start: calc(2em + 24px);
271 -moz-margin-end: 1em;
274 #identity-popup-securityView-header {
276 border-bottom: 1px solid var(--panel-separator-color);
280 #identity-popup-securityView-body {
281 -moz-padding-end: 1em;
284 #identity-popup-securityView-footer {
286 background-color: #402000;
289 #identity-popup-securityView-footer > button {
292 #identity-popup-securityView-footer > button:hover,
293 #identity-popup-securityView-footer > button:focus {
296 #identity-popup-securityView-footer > button:hover:active {
299 #identity-popup-content-verifier ~ description {
304 description#identity-popup-content-verified-by,
305 description#identity-popup-content-owner,
306 description#identity-popup-content-verifier,
307 #identity-popup-securityView-body > button {
311 #identity-popup-securityView-body > button {
312 margin-inline-start: 0;
313 margin-inline-end: 0;
316 /* TRACKING PROTECTION */
318 #tracking-protection-content {
319 background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
322 #tracking-protection-content[state="loaded-tracking-content"] {
323 background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
326 #tracking-action-block,
327 #tracking-action-unblock,
328 #tracking-action-unblock-private,
329 #identity-popup-securityView-body > button {
333 #tracking-protection-content[state] > #tracking-not-detected,
334 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
335 #main-window[privatebrowsingmode] #tracking-action-unblock,
336 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
337 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
338 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
339 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
340 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
341 #tracking-protection-content:not([state]) > #tracking-actions {
347 #identity-popup-permissions-content {
348 background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
351 #identity-popup-permission-list menulist {
355 #identity-popup-permission-list:not(:empty) {
359 #identity-popup-permission-list:not(:empty) + description {
363 .identity-popup-permission-label {
364 -moz-margin-start: 0;
365 word-wrap: break-word;
368 /* === END panel.inc.css === */
370 .identity-popup-expander:-moz-focusring {
374 .identity-popup-expander:-moz-focusring > .button-box {
375 outline: 1px #008484 dotted;