feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen

This commit is contained in:
Scrum4Me Agent 2026-05-08 08:38:52 +02:00
parent 58354e2dc1
commit 242143d06e

View file

@ -3,3 +3,25 @@
@plugin "@tailwindcss/typography";
@import "./styles/theme.css";
/* Debug-mode overlay (alleen actief wanneer body.debug-mode is gezet door dev-only toggle) */
body.debug-mode [data-debug-id] {
outline: 2px dashed var(--info);
outline-offset: 1px;
position: relative;
}
body.debug-mode [data-debug-id]:hover::after {
content: attr(data-debug-label);
position: absolute;
top: 0;
left: 0;
background: var(--info-container);
color: var(--info-container-foreground);
font-size: 10px;
line-height: 1.2;
padding: 2px 4px;
white-space: nowrap;
border-radius: 2px;
z-index: 9999;
pointer-events: none;
}