Added randomized gradients

This commit is contained in:
Kevin Veen-Birkenbach 2025-02-20 19:00:56 +01:00
parent a69f78d336
commit 6597d980df

View File

@ -585,7 +585,7 @@ input:invalid,
textarea:invalid, textarea:invalid,
select:invalid { select:invalid {
background-color: var(--color-01); background-color: var(--color-01);
background: linear-gradient(45deg, var(--color-01), var(--color-10)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01), var(--color-10));
/* Use Bootstrap danger color for error messages */ /* Use Bootstrap danger color for error messages */
color: var(--bs-danger); color: var(--bs-danger);
border-color: var(--color-20); border-color: var(--color-20);
@ -596,7 +596,7 @@ input:valid,
textarea:valid, textarea:valid,
select:valid { select:valid {
background-color: var(--color-80); background-color: var(--color-80);
background: linear-gradient(45deg, var(--color-80), var(--color-90)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-80), var(--color-90));
/* Use Bootstrap success color for confirmation messages */ /* Use Bootstrap success color for confirmation messages */
color: var(--bs-success); color: var(--bs-success);
border-color: var(--color-70); border-color: var(--color-70);
@ -607,7 +607,7 @@ input:required,
textarea:required, textarea:required,
select:required { select:required {
background-color: var(--color-50); background-color: var(--color-50);
background: linear-gradient(45deg, var(--color-50), var(--color-60)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-50), var(--color-60));
/* Use Bootstrap warning color to indicate a required field */ /* Use Bootstrap warning color to indicate a required field */
color: var(--bs-warning); color: var(--bs-warning);
border-color: var(--color-70); border-color: var(--color-70);
@ -618,7 +618,7 @@ input:optional,
textarea:optional, textarea:optional,
select:optional { select:optional {
background-color: var(--color-60); background-color: var(--color-60);
background: linear-gradient(45deg, var(--color-60), var(--color-70)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-70));
/* Use Bootstrap info color to indicate optional information */ /* Use Bootstrap info color to indicate optional information */
color: var(--bs-info); color: var(--bs-info);
border-color: var(--color-70); border-color: var(--color-70);
@ -629,7 +629,7 @@ input:read-only,
textarea:read-only, textarea:read-only,
select:read-only { select:read-only {
background-color: var(--color-80); background-color: var(--color-80);
background: linear-gradient(45deg, var(--color-90), var(--color-70)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-90), var(--color-70));
color: var(--color-20); color: var(--color-20);
border-color: var(--color-50); border-color: var(--color-50);
} }
@ -639,7 +639,7 @@ input:read-write,
textarea:read-write, textarea:read-write,
select:read-write { select:read-write {
background-color: var(--color-70); background-color: var(--color-70);
background: linear-gradient(45deg, var(--color-70), var(--color-80)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-80));
color: var(--color-40); color: var(--color-40);
border-color: var(--color-70); border-color: var(--color-70);
} }
@ -649,7 +649,7 @@ input:in-range,
textarea:in-range, textarea:in-range,
select:in-range { select:in-range {
background-color: var(--color-70); background-color: var(--color-70);
background: linear-gradient(45deg, var(--color-70), var(--color-85)); background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-85));
color: var(--color-40); color: var(--color-40);
border-color: var(--color-70); border-color: var(--color-70);
} }