UI: Simplify login page styling, remove purple gradient background, stop global .container overrides; add scoped .auth-wrapper; neutralize buttons/cards; rebuild verified via smoke test

This commit is contained in:
HotSwapp
2025-10-07 21:37:10 -05:00
parent 7fe57ccb6d
commit 180314d43d
2 changed files with 13 additions and 19 deletions

View File

@@ -3,7 +3,7 @@
{% block title %}Login - Delphi Database{% endblock %} {% block title %}Login - Delphi Database{% endblock %}
{% block content %} {% block content %}
<div class="container"> <div class="container auth-wrapper">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8 col-lg-5"> <div class="col-md-8 col-lg-5">
<div class="card shadow-lg" style="border: none; border-radius: 15px;"> <div class="card shadow-lg" style="border: none; border-radius: 15px;">

View File

@@ -1,28 +1,25 @@
/* Custom CSS for Delphi Database */ /* Custom CSS for Delphi Database */
/* Additional styles can be added here */ /* Base: keep it neutral and let pages decide backgrounds */
body { body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-color: #f5f7fb; /* light neutral */
min-height: 100vh; min-height: 100vh;
display: flex;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
/* Login page specific styles */ /* Avoid overriding Bootstrap's global .container layout.
.container { Provide a scoped helper for auth pages instead. */
min-height: 100vh; .auth-wrapper {
min-height: calc(100vh - 120px); /* account for navbar+footer */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; padding: 32px 16px;
} }
/* Enhanced card styling for login */ /* Enhanced card styling for login */
.card { .card {
backdrop-filter: blur(10px); background: #ffffff;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
} }
/* Logo styling */ /* Logo styling */
@@ -55,19 +52,15 @@ body {
/* Button styling */ /* Button styling */
.btn-primary { .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px; border-radius: 8px;
padding: 12px 24px; padding: 12px 24px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.2s ease;
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%); transform: translateY(-1px);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
} }
/* Custom navbar styles */ /* Custom navbar styles */
@@ -78,7 +71,8 @@ body {
/* Custom card styles */ /* Custom card styles */
.card { .card {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
} }
/* Custom button styles */ /* Custom button styles */