diff options
Diffstat (limited to 'popup.html')
| -rw-r--r-- | popup.html | 59 |
1 files changed, 35 insertions, 24 deletions
@@ -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" |