zen-desktop/src/zen/common/styles/zen-popup.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/.
 */
@import url('chrome://browser/content/zen-styles/zen-panels/bookmarks.css');
@import url('chrome://browser/content/zen-styles/zen-panels/extensions.css');
@import url('chrome://browser/content/zen-styles/zen-panels/print.css');
@import url('chrome://browser/content/zen-styles/zen-panels/dialog.css');

:root {
  --panel-subview-body-padding: 2px 0;
  --arrowpanel-menuitem-border-radius: 5px;
  --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block)
    var(--uc-arrowpanel-menuitem-margin-inline);
  --arrowpanel-menuitem-padding-block: 8px;
  --arrowpanel-menuitem-padding-inline: 14px;
  --uc-arrowpanel-menuicon-margin-inline: 14px;
  --uc-arrowpanel-menuitem-margin-inline: 4px;
  --uc-arrowpanel-menuitem-margin-block: 2px;
  --panel-separator-margin-vertical: 2px;
  --panel-separator-margin-horizontal: 1px;

  --uc-panel-zoom-button-padding: 8px;
  --uc-panel-zoom-button-inline-padding: 9px;
  --uc-panel-zoom-padding-block: calc(
    var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)
  );

  --uc-autocomplete-panel-menuitem-margin: 4px;
  --uc-autocomplete-panel-menuicon-padding-inline: 14px;
  --uc-autocomplete-panel-separator-margin-vertical: 4px;

  --uc-permission-itemcontainer-padding-block: 8px;
  --uc-permission-item-margin-block: 4px;
  --uc-permission-item-padding-inline: 16px;
  --zen-panel-separator-width: 1px;
}

menupopup,
panel {
  --panel-background: var(--arrowpanel-background);
  --panel-border-radius: var(--zen-native-inner-radius);
  --menuitem-padding: 6px !important;
}

/* split-view popup */
#confirmation-hint {
  --arrowpanel-background: var(--zen-colors-primary);
}

/* app menu */
.addon-banner-item,
.panel-banner-item {
  margin: 2px 4px 2px;
  padding-inline: 4px 12px;
  padding-block: var(--arrowpanel-menuitem-padding-block);
  border-radius: var(--arrowpanel-menuitem-border-radius);
}

#appMenu-fxa-label2 label,
#PanelUI-fxa-menu-syncnow-button label {
  margin-block: 0;
}

.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)
  > .toolbarbutton-icon
  + .toolbarbutton-text,
#appMenu-fxa-label2 > vbox {
  padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
}

/* special case menuitems with no icons */
#appMenu-zoom-controls > .toolbarbutton-text,
#fxa-manage-account-button > vbox,
#PanelUI-fxa-menu-syncnow-button > hbox {
  padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline));
}

/* Firefox profile avatar in appmenu */
#appMenu-fxa-label2::before {
  content: '';
  display: -moz-box;
  height: 16px;
  width: 16px;
  background: var(--avatar-image-url) 0/16px;
  scale: 1.25;
  border-radius: 99px;
}

/* disable proton account separator */
#appMenu-fxa-separator {
  border-image: none;
}

#appMenu-fxa-status2:not([fxastatus]) {
  padding-block: 0;
}

#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
  margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1);
}

/* zoom controls */
#appMenu-zoom-controls {
  border-top: 1px solid var(--panel-separator-color);
  padding-inline: calc(
      var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)
    )
    var(--uc-arrowpanel-menuitem-margin-inline);
  padding-block: var(--uc-panel-zoom-padding-block);
  margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1);
}

#appMenu-zoom-controls > .subviewbutton {
  padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding);
  margin: 0;
}

#appMenu-zoom-controls > #appMenu-zoomReset-button2 {
  padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2);
}

/* #appMenu-zoomReduce-button2, */
#appMenu-zoom-controls > #appMenu-fullscreen-button2 {
  margin-left: calc(
    (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px
  );
}

#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
  content: '';
  border-inline-start: 1px solid var(--panel-separator-color);
  display: block;
  position: relative;
  height: 32px;
  margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
  transform: translateX(
    calc(
      var(--uc-panel-zoom-button-inline-padding) * -1 -
        (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px
    )
  );
}

#appMenu-zoomReset-button2 {
  height: calc(16px + var(--uc-panel-zoom-button-padding) * 2);
  min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2);
}

#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
  background-color: var(--panel-item-hover-bgcolor);
}

#appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
  background-color: var(--panel-item-active-bgcolor);
}

#appMenu-zoomReset-button2 > .toolbarbutton-text,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
  background-color: transparent;
  padding: 0;
}

.subviewbutton[shortcut]::after {
  opacity: 0.7;
}

#widget-overflow-mainView .panel-subview-body {
  padding-bottom: 0;
}

