desktop/src/browser/themes/shared/zen-sidebar.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("zen-sidebar-panels.css");

:root {
  --sidebar-background-color: var(--toolbar-bgcolor) !important; 
  --zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#sidebar-box {
  --zen-sidebar-box-border-radius: var(--zen-browser-border-radius);  
  margin: 10px !important;
  border-radius: var(--zen-sidebar-box-border-radius) !important;
  overflow: hidden;
  transition: .2s;
  margin-left: 0 !important;
  border: var(--zen-appcontent-border);
  box-shadow: none;
}   

#sidebar-box[hidden="true"] {
  width: 0 !important;
  opacity: 0 !important;
}

#sidebar-box[positionend="true"] {
  order: 1 !important;
}

#sidebar-box:not([positionend   ="true"]) {
  margin-right: 0 !important;
}

#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
  margin-right: 0 !important;
  box-shadow: none !important;
}

#sidebar-splitter {
  /* we can still use the splitter but we can't see it */
  background: transparent !important;  
  border-color: transparent !important;
  width: 1px !important;
  margin-right: 5px !important;
}

#sidebar-box[positionend] {
  margin-left: 0;
}

.zen-sidebar-action-button {
  width: var(--zen-sidebar-action-button-width);
  height: var(--zen-sidebar-action-button-width);
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#TabsToolbar .toolbarbutton-1 {
  width: var(--zen-sidebar-action-button-width);
  height: var(--zen-sidebar-action-button-width);
  margin-left: auto !important;
  margin-right: auto !important;
}

#TabsToolbar .toolbarbutton-1:not(.zen-sidebar-panel-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button {
  border-radius: 8px !important;
}

:root[customizing] #navigator-toolbox {
  display: none;
}

#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button:hover,
.zen-sidebar-action-button[open="true"] {
  background: var(--toolbarbutton-hover-background) !important;
}

.zen-sidebar-action-button:hover image {
  background: transparent !important;
}

.zen-sidebar-action-button label {
  display: none !important;
}

#sidebar-box[hidden="true"] .zen-sidebar-action-button,
.zen-sidebar-panel-button[animate] {
  opacity: 0;
  transform: translateX(-110%);
  animation: zen-sidebar-button-fadeIn 0.4s forwards;
}

@keyframes zen-sidebar-button-fadeIn {
  0% {
    transform: translateX(-110%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Icons */

#zen-preferences-button {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

#zen-history-button {
  list-style-image: url("chrome://browser/skin/history.svg");
}

#zen-bookmark-button {
  list-style-image: url(chrome://browser/skin/bookmark-hollow.svg);
}

#zen-profile-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

#zen-profile-button > div:last-child {
  background-image: var(--avatar-image-url);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--zen-colors-border);
}

/* Ugly code */

#TabsToolbar .zen-sidebar-action-button:nth-child(1),  .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(2),  .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(3),  .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(4),  .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(5),  .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(6),  .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(7),  .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(8),  .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(9),  .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }

#TabsToolbar .zen-side-bar-profiles-button-panel-correction {
  position: absolute;
  bottom: -2px;
  right: -2px;
}

#zen-sidebar-icons-wrapper toolbarbutton {
  position: relative;
}

#zen-sidebar-icons-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 3px;
  position: relative;
  background: transparent !important;
  align-items: center;
  justify-content: end;
  min-height: fit-content;
  --zen-sidebar-action-content-separator: 15px;
  padding-top: var(--zen-sidebar-action-content-separator);
  margin-top:  var(--zen-sidebar-action-content-separator);
}

#zen-sidebar-icons-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: var(--zen-colors-border);
}

#zen-sidepanel-button[hidden="true"] {
  display: none;
}

#zen-expand-sidebar-button {
  display: none;
}

@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
  #navigator-toolbox {
    width: 0 !important;
  }
}

@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") {
  #zen-expand-sidebar-button {
    display: block;
  }
}