mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-20 16:51:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CSS styles for improved layout and transitions; adjust sidebar and tab margins for better visual consistency

Browse Source
This commit is contained in:
mr. M
2025-01-17 22:23:57 +01:00
parent 41cecd4947
commit b0354fa8b9
5 changed files with 111 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,12 +100,11 @@
} }
#navigator-toolbox:not([animate='true']) #titlebar { #navigator-toolbox:not([animate='true']) #titlebar {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 9.73px 0px rgba(0, 0, 0, 0.25);
border-radius: calc(var(--zen-border-radius) - 2px); border-radius: calc(var(--zen-border-radius) - 2px);
padding: var(--zen-toolbox-padding) !important; padding: var(--zen-toolbox-padding) !important;
position: relative; position: relative;
background: var(--zen-dialog-background); background: var(--zen-dialog-background);
outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
:root[zen-single-toolbar='true'] { :root[zen-single-toolbar='true'] {
padding-top: 0 !important; padding-top: 0 !important;
@@ -133,106 +132,106 @@
&:not([animate='true']) { &:not([animate='true']) {
--zen-compact-mode-func: linear( --zen-compact-mode-func: linear(
0 0%, 0 0%,
0.002958 1%, 0.002748 1%,
0.01137 2%, 0.010544 2%,
0.024581 3%, 0.022757 3%,
0.041981 4%, 0.038804 4%,
0.063001 5%, 0.058151 5%,
0.087118 6%, 0.080308 6%,
0.113846 7.000000000000001%, 0.104828 7.000000000000001%,
0.14274 8%, 0.131301 8%,
0.173391 9%, 0.159358 9%,
0.205425 10%, 0.188662 10%,
0.238504 11%, 0.21891 11%,
0.272318 12%, 0.249828 12%,
0.30659 13%, 0.281172 13%,
0.341071 14.000000000000002%, 0.312724 14.000000000000002%,
0.375535 15%, 0.344288 15%,
0.409787 16%, 0.375693 16%,
0.44365 17%, 0.40679 17%,
0.476971 18%, 0.437447 18%,
0.509618 19%, 0.467549 19%,
0.541476 20%, 0.497 20%,
0.572448 21%, 0.525718 21%,
0.602453 22%, 0.553633 22%,
0.631425 23%, 0.580688 23%,
0.65931 24%, 0.60684 24%,
0.686067 25%, 0.632052 25%,
0.711668 26%, 0.656298 26%,
0.736092 27%, 0.679562 27%,
0.759328 28.000000000000004%, 0.701831 28.000000000000004%,
0.781375 28.999999999999996%, 0.723104 28.999999999999996%,
0.802235 30%, 0.743381 30%,
0.821921 31%, 0.76267 31%,
0.840449 32%, 0.780983 32%,
0.857841 33%, 0.798335 33%,
0.874121 34%, 0.814744 34%,
0.88932 35%, 0.830233 35%,
0.903469 36%, 0.844826 36%,
0.916603 37%, 0.858549 37%,
0.928759 38%, 0.87143 38%,
0.939975 39%, 0.883498 39%,
0.950291 40%, 0.894782 40%,
0.959747 41%, 0.905314 41%,
0.968385 42%, 0.915125 42%,
0.976244 43%, 0.924247 43%,
0.983366 44%, 0.93271 44%,
0.989792 45%, 0.940547 45%,
0.995562 46%, 0.947787 46%,
1.000716 47%, 0.954463 47%,
1.005292 48%, 0.960603 48%,
1.009328 49%, 0.966239 49%,
1.01286 50%, 0.971397 50%,
1.015925 51%, 0.976106 51%,
1.018556 52%, 0.980394 52%,
1.020787 53%, 0.984286 53%,
1.022648 54%, 0.987808 54%,
1.024172 55.00000000000001%, 0.990984 55.00000000000001%,
1.025385 56.00000000000001%, 0.993837 56.00000000000001%,
1.026316 56.99999999999999%, 0.99639 56.99999999999999%,
1.026991 57.99999999999999%, 0.998664 57.99999999999999%,
1.027434 59%, 1.000679 59%,
1.027669 60%, 1.002456 60%,
1.027717 61%, 1.004011 61%,
1.027599 62%, 1.005363 62%,
1.027334 63%, 1.006528 63%,
1.02694 64%, 1.007522 64%,
1.026433 65%, 1.008359 65%,
1.025829 66%, 1.009054 66%,
1.025143 67%, 1.009618 67%,
1.024388 68%, 1.010065 68%,
1.023575 69%, 1.010405 69%,
1.022715 70%, 1.010649 70%,
1.02182 71%, 1.010808 71%,
1.020898 72%, 1.01089 72%,
1.019957 73%, 1.010904 73%,
1.019005 74%, 1.010857 74%,
1.018048 75%, 1.010757 75%,
1.017094 76%, 1.010611 76%,
1.016146 77%, 1.010425 77%,
1.015211 78%, 1.010205 78%,
1.014291 79%, 1.009955 79%,
1.013391 80%, 1.009681 80%,
1.012513 81%, 1.009387 81%,
1.01166 82%, 1.009077 82%,
1.010835 83%, 1.008754 83%,
1.010039 84%, 1.008422 84%,
1.009273 85%, 1.008083 85%,
1.008538 86%, 1.00774 86%,
1.007836 87%, 1.007396 87%,
1.007166 88%, 1.007052 88%,
1.00653 89%, 1.00671 89%,
1.005926 90%, 1.006372 90%,
1.005355 91%, 1.00604 91%,
1.004817 92%, 1.005713 92%,
1.00431 93%, 1.005394 93%,
1.003835 94%, 1.005083 94%,
1.003391 95%, 1.004782 95%,
1.002976 96%, 1.004489 96%,
1.002591 97%, 1.004207 97%,
1.002233 98%, 1.003935 98%,
1.001902 99%, 1.003674 99%,
1.001597 100% 1.003423 100%
); );
transition: transition:
left 0.3125s var(--zen-compact-mode-func), left 0.3125s var(--zen-compact-mode-func),

10
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -9,7 +9,7 @@
#tabbrowser-tabpanels[zen-split-view='true'] { #tabbrowser-tabpanels[zen-split-view='true'] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: calc(var(--zen-split-column-gap) / -2); margin-top: calc(var(--zen-split-column-gap) * -1);
} }
#tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) { #tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) {
@@ -67,15 +67,9 @@
#zen-splitview-overlay { #zen-splitview-overlay {
@media (-moz-bool-pref: 'zen.view.compact') { @media (-moz-bool-pref: 'zen.view.compact') {
:root:not([customizing]) & { :root:not([customizing]) & {
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
& {
margin-left: 1px;
}
}
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
& { & {
margin-top: calc(var(--zen-split-column-gap) / -2); margin-top: calc(var(--zen-split-column-gap) * -1);
} }
} }
} }

9
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View File

@@ -101,7 +101,8 @@
} }
.zen-sidebar-web-panel-splitter, .zen-sidebar-web-panel-splitter,
.zen-split-view-splitter[orient='vertical'] { .zen-split-view-splitter[orient='vertical'],
#zen-sidebar-splitter {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -119,9 +120,9 @@
} }
&::before { &::before {
height: 30px; height: 50px;
width: 3px; width: 4px;
background: var(--zen-colors-border); background: var(--zen-colors-primary);
border-radius: 2px; border-radius: 2px;
content: ''; content: '';
position: absolute; position: absolute;

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

@@ -696,10 +696,6 @@
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
background: var(--zen-colors-border); background: var(--zen-colors-border);
appearance: none; appearance: none;
&:hover {
opacity: 1;
}
} }
/* Mark: Move sidebar to the right */ /* Mark: Move sidebar to the right */

