Enhance styling and functionality in Zen components; adjust URL bar border radius, update tab unloading logic, and refine element separation settings

This commit is contained in:
mr. M
2025-03-06 12:50:42 +01:00
parent 8d3b9098c0
commit 713ceab89f
138 changed files with 196 additions and 191 deletions

View File

@@ -29,7 +29,7 @@
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'],
#zen-splitview-dropzone {
flex: 1;
margin: var(--zen-split-column-gap) calc(var(--zen-split-row-gap) + 1px) !important;
margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
position: absolute !important;
@@ -48,7 +48,7 @@
}
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
--zen-split-row-gap: calc(var(--zen-element-separation) + 1px);
--zen-split-row-gap: var(--zen-element-separation);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
margin-right: calc(-1 * var(--zen-split-column-gap));
}
@@ -90,12 +90,6 @@
pointer-events: all;
}
.zen-split-view-splitter[orient='vertical'] {
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-split-row-gap) / -2);
cursor: ew-resize;
}
.zen-split-view-splitter[orient='horizontal'] {
height: var(--zen-split-column-gap);
cursor: ns-resize;

View File

@@ -114,9 +114,10 @@
&:is(.zen-split-view-splitter[orient='vertical']) {
/* Bit of a hacky solution, but it works */
width: calc(var(--zen-element-separation) - 3px);
margin-left: calc(-1 * var(--zen-element-separation) / 2 - 2px);
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-element-separation) * -1 - 1px);
height: unset;
cursor: ew-resize;
}
&::before {

View File

@@ -1101,7 +1101,7 @@
&::after {
content: "";
inset: -50%;
filter: blur(15px);
filter: blur(15px) brightness(1.2);
position: absolute;
background-size: 100% 100%;
background-clip: padding-box;

View File

@@ -79,7 +79,7 @@
--focus-outline-color: var(--button-bgcolor) !important;
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
--toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;
--toolbarbutton-icon-fill: light-dark(rgba(57, 57, 58, .6), rgba(251, 251, 254, .6)) !important;
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
@@ -155,7 +155,7 @@
--input-bgcolor: var(--zen-colors-tertiary) !important;
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
--zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #161616);
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);
--zen-workspace-indicator-height: 45px;

View File

@@ -127,6 +127,7 @@
box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
backdrop-filter: none !important;
border-radius: 1rem !important;
}
#urlbar-go-button {

View File

@@ -24,10 +24,6 @@
list-style-image: url(chrome://browser/skin/zen-icons/forward.svg);
position: absolute;
bottom: 10%;
.button-icon {
filter: invert(1);
}
}
#zen-welcome-title {
@@ -251,14 +247,10 @@
&[visuallyselected] {
transform: scale(1.04);
& .tab-background {
box-shadow: var(--zen-big-shadow);
}
}
& .tab-background::after {
filter: blur(30px) !important;
filter: blur(30px) brightness(1.2);
}
}
}