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/settings: calculate item padding properly

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/buttons/SettingsToggle.svelte
View file

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

7
web/src/components/buttons/Switcher.svelte
View file

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

2
web/src/components/misc/Toggle.svelte
View file

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

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

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