Style Modal and SchoolSearchModal with warm editorial palette
- Modal: Warm overlay, rounded corners, Playfair Display title, coral close button hover, warm scrollbar colors - SchoolSearchModal: Coral focus states, gold warning banner, coral add buttons, warm result item styling with hover effects Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
@@ -1,7 +1,7 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(26, 22, 18, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -20,14 +20,15 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
background: var(--bg-card, white);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(26, 22, 18, 0.2);
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.3s ease;
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
@@ -61,23 +62,24 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
border-bottom: 1px solid var(--border-color, #e5dfd5);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
color: var(--text-primary, #1a1612);
|
||||
font-family: var(--font-playfair), 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
padding: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
color: var(--text-muted, #8a847a);
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -85,8 +87,8 @@
|
||||
}
|
||||
|
||||
.closeButton:hover {
|
||||
background: #f3f4f6;
|
||||
color: #1f2937;
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
color: var(--accent-coral, #e07256);
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -101,16 +103,16 @@
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar-track {
|
||||
background: #f3f4f6;
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar-thumb {
|
||||
background: #d1d5db;
|
||||
background: var(--border-color, #e5dfd5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
background: var(--text-muted, #8a847a);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@@ -6,17 +6,18 @@
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #1a1612);
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: var(--font-playfair), 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fde047;
|
||||
color: #92400e;
|
||||
background: rgba(201, 162, 39, 0.15);
|
||||
border: 1px solid var(--accent-gold, #c9a227);
|
||||
color: var(--text-primary, #1a1612);
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
@@ -30,15 +31,21 @@
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: 2px solid var(--border-medium);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition);
|
||||
border: 2px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card, white);
|
||||
color: var(--text-primary, #1a1612);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.searchInput::placeholder {
|
||||
color: var(--text-muted, #8a847a);
|
||||
}
|
||||
|
||||
.searchInput:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--accent-coral, #e07256);
|
||||
box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
|
||||
}
|
||||
|
||||
.searchSpinner {
|
||||
@@ -48,9 +55,9 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid rgba(59, 130, 246, 0.3);
|
||||
border: 2px solid rgba(224, 114, 86, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--primary);
|
||||
border-top-color: var(--accent-coral, #e07256);
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@@ -68,21 +75,41 @@
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Scrollbar styles */
|
||||
.results::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.results::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.results::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color, #e5dfd5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.results::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted, #8a847a);
|
||||
}
|
||||
|
||||
.resultItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition);
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.resultItem:hover {
|
||||
background: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: var(--bg-card, white);
|
||||
border-color: var(--accent-coral, #e07256);
|
||||
box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
|
||||
}
|
||||
|
||||
.schoolInfo {
|
||||
@@ -93,7 +120,7 @@
|
||||
.schoolName {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
color: var(--text-primary, #1a1612);
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -104,7 +131,7 @@
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary, #5c564d);
|
||||
}
|
||||
|
||||
.schoolMeta span {
|
||||
@@ -116,37 +143,39 @@
|
||||
.addButton {
|
||||
padding: 0.625rem 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
background: var(--primary);
|
||||
background: var(--accent-coral, #e07256);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.addButton:hover:not(:disabled) {
|
||||
background: var(--primary-dark);
|
||||
background: var(--accent-coral-dark, #c45a3f);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
|
||||
}
|
||||
|
||||
.addButton:disabled {
|
||||
background: var(--secondary);
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
color: var(--text-muted, #8a847a);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.noResults {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary, #5c564d);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-tertiary);
|
||||
color: var(--text-muted, #8a847a);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user