Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-27 05:28:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/PageNavTab: cleaner icon style

Browse source
This commit is contained in:
wukko 2025-02-24 16:30:33 +06:00
parent 8e4d0cd03d
commit b2df289894
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/subnav/PageNavTab.svelte
View file

@ -17,8 +17,8 @@
class:active={isActive} class:active={isActive}
role="button" role="button"
> >
<div class="subnav-tab-left"> <div class="subnav-tab-left" style="--icon-color: var(--{iconColor})">
<div class="tab-icon" style="background: var(--{iconColor})"> <div class="tab-icon">
<svelte:component this={icon} /> <svelte:component this={icon} />
</div> </div>
<div class="subnav-tab-text"> <div class="subnav-tab-text">
@ -65,6 +65,7 @@
align-items: center; align-items: center;
padding: var(--small-padding); padding: var(--small-padding);
border-radius: 5px; border-radius: 5px;
background: var(--icon-color);
} }
.subnav-tab .tab-icon :global(svg) { .subnav-tab .tab-icon :global(svg) {
@ -74,6 +75,18 @@
width: 20px; width: 20px;
} }
.subnav-tab:not(.active) .tab-icon {
background: rgba(0, 0, 0, 0.05);
}
:global([data-theme="dark"]) .subnav-tab:not(.active) .tab-icon {
background: rgba(255, 255, 255, 0.1);
}
.subnav-tab:not(.active) .tab-icon :global(svg) {
stroke: var(--icon-color);
}
.subnav-tab-chevron :global(svg) { .subnav-tab-chevron :global(svg) {
display: none; display: none;
stroke-width: 2px; stroke-width: 2px;

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

@ -111,7 +111,7 @@
--red: #ed2236; --red: #ed2236;
--medium-red: #ce3030; --medium-red: #ce3030;
--dark-red: #d61c2e; --dark-red: #d61c2e;
--green: #51cf5e; --green: #30bd1b;
--blue: #2f8af9; --blue: #2f8af9;
--focus-ring: 0 0 0 2px var(--blue) inset; --focus-ring: 0 0 0 2px var(--blue) inset;