some corrections and finishing touches to that LCARStrek works well for Firefox 55...

[themes.git] / LCARStrek / browser / controlcenter / panel.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* === BEGIN panel.inc.css === */

/* Hide all conditional elements by default. */
:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
  display: none;
}

/* Show the right elements for the right connection states. */
#identity-popup[connection=not-secure] [when-connection~=not-secure],
#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
#identity-popup[connection=secure-ev] [when-connection~=secure-ev],
#identity-popup[connection=secure] [when-connection~=secure],
#identity-popup[connection=chrome] [when-connection~=chrome],
#identity-popup[connection=file] [when-connection~=file],
#identity-popup[connection=extension] [when-connection~=extension],
/* Show insecure login forms messages when needed. */
#identity-popup[loginforms=insecure] [when-loginforms=insecure],
/* Show weak cipher messages when needed. */
#identity-popup[ciphers=weak] [when-ciphers~=weak],
/* Show mixed content warnings when needed */
#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
/* Show the right elements when there is mixed passive content loaded and active blocked. */
#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
/* Show 'disable MCB' button always when there is mixed active content blocked. */
#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
  display: inherit;
}

/* Hide redundant messages based on insecure login forms presence. */
#identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
  display: none;
}
#identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
  display: none;
}

/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
#identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure],
/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
#identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
  display: none;
}

/* Make sure hidden elements don't accidentally become visible from one of the
   above selectors (see Bug 1194258) */
#identity-popup [hidden] {
  display: none !important;
}

#identity-popup,
#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
  /* Tiny hack to ensure the panel shrinks back to its original
     size after closing a subview that is bigger than the main view. */
  max-height: 0;
}

.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
  -moz-user-focus: ignore;
}

#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
}

.panel-mainview[panelid=identity-popup] {
  min-width: 30em;
}

#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
  transform: translateX(100%);
  box-shadow: none;
}

#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  transform: translateX(-100%);
}

#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  background: var(--arrowpanel-background);
  padding: 0;
}

.identity-popup-section:not(:first-child) {
  border-top: 1px solid var(--panel-separator-color);
}

#identity-popup-securityView,
#identity-popup-security-content,
#identity-popup-permissions-content,
#tracking-protection-content {
  background-repeat: no-repeat;
  background-position: 1em 1em;
  background-size: 24px auto;
}

#identity-popup-security-content,
#identity-popup-permissions-content,
#tracking-protection-content {
  padding: 0.5em 0 1em;
  /* .identity-popup-host depends on this width */
  padding-inline-start: calc(2em + 24px);
  padding-inline-end: 1em;
}

#identity-popup-securityView:-moz-locale-dir(rtl),
#identity-popup-security-content:-moz-locale-dir(rtl),
#identity-popup-permissions-content:-moz-locale-dir(rtl),
#tracking-protection-content:-moz-locale-dir(rtl) {
  background-position: calc(100% - 1em) 1em;
}

/* EXPAND BUTTON */

.identity-popup-expander {
  margin: 0;
  min-width: auto;
  width: var(--identity-popup-expander-width);
  background: url("chrome://browser/skin/controlcenter/arrow-subview.svg") center no-repeat;
  background-size: 16px;
  border-radius: 0 5px 5px 0;
}

.identity-popup-expander:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.identity-popup-expander[panel-multiview-anchor] {
  transition: background-color 250ms ease-in;
  background-color: #008484;
  background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
  color: #000000;
}

.identity-popup-expander > .button-box,
.identity-popup-expander > .button-box:focus {
  padding: 4px 0;
  border-radius: 0 5px 5px 0;
}

.identity-popup-expander[panel-multiview-anchor] > .button-box,
.identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
}

.identity-popup-expander:hover {
  background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
  background-color: var(--arrowpanel-hover);
}

.identity-popup-expander:hover > .button-box > .button-icon {
  filter: url(chrome://global/skin/filters.svg#fill);
  fill: #000000;
}

.identity-popup-expander:hover:active {
  background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
  background-color: var(--arrowpanel-active);
}

/* CONTENT */

.identity-popup-permission-label,
.identity-popup-permission-state-label,
#identity-popup-security-content > description,
#identity-popup-security-descriptions > description,
#identity-popup-securityView-header > description,
#identity-popup-securityView-body > description,
#identity-popup-permissions-content > description,
#tracking-protection-content > description,
.identity-popup-text {
  font-size: 110%;
  margin: 0;
}

/* This element needs the pre-wrap because we add newlines to it in the code. */
#identity-popup-content-supplemental {
  white-space: pre-wrap;
}

.identity-popup-headline {
  margin: 3px 0 4px;
  font-size: 150%;
}

.identity-popup-host {
  word-wrap: break-word;
  /* 1em + 2em + 24px is #identity-popup-security-content padding
   * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
  max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
}

.identity-popup-warning-gray {
  padding-inline-start: 24px;
  background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
}

.identity-popup-warning-yellow {
  padding-inline-start: 24px;
  background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
}

.identity-popup-warning-gray:-moz-locale-dir(rtl),
.identity-popup-warning-yellow:-moz-locale-dir(rtl) {
  background-position: 100% 50%;
}

/* SECURITY */

#identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
  margin: 2px 0 4px;
}

.identity-popup-connection-secure {
  color: #008484;
}

.identity-popup-connection-not-secure {
  color: #9C9CFF;
}

#identity-popup-security-content.chromeUI {
  background-image: url(chrome://branding/content/icon48.png);
}

