baseline

2026-02-04 23:31:53 +01:00
commit cd59ccd99b
2401 changed files with 56808 additions and 0 deletions
--- a/web/css/components/app-tooltips.css
+++ b/web/css/components/app-tooltips.css
@@ -0,0 +1,108 @@
+:root {
+  --tooltip-bg: var(--app-card-background-color);
+  --tooltip-color: var(--app-color);
+  --tooltip-border: var(--app-border);
+  --tooltip-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  --tooltip-radius: 8px;
+  --tooltip-offset: 8px;
+}
+
+[data-tooltip] {
+  --app-card-background-color: inherit;
+  position: relative;
+}
+
+[data-tooltip]::after,
+[data-tooltip]::before {
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  position: absolute;
+  z-index: 40;
+  text-decoration: none;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-color);
+  border: 1px solid var(--tooltip-border);
+  border-radius: var(--tooltip-radius);
+  box-shadow: var(--tooltip-shadow);
+  font-size: 0.75rem;
+  padding: 0.35rem 0.6rem;
+  white-space: nowrap;
+}
+
+[data-tooltip]::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: var(--tooltip-bg);
+  border-left: 1px solid var(--tooltip-border);
+  border-top: 1px solid var(--tooltip-border);
+  transform: rotate(45deg);
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:hover::before,
+[data-tooltip]:focus-visible::after,
+[data-tooltip]:focus-visible::before {
+  opacity: 1;
+}
+
+[data-tooltip]::after,
+[data-tooltip]::before {
+  top: 50%;
+  left: 100%;
+}
+
+[data-tooltip]::after {
+  transform: translate(var(--tooltip-offset), -50%);
+}
+
+[data-tooltip]::before {
+  transform: translate(calc(var(--tooltip-offset) - 4px), -50%) rotate(45deg);
+}
+
+[data-tooltip][data-tooltip-pos="top"]::after,
+[data-tooltip][data-tooltip-pos="center"]::after {
+  bottom: 100%;
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, calc(-1 * var(--tooltip-offset)));
+}
+
+[data-tooltip][data-tooltip-pos="top"]::before,
+[data-tooltip][data-tooltip-pos="center"]::before {
+  bottom: 100%;
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, calc(-1 * (var(--tooltip-offset) - 2px))) rotate(45deg);
+}
+
+[data-tooltip][data-tooltip-pos="bottom"]::after {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, var(--tooltip-offset));
+}
+
+[data-tooltip][data-tooltip-pos="bottom"]::before {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, calc(var(--tooltip-offset) - 2px)) rotate(45deg);
+}
+
+[data-tooltip][data-tooltip-pos="left"]::after {
+  top: 50%;
+  right: 100%;
+  left: auto;
+  transform: translate(calc(-1 * var(--tooltip-offset)), -50%);
+}
+
+[data-tooltip][data-tooltip-pos="left"]::before {
+  top: 50%;
+  right: 100%;
+  left: auto;
+  transform: translate(calc(-1 * (var(--tooltip-offset) - 2px)), -50%) rotate(45deg);
+}