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

Expanded on sidebar stylings and added option to disable border of bottom icons

Browse Source
This commit is contained in:
mauro-balades
2024-10-04 19:19:40 +02:00
parent d28062cc93
commit c8391950cf
6 changed files with 53 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 0bd8f65ca3...fc5116138c

1
src/browser/app/profile/zen-browser.js
View File

@@ -97,6 +97,7 @@ pref('zen.view.sidebar-expanded.on-hover', false);
pref('zen.view.sidebar-expanded.show-button', true);
pref('zen.view.sidebar-expanded.max-width', 400);
pref('zen.view.show-bottom-border', false);
pref('zen.view.sidebar-collapsed.hide-mute-button', true);
pref('zen.tabs.dim-pending', true);

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

Submodule src/browser/base/content/zen-components updated: 83b672d981...fc7f08c827

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

@@ -49,7 +49,7 @@
content: '';
display: block;
height: 1px;
background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
margin: 0 auto;
width: 80%;
left: 50%;
@@ -58,6 +58,13 @@
bottom: calc(-1 * var(--zen-toolbox-padding));
}
@media (-moz-bool-pref: 'zen.view.show-bottom-border') {
&::after {
background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
}
}
& > * {
border-top-width: 0 !important;
}
@@ -140,12 +147,14 @@
#vertical-pinned-tabs-container {
padding-inline-end: 0 !important;
gap: 3px !important;
column-gap: 5px !important;
row-gap: 3px !important;
max-height: unset !important;
overflow: visible !important;
& .tab-background:not(:hover):not([selected]):not([multiselected]) {
background: color-mix(in srgb, var(--zen-colors-secondary) 20%, transparent 80%) !important;
background: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%) !important;
backdrop-filter: blur(5px);
}
& .tabbrowser-tab .tab-content {
@@ -182,6 +191,23 @@
}
}
& #vertical-pinned-tabs-container {
margin-bottom: 12px;
position: relative;
&:has(tab:not([hidden]))::after {
bottom: -6px;
content: '';
display: block;
height: 1px;
background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%);
width: 99%;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
}
& #zen-sidebar-icons-wrapper {
display: flex;
/* Make sure the icons take most of the space, smartly */
@@ -314,11 +340,11 @@
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
margin-bottom: 8px;
margin-bottom: 12px;
position: relative;
&::after {
bottom: -4px;
bottom: -6px;
content: '';
display: block;
height: 1px;
@@ -477,7 +503,6 @@
background-size: cover !important;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
height: 100%;
@@ -506,7 +531,6 @@
width: 250px !important;
background-color: var(--zen-dialog-background);
border-top-color: var(--zen-colors-border);
border-right-color: var(--zen-colors-border);
position: absolute;
padding: var(--zen-toolbox-padding);
padding-top: 0;
@@ -515,6 +539,7 @@
-moz-window-dragging: no-drag;
overflow: hidden;
transition: width 0.2s !important;
border-right: 1px solid var(--zen-colors-border);
& .tab-throbber,
& .tab-icon-pending,
@@ -531,21 +556,8 @@
flex-direction: column;
gap: 0 !important;
margin-bottom: 8px;
position: relative;
&:has(tab:not([hidden]))::after {
bottom: -4px;
content: '';
display: block;
height: 1px;
background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%);
width: 99%;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
& .tabbrowser-tab {
& .tab-label-container {
display: flex;
@@ -559,19 +571,11 @@
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
}
&:hover .tab-close-button {
display: block !important;
}
& .tab-background {
&:not(:hover):not([selected]):not([multiselected]) .tab-background {
box-shadow: none;
background: transparent !important;
}
&:hover .tab-background {
background-color: var(--tab-hover-background-color) !important;
}
}
}

5
src/browser/components/preferences/zen-settings.js
View File

@@ -991,4 +991,9 @@ Preferences.addAll([
type: 'int',
default: 10,
},
{
id: 'zen.view.show-bottom-border',
type: 'bool',
default: false,
}
]);

19
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -285,21 +285,26 @@
<checkbox id="zenLooksAndFeelShowTabExpandButton"
data-l10n-id="zen-vertical-tabs-show-expand-button"
preference="zen.view.sidebar-expanded.show-button"/>
<hbox class="indent">
<checkbox id="zenLooksAndFeelShowBottomBorder"
data-l10n-id="zen-vertical-tabs-show-bottom-border"
preference="zen.view.show-bottom-border"/>
</hbox>
<label><html:h2 data-l10n-id="zen-vertical-tabs-expand-tabs-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-expand-tabs-description" />
<form xmlns="http://www.w3.org/1999/xhtml" id="zen-expand-tabbar-strat" autocomplete="off" class="indent">
<hbox>
<input type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
<span data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
<input id="zenVerticalTabsExpandDefault" type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
<label for="zenVerticalTabsExpandDefault" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
</hbox>
<hbox>
<input type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
<span data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
<input id="zenVerticalTabsExpandOnHover" type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
<label for="zenVerticalTabsExpandOnHover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
</hbox>
<hbox>
<input type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
<span data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
<input id="zenVerticalTabsExpandDontExpand" type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
<label for="zenVerticalTabsExpandDontExpand" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
</hbox>
</form>
</groupbox>