Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web: consistent tab bar style with rounded corners

Browse source
This commit is contained in:
wukko 2024-06-16 22:59:16 +06:00
parent 7679b84b2e
commit 5ba3231a1e
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,6 +63,7 @@
height: 100vh;
width: var(--sidebar-width);
position: sticky;
padding: 0 var(--sidebar-inner-padding);
}
#sidebar-tabs {
@ -84,7 +85,7 @@
height: var(--sidebar-height-mobile);
position: fixed;
bottom: 0;
padding: 4px 0;
padding: var(--sidebar-inner-padding) 0;
}
#sidebar::before {
@ -106,11 +107,11 @@
}
#sidebar :global(.sidebar-inner-container:first-child) {
padding-left: var(--padding);
padding-left: calc(var(--border-radius) * 2);
}
#sidebar :global(.sidebar-inner-container:last-child) {
padding-right: var(--padding);
padding-right: calc(var(--border-radius) * 2);
}
}
</style>

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

@ -29,6 +29,7 @@
font-size: var(--sidebar-font-size);
opacity: 0.8;
height: fit-content;
border-radius: var(--border-radius);
-webkit-touch-callout: none;
}
@ -60,7 +61,6 @@
.sidebar-tab.active {
z-index: 2;
border-radius: var(--border-radius);
}
}
</style>

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

@ -33,6 +33,7 @@
--sidebar-width: 80px;
--sidebar-height-mobile: calc(52px + env(safe-area-inset-bottom));
--sidebar-font-size: 11px;
--sidebar-inner-padding: 4px;
--sidebar-mobile-gradient: linear-gradient(
90deg,
@ -76,7 +77,7 @@
:global(html),
:global(body) {
margin: 0;
background-color: var(--primary);
background-color: var(--sidebar-bg);
color: var(--secondary);
}
@ -144,7 +145,7 @@
#cobalt {
height: 100vh;
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
grid-template-columns: calc(var(--sidebar-width) + 8px) 1fr;
overflow: hidden;
}
@ -153,16 +154,23 @@
overflow: scroll;
padding: var(--padding);
background-color: var(--primary);
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
@media screen and (max-width: 535px) {
#cobalt {
display: grid;
grid-template-columns: unset;
grid-template-rows: 1fr var(--sidebar-height-mobile);
grid-template-rows: 1fr calc(var(--sidebar-height-mobile) + 8px);
}
#content {
padding-top: env(safe-area-inset-top);
order: -1;
border-top-left-radius: 0;
border-bottom-left-radius: calc(var(--border-radius) * 2);
border-bottom-right-radius: calc(var(--border-radius) * 2);
}
}
</style>