6
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -147,7 +147,7 @@ var gZenCompactModeManager = {
if (canHideSidebar && isCompactMode) { if (canHideSidebar && isCompactMode) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.sidebar.style.position = 'unset'; this.sidebar.style.position = 'unset';
this.sidebar.style.transition = 'margin .4s ease'; this.sidebar.style.transition = 'margin .3s ease-in-out';
this.sidebar.style.left = '0'; this.sidebar.style.left = '0';
if (!this.sidebarIsOnRight) { if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`; this.sidebar.style.marginLeft = `${-1 * sidebarWidth}px`;
@@ -188,7 +188,7 @@ var gZenCompactModeManager = {
} }
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.sidebar.style.transition = 'margin .3s ease, transform .275s ease, opacity .3s ease'; this.sidebar.style.transition = 'margin .3s ease-in-out, transform .275s ease-in-out, opacity .3s ease';
// we are in compact mode and we are exiting it // we are in compact mode and we are exiting it
if (!this.sidebarIsOnRight) { if (!this.sidebarIsOnRight) {
this.sidebar.style.marginLeft = '0'; this.sidebar.style.marginLeft = '0';
@@ -274,7 +274,7 @@ var gZenCompactModeManager = {
{ {
element: this.sidebar, element: this.sidebar,
screenEdge: this.sidebarIsOnRight ? 'right' : 'left', screenEdge: this.sidebarIsOnRight ? 'right' : 'left',
keepHoverDuration: 100, keepHoverDuration: 50,
}, },
{ {
element: document.getElementById('zen-appcontent-navbar-container'), element: document.getElementById('zen-appcontent-navbar-container'),