Template update

frontend/package.json

@@ -101,7 +101,7 @@
 		"picocolors": "^1.0.1",
 		"postcss": "^8.4.39",
 		"prettier": "^3.3.2",
-		"sass": "^1.77.6",
+		"sass": "^1.77.7",
 		"start-server-and-test": "^2.0.4",
 		"tailwind-config-viewer": "^2.0.4",
 		"tailwindcss": "^3.4.4",
@@ -113,7 +113,7 @@
 		"vite-bundle-visualizer": "^1.2.1",
 		"vite-plugin-vue-devtools": "^7.3.5",
 		"vite-svg-loader": "^5.1.0",
-		"vitest": "^2.0.1",
+		"vitest": "^2.0.2",
 		"vue-tsc": "^2.0.26"
 	},
 	"optionalDependencies": {
@@ -137,4 +137,4 @@
 	"engines": {
 		"node": ">=18.0.0"
 	}
-}
+}

frontend/src/App.vue

@@ -1,58 +1,56 @@
 <template>
 	<Provider>
-		<component :is="layoutComponent" :class="[`theme-${themeName}`, `layout-${layout}`, themeName]">
+		<component
+			:is="layoutComponent"
+			:class="[`theme-${themeName}`, `layout-${layoutComponentName}`, themeName, { 'opacity-0': loading }]"
+		>
 			<RouterView v-slot="{ Component }">
 				<transition :name="`router-${routerTransition}`" mode="out-in" appear>
 					<component
 						:is="Component"
 						:key="forceRefresh"
-						:class="[`theme-${themeName}`, `layout-${layout}`, themeName]"
+						:class="[`theme-${themeName}`, `layout-${layoutComponentName}`, themeName]"
 					/>
 				</transition>
 			</RouterView>
 		</component>
 
-		<SplashScreen :loading="loading" />
+		<SplashScreen :show="loading" />
 		<SearchDialog v-if="isLogged" />
-		<!--
-			<LayoutSettings />
-		-->
 	</Provider>
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, type Component } from "vue"
+import { computed, onBeforeMount, ref, watch, type Component } from "vue"
 import { useMainStore } from "@/stores/main"
 import { useAuthStore } from "@/stores/auth"
 import { useThemeStore } from "@/stores/theme"
-import VerticalNav from "@/layouts/VerticalNav/index.vue"
 import HorizontalNav from "@/layouts/HorizontalNav/index.vue"
 import Blank from "@/layouts/Blank/index.vue"
 import Provider from "@/layouts/common/Provider.vue"
 import SplashScreen from "@/layouts/common/SplashScreen.vue"
-// import LayoutSettings from "@/components/common/LayoutSettings.vue"
 import SearchDialog from "@/components/common/SearchDialog.vue"
 import { Layout, RouterTransition, type ThemeName } from "@/types/theme.d"
-import { type RouteLocationNormalized, useRouter, useRoute } from "vue-router"
+import { type RouteLocationNormalized, useRoute, useRouter } from "vue-router"
 import "@/assets/scss/index.scss"
 
 const router = useRouter()
 const loading = ref(true)
 
 const layoutComponents = {
-	VerticalNav,
 	HorizontalNav,
 	Blank
 }
 
-const mainStore = useMainStore()
 const themeStore = useThemeStore()
+const mainStore = useMainStore()
 const authStore = useAuthStore()
 
-const forceLayout = ref<Layout | null>(null)
 const forceRefresh = computed<number>(() => mainStore.forceRefresh)
+const forceLayout = ref<Layout | null>(null)
 const layout = computed<Layout>(() => themeStore.layout)
-const layoutComponent = computed<Component>(() => layoutComponents[forceLayout.value || layout.value])
+const layoutComponentName = computed<Layout>(() => forceLayout.value || layout.value)
+const layoutComponent = computed<Component>(() => layoutComponents[layoutComponentName.value])
 const routerTransition = computed<RouterTransition>(() => themeStore.routerTransition)
 const themeName = computed<ThemeName>(() => themeStore.themeName)
 const isLogged = computed(() => authStore.isLogged)
@@ -65,7 +63,11 @@ function checkForcedLayout(route: RouteLocationNormalized) {
 	}
 }
 
