fixed mobile

potatoqualitee · Dec 9, 2024 · 09883c4 · 09883c4
1 parent 74f4b25
commit 09883c4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 17 deletions.
diff --git a/css/components/auth.css b/css/components/auth.css
@@ -108,7 +108,7 @@
 }
 
 /* Auth Button */
-.btn-auth {
+.bsky-auth-container .btn-auth {
     width: 100%;
     padding: 12px 16px;
     font-size: 15px;
@@ -121,9 +121,10 @@
     transition: var(--transition);
     position: relative;
     overflow: hidden;
+    margin: 0;
 }
 
-.btn-auth::before {
+.bsky-auth-container .btn-auth::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -135,20 +136,20 @@
     transition: opacity 0.3s ease;
 }
 
-.btn-auth:hover:not(:disabled) {
+.bsky-auth-container .btn-auth:hover:not(:disabled) {
     background: var(--primary-hover);
     transform: translateY(-1px);
 }
 
-.btn-auth:hover:not(:disabled)::before {
+.bsky-auth-container .btn-auth:hover:not(:disabled)::before {
     opacity: 1;
 }
 
-.btn-auth:active:not(:disabled) {
+.bsky-auth-container .btn-auth:active:not(:disabled) {
     transform: translateY(0);
 }
 
-.btn-auth:disabled {
+.bsky-auth-container .btn-auth:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     background: var(--primary);
@@ -189,21 +190,49 @@
 }
 
 @media (max-width: 480px) {
-    .bsky-connect {
-        padding: 16px;
-        margin-top: 16px;
+    html body .bsky-connect {
+        padding: 32px 24px !important;
+        margin: 64px auto 48px !important;
+        border-radius: 12px !important;
+        max-width: 100% !important;
     }
 
-    .sign-in-title {
-        font-size: 18px;
+    html body .sign-in-title {
+        font-size: 20px !important;
+        margin: 0 0 32px 0 !important;
+        line-height: 1.3 !important;
+    }
+
+    html body .bsky-auth-container {
+        gap: 24px !important;
+        margin: 0 !important;
+        padding-bottom: 24px !important;
+    }
+
+    html body .input-wrapper {
+        margin: 0 !important;
+    }
+
+    html body .bsky-handle-input {
+        padding: 14px 16px 14px 36px !important;
+        font-size: 16px !important;
+    }
+
+    html body .bsky-auth-container .btn-auth {
+        padding: 16px !important;
+        font-size: 16px !important;
+        margin: 8px 0 32px !important;
+        border-radius: 12px !important;
     }
 
-    .bsky-handle-input,
-    .btn-auth {
-        padding: 10px 14px 10px 32px;
+    html body .bsky-auth-message {
+        font-size: 15px !important;
+        line-height: 1.4 !important;
+        padding: 0 2px !important;
     }
 
-    .input-wrapper::before {
-        left: 14px;
+    html body .bsky-auth-message.error {
+        padding: 12px !important;
+        margin: 8px 0 !important;
     }
 }
diff --git a/css/components/media.css b/css/components/media.css
@@ -19,7 +19,6 @@
     .bsky-connect {
         flex-direction: column;
         width: 100%;
-        padding: 0 var(--spacing-md);
     }
 
     .bsky-auth-container {