From f0070fe4a6a0e436e67062cf414cfbcec19f22d3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 18 Dec 2024 18:03:01 +0800
Subject: [PATCH] feat: tweak styling

---
 packages/client/internals/ClicksSlider.vue    |  2 +-
 packages/client/internals/ContextMenu.vue     |  2 +-
 packages/client/internals/DragControl.vue     |  2 +-
 packages/client/internals/DrawingControls.vue |  2 +-
 packages/client/internals/FormCheckbox.vue    |  2 +-
 packages/client/internals/MenuButton.vue      |  2 +-
 packages/client/internals/Modal.vue           |  2 +-
 packages/client/internals/NavControls.vue     |  2 +-
 packages/client/internals/QuickOverview.vue   |  4 ++--
 packages/client/internals/SideEditor.vue      |  2 +-
 packages/client/internals/WebCamera.vue       |  4 ++--
 packages/client/pages/export.vue              |  2 +-
 packages/client/pages/overview.vue            |  2 +-
 packages/client/styles/index.css              |  2 +-
 packages/client/uno.config.ts                 | 11 +++++++++++
 packages/slidev/node/cli.ts                   |  2 ++
 16 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/client/internals/ClicksSlider.vue b/packages/client/internals/ClicksSlider.vue
index 84cf7fe2d7..54c9bf4f0a 100644
--- a/packages/client/internals/ClicksSlider.vue
+++ b/packages/client/internals/ClicksSlider.vue
@@ -87,7 +87,7 @@ function onMousedown() {
         v-model="current"
         class="range"
         type="range" :min="start" :max="total" :step="1"
-        absolute inset-0 z-10 op0
+        absolute inset-0 z-label op0
         :class="readonly ? 'pointer-events-none' : ''"
         :style="{ '--thumb-width': `${1 / (length + 1) * 100}%` }"
         @mousedown="onMousedown"
diff --git a/packages/client/internals/ContextMenu.vue b/packages/client/internals/ContextMenu.vue
index 9f4404d718..59eeb12940 100644
--- a/packages/client/internals/ContextMenu.vue
+++ b/packages/client/internals/ContextMenu.vue
@@ -61,7 +61,7 @@ const top = computed(() => {
     v-if="currentContextMenu"
     ref="container"
     :style="`left:${left}px;top:${top}px`"
-    class="fixed z-100 w-60 flex flex-wrap justify-items-start p-1 animate-fade-in animate-duration-100 backdrop-blur bg-main bg-opacity-75! border border-main rounded-md shadow overflow-hidden select-none"
+    class="slidev-glass-effect fixed z-context-menu w-60 flex flex-wrap justify-items-start p-1 animate-fade-in animate-duration-100 rounded-md shadow overflow-hidden select-none"
     @contextmenu.prevent=""
     @click="closeContextMenu"
   >
diff --git a/packages/client/internals/DragControl.vue b/packages/client/internals/DragControl.vue
index a9087d31f1..818d486b2f 100644
--- a/packages/client/internals/DragControl.vue
+++ b/packages/client/internals/DragControl.vue
@@ -375,7 +375,7 @@ watchEffect(() => {
     @pointermove="onPointermove"
     @pointerup="onPointerup"
   >
-    <div class="absolute inset-0 z-100 dark:b-gray-400" :class="isArrow ? '' : 'b b-dark'">
+    <div class="absolute inset-0 z-nav dark:b-gray-400" :class="isArrow ? '' : 'b b-dark'">
       <template v-if="!autoHeight">
         <div v-bind="getCornerProps(true, true)" />
         <div v-bind="getCornerProps(false, false)" />
diff --git a/packages/client/internals/DrawingControls.vue b/packages/client/internals/DrawingControls.vue
index a46348b5e9..32e5e4c338 100644
--- a/packages/client/internals/DrawingControls.vue
+++ b/packages/client/internals/DrawingControls.vue
@@ -42,7 +42,7 @@ function setBrushColor(color: typeof brush.color) {
 <template>
   <Draggable
     v-if="drawingEnabled || drawingPinned"
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-nav  border border-main"
     :class="!drawingEnabled && drawingPinned ? 'opacity-40 hover:opacity-90' : ''"
     storage-key="slidev-drawing-pos"
     :initial-x="10"
diff --git a/packages/client/internals/FormCheckbox.vue b/packages/client/internals/FormCheckbox.vue
index 5070b7e20e..7719e7fb77 100644
--- a/packages/client/internals/FormCheckbox.vue
+++ b/packages/client/internals/FormCheckbox.vue
@@ -11,6 +11,6 @@ const value = defineModel<boolean>('modelValue', {
 <template>
   <div border="~ main rounded" flex="~ gap-2 items-center" relative h-5 w-5 p0.5 hover:bg-active p1>
     <div i-ri-check-line :class="value ? '' : 'op0'" />
-    <input v-model="value" type="checkbox" absolute inset-0 z-10 opacity-0.1 :disabled="disabled">
+    <input v-model="value" type="checkbox" absolute inset-0 opacity-0.1 :disabled="disabled">
   </div>
 </template>
diff --git a/packages/client/internals/MenuButton.vue b/packages/client/internals/MenuButton.vue
index 4ab1a72996..74c51bec40 100644
--- a/packages/client/internals/MenuButton.vue
+++ b/packages/client/internals/MenuButton.vue
@@ -30,7 +30,7 @@ onClickOutside(el, () => {
     <KeepAlive>
       <div
         v-if="value"
-        class="rounded-md bg-main text-main shadow absolute bottom-10 left-0 z-20"
+        class="rounded-md bg-main text-main shadow-xl absolute bottom-10 left-0 z-menu"
         dark:border="~ main"
       >
         <slot name="menu" />
diff --git a/packages/client/internals/Modal.vue b/packages/client/internals/Modal.vue
index c504db9e12..26d868b506 100644
--- a/packages/client/internals/Modal.vue
+++ b/packages/client/internals/Modal.vue
@@ -20,7 +20,7 @@ function onClick() {
 
 <template>
   <KeepAlive>
-    <div v-if="value" class="fixed top-0 bottom-0 left-0 right-0 grid z-20">
+    <div v-if="value" class="fixed top-0 bottom-0 left-0 right-0 grid z-modal">
       <div
         bg="black opacity-80"
         class="absolute top-0 bottom-0 left-0 right-0 -z-1"
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index 9a588a8a02..6f6f96f16e 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/internals/NavControls.vue
@@ -48,7 +48,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-main')
+  : 'rounded-md bg-main shadow-xl dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 43d8414c31..8b570a5694 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -109,7 +109,7 @@ watchEffect(() => {
   >
     <div
       v-if="showOverview"
-      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-modal bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
       @click="close"
     >
       <div
@@ -157,7 +157,7 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
+  <div v-if="showOverview" class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
       <div class="i-carbon:close" />
     </IconButton>
diff --git a/packages/client/internals/SideEditor.vue b/packages/client/internals/SideEditor.vue
index 3b4aff7b25..924f8c4558 100644
--- a/packages/client/internals/SideEditor.vue
+++ b/packages/client/internals/SideEditor.vue
@@ -121,7 +121,7 @@ throttledWatch(
 
 <template>
   <div
-    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
+    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-dragging"
     :class="vertical ? 'left-0 right-0 w-full h-10px' : 'top-0 bottom-0 w-10px h-full'" :style="{
       opacity: handlerDown ? '0.3' : undefined,
       bottom: vertical ? `${editorHeight - 5}px` : undefined,
diff --git a/packages/client/internals/WebCamera.vue b/packages/client/internals/WebCamera.vue
index c246326cfa..2dc6953b24 100644
--- a/packages/client/internals/WebCamera.vue
+++ b/packages/client/internals/WebCamera.vue
@@ -63,7 +63,7 @@ onMounted(fixPosition)
 <template>
   <div
     v-if="streamCamera && showAvatar && currentCamera !== 'none'"
-    class="fixed z-10"
+    class="fixed z-camera"
     :style="containerStyle"
   >
     <div
@@ -83,7 +83,7 @@ onMounted(fixPosition)
 
     <div
       ref="handler"
-      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700"
+      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-dragging hover:opacity-100 dark:border dark:border-true-gray-700"
       :style="handleStyle"
       :class="handlerDown ? '!opacity-100' : ''"
     />
diff --git a/packages/client/pages/export.vue b/packages/client/pages/export.vue
index 67a3fd0690..e6462e336b 100644
--- a/packages/client/pages/export.vue
+++ b/packages/client/pages/export.vue
@@ -281,7 +281,7 @@ if (import.meta.hot) {
       </div>
     </div>
     <div id="export-container" ref="export-container" relative>
-      <div print:hidden fixed right-5 bottom-5 bg-main px2 py0 shadow z-1000 border="~ main rounded">
+      <div print:hidden fixed right-5 bottom-5 px2 py0 z-label slidev-glass-effect>
         <span op75>Rendering as {{ capturedImages ? 'Captured Images' : 'DOM' }} </span>
       </div>
       <div v-show="!capturedImages" id="export-content" ref="export-content">
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index a2aef49e8c..2b4da0bae2 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -135,7 +135,7 @@ onMounted(() => {
             </button>
             <div
               v-if="route.meta?.slide?.title"
-              class="pointer-events-none select-none absolute left-110% backdrop-blur-8 top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+              class="pointer-events-none select-none absolute left-110% top-50% translate-y--50% ws-nowrap z-label px2 slidev-glass-effect transition duration-400 op0 group-hover:op100"
               :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
             >
               {{ route.meta?.slide?.title }}
diff --git a/packages/client/styles/index.css b/packages/client/styles/index.css
index ff624519ba..9252955b6e 100644
--- a/packages/client/styles/index.css
+++ b/packages/client/styles/index.css
@@ -10,7 +10,7 @@ body,
   overflow: hidden;
   print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
-  @apply font-sans;
+  --uno: font-sans bg-main;
 }
 
 html {
diff --git a/packages/client/uno.config.ts b/packages/client/uno.config.ts
index ed24c308ba..e406c62f64 100644
--- a/packages/client/uno.config.ts
+++ b/packages/client/uno.config.ts
@@ -30,6 +30,17 @@ export default defineConfig({
     'abs-b': 'absolute bottom-0 left-0 right-0',
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
+
+    'z-drawing': 'z-10',
+    'z-camera': 'z-15',
+    'z-dragging': 'z-18',
+    'z-menu': 'z-20',
+    'z-label': 'z-40',
+    'z-nav': 'z-50',
+    'z-context-menu': 'z-60',
+    'z-modal': 'z-70',
+
+    'slidev-glass-effect': 'shadow-xl backdrop-blur-8 border border-main bg-main bg-opacity-75!',
   },
   // Slidev Specific Variants, probably extrat to a preset later
   variants: [
diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index 48bc8ce9be..87f90862fa 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -312,6 +312,8 @@ cli.command(
       restartServer()
     })
     watcher.on('change', (file) => {
+      if (typeof file !== 'string')
+        return
       if (FILES_CREATE_RESTART.includes(file))
         return
       console.log(yellow(`\n  file ${file} changed, restarting...\n`))