common.css

@import url("./variables.css");

body {
  direction: __MSG_@@bidi_dir__;
}

/* https://design.firefox.com/photon/components/links.html */
a {
  color: var(--blue-60);
  text-decoration: none;
}

a:focus {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
}

a:hover, a:active {
  text-decoration: underline;
}

a:active {
  color: var(--blue-70);
}

/* external link symbol */
/* currently disabled, because it is not clear what an external link is, in our case */
/*a:not([class])[href*="//"]::after {
  background-image: url(/common/img/open-in-new.svg);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  content: "";
  display: inline-block;
  height: 16px;
  margin: -.3rem .15rem 0 .25rem;
  vertical-align: middle;
  width: 16px;
}*/

.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* small classes in order to avoid inline CSS */
.invisible {
  display: none !important;
}

.message-container {
  position: relative;
}

/* add padding when element appears before message */
* + .message-container {
  padding-top: 8px;
}

/* hides whole element getting rid of margin/paddings, if they contain only hidden childs
   see https://stackoverflow.com/a/79145153/5008962
*/
@supports(selector(:has(div))) {
  .message-container {
    display: none
  }

  /* "unhides" all elements that contain at least one visible element */
  .message-container:has(> :not(.invisible)) {
    display: block;
  }
}

/* buttons https://design.firefox.com/photon/components/buttons.html */
.micro-button {
  min-height: 24px;
  height: auto;
  border-radius: 2px;

  padding-left: 8px;
  padding-right: 8px;

  /* not documented, but looks ugly otherwise */
  padding-top: 2px;
  padding-bottom: 2px;

  box-sizing: content-box;

  /* do not break over multiple lines */
  /* white-space: nowrap; */
  height: auto; /* currently, we rather prefer breaking until https://github.com/rugk/offline-qr-code/issues/12 is done */
}

/* use light color for dark backgrounds */
.micro-button:hover.success,
.micro-button:active.success,
.micro-button:hover.warning,
.micro-button:active.warning,
.micro-button:hover.error,
.micro-button:active.error {
  color: var(--white-100);
}

.micro-button.info {
  background-color: var(--grey-90-a10);
}
.micro-button:hover.info {
  background-color: var(--grey-90-a20);
}
.micro-button:active.info {
  background-color: var(--grey-90-a30);
}

.micro-button.success {
  background-color: var(--green-60);
}
.micro-button:hover.success {
  background-color: var(--green-70);
}
.micro-button:active.success {
  background-color: var(--green-80);
}

.micro-button.warning {
  background-color: var(--yellow-60);
}
.micro-button:hover.warning {
  background-color: var(--yellow-70);
}
.micro-button:active.warning {
  background-color: var(--yellow-80);
}

.micro-button.error {
  background-color: var(--red-70);
  color: var(--white-100);
}
.micro-button:hover.error {
  background-color: var(--red-80);
}
.micro-button:active.error {
  background-color: var(--red-90);
}

.micro-button:focus {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3)
}

/* message box */
/* follows https://design.firefox.com/photon/components/message-bars.html */
.message-box {
  padding: 4px;

  border-radius: 4px;

  /* use whole width */
  width: calc(100% - 8px);
  min-height: 32px;

  /* make errors selectable, so users can copy them */
  -moz-user-select: text;
  user-select: text;
  cursor: text;

  /* multiline */
  hyphens: auto;
  overflow-wrap: break-word;

  /* center-vertically */
  display: flex;
  align-items: center;

  z-index: 2;

  /* fade-in transition */
  /* follow https://design.firefox.com/photon/motion/duration-and-easing.html */
  opacity: 1;
  max-height: 100px;

  transition: opacity 150ms cubic-bezier(.07,.95,0,1),
              max-height 200ms cubic-bezier(.07,.95,0,1);
}
.message-box.fade-hide {
  max-height: 0px;
  opacity: 0;
  min-height: 0px;
}

/* add margin when messages are stacked on each other */
.message-box:not(.invisible) ~ .message-box:not(.invisible) {
  margin-top: 8px;
}

.error {
  color: var(--white-100);
  background-color: var(--red-60);
}

.info {
  color: var(--grey-90);
  background-color: var(--grey-20);
}

.success {
  color: var(--green-90);
  background-color: var(--green-50);
}

.warning {
  color: var(--yellow-90);
  background-color: var(--yellow-50);
}

/* message box action button */
.message-action-button {
  margin-left: 8px;

  /* center vertially */
  margin-top: auto;
  margin-bottom: auto;

  /* some minimum margin to dismiss button or similar */
  margin-right: 4px;

  border: 0;
  color: var(--grey-90);

  cursor: pointer;
}

/* icons for the message boxes */
.message-box::before {
  display: inline-block;

  /* fixed size */
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;

  content: "";
  margin: 4px;
}

.error::before {
  background-image: url('/common/img/error-white.svg');
}
.info::before {
  background-image: url('/common/img/info-dark.svg');
}
.success::before {
  background-image: url('/common/img/check.svg');
}
.warning::before {
  background-image: url('/common/img/warning-dark.svg');
}

.icon-dismiss {
  box-sizing: content-box;
  padding: 2px;

  width: 24px;
  height: 24px;

  margin-left: auto;
  cursor: pointer;

  /* some animation on hover */
  transition: background-color 150ms cubic-bezier(.07,.95,0,1);
}
.icon-dismiss:hover {
  background-color: var(--grey-90-a10);
  border-radius: 2px;
}
.icon-dismiss:active {
  background-color: var(--grey-90-a20);
  border-radius: 2px;
}
.icon-dismiss:focus {
  box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
  border-radius: 2px;
}