freesched/public/styles.css
2025-02-21 15:20:12 -05:00

234 lines
4.3 KiB
CSS

/* Custom styles to modernize and align with Calendly-inspired design */
:root {
--primary-color: #007bff; /* Blue from Calendly */
--secondary-color: #6c757d; /* Gray for muted elements */
--light-bg: #f8f9fa; /* Light background for modern look */
--shadow-color: rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif; /* Matches Calendly font */
}
.container-fluid {
max-width: 1000px;
margin: 20px auto;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2px 4px var(--shadow-color);
overflow: hidden;
}
.sidebar {
width: 30%;
padding: 20px;
border-right: 1px solid #e1e8ed;
text-align: center;
background-color: #fff;
}
.profile-pic {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 10px;
border: 2px solid #fff;
box-shadow: 0 2px 4px var(--shadow-color);
}
.sidebar h2 {
font-size: 1.25rem;
color: #333;
margin-bottom: 5px;
font-weight: 600;
}
.sidebar h3 {
font-size: 1rem;
color: #666;
margin-bottom: 5px;
}
.duration {
font-size: 0.875rem;
color: #666;
}
.main-content {
width: 70%;
padding: 20px;
}
.calendar-header h1 {
font-size: 1.5rem;
color: #333;
font-weight: 700;
margin-bottom: 10px;
}
.month-nav {
display: flex;
justify-content: space-between;
font-size: 1rem;
color: #333;
padding: 0.5rem 0;
border-bottom: 1px solid #e1e8ed;
}
.month-nav button {
color: var(--secondary-color);
transition: color 0.3s ease;
}
.month-nav button:hover {
color: var(--primary-color);
}
.days-of-week, .dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
text-align: center;
}
.days-of-week span {
font-weight: bold;
color: #666;
padding: 5px;
}
.dates .date-item {
padding: 10px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.dates .date-item.disabled {
cursor: not-allowed;
color: var(--secondary-color);
opacity: 0.5;
}
.dates .date-item:hover {
background-color: #f0f8ff;
transform: scale(1.05);
}
.dates .date-item.available {
background-color: #e9f2ff;
border: 2px solid var(--primary-color);
font-weight: 600;
}
.dates .date-item.selected {
background-color: #0d6efd !important;
color: #fff !important;
border-radius: 6px;
font-weight: 600;
border: none !important;
}
.dates .date-item.current {
background-color: #e9f2ff;
border: 2px solid var(--primary-color);
font-weight: 600;
}
.time-slot {
font-size: 1rem;
padding: 0.75rem 1.5rem;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.time-slot.available {
background-color: #e9f2ff;
border-color: var(--primary-color);
color: var(--primary-color);
}
.time-slots .text-muted {
color: #6c757d; /* Muted text color, matching Calendly */
font-size: 1rem; /* Slightly larger font, e.g., 20px instead of 16px */
font-weight: bold; /* Bold text */
padding: 1rem 0;
text-align: center;
}
.time-slot.available:hover, .time-slot:hover {
background-color: var(--primary-color);
color: #fff;
transform: scale(1.05);
}
.timezone {
font-size: 0.875rem;
color: #666;
}
.powered-by {
font-size: 0.75rem;
color: #666;
text-align: right;
position: relative;
margin-top: 2rem;
opacity: 0.8;
transition: opacity 0.3s ease;
z-index: 1;
}
.powered-by a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.powered-by:hover {
opacity: 1;
}
/* Admin-specific styles */
#admin .calendar {
margin-bottom: 20px;
}
#admin .form-control, #admin .form-select {
border-radius: 6px;
}
#admin .btn-primary, #admin .btn-danger {
border-radius: 4px;
}
#availabilityList .list-group-item {
border-radius: 4px;
margin-bottom: 5px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.container-fluid {
margin: 10px;
border-radius: 6px;
}
.sidebar, .main-content {
width: 100%;
}
.sidebar {
border-right: none;
border-bottom: 1px solid #e1e8ed;
}
#admin .row {
flex-direction: column;
}
#admin .col-md-6 {
width: 100%;
}
}