/* SECURITY SUBVIEW */

#identity-popup-securityView {
  overflow: hidden;
}

#identity-popup-securityView,
#identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
}

#identity-popup[connection=chrome] #identity-popup-securityView,
#identity-popup[connection=chrome] #identity-popup-security-content {
  background-image: url(chrome://branding/content/icon48.png);
}

#identity-popup[connection^=secure] #identity-popup-securityView,
#identity-popup[connection^=secure] #identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
}

/* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
#identity-popup[ciphers=weak] #identity-popup-securityView,
#identity-popup[ciphers=weak] #identity-popup-security-content,
#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
}

#identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
#identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
  background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg);
  -moz-context-properties: fill;
  fill: #A09090;
}

#identity-popup[loginforms=insecure] #identity-popup-securityView,
#identity-popup[loginforms=insecure] #identity-popup-security-content,
#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
}

#identity-popup[connection=extension] #identity-popup-securityView,
#identity-popup[connection=extension] #identity-popup-security-content {
  background-image: url(chrome://browser/skin/controlcenter/extension.svg);
  -moz-context-properties: fill;
  fill: #008484;
}

#identity-popup-security-descriptions > description {
  margin-top: 6px;
  color: #A09090;
}

#identity-popup-securityView-header,
#identity-popup-securityView-body {
  margin-inline-start: calc(2em + 24px);
  margin-inline-end: 1em;
}

#identity-popup-securityView-header {
  margin-top: 0.5em;
  border-bottom: 1px solid var(--panel-separator-color);
  padding-bottom: 1em;
}

#identity-popup-securityView-body {
  padding-inline-end: 1em;
}

#identity-popup-securityView-footer {
  margin-top: 1em;
  background-color: var(--arrowpanel-dimmed);
}

#identity-popup-securityView-footer > button {
}

#identity-popup-securityView-footer > button:hover,
#identity-popup-securityView-footer > button:focus {
}

#identity-popup-securityView-footer > button:hover:active {
}

#identity-popup-content-verifier ~ description {
  margin-top: 1em;
  color: #A09090;
}

description#identity-popup-content-verified-by,
description#identity-popup-content-owner,
description#identity-popup-content-verifier,
#identity-popup-securityView-body > button {
  margin-top: 1em;
}

#identity-popup-securityView-body > button {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* TRACKING PROTECTION */

#tracking-protection-content {
  background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
}

#tracking-protection-content[state="loaded-tracking-content"]  {
  background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
}

#tracking-action-block,
#tracking-action-unblock,
#tracking-action-unblock-private,
#identity-popup-securityView-body > button {
  margin: 1em 0 0;
}

#tracking-protection-content[state] > #tracking-not-detected,
#tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
#main-window[privatebrowsingmode] #tracking-action-unblock,
#main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
#tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
#tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
#tracking-protection-content:not([state]) > #tracking-actions {
  display: none;
}

/* PERMISSIONS */

#identity-popup-permissions-content {
  background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
  padding-bottom: 1.5em;
}

#identity-popup-permissions-headline {
  /* Make sure the label is as tall as the icon so that the permission list
     which is aligned with the icon doesn't cover it up. */
  min-height: 24px;
}

#identity-popup-permission-list {
  /* Offset the padding set on #identity-popup-permissions-content so that it
     shows up just below the section. The permission icons are 16px wide and
     should be right aligned with the section icon. */
  margin-inline-start: calc(-1em - 16px);
}

.identity-popup-permission-item {
  min-height: 24px;
}

#identity-popup-permission-list:not(:empty) {
  margin-top: 5px;
}

.identity-popup-permission-icon {
  width: 16px;
  height: 16px;
}

.identity-popup-permission-icon.in-use {
  -moz-context-properties: fill;
  fill: #FF0000;
  animation: 1.5s ease in-use-blink infinite;
}

@keyframes in-use-blink {
  50% { opacity: 0; }
}

.identity-popup-permission-label,
.identity-popup-permission-state-label {
  /* We need to align the action buttons and permission icons with the text.
     This is tricky because the icon height is defined in pixels, while the
     font height can vary with platform and system settings, and at least on
     Windows the default font metrics reserve more extra space for accents.
     This value is a good compromise for different platforms and font sizes. */
  margin-top: -0.1em;
}

.identity-popup-permission-label {
  margin-inline-start: 1em;
}

.identity-popup-permission-state-label {
  margin-inline-end: 5px;
  text-align: end;
  color: #A09090;
}

.identity-popup-permission-remove-button {
  margin: 0;
  border-width: 0;
  border-radius: 50%;
  min-width: 0;
  padding: 2px;
  background-color: transparent;
}

.identity-popup-permission-remove-button > .button-box {
  padding: 0;
}

.identity-popup-permission-remove-button > .button-box > .button-icon {
  margin: 0;
  width: 16px;
  height: 16px;
  list-style-image: url(chrome://browser/skin/panel-icon-cancel.svg);
  -moz-context-properties: fill;
  fill: #A09090;
}

.identity-popup-permission-remove-button > .button-box > .button-text {
  display: none;
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover {
  background-color: #FFCF00;
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
  fill: #000000;
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
  background-color: #FF9F00;
}

/* === END panel.inc.css === */

.identity-popup-expander:-moz-focusring {
  padding: 1px;
}

.identity-popup-expander:-moz-focusring > .button-box {
  outline: 1px #008484 dotted;
}