forked from MapComplete/MapComplete
Make text legible
This commit is contained in:
parent
943db6b02d
commit
8234616168
GPG key ID:
53956B3252478F0D
2 changed files with 289 additions and 191 deletions
|
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
::before,
|
::before,
|
||||||
::after {
|
::after {
|
||||||
--tw-content: '';
|
--tw-content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -50,7 +50,9 @@ html {
|
||||||
/* 3 */
|
/* 3 */
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
|
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||||
|
"Segoe UI Symbol", "Noto Color Emoji";
|
||||||
/* 4 */
|
/* 4 */
|
||||||
-webkit-font-feature-settings: normal;
|
-webkit-font-feature-settings: normal;
|
||||||
font-feature-settings: normal;
|
font-feature-settings: normal;
|
||||||
|
|
@ -134,7 +136,8 @@ code,
|
||||||
kbd,
|
kbd,
|
||||||
samp,
|
samp,
|
||||||
pre {
|
pre {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||||
|
"Courier New", monospace;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
|
|
@ -225,9 +228,9 @@ select {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type='button'],
|
[type="button"],
|
||||||
[type='reset'],
|
[type="reset"],
|
||||||
[type='submit'] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
@ -274,7 +277,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
|
||||||
2. Correct the outline style in Safari.
|
2. Correct the outline style in Safari.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type='search'] {
|
[type="search"] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
|
|
@ -359,7 +362,8 @@ textarea {
|
||||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
|
input::-webkit-input-placeholder,
|
||||||
|
textarea::-webkit-input-placeholder {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
|
|
@ -427,7 +431,9 @@ video {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
*, ::before, ::after {
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
--tw-border-spacing-x: 0;
|
--tw-border-spacing-x: 0;
|
||||||
--tw-border-spacing-y: 0;
|
--tw-border-spacing-y: 0;
|
||||||
--tw-translate-x: 0;
|
--tw-translate-x: 0;
|
||||||
|
|
@ -1326,13 +1332,21 @@ video {
|
||||||
}
|
}
|
||||||
|
|
||||||
.transform {
|
.transform {
|
||||||
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||||
|
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||||
|
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||||
|
scaleY(var(--tw-scale-y));
|
||||||
}
|
}
|
||||||
|
|
||||||
.\!transform {
|
.\!transform {
|
||||||
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
|
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y))
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
|
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||||
|
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||||
|
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||||
|
scaleY(var(--tw-scale-y)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
|
|
@ -2030,37 +2044,44 @@ video {
|
||||||
|
|
||||||
.ordinal {
|
.ordinal {
|
||||||
--tw-ordinal: ordinal;
|
--tw-ordinal: ordinal;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slashed-zero {
|
.slashed-zero {
|
||||||
--tw-slashed-zero: slashed-zero;
|
--tw-slashed-zero: slashed-zero;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lining-nums {
|
.lining-nums {
|
||||||
--tw-numeric-figure: lining-nums;
|
--tw-numeric-figure: lining-nums;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.oldstyle-nums {
|
.oldstyle-nums {
|
||||||
--tw-numeric-figure: oldstyle-nums;
|
--tw-numeric-figure: oldstyle-nums;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.proportional-nums {
|
.proportional-nums {
|
||||||
--tw-numeric-spacing: proportional-nums;
|
--tw-numeric-spacing: proportional-nums;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabular-nums {
|
.tabular-nums {
|
||||||
--tw-numeric-spacing: tabular-nums;
|
--tw-numeric-spacing: tabular-nums;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagonal-fractions {
|
.diagonal-fractions {
|
||||||
--tw-numeric-fraction: diagonal-fractions;
|
--tw-numeric-fraction: diagonal-fractions;
|
||||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||||
|
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracking-tight {
|
.tracking-tight {
|
||||||
|
|
@ -2072,6 +2093,11 @@ video {
|
||||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-black {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.text-red-500 {
|
.text-red-500 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(239 68 68 / var(--tw-text-opacity));
|
color: rgb(239 68 68 / var(--tw-text-opacity));
|
||||||
|
|
@ -2114,7 +2140,8 @@ video {
|
||||||
.shadow {
|
.shadow {
|
||||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||||
|
var(--tw-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.outline-none {
|
.outline-none {
|
||||||
|
|
@ -2127,8 +2154,10 @@ video {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ring {
|
.ring {
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
var(--tw-ring-offset-color);
|
||||||
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
|
||||||
|
var(--tw-ring-color);
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2138,89 +2167,137 @@ video {
|
||||||
|
|
||||||
.blur {
|
.blur {
|
||||||
--tw-blur: blur(8px);
|
--tw-blur: blur(8px);
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-shadow-md {
|
.drop-shadow-md {
|
||||||
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-shadow-2xl {
|
.drop-shadow-2xl {
|
||||||
--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
|
--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-shadow {
|
.drop-shadow {
|
||||||
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
|
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grayscale {
|
.grayscale {
|
||||||
--tw-grayscale: grayscale(100%);
|
--tw-grayscale: grayscale(100%);
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.invert {
|
.invert {
|
||||||
--tw-invert: invert(100%);
|
--tw-invert: invert(100%);
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sepia {
|
.sepia {
|
||||||
--tw-sepia: sepia(100%);
|
--tw-sepia: sepia(100%);
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter {
|
.filter {
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.\!filter {
|
.\!filter {
|
||||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
|
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
|
||||||
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||||
|
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop-blur {
|
.backdrop-blur {
|
||||||
--tw-backdrop-blur: blur(8px);
|
--tw-backdrop-blur: blur(8px);
|
||||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||||
|
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||||
|
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop-grayscale {
|
.backdrop-grayscale {
|
||||||
--tw-backdrop-grayscale: grayscale(100%);
|
--tw-backdrop-grayscale: grayscale(100%);
|
||||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||||
|
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||||
|
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop-invert {
|
.backdrop-invert {
|
||||||
--tw-backdrop-invert: invert(100%);
|
--tw-backdrop-invert: invert(100%);
|
||||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||||
|
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||||
|
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop-sepia {
|
.backdrop-sepia {
|
||||||
--tw-backdrop-sepia: sepia(100%);
|
--tw-backdrop-sepia: sepia(100%);
|
||||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||||
|
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||||
|
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop-filter {
|
.backdrop-filter {
|
||||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||||||
|
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||||
|
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||||
}
|
}
|
||||||
|
|
||||||
.transition {
|
.transition {
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter;
|
||||||
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
}
|
}
|
||||||
|
|
@ -2351,7 +2428,7 @@ input {
|
||||||
color: var(--foreground-color);
|
color: var(--foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type="text"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2374,12 +2451,12 @@ input[type=text] {
|
||||||
|
|
||||||
.low-interaction {
|
.low-interaction {
|
||||||
background: var(--low-interaction-background);
|
background: var(--low-interaction-background);
|
||||||
color: var(--low-interaction-foreground)
|
color: var(--low-interaction-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive {
|
.interactive {
|
||||||
background: var(--interactive-background);
|
background: var(--interactive-background);
|
||||||
color: var(--interactive-foreground)
|
color: var(--interactive-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-interactive {
|
.border-interactive {
|
||||||
|
|
@ -2398,7 +2475,8 @@ input[type=text] {
|
||||||
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
* This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
|
||||||
*/
|
*/
|
||||||
|
|
||||||
button.small, .button.small {
|
button.small,
|
||||||
|
.button.small {
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
|
|
@ -2419,7 +2497,8 @@ button.small, .button.small {
|
||||||
color: var(--low-interaction-foreground);
|
color: var(--low-interaction-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
button, .button {
|
button,
|
||||||
|
.button {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
|
|
@ -2442,60 +2521,72 @@ button, .button {
|
||||||
box-shadow: 0 5px 10px #88888888;
|
box-shadow: 0 5px 10px #88888888;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.selected, .button.selected {
|
button.selected,
|
||||||
|
.button.selected {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
border-color: var(--catch-detail-color);
|
border-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.selected svg path, .button.selected svg path {
|
button.selected svg path,
|
||||||
|
.button.selected svg path {
|
||||||
fill: var(--catch-detail-foregroundcolor) !important;
|
fill: var(--catch-detail-foregroundcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path {
|
button:not(.no-image-background):not(.soft) svg path,
|
||||||
|
.button:not(.no-image-background):not(.soft) svg path {
|
||||||
fill: var(--interactive-foreground) !important;
|
fill: var(--interactive-foreground) !important;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive button, .interactive .button {
|
.interactive button,
|
||||||
|
.interactive .button {
|
||||||
background: var(--interactive-background);
|
background: var(--interactive-background);
|
||||||
color: var(--interactive-foreground);
|
color: var(--interactive-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, .button:hover {
|
button:hover,
|
||||||
|
.button:hover {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
border: 2px solid var(--catch-detail-color-contrast);
|
border: 2px solid var(--catch-detail-color-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
|
button:hover:not(.no-image-background) img,
|
||||||
|
.button:hover:not(.no-image-background) img {
|
||||||
background: var(--low-interaction-background);
|
background: var(--low-interaction-background);
|
||||||
border-radius: 100rem;
|
border-radius: 100rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
|
button:hover:not(.no-image-background) svg path,
|
||||||
|
.button:hover:not(.no-image-background) svg path {
|
||||||
fill: var(--catch-detail-foregroundcolor) !important;
|
fill: var(--catch-detail-foregroundcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
|
button.disabled:hover:not(.no-image-background) svg path,
|
||||||
|
.button.disabled:hover:not(.no-image-background) svg path {
|
||||||
fill: var(--low-interaction-foreground) !important;
|
fill: var(--low-interaction-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.primary, .button.primary {
|
button.primary,
|
||||||
|
.button.primary {
|
||||||
color: var(--button-foreground);
|
color: var(--button-foreground);
|
||||||
background: var(--button-background);
|
background: var(--button-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
|
button.primary:not(.no-image-background) svg path,
|
||||||
|
.button.primary:not(.no-image-background) svg path {
|
||||||
fill: var(--button-foreground) !important;
|
fill: var(--button-foreground) !important;
|
||||||
transition: all 250ms;
|
transition: all 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled.low-interaction, .button.disabled.low-interaction {
|
button.disabled.low-interaction,
|
||||||
|
.button.disabled.low-interaction {
|
||||||
background-color: var(--low-interaction-background-50);
|
background-color: var(--low-interaction-background-50);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled, .button.disabled {
|
button.disabled,
|
||||||
|
.button.disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 2px dashed var(--button-background);
|
border: 2px dashed var(--button-background);
|
||||||
background: unset;
|
background: unset;
|
||||||
|
|
@ -2503,7 +2594,8 @@ button.disabled, .button.disabled {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.disabled:hover, .button.disabled:hover {
|
button.disabled:hover,
|
||||||
|
.button.disabled:hover {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
border: 2px dashed var(--button-background);
|
border: 2px dashed var(--button-background);
|
||||||
background: unset;
|
background: unset;
|
||||||
|
|
@ -2520,15 +2612,18 @@ button.link:hover {
|
||||||
color: unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactive button.disabled svg path, .interactive .button.disabled svg path {
|
.interactive button.disabled svg path,
|
||||||
|
.interactive .button.disabled svg path {
|
||||||
fill: var(--interactive-foreground) !important;
|
fill: var(--interactive-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
|
.low-interaction button.disabled svg path,
|
||||||
|
.low-interaction .button.disabled svg path {
|
||||||
fill: var(--low-interaction-foreground) !important;
|
fill: var(--low-interaction-foreground) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
|
.normal-background button.disabled svg path,
|
||||||
|
.normal-background .button.disabled svg path {
|
||||||
fill: var(--foreground-color) !important;
|
fill: var(--foreground-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2541,12 +2636,14 @@ button.link:hover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.soft, .button.soft {
|
button.soft,
|
||||||
|
.button.soft {
|
||||||
border: 2px solid var(--interactive-background);
|
border: 2px solid var(--interactive-background);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.soft:hover, .button.soft:hover {
|
button.soft:hover,
|
||||||
|
.button.soft:hover {
|
||||||
background-color: var(--interactive-background);
|
background-color: var(--interactive-background);
|
||||||
color: var(--interactive-foreground);
|
color: var(--interactive-foreground);
|
||||||
border: 2px solid var(--catch-detail-color-contrast);
|
border: 2px solid var(--catch-detail-color-contrast);
|
||||||
|
|
@ -2612,7 +2709,7 @@ label.button {
|
||||||
label:hover:not(.neutral-label) {
|
label:hover:not(.neutral-label) {
|
||||||
background-color: var(--catch-detail-color);
|
background-color: var(--catch-detail-color);
|
||||||
color: var(--catch-detail-foregroundcolor);
|
color: var(--catch-detail-foregroundcolor);
|
||||||
border: 2px solid var(--interactive-contrast)
|
border: 2px solid var(--interactive-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
label:not(.no-image-background):not(.neutral-label) img {
|
label:not(.no-image-background):not(.neutral-label) img {
|
||||||
|
|
@ -2720,7 +2817,8 @@ textarea {
|
||||||
color: #7193bb;
|
color: #7193bb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.literal-code, code {
|
.literal-code,
|
||||||
|
code {
|
||||||
/* A codeblock */
|
/* A codeblock */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
|
|
@ -2843,18 +2941,18 @@ a.link-underline {
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.apply-fill path {
|
svg.apply-fill path {
|
||||||
fill: var(--svg-color)
|
fill: var(--svg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.compass_arrow {
|
.compass_arrow {
|
||||||
width: calc(2.5rem - 1px);
|
width: calc(2.5rem - 1px);
|
||||||
height: calc( 2.5rem - 1px )
|
height: calc(2.5rem - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.compass_arrow {
|
.compass_arrow {
|
||||||
width: calc(2.75rem - 1px);
|
width: calc(2.75rem - 1px);
|
||||||
height: calc( 2.75rem - 1px )
|
height: calc(2.75rem - 1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -152,7 +152,7 @@
|
||||||
{#each filteredItems as item}
|
{#each filteredItems as item}
|
||||||
<div
|
<div
|
||||||
class={twMerge(
|
class={twMerge(
|
||||||
"m-1 h-fit rounded-full border-2 border-black p-4 text-center",
|
"m-1 h-fit rounded-full border-2 border-black p-4 text-center text-black",
|
||||||
selectedItem === item ? "interactive" : "bg-white"
|
selectedItem === item ? "interactive" : "bg-white"
|
||||||
)}
|
)}
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue