mfbs

commit

2ac5db871d6615bca1a730c46b7c4272a2a81dd1

parent

83457333157121049c25233d4c102bc8de99a0ab

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-04-24 13:06

use color-mix instead of static interpolation

see https://caniuse.com/?search=color-mix

Support is currently at 88%.

If this is not available, then focus gets no special styling. I think we
can live with that.

Diffstat

1 files changed, 9 insertions, 17 deletions

diff --git a/css/form.css b/css/form.css

@@ -40,29 +40,19 @@ textarea {
   40    40     line-height: inherit;
   41    41 }
   42    42 
   43    -1 @keyframes color-link {
   44    -1     from {
   45    -1         border-color: var(--color-link);
   46    -1         background: var(--color-link);
   47    -1         color: var(--color-bg);
   48    -1     }
   49    -1     to {
   50    -1         border-color: var(--color-link-focus);
   51    -1         background: var(--color-link-focus);
   52    -1         color: var(--color-bg);
   53    -1     }
   54    -1 }
   55    -1 
   56    43 .button,
   57    44 button,
   58    45 [type=button],
   59    46 [type=submit] {
   -1    47     --btn-bg: var(--color-link);
   60    48     text-decoration: none;
   61    49     display: inline-block;
   62    50     cursor: pointer;
   63    51     text-align: center;
   64    52     border-radius: 0.3em;
   65    -1     animation: 100s color-link linear forwards paused;
   -1    53     border-color: var(--btn-bg);
   -1    54     background: var(--btn-bg);
   -1    55     color: var(--color-bg);
   66    56 }
   67    57 .button:hover,
   68    58 .button:focus-visible,
@@ -72,19 +62,21 @@ button:focus-visible,
   72    62 [type=button]:focus-visible,
   73    63 [type=submit]:hover,
   74    64 [type=submit]:focus-visible {
   75    -1     animation-delay: -50s;
   -1    65     --btn-bg: color-mix(in oklch, var(--color-link), var(--color-link-focus));
   76    66 }
   77    67 .button:active,
   78    68 button:active,
   79    69 [type=button]:active,
   80    70 [type=submit]:active {
   81    -1     animation-delay: -100s;
   -1    71     --btn-bg: var(--color-link-focus);
   82    72 }
   83    73 .button:disabled,
   84    74 button:disabled,
   85    75 [type=button]:disabled,
   86    76 [type=submit]:disabled {
   87    -1     animation-delay: 0s;
   -1    77     border-color: var(--color-link);
   -1    78     background: var(--color-link);
   -1    79     color: var(--color-bg);
   88    80     opacity: 0.5;
   89    81     cursor: not-allowed;
   90    82 }