Spaces:
Sleeping
Sleeping
.form-text { | |
color: var(--text-primary) ; | |
} | |
footer, footer .text-muted, footer .text-secondary, footer .small, footer .text-body { | |
color: #111 ; | |
} | |
h1, h2, h3, h4, h5, h6, .card-title, .form-label, .gradient-text, .feature-icon, .alert, .table thead th, .table tbody td, .form-control, .form-select, .form-control::placeholder, .form-label { | |
color: var(--text-primary) ; | |
} | |
.text-muted, .text-secondary, .text-dark, .text-black, .text-body, .small, .opacity-75 { | |
color: var(--text-secondary) ; | |
} | |
/* CSS Variables: Theme Colors */ | |
:root { | |
--primary-color: #2c3e50; | |
--secondary-color: #3498db; | |
--accent-color: #e74c3c; | |
--success-color: #27ae60; | |
--warning-color: #f39c12; | |
--info-color: #13d7f5; | |
/* Dark Theme Defaults */ | |
--bg-color: #121212; | |
--card-bg: #1e1e1e; | |
--input-bg: #2d2d2d; | |
--text-primary: #ffffff; | |
--text-secondary: #cccccc; | |
--border-color: #404040; | |
--shadow-color: rgba(0, 0, 0, 0.3); | |
--hover-bg: rgba(255, 255, 255, 0.1); | |
--scrollbar-track: #444444; | |
} | |
/* Global Reset */ | |
* { | |
box-sizing: border-box; | |
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; | |
} | |
html, body { | |
height: 100%; | |
} | |
body { | |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
line-height: 1.6; | |
background-color: var(--bg-color); | |
color: var(--text-primary); | |
margin: 0; | |
padding: 0; | |
display: flex; | |
flex-direction: column; | |
min-height: 100vh; | |
} | |
main.flex-fill { | |
flex: 1 1 auto; | |
} | |
/* Hero Section */ | |
.hero-section { | |
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
color: white; | |
border-radius: 15px; | |
margin-bottom: 2rem; | |
padding: 3rem 2rem; | |
} | |
.hero-section h1 { | |
font-weight: 700; | |
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
color: white; /* Explicit white for hero text */ | |
} | |
.hero-section p { | |
font-size: 1.1rem; | |
opacity: 0.9; | |
color: white; /* Explicit white for hero text */ | |
} | |
/* Navbar */ | |
.navbar { | |
box-shadow: 0 2px 4px var(--shadow-color); | |
background-color: var(--card-bg); | |
border-bottom: 1px solid var(--border-color); | |
} | |
.navbar-brand { | |
font-weight: 700; | |
font-size: 1.5rem; | |
color: var(--secondary-color) ; | |
letter-spacing: 1px; | |
text-shadow: 0 2px 8px rgba(0,0,0,0.25); | |
} | |
.navbar-nav .nav-link { | |
font-weight: 500; | |
border-radius: 0.375rem; | |
margin: 0 0.25rem; | |
padding: 0.5rem 1rem; | |
transition: all 0.3s ease; | |
color: var(--text-primary) ; | |
} | |
.navbar-nav .nav-link:hover { | |
background-color: var(--hover-bg); | |
color: var(--text-primary) ; | |
} | |
/* Buttons */ | |
.btn { | |
border-radius: 8px; | |
font-weight: 500; | |
padding: 0.75rem 1.5rem; | |
text-decoration: none; | |
display: inline-block; | |
border: none; | |
cursor: pointer; | |
} | |
.btn:hover { | |
transform: translateY(-1px); | |
box-shadow: 0 4px 8px var(--shadow-color); | |
} | |
.btn-primary { | |
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
color: white ; | |
} | |
.btn-success { | |
background: linear-gradient(135deg, var(--success-color), #2ecc71); | |
color: white ; | |
} | |
.btn-info { | |
background: linear-gradient(135deg, var(--info-color), #3498db); | |
color: white ; | |
} | |
.btn-warning { | |
background: linear-gradient(135deg, var(--warning-color), #e67e22); | |
color: white ; | |
} | |
.btn-danger { | |
background: linear-gradient(135deg, var(--accent-color), #c0392b); | |
color: white ; | |
} | |
/* Cards */ | |
.card { | |
border: 1px solid var(--border-color); | |
border-radius: 15px; | |
background-color: var(--card-bg); | |
color: var(--text-primary); | |
box-shadow: 0 4px 6px var(--shadow-color); | |
} | |
.card:hover { | |
transform: translateY(-3px); | |
box-shadow: 0 8px 25px var(--shadow-color); | |
} | |
.card-header { | |
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
color: white ; | |
border-radius: 15px 15px 0 0; | |
padding: 1.5rem; | |
font-weight: 600; | |
border-bottom: 1px solid var(--border-color); | |
} | |
.card-body { | |
background-color: var(--card-bg); | |
color: var(--text-primary); | |
} | |
/* Form Controls */ | |
.form-control, | |
.form-select { | |
background-color: var(--input-bg); | |
color: var(--text-primary); | |
border-radius: 8px; | |
border: 2px solid var(--border-color); | |
padding: 0.75rem 1rem; | |
} | |
.form-control:focus, | |
.form-select:focus { | |
border-color: var(--secondary-color); | |
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); | |
background-color: var(--input-bg); | |
color: var(--text-primary); | |
} | |
.form-control::placeholder { | |
color: var(--text-secondary); | |
} | |
.form-label { | |
font-weight: 600; | |
margin-bottom: 0.5rem; | |
color: var(--text-primary); | |
} | |
/* Alerts */ | |
.alert { | |
border-radius: 10px; | |
padding: 1rem 1.5rem; | |
margin-bottom: 1rem; | |
border-left: 4px solid; | |
border: 1px solid var(--border-color); | |
} | |
.alert-success { | |
background-color: rgba(39, 174, 96, 0.1); | |
color: var(--success-color); | |
border-left-color: var(--success-color); | |
} | |
.alert-info { | |
background-color: rgba(23, 162, 184, 0.1); | |
color: var(--info-color); | |
border-left-color: var(--info-color); | |
} | |
.alert-warning { | |
background-color: rgba(243, 156, 18, 0.1); | |
color: var(--warning-color); | |
border-left-color: var(--warning-color); | |
} | |
.alert-danger { | |
background-color: rgba(231, 76, 60, 0.1); | |
color: var(--accent-color); | |
border-left-color: var(--accent-color); | |
} | |
/* Table */ | |
.table { | |
width: 100%; | |
border-collapse: collapse; | |
background-color: var(--card-bg); | |
color: var(--text-primary); | |
border: 1px solid var(--border-color); | |
border-radius: 8px; | |
overflow: hidden; | |
} | |
.table thead th { | |
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
color: white ; | |
padding: 1rem; | |
font-weight: 600; | |
border-bottom: 2px solid var(--border-color); | |
} | |
.table tbody td { | |
padding: 1rem; | |
border-bottom: 1px solid var(--border-color); | |
color: var(--text-primary); | |
} | |
.table tbody tr:hover { | |
background-color: var(--hover-bg); | |
} | |
.table tbody tr:last-child td { | |
border-bottom: none; | |
} | |
/* Responsive */ | |
@media (max-width: 768px) { | |
.hero-section { | |
padding: 2rem 1rem; | |
} | |
.btn { | |
width: 100%; | |
margin-bottom: 0.5rem; | |
} | |
.navbar-nav .nav-link { | |
text-align: center; | |
margin: 0.25rem 0; | |
} | |
} | |
/* Scrollbar */ | |
::-webkit-scrollbar { | |
width: 8px; | |
} | |
::-webkit-scrollbar-track { | |
background: var(--scrollbar-track); | |
} | |
::-webkit-scrollbar-thumb { | |
background: var(--secondary-color); | |
border-radius: 4px; | |
} | |
::-webkit-scrollbar-thumb:hover { | |
background: var(--primary-color); | |
} | |
/* Firefox scrollbar */ | |
* { | |
scrollbar-width: thin; | |
scrollbar-color: var(--secondary-color) var(--scrollbar-track); | |
} | |
/* ResearchMate modal form label and help text color override */ | |
#createProjectModal .form-label, | |
#createProjectModal .form-text { | |
color: #222 ; | |
} | |
#projectDetailsModal .form-label, | |
#projectDetailsModal .form-text, | |
#projectDetailsModal label, | |
#projectDetailsModal h5, | |
#projectDetailsModal h6, | |
#projectDetailsModal p, | |
#projectDetailsModal span { | |
color: #222 ; | |
} | |
/* Make all text in the register modal body black */ | |
#registerModal .modal-body, | |
#registerModal .modal-body label, | |
#registerModal .modal-body input, | |
#registerModal .modal-body .form-label { | |
color: #000 ; | |
} | |