aboutsummaryrefslogtreecommitdiff
path: root/src/app/css
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-05-07 00:52:39 +0200
committer0neGal <mail@0negal.com>2023-05-07 00:59:38 +0200
commit0d7293cd5cdacd9c46bb637e367e969606031038 (patch)
tree91d6974fa5c3671f5cca4b7db98ee2f3f3d93ccf /src/app/css
parentcfec36cbdf00b181e6560be15c6b341842894e00 (diff)
downloadViper-0d7293cd5cdacd9c46bb637e367e969606031038.tar.gz
Viper-0d7293cd5cdacd9c46bb637e367e969606031038.zip
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.
Diffstat (limited to 'src/app/css')
-rw-r--r--src/app/css/tooltip.css21
1 files changed, 21 insertions, 0 deletions
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;
+}