mfbs

CSS microframework
git clone https://git.ce9e.org/mfbs.git

commit
efc44688c13dad3811beb4e0decc0646996b47bd
parent
2ddbd1c68dcacb58efba6927c53c0cf1b46068b0
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2024-04-26 06:09
restore option to easily overwrite button colors

Diffstat

M css/form.css 22 +++++++++++++---------

1 files changed, 13 insertions, 9 deletions


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

@@ -44,15 +44,19 @@ textarea {
   44    44 button,
   45    45 [type=button],
   46    46 [type=submit] {
   47    -1     --btn-bg: var(--color-link);
   -1    47     --btn-color: var(--color-link);
   -1    48     --btn-focus: var(--color-link-focus);
   -1    49     --btn-contrast: var(--color-bg);
   -1    50     --btn-internal: var(--btn-color);
   -1    51 
   48    52     text-decoration: none;
   49    53     display: inline-block;
   50    54     cursor: pointer;
   51    55     text-align: center;
   52    56     border-radius: 0.3em;
   53    -1     border-color: var(--btn-bg);
   54    -1     background: var(--btn-bg);
   55    -1     color: var(--color-bg);
   -1    57     border-color: var(--btn-internal);
   -1    58     background: var(--btn-internal);
   -1    59     color: var(--btn-contrast);
   56    60 }
   57    61 .button:hover,
   58    62 .button:focus-visible,
@@ -62,21 +66,21 @@ button:focus-visible,
   62    66 [type=button]:focus-visible,
   63    67 [type=submit]:hover,
   64    68 [type=submit]:focus-visible {
   65    -1     --btn-bg: color-mix(in oklch, var(--color-link), var(--color-link-focus));
   -1    69     --btn-internal: color-mix(in oklch, var(--btn-color), var(--btn-focus));
   66    70 }
   67    71 .button:active,
   68    72 button:active,
   69    73 [type=button]:active,
   70    74 [type=submit]:active {
   71    -1     --btn-bg: var(--color-link-focus);
   -1    75     --btn-internal: var(--btn-focus);
   72    76 }
   73    77 .button:disabled,
   74    78 button:disabled,
   75    79 [type=button]:disabled,
   76    80 [type=submit]:disabled {
   77    -1     border-color: var(--color-link);
   78    -1     background: var(--color-link);
   79    -1     color: var(--color-bg);
   -1    81     border-color: var(--btn-bg);
   -1    82     background: var(--btn-bg);
   -1    83     color: var(--btn-fg);
   80    84     opacity: 0.5;
   81    85     cursor: not-allowed;
   82    86 }