From 9ca6f4ff2bb6f81a7ba3d1f2c73971236e6681b2 Mon Sep 17 00:00:00 2001 From: Haishan Date: Sun, 22 Nov 2020 12:13:05 +0800 Subject: chore: minor a11y improvement --- src/components/Root.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'src/components/Root.css') diff --git a/src/components/Root.css b/src/components/Root.css index 3d739c0..718c58e 100644 --- a/src/components/Root.css +++ b/src/components/Root.css @@ -124,6 +124,8 @@ body.dark { --color-row-odd: #282828; --bg-modal: #1f1f20; --bg-near-transparent: rgba(255, 255, 255, 0.1); + --bg-tooltip: #111; + --bc-tooltip: #555; --select-border-color: #040404; --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); } @@ -148,6 +150,8 @@ body.light { --color-row-odd: #f5f5f5; --bg-modal: #fbfbfb; --bg-near-transparent: rgba(0, 0, 0, 0.1); + --bg-tooltip: #f0f0f0; + --bc-tooltip: #ccc; --select-border-color: #999999; --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); } @@ -175,3 +179,21 @@ body.light { border: 0; padding: 0; } + +/**** @reach/tooltip/styles.css ****/ +:root { + --reach-tooltip: 1; +} +[data-reach-tooltip] { + z-index: 1; + pointer-events: none; + position: absolute; + padding: 0.25em 0.5em; + box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1); + white-space: nowrap; + font-size: 85%; + background: var(--bg-tooltip); + color: var(--color-text); + border: solid 1px var(--bc-tooltip); + border-radius: 4px; +} -- cgit v1.3.1