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

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

View File

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

View File

@@ -9,7 +9,7 @@
#tabbrowser-tabpanels[zen-split-view='true'] {
display: flex;
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']) {
@@ -67,15 +67,9 @@
#zen-splitview-overlay {
@media (-moz-bool-pref: 'zen.view.compact') {
:root:not([customizing]) & {
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
& {
margin-left: 1px;
}
}
@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);
}
}
}

View File

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

View File

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