From f12317a9f216558ee879cc6cafbc755fcc7dc8ad Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Tue, 20 May 2025 01:38:47 -0700
Subject: adjust popup CSS for consistency

---
 popup.html | 59 +++++++++++++++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 24 deletions(-)

(limited to 'popup.html')

diff --git a/popup.html b/popup.html
index 58560f7..84b951f 100644
--- a/popup.html
+++ b/popup.html
@@ -5,52 +5,63 @@
     <title>YTQuickStamper</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Roboto', sans-serif;
             padding: 20px;
-            max-width: 350px;
-            background-color: #181818;
-            color: #f1f1f1;
+            max-width: 400px;
+            background-color: #202020;
+            color: #e0e0e0;
+            line-height: 1.6;
         }
         h3 {
             text-align: center;
-            color: #FF0000;
+            color: #FF5722;
+            font-size: 1.8rem;
+            margin-bottom: 20px;
         }
         button {
-            padding: 10px;
-            background-color: #FF0000;
-            color: white;
+            padding: 12px 20px;
+            background-color: #FF5722;
+            color: #ffffff;
             border: none;
-            border-radius: 4px;
+            border-radius: 6px;
             cursor: pointer;
             font-size: 1rem;
-            transition: background-color 0.3s;
+            font-weight: bold;
+            transition: background-color 0.3s, transform 0.2s;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
         }
         button:hover {
-            background-color: #CC0000;
+            background-color: #E64A19;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
         }
         #offset {
-            padding: 8px;
-            border: 2px solid #FF0000;
-            border-radius: 4px;
-            width: 60px;
+            padding: 10px;
+            border: 2px solid #FF5722;
+            border-radius: 6px;
+            width: 80px;
             font-size: 1rem;
-            background-color: #333;
-            color: #f1f1f1;
+            background-color: #2c2c2c;
+            color: #ffffff;
+            text-align: center;
         }
         label {
-            margin-top: 2rem;
+            margin-top: 1.5rem;
             font-size: 1rem;
-            color: #f1f1f1;
+            color: #e0e0e0;
+            display: block;
+            margin-bottom: 8px;
         }
         .offset-container {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-top: 20px;
-            padding: 10px;
-            background-color: #282828;
-            border: 1px solid #444;
-            border-radius: 6px;
+            padding: 12px;
+            background-color: #2a2a2a;
+            border: 1px solid #555;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
     </style>
 </head>
@@ -58,7 +69,7 @@
     <h3>QuickStamper</h3>
     <button id="activate">Launch Timestamp Tool</button>
     <div>
-        <label for="offset">Offset (sec):</label>
+        <label for="offset">-Offset (sec):</label>
         <input type="number"
             id="offset"
             title="Offset each timestamp by this many seconds, ex. 3 = 3s before each timestamp, -3 = 3s after each timestamp"
-- 
cgit v1.2.3