diff --git a/forum/style.css b/forum/style.css index b00f7d2..7cf426d 100644 --- a/forum/style.css +++ b/forum/style.css @@ -1,15 +1,19 @@ -body { +body, html { + height: 100%; + margin: 0; + padding: 0; font-family: sans-serif; - background: linear-gradient(to bottom right, #1e3c72, #a9a9a9); + background: linear-gradient(to bottom right, #1e3c72, #9b59b6); /* blue to purple */ color: white; - padding: 20px; - max-width: 800px; - margin: auto; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; } header { text-align: center; - margin-bottom: 30px; + margin: 30px 0; } header h1 { @@ -18,39 +22,38 @@ header h1 { color: white; } -h2, h3 { - color: white; -} - -#new-thread, .thread, .reply { +#new-thread, .thread, .reply, .auth-container { background: rgba(255, 255, 255, 0.1); - border: 1px solid #ccc; + border: 1px solid rgba(255,255,255,0.2); padding: 15px; margin-bottom: 20px; - border-radius: 8px; + border-radius: 10px; + width: 90%; + max-width: 700px; } -textarea, input[type="text"] { +textarea, input[type="text"], input[type="password"] { width: 100%; background: #eee; color: black; - padding: 8px; + padding: 10px; + margin-top: 10px; border: none; - border-radius: 4px; + border-radius: 5px; } button { margin-top: 10px; - padding: 8px 16px; + padding: 10px 16px; border: none; - background: #0077cc; + background: #6c5ce7; color: white; - border-radius: 4px; + border-radius: 5px; cursor: pointer; } button:hover { - background: #005fa3; + background: #5a4dbf; } img { @@ -59,10 +62,6 @@ img { border-radius: 5px; } -input, button { - margin-top: 10px; -} - .emoji-wrap { position: relative; } @@ -77,21 +76,8 @@ input, button { cursor: pointer; } +/* Auth container for login/register */ .auth-container { - background: rgba(255, 255, 255, 0.1); - padding: 20px; - border-radius: 10px; - max-width: 400px; - margin: 50px auto; + margin-top: 50px; text-align: center; } - -.auth-container input { - width: 100%; - padding: 10px; - margin-top: 10px; - background: #eee; - border: none; - border-radius: 5px; - color: black; -}