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%;
justify-content: space-between;
padding: var(--sidebar-inner-padding);
padding-bottom: var(--border-radius);
padding-bottom: calc(var(--sidebar-inner-padding) * 2);
overflow-y: scroll;
}
@ -79,6 +79,7 @@
justify-content: center;
align-items: flex-start;
z-index: 3;
padding: var(--sidebar-inner-padding) 0;
}
#sidebar::before {
@ -95,27 +96,26 @@
#sidebar-tabs {
overflow-y: visible;
overflow-x: scroll;
padding-bottom: 0;
padding: var(--sidebar-inner-padding) 0;
padding: 0;
height: fit-content;
}
#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) {
padding-right: calc(var(--border-radius) * 2);
padding-right: calc(var(--border-radius) * 1.5);
}
#sidebar :global(.sidebar-inner-container:first-child:dir(rtl)) {
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)) {
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;
text-align: center;
gap: 3px;
padding: var(--padding) 3px;
padding: 10px 3px;
color: var(--sidebar-highlight);
font-size: var(--sidebar-font-size);
opacity: 0.75;

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

@ -149,15 +149,20 @@
--sidebar-width: 80px;
--sidebar-font-size: 11px;
--sidebar-inner-padding: 4px;
/* reduce default inset by 5px if it's not 0 */
--sidebar-height-mobile: calc(
50px + calc(var(--sidebar-inner-padding) * 2) +
env(safe-area-inset-bottom)
50px + calc(
env(safe-area-inset-bottom) - 5px * sign(
env(safe-area-inset-bottom)
)
)
);
--safe-area-inset-top: env(safe-area-inset-top);
--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 */
--sidebar-mobile-gradient: linear-gradient(
@ -307,7 +312,11 @@
#cobalt {
display: grid;
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,