@uplink-protocol/calendar-controller/examples/date-picker/css/calendar-theme.css

Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library

/* Calendar theme styles matching the screenshot design */

/* Calendar cells */
.calendar-cell {
    border-radius: 50%;
    font-size: 14px;
    color: #333;
}

/* Today indicator - blue outline */
.calendar-cell[aria-current="date"] {
    border: 1px solid #3b82f6;
}

/* Selected date - blue fill */
.calendar-cell[aria-selected="true"],
.calendar-cell.bg-primary {
    background-color: #3b82f6 !important;
    color: white !important;
}

/* Day name headers */
#weekdays div, #firstMonthWeekdays div, #secondMonthWeekdays div {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
}

/* Current month and year display */
#currentMonthYear, #firstMonthTitle, #secondMonthTitle {
    font-size: 16px;
    font-weight: 500;
    color: #111;
}

/* Month/Year selector dropdown */
#monthYearDropdown {
    background-color: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Calendar popup */
.calendar-popup {
    background-color: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Other month days */
.calendar-cell.text-gray-400 {
    color: #d1d5db;
}

/* Year selector styles */
#monthYearSelector {
    cursor: pointer;
}

#viewModeMonths, 
#viewModeYears {
    border-radius: 4px;
    transition: all 0.2s ease;
}

#viewModeMonths.bg-primary, 
#viewModeYears.bg-primary {
    background-color: #3b82f6;
    color: white;
}

/* Today and Close buttons */
#todayButton {
    color: #3b82f6;
}

#todayButton:hover {
    background-color: #eff6ff;
}

#closeButton {
    color: #6b7280;
}

#closeButton:hover {
    background-color: #f3f4f6;
}

/* Input field styling */
#dateInput {
    color: #111;
    border-color: #d1d5db;
}

#dateInput:focus {
    border-color: #3b82f6;
}

/* Calendar trigger button */
#calendarTrigger {
    color: #6b7280;
}

#calendarTrigger:hover {
    color: #3b82f6;
}

/* Sidebar styling */
#datepickerSidebar {
    background-color: #f9fafb;
}

#datepickerSidebar h3 {
    color: #4b5563;
    font-size: 11px;
}

#datepickerSidebar button {
    transition: all 0.15s ease;
}

#datepickerSidebar button:hover {
    background-color: #f3f4f6;
}

#datepickerSidebar button.bg-primary {
    color: white;
}

/* View mode buttons */
#singleMonthMode, #doubleMonthMode {
    transition: all 0.2s ease;
}

/* Month and Year View styling */
#monthsGrid button, #yearsGrid button {
    transition: all 0.15s ease;
}

#monthsGrid button:hover, #yearsGrid button:hover {
    background-color: #f3f4f6;
    transform: translateY(-2px);
}

#monthsGrid button.bg-primary, #yearsGrid button.bg-primary {
    color: white;
}

/* Mobile-specific styles */
@media (max-width: 640px) {
    .calendar-popup {
        border-radius: 1rem 1rem 0 0;
    }
    
    #datepickerSidebar {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Make date cells more touch-friendly */
    .calendar-cell {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Adjust view transitions for mobile */
    #singleMonthView, #doubleMonthView, #monthsView, #yearsView {
        transition: opacity 0.2s ease;
    }
    
    /* Make calendar popup bottom sheet style */
    .calendar-popup.mobile-popup {
        box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* Optimized footer design for mobile */
    .calendar-footer {
        border-top-color: #e5e7eb;
        background-color: #fff;
    }
}

/* High contrast mode adjustments */
@media (forced-colors: active) {
    .calendar-cell.bg-primary {
        border: 2px solid ButtonText !important;
    }
    
    #datepickerSidebar button.bg-primary {
        border: 1px solid ButtonText;
    }
}