Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-24 12:08:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/settings: slightly update navigation style on mobile

Browse source
This commit is contained in:
wukko 2024-08-23 19:44:10 +06:00
parent 70264f3691
commit 24f2329e9d
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/settings/SettingsNavSection.svelte
View file

@ -24,6 +24,8 @@
#settings-section { #settings-section {
gap: 6px; gap: 6px;
border-radius: var(--border-radius);
overflow: hidden;
} }
#settings-section-title { #settings-section-title {

42
web/src/components/settings/SettingsNavTab.svelte
View file

@ -22,8 +22,10 @@
<div class="tab-icon" style="background: var(--{iconColor})"> <div class="tab-icon" style="background: var(--{iconColor})">
<slot></slot> <slot></slot>
</div> </div>
<div class="settings-tab-text">
<span>{$t(`settings.page.${tabName}`)}</span> <span>{$t(`settings.page.${tabName}`)}</span>
</div> </div>
</div>
<div class="settings-tab-chevron"> <div class="settings-tab-chevron">
<IconChevronRight /> <IconChevronRight />
</div> </div>
@ -57,19 +59,27 @@
font-weight: 500; font-weight: 500;
} }
.settings-tab :global(svg) { .tab-icon {
display: flex;
justify-content: center;
align-items: center;
padding: var(--small-padding);
border-radius: 5px;
}
.settings-tab .tab-icon :global(svg) {
stroke-width: 1.5px; stroke-width: 1.5px;
stroke: var(--white);
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
.settings-tab .tab-icon :global(svg) {
stroke: var(--white);
}
.settings-tab-chevron :global(svg) { .settings-tab-chevron :global(svg) {
display: none; display: none;
stroke: var(--secondary); stroke-width: 2px;
stroke: var(--gray);
height: 18px;
width: 18px;
} }
@media (hover: hover) { @media (hover: hover) {
@ -91,29 +101,17 @@
font-size: 14.5px; font-size: 14.5px;
} }
.tab-icon {
display: flex;
justify-content: center;
align-items: center;
padding: var(--small-padding);
border-radius: 5px;
}
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
.settings-tab { .settings-tab {
--big-padding: 7px; --big-padding: 7px;
background: none; background: none;
padding: var(--big-padding) calc(var(--big-padding) * 1.5); padding: var(--big-padding) 11px;
}
.settings-tab-left {
gap: calc(var(--big-padding) * 1.5);
} }
.settings-tab:not(:last-child) { .settings-tab:not(:last-child) {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
box-shadow: 0 3px 0px -1.7px var(--button-stroke); box-shadow: 48px 3px 0px -1.8px var(--button-stroke);
} }
.settings-tab:not(:first-child) { .settings-tab:not(:first-child) {
@ -121,6 +119,10 @@
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.settings-tab-left {
gap: 10px;
}
.settings-tab-chevron :global(svg) { .settings-tab-chevron :global(svg) {
display: block; display: block;
} }