connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance styling system with new themes and fix modal theming consistency

Browse Source 
- 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>
This commit is contained in:
Connor Johnstone
2025-09-21 23:36:47 -04:00
parent ce9914e388
commit 1f86ea9f71
6 changed files with 1511 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -8,6 +8,7 @@
<link data-trunk rel="css" href="styles.css"> <link data-trunk rel="css" href="styles.css">
<link data-trunk rel="css" href="print-preview.css"> <link data-trunk rel="css" href="print-preview.css">
<link data-trunk rel="copy-file" href="styles/google.css"> <link data-trunk rel="copy-file" href="styles/google.css">
<link data-trunk rel="copy-file" href="styles/apple.css">
<link data-trunk rel="copy-file" href="service-worker.js"> <link data-trunk rel="copy-file" href="service-worker.js">
<link data-trunk rel="icon" href="favicon.ico"> <link data-trunk rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

10
frontend/src/app.rs
View File

@@ -497,6 +497,11 @@ pub fn App() -> Html {
// Hot-swap stylesheet // Hot-swap stylesheet
if let Some(window) = web_sys::window() { if let Some(window) = web_sys::window() {
if let Some(document) = window.document() { if let Some(document) = window.document() {
// Set data-style attribute on document root
if let Some(root) = document.document_element() {
let _ = root.set_attribute("data-style", new_style.value());
}
// Remove existing style link if it exists // Remove existing style link if it exists
if let Some(existing_link) = document.get_element_by_id("dynamic-style") { if let Some(existing_link) = document.get_element_by_id("dynamic-style") {
existing_link.remove(); existing_link.remove();
@@ -544,6 +549,11 @@ pub fn App() -> Html {
let style = (*current_style).clone(); let style = (*current_style).clone();
if let Some(window) = web_sys::window() { if let Some(window) = web_sys::window() {
if let Some(document) = window.document() { if let Some(document) = window.document() {
// Set data-style attribute on document root
if let Some(root) = document.document_element() {
let _ = root.set_attribute("data-style", style.value());
}
// Create and append stylesheet link for initial style only if it has a path // Create and append stylesheet link for initial style only if it has a path
if let Some(stylesheet_path) = style.stylesheet_path() { if let Some(stylesheet_path) = style.stylesheet_path() {
if let Ok(link) = document.create_element("link") { if let Ok(link) = document.create_element("link") {

21
frontend/src/components/sidebar.rs
View File

@@ -20,12 +20,17 @@ pub enum Theme {
Dark, Dark,
Rose, Rose,
Mint, Mint,
Midnight,
Charcoal,
Nord,
Dracula,
} }
#[derive(Clone, PartialEq)] #[derive(Clone, PartialEq)]
pub enum Style { pub enum Style {
Default, Default,
Google, Google,
Apple,
} }
impl Theme { impl Theme {
@@ -39,6 +44,10 @@ impl Theme {
Theme::Dark => "dark", Theme::Dark => "dark",
Theme::Rose => "rose", Theme::Rose => "rose",
Theme::Mint => "mint", Theme::Mint => "mint",
Theme::Midnight => "midnight",
Theme::Charcoal => "charcoal",
Theme::Nord => "nord",
Theme::Dracula => "dracula",
} }
} }
@@ -51,6 +60,10 @@ impl Theme {
"dark" => Theme::Dark, "dark" => Theme::Dark,
"rose" => Theme::Rose, "rose" => Theme::Rose,
"mint" => Theme::Mint, "mint" => Theme::Mint,
"midnight" => Theme::Midnight,
"charcoal" => Theme::Charcoal,
"nord" => Theme::Nord,
"dracula" => Theme::Dracula,
_ => Theme::Default, _ => Theme::Default,
} }
} }
@@ -61,12 +74,14 @@ impl Style {
match self { match self {
Style::Default => "default", Style::Default => "default",
Style::Google => "google", Style::Google => "google",
Style::Apple => "apple",
} }
} }
pub fn from_value(value: &str) -> Self { pub fn from_value(value: &str) -> Self {
match value { match value {
"google" => Style::Google, "google" => Style::Google,
"apple" => Style::Apple,
_ => Style::Default, _ => Style::Default,
} }
} }
@@ -76,6 +91,7 @@ impl Style {
match self { match self {
Style::Default => None, // No additional stylesheet needed - uses base styles.css Style::Default => None, // No additional stylesheet needed - uses base styles.css
Style::Google => Some("google.css"), // Trunk copies to root level Style::Google => Some("google.css"), // Trunk copies to root level
Style::Apple => Some("apple.css"), // Trunk copies to root level
} }
} }
} }
@@ -426,6 +442,10 @@ pub fn sidebar(props: &SidebarProps) -> Html {
<option value="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"Dark"}</option> <option value="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"Dark"}</option>
<option value="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</option> <option value="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</option>
<option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option> <option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option>
<option value="midnight" selected={matches!(props.current_theme, Theme::Midnight)}>{"Midnight"}</option>
<option value="charcoal" selected={matches!(props.current_theme, Theme::Charcoal)}>{"Charcoal"}</option>
<option value="nord" selected={matches!(props.current_theme, Theme::Nord)}>{"Nord"}</option>
<option value="dracula" selected={matches!(props.current_theme, Theme::Dracula)}>{"Dracula"}</option>
</select> </select>
</div> </div>
@@ -433,6 +453,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
<select class="style-selector-dropdown" onchange={on_style_change}> <select class="style-selector-dropdown" onchange={on_style_change}>
<option value="default" selected={matches!(props.current_style, Style::Default)}>{"Default"}</option> <option value="default" selected={matches!(props.current_style, Style::Default)}>{"Default"}</option>
<option value="google" selected={matches!(props.current_style, Style::Google)}>{"Google Calendar"}</option> <option value="google" selected={matches!(props.current_style, Style::Google)}>{"Google Calendar"}</option>
<option value="apple" selected={matches!(props.current_style, Style::Apple)}>{"Apple Calendar"}</option>
</select> </select>
</div> </div>

499
frontend/styles.css
View File

@@ -196,6 +196,26 @@ input, select, textarea, button {
[data-theme="mint"] { [data-theme="mint"] {
--primary-color: #10b981; --primary-color: #10b981;
--primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%); --primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
[data-theme="midnight"] {
--primary-color: #4c9aff;
--primary-gradient: linear-gradient(135deg, #0f1419 0%, #151b26 100%);
}
[data-theme="charcoal"] {
--primary-color: #4ade80;
--primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
[data-theme="nord"] {
--primary-color: #88c0d0;
--primary-gradient: linear-gradient(135deg, #2e3440 0%, #3b4252 100%);
}
[data-theme="dracula"] {
--primary-color: #bd93f9;
--primary-gradient: linear-gradient(135deg, #282a36 0%, #44475a 100%);
}* { }* {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -469,13 +489,13 @@ body {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: 500; font-weight: 500;
color: #555; color: var(--text-secondary);
} }
.form-group input { .form-group input {
width: 100%; width: 100%;
padding: var(--control-padding); padding: var(--control-padding);
border: 1px solid #ddd; border: 1px solid var(--input-border);
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
transition: border-color 0.2s; transition: border-color 0.2s;
@@ -483,12 +503,12 @@ body {
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: #667eea; border-color: var(--input-border-focus);
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
} }
.form-group input:disabled { .form-group input:disabled {
background-color: #f5f5f5; background-color: var(--background-tertiary);
cursor: not-allowed; cursor: not-allowed;
} }
@@ -594,8 +614,8 @@ body {
} }
.error-message { .error-message {
background-color: #f8d7da; background-color: var(--error-color);
color: #721c24; color: var(--text-inverse);
padding: var(--control-padding); padding: var(--control-padding);
border-radius: 4px; border-radius: 4px;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -1384,7 +1404,7 @@ body {
.calendar-management-modal .modal-header { .calendar-management-modal .modal-header {
padding: 2rem 2.5rem 0; padding: 2rem 2.5rem 0;
border-bottom: none; border-bottom: none;
background: white; background: var(--modal-header-background);
} }
.calendar-management-modal .modal-body { .calendar-management-modal .modal-body {
@@ -1425,9 +1445,9 @@ body {
} }
.tab-button.active { .tab-button.active {
background: white; background: var(--modal-background);
color: #2563eb; color: var(--primary-color);
box-shadow: inset 0 -2px 0 #2563eb, box-shadow: inset 0 -2px 0 var(--primary-color),
0 1px 2px rgba(0, 0, 0, 0.05); 0 1px 2px rgba(0, 0, 0, 0.05);
} }
@@ -1666,7 +1686,8 @@ body {
} }
.modal-content { .modal-content {
background: white; background: var(--modal-background);
color: var(--modal-text);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12),
0 8px 16px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08),
@@ -1695,13 +1716,13 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 2rem 2.5rem; padding: 2rem 2.5rem;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--modal-header-border);
background: #fafafa; background: var(--modal-header-background);
} }
.modal-header h3 { .modal-header h3 {
margin: 0; margin: 0;
color: #333; color: var(--modal-text);
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
} }
@@ -1710,7 +1731,7 @@ body {
background: none; background: none;
border: none; border: none;
font-size: 1.8rem; font-size: 1.8rem;
color: #999; color: var(--text-secondary);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 30px; width: 30px;
@@ -1724,8 +1745,8 @@ body {
} }
.modal-close:hover { .modal-close:hover {
background: #f8f9fa; background: var(--background-tertiary);
color: #666; color: var(--text-primary);
transform: scale(1.1); transform: scale(1.1);
} }
@@ -1742,7 +1763,7 @@ body {
} }
.event-detail strong { .event-detail strong {
color: #555; color: var(--text-secondary);
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
text-transform: uppercase; text-transform: uppercase;
@@ -1750,7 +1771,7 @@ body {
} }
.event-detail span { .event-detail span {
color: #333; color: var(--text-primary);
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
word-break: break-word; word-break: break-word;
@@ -1839,7 +1860,7 @@ body {
} }
.create-calendar-modal { .create-calendar-modal {
background: white; background: var(--modal-background);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px; max-width: 500px;
@@ -1865,12 +1886,12 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 2rem 2rem 1rem; padding: 2rem 2rem 1rem;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid var(--modal-header-border);
} }
.create-calendar-modal .modal-header h2 { .create-calendar-modal .modal-header h2 {
margin: 0; margin: 0;
color: #495057; color: var(--modal-text);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
} }
@@ -1879,7 +1900,7 @@ body {
background: none; background: none;
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
color: #6c757d; color: var(--text-secondary);
cursor: pointer; cursor: pointer;
padding: 0.25rem; padding: 0.25rem;
line-height: 1; line-height: 1;
@@ -1888,8 +1909,8 @@ body {
} }
.close-button:hover { .close-button:hover {
color: #495057; color: var(--text-primary);
background: #f8f9fa; background: var(--background-tertiary);
} }
.create-calendar-modal .modal-body { .create-calendar-modal .modal-body {
@@ -1903,7 +1924,7 @@ body {
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
color: #374151; color: var(--text-primary);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
} }
@@ -1912,9 +1933,11 @@ body {
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 1px solid #d1d5db; border: 1px solid var(--input-border);
border-radius: 4px; border-radius: 4px;
font-size: 0.95rem; font-size: 0.95rem;
background: var(--input-background);
color: var(--input-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit; font-family: inherit;
line-height: 1.5; line-height: 1.5;
@@ -1923,14 +1946,14 @@ body {
.form-group input:focus, .form-group input:focus,
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: #2563eb; border-color: var(--input-border-focus);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
} }
.form-group input:disabled, .form-group input:disabled,
.form-group textarea:disabled { .form-group textarea:disabled {
background-color: #f8f9fa; background-color: var(--background-tertiary);
color: #6c757d; color: var(--text-secondary);
cursor: not-allowed; cursor: not-allowed;
} }
@@ -1975,7 +1998,7 @@ body {
.color-help-text { .color-help-text {
font-size: 0.8rem; font-size: 0.8rem;
color: #6c757d; color: var(--text-secondary);
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
@@ -1986,7 +2009,7 @@ body {
gap: 1rem; gap: 1rem;
margin-top: 2rem; margin-top: 2rem;
padding-top: 1.5rem; padding-top: 1.5rem;
border-top: 1px solid #e9ecef; border-top: 1px solid var(--border-primary);
} }
.cancel-button, .cancel-button,
@@ -2003,27 +2026,28 @@ body {
} }
.cancel-button { .cancel-button {
background: #f8f9fa; background: var(--background-secondary);
color: #374151; color: var(--text-primary);
border: 1px solid #d1d5db; border: 1px solid var(--border-primary);
} }
.cancel-button:hover:not(:disabled) { .cancel-button:hover:not(:disabled) {
background: #f3f4f6; background: var(--background-tertiary);
color: #111827; color: var(--text-primary);
border-color: #9ca3af; border-color: var(--border-secondary);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
} }
.create-button { .create-button {
background: #2563eb; background: var(--button-primary-bg);
color: white; color: var(--button-primary-text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.create-button:hover:not(:disabled) { .create-button:hover:not(:disabled) {
background: #1d4ed8; background: var(--button-primary-bg);
filter: brightness(0.9);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2), box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2),
0 4px 8px rgba(0, 0, 0, 0.08); 0 4px 8px rgba(0, 0, 0, 0.08);
@@ -2037,20 +2061,21 @@ body {
} }
.error-message { .error-message {
background: #f8d7da; background: var(--error-color);
color: #721c24; color: var(--text-inverse);
padding: var(--control-padding) 1rem; padding: var(--control-padding) 1rem;
border: 1px solid #f5c6cb; border: 1px solid var(--error-color);
border-radius: 6px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.9rem; font-size: 0.9rem;
opacity: 0.9;
} }
/* Context Menu */ /* Context Menu */
.context-menu { .context-menu {
background: white; background: var(--modal-background);
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid var(--border-primary);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
0 4px 8px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08),
@@ -2150,7 +2175,7 @@ body {
.create-event-modal .form-group label { .create-event-modal .form-group label {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #495057; color: var(--text-secondary);
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -2218,20 +2243,20 @@ body {
} }
.btn-secondary { .btn-secondary {
background: #f8f9fa; background: var(--button-secondary-bg);
color: #6c757d; color: var(--button-secondary-text);
border: 1px solid #ced4da; border: 1px solid var(--input-border);
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background: #e9ecef; background: var(--background-tertiary);
color: #495057; color: var(--text-primary);
border-color: #adb5bd; border-color: var(--border-secondary);
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: var(--button-primary-bg);
color: white; color: var(--button-primary-text);
border: 1px solid transparent; border: 1px solid transparent;
} }
@@ -2303,9 +2328,9 @@ body {
} }
.recurring-option { .recurring-option {
background: white; background: var(--input-background);
border: 2px solid #e9ecef; border: 2px solid var(--border-primary);
color: #495057; color: var(--text-secondary);
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-medium);
@@ -2404,7 +2429,7 @@ body {
/* Form Help Text and Advanced Info Styles */ /* Form Help Text and Advanced Info Styles */
.form-help-text { .form-help-text {
font-size: 0.8rem; font-size: 0.8rem;
color: #6c757d; color: var(--text-secondary);
margin-top: 0.25rem; margin-top: 0.25rem;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.4; line-height: 1.4;
@@ -2463,7 +2488,7 @@ body {
} }
[data-theme="dark"] .advanced-info .form-help-text { [data-theme="dark"] .advanced-info .form-help-text {
border-color: #444444; border-color: var(--border-primary);
} }
/* People Tab Styles */ /* People Tab Styles */
@@ -2602,9 +2627,9 @@ body {
} }
.category-tag { .category-tag {
background: white; background: var(--input-background);
border: 1px solid #667eea; border: 1px solid var(--primary-color);
color: #667eea; color: var(--primary-color);
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border-radius: 20px; border-radius: 20px;
font-size: 0.8rem; font-size: 0.8rem;
@@ -2793,9 +2818,9 @@ body {
} }
.location-tag { .location-tag {
background: white; background: var(--input-background);
border: 1px solid #28a745; border: 1px solid var(--success-color);
color: #28a745; color: var(--success-color);
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border-radius: 20px; border-radius: 20px;
font-size: 0.8rem; font-size: 0.8rem;
@@ -2898,9 +2923,9 @@ body {
.type-category { .type-category {
padding: var(--control-padding); padding: var(--control-padding);
background: white; background: var(--input-background);
border-radius: 6px; border-radius: 6px;
border: 1px solid #e9ecef; border: 1px solid var(--border-primary);
} }
.type-category strong { .type-category strong {
@@ -3017,9 +3042,9 @@ body {
.alarm-type { .alarm-type {
padding: var(--control-padding); padding: var(--control-padding);
background: white; background: var(--input-background);
border-radius: 6px; border-radius: 6px;
border: 1px solid #e9ecef; border: 1px solid var(--border-primary);
text-align: center; text-align: center;
} }
@@ -3678,6 +3703,302 @@ body {
background: var(--sidebar-bg); background: var(--sidebar-bg);
} }
/* Midnight Theme - Deep blue-black with blue accents */
[data-theme="midnight"] {
--primary-gradient: linear-gradient(180deg, #0f1419 0%, #151b26 100%);
--primary-bg: #0a0e13;
--primary-text: #e6e6e6;
--sidebar-bg: linear-gradient(180deg, #1a1f2e 0%, #252b3a 100%);
--sidebar-text: #e6e6e6;
--header-bg: linear-gradient(135deg, #1a1f2e 0%, #252b3a 100%);
--header-text: #e6e6e6;
--card-bg: #151b26;
--border-color: #2d3648;
--accent-color: #4c9aff;
--calendar-bg: #151b26;
--calendar-border: #2d3648;
--calendar-border-light: #1f2937;
--calendar-day-bg: #151b26;
--calendar-day-hover: #1f2937;
--calendar-day-prev-next: #0f1419;
--calendar-day-prev-next-text: #4a5568;
--calendar-today-bg: #1e3a8a;
--calendar-today-border: #4c9aff;
--calendar-today-text: #93c5fd;
--calendar-selected-bg: #1f2937;
--calendar-selected-border: #4c9aff;
--calendar-selected-text: #93c5fd;
--calendar-has-events-bg: #1a202c;
--weekday-header-bg: #0f1419;
--weekday-header-text: #a0aec0;
--time-label-bg: #0f1419;
--time-label-text: #a0aec0;
--time-label-border: #2d3648;
--event-colors: #4c9aff, #00d4aa, #ffa726, #ff5722, #ab47bc, #26c6da, #66bb6a, #ef5350, #ec407a, #7e57c2, #42a5f5, #ffca28, #78909c, #8d6e63, #ff7043, #5c6bc0;
/* Dark Theme CSS Variables */
--background-primary: #0a0e13;
--background-secondary: #151b26;
--background-tertiary: #1f2937;
--text-primary: #e6e6e6;
--text-secondary: #a0aec0;
--text-inverse: #0a0e13;
--border-primary: #2d3648;
--border-secondary: #374151;
--border-light: #4a5568;
--modal-background: #151b26;
--modal-text: #e6e6e6;
--modal-header-background: #151b26;
--modal-header-border: #2d3648;
--button-primary-bg: #4c9aff;
--button-primary-text: #ffffff;
--input-background: #1f2937;
--input-border: #374151;
--input-border-focus: #4c9aff;
--input-text: #e6e6e6;
}
[data-theme="midnight"] body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
[data-theme="midnight"] .app-sidebar {
background: var(--sidebar-bg);
}
[data-theme="midnight"] .app-main {
background-color: var(--primary-bg);
}
[data-theme="midnight"] .calendar-day {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--primary-text);
}
/* Charcoal Theme - Pure dark grays with subtle colored accents */
[data-theme="charcoal"] {
--primary-gradient: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
--primary-bg: #0d0d0d;
--primary-text: #f0f0f0;
--sidebar-bg: linear-gradient(180deg, #262626 0%, #333333 100%);
--sidebar-text: #f0f0f0;
--header-bg: linear-gradient(135deg, #262626 0%, #333333 100%);
--header-text: #f0f0f0;
--card-bg: #1a1a1a;
--border-color: #404040;
--accent-color: #4ade80;
--calendar-bg: #1a1a1a;
--calendar-border: #404040;
--calendar-border-light: #262626;
--calendar-day-bg: #1a1a1a;
--calendar-day-hover: #262626;
--calendar-day-prev-next: #0d0d0d;
--calendar-day-prev-next-text: #595959;
--calendar-today-bg: #166534;
--calendar-today-border: #4ade80;
--calendar-today-text: #86efac;
--calendar-selected-bg: #262626;
--calendar-selected-border: #4ade80;
--calendar-selected-text: #86efac;
--calendar-has-events-bg: #1f1f1f;
--weekday-header-bg: #0d0d0d;
--weekday-header-text: #a6a6a6;
--time-label-bg: #0d0d0d;
--time-label-text: #a6a6a6;
--time-label-border: #404040;
--event-colors: #4ade80, #06b6d4, #a855f7, #f59e0b, #ef4444, #ec4899, #8b5cf6, #10b981, #3b82f6, #f97316, #84cc16, #6366f1, #14b8a6, #f43f5e, #64748b, #71717a;
/* Dark Theme CSS Variables */
--background-primary: #0d0d0d;
--background-secondary: #1a1a1a;
--background-tertiary: #262626;
--text-primary: #f0f0f0;
--text-secondary: #a6a6a6;
--text-inverse: #0d0d0d;
--border-primary: #404040;
--border-secondary: #525252;
--border-light: #595959;
--modal-background: #1a1a1a;
--modal-text: #f0f0f0;
--modal-header-background: #1a1a1a;
--modal-header-border: #404040;
--button-primary-bg: #4ade80;
--button-primary-text: #0d0d0d;
--input-background: #262626;
--input-border: #404040;
--input-border-focus: #4ade80;
--input-text: #f0f0f0;
}
[data-theme="charcoal"] body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
[data-theme="charcoal"] .app-sidebar {
background: var(--sidebar-bg);
}
[data-theme="charcoal"] .app-main {
background-color: var(--primary-bg);
}
[data-theme="charcoal"] .calendar-day {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--primary-text);
}
/* Nord Theme - Nordic-inspired dark theme */
[data-theme="nord"] {
--primary-gradient: linear-gradient(180deg, #2e3440 0%, #3b4252 100%);
--primary-bg: #2e3440;
--primary-text: #eceff4;
--sidebar-bg: linear-gradient(180deg, #434c5e 0%, #4c566a 100%);
--sidebar-text: #eceff4;
--header-bg: linear-gradient(135deg, #434c5e 0%, #4c566a 100%);
--header-text: #eceff4;
--card-bg: #3b4252;
--border-color: #4c566a;
--accent-color: #88c0d0;
--calendar-bg: #3b4252;
--calendar-border: #4c566a;
--calendar-border-light: #434c5e;
--calendar-day-bg: #3b4252;
--calendar-day-hover: #434c5e;
--calendar-day-prev-next: #2e3440;
--calendar-day-prev-next-text: #5e81ac;
--calendar-today-bg: #5e81ac;
--calendar-today-border: #88c0d0;
--calendar-today-text: #d8dee9;
--calendar-selected-bg: #434c5e;
--calendar-selected-border: #88c0d0;
--calendar-selected-text: #d8dee9;
--calendar-has-events-bg: #3b4252;
--weekday-header-bg: #2e3440;
--weekday-header-text: #d8dee9;
--time-label-bg: #2e3440;
--time-label-text: #d8dee9;
--time-label-border: #4c566a;
--event-colors: #88c0d0, #81a1c1, #5e81ac, #bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead, #8fbcbb, #5e81ac, #88c0d0, #81a1c1, #bf616a, #d08770, #ebcb8b, #a3be8c;
/* Dark Theme CSS Variables */
--background-primary: #2e3440;
--background-secondary: #3b4252;
--background-tertiary: #434c5e;
--text-primary: #eceff4;
--text-secondary: #d8dee9;
--text-inverse: #2e3440;
--border-primary: #4c566a;
--border-secondary: #5e81ac;
--border-light: #81a1c1;
--modal-background: #3b4252;
--modal-text: #eceff4;
--modal-header-background: #3b4252;
--modal-header-border: #4c566a;
--button-primary-bg: #88c0d0;
--button-primary-text: #2e3440;
--input-background: #434c5e;
--input-border: #4c566a;
--input-border-focus: #88c0d0;
--input-text: #eceff4;
}
[data-theme="nord"] body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
[data-theme="nord"] .app-sidebar {
background: var(--sidebar-bg);
}
[data-theme="nord"] .app-main {
background-color: var(--primary-bg);
}
[data-theme="nord"] .calendar-day {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--primary-text);
}
/* Dracula Theme - Popular developer dark theme */
[data-theme="dracula"] {
--primary-gradient: linear-gradient(180deg, #282a36 0%, #44475a 100%);
--primary-bg: #282a36;
--primary-text: #f8f8f2;
--sidebar-bg: linear-gradient(180deg, #44475a 0%, #6272a4 100%);
--sidebar-text: #f8f8f2;
--header-bg: linear-gradient(135deg, #44475a 0%, #6272a4 100%);
--header-text: #f8f8f2;
--card-bg: #44475a;
--border-color: #6272a4;
--accent-color: #bd93f9;
--calendar-bg: #44475a;
--calendar-border: #6272a4;
--calendar-border-light: #6272a4;
--calendar-day-bg: #44475a;
--calendar-day-hover: #6272a4;
--calendar-day-prev-next: #282a36;
--calendar-day-prev-next-text: #6272a4;
--calendar-today-bg: #bd93f9;
--calendar-today-border: #ff79c6;
--calendar-today-text: #282a36;
--calendar-selected-bg: #6272a4;
--calendar-selected-border: #bd93f9;
--calendar-selected-text: #f8f8f2;
--calendar-has-events-bg: #44475a;
--weekday-header-bg: #282a36;
--weekday-header-text: #f8f8f2;
--time-label-bg: #282a36;
--time-label-text: #f8f8f2;
--time-label-border: #6272a4;
--event-colors: #bd93f9, #ff79c6, #8be9fd, #50fa7b, #ffb86c, #ff5555, #f1fa8c, #6272a4, #ff79c6, #bd93f9, #8be9fd, #50fa7b, #ffb86c, #ff5555, #f1fa8c, #6272a4;
/* Dark Theme CSS Variables */
--background-primary: #282a36;
--background-secondary: #44475a;
--background-tertiary: #6272a4;
--text-primary: #f8f8f2;
--text-secondary: #f8f8f2;
--text-inverse: #282a36;
--border-primary: #6272a4;
--border-secondary: #bd93f9;
--border-light: #ff79c6;
--modal-background: #44475a;
--modal-text: #f8f8f2;
--modal-header-background: #44475a;
--modal-header-border: #6272a4;
--button-primary-bg: #bd93f9;
--button-primary-text: #282a36;
--input-background: #6272a4;
--input-border: #bd93f9;
--input-border-focus: #ff79c6;
--input-text: #f8f8f2;
}
[data-theme="dracula"] body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
[data-theme="dracula"] .app-sidebar {
background: var(--sidebar-bg);
}
[data-theme="dracula"] .app-main {
background-color: var(--primary-bg);
}
[data-theme="dracula"] .calendar-day {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--primary-text);
}
/* Recurrence Options Styling */ /* Recurrence Options Styling */
.recurrence-options { .recurrence-options {
margin-top: 1.5rem; margin-top: 1.5rem;
@@ -3812,7 +4133,7 @@ body {
} }
.external-calendar-list h3 { .external-calendar-list h3 {
color: rgba(255, 255, 255, 0.9); color: var(--text-primary);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -4029,7 +4350,7 @@ body {
/* External Calendar Modal */ /* External Calendar Modal */
.external-calendar-modal { .external-calendar-modal {
background: white; background: var(--modal-background);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px; max-width: 500px;
@@ -4044,12 +4365,12 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 2rem 2rem 1rem; padding: 2rem 2rem 1rem;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid var(--modal-header-border);
} }
.external-calendar-modal .modal-header h3 { .external-calendar-modal .modal-header h3 {
margin: 0; margin: 0;
color: #495057; color: var(--modal-text);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
@@ -4080,8 +4401,8 @@ body {
} }
.external-calendar-modal .modal-close:hover { .external-calendar-modal .modal-close:hover {
background: #f8f9fa; background: var(--background-tertiary);
color: #495057; color: var(--text-primary);
} }
.external-calendar-modal .modal-body { .external-calendar-modal .modal-body {
@@ -4096,7 +4417,7 @@ body {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: 600; font-weight: 600;
color: #495057; color: var(--modal-text);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -4104,11 +4425,12 @@ body {
.external-calendar-modal .form-group input[type="url"] { .external-calendar-modal .form-group input[type="url"] {
width: 100%; width: 100%;
padding: var(--control-padding); padding: var(--control-padding);
border: 1px solid #ced4da; border: 1px solid var(--input-border);
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-medium);
font-size: 0.9rem; font-size: 0.9rem;
transition: var(--standard-transition); transition: var(--standard-transition);
background: white; background: var(--input-background);
color: var(--input-text);
} }
.external-calendar-modal .form-group input[type="text"]:focus, .external-calendar-modal .form-group input[type="text"]:focus,
@@ -4122,7 +4444,7 @@ body {
width: 80px; width: 80px;
height: 40px; height: 40px;
padding: 0; padding: 0;
border: 1px solid #ced4da; border: 1px solid var(--input-border);
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-medium);
cursor: pointer; cursor: pointer;
background: none; background: none;
@@ -4132,7 +4454,7 @@ body {
display: block; display: block;
margin-top: 0.5rem; margin-top: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #6c757d; color: var(--text-secondary);
font-style: italic; font-style: italic;
} }
@@ -4141,8 +4463,8 @@ body {
gap: 1rem; gap: 1rem;
justify-content: flex-end; justify-content: flex-end;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
border-top: 1px solid #e9ecef; border-top: 1px solid var(--modal-header-border);
background: #f8f9fa; background: var(--modal-header-background);
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
} }
@@ -4158,12 +4480,13 @@ body {
} }
.external-calendar-modal .btn-secondary { .external-calendar-modal .btn-secondary {
background: #6c757d; background: var(--button-secondary-bg);
color: white; color: var(--button-secondary-text);
} }
.external-calendar-modal .btn-secondary:hover:not(:disabled) { .external-calendar-modal .btn-secondary:hover:not(:disabled) {
background: #5a6268; background: var(--button-secondary-bg);
filter: brightness(0.9);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -4183,8 +4506,8 @@ body {
} }
.external-calendar-modal .error-message { .external-calendar-modal .error-message {
background: #f8d7da; background: var(--error-color);
color: #721c24; color: var(--text-inverse);
padding: var(--control-padding) 1rem; padding: var(--control-padding) 1rem;
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-medium);
margin-bottom: 1rem; margin-bottom: 1rem;

691
frontend/styles/apple.css Normal file
View File

@@ -0,0 +1,691 @@
/* 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;
}

838
frontend/styles/google.css
View File

File diff suppressed because it is too large Load Diff