mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-14 14:03:52 +02:00
139 lines
3.3 KiB
CSS
139 lines
3.3 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 Decks - ONLY USED FOR SPLIT VIEWS, DO NOT USE THIS CLASS FOR ANY OTHER PURPOSE **/
|
|
|
|
#tabbrowser-tabpanels[zen-split-view='true'] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) {
|
|
flex: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
|
|
flex: 1;
|
|
}
|
|
|
|
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
|
|
animation: zen-deck-fadeIn 0.2s forwards ease-in-out;
|
|
}
|
|
|
|
#tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer[zen-split-active='true'] {
|
|
--uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
|
|
}
|
|
|
|
#tabbrowser-tabpanels:has(> [zen-split='true']) {
|
|
display: grid;
|
|
row-gap: 0;
|
|
column-gap: 0;
|
|
--zen-split-row-gap: calc(var(--zen-element-separation) + 2px);
|
|
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
|
|
}
|
|
|
|
#tabbrowser-tabpanels[zen-split-view] {
|
|
.zen-split-view-splitter {
|
|
display: inherit;
|
|
}
|
|
}
|
|
|
|
.zen-split-view-splitter {
|
|
display: none;
|
|
visibility: inherit;
|
|
cursor: ew-resize;
|
|
-moz-subtree-hidden-only-visually: 0;
|
|
}
|
|
|
|
.zen-split-view-splitter[orient='horizontal'] {
|
|
cursor: n-resize;
|
|
}
|
|
|
|
#zen-split-views-box:not([hidden='true']) {
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Split view panel */
|
|
|
|
#zenSplitViewModifierViewDefault {
|
|
min-width: 180px;
|
|
min-height: 180px;
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
|
|
gap: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault > vbox {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview {
|
|
border-radius: 5px;
|
|
border: 1px solid var(--zen-colors-border);
|
|
width: 100px;
|
|
height: 70px;
|
|
overflow: hidden;
|
|
padding: 5px;
|
|
user-select: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active {
|
|
box-shadow: 0 0 0 2px var(--zen-primary-color);
|
|
border-width: 0px;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault p {
|
|
margin-top: 5px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box {
|
|
background-color: var(--zen-colors-secondary);
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
|
|
display: grid;
|
|
grid-template-areas: 'a b' 'c b';
|
|
gap: 5px;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) {
|
|
grid-area: a;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) {
|
|
grid-area: b;
|
|
}
|
|
|
|
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
|
|
grid-area: c;
|
|
}
|