feat: tweak styling

Author: antfu

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"

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"
   >

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)" />

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"

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>

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" />

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"

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__)

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>

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,

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' : ''"
     />

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">

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 }}

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 {

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: [

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`))