diff --git a/src/lib/components/layout/ActionSelector.svelte b/src/lib/components/layout/ActionSelector.svelte index 65107f12..022dee77 100644 --- a/src/lib/components/layout/ActionSelector.svelte +++ b/src/lib/components/layout/ActionSelector.svelte @@ -207,6 +207,10 @@ background: var(--md-sys-color-background); } + + @media (prefers-contrast: more) { + opacity: 0.8; + } } .search-row { diff --git a/src/lib/components/layout/KeyText.svelte b/src/lib/components/layout/KeyText.svelte index 25f31526..2cce96e9 100644 --- a/src/lib/components/layout/KeyText.svelte +++ b/src/lib/components/layout/KeyText.svelte @@ -44,8 +44,8 @@ y={pos[1] + middle[1]} font-size={fontSizeMultiplier * (hasIcon ? iconFontSize : fontSize)} font-family={hasIcon ? "Material Symbols Rounded" : undefined} - opacity={isActive ? 1 : inactiveOpacity} - style:scale={isActive ? 1 : inactiveScale} + opacity={isActive ? 1 : `var(--inactive-opacity, ${inactiveOpacity})`} + style:scale={isActive ? 1 : `var(--inactive-scale, ${inactiveScale})`} style:translate={isActive ? "0 0 0" : `${direction[0].toPrecision(2)}px ${direction[1].toPrecision(2)}px 0`} @@ -75,6 +75,11 @@ opacity #{$transition} ease, translate #{$transition} ease, scale #{$transition} ease; + + @media (prefers-contrast: more) { + --inactive-opacity: 0.8; + --inactive-scale: 0.7; + } } text:focus-within { diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte index 0da60deb..691be139 100644 --- a/src/routes/Footer.svelte +++ b/src/routes/Footer.svelte @@ -151,6 +151,10 @@ padding-block-start: 0; opacity: 0.4; + + @media (prefers-contrast: more) { + opacity: 0.8; + } } ul { diff --git a/src/routes/config/chords/+page.svelte b/src/routes/config/chords/+page.svelte index 051f24ca..727bd827 100644 --- a/src/routes/config/chords/+page.svelte +++ b/src/routes/config/chords/+page.svelte @@ -153,16 +153,25 @@ } textarea { - transition: border-color 250ms ease; + transition: outline-color 250ms ease; background: none; color: inherit; - border: 1px dashed var(--md-sys-color-surface-variant); + outline: 1px dashed var(--md-sys-color-surface-variant); + margin: 2px; + border: none; padding: 8px; border-radius: 4px; + @media (prefers-contrast: more) { + outline-color: var(--md-sys-color-outline); + + &:focus { + outline-width: 2px; + } + } + &:focus { - outline: none; - border-color: var(--md-sys-color-primary); + outline-color: var(--md-sys-color-primary); } } @@ -185,13 +194,23 @@ transition: all 250ms ease; + @media (prefers-contrast: more) { + border-color: var(--md-sys-color-outline); + border-style: dashed; + } + &::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.2; + + @media (prefers-contrast: more) { + opacity: 0.8; + } } &:focus { border-color: var(--md-sys-color-primary); + border-style: solid; outline: none; } } diff --git a/src/routes/config/chords/ChordActionEdit.svelte b/src/routes/config/chords/ChordActionEdit.svelte index 018cd599..43f1432f 100644 --- a/src/routes/config/chords/ChordActionEdit.svelte +++ b/src/routes/config/chords/ChordActionEdit.svelte @@ -101,6 +101,10 @@