1f86ea9f71
- Add 4 new dark themes: Midnight, Charcoal, Nord, Dracula with complete CSS variable definitions - Create Apple Calendar style with glassmorphism effects and theme-aware design - Fix Google Calendar style to be theme-aware instead of using hardcoded colors - Replace hardcoded colors in modal CSS with theme variables for consistent theming - Add data-style attribute support to document root for style-specific CSS selectors - Update sidebar dropdowns to include all new theme and style options 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
691 lines
19 KiB
CSS
691 lines
19 KiB
CSS
/* Apple Calendar-inspired styles */
|
|
|
|
/* Override CSS Variables for Apple Calendar Style */
|
|
:root {
|
|
/* Apple-style spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 12px;
|
|
--spacing-lg: 16px;
|
|
--spacing-xl: 24px;
|
|
|
|
/* Apple-style borders and radius */
|
|
--border-radius-small: 6px;
|
|
--border-radius-medium: 10px;
|
|
--border-radius-large: 16px;
|
|
|
|
/* Apple-style shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
--shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
|
|
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
|
|
}
|
|
|
|
/* Theme-aware Apple style colors - use theme colors but with Apple aesthetic */
|
|
[data-style="apple"] {
|
|
/* Use theme background and text colors */
|
|
--apple-bg-primary: var(--background-secondary);
|
|
--apple-bg-secondary: var(--background-primary);
|
|
--apple-text-primary: var(--text-primary);
|
|
--apple-text-secondary: var(--text-secondary);
|
|
--apple-text-tertiary: var(--text-secondary);
|
|
--apple-text-inverse: var(--text-inverse);
|
|
--apple-border-primary: var(--border-primary);
|
|
--apple-border-secondary: var(--border-secondary);
|
|
--apple-accent: var(--primary-color);
|
|
--apple-hover-bg: var(--background-tertiary);
|
|
--apple-today-accent: var(--primary-color);
|
|
|
|
/* Apple font family */
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
/* Theme-specific Apple style adjustments */
|
|
[data-style="apple"][data-theme="default"] {
|
|
--apple-bg-tertiary: rgba(248, 249, 250, 0.8);
|
|
--apple-bg-sidebar: rgba(246, 246, 246, 0.7);
|
|
--apple-accent-bg: rgba(102, 126, 234, 0.1);
|
|
--apple-today-bg: rgba(102, 126, 234, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="ocean"] {
|
|
--apple-bg-tertiary: rgba(224, 247, 250, 0.8);
|
|
--apple-bg-sidebar: rgba(224, 247, 250, 0.7);
|
|
--apple-accent-bg: rgba(0, 105, 148, 0.1);
|
|
--apple-today-bg: rgba(0, 105, 148, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="forest"] {
|
|
--apple-bg-tertiary: rgba(232, 245, 232, 0.8);
|
|
--apple-bg-sidebar: rgba(232, 245, 232, 0.7);
|
|
--apple-accent-bg: rgba(6, 95, 70, 0.1);
|
|
--apple-today-bg: rgba(6, 95, 70, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="sunset"] {
|
|
--apple-bg-tertiary: rgba(255, 243, 224, 0.8);
|
|
--apple-bg-sidebar: rgba(255, 243, 224, 0.7);
|
|
--apple-accent-bg: rgba(234, 88, 12, 0.1);
|
|
--apple-today-bg: rgba(234, 88, 12, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="purple"] {
|
|
--apple-bg-tertiary: rgba(243, 229, 245, 0.8);
|
|
--apple-bg-sidebar: rgba(243, 229, 245, 0.7);
|
|
--apple-accent-bg: rgba(124, 58, 237, 0.1);
|
|
--apple-today-bg: rgba(124, 58, 237, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="dark"] {
|
|
--apple-bg-tertiary: rgba(31, 41, 55, 0.9);
|
|
--apple-bg-sidebar: rgba(44, 44, 46, 0.8);
|
|
--apple-accent-bg: rgba(55, 65, 81, 0.3);
|
|
--apple-today-bg: rgba(55, 65, 81, 0.4);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="rose"] {
|
|
--apple-bg-tertiary: rgba(252, 228, 236, 0.8);
|
|
--apple-bg-sidebar: rgba(252, 228, 236, 0.7);
|
|
--apple-accent-bg: rgba(225, 29, 72, 0.1);
|
|
--apple-today-bg: rgba(225, 29, 72, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="mint"] {
|
|
--apple-bg-tertiary: rgba(224, 242, 241, 0.8);
|
|
--apple-bg-sidebar: rgba(224, 242, 241, 0.7);
|
|
--apple-accent-bg: rgba(16, 185, 129, 0.1);
|
|
--apple-today-bg: rgba(16, 185, 129, 0.15);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="midnight"] {
|
|
--apple-bg-tertiary: rgba(21, 27, 38, 0.9);
|
|
--apple-bg-sidebar: rgba(21, 27, 38, 0.8);
|
|
--apple-accent-bg: rgba(76, 154, 255, 0.15);
|
|
--apple-today-bg: rgba(76, 154, 255, 0.2);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="charcoal"] {
|
|
--apple-bg-tertiary: rgba(26, 26, 26, 0.9);
|
|
--apple-bg-sidebar: rgba(26, 26, 26, 0.8);
|
|
--apple-accent-bg: rgba(74, 222, 128, 0.15);
|
|
--apple-today-bg: rgba(74, 222, 128, 0.2);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="nord"] {
|
|
--apple-bg-tertiary: rgba(59, 66, 82, 0.9);
|
|
--apple-bg-sidebar: rgba(59, 66, 82, 0.8);
|
|
--apple-accent-bg: rgba(136, 192, 208, 0.15);
|
|
--apple-today-bg: rgba(136, 192, 208, 0.2);
|
|
}
|
|
|
|
[data-style="apple"][data-theme="dracula"] {
|
|
--apple-bg-tertiary: rgba(68, 71, 90, 0.9);
|
|
--apple-bg-sidebar: rgba(68, 71, 90, 0.8);
|
|
--apple-accent-bg: rgba(189, 147, 249, 0.15);
|
|
--apple-today-bg: rgba(189, 147, 249, 0.2);
|
|
}
|
|
|
|
/* Apple-style body and base styles */
|
|
[data-style="apple"] body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
background: var(--apple-bg-secondary);
|
|
color: var(--apple-text-primary);
|
|
font-weight: 400;
|
|
line-height: 1.47;
|
|
letter-spacing: -0.022em;
|
|
}
|
|
|
|
/* Apple-style sidebar with glassmorphism */
|
|
[data-style="apple"] .app-sidebar {
|
|
background: var(--apple-bg-sidebar);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-right: 1px solid var(--apple-border-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-style="apple"] .sidebar-header {
|
|
background: transparent;
|
|
border-bottom: 1px solid var(--apple-border-primary);
|
|
padding: 20px 16px 16px 16px;
|
|
}
|
|
|
|
[data-style="apple"] .sidebar-header h1 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--apple-text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
letter-spacing: -0.04em;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
[data-style="apple"] .user-info {
|
|
color: var(--apple-text-primary);
|
|
font-size: 15px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
[data-style="apple"] .user-info .username {
|
|
font-weight: 600;
|
|
color: var(--apple-text-primary);
|
|
font-size: 16px;
|
|
}
|
|
|
|
[data-style="apple"] .user-info .server-url {
|
|
color: var(--apple-text-secondary);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Apple-style buttons */
|
|
[data-style="apple"] .create-calendar-button {
|
|
background: var(--apple-accent);
|
|
color: var(--apple-text-inverse);
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 10px 16px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all 0.2s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
[data-style="apple"] .create-calendar-button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
background: var(--apple-accent);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
[data-style="apple"] .logout-button {
|
|
background: var(--apple-bg-primary);
|
|
color: var(--apple-accent);
|
|
border: 1px solid var(--apple-border-primary);
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
[data-style="apple"] .logout-button:hover {
|
|
background: var(--apple-hover-bg);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Apple-style navigation */
|
|
[data-style="apple"] .sidebar-nav .nav-link {
|
|
color: var(--apple-text-primary);
|
|
text-decoration: none;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
display: block;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
}
|
|
|
|
[data-style="apple"] .sidebar-nav .nav-link:hover {
|
|
color: var(--apple-accent);
|
|
background: var(--apple-hover-bg);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Apple-style calendar list */
|
|
[data-style="apple"] .calendar-list h3 {
|
|
color: var(--apple-text-primary);
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.024em;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
[data-style="apple"] .calendar-list .calendar-name {
|
|
color: var(--apple-text-primary);
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
[data-style="apple"] .no-calendars {
|
|
color: var(--apple-text-secondary);
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Apple-style form elements */
|
|
[data-style="apple"] .sidebar-footer label,
|
|
[data-style="apple"] .view-selector label,
|
|
[data-style="apple"] .theme-selector label,
|
|
[data-style="apple"] .style-selector label {
|
|
color: var(--apple-text-primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
[data-style="apple"] .view-selector-dropdown,
|
|
[data-style="apple"] .theme-selector-dropdown,
|
|
[data-style="apple"] .style-selector-dropdown {
|
|
border: 1px solid var(--apple-border-primary);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
font-size: 15px;
|
|
color: var(--apple-text-primary);
|
|
background: var(--apple-bg-primary);
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
[data-style="apple"] .view-selector-dropdown:focus,
|
|
[data-style="apple"] .theme-selector-dropdown:focus,
|
|
[data-style="apple"] .style-selector-dropdown:focus {
|
|
outline: none;
|
|
border-color: var(--apple-accent);
|
|
box-shadow: 0 0 0 3px var(--apple-accent-bg);
|
|
}
|
|
|
|
/* Apple-style calendar list items */
|
|
[data-style="apple"] .calendar-list .calendar-item {
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
[data-style="apple"] .calendar-list .calendar-item:hover {
|
|
background-color: var(--apple-hover-bg);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Apple-style main content area */
|
|
[data-style="apple"] .app-main {
|
|
background: var(--apple-bg-secondary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
color: var(--apple-text-primary);
|
|
}
|
|
|
|
/* Apple-style calendar header */
|
|
[data-style="apple"] .calendar-header {
|
|
background: var(--apple-bg-primary);
|
|
color: var(--apple-text-primary);
|
|
padding: 20px 24px;
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-style="apple"] .calendar-header h2,
|
|
[data-style="apple"] .calendar-header h3,
|
|
[data-style="apple"] .month-header,
|
|
[data-style="apple"] .week-header {
|
|
color: var(--apple-text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
/* Apple-style headings */
|
|
[data-style="apple"] h1,
|
|
[data-style="apple"] h2,
|
|
[data-style="apple"] h3,
|
|
[data-style="apple"] .month-title,
|
|
[data-style="apple"] .calendar-title,
|
|
[data-style="apple"] .current-month,
|
|
[data-style="apple"] .month-year,
|
|
[data-style="apple"] .header-title {
|
|
color: var(--apple-text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
/* Apple-style navigation buttons */
|
|
[data-style="apple"] button,
|
|
[data-style="apple"] .nav-button,
|
|
[data-style="apple"] .calendar-nav-button,
|
|
[data-style="apple"] .prev-button,
|
|
[data-style="apple"] .next-button,
|
|
[data-style="apple"] .arrow-button {
|
|
color: var(--apple-text-primary);
|
|
background: var(--apple-bg-primary);
|
|
border: 1px solid var(--apple-border-primary);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
[data-style="apple"] button:hover,
|
|
[data-style="apple"] .nav-button:hover,
|
|
[data-style="apple"] .calendar-nav-button:hover,
|
|
[data-style="apple"] .prev-button:hover,
|
|
[data-style="apple"] .next-button:hover,
|
|
[data-style="apple"] .arrow-button:hover {
|
|
background: var(--apple-accent-bg);
|
|
color: var(--apple-accent);
|
|
border-color: var(--apple-accent);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Apple-style calendar controls */
|
|
[data-style="apple"] .calendar-controls,
|
|
[data-style="apple"] .current-date,
|
|
[data-style="apple"] .date-display {
|
|
color: var(--apple-text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Apple-style calendar grid */
|
|
[data-style="apple"] .calendar-grid,
|
|
[data-style="apple"] .calendar-container {
|
|
border: 1px solid var(--apple-border-primary);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: var(--apple-bg-primary);
|
|
box-shadow: var(--shadow-lg);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
margin: 16px;
|
|
}
|
|
|
|
[data-style="apple"] .month-header,
|
|
[data-style="apple"] .week-header {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--apple-text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
/* Apple-style calendar cells */
|
|
[data-style="apple"] .calendar-day,
|
|
[data-style="apple"] .day-cell {
|
|
border: 1px solid var(--apple-border-secondary);
|
|
background: var(--apple-bg-primary);
|
|
transition: all 0.3s ease;
|
|
padding: 12px;
|
|
min-height: 120px;
|
|
position: relative;
|
|
}
|
|
|
|
[data-style="apple"] .calendar-day:hover,
|
|
[data-style="apple"] .day-cell:hover {
|
|
background: var(--apple-hover-bg);
|
|
transform: scale(1.02);
|
|
box-shadow: var(--shadow-sm);
|
|
z-index: 10;
|
|
}
|
|
|
|
[data-style="apple"] .calendar-day.today,
|
|
[data-style="apple"] .day-cell.today {
|
|
background: var(--apple-today-bg);
|
|
border-color: var(--apple-today-accent);
|
|
position: relative;
|
|
}
|
|
|
|
[data-style="apple"] .calendar-day.today::before,
|
|
[data-style="apple"] .day-cell.today::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--apple-today-accent);
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
[data-style="apple"] .calendar-day.other-month,
|
|
[data-style="apple"] .day-cell.other-month {
|
|
background: var(--apple-bg-secondary);
|
|
color: var(--apple-text-secondary);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
[data-style="apple"] .day-number,
|
|
[data-style="apple"] .date-number {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--apple-text-primary);
|
|
margin-bottom: 6px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
/* Apple-style day headers */
|
|
[data-style="apple"] .day-header,
|
|
[data-style="apple"] .weekday-header {
|
|
background: var(--apple-bg-secondary);
|
|
color: var(--apple-text-secondary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
padding: 12px;
|
|
border-bottom: 1px solid var(--apple-border-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
/* Apple Calendar-style events */
|
|
[data-style="apple"] .event {
|
|
border-radius: 6px;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
margin: 2px 0;
|
|
cursor: pointer;
|
|
border: none;
|
|
color: white;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all 0.2s ease;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
line-height: 1.3;
|
|
position: relative;
|
|
}
|
|
|
|
[data-style="apple"] .event::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
|
|
[data-style="apple"] .event * {
|
|
color: white;
|
|
font-family: inherit;
|
|
}
|
|
|
|
[data-style="apple"] .event:hover {
|
|
transform: translateY(-1px) scale(1.02);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* All-day events styling */
|
|
[data-style="apple"] .event.all-day {
|
|
border-radius: 16px;
|
|
padding: 6px 12px;
|
|
font-weight: 600;
|
|
margin: 3px 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
[data-style="apple"] .event.all-day::before {
|
|
display: none;
|
|
}
|
|
|
|
/* Event time display */
|
|
[data-style="apple"] .event-time {
|
|
opacity: 0.9;
|
|
font-size: 11px;
|
|
margin-right: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Calendar table structure */
|
|
[data-style="apple"] .calendar-table,
|
|
[data-style="apple"] table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
background: var(--apple-bg-primary);
|
|
}
|
|
|
|
[data-style="apple"] .calendar-table td,
|
|
[data-style="apple"] table td {
|
|
vertical-align: top;
|
|
border: 1px solid var(--apple-border-secondary);
|
|
background: var(--apple-bg-primary);
|
|
}
|
|
|
|
/* Apple-style view toggle */
|
|
[data-style="apple"] .view-toggle {
|
|
display: flex;
|
|
gap: 0;
|
|
background: var(--apple-bg-primary);
|
|
border-radius: 10px;
|
|
padding: 2px;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--apple-border-primary);
|
|
}
|
|
|
|
[data-style="apple"] .view-toggle button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--apple-text-secondary);
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
[data-style="apple"] .view-toggle button.active {
|
|
background: var(--apple-accent);
|
|
color: var(--apple-text-inverse);
|
|
box-shadow: var(--shadow-sm);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Apple-style today button */
|
|
[data-style="apple"] .today-button {
|
|
background: var(--apple-accent);
|
|
border: none;
|
|
color: var(--apple-text-inverse);
|
|
padding: 10px 16px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-sm);
|
|
font-family: inherit;
|
|
}
|
|
|
|
[data-style="apple"] .today-button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* Apple-style modals */
|
|
[data-style="apple"] .modal-overlay {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
[data-style="apple"] .modal-content {
|
|
background: var(--apple-bg-primary);
|
|
border-radius: 16px;
|
|
box-shadow: var(--shadow-lg);
|
|
border: 1px solid var(--apple-border-primary);
|
|
color: var(--apple-text-primary);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
[data-style="apple"] .modal h2 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--apple-text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
/* Apple-style form inputs */
|
|
[data-style="apple"] input[type="text"],
|
|
[data-style="apple"] input[type="email"],
|
|
[data-style="apple"] input[type="password"],
|
|
[data-style="apple"] input[type="url"],
|
|
[data-style="apple"] input[type="date"],
|
|
[data-style="apple"] input[type="time"],
|
|
[data-style="apple"] textarea,
|
|
[data-style="apple"] select {
|
|
border: 1px solid var(--apple-border-primary);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
font-size: 15px;
|
|
color: var(--apple-text-primary);
|
|
background: var(--apple-bg-primary);
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
[data-style="apple"] input:focus,
|
|
[data-style="apple"] textarea:focus,
|
|
[data-style="apple"] select:focus {
|
|
outline: none;
|
|
border-color: var(--apple-accent);
|
|
box-shadow: 0 0 0 3px var(--apple-accent-bg);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Apple-style labels */
|
|
[data-style="apple"] label {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--apple-text-primary);
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Smooth animations and transitions */
|
|
[data-style="apple"] * {
|
|
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
/* Custom scrollbar for Apple style */
|
|
[data-style="apple"] ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
[data-style="apple"] ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-style="apple"] ::-webkit-scrollbar-thumb {
|
|
background: var(--apple-text-secondary);
|
|
border-radius: 4px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
[data-style="apple"] ::-webkit-scrollbar-thumb:hover {
|
|
opacity: 0.6;
|
|
} |