theme-store/themes/58649066-2b6f-4a5b-af6d-c3d21d16fc00/chrome.css

/**
 * This Zen theme adds additional styling to the private browsing mode window such as a gradient on the toolbar,
 * a border around the browser page, and an icon in the URL bar. These are configurable in the Zen Mods settings.
 *
 * The --pbmh prefix stands for Private Browsing Mode Highlighting.
 */

/*******************************************\
 * Base variables.
\*******************************************/

:root {
  --pbmh-private-browsing-mode-base-color: #32064e;
  --pbmh-private-browsing-mode-gradient-stop-color: rgb(
    from var(--pbmh-private-browsing-mode-color) r g b / 0%
  );
  --pbmg-private-browsing-mode-gradient-stop-position: 50px;
  --pbmg-private-browsing-mode-border-size: 2px;
}

/*******************************************\
 * Topbar highlighting.
\*******************************************/

:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="match-zen"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from var(--zen-primary-color) calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="blue"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #aac7ff calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="teal"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #74d7cb calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="green"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #a0d490 calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="yellow"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #dec663 calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="orange"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #ffb787 calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="brown"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #dec1b1 calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="red"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #ffb1c0 calc(l - 0.5) c h
  );
}
:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-color="pink"]
  ) {
  --pbmh-private-browsing-mode-base-color: oklch(
    from #f6b0ea calc(l - 0.5) c h
  );
}

:root {
  --pbmh-private-browsing-mode-color: var(
    --pbmh-private-browsing-mode-base-color
  );
  --pbmh-private-browsing-mode-border: oklch(
    from var(--pbmh-private-browsing-mode-color) calc(l + 0.2) c h
  );

  &:where([lwt-toolbar="light"]) {
    --pbmh-private-browsing-mode-color: oklch(
      from var(--pbmh-private-browsing-mode-base-color) calc(l + 0.45)
        calc(c + 0.05) h
    );
    --pbmh-private-browsing-mode-border: oklch(
      from var(--pbmh-private-browsing-mode-color) calc(l - 0.2) c h
    );
  }
}

:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-highlighting-style="solid"]
  ) {
  --pbmh-private-browsing-mode-gradient-stop-color: var(
    --pbmh-private-browsing-mode-color
  );
}

:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-highlighting-style]:not(
        [uc-private-browsing-top-bar-highlighting-style="none"]
      )
  ) {
  &[privatebrowsingmode] #browser {
    background-image: linear-gradient(
      to bottom,
      var(--pbmh-private-browsing-mode-color),
      var(--pbmh-private-browsing-mode-gradient-stop-color)
        var(--pbmg-private-browsing-mode-gradient-stop-position),
      transparent
        calc(var(--pbmg-private-browsing-mode-gradient-stop-position) + 1px)
    ) !important;
  }
}

/*******************************************\
 * Viewport border styling.
\*******************************************/

:root:has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-border-style="thin"]
  ) {
  --pbmg-private-browsing-mode-border-size: 1px;
}

:root[privatebrowsingmode]:not([inDOMFullscreen="true"]):not(
    [chromehidden~="location"]
  ):not([chromehidden~="toolbar"]):has(
    #theme-Private-Mode-Highlighting[uc-private-browsing-top-bar-border-style]:not(
        [uc-private-browsing-top-bar-border-style="none"]
      )
  ) {
  & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
    box-shadow: 0 0 0 var(--pbmg-private-browsing-mode-border-size)
      var(--pbmh-private-browsing-mode-border) !important;
  }
}

/*******************************************\
 * Private Browsing Mode Icon styling.
\*******************************************/

@media not (-moz-bool-pref: "uc.private-browsing-top-bar.hide-icon") {
  [privatebrowsingmode] #zen-profile-button {
    position: relative;
  }

  [privatebrowsingmode] #zen-profile-button::after {
    content: "";
    position: absolute;
    left: calc(100% + 1em);
    top: 25%;
    bottom: 25%;
    aspect-ratio: 1;
    width: auto;
    height: auto;
    border-radius: 100%;
    background-color: oklch(
      from var(--pbmh-private-browsing-mode-base-color) calc(l + 0.05)
        calc(c + 0.2) h
    );
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48c3R5bGU+KntmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjEuOTJweDt9PC9zdHlsZT48L2RlZnM+PHBvbHlsaW5lIHBvaW50cz0iMC41IDExLjA0IDEyIDExLjA0IDIzLjUgMTEuMDQiLz48cGF0aCBkPSJNMTkuNjcsMTFINC4zM0w1LDQuNjhBMi41NCwyLjU0LDAsMCwxLDcuNTcsMi40MmgwYTIuNDcsMi40NywwLDAsMSwxLjEzLjI3aDBhNy40Myw3LjQzLDAsMCwwLDYuNiwwaDBhMi40NywyLjQ3LDAsMCwxLDEuMTMtLjI3aDBBMi41NCwyLjU0LDAsMCwxLDE5LDQuNjhaIi8+PGNpcmNsZSBjeD0iNi43MyIgY3k9IjE4LjIzIiByPSIzLjM1Ii8+PGNpcmNsZSBjeD0iMTcuMjciIGN5PSIxOC4yMyIgcj0iMy4zNSIvPjxwYXRoIGQ9Ik0xMC4wOCwxOC43MWExLjkyLDEuOTIsMCwxLDEsMy44NCwwIi8+PGxpbmUgeDE9IjEuNDYiIHkxPSIxNS44MyIgeDI9IjQuMzMiIHkyPSIxNS44MyIvPjxsaW5lIHgxPSIxOS42NyIgeTE9IjE1LjgzIiB4Mj0iMjIuNTQiIHkyPSIxNS44MyIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 65%;
    pointer-events: none;
  }
}