GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-18 02:27:12 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Adjust box-shadow of EditingArea to make fields look inset

Browse source
This commit is contained in:
Matthias Metelka 2022-08-30 10:06:05 +02:00
parent ec290a23cb
commit bb172edf05
2 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
sass/_vars.scss
View file

@ -13,19 +13,19 @@ $vars: (
colors: ( colors: (
canvas: ( canvas: (
default: ( default: (
light: color(gray, 1), light: color(gray, 0),
dark: color(gray, 7), dark: color(gray, 6),
), ),
outset: ( outset: (
light: color(gray, 0), light: white,
dark: color(gray, 5), dark: color(gray, 5),
), ),
inset: ( inset: (
light: color(gray, 1), light: color(gray, 1),
dark: color(gray, 8), dark: color(gray, 7),
), ),
overlay: ( overlay: (
light: color(gray, 0), light: white,
dark: color(gray, 9), dark: color(gray, 9),
), ),
), ),
@ -35,11 +35,11 @@ $vars: (
dark: color(gray, 8), dark: color(gray, 8),
), ),
subtle: ( subtle: (
light: color(gray, 2), light: color(gray, 3),
dark: color(gray, 7), dark: color(gray, 7),
), ),
focus: ( focus: (
light: color(indigo, 6), light: color(indigo, 5),
dark: color(indigo, 5), dark: color(indigo, 5),
), ),
), ),
@ -61,6 +61,16 @@ $vars: (
dark: color(gray, 8), dark: color(gray, 8),
), ),
), ),
shadow: (
default: (
light: color(gray, 3),
dark: color(gray, 8),
),
inset: (
light: color(gray, 2),
dark: color(gray, 7),
),
),
accent: ( accent: (
card: ( card: (
light: color(blue, 5), light: color(blue, 5),

20
ts/editor/EditingArea.svelte
View file

@ -190,25 +190,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
position: relative; position: relative;
background: var(--canvas-outset); background: var(--canvas-outset);
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--border-default);
box-shadow: 0px 0px 2px 0px var(--border-default);
transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1); transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
&:focus-within {
outline: none;
/* This pseudo-element is required to display /* This pseudo-element is required to display
the inset box-shadow above field contents */ the inset box-shadow above field contents */
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: -1px; top: 0;
right: -1px; right: 0;
bottom: -1px; bottom: 0;
left: -1px; left: 0;
pointer-events: none; pointer-events: none;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--border-subtle);
box-shadow: inset 0 0 1px 1px var(--shadow-inset);
}
&:focus-within {
outline: none;
&::after {
box-shadow: inset 0 0 0 2px var(--border-focus); box-shadow: inset 0 0 0 2px var(--border-focus);
} }
} }