connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix theme-independent login styling and improve calendar responsiveness

Browse Source 
- Remove theme reset on logout to preserve user theme preferences
- Implement hardcoded login page colors that override all theme styles
- Add comprehensive overrides for Google theme affecting login forms
- Optimize month view to show minimum required weeks (4-6) instead of fixed 6
- Implement dynamic calendar grid height calculations for better responsive fit
- Add calendar header to print preview with updated height calculations
- Update responsive breakpoints with proper header height variables

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-23 12:24:55 -04:00
parent 7e058ba972
commit b5b53bb23a
5 changed files with 187 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/styles.css
View File

@@ -586,6 +586,11 @@ body {
}
@media (max-height: 750px) and (min-height: 600px) {
.calendar-grid {
--calendar-header-height: 80px;
--weekday-header-height: 45px;
}
.sidebar-header {
padding: 0.8rem 1rem 0.5rem;
}
@@ -695,6 +700,11 @@ body {
font-size: 1.2rem !important;
}
/* Adjust weekday header height for responsive row calculation */
.calendar-grid {
--weekday-header-height: 45px;
}
.logout-button {
padding: 0.2rem 0.4rem;
@@ -702,7 +712,12 @@ body {
}
}
@media (max-height: 650px) and (min-height: 600px) {
@media (max-height: 650px) {
.calendar-grid {
--calendar-header-height: 75px;
--weekday-header-height: 40px;
}
.sidebar-header {
padding: 0.5rem 0.8rem 0.3rem;
}
@@ -827,6 +842,11 @@ body {
font-size: 1.1rem !important;
}
/* Most compact weekday header height for responsive row calculation */
.calendar-grid {
--weekday-header-height: 40px;
}
.logout-button {
padding: 0.15rem 0.3rem;
@@ -843,9 +863,9 @@ body {
}
.login-form, .register-form {
background: white;
background: #ffffff !important;
padding: 2rem;
border-radius: var(--border-radius-medium);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
@@ -854,7 +874,8 @@ body {
.login-form h2, .register-form h2 {
text-align: center;
margin-bottom: 2rem;
color: #333;
color: #333333 !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
}
.form-group {
@@ -868,6 +889,15 @@ body {
color: var(--text-secondary);
}
.login-form .form-group label,
.register-form .form-group label,
.login-form label,
.register-form label {
color: #333333 !important;
font-size: 1rem !important;
font-weight: 500 !important;
}
.form-group input {
width: 100%;
padding: var(--control-padding);
@@ -877,12 +907,41 @@ body {
transition: border-color 0.2s;
}
.login-form .form-group input,
.register-form .form-group input,
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="url"],
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="url"] {
background: #ffffff !important;
color: #333333 !important;
border: 1px solid #d1d5db !important;
}
.form-group input:focus {
outline: none;
border-color: var(--input-border-focus);
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
.login-form .form-group input:focus,
.register-form .form-group input:focus,
.login-form input[type="text"]:focus,
.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus,
.login-form input[type="url"]:focus,
.register-form input[type="text"]:focus,
.register-form input[type="email"]:focus,
.register-form input[type="password"]:focus,
.register-form input[type="url"]:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}
.form-group input:disabled {
background-color: var(--background-tertiary);
cursor: not-allowed;
@@ -924,7 +983,7 @@ body {
.remember-checkbox label {
margin: 0;
font-size: 0.55rem;
color: #888;
color: #888888;
cursor: pointer;
user-select: none;
font-weight: 400;
@@ -956,15 +1015,51 @@ body {
z-index: 1;
}
.login-form .password-toggle-btn,
.register-form .password-toggle-btn {
position: absolute !important;
right: 0.75rem !important;
background: transparent !important;
border: none !important;
color: #888888 !important;
cursor: pointer !important;
padding: 0.25rem !important;
font-size: 1rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.2s ease !important;
z-index: 1 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.password-toggle-btn:hover {
color: #555;
}
.login-form .password-toggle-btn:hover,
.register-form .password-toggle-btn:hover {
color: #555555 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.password-toggle-btn:focus {
outline: none;
color: #667eea;
}
.login-form .password-toggle-btn:focus,
.register-form .password-toggle-btn:focus {
outline: none !important;
color: #667eea !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.login-button, .register-button {
width: 100%;
padding: var(--control-padding);
@@ -998,6 +1093,13 @@ body {
border: 1px solid #f5c6cb;
}
.login-form .error-message,
.register-form .error-message {
background-color: #ef4444;
color: #ffffff;
border: 1px solid #f5c6cb;
}
.auth-links {
text-align: center;
margin-top: 2rem;
@@ -1179,10 +1281,13 @@ body {
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto repeat(6, 1fr);
flex: 1;
/* grid-template-rows set dynamically in component with calculated weeks */
position: relative;
height: calc(100% - var(--calendar-header-height, 88px));
background: var(--calendar-bg, white);
gap: 0;
--weekday-header-height: 50px; /* Base weekday header height */
--calendar-header-height: 88px; /* Base calendar header height */
}
/* Week View Container */