forked from ZenBrowserMirrors/zen-desktop
318 lines
7.7 KiB
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;
|
|
}
|