web/DonateOptionsCard: adjust padding, fix width, mask options row

This commit is contained in:
wukko 2024-08-09 11:46:56 +06:00
parent 98ac05ad86
commit cc5835a546
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2

View file

@ -128,10 +128,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: calc(100% - var(--donation-box-main-padding) * 2); width: 100%;
max-width: 480px; max-width: 480px;
padding: var(--donation-box-main-padding); padding: var(--donation-box-main-padding) 0;
border-radius: var(--donate-border-radius); border-radius: var(--donate-border-radius);
gap: calc(var(--donation-box-main-padding) / 2); gap: calc(var(--donation-box-main-padding) / 2);
@ -145,6 +145,12 @@
inset; inset;
} }
#donation-types,
#donation-options,
#donation-custom {
padding: 0 var(--donation-box-main-padding);
}
#donation-types { #donation-types {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -214,6 +220,14 @@
display: flex; display: flex;
overflow-x: scroll; overflow-x: scroll;
gap: 6px; gap: 6px;
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 4%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 96%,
rgba(0, 0, 0, 0) 100%
);
} }
#donation-custom { #donation-custom {