From 37d435e365ac70501120f79b0dd0ad151ab2d453 Mon Sep 17 00:00:00 2001 From: Chrissy LeMaire Date: Mon, 9 Dec 2024 17:11:14 +0100 Subject: [PATCH] Revert "Fixed mobile" This reverts commit 1c474928b355dbdfe887939cf0a4a0e1bc6aa212. --- css/components/auth.css | 72 +++++++++++++---------------------------- 1 file changed, 22 insertions(+), 50 deletions(-) diff --git a/css/components/auth.css b/css/components/auth.css index 21b282e..5150f67 100644 --- a/css/components/auth.css +++ b/css/components/auth.css @@ -1,5 +1,5 @@ /* Auth Container */ -body .bsky-connect { +.bsky-connect { background: var(--background); border-radius: 16px; padding: 24px; @@ -22,7 +22,7 @@ body .bsky-connect { opacity: 1; } -body .bsky-connect .sign-in-title { +.sign-in-title { font-size: 22px; font-weight: 800; color: var(--text); @@ -31,7 +31,7 @@ body .bsky-connect .sign-in-title { position: relative; } -body .bsky-connect .bsky-auth-container { +.bsky-auth-container { display: flex; flex-direction: column; gap: 16px; @@ -39,12 +39,12 @@ body .bsky-connect .bsky-auth-container { margin-top: 12px; } -body .bsky-connect .auth-section { +.auth-section { width: 100%; } /* Input Styling */ -body .bsky-connect .input-wrapper { +.input-wrapper { position: relative; width: 100%; margin-top: 16px; @@ -63,7 +63,7 @@ body .bsky-connect .input-wrapper { pointer-events: none; } -body .bsky-connect .bsky-handle-input { +.bsky-handle-input { width: 100%; padding: 12px 16px 12px 36px; font-size: 15px; @@ -108,7 +108,7 @@ body .bsky-connect .bsky-handle-input { } /* Auth Button */ -body .bsky-connect .btn-auth { +.btn-auth { width: 100%; padding: 12px 16px; font-size: 15px; @@ -155,7 +155,7 @@ body .bsky-connect .btn-auth { } /* Auth Message */ -body .bsky-connect .bsky-auth-message { +.bsky-auth-message { margin-top: 4px; font-size: 14px; color: var(--text-secondary); @@ -163,7 +163,7 @@ body .bsky-connect .bsky-auth-message { transition: all 0.3s ease; } -body .bsky-connect .bsky-auth-message.error { +.bsky-auth-message.error { color: var(--error); background: rgba(var(--error-rgb), 0.1); border-radius: 8px; @@ -171,67 +171,39 @@ body .bsky-connect .bsky-auth-message.error { margin: 8px 0; } -body .bsky-connect .auth-error { +.auth-error { font-weight: 500; line-height: 1.5; padding: 4px 0; } @media (max-width: 768px) { - body .bsky-connect { + .bsky-connect { margin-top: 20px; padding: 20px; } - body .bsky-connect .sign-in-title { + .sign-in-title { font-size: 20px; } } @media (max-width: 480px) { - body .bsky-connect { - padding: 32px; - margin: 20px; - border-radius: 20px; - } - - body .bsky-connect .sign-in-title { - font-size: 20px; - margin: 0 0 32px 0; - } - - body .bsky-connect .bsky-auth-container { - gap: 32px; - margin-top: 32px; - } - - body .bsky-connect .input-wrapper { - margin: 32px 0; - } - - body .bsky-connect .bsky-handle-input { - padding: 16px 16px 16px 36px; - font-size: 16px; - height: 56px; - margin-bottom: 32px; + .bsky-connect { + padding: 16px; + margin-top: 16px; } - body .bsky-connect .btn-auth { - margin-top: 32px; - padding: 18px; - font-size: 16px; - height: 56px; + .sign-in-title { + font-size: 18px; } - body .bsky-connect .bsky-auth-message { - margin-top: 32px; - font-size: 15px; - line-height: 1.6; - padding: 0 8px; + .bsky-handle-input, + .btn-auth { + padding: 10px 14px 10px 32px; } - body .bsky-connect .bsky-auth-message.error { - padding: 16px; - margin: 24px 0; + .input-wrapper::before { + left: 14px; } }