464 lines
11 KiB
CSS
464 lines
11 KiB
CSS
/* src/styles/global.css */
|
|
|
|
/* Basic Reset & Defaults */
|
|
:root {
|
|
/* Light Mode Variables (Default) */
|
|
--bg-color: #f4f7f6;
|
|
--text-color: #333;
|
|
--header-bg: #2c3e50;
|
|
--header-text: white;
|
|
--header-link-hover: #1abc9c;
|
|
--footer-bg: #34495e;
|
|
--footer-text: #ecf0f1;
|
|
--card-bg: white;
|
|
--card-box-shadow: rgba(0,0,0,0.1);
|
|
--card-box-shadow-hover: rgba(0,0,0,0.15);
|
|
--card-border: #eee; /* For borders like in card-details-section */
|
|
--search-bar-bg: #ffffff;
|
|
--search-bar-border: #ddd;
|
|
--search-bar-text: #333; /* Text inside input fields */
|
|
--button-bg: #1abc9c;
|
|
--button-text: white;
|
|
--button-bg-hover: #16a085;
|
|
--placeholder-text: #888;
|
|
--modal-content-bg: white;
|
|
--modal-overlay-bg: rgba(0, 0, 0, 0.6);
|
|
--modal-header-border: #eee;
|
|
--modal-close-button-color: #888;
|
|
--modal-close-button-hover-color: #333;
|
|
--accent-color: #1abc9c; /* For things like modal h3 */
|
|
--strong-text-color: #555;
|
|
--link-color: #1abc9c; /* General link color if needed */
|
|
}
|
|
|
|
body.dark-mode {
|
|
/* Dark Mode Variable Overrides */
|
|
--bg-color: #1a1a1a; /* Darker background */
|
|
--text-color: #e0e0e0; /* Lighter text */
|
|
--header-bg: #1f2937; /* Slightly different dark header */
|
|
--header-text: #e0e0e0;
|
|
--header-link-hover: #58c1ac; /* Lighter accent for hover */
|
|
--footer-bg: #111827; /* Darker footer */
|
|
--footer-text: #c7c7c7;
|
|
--card-bg: #2d2d2d; /* Dark card background */
|
|
--card-box-shadow: rgba(255,255,255,0.05); /* Lighter shadow for dark mode */
|
|
--card-box-shadow-hover: rgba(255,255,255,0.1);
|
|
--card-border: #444; /* Darker border */
|
|
--search-bar-bg: #2d2d2d;
|
|
--search-bar-border: #555;
|
|
--search-bar-text: #e0e0e0; /* Text inside input fields */
|
|
--button-bg: #58c1ac; /* Lighter accent for buttons */
|
|
--button-text: #1a1a1a; /* Darker text on light buttons */
|
|
--button-bg-hover: #4aa08c;
|
|
--placeholder-text: #777;
|
|
--modal-content-bg: #2d2d2d;
|
|
--modal-overlay-bg: rgba(0, 0, 0, 0.8); /* Darker overlay */
|
|
--modal-header-border: #444;
|
|
--modal-close-button-color: #aaa;
|
|
--modal-close-button-hover-color: #e0e0e0;
|
|
--accent-color: #58c1ac;
|
|
--strong-text-color: #bbb;
|
|
--link-color: #58c1ac;
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
background-color: var(--bg-color); /* USE VAR */
|
|
color: var(--text-color); /* USE VAR */
|
|
line-height: 1.6;
|
|
box-sizing: border-box;
|
|
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--header-bg); /* USE VAR */
|
|
color: var(--header-text); /* USE VAR */
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
font-size: 1.66rem;
|
|
}
|
|
|
|
header nav{
|
|
display:flex; /* put the links and the toggle in one row */
|
|
align-items:center; /* vertically centre them */
|
|
gap:1.5rem; /* space between the links and the toggle */
|
|
}
|
|
|
|
header nav a {
|
|
color: var(--header-text); /* USE VAR */
|
|
text-decoration: none;
|
|
margin-left: 0;
|
|
font-size: 1.33rem;
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
|
|
header nav a:hover {
|
|
color: var(--header-link-hover); /* USE VAR */
|
|
}
|
|
|
|
/* Theme Toggle Button Style */
|
|
.theme-toggle-button {
|
|
background: none;
|
|
border: 1px solid var(--header-text);
|
|
color: var(--header-text);
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
margin-left: 0;
|
|
}
|
|
body.dark-mode .theme-toggle-button {
|
|
border-color: var(--header-text); /* Or a specific dark mode border color */
|
|
}
|
|
|
|
main {
|
|
padding: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
background-color: var(--footer-bg); /* USE VAR */
|
|
color: var(--footer-text); /* USE VAR */
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* Search Bar Styles - Desktop First */
|
|
.search-bar-container {
|
|
background-color: var(--search-bar-bg); /* USE VAR */
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px var(--card-box-shadow); /* USE VAR for consistency with cards */
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-bar-container input[type="text"],
|
|
.search-bar-container input[type="number"],
|
|
.search-bar-container select {
|
|
background-color: var(--bg-color); /* Match page bg or use specific input bg */
|
|
color: var(--search-bar-text); /* USE VAR */
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--search-bar-border); /* USE VAR */
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
/* Handle select dropdown arrow color for dark mode (can be tricky cross-browser) */
|
|
/* For modern browsers, accent-color can influence form controls */
|
|
.search-bar-container select {
|
|
accent-color: var(--accent-color);
|
|
}
|
|
/* Placeholder color for inputs */
|
|
.search-bar-container input::placeholder {
|
|
color: var(--placeholder-text);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.search-bar-container input[type="text"] {
|
|
flex-basis: 300px;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.search-bar-container select,
|
|
.search-bar-container input[type="number"] {
|
|
flex-basis: 200px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
header nav {
|
|
margin-top: 0.5rem;
|
|
width: 100%; /* Ensure nav takes full width for button alignment */
|
|
display: flex;
|
|
justify-content: space-between; /* Align nav items and toggle button */
|
|
align-items: center;
|
|
}
|
|
header nav div { /* Assuming nav links are wrapped in a div */
|
|
display: flex;
|
|
}
|
|
header nav a {
|
|
margin-left: 0;
|
|
margin-right: 1rem;
|
|
}
|
|
.theme-toggle-button {
|
|
margin-left: auto; /* Push toggle to the right */
|
|
}
|
|
|
|
|
|
.search-bar-container {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: 1rem;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.search-bar-container input[type="text"],
|
|
.search-bar-container input[type="number"],
|
|
.search-bar-container select {
|
|
width: 100%;
|
|
font-size: 0.9rem;
|
|
padding: 0.65rem 0.75rem;
|
|
flex-basis: auto;
|
|
min-width: 0;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* Grid for Cards */
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* Card Styles */
|
|
.card {
|
|
background-color: var(--card-bg); /* USE VAR */
|
|
color: var(--text-color); /* Inherit text color from body or set specific */
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px var(--card-box-shadow); /* USE VAR */
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.3s ease, color 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 12px var(--card-box-shadow-hover); /* USE VAR */
|
|
}
|
|
|
|
.card-photo-container {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
background-color: var(--placeholder-text); /* Or a darker placeholder for dark mode */
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
body.dark-mode .card-photo-container {
|
|
background-color: #4a4a4a; /* Darker placeholder */
|
|
}
|
|
|
|
|
|
.card-photo {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.card-content {
|
|
padding: 1rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-content h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.33rem;
|
|
font-size: 1.33rem;
|
|
color: var(--text-color); /* USE VAR */
|
|
}
|
|
|
|
.card-content p {
|
|
margin-top: 0.33rem;
|
|
margin-bottom: 0.33rem;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: var(--text-color); /* USE VAR */
|
|
}
|
|
.card-content p strong {
|
|
color: var(--strong-text-color); /* USE VAR for strong tags inside paragraphs */
|
|
}
|
|
|
|
|
|
.card-info-placeholder {
|
|
font-style: italic;
|
|
color: var(--placeholder-text); /* USE VAR */
|
|
font-size: 0.9rem;
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.card-details-section { /* This class is not currently used in ClubCard.tsx for the modal */
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--card-border); /* USE VAR */
|
|
}
|
|
|
|
.card-details-section p {
|
|
margin: 0.3rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.card-details-section strong {
|
|
color: var(--strong-text-color); /* USE VAR */
|
|
}
|
|
|
|
.card-button {
|
|
background-color: var(--button-bg); /* USE VAR */
|
|
color: var(--button-text); /* USE VAR */
|
|
border: none;
|
|
padding: 0.6rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
margin-top: 1rem;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.card-button:hover {
|
|
background-color: var(--button-bg-hover); /* USE VAR */
|
|
}
|
|
|
|
/* Loading and Error Messages */
|
|
.loading-message, .error-message {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
padding: 2rem;
|
|
color: var(--strong-text-color); /* USE VAR */
|
|
}
|
|
|
|
.error-message {
|
|
color: #e74c3c; /* Keep specific error color, or make it a variable too */
|
|
}
|
|
body.dark-mode .error-message {
|
|
color: #ff6b6b; /* Lighter red for dark mode */
|
|
}
|
|
|
|
|
|
/* Staff Card Specifics */
|
|
.staff-card { /* Staff card inherits .card styles, so it gets dark mode too */
|
|
padding: 1.5rem;
|
|
}
|
|
.staff-card h3 {
|
|
font-size: 1.2rem;
|
|
color: var(--text-color); /* USE VAR */
|
|
}
|
|
.staff-card p {
|
|
font-size: 1rem;
|
|
color: var(--text-color); /* USE VAR */
|
|
}
|
|
.staff-card p strong {
|
|
color: var(--strong-text-color);
|
|
}
|
|
|
|
|
|
/* Modal Styles */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--modal-overlay-bg); /* USE VAR */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--modal-content-bg); /* USE VAR */
|
|
color: var(--text-color); /* USE VAR */
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 15px var(--card-box-shadow); /* USE VAR */
|
|
width: 90%;
|
|
max-width: 700px;
|
|
max-height: 90vh;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-scrollable-content {
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.modal-content h2 { /* Main title in modal */
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-color); /* USE VAR */
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--modal-header-border); /* USE VAR */
|
|
}
|
|
|
|
.modal-content h3 { /* Subheadings like "Meta Information" in modal */
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--accent-color); /* USE VAR */
|
|
}
|
|
.modal-content p, .modal-content li {
|
|
margin-top: 0.33rem;
|
|
margin-bottom: 0.33rem;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: var(--text-color); /* USE VAR */
|
|
}
|
|
.modal-content p strong {
|
|
color: var(--strong-text-color);
|
|
}
|
|
.modal-content ul {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.modal-photo {
|
|
width: 100%;
|
|
max-height: 300px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.modal-close-button {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: none;
|
|
border: none;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--modal-close-button-color); /* USE VAR */
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.modal-close-button:hover {
|
|
color: var(--modal-close-button-hover-color); /* USE VAR */
|
|
} |