🍱 Updated form styles

web/static/styles.css

@@ -29,6 +29,7 @@
     sans-serif;
   font-size: calc(1rem + 0.5vw);
   line-height: var(--ratio);
+  color-scheme: light;
 }
 
 * {
@@ -46,11 +47,17 @@ footer {
   max-inline-size: none;
 }
 
+/* Input */
+input,
+select {
+  font-size: inherit;
+}
+
 /* Button */
 .button,
 button {
-  --_background: var(--background, #ccc);
-  --_color: var(--color, #000);
+  --_background: var(--background, hsl(0, 0%, 80%));
+  --_color: var(--color, hsl(0, 0%, 0%));
   /* NOTE(toby3d): reset everything */
   all: unset;
   /* NOTE(toby3d): start from scratch */
@@ -70,22 +77,23 @@ button {
 
 .button[href*='liberapay.com'],
 button[href*='liberapay.com'] {
-  --background: #f6c915;
-  --color: #1a171b;
+  --background: hsl(48, 93%, 52%);
+  --color: hsl(285, 8%, 10%);
 }
 
 .button[href*='paypal.me'],
 button[href*='paypal.me'] {
-  --background: #ffd140;
-  --color: #001435;
+  --background: hsl(46, 100%, 63%);
+  --color: hsl(217, 100%, 10%);
 }
 
 .button[href*='yoomoney.ru'],
 button[href*='yoomoney.ru'] {
-  --background: #8b3ffd;
-  --color: #fff;
+  --background: hsl(264, 98%, 62%);
+  --color: hsl(0, 0%, 100%);
 }
 
+.with-icon .icon,
 .button .icon,
 .button svg,
 button .icon,
@@ -127,8 +135,8 @@ button:active {
 .button:not([href]),
 button[disabled] {
   /* TODO(toby3d): better color mathing with good WCAG grading */
-  --background: #6c7589;
-  --color: #d2d5db;
+  --background: hsl(0, 0%, 60%);
+  --color: hsl(0, 0%, 15%);
   cursor: not-allowed;
 }
 
@@ -162,6 +170,14 @@ button[disabled] svg {
   width: 1px;
 }
 
+.form {
+  --space: 1cap;
+}
+
+.form__amount {
+  width: 4em;
+}
+
 /* Utilities */
 .list-style-type\:none {
   list-style-type: none;
@@ -170,3 +186,8 @@ button[disabled] svg {
 .padding-inline-start\:unset {
   padding-inline-start: unset;
 }
+
+.display\:none,
+[hidden] {
+  display: none !important;
+}