-router.beforeEach(route => {
+watch(layoutComponentName, () => {
+	loading.value = false
+})
+
+router.afterEach(route => {
 	checkForcedLayout(route)
 })
 

frontend/src/assets/scss/apexchart-override.scss

@@ -9,5 +9,25 @@
 }
 
 .apexcharts-tooltip {
-	backdrop-filter: blur(6px);
+	backdrop-filter: blur(3px);
+	box-shadow:
+		0px 5px 10px -5px rgba(0, 0, 0, 0.2),
+		0px 5px 20px 0px rgba(0, 0, 0, 0.2) !important;
+
+	&.apexcharts-theme-dark {
+		background: rgba(0, 0, 0, 0.5) !important;
+	}
+
+	&.apexcharts-theme-light {
+		background: rgba(255, 255, 255, 0.5) !important;
+	}
+}
+
+.direction-rtl {
+	.apexcharts-legend {
+		direction: ltr;
+	}
+	.apexcharts-title-text {
+		direction: ltr;
+	}
 }

frontend/src/assets/scss/common.scss

@@ -1,17 +1,14 @@
+@import "@/assets/scss/mixin.scss";
+
 .custom-label {
 	color: var(--label-color);
-	margin-top: 12px;
 	font-size: 10px;
 	padding: 2px 6px;
 	border-radius: var(--border-radius-small);
 	position: relative;
 	display: inline-block;
 	font-weight: bold;
 
-	&:not(:last-child) {
-		margin-right: 10px;
-	}
-
 	&::before {
 		content: "";
 		width: 100%;
@@ -21,7 +18,7 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		z-index: -1;
+		z-index: 0;
 		opacity: 0.15;
 	}
 }
@@ -32,6 +29,19 @@
 .page-min-wrapped {
 	min-height: calc(100svh - var(--toolbar-height) - var(--view-padding) - (var(--view-padding) / 2));
 }
+.page-mobile-full {
+	@media (max-width: 700px) {
+		@include page-full-view;
+	}
+}
+.direction-rtl {
+	.page-mobile-full {
+		@media (max-width: 700px) {
+			right: calc(var(--view-padding) * -1);
+			left: unset;
+		}
+	}
+}
 
 .page {
 	.page-header {

frontend/src/assets/scss/functions.scss

@@ -0,0 +1,35 @@
+/*
+A simple little SCSS mixin for creating scrim gradients
+Inspired by Andreas Larson - https://github.com/larsenwork
+https://css-tricks.com/easing-linear-gradients/
+*/
+
+@function scrimGradient($startColor: $color-black, $direction: "to bottom") {
+	$scrimCoordinates: (
+		0: 1,
+		19: 0.738,
+		34: 0.541,
+		47: 0.382,
+		56.5: 0.278,
+		65: 0.194,
+		73: 0.126,
+		80.2: 0.075,
+		86.1: 0.042,
+		91: 0.021,
+		95.2: 0.008,
+		98.2: 0.002,
+		100: 0
+	);
+
+	$hue: hue($startColor);
+	$saturation: saturation($startColor);
+	$lightness: lightness($startColor);
+	$stops: ();
+
+	@each $colorStop, $alphaValue in $scrimCoordinates {
+		$stop: hsla($hue, $saturation, $lightness, $alphaValue) percentage($colorStop/100);
+		$stops: append($stops, $stop, comma);
+	}
+
+	@return linear-gradient(unquote($direction), $stops);
+}

frontend/src/assets/scss/helpers.scss

@@ -2,7 +2,7 @@
 	/* Works on Firefox */
 
 	scrollbar-width: thin;
-	scrollbar-color: var(--hover-010-color) var(--bg-sidebar);
+	scrollbar-color: var(--hover-010-color) var(--bg-secondary-color);
 
 	/* Works on Chrome, Edge, and Safari */
 	&::-webkit-scrollbar,
@@ -12,14 +12,14 @@
 
 	&::-webkit-scrollbar-track,
 	::-webkit-scrollbar-track {
-		background: var(--bg-sidebar);
+		background: var(--bg-secondary-color);
 	}
 
 	&::-webkit-scrollbar-thumb,
 	::-webkit-scrollbar-thumb {
 		background-color: var(--hover-010-color);
 		border-radius: 20px;
-		border: 2px solid var(--bg-sidebar);
+		border: 2px solid var(--bg-secondary-color);
 	}
 }