zen-realigned/src/browser/base/content/zen-styles/zen-sidebar-panels.css

318 lines
7.7 KiB
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-sidebar-panels-wrapper {
/*min-height: 500px;*/
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
}
#zen-sidebar-panels-sites {
background: transparent;
max-width: 1px;
display: flex;
}
#zen-sidebar-add-panel-button:not(:hover) image,
.zen-sidebar-panel-button:not([selected='true'], #zen-sidebar-add-panel-button) image {
background: transparent !important;
}
.zen-sidebar-panel-button {
width: var(--zen-sidebar-action-button-width);
height: var(--zen-sidebar-action-button-width);
max-height: var(--zen-sidebar-action-button-width);
padding: 0 3px !important;
margin: 0;
justify-content: center;
align-items: center;
cursor: pointer;
}
.zen-sidebar-panel-button image {
border-radius: 10px !important;
border: 2px solid transparent;
}
.zen-sidebar-panel-button:hover image {
background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
}
.zen-sidebar-panel-button[selected='true'] image {
border-color: var(--zen-primary-color);
}
/** Sidebar view */
#zen-sidebar-web-panel-wrapper {
--zen-default-sidebar-width: 300px;
--zen-sidebar-web-panel-spacing: var(--zen-element-separation);
position: relative;
margin-right: 0;
display: flex;
pointer-events: none;
transition: width 0.3s ease-in-out;
}
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[hidden='true']) {
max-width: 0;
padding: 0;
margin: 0;
}
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
position: absolute;
z-index: 1;
width: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
margin: var(--zen-sidebar-web-panel-spacing);
/* Why times 3?
* + 1 for the top margin, making the element overflow the view.
* + 1 for the margin we want to add at the bottom
* + 1 so that the panel can be correctly spaced from the border of the webview
*/
height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 4);
}
#zen-sidebar-web-panel {
border-radius: var(--zen-panel-radius);
z-index: 2;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--zen-colors-border);
background: var(--zen-colors-tertiary);
opacity: 0;
animation-delay: 0.1s;
flex-direction: column;
min-width: var(--zen-default-sidebar-width);
max-width: 720px;
min-height: var(--zen-default-sidebar-width);
width: calc(var(--zen-default-sidebar-width) + 200px);
pointer-events: all;
height: calc(100% - 20px);
}
#zen-sidebar-web-panel:not([pinned='true']) {
/* We need to always override the height */
height: unset !important;
}
.zen-sidebar-web-panel-splitter,
.zen-split-view-splitter[orient='vertical'] {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(var(--zen-element-separation) * 2 - 3px);
background: transparent;
border: none;
cursor: ew-resize;
&::before {
height: 30px;
width: 3px;
background: var(--zen-colors-border);
border-radius: 2px;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.1s ease-in-out;
pointer-events: none;
}
&:hover::before {
opacity: 1;
}
}
.zen-split-view-splitter[orient='vertical']::before {
transform: translate(-75%, -50%);
}
.zen-sidebar-web-panel-splitter[side='right'] {
left: 100%;
}
.zen-sidebar-web-panel-splitter[side='left'] {
right: 100%;
}
.zen-sidebar-web-panel-splitter[orient='horizontal'] {
width: 100%;
height: 7px;
cursor: ns-resize;
&::before {
display: none;
}
}
.zen-sidebar-web-panel-splitter[side='bottom'] {
top: initial;
bottom: -2px;
}
#zen-sidebar-web-panel[hidden='true'] .zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel-wrapper[hidden='true'] + .zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[orient='horizontal'],
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[side='left'] {
display: none;
margin: 0;
}
#main-window[customizing='true'] #zen-sidebar-web-panel-wrapper {
display: none !important;
}
#zen-sidebar-web-panel:not([hidden='true']) {
display: flex;
}
#zen-sidebar-web-panel-wrapper {
margin: 0 calc(var(--zen-element-separation) / 2) 0 var(--zen-element-separation);
}
#zen-sidebar-web-panel[pinned='true'] {
position: absolute;
z-index: 1;
max-height: 100%;
}
#zen-sidebar-web-panel[hidden='true'][pinned='true'] {
display: flex;
pointer-events: none;
}
#zen-sidebar-web-header,
#zen-sidebar-panels-wrapper {
width: 100%;
min-height: var(--zen-toolbar-height) !important;
display: flex;
align-items: center;
padding: 0 5px;
border: var(--zen-appcontent-border);
border-width: 0 !important;
border-bottom-width: 1px !important;
background: transparent;
position: relative;
color-scheme: var(--toolbar-color-scheme);
-moz-window-dragging: no-drag;
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
}
#zen-sidebar-web-header {
justify-content: space-between;
}
#zen-sidebar-web-header toolbarbutton {
fill: color-mix(in srgb, var(--toolbarbutton-icon-fill) 70%, transparent);
}
#zen-sidebar-panels-wrapper {
border-top-width: 1px !important;
border-bottom-width: 0px !important;
}
#zen-sidebar-web-panel-browser-containers {
height: 100%;
position: relative;
}
#zen-sidebar-introduction-panel {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 70%;
}
#zen-sidebar-introduction-panel[hidden='true'] {
display: none;
}
#zen-sidebar-introduction-panel h1 {
font-size: 1.5em;
font-weight: 600;
margin: 0;
margin-bottom: 2px;
}
#zen-sidebar-introduction-panel p {
opacity: 0.7;
text-align: center;
}
#zen-sidebar-web-panel browser[zen-sidebar-id] {
height: 100%;
}
#zen-sidebar-web-panel-title {
font-size: 0.9em;
font-weight: 600;
margin: 0 10px;
padding: 0;
color: var(--text-color-deemphasized);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: -moz-available;
text-align: center;
display: block;
}
#zen-sidebar-web-panel[pinned] {
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel[pinned]:not([hidden]) {
animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[pinned][hidden] {
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([hidden='true'])) {
:root:not([zen-right-side='true']) & {
margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
}
@media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
:root[zen-right-side='true'] & {
margin-left: 0 !important;
margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
}
}
}
/** UNPINNED **/
#zen-sidebar-web-panel {
/* Sets perspective */
transform-origin: 50% 20%;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
opacity: 0;
animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
}
#zen-sidebar-web-panel:not([hidden]) {
animation: better-sidebar-show 0.15s ease-in-out forwards !important;
}
#zen-sidebar-web-panel[hidden] {
animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
}