LCARStrek/browser/controlcenter/panel.css

   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],
  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] {
  32   display: inherit;
  33 }
  34
  35 /* Hide redundant messages based on insecure login forms presence. */
  36 #identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
  37   display: none;
  38 }
  39 #identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
  40   display: none;
  41 }
  42
  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] {
  47   display: none;
  48 }
  49
  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;
  54 }
  55
  56 #identity-popup,
  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. */
  60   max-height: 0;
  61 }
  62
  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;
  66 }
  67
  68 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
  69   padding: 0;
  70 }
  71
  72 .panel-mainview[panelid=identity-popup] {
  73   min-width: 30em;
  74 }
  75
  76 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
  77   transform: translateX(100%);
  78   box-shadow: none;
  79 }
  80
  81 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  82   transform: translateX(-100%);
  83 }
  84
  85 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  86   background: var(--arrowpanel-background);
  87   padding: 0;
  88 }
  89
  90 .identity-popup-section:not(:first-child) {
  91   border-top: 1px solid var(--panel-separator-color);
  92 }
  93
  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;
 101 }
 102
 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;
 110 }
 111
 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;
 117 }
 118
 119 /* EXPAND BUTTON */
 120
 121 .identity-popup-expander {
 122   margin: 0;
 123   min-width: auto;
 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;
 128 }
 129
 130 .identity-popup-expander:-moz-locale-dir(rtl) {
 131   transform: scaleX(-1);
 132 }
 133
 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");
 138   color: #000000;
 139 }
 140
 141 .identity-popup-expander > .button-box,
 142 .identity-popup-expander > .button-box:focus {
 143   padding: 4px 0;
 144   border-radius: 0 5px 5px 0;
 145 }
 146
 147 .identity-popup-expander[panel-multiview-anchor] > .button-box,
 148 .identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
 149 }
 150
 151 .identity-popup-expander:hover {
 152   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 153   background-color: var(--arrowpanel-hover);
 154 }
 155
 156 .identity-popup-expander:hover > .button-box > .button-icon {
 157   filter: url(chrome://global/skin/filters.svg#fill);
 158   fill: #000000;
 159 }
 160
 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);
 164 }
 165
 166 /* CONTENT */
 167
 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;
 178   font-size: 110%;
 179   margin: 0;
 180 }
 181
 182 .identity-popup-headline {
 183   margin: 3px 0 4px;
 184   font-size: 150%;
 185 }
 186
 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))
 192 }
 193
 194 .identity-popup-warning-gray {
 195   padding-inline-start: 24px;
 196   background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
 197 }
 198
 199 .identity-popup-warning-yellow {
 200   padding-inline-start: 24px;
 201   background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
 202 }
 203
 204 .identity-popup-warning-gray:-moz-locale-dir(rtl),
 205 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
 206   background-position: 100% 50%;
 207 }
 208
 209 /* SECURITY */
 210
 211 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
 212   margin: 2px 0 4px;
 213 }
 214
 215 .identity-popup-connection-secure {
 216   color: #008484;
 217 }
 218
 219 .identity-popup-connection-not-secure {
 220   color: #9C9CFF;
 221 }
 222
 223 #identity-popup-security-content.chromeUI {
 224   background-image: url(chrome://branding/content/icon48.png);
 225 }
 226
 227 /* SECURITY SUBVIEW */
 228
 229 #identity-popup-securityView {
 230   overflow: hidden;
 231 }
 232
 233 #identity-popup-securityView,
 234 #identity-popup-security-content {
 235   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 236 }
 237
 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);
 241 }
 242
 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);
 246 }
 247
 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);
 254 }
 255
 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;
 260   fill: #A09090;
 261 }
 262
 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);
 268 }
 269
 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;
 274   fill: #008484;
 275 }
 276
 277 #identity-popup-security-descriptions > description {
 278   margin-top: 6px;
 279   color: #A09090;
 280 }
 281
 282 #identity-popup-securityView-header,
 283 #identity-popup-securityView-body {
 284   margin-inline-start: calc(2em + 24px);
 285   margin-inline-end: 1em;
 286 }
 287
 288 #identity-popup-securityView-header {
 289   margin-top: 0.5em;
 290   border-bottom: 1px solid var(--panel-separator-color);
 291   padding-bottom: 1em;
 292 }
 293
 294 #identity-popup-securityView-body {
 295   padding-inline-end: 1em;
 296 }
 297
 298 #identity-popup-securityView-footer {
 299   margin-top: 1em;
 300   background-color: var(--arrowpanel-dimmed);
 301 }
 302
 303 #identity-popup-securityView-footer > button {
 304 }
 305
 306 #identity-popup-securityView-footer > button:hover,
 307 #identity-popup-securityView-footer > button:focus {
 308 }
 309
 310 #identity-popup-securityView-footer > button:hover:active {
 311 }
 312
 313 #identity-popup-content-verifier ~ description {
 314   margin-top: 1em;
 315   color: #A09090;
 316 }
 317
 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 {
 322   margin-top: 1em;
 323 }
 324
 325 #identity-popup-securityView-body > button {
 326   margin-inline-start: 0;
 327   margin-inline-end: 0;
 328 }
 329
 330 /* TRACKING PROTECTION */
 331
 332 #tracking-protection-content {
 333   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
 334 }
 335
 336 #tracking-protection-content[state="loaded-tracking-content"]  {
 337   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
 338 }
 339
 340 #tracking-action-block,
 341 #tracking-action-unblock,
 342 #tracking-action-unblock-private,
 343 #identity-popup-securityView-body > button {
 344   margin: 1em 0 0;
 345 }
 346
 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 {
 356   display: none;
 357 }
 358
 359 /* PERMISSIONS */
 360
 361 #identity-popup-permissions-content {
 362   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 363 }
 364
 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. */
 368   min-height: 24px;
 369 }
 370
 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);
 376 }
 377
 378 .identity-popup-permission-item {
 379   min-height: 24px;
 380 }
 381
 382 #identity-popup-permission-list:not(:empty) {
 383   margin-top: 5px;
 384 }
 385
 386 .identity-popup-permission-icon {
 387   width: 16px;
 388   height: 16px;
 389 }
 390
 391 .identity-popup-permission-icon.in-use {
 392   animation: 1.5s ease in-use-blink infinite;
 393 }
 394
 395 @keyframes in-use-blink {
 396   50% { opacity: 0; }
 397 }
 398
 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. */
 406   margin-top: -0.1em;
 407 }
 408
 409 .identity-popup-permission-label {
 410   margin-inline-start: 1em;
 411 }
 412
 413 .identity-popup-permission-state-label {
 414   margin-inline-end: 5px;
 415   text-align: end;
 416   color: #A09090;
 417 }
 418
 419 .identity-popup-permission-remove-button {
 420   margin: 0;
 421   border-width: 0;
 422   border-radius: 50%;
 423   min-width: 0;
 424   padding: 2px;
 425   background-color: transparent;
 426 }
 427
 428 .identity-popup-permission-remove-button > .button-box {
 429   padding: 0;
 430 }
 431
 432 .identity-popup-permission-remove-button > .button-box > .button-icon {
 433   margin: 0;
 434   width: 16px;
 435   height: 16px;
 436   list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
 437   filter: url(chrome://global/skin/filters.svg#fill);
 438   fill: #A09090;
 439 }
 440
 441 .identity-popup-permission-remove-button > .button-box > .button-text {
 442   display: none;
 443 }
 444
 445 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
 446   background-color: #FFCF00;
 447 }
 448
 449 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
 450   fill: #000000;
 451 }
 452
 453 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
 454   background-color: #FF9F00;
 455 }
 456
 457 /* === END panel.inc.css === */
 458
 459 .identity-popup-expander:-moz-focusring {
 460   padding: 1px;
 461 }
 462
 463 .identity-popup-expander:-moz-focusring > .button-box {
 464   outline: 1px #008484 dotted;
 465 }