From 0d7293cd5cdacd9c46bb637e367e969606031038 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 7 May 2023 00:52:39 +0200 Subject: added hover tooltips They're pretty simple to use, and automatically make themselves fit on screen, on top of automatically disappearing and appearing of course. I've used them a few places now, and not sure where else they can be used, there are of course localization strings that need, well, localization, and I'll create a PR for this on a later date. --- src/app/css/tooltip.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/app/css/tooltip.css (limited to 'src/app/css') diff --git a/src/app/css/tooltip.css b/src/app/css/tooltip.css new file mode 100644 index 0000000..673cc64 --- /dev/null +++ b/src/app/css/tooltip.css @@ -0,0 +1,21 @@ +@import "theming.css"; + +#tooltip { + color: white; + opacity: 0.0; + position: fixed; + font-weight: 600; + font-size: 0.8em; + width: max-content; + z-index: 99999999999; + pointer-events: none; + background: var(--bg); + backdrop-filter: blur(15px); + transition: opacity 0.15s ease-in-out; + border-radius: calc(var(--padding) / 1); + padding: calc(var(--padding) / 2.8) calc(var(--padding) / 1.8); +} + +#tooltip.visible { + opacity: 1.0; +} -- cgit v1.2.3