mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-13 22:53:53 +02:00
157 lines
4.1 KiB
CSS
157 lines
4.1 KiB
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-appcontent-border-radius);
|
|
margin: var(--zen-appcontent-separator-from-window) !important;
|
|
border-radius: var(--zen-sidebar-box-border-radius) !important;
|
|
overflow: hidden;
|
|
transition: .2s;
|
|
margin-left: 0 !important;
|
|
border: var(--zen-appcontent-border);
|
|
}
|
|
|
|
#sidebar-box:not([positionend="true"]) {
|
|
border-top-left-radius: 0px !important;
|
|
border-bottom-left-radius: 0px !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
#sidebar-box[hidden="true"] {
|
|
width: 0 !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
#zen-main-app-wrapper:has(#sidebar-box:not([hidden="true"], [positionend="true"])) #TabsToolbar {
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
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;
|
|
}
|
|
|
|
#sidebar-splitter[inlinedwithsidebar="true"] {
|
|
background-color: -moz-dialog !important;
|
|
}
|
|
|
|
#sidebar-box[positionend] {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.zen-sidebar-action-button {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-1 > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
|
|
.zen-sidebar-action-button {
|
|
border-radius: 100px !important;
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
.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 {
|
|
opacity: 0;
|
|
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;
|
|
}
|
|
|
|
/* Ugly code */
|
|
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(1) { animation-delay: 0.1s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(2) { animation-delay: 0.2s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(3) { animation-delay: 0.3s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(4) { animation-delay: 0.4s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(5) { animation-delay: 0.5s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(6) { animation-delay: 0.6s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(7) { animation-delay: 0.7s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(8) { animation-delay: 0.8s; }
|
|
#TabsToolbar .zen-sidebar-action-button:nth-child(9) { animation-delay: 0.9s; }
|
|
#TabsToolbar .zen-sidebar-action-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;
|
|
height: 100%;
|
|
position: relative;
|
|
background: transparent !important;
|
|
align-items: center;
|
|
justify-content: end;
|
|
}
|
|
|