web/settings: calculate item padding properly

This commit is contained in:
wukko 2024-06-29 23:31:40 +06:00
parent a1913988d7
commit 3527131cd7
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 8 additions and 5 deletions

View file

@ -59,7 +59,7 @@
justify-content: space-between;
text-align: left;
transform: none;
padding: 9px 16px;
padding: calc(var(--switcher-padding) * 2) 16px;
border-radius: var(--border-radius);
}
</style>

View file

@ -30,13 +30,14 @@
.switcher.big {
background: var(--button);
box-shadow: var(--button-box-shadow);
padding: var(--sidebar-inner-padding);
padding: var(--switcher-padding);
}
.switcher.big :global(.button) {
width: 100%;
height: calc(40px - var(--sidebar-inner-padding) * 1.5);
border-radius: calc(var(--border-radius) - var(--sidebar-inner-padding));;
/* [base button height] - ([switcher padding] * [padding factor to accommodate for]) */
height: calc(40px - var(--switcher-padding) * 1.5);
border-radius: calc(var(--border-radius) - var(--switcher-padding));;
}
.switcher.big :global(.button:not(:focus-visible)) {

View file

@ -8,7 +8,7 @@
<style>
.toggle {
--base-size: 20px;
--base-size: 22px;
--ratio-factor: 0.9;
display: flex;

View file

@ -57,6 +57,8 @@
--sidebar-font-size: 11px;
--sidebar-inner-padding: 4px;
--switcher-padding: var(--sidebar-inner-padding);
--sidebar-mobile-gradient: linear-gradient(
90deg,
rgba(0, 0, 0, 0.9) 0%,