From 6e549e253087efbdbc673ea0498c0628fd2054b4 Mon Sep 17 00:00:00 2001
From: Achim Rohn <achim@rohn.eu>
Date: Wed, 17 Sep 2025 18:15:28 +0200
Subject: [PATCH] Add google login button styling

---
 starter/static/styles.css | 112 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 111 insertions(+), 1 deletion(-)

diff --git a/starter/static/styles.css b/starter/static/styles.css
index 9595abc..3cc991a 100644
--- a/starter/static/styles.css
+++ b/starter/static/styles.css
@@ -377,4 +377,114 @@ a.disabled {
     opacity: 0.6;
     pointer-events: none;
     text-decoration-color: rgba(0, 0, 0, 0.2);
-}
\ No newline at end of file
+}
+
+/* Button styles */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-height: 48px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
+}
+
+.btn-primary {
+    background-color: #4285f4;
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #357ae8;
+    color: white;
+    text-decoration: none;
+}
+
+/* Google Login Button */
+.google-login-btn {
+    background-color: #4285f4;
+    color: white;
+    border: 1px solid #dadce0;
+    font-family: 'Roboto', Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 12px 24px;
+    min-width: 200px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    transition: all 0.15s ease;
+}
+
+.google-login-btn::before {
+    content: '';
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY0IDkuMjA0NTVDMTcuNjQgOC41NjY3NCAxNy41ODI3IDcuOTUzMDUgMTcuNDc2NCA3LjM2MzY0SDE5VjEwLjgxODJIMTMuNTg0NUwxMy42Mzg2IDExLjEzNjNMMTMuNzI3IDExLjU0NTVIMTRWMTJIMTBWMTEuNzE4MkgxM1YxMC44MTgySDlWMTEuMTM2M0gxMlY5LjgxODE4SDlWMTAuMTM2NEgxMi40NzI3TDEyLjUgOS42ODE4Mkw5LjUgOS4yMjczVjguNUgxMS41VjguMTgxODJIMTFWOEg5LjVWNy42MTgxOEgxMVY3SDkuNVY2LjM4MTgySDExVjYuNUg5VjZIOC41VjUuNUg5VjVINy41VjQuNUg5VjRINy41VjMuNUg5VjNIMTRWMi41SDlWMkgxNFYxLjVIOVYxSDEzSDBWMEgxOFYxOEgwVjBaIiBmaWxsPSIjRkZGRkZGIi8+Cjwvc3ZnPgo=');
+    background-size: 18px 18px;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+}
+
+.google-login-btn:hover {
+    background-color: #357ae8;
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    transform: translateY(-1px);
+    color: white;
+    text-decoration: none;
+}
+
+.google-login-btn:active {
+    background-color: #2b5ce6;
+    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3);
+    transform: translateY(0);
+}
+
+.google-login-btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);
+}
+
+/* Login section specific styles */
+.login-section {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 40px 30px;
+}
+
+.login-buttons {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+/* Mobile responsive adjustments for login button */
+@media (max-width: 480px) {
+    .google-login-btn {
+        min-width: 160px;
+        font-size: 13px;
+        padding: 10px 20px;
+    }
+    
+    .login-section {
+        padding: 30px 20px;
+    }
+}