Using teleport for tooltips. Moved theme class to body tag with UI observer.

assets/components/container/container.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
+	<div class="container">
-		class="container"
-		:class="theme"
-	>
 		<Warning
 			v-if="showWarning"
 			class="warning-container"
@@ -26,16 +23,10 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 
-function theme(state) {
-	return state.ui.theme;
-}
-
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
@@ -59,11 +50,6 @@ export default {
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
 		};
 	},
-	computed: {
-		...mapState({
-			theme,
-		}),
-	},
 	methods: {
 		toggleSidebar,
 		setConsent,

assets/components/filters/actor-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="users" />
 
@@ -14,7 +14,8 @@
 			>Actors</div>
 		</div>
 
-		<div slot="popover">
+		<template v-slot:tooltip>
+			<div>
 				<router-link
 					class="filter-clear"
 					:to="{ query: { ...$route.query, actors: undefined } }"
@@ -53,7 +54,8 @@
 					</li>
 				</ul>
 			</div>
-	</v-popover>
+		</template>
+	</Tooltip>
 </template>
 
 <script>

assets/components/filters/channel-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="antenna" />
 
@@ -14,6 +14,7 @@
 			>Channels</div>
 		</div>
 
+		<template v-slot:popover>
 			<div slot="popover">
 				<router-link
 					class="filter-clear"
@@ -67,7 +68,8 @@
 					</li>
 				</ul>
 			</div>
-	</v-popover>
+		</template>
+	</Tooltip>
 </template>
 
 <script>

assets/components/filters/filter-bar.vue

@@ -20,7 +20,6 @@
 			>New</router-link>
 		</div>
 
-		<!--
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
@@ -40,7 +39,6 @@
 				:available-tags="availableTags"
 			/>
 		</div>
-		-->
 	</div>
 </template>
 

assets/components/filters/tag-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="price-tag4" />
 
@@ -14,7 +14,8 @@
 			>Tags</div>
 		</div>
 
-		<div slot="popover">
+		<template v-slot:tooltip>
+			<div>
 				<select
 					v-model="mode"
 					class="filter-mode"
@@ -59,7 +60,8 @@
 					</li>
 				</ul>
 			</div>
-	</v-popover>
+		</template>
+	</Tooltip>
 </template>
 
 <script>

assets/components/header/header.vue

@@ -82,7 +82,7 @@
 				@click.stop="toggleSidebar"
 			><Icon icon="menu" /></div>
 
-			<v-popover>
+			<Tooltip>
 				<div class="header-account">
 					<div class="account">
 						<Icon
@@ -92,7 +92,7 @@
 					</div>
 				</div>
 
-				<template v-slot:popover>
+				<template v-slot:tooltip>
 					<div class="menu">
 						<ul class="menu-items noselect">
 							<li class="menu-item disabled">
@@ -149,11 +149,11 @@
 						</ul>
 					</div>
 				</template>
-			</v-popover>
+			</Tooltip>
 
 			<Search class="search-full" />
 
-			<v-popover
+			<Tooltip
 				class="search-compact"
 				:open="searching"
 				@show="searching = true"
@@ -167,12 +167,12 @@
 				/></button>
 
 				<Search
-					slot="popover"
+					slot="tooltip"
 					:searching="searching"
 					class="compact"
 					@search="searching = false"
 				/>
-			</v-popover>
+			</Tooltip>
 		</div>
 	</header>
 </template>

assets/components/tooltip/tooltip.vue

@@ -4,24 +4,34 @@
 			<slot />
 		</div>
 
+		<teleport to="body">
 			<div class="tooltip">
 				<div class="tooltip-wrapper">
-				<slot name="popover" />
+					<slot name="tooltip" />
 				</div>
 			</div>
+		</teleport>
 	</div>
 </template>
 
+<script>
+
+</script>
+
 <style lang="scss" scoped>
 .tooltip-container {
 	position: relative;
 	font-size: 1rem;
 }
 
+.tooltip-frame {
+	position: fixed;
+}
+
 .tooltip {
 	position: absolute;
 	z-index: 10;
 	top: 2rem;
-	background: var(--background);
+	background: var(--background-light);
 }
 </style>

assets/css/_theme.scss

@@ -12,6 +12,9 @@ $breakpoint4: 1500px;
     --text-dark: #222;
     --text-light: #fff;
 
+    --background-light: #fff;
+    --background-dark: #222;
+
     --darken: rgba(0, 0, 0, .5);
     --darken-strong: rgba(0, 0, 0, .7);
     --darken-extreme: rgba(0, 0, 0, .9);
@@ -40,7 +43,7 @@ $breakpoint4: 1500px;
     --text: #222;
     --text-contrast: #fff;
 
-    --background: #fff;
+    --background: var(--background-light);
     --background-dim: #fafafa;
     --background-soft: #fdfdfd;
 
@@ -71,7 +74,7 @@ $breakpoint4: 1500px;
     --text: #fff;
     --text-contrast: #222;
 
-    --background: #222;
+    --background: var(--background-dark);
     --background-dim: #181818;
     --background-soft: #111;
 

assets/js/ui/observers.js

@@ -1,4 +1,13 @@
 function initUiObservers(store, _router) {
+	const body = document.querySelector('body');
+
+	body.classList.add(store.state.ui.theme);
+
+	store.watch(state => state.ui.theme, (newTheme, oldTheme) => {
+		body.classList.add(newTheme);
+		body.classList.remove(oldTheme);
+	});
+
 	document.addEventListener('keypress', (event) => {
 		if (event.target.tagName === 'INPUT') {
 			return;