diff --git a/css/style.css b/css/style.css index 3ddd634..bf75f7c 100644 --- a/css/style.css +++ b/css/style.css @@ -202,28 +202,33 @@ label { /* Step Wizard Tabs */ .tab { position: relative; - padding: 1rem 1.5rem; + padding: 0.75rem 1rem; cursor: pointer; transition: all 0.3s ease; + border-bottom: 3px solid transparent; } .tab.active { color: #6366f1; font-weight: 600; + border-bottom-color: #6366f1; } -.tab.active::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(to right, #6366f1, #8b5cf6); +.tab:not(.active) { + color: #6b7280; } .tab:not(.active):hover { - background-color: rgba(99, 102, 241, 0.1); + background-color: rgba(99, 102, 241, 0.05); + color: #6366f1; +} + +.tab-content { + display: block; +} + +.tab-content.hidden { + display: none; } /* Data Type Cards */ @@ -261,6 +266,22 @@ label { border-color: #818cf8 !important; } +/* Mobile: Smaller icons in data cards */ +@media (max-width: 768px) { + .data-card .text-4xl { + font-size: 1.75rem !important; + line-height: 1.75rem !important; + } + + .data-card { + padding: 0.75rem !important; + } + + .data-card .text-sm { + font-size: 0.7rem !important; + } +} + /* Icon Fallback System */ .icon-fallback { display: none; @@ -327,6 +348,24 @@ body.no-icons .icon-fallback { } } +/* Header buttons responsive */ +.header-buttons { + z-index: 10; +} + +@media (max-width: 768px) { + .header-buttons { + position: absolute !important; + top: 0; + right: 0; + justify-content: flex-end; + } + + .header-buttons button { + font-size: 0.875rem; + } +} + /* Error report button responsive */ #errorReportBtn { transition: all 0.3s ease; diff --git a/index.html b/index.html index 2400937..10c156c 100644 --- a/index.html +++ b/index.html @@ -15,21 +15,21 @@
-
-
+
+
- -
-

QR Code Generator v2.2.0

+

QR Code Generator v2.2.0

@@ -38,191 +38,129 @@

- -
-

- - -
-
-
-
URL
-
-
-
-
Text
-
-
-
-
Email
-
-
-
-
Phone
-
-
-
-
SMS
-
-
-
-
WiFi
-
-
-
-
Snapchat
-
-
-
-
File
-
-
-
-
Address
-
-
-
-
WhatsApp
-
-
-
-
YouTube
-
-
-
-
Instagram
-
-
-
-
LinkedIn
-
-
-
-
Facebook
-
-
-
-
X (Twitter)
-
-
-
-
Discord
-
-
-
-
Telegram
-
-
-
-
TikTok
-
-
-
-
Spotify
+
+ +
+ + +
+ + +
+ +
+

+ + +
+
-
- -
+ +
+
- -
-

- -
+ +