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

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

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

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

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