desktop/src/zen/glance/zen-glance.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/.
 */

.zen-glance-sidebar-container {
  position: absolute;
  display: flex;
  z-index: 999;

  top: 15px;
  padding: 12px;
  gap: 12px;
  max-width: 56px;

  :root:not([zen-right-side="true"]) & {
    left: 100%;
  }

  :root[zen-right-side="true"] & {
    right: 100%;
  }

  & toolbarbutton {
    width: var(--size-item-large);
    height: var(--size-item-large);
    background: color-mix(in srgb, light-dark(rgb(24, 24, 24), rgb(231, 231, 231)) 96%, var(--zen-primary-color));
    transition:
      background 0.05s ease,
      scale 0.05s ease;
    border-radius: 999px;
    appearance: none;
    box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
    padding: 8px;
    opacity: 1 !important;
    color: var(--zen-primary-color) !important;

    &:hover {
      background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
      scale: 1.05;
    }

    &:hover:active {
      scale: 0.95;
    }

    & label {
      display: none;

      &::before {
        text-overflow: unset;
      }
    }

    &[disabled="true"] {
      scale: 1 !important;
      & image {
        opacity: 0.5;
      }
    }
  }

  & .zen-glance-sidebar-close {
    width: fit-content;
    & label {
      display: block;
      max-width: 0;
      margin: 0;
      overflow: hidden;
      transition:
        max-width 0.2s ease,
        margin-left 0.2s ease;
    }

    &[waitconfirmation] {
      background: rgb(220, 53, 69);
      color: white;
      fill: white;
      & label {
        max-width: 4rem;
        margin-left: 8px;
      }

      & image {
        filter: none;
      }
    }
  }
}

:root[zen-no-padding="true"] .browserSidebarContainer.zen-glance-background {
  --zen-native-inner-radius: 6px;
  --zen-element-separation: 6px;
}

.browserSidebarContainer.zen-glance-background {
  box-shadow: var(--zen-big-shadow);
}

.browserSidebarContainer.zen-glance-background,
.browserSidebarContainer.zen-glance-overlay .browserContainer:not([fade-out="true"]) {
  border-radius: var(--zen-native-inner-radius);
}

.browserSidebarContainer.zen-glance-overlay {
  box-shadow: none !important;
  visibility: inherit;
  z-index: 1;
  /* Hint compositor to optimize animations and scrolling */
  will-change: transform, opacity, filter;

  :root[zen-no-padding="true"] & {
    --zen-native-inner-radius: 0px;
  }

  & .browserContainer {
    transform: translate(-50%, -50%);
    position: fixed;
    top: 0;
    left: 0;
    flex: unset !important;
    /* Promote to its own layer during transitions to reduce jank */
    will-change: transform, top, left;
    width: 85%;
    height: 100%;

    &:not([has-finished-animation="true"]) #statuspanel {
      display: none;
    }

    &[has-finished-animation="true"] {
      position: relative !important;
      transition: 0s !important;
      transform: none !important;
      margin: auto !important;
      top: 0 !important;
      left: 0 !important;
    }

    & .browserStack {
      border-radius: var(--zen-native-inner-radius);
      overflow: hidden;
      box-shadow: var(--zen-big-shadow);
    }

    & browser {
      background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32)) !important;
      width: 100%;
      height: 100%;
    }

    &[animate="true"] {
      position: absolute;
    }
  }

  &[fade-out="true"] {
    & .browserStack {
      transition: opacity 0.15s ease-in-out;
      opacity: 0;
    }
  }
}

.zen-glance-element-preview {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: var(--zen-native-inner-radius);
  top: 0%;
  left: 50%;
  translate: -50% 0%;
  will-change: transform, opacity;
  background: rgba(255, 255, 255, 0.1);

  & image {
    width: 100%;
    max-width: 100%;
  }
}