.PanelUI-subView > .panel-header + toolbarseparator {
  margin-bottom: 0;
}

.PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
  padding-top: var(--panel-separator-margin-vertical);
}

#identity-popup-security-button {
  margin-bottom: var(--panel-separator-margin-vertical);
}

#permission-popup-mainView-panel-header,
#identity-popup-mainView-panel-header,
#protections-popup-mainView-panel-header,
.panel-header {
  min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px);
}

/* URL bar popup */

.identity-popup-security-connection > hbox > description {
  margin-inline-start: 0;
}

.identity-popup-security-connection.identity-button {
  margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px));
}

#identity-popup-mainView-panel-header-span,
#permission-popup-mainView-panel-header-span,
#identity-popup-mainView-panel-header label,
#permission-popup-mainView-panel-header label,
#protections-popup-mainView-panel-header-span {
  margin-block: 0;
}

.permission-popup-section {
  padding-block: var(--uc-permission-itemcontainer-padding-block);
}

#permission-popup-permissions-content {
  padding-inline: var(--uc-permission-item-padding-inline);
}

.permission-popup-permission-item,
#permission-popup-storage-access-permission-list-header {
  margin-block: var(--uc-permission-item-margin-block);
}

.permission-popup-permission-label,
.permission-popup-permission-header-label {
  margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
}

#editBookmarkPanel > #editBookmarkHeaderSeparator,
#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
  margin-inline: 0;
}

#identity-popup-mainView > toolbarseparator:first-child,
#unified-extensions-view > toolbarseparator:first-child {
  display: none;
  opacity: 0;
}

menupopup,
panel {
  box-shadow: none;
}

.panel-subview-footer-button {
  padding-top: 10px;
  padding-bottom: 10px;
}

#identity-popup-clear-sitedata-footer {
  margin: 0;
  padding: 0;
}

.panel-subview-footer-button {
  --arrowpanel-menuitem-padding-block: 20px;
  --arrowpanel-menuitem-padding-inline: 15px;
}

menuseparator {
  padding-inline: 0 !important;
}

toolbarseparator,
menuseparator {
  border-width: var(--zen-panel-separator-width);
}

#appMenu-zoom-controls {
  border-top-width: var(--zen-panel-separator-width);
}

#identity-popup-multiView toolbarseparator,
#editBookmarkHeaderSeparator {
  display: none;
}

/*Bookmark workspace selector styles*/
.workspace-dropdown {
  position: relative;
  width: 100%;
  display: flex;
}

.workspace-trigger {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background-color: var(--zen-colors-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#editBMPanel_workspaceList {
  flex-direction: column;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid var(--zen-colors-border);
  border-radius: 4px;
  background-color: var(--zen-colors-tertiary);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 4px 0;
}

#editBMPanel_workspaceList li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#editBMPanel_workspaceList li > label {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  cursor: pointer;
}

#editBMPanel_workspaceList input[type='checkbox'] {
  margin-right: 8px;
}

/* Section: Toast notifications */

#zen-toast-container {
  position: fixed;
  --zen-toast-spacing: max(4px, var(--zen-element-separation));
  top: var(--zen-toast-spacing);
  z-index: 1000;
  display: flex;
  align-items: end;

  :root:not([zen-right-side='true']) & {
    right: var(--zen-toast-spacing);
  }

  :root[zen-right-side='true'] & {
    left: var(--zen-toast-spacing);
  }

  & .zen-toast {
    :root[zen-right-side='true'] & {
      translate: 100%;
    }

    --zen-toast-padding: 6px;
    --zen-toast-max-height: 46px;
    @media (-moz-platform: macos) {
      --zen-toast-padding: 10px;
      --zen-toast-max-height: 52px;
    }

    gap: 10px;
    z-index: 1000;
    padding: var(--zen-toast-padding);
    border-radius: calc(var(--zen-native-inner-radius) + 6px);
    background: linear-gradient(
      170deg,
      var(--zen-primary-color) -40%,
      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
    );
    color: var(--button-primary-color);
    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    display: flex;
    font-weight: 600;
    align-items: center;
    width: max-content;
    font-size: small;
    position: absolute;
    transform-origin: top center;
    max-height: var(--zen-toast-max-height);
    min-height: var(--zen-toast-max-height);
    font-size: 14px;

    & .description {
      opacity: 0.6;
      font-size: smaller;
    }

    & label {
      margin-top: 0;
      margin-bottom: 0;
    }

    & button {
      color-scheme: dark;
      width: min-content;
      padding: 0 10px !important;
      min-width: unset !important;
      margin: 0px !important;
      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
      background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important;
      border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important;

      :root[zen-right-side='true'] & {
        order: -1;
      }
    }
  }
}

#downloadsHistory {
  border: none !important;
}

.downloadButton {
  padding: 0 !important;
  min-width: unset !important;
}