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 > description,
 176 .identity-popup-text {
 177   font-size: 110%;
 178   margin: 0;
 179 }
 180
 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;
 184 }
 185
 186 .identity-popup-headline {
 187   margin: 3px 0 4px;
 188   font-size: 150%;
 189 }
 190
 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))
 196 }
 197
 198 .identity-popup-warning-gray {
 199   padding-inline-start: 24px;
 200   background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
 201 }
 202
 203 .identity-popup-warning-yellow {
 204   padding-inline-start: 24px;
 205   background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
 206 }
 207
 208 .identity-popup-warning-gray:-moz-locale-dir(rtl),
 209 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
 210   background-position: 100% 50%;
 211 }
 212
 213 /* SECURITY */
 214
 215 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
 216   margin: 2px 0 4px;
 217 }
 218
 219 .identity-popup-connection-secure {
 220   color: #008484;
 221 }
 222
 223 .identity-popup-connection-not-secure {
 224   color: #9C9CFF;
 225 }
 226
 227 #identity-popup-security-content.chromeUI {
 228   background-image: url(chrome://branding/content/icon48.png);
 229 }
 230
 231 /* SECURITY SUBVIEW */
 232
 233 #identity-popup-securityView {
 234   overflow: hidden;
 235 }
 236
 237 #identity-popup-securityView,
 238 #identity-popup-security-content {
 239   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 240 }
 241
 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);
 245 }
 246
 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);
 250 }
 251
 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);
 258 }
 259
 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;
 264   fill: #A09090;
 265 }
 266
 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);
 272 }
 273
 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;
 278   fill: #008484;
 279 }
 280
 281 #identity-popup-security-descriptions > description {
 282   margin-top: 6px;
 283   color: #A09090;
 284 }
 285
 286 #identity-popup-securityView-header,
 287 #identity-popup-securityView-body {
 288   margin-inline-start: calc(2em + 24px);
 289   margin-inline-end: 1em;
 290 }
 291
 292 #identity-popup-securityView-header {
 293   margin-top: 0.5em;
 294   border-bottom: 1px solid var(--panel-separator-color);
 295   padding-bottom: 1em;
 296 }
 297
 298 #identity-popup-securityView-body {
 299   padding-inline-end: 1em;
 300 }
 301
 302 #identity-popup-securityView-footer {
 303   margin-top: 1em;
 304   background-color: var(--arrowpanel-dimmed);
 305 }
 306
 307 #identity-popup-securityView-footer > button {
 308 }
 309
 310 #identity-popup-securityView-footer > button:hover,
 311 #identity-popup-securityView-footer > button:focus {
 312 }
 313
 314 #identity-popup-securityView-footer > button:hover:active {
 315 }
 316
 317 #identity-popup-content-verifier ~ description {
 318   margin-top: 1em;
 319   color: #A09090;
 320 }
 321
 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 {
 326   margin-top: 1em;
 327 }
 328
 329 #identity-popup-securityView-body > button {
 330   margin-inline-start: 0;
 331   margin-inline-end: 0;
 332 }
 333
 334 /* TRACKING PROTECTION */
 335
 336 #tracking-protection-content {
 337   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
 338 }
 339
 340 #tracking-protection-content[state="loaded-tracking-content"]  {
 341   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
 342 }
 343
 344 #tracking-action-block,
 345 #tracking-action-unblock,
 346 #tracking-action-unblock-private,
 347 #identity-popup-securityView-body > button {
 348   margin: 1em 0 0;
 349 }
 350
 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 {
 360   display: none;
 361 }
 362
 363 /* PERMISSIONS */
 364
 365 #identity-popup-permissions-content {
 366   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 367   padding-bottom: 1.5em;
 368 }
 369
 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. */
 373   min-height: 24px;
 374 }
 375
 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);
 381 }
 382
 383 .identity-popup-permission-item {
 384   min-height: 24px;
 385 }
 386
 387 #identity-popup-permission-list:not(:empty) {
 388   margin-top: 5px;
 389 }
 390
 391 .identity-popup-permission-icon {
 392   width: 16px;
 393   height: 16px;
 394 }
 395
 396 .identity-popup-permission-icon.in-use {
 397   -moz-context-properties: fill;
 398   fill: #FF0000;
 399   animation: 1.5s ease in-use-blink infinite;
 400 }
 401
 402 @keyframes in-use-blink {
 403   50% { opacity: 0; }
 404 }
 405
 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. */
 413   margin-top: -0.1em;
 414 }
 415
 416 .identity-popup-permission-label {
 417   margin-inline-start: 1em;
 418 }
 419
 420 .identity-popup-permission-state-label {
 421   margin-inline-end: 5px;
 422   text-align: end;
 423   color: #A09090;
 424 }
 425
 426 .identity-popup-permission-remove-button {
 427   margin: 0;
 428   border-width: 0;
 429   border-radius: 50%;
 430   min-width: 0;
 431   padding: 2px;
 432   background-color: transparent;
 433 }
 434
 435 .identity-popup-permission-remove-button > .button-box {
 436   padding: 0;
 437 }
 438
 439 .identity-popup-permission-remove-button > .button-box > .button-icon {
 440   margin: 0;
 441   width: 16px;
 442   height: 16px;
 443   list-style-image: url(chrome://browser/skin/panel-icon-cancel.svg);
 444   -moz-context-properties: fill;
 445   fill: #A09090;
 446 }
 447
 448 .identity-popup-permission-remove-button > .button-box > .button-text {
 449   display: none;
 450 }
 451
 452 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
 453   background-color: #FFCF00;
 454 }
 455
 456 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
 457   fill: #000000;
 458 }
 459
 460 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
 461   background-color: #FF9F00;
 462 }
 463
 464 /* === END panel.inc.css === */
 465
 466 .identity-popup-expander:-moz-focusring {
 467   padding: 1px;
 468 }
 469
 470 .identity-popup-expander:-moz-focusring > .button-box {
 471   outline: 1px #008484 dotted;
 472 }