mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-01-15 19:35:31 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

web/sidebar: reduce padding on desktop & fix mobile padding

Browse source
This commit is contained in:
wukko 2025-01-12 22:55:10 +06:00
parent f816fae6ba
commit abc4673af7
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/components/sidebar/Sidebar.svelte
View file

@ -60,7 +60,7 @@
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
padding: var(--sidebar-inner-padding); padding: var(--sidebar-inner-padding);
padding-bottom: var(--border-radius); padding-bottom: calc(var(--sidebar-inner-padding) * 2);
overflow-y: scroll; overflow-y: scroll;
} }
@ -79,6 +79,7 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
z-index: 3; z-index: 3;
padding: var(--sidebar-inner-padding) 0;
} }
#sidebar::before { #sidebar::before {
@ -95,27 +96,26 @@
#sidebar-tabs { #sidebar-tabs {
overflow-y: visible; overflow-y: visible;
overflow-x: scroll; overflow-x: scroll;
padding-bottom: 0; padding: 0;
padding: var(--sidebar-inner-padding) 0;
height: fit-content; height: fit-content;
} }
#sidebar :global(.sidebar-inner-container:first-child) { #sidebar :global(.sidebar-inner-container:first-child) {
padding-left: calc(var(--border-radius) * 2); padding-left: calc(var(--border-radius) * 1.5);
} }
#sidebar :global(.sidebar-inner-container:last-child) { #sidebar :global(.sidebar-inner-container:last-child) {
padding-right: calc(var(--border-radius) * 2); padding-right: calc(var(--border-radius) * 1.5);
} }
#sidebar :global(.sidebar-inner-container:first-child:dir(rtl)) { #sidebar :global(.sidebar-inner-container:first-child:dir(rtl)) {
padding-left: 0; padding-left: 0;
padding-right: calc(var(--border-radius) * 2); padding-right: calc(var(--border-radius) * 1.5);
} }
#sidebar :global(.sidebar-inner-container:last-child:dir(rtl)) { #sidebar :global(.sidebar-inner-container:last-child:dir(rtl)) {
padding-right: 0; padding-right: 0;
padding-left: calc(var(--border-radius) * 2); padding-left: calc(var(--border-radius) * 1.5);
} }
} }

2
web/src/components/sidebar/SidebarTab.svelte
View file

@ -58,7 +58,7 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 3px; gap: 3px;
padding: var(--padding) 3px; padding: 10px 3px;
color: var(--sidebar-highlight); color: var(--sidebar-highlight);
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
opacity: 0.75; opacity: 0.75;

17
web/src/routes/+layout.svelte
View file

@ -149,15 +149,20 @@
--sidebar-width: 80px; --sidebar-width: 80px;
--sidebar-font-size: 11px; --sidebar-font-size: 11px;
--sidebar-inner-padding: 4px; --sidebar-inner-padding: 4px;
/* reduce default inset by 5px if it's not 0 */
--sidebar-height-mobile: calc( --sidebar-height-mobile: calc(
50px + calc(var(--sidebar-inner-padding) * 2) + 50px + calc(
env(safe-area-inset-bottom) env(safe-area-inset-bottom) - 5px * sign(
env(safe-area-inset-bottom)
)
)
); );
--safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-bottom: env(safe-area-inset-bottom);
--switcher-padding: var(--sidebar-inner-padding); --switcher-padding: 4px;
/* used for fading the tab bar on scroll */ /* used for fading the tab bar on scroll */
--sidebar-mobile-gradient: linear-gradient( --sidebar-mobile-gradient: linear-gradient(
@ -307,7 +312,11 @@
#cobalt { #cobalt {
display: grid; display: grid;
grid-template-columns: unset; grid-template-columns: unset;
grid-template-rows: 1fr var(--sidebar-height-mobile); grid-template-rows:
1fr
calc(
var(--sidebar-height-mobile) + var(--sidebar-inner-padding) * 2
);
} }
#content, #content,