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

Update subproject commit reference and adjust background styles in compact mode and vertical tabs

Browse Source
This commit is contained in:
mr. M
2024-10-26 18:05:03 +02:00
parent 18b0a44ae3
commit b32cbe1651
3 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: 2572fb55f6...b2f80fb7e1

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

@@ -49,10 +49,11 @@
} }
#titlebar { #titlebar {
background: var(--zen-themed-toolbar-bg) !important; background: var(--zen-main-browser-background) !important;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); background-attachment: fixed !important;
background-size: 2000px !important; /* Dont ask me why */
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: calc(var(--zen-border-radius) + 2px); border-radius: calc(var(--zen-border-radius) + 2px);
border: 1px solid var(--zen-colors-border);
padding: var(--zen-toolbox-padding) !important; padding: var(--zen-toolbox-padding) !important;
position: relative; position: relative;
} }
@@ -60,6 +61,11 @@
#zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) { #zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) {
max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important; max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important; min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
& #titlebar {
padding-left: 0 !important;
padding-right: 0 !important;
}
} }
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {

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

@@ -155,12 +155,15 @@
} }
& .tab-background:not(:hover):not([selected]):not([multiselected]) { & .tab-background:not(:hover):not([selected]):not([multiselected]) {
--zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%); --zen-pinned-tabs-bgcolor: rgba(255, 255, 255, 0.075);
@media not (prefers-color-scheme: dark) { @media not (prefers-color-scheme: dark) {
--zen-pinned-tabs-bgcolor: color-mix(in srgb, #e7e7e7 30%, transparent 70%); --zen-pinned-tabs-bgcolor: rgba(1, 1, 1, 0.075);
} }
background: var(--zen-pinned-tabs-bgcolor) !important; background: var(--zen-pinned-tabs-bgcolor) !important;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
&[selected] {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);
} }
@@ -212,9 +215,7 @@
content: ''; content: '';
display: block; display: block;
height: 1px; height: 1px;
background: var(--zen-main-browser-background); background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
opacity: 0.5;
filter: invert(0.4);
width: 99%; width: 99%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -364,6 +365,17 @@
display: none !important; display: none !important;
} }
& #tabbrowser-arrowscrollbox-periphery {
& > toolbarbutton {
margin: 0 auto !important;
padding: 0 !important;
}
&::before {
width: 60% !important;
}
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) { & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
margin-bottom: 12px; margin-bottom: 12px;
position: relative; position: relative;
@@ -373,9 +385,7 @@
content: ''; content: '';
display: block; display: block;
height: 1px; height: 1px;
background: var(--zen-main-browser-background); background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
opacity: 0.5;
filter: invert(0.4);
width: 70%; width: 70%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -695,9 +705,7 @@
content: ''; content: '';
display: block; display: block;
height: 1px; height: 1px;
background: var(--zen-main-browser-background); background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
opacity: 0.5;
filter: invert(0.4);
width: 96%; width: 96%;
position: absolute; position: absolute;
top: -5px; top: -5px;