admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 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
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>