fix: overview styling

Author: antfu

packages/client/internals/ClicksSlider.vue

@@ -41,14 +41,20 @@ function onMousedown() {
     :title="`Clicks in this slide: ${length}`"
     :class="length && props.clicksContext.isMounted ? '' : 'op50'"
   >
-    <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
+    <div class="flex gap-0.2 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />
-      <div flex-auto />
       <template v-if="current >= 0 && current !== CLICKS_MAX && active">
+        <div flex-auto />
         <span text-primary>{{ current }}</span>
-        <span op25>/</span>
+        <span op25 text-sm>/</span>
+        <span op50 text-sm>{{ total }}</span>
       </template>
-      <span op50>{{ total }}</span>
+      <div
+        v-else
+        op50 flex-auto pl1
+      >
+        {{ total }}
+      </div>
     </div>
     <div
       relative flex-auto h5 font-mono flex="~"
@@ -62,10 +68,13 @@ function onMousedown() {
         ]"
         :style="{ width: length > 0 ? `${1 / length * 100}%` : '100%' }"
       >
-        <div absolute inset-0 :class="i <= current ? 'bg-primary op15' : ''" />
+        <div
+          absolute inset-0
+          :class="(i <= current && active) ? 'bg-primary op15' : ''"
+        />
         <div
           :class="[
-            +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
+            (+i === +current && active) ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
             i === 0 ? 'rounded-l' : '',
             i === total ? 'rounded-r' : 'border-r-2',
           ]"

packages/client/pages/overview.vue

@@ -139,6 +139,14 @@ onMounted(() => {
           <carbon-moon v-if="isDark" />
           <carbon-sun v-else />
         </IconButton>
+        <IconButton
+          v-else
+          :title="isDark ? 'Dark mode' : 'Light mode'"
+          pointer-events-none op50
+        >
+          <carbon-moon v-if="isDark" />
+          <carbon-sun v-else />
+        </IconButton>
       </div>
     </nav>
     <main
@@ -173,7 +181,7 @@ onMounted(() => {
             <carbon:cics-program />
           </IconButton>
         </div>
-        <div class="flex flex-col gap-2 my5">
+        <div class="flex flex-col gap-2 my5" :style="{ width: `${cardWidth}px` }">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
             @dblclick="openSlideInNewTab(getSlidePath(route, false))"