Enhance styling system with new themes and fix modal theming consistency
- 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
@@ -8,6 +8,7 @@
|
||||
<link data-trunk rel="css" href="styles.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/apple.css">
|
||||
<link data-trunk rel="copy-file" href="service-worker.js">
|
||||
<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" />
|
||||
|
||||
@@ -497,6 +497,11 @@ pub fn App() -> Html {
|
||||
// Hot-swap stylesheet
|
||||
if let Some(window) = web_sys::window() {
|
||||
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
|
||||
if let Some(existing_link) = document.get_element_by_id("dynamic-style") {
|
||||
existing_link.remove();
|
||||
@@ -544,6 +549,11 @@ pub fn App() -> Html {
|
||||
let style = (*current_style).clone();
|
||||
if let Some(window) = web_sys::window() {
|
||||
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
|
||||
if let Some(stylesheet_path) = style.stylesheet_path() {
|
||||
if let Ok(link) = document.create_element("link") {
|
||||
|
||||
@@ -20,12 +20,17 @@ pub enum Theme {
|
||||
Dark,
|
||||
Rose,
|
||||
Mint,
|
||||
Midnight,
|
||||
Charcoal,
|
||||
Nord,
|
||||
Dracula,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq)]
|
||||
pub enum Style {
|
||||
Default,
|
||||
Google,
|
||||
Apple,
|
||||
}
|
||||
|
||||
impl Theme {
|
||||
@@ -39,6 +44,10 @@ impl Theme {
|
||||
Theme::Dark => "dark",
|
||||
Theme::Rose => "rose",
|
||||
Theme::Mint => "mint",
|
||||
Theme::Midnight => "midnight",
|
||||
Theme::Charcoal => "charcoal",
|
||||
Theme::Nord => "nord",
|
||||
Theme::Dracula => "dracula",
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,6 +60,10 @@ impl Theme {
|
||||
"dark" => Theme::Dark,
|
||||
"rose" => Theme::Rose,
|
||||
"mint" => Theme::Mint,
|
||||
"midnight" => Theme::Midnight,
|
||||
"charcoal" => Theme::Charcoal,
|
||||
"nord" => Theme::Nord,
|
||||
"dracula" => Theme::Dracula,
|
||||
_ => Theme::Default,
|
||||
}
|
||||
}
|
||||
@@ -61,12 +74,14 @@ impl Style {
|
||||
match self {
|
||||
Style::Default => "default",
|
||||
Style::Google => "google",
|
||||
Style::Apple => "apple",
|
||||
}
|
||||
}
|
||||
|
||||
pub fn from_value(value: &str) -> Self {
|
||||
match value {
|
||||
"google" => Style::Google,
|
||||
"apple" => Style::Apple,
|
||||
_ => Style::Default,
|
||||
}
|
||||
}
|
||||
@@ -76,6 +91,7 @@ impl Style {
|
||||
match self {
|
||||
Style::Default => None, // No additional stylesheet needed - uses base styles.css
|
||||
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="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</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>
|
||||
</div>
|
||||
|
||||
@@ -433,6 +453,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
|
||||
<select class="style-selector-dropdown" onchange={on_style_change}>
|
||||
<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="apple" selected={matches!(props.current_style, Style::Apple)}>{"Apple Calendar"}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -196,6 +196,26 @@ input, select, textarea, button {
|
||||
[data-theme="mint"] {
|
||||
--primary-color: #10b981;
|
||||
--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;
|
||||
padding: 0;
|
||||
@@ -469,13 +489,13 @@ body {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: var(--control-padding);
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
@@ -483,12 +503,12 @@ body {
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--background-tertiary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -594,8 +614,8 @@ body {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
background-color: var(--error-color);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--control-padding);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
@@ -1384,7 +1404,7 @@ body {
|
||||
.calendar-management-modal .modal-header {
|
||||
padding: 2rem 2.5rem 0;
|
||||
border-bottom: none;
|
||||
background: white;
|
||||
background: var(--modal-header-background);
|
||||
}
|
||||
|
||||
.calendar-management-modal .modal-body {
|
||||
@@ -1425,9 +1445,9 @@ body {
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: white;
|
||||
color: #2563eb;
|
||||
box-shadow: inset 0 -2px 0 #2563eb,
|
||||
background: var(--modal-background);
|
||||
color: var(--primary-color);
|
||||
box-shadow: inset 0 -2px 0 var(--primary-color),
|
||||
0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
@@ -1666,7 +1686,8 @@ body {
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
background: var(--modal-background);
|
||||
color: var(--modal-text);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12),
|
||||
0 8px 16px rgba(0, 0, 0, 0.08),
|
||||
@@ -1695,13 +1716,13 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid var(--modal-header-border);
|
||||
background: var(--modal-header-background);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
color: var(--modal-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1710,7 +1731,7 @@ body {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
color: #999;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
@@ -1724,8 +1745,8 @@ body {
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: #f8f9fa;
|
||||
color: #666;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@@ -1742,7 +1763,7 @@ body {
|
||||
}
|
||||
|
||||
.event-detail strong {
|
||||
color: #555;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
@@ -1750,7 +1771,7 @@ body {
|
||||
}
|
||||
|
||||
.event-detail span {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
@@ -1839,7 +1860,7 @@ body {
|
||||
}
|
||||
|
||||
.create-calendar-modal {
|
||||
background: white;
|
||||
background: var(--modal-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
@@ -1865,12 +1886,12 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2rem 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-bottom: 1px solid var(--modal-header-border);
|
||||
}
|
||||
|
||||
.create-calendar-modal .modal-header h2 {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
color: var(--modal-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1879,7 +1900,7 @@ body {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
@@ -1888,8 +1909,8 @@ body {
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: #495057;
|
||||
background: #f8f9fa;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-tertiary);
|
||||
}
|
||||
|
||||
.create-calendar-modal .modal-body {
|
||||
@@ -1903,7 +1924,7 @@ body {
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
color: #374151;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -1912,9 +1933,11 @@ body {
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
background: var(--input-background);
|
||||
color: var(--input-text);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
@@ -1923,14 +1946,14 @@ body {
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group input:disabled,
|
||||
.form-group textarea:disabled {
|
||||
background-color: #f8f9fa;
|
||||
color: #6c757d;
|
||||
background-color: var(--background-tertiary);
|
||||
color: var(--text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1975,7 +1998,7 @@ body {
|
||||
|
||||
.color-help-text {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -1986,7 +2009,7 @@ body {
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
@@ -2003,27 +2026,28 @@ body {
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: #f8f9fa;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
background: var(--background-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.cancel-button:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
border-color: #9ca3af;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-secondary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.create-button {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-text);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.create-button:hover:not(:disabled) {
|
||||
background: #1d4ed8;
|
||||
background: var(--button-primary-bg);
|
||||
filter: brightness(0.9);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
@@ -2037,20 +2061,21 @@ body {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: var(--error-color);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--control-padding) 1rem;
|
||||
border: 1px solid #f5c6cb;
|
||||
border: 1px solid var(--error-color);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
/* Context Menu */
|
||||
.context-menu {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: var(--modal-background);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08),
|
||||
@@ -2150,7 +2175,7 @@ body {
|
||||
.create-event-modal .form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -2218,20 +2243,20 @@ body {
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f8f9fa;
|
||||
color: #6c757d;
|
||||
border: 1px solid #ced4da;
|
||||
background: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-text);
|
||||
border: 1px solid var(--input-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e9ecef;
|
||||
color: #495057;
|
||||
border-color: #adb5bd;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-secondary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-text);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@@ -2303,9 +2328,9 @@ body {
|
||||
}
|
||||
|
||||
.recurring-option {
|
||||
background: white;
|
||||
border: 2px solid #e9ecef;
|
||||
color: #495057;
|
||||
background: var(--input-background);
|
||||
border: 2px solid var(--border-primary);
|
||||
color: var(--text-secondary);
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-radius: var(--border-radius-medium);
|
||||
@@ -2404,7 +2429,7 @@ body {
|
||||
/* Form Help Text and Advanced Info Styles */
|
||||
.form-help-text {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.4;
|
||||
@@ -2463,7 +2488,7 @@ body {
|
||||
}
|
||||
|
||||
[data-theme="dark"] .advanced-info .form-help-text {
|
||||
border-color: #444444;
|
||||
border-color: var(--border-primary);
|
||||
}
|
||||
|
||||
/* People Tab Styles */
|
||||
@@ -2602,9 +2627,9 @@ body {
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
background: white;
|
||||
border: 1px solid #667eea;
|
||||
color: #667eea;
|
||||
background: var(--input-background);
|
||||
border: 1px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
@@ -2793,9 +2818,9 @@ body {
|
||||
}
|
||||
|
||||
.location-tag {
|
||||
background: white;
|
||||
border: 1px solid #28a745;
|
||||
color: #28a745;
|
||||
background: var(--input-background);
|
||||
border: 1px solid var(--success-color);
|
||||
color: var(--success-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
@@ -2898,9 +2923,9 @@ body {
|
||||
|
||||
.type-category {
|
||||
padding: var(--control-padding);
|
||||
background: white;
|
||||
background: var(--input-background);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.type-category strong {
|
||||
@@ -3017,9 +3042,9 @@ body {
|
||||
|
||||
.alarm-type {
|
||||
padding: var(--control-padding);
|
||||
background: white;
|
||||
background: var(--input-background);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid var(--border-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -3678,6 +3703,302 @@ body {
|
||||
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 {
|
||||
margin-top: 1.5rem;
|
||||
@@ -3812,7 +4133,7 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-list h3 {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
@@ -4029,7 +4350,7 @@ body {
|
||||
|
||||
/* External Calendar Modal */
|
||||
.external-calendar-modal {
|
||||
background: white;
|
||||
background: var(--modal-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
@@ -4044,12 +4365,12 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2rem 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-bottom: 1px solid var(--modal-header-border);
|
||||
}
|
||||
|
||||
.external-calendar-modal .modal-header h3 {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
color: var(--modal-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
@@ -4080,8 +4401,8 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-modal .modal-close:hover {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.external-calendar-modal .modal-body {
|
||||
@@ -4096,7 +4417,7 @@ body {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
color: var(--modal-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -4104,11 +4425,12 @@ body {
|
||||
.external-calendar-modal .form-group input[type="url"] {
|
||||
width: 100%;
|
||||
padding: var(--control-padding);
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: 0.9rem;
|
||||
transition: var(--standard-transition);
|
||||
background: white;
|
||||
background: var(--input-background);
|
||||
color: var(--input-text);
|
||||
}
|
||||
|
||||
.external-calendar-modal .form-group input[type="text"]:focus,
|
||||
@@ -4122,7 +4444,7 @@ body {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--border-radius-medium);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
@@ -4132,7 +4454,7 @@ body {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -4141,8 +4463,8 @@ body {
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
padding: 1.5rem 2rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid var(--modal-header-border);
|
||||
background: var(--modal-header-background);
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
@@ -4158,12 +4480,13 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-modal .btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
background: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-text);
|
||||
}
|
||||
|
||||
.external-calendar-modal .btn-secondary:hover:not(:disabled) {
|
||||
background: #5a6268;
|
||||
background: var(--button-secondary-bg);
|
||||
filter: brightness(0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -4183,8 +4506,8 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-modal .error-message {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: var(--error-color);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--control-padding) 1rem;
|
||||
border-radius: var(--border-radius-medium);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
691
frontend/styles/apple.css
Normal file
691
frontend/styles/apple.css
Normal 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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user