mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update CSS to improve compact mode and vertical tabs styling

Browse Source
This commit is contained in:
Mauro Balades
2024-08-20 21:36:56 +02:00
parent 2f790586b2
commit 4589c543da
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -24,11 +24,11 @@
height: 100%;
margin: 0;
padding: var(--zen-compact-toolbox-margin) !important;
padding-top: calc(var(--zen-compact-toolbox-margin-single) - var(--zen-element-separation));
padding-top: calc(var(--zen-compact-toolbox-margin-single) - 5px) !important;
& #titlebar {
border: 1px solid var(--zen-colors-border);
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
transition-delay: 200ms;
background: var(--zen-colors-tertiary) !important;
padding: 0 5px;
border-radius: var(--zen-panel-radius);
@@ -82,6 +82,10 @@
transition-delay: 33ms !important;
transform: none !important;
opacity: 1;
& #titlebar {
min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 4) !important;
}
}
#navigator-toolbox > *{ line-height: normal; pointer-events: auto }

21
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -413,7 +413,7 @@
transform: translateY(-1px);
}
#TabsToolbar:not(:hover) #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] {
#navigator-toolbox:not(:hover) #TabsToolbar #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] {
display: none !important;
visibility: hidden !important;
}
@@ -425,23 +425,26 @@
#TabsToolbar-customization-target:hover > .toolbarbutton-1 > .toolbarbutton-text {
transition-delay: 0.2s !important;
}
#TabsToolbar:hover {
padding-right: .1rem !important;
}
#TabsToolbar:hover {
#navigator-toolbox:hover #TabsToolbar {
z-index: 100 !important;
width: 250px !important;
background-color: var(--zen-dialog-background);
border-top-color: var(--zen-colors-border);
border-right-color: var(--zen-colors-border);
padding-right: .1rem !important;
position: absolute;
}
@media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
#navigator-toolbox:hover {
--zen-navigation-toolbar-min-width: 0 !important;
position: relative;
padding: 0 !important;
}
#TabsToolbar {
border-right: 0;
border-right: 0 !important;
border-left: 1px solid transparent;
border-top-right-radius: 0;
border-top-left-radius: var(--zen-border-radius);
@@ -449,7 +452,7 @@
right: 100%;
}
#TabsToolbar:hover {
#navigator-toolbox:hover #TabsToolbar {
border-left: 1px solid var(--zen-colors-border);
}
}