admin/ersteller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add google login button styling

Browse Source
This commit is contained in:
Achim Rohn
2025-09-17 18:15:28 +02:00
parent f70a4ad777
commit 6e549e2530
1 changed files with 111 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
starter/static/styles.css
+111 -1
View File
@@ -377,4 +377,114 @@ a.disabled {
opacity: 0.6; opacity: 0.6;
pointer-events: none; pointer-events: none;
text-decoration-color: rgba(0, 0, 0, 0.2); text-decoration-color: rgba(0, 0, 0, 0.2);
} }
/* 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;
}
}