From 15d84dace4238aa3b0e59e55b322abae018b9818 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Sun, 22 Mar 2026 16:04:22 -0400
Subject: [PATCH] change timeline style

---
 src-tauri/src/engine.rs |  19 +-
 src/App.vue             | 373 +++++++++++++++++++++++-----------------
 2 files changed, 225 insertions(+), 167 deletions(-)

diff --git a/src-tauri/src/engine.rs b/src-tauri/src/engine.rs
index c73f219..3245c8a 100644
--- a/src-tauri/src/engine.rs
+++ b/src-tauri/src/engine.rs
@@ -95,8 +95,9 @@ pub fn start_engine(app: AppHandle) {
     });
 
     tauri::async_runtime::spawn(async move {
-        // Every 60 seconds
-        let mut ticker = interval(Duration::from_secs(60));
+        // Check every 500ms to be precise about the 0th second
+        let mut ticker = interval(Duration::from_millis(500));
+        let mut last_minute = -1;
         
         loop {
             ticker.tick().await;
@@ -105,9 +106,17 @@ pub fn start_engine(app: AppHandle) {
                 continue;
             }
 
-            println!("Tick: capturing screen...");
-            if let Err(e) = capture_screens(&app).await {
-                eprintln!("Failed to capture screens: {}", e);
+            let now = Local::now();
+            let current_minute = now.format("%M").to_string().parse::<i32>().unwrap_or(0);
+            let current_second = now.format("%S").to_string().parse::<i32>().unwrap_or(0);
+
+            // Trigger only if it's the 0th second and we haven't captured this minute yet
+            if current_second == 0 && current_minute != last_minute {
+                last_minute = current_minute;
+                println!("Tick: capturing screen at {:02}:{:02}:00...", now.format("%H"), current_minute);
+                if let Err(e) = capture_screens(&app).await {
+                    eprintln!("Failed to capture screens: {}", e);
+                }
             }
         }
     });
diff --git a/src/App.vue b/src/App.vue
index 95ed75e..a5186b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,41 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { load } from "@tauri-apps/plugin-store";
 import { open } from "@tauri-apps/plugin-dialog";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { FolderOpen, Settings, Play, Pause, Maximize2, X } from "lucide-vue-next";
+import { FolderOpen, Settings, Play, Pause, Maximize2, X, RefreshCw } from "lucide-vue-next";
 
+// --- Types & Constants ---
+interface TimelineItem {
+  time: string; // "HH:mm:ss"
+  path: string;
+}
+
+const PIXELS_PER_MINUTE = 1.5; // Controls the vertical stretch of the timeline
+const TOTAL_MINUTES = 24 * 60;
+const RULER_HEIGHT = TOTAL_MINUTES * PIXELS_PER_MINUTE;
+
+// --- State ---
 const isSetupComplete = ref(false);
 const savePath = ref("");
 const isPaused = ref(false);
-
-const currentDate = ref(new Date().toISOString().split("T")[0]); // YYYY-MM-DD
-const timelineImages = ref<{ time: string; path: string }[]>([]);
-const selectedImage = ref<{ time: string; path: string } | null>(null);
+const currentDate = ref(new Date().toISOString().split("T")[0]);
+const timelineImages = ref<TimelineItem[]>([]);
+const selectedImage = ref<TimelineItem | null>(null);
 const previewSrc = ref("");
 const isFullscreen = ref(false);
 const isSettingsOpen = ref(false);
 const mergeScreens = ref(false);
 const retainDays = ref(30);
 
-let store: any = null;
+const hoveredTime = ref<string | null>(null);
+const timelineRef = ref<HTMLElement | null>(null);
 
+let store: any = null;
+let captureUnlisten: any = null;
+
+// --- Logic ---
 onMounted(async () => {
   store = await load("config.json");
   const path = await store.get("savePath");
@@ -33,17 +48,22 @@ onMounted(async () => {
     await loadTimeline();
   }
 
-  // Listen for backend pause state changes (e.g. from tray)
   await listen<boolean>("pause-state-changed", (event) => {
     isPaused.value = event.payload;
   });
+
+  // Listen for refresh triggers if any
+  captureUnlisten = await listen("refresh-timeline", () => {
+    loadTimeline();
+  });
+});
+
+onUnmounted(() => {
+  if (captureUnlisten) captureUnlisten();
 });
 
 const selectFolder = async () => {
-  const selected = await open({
-    directory: true,
-    multiple: false,
-  });
+  const selected = await open({ directory: true, multiple: false });
   if (selected && typeof selected === "string") {
     savePath.value = selected;
     await store.set("savePath", selected);
@@ -65,222 +85,251 @@ const togglePauseState = async () => {
 
 const loadTimeline = async () => {
   if (!savePath.value) return;
-  const dateStr = currentDate.value;
-  // It's safer to read files from Rust and return a list of { time, absolute_path }.
-  timelineImages.value = await invoke("get_timeline", { date: dateStr, baseDir: savePath.value });
+  timelineImages.value = await invoke("get_timeline", { 
+    date: currentDate.value, 
+    baseDir: savePath.value 
+  });
 };
 
-const refresh = async () => {
-  await loadTimeline();
-};
-
-const selectImage = async (img: { time: string; path: string }) => {
+const selectImage = async (img: TimelineItem) => {
   selectedImage.value = img;
   try {
     const base64 = await invoke("get_image_base64", { path: img.path });
     previewSrc.value = `data:image/jpeg;base64,${base64}`;
   } catch (e) {
     console.error("Failed to load image:", e);
-    previewSrc.value = "";
   }
 };
 
+// --- Timeline Helper Functions ---
+const timeToMinutes = (timeStr: string) => {
+  const [h, m] = timeStr.split(":").map(Number);
+  return h * 60 + m;
+};
+
+const minutesToTime = (totalMinutes: number) => {
+  const h = Math.floor(totalMinutes / 60);
+  const m = Math.floor(totalMinutes % 60);
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+};
+
+const handleTimelineMouseMove = (e: MouseEvent) => {
+  if (!timelineRef.value) return;
+  const rect = timelineRef.value.getBoundingClientRect();
+  const y = e.clientY - rect.top + timelineRef.value.scrollTop;
+  const minutes = Math.floor(y / PIXELS_PER_MINUTE);
+  
+  if (minutes >= 0 && minutes < TOTAL_MINUTES) {
+    hoveredTime.value = minutesToTime(minutes);
+    
+    // Find closest image
+    const closest = timelineImages.value.reduce((prev, curr) => {
+      const prevDiff = Math.abs(timeToMinutes(prev.time) - minutes);
+      const currDiff = Math.abs(timeToMinutes(curr.time) - minutes);
+      return currDiff < prevDiff ? curr : prev;
+    }, timelineImages.value[0]);
+
+    if (closest && closest !== selectedImage.value) {
+      selectImage(closest);
+    }
+  }
+};
+
+const handleTimelineMouseLeave = () => {
+  hoveredTime.value = null;
+};
+
 </script>
 
 <template>
-  <div class="h-screen w-screen flex flex-col overflow-hidden text-main bg-light">
+  <div class="h-screen w-screen flex flex-col overflow-hidden text-[#1D1D1F] bg-[#FBFBFD]">
     <!-- Setup Wizard -->
-    <div v-if="!isSetupComplete" class="flex-1 flex items-center justify-center">
-      <div class="bg-white p-10 rounded-3xl shadow-[0_12px_30px_rgba(0,0,0,0.04)] max-w-md text-center">
-        <h1 class="text-3xl font-semibold mb-4 text-main">Welcome to Chrono Snap</h1>
-        <p class="text-sec mb-8">Please select a folder to save your screenshots.</p>
+    <div v-if="!isSetupComplete" class="flex-1 flex items-center justify-center p-10">
+      <div class="bg-white p-12 rounded-[32px] shadow-2xl max-w-md text-center border border-[#E5E5E7]">
+        <div class="w-20 h-20 bg-[#007AFF]/10 rounded-3xl flex items-center justify-center mx-auto mb-8">
+           <FolderOpen :size="40" class="text-[#007AFF]" />
+        </div>
+        <h1 class="text-3xl font-bold mb-4 tracking-tight">Set up Chrono Snap</h1>
+        <p class="text-[#86868B] mb-10 leading-relaxed">Choose a local folder where your visual history will be securely stored.</p>
         <button 
           @click="selectFolder"
-          class="bg-[#007AFF] text-white px-6 py-3 rounded-xl font-medium hover:bg-[#0063CC] transition shadow-[0_4px_12px_rgba(0,122,255,0.25)] flex items-center justify-center gap-2 w-full"
+          class="bg-[#007AFF] text-white px-8 py-4 rounded-2xl font-semibold hover:bg-[#0063CC] transition-all transform active:scale-95 shadow-lg shadow-[#007AFF]/20 w-full flex items-center justify-center gap-3"
         >
-          <FolderOpen :size="20" />
-          Choose Folder
+          Select Storage Folder
         </button>
       </div>
     </div>
 
-    <!-- Main App -->
+    <!-- Main Workspace -->
     <div v-else class="flex flex-1 overflow-hidden">
-      <!-- Sidebar -->
-      <div class="w-64 bg-sidebar border-r border-[#E5E5E7] flex flex-col">
-        <div class="p-6 pb-2">
-          <h2 class="text-xl font-semibold mb-4">Timeline</h2>
+      <!-- Vertical Ruler Sidebar -->
+      <div class="w-72 bg-[#F8FAFD] border-r border-[#E5E5E7] flex flex-col select-none relative">
+        <!-- Date Picker Header -->
+        <div class="p-6 bg-[#F8FAFD]/80 backdrop-blur-md sticky top-0 z-20 border-b border-[#E5E5E7]/50">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-bold tracking-tight">Activity</h2>
+            <button @click="loadTimeline" class="p-2 hover:bg-white rounded-xl transition-colors text-[#86868B] hover:text-[#007AFF]">
+              <RefreshCw :size="18" />
+            </button>
+          </div>
           <input 
             type="date" 
             v-model="currentDate" 
             @change="loadTimeline"
-            class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-[#007AFF]"
+            class="w-full bg-white border border-[#E5E5E7] rounded-xl px-4 py-2.5 text-sm font-medium focus:ring-2 focus:ring-[#007AFF]/20 focus:border-[#007AFF] outline-none transition-all"
           />
         </div>
-        
-        <div class="flex-1 overflow-y-auto px-4 py-2 space-y-2 no-scrollbar">
-          <div 
-            v-for="img in timelineImages" 
-            :key="img.path"
-            @click="selectImage(img)"
-            class="p-3 rounded-xl cursor-pointer transition flex justify-between items-center"
-            :class="selectedImage?.path === img.path ? 'bg-[#007AFF] text-white shadow-sm' : 'hover:bg-white text-sec hover:text-main'"
-          >
-            <span class="font-medium">{{ img.time }}</span>
-          </div>
-          <div v-if="timelineImages.length === 0" class="text-center text-sm text-sec mt-10">
-            No records for this day.
+
+        <!-- Scrollable Ruler -->
+        <div 
+          ref="timelineRef"
+          class="flex-1 overflow-y-auto relative no-scrollbar hover:cursor-crosshair group"
+          @mousemove="handleTimelineMouseMove"
+          @mouseleave="handleTimelineMouseLeave"
+        >
+          <!-- Ruler Canvas -->
+          <div :style="{ height: RULER_HEIGHT + 'px' }" class="relative ml-16">
+            <!-- Hour Markers -->
+            <div v-for="h in 24" :key="h" 
+              class="absolute left-0 w-full border-t border-[#E5E5E7]/60 flex items-start"
+              :style="{ top: (h-1) * 60 * PIXELS_PER_MINUTE + 'px' }"
+            >
+              <span class="absolute -left-12 -top-2.5 text-[10px] font-bold text-[#86868B] tracking-tighter">
+                {{ String(h-1).padStart(2, '0') }}:00
+              </span>
+            </div>
+
+            <!-- Activity Bars -->
+            <div 
+              v-for="img in timelineImages" 
+              :key="img.path"
+              class="absolute left-1 right-8 h-1 bg-[#007AFF]/40 rounded-full transition-all"
+              :class="selectedImage?.path === img.path ? 'bg-[#007AFF] h-1.5 shadow-sm z-10' : ''"
+              :style="{ top: timeToMinutes(img.time) * PIXELS_PER_MINUTE + 'px' }"
+            ></div>
+
+            <!-- Hover Cursor Line -->
+            <div 
+              v-if="hoveredTime"
+              class="absolute left-0 right-0 border-t-2 border-[#007AFF] z-30 pointer-events-none"
+              :style="{ top: timeToMinutes(hoveredTime) * PIXELS_PER_MINUTE + 'px' }"
+            >
+               <div class="absolute -left-14 -top-3 bg-[#007AFF] text-white text-[10px] px-1.5 py-0.5 rounded font-bold shadow-sm">
+                 {{ hoveredTime }}
+               </div>
+            </div>
           </div>
         </div>
 
-        <div class="p-4 border-t border-[#E5E5E7] flex justify-between items-center bg-sidebar">
-          <button 
-            @click="togglePauseState"
-            class="p-2 rounded-lg hover:bg-[#E5E5E7] transition text-sec"
-            :title="isPaused ? 'Resume' : 'Pause'"
-          >
-            <Play v-if="isPaused" :size="20" />
-            <Pause v-else :size="20" />
+        <!-- Footer Actions -->
+        <div class="p-4 border-t border-[#E5E5E7] bg-white/50 backdrop-blur-sm flex justify-around">
+          <button @click="togglePauseState" class="p-3 rounded-2xl hover:bg-[#F2F2F7] transition-colors" :class="isPaused ? 'text-[#FF3B30]' : 'text-[#86868B]'">
+            <Play v-if="isPaused" :size="22" /> <Pause v-else :size="22" />
           </button>
-          
-          <button 
-            @click="refresh"
-            class="text-sm font-medium text-[#007AFF] px-3 py-1 rounded-lg hover:bg-white transition"
-          >
-            Refresh
-          </button>
-          
-          <button 
-            @click="isSettingsOpen = true"
-            class="p-2 rounded-lg hover:bg-[#E5E5E7] transition text-sec"
-            title="Settings"
-          >
-            <Settings :size="20" />
+          <button @click="isSettingsOpen = true" class="p-3 rounded-2xl hover:bg-[#F2F2F7] transition-colors text-[#86868B]">
+            <Settings :size="22" />
           </button>
         </div>
       </div>
 
-      <!-- Content Area -->
-      <div class="flex-1 bg-light flex flex-col relative">
-        <div v-if="selectedImage" class="flex-1 p-10 flex items-center justify-center overflow-hidden">
-          <div class="relative max-w-full max-h-full group">
-            <img 
-              :src="previewSrc" 
-              class="max-w-full max-h-full object-contain rounded-2xl shadow-[0_12px_30px_rgba(0,0,0,0.08)]"
-            />
-            <button 
-              @click="isFullscreen = true"
-              class="absolute top-4 right-4 bg-black/50 text-white p-2 rounded-xl opacity-0 group-hover:opacity-100 transition backdrop-blur-md"
-            >
-              <Maximize2 :size="20" />
-            </button>
+      <!-- Main Preview Area -->
+      <div class="flex-1 bg-[#FBFBFD] flex flex-col relative overflow-hidden">
+        <div class="p-6 flex items-center justify-between border-b border-[#E5E5E7]/50 bg-white/80 backdrop-blur-md z-10">
+          <div v-if="selectedImage" class="flex items-center gap-3">
+            <span class="text-lg font-bold">{{ selectedImage.time }}</span>
+            <span class="text-xs font-medium px-2 py-0.5 bg-[#F2F2F7] text-[#86868B] rounded-full uppercase tracking-wider">Screenshot</span>
           </div>
+          <div v-else class="text-[#86868B] font-medium">No activity selected</div>
+          
+          <button v-if="selectedImage" @click="isFullscreen = true" class="p-2.5 rounded-xl hover:bg-[#F2F2F7] transition-all text-[#86868B]">
+            <Maximize2 :size="20" />
+          </button>
         </div>
-        <div v-else class="flex-1 flex items-center justify-center text-sec">
-          Select a point in the timeline to view.
+
+        <div class="flex-1 flex items-center justify-center p-12 overflow-hidden bg-[#F2F2F7]/30">
+          <transition name="fade" mode="out-in">
+            <div v-if="previewSrc" :key="previewSrc" class="relative group max-w-full max-h-full">
+               <img 
+                :src="previewSrc" 
+                class="max-w-full max-h-full object-contain rounded-3xl shadow-2xl border border-white/50"
+              />
+            </div>
+            <div v-else class="flex flex-col items-center gap-4 text-[#86868B]">
+              <div class="w-16 h-16 bg-[#E5E5E7] rounded-full flex items-center justify-center opacity-50">
+                 <Maximize2 :size="30" />
+              </div>
+              <p class="font-medium">Hover over the timeline to preview</p>
+            </div>
+          </transition>
         </div>
       </div>
     </div>
 
     <!-- Settings Modal -->
-    <div 
-      v-if="isSettingsOpen" 
-      class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-8 backdrop-blur-sm"
-      @click.self="isSettingsOpen = false"
-    >
-      <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden">
-        <div class="p-6 border-b border-[#E5E5E7] flex justify-between items-center">
-          <h2 class="text-xl font-semibold">Settings</h2>
-          <button @click="isSettingsOpen = false" class="text-sec hover:text-main">
+    <div v-if="isSettingsOpen" class="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-center justify-center p-6" @click.self="isSettingsOpen = false">
+      <div class="bg-white rounded-[40px] shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
+        <div class="p-8 border-b border-[#E5E5E7] flex justify-between items-center bg-[#FBFBFD]">
+          <h2 class="text-2xl font-bold">Settings</h2>
+          <button @click="isSettingsOpen = false" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#E5E5E7] transition-colors">
             <X :size="24" />
           </button>
         </div>
-        <div class="p-8 space-y-6">
-          <div class="space-y-2">
-            <label class="text-sm font-medium text-sec">Save Path</label>
-            <div class="flex gap-2">
-              <input 
-                type="text" 
-                readonly 
-                :value="savePath"
-                class="flex-1 bg-sidebar border border-[#E5E5E7] rounded-xl px-4 py-2 text-sm text-sec outline-none"
-              />
-              <button 
-                @click="selectFolder"
-                class="bg-sidebar border border-[#E5E5E7] p-2 rounded-xl hover:bg-[#E5E5E7] transition"
-              >
-                <FolderOpen :size="18" />
-              </button>
+        <div class="p-10 space-y-8">
+          <div class="space-y-3">
+            <label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">Storage Location</label>
+            <div class="flex gap-3">
+              <input type="text" readonly :value="savePath" class="flex-1 bg-[#F2F2F7] rounded-2xl px-5 py-3.5 text-sm font-medium text-[#1D1D1F] outline-none" />
+              <button @click="selectFolder" class="bg-white border-2 border-[#E5E5E7] p-3.5 rounded-2xl hover:border-[#007AFF] transition-all"><FolderOpen :size="20" /></button>
             </div>
           </div>
 
-          <div class="flex items-center justify-between">
-            <div>
-              <div class="font-medium">Merge Screens</div>
-              <div class="text-xs text-sec">Combine all monitors into one image</div>
+          <div class="flex items-center justify-between p-4 bg-[#F2F2F7] rounded-3xl">
+            <div class="space-y-0.5">
+              <div class="font-bold text-[#1D1D1F]">Merge Displays</div>
+              <div class="text-xs font-medium text-[#86868B]">Stitch all screens into one image</div>
             </div>
-            <button 
-              @click="mergeScreens = !mergeScreens; updateSettings()"
-              class="w-12 h-6 rounded-full transition relative"
-              :class="mergeScreens ? 'bg-[#007AFF]' : 'bg-[#E5E5E7]'"
-            >
-              <div 
-                class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
-                :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"
-              ></div>
+            <button @click="mergeScreens = !mergeScreens; updateSettings()" class="w-14 h-8 rounded-full transition-all relative shadow-inner" :class="mergeScreens ? 'bg-[#34C759]' : 'bg-[#E5E5E7]'">
+              <div class="absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform shadow-md" :style="{ transform: mergeScreens ? 'translateX(24px)' : 'translateX(0)' }"></div>
             </button>
           </div>
 
-          <div class="space-y-2">
-            <div class="flex justify-between">
-              <label class="text-sm font-medium">Retention Period</label>
-              <span class="text-sm text-[#007AFF] font-semibold">{{ retainDays }} Days</span>
+          <div class="space-y-4">
+            <div class="flex justify-between items-end">
+              <label class="text-sm font-bold text-[#86868B] uppercase tracking-widest ml-1">Retention Policy</label>
+              <span class="text-lg font-black text-[#007AFF]">{{ retainDays }} Days</span>
             </div>
-            <input 
-              type="range" 
-              v-model.number="retainDays" 
-              min="1" 
-              max="90" 
-              @change="updateSettings"
-              class="w-full h-1.5 bg-[#E5E5E7] rounded-lg appearance-none cursor-pointer accent-[#007AFF]"
-            />
+            <input type="range" v-model.number="retainDays" min="1" max="180" @change="updateSettings" class="w-full h-2 bg-[#E5E5E7] rounded-full appearance-none cursor-pointer accent-[#007AFF]" />
+            <p class="text-[11px] text-[#86868B] font-medium leading-normal text-center">Screenshots older than this will be permanently removed.</p>
           </div>
         </div>
-        <div class="p-6 bg-sidebar border-t border-[#E5E5E7] text-center">
-          <p class="text-xs text-sec">Changes are saved automatically.</p>
-        </div>
       </div>
     </div>
 
     <!-- Fullscreen Modal -->
-    <div 
-      v-if="isFullscreen && selectedImage" 
-      class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-8 backdrop-blur-sm"
-    >
-      <button 
-        @click="isFullscreen = false"
-        class="absolute top-8 right-8 text-white/70 hover:text-white transition"
-      >
-        <X :size="32" />
+    <div v-if="isFullscreen && previewSrc" class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-6 backdrop-blur-xl animate-in fade-in duration-300">
+      <button @click="isFullscreen = false" class="absolute top-10 right-10 w-14 h-14 flex items-center justify-center bg-white/10 text-white rounded-full hover:bg-white/20 transition-all backdrop-blur-md">
+        <X :size="36" />
       </button>
-      <img 
-        :src="previewSrc" 
-        class="max-w-full max-h-full object-contain"
-      />
+      <img :src="previewSrc" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl" />
     </div>
   </div>
 </template>
 
 <style>
-/* Custom scrollbar for timeline */
-.no-scrollbar::-webkit-scrollbar {
-  width: 4px;
-}
-.no-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-.no-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(0,0,0,0.1);
-  border-radius: 20px;
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.1s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 4px solid #007AFF;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  margin-top: -11px;
 }
 </style>