LeoVasanko/mediahive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix: use html classes instead of :global() for input modality styles

Browse Source 
The :global() pseudo-class in Vue scoped SFC styles was being mangled
by the Vue compiler, producing broken CSS that applied properties like
z-index and opacity directly to the <html> element and dropped the
intended component selectors entirely.

Replace the html[data-mouse-active] / html[data-pointer-visible] data
attribute approach with plain CSS classes (mouse-active, pointer-visible)
toggled on document.documentElement. In Vue scoped styles, prefixing a
selector with html.mouse-active or html:not(.mouse-active) compiles
correctly — the html part stays global while the component selector
receives the scoped attribute — avoiding :global() entirely.

This keeps all component styles inside <style scoped> and fixes the
layout breakage caused by the original commit.
This commit is contained in:
LeoVasanko
2026-05-23 21:57:59 +00:00
parent 79dc1b25cc
commit 2f83193ff4
7 changed files with 48 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/composables/useInputModality.ts
+2 -3
View File
@@ -24,9 +24,8 @@ function clearMouseIdleTimer() {
function applyInputState(mouseActive: boolean) {
const root = document.documentElement;
root.dataset.inputModality = modality;
root.dataset.mouseActive = mouseActive ? 'true' : 'false';
root.dataset.pointerVisible = pointerVisible ? 'true' : 'false';
root.classList.toggle('mouse-active', mouseActive);
root.classList.toggle('pointer-visible', pointerVisible);
}
function scheduleMouseIdle() {