blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/settings: unfuck tab padding on mobile

Browse source
This commit is contained in:
wukko 2024-06-30 15:58:40 +06:00
parent 7dd33d1341
commit 567cfe05ec
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/src/components/settings/SettingsSection.svelte
View file

@ -33,15 +33,8 @@
box-shadow: var(--button-box-shadow); box-shadow: var(--button-box-shadow);
} }
#settings-section-categories > :global(:not(.settings-tab:last-child)) { #settings-section-title {
border-bottom-left-radius: 0; padding-left: calc(7px * 1.5);
border-bottom-right-radius: 0;
box-shadow: 0 3px 0px -1.2px var(--button-stroke);
}
#settings-section-categories > :global(:not(.settings-tab:first-child)) {
border-top-left-radius: 0;
border-top-right-radius: 0;
} }
} }
</style> </style>

28
web/src/components/settings/SettingsTab.svelte
View file

@ -29,12 +29,13 @@
<style> <style>
.settings-tab { .settings-tab {
--small-padding: 4px; --small-padding: 4px;
--big-padding: 7px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: calc(var(--small-padding) * 2); gap: calc(var(--small-padding) * 2);
padding: 7px; padding: var(--big-padding);
font-weight: 500; font-weight: 500;
background: var(--primary); background: var(--primary);
color: var(--button-text); color: var(--button-text);
@ -46,14 +47,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: calc(var(--small-padding) * 2); gap: calc(var(--big-padding) * 1.5);
font-weight: 500; font-weight: 500;
} }
.settings-tab :global(svg) { .settings-tab :global(svg) {
stroke-width: 1.5px; stroke-width: 1.5px;
height: 18px; height: 20px;
width: 18px; width: 20px;
} }
.settings-tab .tab-icon :global(svg) { .settings-tab .tab-icon :global(svg) {
@ -95,13 +96,22 @@
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
.settings-tab { .settings-tab {
background: none; background: none;
padding: 9px; padding: var(--big-padding) calc(var(--big-padding) * 1.5);
--small-padding: 5px;
} }
.settings-tab :global(svg) { .settings-tab-left {
height: 19px; gap: calc(var(--big-padding) * 1.5);
width: 19px; }
.settings-tab:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 0 3px 0px -1.7px var(--button-stroke);
}
.settings-tab:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
} }
.settings-tab-chevron :global(svg) { .settings-tab-chevron :global(svg) {