| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
|
|
| :root { |
| --primary: #6366f1; |
| --primary-dark: #4f46e5; |
| --primary-light: #818cf8; |
| --secondary: #a855f7; |
| --accent: #06b6d4; |
| --success: #22c55e; |
| --danger: #ef4444; |
| --warning: #f59e0b; |
| --info: #3b82f6; |
|
|
| --glass-bg: rgba(255, 255, 255, 0.7); |
| --glass-border: rgba(255, 255, 255, 0.2); |
| --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
| --glass-blur: blur(16px); |
|
|
| --bg-primary: #ffffff; |
| --bg-secondary: #f8fafc; |
| --bg-tertiary: #f1f5f9; |
| --bg-hover: #e2e8f0; |
| --bg-card: rgba(255, 255, 255, 0.85); |
|
|
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-tertiary: #94a3b8; |
|
|
| --border: rgba(226, 232, 240, 0.8); |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.06); |
| --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08); |
| --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.1); |
| --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.2); |
|
|
| --sidebar-width: 300px; |
| --header-height: 80px; |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 16px; |
| --radius-xl: 24px; |
| } |
|
|
| body.dark-mode { |
| --glass-bg: rgba(30, 41, 59, 0.7); |
| --glass-border: rgba(255, 255, 255, 0.08); |
| --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
| --bg-primary: #0f172a; |
| --bg-secondary: #1e293b; |
| --bg-tertiary: #334155; |
| --bg-hover: #475569; |
| --bg-card: rgba(30, 41, 59, 0.85); |
| --text-primary: #f1f5f9; |
| --text-secondary: #94a3b8; |
| --text-tertiary: #64748b; |
| --border: rgba(51, 65, 85, 0.8); |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4); |
| --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); |
| } |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: var(--bg-secondary); |
| color: var(--text-primary); |
| line-height: 1.6; |
| overflow-x: hidden; |
| min-height: 100vh; |
| } |
|
|
| body::before { |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: |
| radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 100%), |
| radial-gradient(ellipse 80% 50% at 100% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 100%); |
| pointer-events: none; |
| z-index: 0; |
| } |
|
|
| body.dark-mode::before { |
| background: |
| radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 100%), |
| radial-gradient(ellipse 80% 50% at 100% 100%, rgba(168, 85, 247, 0.12) 0%, transparent 100%); |
| } |
|
|
| body.no-animations * { |
| animation: none !important; |
| transition: none !important; |
| } |
|
|
| body.focus-mode .sidebar, |
| body.focus-mode .main-header, |
| body.focus-mode .progress-section, |
| body.focus-mode .quick-actions { |
| display: none; |
| } |
|
|
| body.focus-mode .tasks-container { |
| padding-top: 40px; |
| } |
|
|
| #particles-canvas { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 0; |
| } |
|
|
| .loading-screen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, #6366f1, #a855f7, #06b6d4); |
| background-size: 300% 300%; |
| animation: gradientShift 3s ease infinite; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| z-index: 9999; |
| transition: opacity 0.6s ease, visibility 0.6s ease; |
| } |
|
|
| .loading-screen.hidden { |
| opacity: 0; |
| visibility: hidden; |
| } |
|
|
| @keyframes gradientShift { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
|
|
| .loader { |
| width: 60px; |
| height: 60px; |
| border: 4px solid rgba(255, 255, 255, 0.15); |
| border-top-color: white; |
| border-right-color: rgba(255, 255, 255, 0.5); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| box-shadow: 0 0 40px rgba(255, 255, 255, 0.1); |
| } |
|
|
| .loading-screen p { |
| color: white; |
| margin-top: 24px; |
| font-size: 18px; |
| font-weight: 500; |
| letter-spacing: 0.5px; |
| animation: pulse 1.5s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.6; } |
| } |
|
|
| .loading-screen .loader-text { |
| color: rgba(255, 255, 255, 0.7); |
| font-size: 13px; |
| margin-top: 8px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| .app-container { |
| display: flex; |
| height: 100vh; |
| overflow: hidden; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .sidebar { |
| width: var(--sidebar-width); |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| -webkit-backdrop-filter: var(--glass-blur); |
| border-right: 1px solid var(--glass-border); |
| display: flex; |
| flex-direction: column; |
| overflow-y: auto; |
| transition: var(--transition); |
| position: relative; |
| z-index: 100; |
| } |
|
|
| .sidebar-header { |
| padding: 20px 20px 16px; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .logo-icon { |
| width: 36px; |
| height: 36px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| border-radius: var(--radius-sm); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 18px; |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .logo h1 { |
| font-size: 18px; |
| font-weight: 800; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .sidebar-toggle { |
| display: none; |
| width: 36px; |
| height: 36px; |
| border: none; |
| background: var(--glass-bg); |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| font-size: 18px; |
| } |
|
|
| .sidebar-toggle:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .user-profile { |
| padding: 16px 20px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .user-avatar { |
| width: 44px; |
| height: 44px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 18px; |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25); |
| flex-shrink: 0; |
| } |
|
|
| .user-info h3 { |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .user-info p { |
| font-size: 12px; |
| color: var(--text-tertiary); |
| } |
|
|
| .streak-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| background: linear-gradient(135deg, #f59e0b, #ef4444); |
| color: white; |
| padding: 2px 10px; |
| border-radius: 999px; |
| font-size: 11px; |
| font-weight: 700; |
| margin-left: 8px; |
| box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); |
| } |
|
|
| .quick-stats { |
| padding: 16px 20px; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .stat-card { |
| background: var(--glass-bg); |
| backdrop-filter: blur(8px); |
| padding: 12px; |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| transition: var(--transition); |
| border: 1px solid var(--glass-border); |
| cursor: default; |
| } |
|
|
| .stat-card:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow); |
| } |
|
|
| .stat-card i { |
| font-size: 22px; |
| width: 36px; |
| height: 36px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-sm); |
| flex-shrink: 0; |
| } |
|
|
| .stat-card:nth-child(1) i { |
| background: rgba(34, 197, 94, 0.1); |
| color: var(--success); |
| } |
|
|
| .stat-card:nth-child(2) i { |
| background: rgba(245, 158, 11, 0.1); |
| color: var(--warning); |
| } |
|
|
| .stat-number { |
| display: block; |
| font-size: 20px; |
| font-weight: 700; |
| color: var(--text-primary); |
| line-height: 1.2; |
| } |
|
|
| .stat-label { |
| display: block; |
| font-size: 11px; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .sidebar-nav { |
| padding: 12px 12px 8px; |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .nav-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 10px 14px; |
| background: none; |
| border: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| font-size: 14px; |
| font-weight: 500; |
| width: 100%; |
| text-align: left; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .nav-item::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 50%; |
| transform: translateY(-50%); |
| height: 20px; |
| width: 3px; |
| background: var(--primary); |
| border-radius: 0 3px 3px 0; |
| opacity: 0; |
| transition: var(--transition); |
| } |
|
|
| .nav-item:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .nav-item.active { |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1)); |
| color: var(--primary); |
| font-weight: 600; |
| } |
|
|
| .nav-item.active::before { |
| opacity: 1; |
| } |
|
|
| .nav-item i { |
| font-size: 16px; |
| width: 20px; |
| text-align: center; |
| } |
|
|
| .nav-item .count { |
| background: var(--bg-tertiary); |
| padding: 1px 8px; |
| border-radius: 999px; |
| font-size: 11px; |
| font-weight: 600; |
| min-width: 22px; |
| text-align: center; |
| } |
|
|
| .nav-item.active .count { |
| background: rgba(99, 102, 241, 0.15); |
| color: var(--primary); |
| } |
|
|
| .categories-section { |
| padding: 12px 12px; |
| border-top: 1px solid var(--border); |
| flex: 1; |
| } |
|
|
| .section-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| padding: 0 14px; |
| } |
|
|
| .section-header h3 { |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 0.8px; |
| } |
|
|
| .icon-btn { |
| width: 26px; |
| height: 26px; |
| border: none; |
| background: var(--glass-bg); |
| border-radius: 6px; |
| cursor: pointer; |
| transition: var(--transition); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--text-tertiary); |
| font-size: 12px; |
| } |
|
|
| .icon-btn:hover { |
| background: var(--primary); |
| color: white; |
| transform: scale(1.1); |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); |
| } |
|
|
| #categories-list, #workspaces-list { |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .category-item { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 8px 14px; |
| background: none; |
| border: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| font-size: 13px; |
| width: 100%; |
| text-align: left; |
| } |
|
|
| .category-item:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .category-item.active { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| font-weight: 600; |
| } |
|
|
| .category-icon { |
| width: 28px; |
| height: 28px; |
| border-radius: 6px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 14px; |
| flex-shrink: 0; |
| } |
|
|
| .category-item span { |
| flex: 1; |
| } |
|
|
| .category-item .count { |
| font-size: 11px; |
| color: var(--text-tertiary); |
| background: var(--bg-tertiary); |
| padding: 1px 7px; |
| border-radius: 999px; |
| min-width: 20px; |
| text-align: center; |
| } |
|
|
| .sidebar-footer { |
| padding: 12px 12px; |
| border-top: 1px solid var(--border); |
| display: flex; |
| gap: 6px; |
| } |
|
|
| .settings-btn { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 14px; |
| background: none; |
| border: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| font-size: 14px; |
| } |
|
|
| .settings-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .theme-toggle { |
| width: 40px; |
| height: 40px; |
| border: none; |
| background: var(--glass-bg); |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| font-size: 16px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .theme-toggle:hover { |
| background: var(--primary); |
| color: white; |
| transform: rotate(20deg); |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .main-content { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| position: relative; |
| } |
|
|
| .main-header { |
| height: var(--header-height); |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| -webkit-backdrop-filter: var(--glass-blur); |
| border-bottom: 1px solid var(--glass-border); |
| padding: 20px 32px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| position: sticky; |
| top: 0; |
| z-index: 50; |
| } |
|
|
| .header-left h2 { |
| font-size: 26px; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: 2px; |
| letter-spacing: -0.5px; |
| } |
|
|
| .header-left p { |
| font-size: 14px; |
| color: var(--text-tertiary); |
| } |
|
|
| .header-right { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .search-box { |
| position: relative; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .search-box i { |
| position: absolute; |
| left: 14px; |
| color: var(--text-tertiary); |
| font-size: 15px; |
| pointer-events: none; |
| } |
|
|
| .search-box input { |
| padding: 10px 14px 10px 42px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| background: var(--glass-bg); |
| color: var(--text-primary); |
| font-size: 14px; |
| width: 260px; |
| transition: var(--transition); |
| font-family: inherit; |
| } |
|
|
| .search-box input:focus { |
| outline: none; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); |
| width: 300px; |
| } |
|
|
| .search-box input::placeholder { |
| color: var(--text-tertiary); |
| } |
|
|
| .filter-panel { |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| -webkit-backdrop-filter: var(--glass-blur); |
| border-bottom: 1px solid var(--glass-border); |
| padding: 20px 32px; |
| display: none; |
| animation: slideDown 0.3s ease; |
| } |
|
|
| .filter-panel.active { |
| display: block; |
| } |
|
|
| @keyframes slideDown { |
| from { opacity: 0; transform: translateY(-10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .filter-group { |
| margin-bottom: 14px; |
| } |
|
|
| .filter-group:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .filter-group label { |
| display: block; |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--text-tertiary); |
| margin-bottom: 8px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .filter-options { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .filter-option, |
| .sort-option { |
| padding: 7px 16px; |
| background: var(--glass-bg); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| color: var(--text-primary); |
| font-size: 13px; |
| cursor: pointer; |
| transition: var(--transition); |
| font-family: inherit; |
| font-weight: 500; |
| } |
|
|
| .filter-option:hover, |
| .sort-option:hover { |
| background: var(--bg-hover); |
| transform: translateY(-1px); |
| } |
|
|
| .filter-option.active, |
| .sort-option.active { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| border-color: transparent; |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .progress-section { |
| padding: 16px 32px; |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| -webkit-backdrop-filter: var(--glass-blur); |
| border-bottom: 1px solid var(--glass-border); |
| } |
|
|
| .progress-info { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| font-size: 13px; |
| color: var(--text-secondary); |
| font-weight: 500; |
| } |
|
|
| .progress-bar { |
| height: 6px; |
| background: var(--bg-tertiary); |
| border-radius: 999px; |
| overflow: hidden; |
| position: relative; |
| } |
|
|
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); |
| background-size: 200% 100%; |
| animation: shimmer 3s ease infinite; |
| border-radius: 999px; |
| transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| @keyframes shimmer { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
|
|
| .quick-actions { |
| padding: 16px 32px 0; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .calendar-view-panel { |
| padding: 20px 32px; |
| } |
|
|
| .calendar-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 12px; |
| } |
|
|
| .calendar-header h3 { |
| font-size: 18px; |
| font-weight: 600; |
| } |
|
|
| .calendar-grid { |
| display: grid; |
| grid-template-columns: repeat(7, minmax(0, 1fr)); |
| gap: 6px; |
| } |
|
|
| .calendar-cell { |
| min-height: 80px; |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-sm); |
| padding: 6px; |
| color: var(--text-primary); |
| cursor: pointer; |
| transition: var(--transition); |
| font-size: 13px; |
| } |
|
|
| .calendar-cell:hover { |
| background: var(--bg-hover); |
| transform: translateY(-1px); |
| } |
|
|
| .calendar-cell.muted { |
| opacity: 0.3; |
| } |
|
|
| .calendar-cell.active { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15); |
| } |
|
|
| .calendar-task-count { |
| margin-top: 4px; |
| font-size: 11px; |
| color: var(--text-tertiary); |
| } |
|
|
| .focus-row { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .template-card { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 14px; |
| margin-bottom: 10px; |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| transition: var(--transition); |
| } |
|
|
| .template-card:hover { |
| border-color: var(--primary-light); |
| box-shadow: var(--shadow); |
| } |
|
|
| .template-card strong { |
| font-size: 15px; |
| color: var(--text-primary); |
| } |
|
|
| .template-card div { |
| font-size: 13px; |
| color: var(--text-secondary); |
| margin: 8px 0; |
| line-height: 1.8; |
| } |
|
|
| .template-card button { |
| margin-top: 6px; |
| } |
|
|
| .insight-panel { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .insight-card { |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-md); |
| padding: 12px 14px; |
| transition: var(--transition); |
| } |
|
|
| .insight-card:hover { |
| box-shadow: var(--shadow); |
| transform: translateY(-1px); |
| } |
|
|
| .insight-label { |
| display: block; |
| font-size: 11px; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| margin-bottom: 4px; |
| font-weight: 600; |
| } |
|
|
| .insight-card strong { |
| font-size: 16px; |
| color: var(--text-primary); |
| } |
|
|
| .quick-add { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| align-items: center; |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-lg); |
| padding: 14px; |
| box-shadow: var(--shadow); |
| transition: var(--transition); |
| } |
|
|
| .quick-add:focus-within { |
| box-shadow: var(--shadow-lg), 0 0 0 4px rgba(99, 102, 241, 0.08); |
| border-color: var(--primary-light); |
| } |
|
|
| .quick-add input[type="text"] { |
| flex: 1; |
| min-width: 200px; |
| padding: 9px 14px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| font-size: 14px; |
| font-family: inherit; |
| transition: var(--transition); |
| } |
|
|
| .quick-add input[type="text"]:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
|
|
| .quick-add input[type="date"], |
| .quick-add select { |
| min-width: 130px; |
| padding: 9px 14px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| font-size: 13px; |
| font-family: inherit; |
| } |
|
|
| .bulk-actions { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .tasks-container { |
| flex: 1; |
| overflow-y: auto; |
| padding: 20px 32px 100px; |
| } |
|
|
| .tasks-container[hidden], |
| .calendar-view-panel[hidden] { |
| display: none !important; |
| } |
|
|
| .tasks-container.grid-view { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 14px; |
| align-content: start; |
| } |
|
|
| .tasks-container.grid-view .task-card { |
| margin-bottom: 0; |
| } |
|
|
| .empty-state { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| height: 100%; |
| color: var(--text-tertiary); |
| animation: fadeIn 0.6s ease; |
| text-align: center; |
| padding: 40px; |
| } |
|
|
| .empty-state i { |
| font-size: 72px; |
| margin-bottom: 20px; |
| opacity: 0.3; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .empty-state h3 { |
| font-size: 22px; |
| margin-bottom: 8px; |
| color: var(--text-secondary); |
| font-weight: 600; |
| } |
|
|
| .empty-state p { |
| font-size: 14px; |
| margin-bottom: 24px; |
| color: var(--text-tertiary); |
| } |
|
|
| .task-card { |
| background: var(--glass-bg); |
| backdrop-filter: blur(8px); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-lg); |
| padding: 18px 20px; |
| margin-bottom: 10px; |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| cursor: pointer; |
| animation: taskSlideIn 0.4s ease both; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .task-card::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, transparent 60%, rgba(99, 102, 241, 0.03)); |
| pointer-events: none; |
| } |
|
|
| @keyframes taskSlideIn { |
| from { opacity: 0; transform: translateY(16px) scale(0.98); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
|
|
| .task-card:nth-child(1) { animation-delay: 0.02s; } |
| .task-card:nth-child(2) { animation-delay: 0.04s; } |
| .task-card:nth-child(3) { animation-delay: 0.06s; } |
| .task-card:nth-child(4) { animation-delay: 0.08s; } |
| .task-card:nth-child(5) { animation-delay: 0.10s; } |
| .task-card:nth-child(6) { animation-delay: 0.12s; } |
| .task-card:nth-child(7) { animation-delay: 0.14s; } |
| .task-card:nth-child(8) { animation-delay: 0.16s; } |
| .task-card:nth-child(9) { animation-delay: 0.18s; } |
| .task-card:nth-child(10) { animation-delay: 0.20s; } |
|
|
| .task-card:hover { |
| box-shadow: var(--shadow-lg); |
| transform: translateY(-2px); |
| border-color: var(--primary-light); |
| } |
|
|
| .task-card.completed { |
| opacity: 0.55; |
| } |
|
|
| .task-card.completed:hover { |
| opacity: 0.7; |
| } |
|
|
| .task-card.overdue { |
| border-color: rgba(239, 68, 68, 0.25); |
| box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.08); |
| } |
|
|
| .task-card.due-soon { |
| border-color: rgba(245, 158, 11, 0.25); |
| } |
|
|
| .task-card.dragging { |
| opacity: 0.4; |
| transform: rotate(1deg) scale(0.98); |
| } |
|
|
| .task-header { |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| } |
|
|
| .task-checkbox { |
| width: 22px; |
| height: 22px; |
| border: 2px solid var(--border); |
| border-radius: 50%; |
| cursor: pointer; |
| transition: var(--transition); |
| flex-shrink: 0; |
| margin-top: 2px; |
| position: relative; |
| } |
|
|
| .task-checkbox:hover { |
| border-color: var(--primary); |
| transform: scale(1.15); |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.15); |
| } |
|
|
| .task-checkbox.checked { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| border-color: transparent; |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .task-checkbox.checked::after { |
| content: '\f00c'; |
| font-family: 'Font Awesome 6 Free'; |
| font-weight: 900; |
| color: white; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: 11px; |
| } |
|
|
| .task-content { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .task-title { |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| line-height: 1.4; |
| } |
|
|
| .task-card.completed .task-title { |
| text-decoration: line-through; |
| color: var(--text-tertiary); |
| } |
|
|
| .task-description { |
| font-size: 13px; |
| color: var(--text-secondary); |
| margin-bottom: 10px; |
| line-height: 1.5; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| .task-meta { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| flex-wrap: wrap; |
| margin-bottom: 6px; |
| } |
|
|
| .task-meta-item { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| font-size: 12px; |
| color: var(--text-tertiary); |
| } |
|
|
| .task-meta-item i { |
| font-size: 11px; |
| } |
|
|
| .task-priority { |
| padding: 3px 10px; |
| border-radius: 999px; |
| font-size: 10px; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .task-priority.high { |
| background: rgba(239, 68, 68, 0.1); |
| color: var(--danger); |
| } |
|
|
| .task-priority.medium { |
| background: rgba(245, 158, 11, 0.1); |
| color: var(--warning); |
| } |
|
|
| .task-priority.low { |
| background: rgba(34, 197, 94, 0.1); |
| color: var(--success); |
| } |
|
|
| .task-category-badge { |
| padding: 3px 10px; |
| border-radius: 999px; |
| font-size: 11px; |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
|
|
| .task-tags { |
| display: flex; |
| gap: 5px; |
| flex-wrap: wrap; |
| margin-bottom: 6px; |
| } |
|
|
| .task-tag { |
| padding: 3px 10px; |
| background: var(--bg-tertiary); |
| border-radius: 999px; |
| font-size: 11px; |
| color: var(--text-secondary); |
| font-weight: 500; |
| } |
|
|
| .task-actions { |
| display: flex; |
| gap: 4px; |
| opacity: 0; |
| transition: var(--transition); |
| } |
|
|
| .task-card:hover .task-actions { |
| opacity: 1; |
| } |
|
|
| .task-action-btn { |
| width: 30px; |
| height: 30px; |
| border: none; |
| background: none; |
| border-radius: 6px; |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-tertiary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 13px; |
| } |
|
|
| .task-action-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| transform: scale(1.1); |
| } |
|
|
| .task-action-btn.important { |
| color: var(--warning); |
| } |
|
|
| .task-action-btn.delete:hover { |
| background: rgba(239, 68, 68, 0.1); |
| color: var(--danger); |
| } |
|
|
| .task-subtasks { |
| margin-top: 10px; |
| padding-top: 10px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .task-subtask { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 4px 0; |
| font-size: 13px; |
| color: var(--text-secondary); |
| } |
|
|
| .task-subtask input[type="checkbox"] { |
| width: 15px; |
| height: 15px; |
| cursor: pointer; |
| accent-color: var(--primary); |
| } |
|
|
| .fab { |
| position: fixed; |
| bottom: 32px; |
| right: 32px; |
| width: 56px; |
| height: 56px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| border: none; |
| font-size: 22px; |
| cursor: pointer; |
| box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35); |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| z-index: 99; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .fab:hover { |
| transform: scale(1.1) rotate(90deg); |
| box-shadow: 0 12px 48px rgba(99, 102, 241, 0.45); |
| } |
|
|
| .fab:active { |
| transform: scale(0.95); |
| } |
|
|
| .fab .fab-tooltip { |
| position: absolute; |
| right: 66px; |
| background: var(--text-primary); |
| color: var(--bg-primary); |
| padding: 6px 12px; |
| border-radius: var(--radius-sm); |
| font-size: 12px; |
| white-space: nowrap; |
| opacity: 0; |
| pointer-events: none; |
| transition: var(--transition); |
| font-weight: 500; |
| } |
|
|
| .fab:hover .fab-tooltip { |
| opacity: 1; |
| } |
|
|
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.4); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| z-index: 1000; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .modal.active { |
| display: flex; |
| animation: fadeIn 0.25s ease; |
| } |
|
|
| .modal-content { |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| -webkit-backdrop-filter: var(--glass-blur); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-xl); |
| width: 90%; |
| max-width: 600px; |
| max-height: 90vh; |
| overflow-y: auto; |
| box-shadow: var(--shadow-xl); |
| animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| .modal-content.small { |
| max-width: 450px; |
| } |
|
|
| @keyframes modalSlideIn { |
| from { opacity: 0; transform: translateY(-24px) scale(0.96); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
|
|
| .modal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px 24px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .modal-header h3 { |
| font-size: 18px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .close-btn { |
| width: 32px; |
| height: 32px; |
| border: none; |
| background: none; |
| border-radius: 6px; |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-tertiary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 18px; |
| } |
|
|
| .close-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| transform: rotate(90deg); |
| } |
|
|
| .modal-body { |
| padding: 24px; |
| } |
|
|
| .modal-footer { |
| display: flex; |
| gap: 10px; |
| justify-content: flex-end; |
| margin-top: 24px; |
| } |
|
|
| .form-group { |
| margin-bottom: 18px; |
| } |
|
|
| .form-group label { |
| display: block; |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 6px; |
| } |
|
|
| .form-group input[type="text"], |
| .form-group input[type="date"], |
| .form-group input[type="time"], |
| .form-group input[type="datetime-local"], |
| .form-group textarea, |
| .form-group select { |
| width: 100%; |
| padding: 10px 14px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--glass-bg); |
| color: var(--text-primary); |
| font-size: 14px; |
| font-family: inherit; |
| transition: var(--transition); |
| } |
|
|
| .form-group input:focus, |
| .form-group textarea:focus, |
| .form-group select:focus { |
| outline: none; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08); |
| } |
|
|
| .form-group textarea { |
| resize: vertical; |
| min-height: 80px; |
| } |
|
|
| .form-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 14px; |
| } |
|
|
| .checkbox-group label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| font-weight: 500; |
| font-size: 14px; |
| } |
|
|
| .checkbox-group input[type="checkbox"] { |
| width: 18px; |
| height: 18px; |
| cursor: pointer; |
| accent-color: var(--primary); |
| } |
|
|
| .color-picker-grid { |
| display: grid; |
| grid-template-columns: repeat(8, 1fr); |
| gap: 8px; |
| } |
|
|
| .color-option { |
| width: 36px; |
| height: 36px; |
| border-radius: var(--radius-sm); |
| border: 2px solid transparent; |
| cursor: pointer; |
| transition: var(--transition); |
| } |
|
|
| .color-option:hover { |
| transform: scale(1.15); |
| } |
|
|
| .color-option.active { |
| border-color: var(--text-primary); |
| box-shadow: 0 0 0 2px var(--bg-primary), 0 0 20px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .subtask-item { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 8px; |
| } |
|
|
| .subtask-item input { |
| flex: 1; |
| padding: 8px 12px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--glass-bg); |
| color: var(--text-primary); |
| font-size: 13px; |
| font-family: inherit; |
| } |
|
|
| .subtask-item input:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
|
|
| .subtask-item button { |
| padding: 8px 12px; |
| background: var(--danger); |
| color: white; |
| border: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: var(--transition); |
| font-size: 13px; |
| } |
|
|
| .subtask-item button:hover { |
| opacity: 0.85; |
| transform: scale(1.05); |
| } |
|
|
| .add-subtask-btn { |
| width: 100%; |
| padding: 10px; |
| background: none; |
| border: 1px dashed var(--border); |
| border-radius: var(--radius-sm); |
| color: var(--text-tertiary); |
| font-size: 13px; |
| cursor: pointer; |
| transition: var(--transition); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| font-family: inherit; |
| } |
|
|
| .add-subtask-btn:hover { |
| border-color: var(--primary); |
| color: var(--primary); |
| background: rgba(99, 102, 241, 0.05); |
| } |
|
|
| .btn { |
| padding: 10px 20px; |
| border: none; |
| border-radius: var(--radius-sm); |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: var(--transition); |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| font-family: inherit; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .btn::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 0; |
| height: 0; |
| background: rgba(255, 255, 255, 0.2); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| transition: width 0.6s, height 0.6s; |
| } |
|
|
| .btn:active::after { |
| width: 300px; |
| height: 300px; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25); |
| } |
|
|
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35); |
| } |
|
|
| .btn-secondary { |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| color: var(--text-primary); |
| border: 1px solid var(--border); |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--bg-hover); |
| transform: translateY(-1px); |
| } |
|
|
| .btn-danger { |
| background: linear-gradient(135deg, var(--danger), #dc2626); |
| color: white; |
| box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); |
| } |
|
|
| .btn-danger:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35); |
| } |
|
|
| .settings-section { |
| margin-bottom: 24px; |
| padding-bottom: 20px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .settings-section:last-child { |
| border-bottom: none; |
| margin-bottom: 0; |
| padding-bottom: 0; |
| } |
|
|
| .settings-section h4 { |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 14px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .setting-item { |
| margin-bottom: 12px; |
| } |
|
|
| .setting-item label { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| cursor: pointer; |
| font-size: 14px; |
| color: var(--text-primary); |
| } |
|
|
| .setting-item input[type="checkbox"] { |
| width: 18px; |
| height: 18px; |
| cursor: pointer; |
| accent-color: var(--primary); |
| } |
|
|
| .settings-section button { |
| margin-right: 10px; |
| margin-bottom: 8px; |
| } |
|
|
| .toast { |
| position: fixed; |
| bottom: 32px; |
| left: 50%; |
| transform: translateX(-50%) translateY(120px); |
| background: var(--success); |
| color: white; |
| padding: 14px 24px; |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-xl), 0 0 40px rgba(34, 197, 94, 0.15); |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 14px; |
| font-weight: 500; |
| z-index: 2000; |
| transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| backdrop-filter: blur(8px); |
| min-width: 280px; |
| justify-content: space-between; |
| } |
|
|
| .toast-action { |
| display: none; |
| border: none; |
| background: rgba(255, 255, 255, 0.2); |
| color: white; |
| border-radius: 999px; |
| padding: 6px 12px; |
| font-size: 12px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: var(--transition); |
| font-family: inherit; |
| } |
|
|
| .toast-action:hover { |
| background: rgba(255, 255, 255, 0.3); |
| } |
|
|
| .toast.show { |
| transform: translateX(-50%) translateY(0); |
| } |
|
|
| .toast i { |
| font-size: 18px; |
| } |
|
|
| #confetti-canvas { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 9998; |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: 999px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--text-tertiary); |
| } |
|
|
| .pomodoro-container { |
| padding: 16px 32px; |
| background: var(--glass-bg); |
| backdrop-filter: var(--glass-blur); |
| -webkit-backdrop-filter: var(--glass-blur); |
| border-bottom: 1px solid var(--glass-border); |
| display: none; |
| } |
|
|
| .pomodoro-container.active { |
| display: block; |
| animation: slideDown 0.3s ease; |
| } |
|
|
| .pomodoro-inner { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| flex-wrap: wrap; |
| } |
|
|
| .pomodoro-display { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .pomodoro-timer { |
| font-size: 36px; |
| font-weight: 700; |
| font-variant-numeric: tabular-nums; |
| letter-spacing: 2px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| min-width: 140px; |
| } |
|
|
| .pomodoro-status { |
| font-size: 13px; |
| color: var(--text-tertiary); |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
|
|
| .pomodoro-controls { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .pomodoro-btn { |
| width: 36px; |
| height: 36px; |
| border: none; |
| border-radius: 50%; |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| border: 1px solid var(--border); |
| cursor: pointer; |
| transition: var(--transition); |
| color: var(--text-secondary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 15px; |
| } |
|
|
| .pomodoro-btn:hover { |
| background: var(--primary); |
| color: white; |
| border-color: transparent; |
| transform: scale(1.1); |
| } |
|
|
| .pomodoro-btn.active { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| color: white; |
| border-color: transparent; |
| box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3); |
| } |
|
|
| .pomodoro-stats { |
| display: flex; |
| gap: 16px; |
| margin-left: auto; |
| } |
|
|
| .pomodoro-stat { |
| text-align: center; |
| } |
|
|
| .pomodoro-stat strong { |
| display: block; |
| font-size: 18px; |
| color: var(--text-primary); |
| } |
|
|
| .pomodoro-stat span { |
| font-size: 11px; |
| color: var(--text-tertiary); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
|
|
| .stats-modal-content { |
| max-width: 700px; |
| } |
|
|
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 14px; |
| margin-bottom: 20px; |
| } |
|
|
| .stats-card { |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-lg); |
| padding: 18px; |
| text-align: center; |
| } |
|
|
| .stats-card .stat-value { |
| font-size: 32px; |
| font-weight: 800; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .stats-card .stat-label { |
| font-size: 12px; |
| color: var(--text-tertiary); |
| margin-top: 4px; |
| } |
|
|
| .stats-chart { |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-lg); |
| padding: 20px; |
| } |
|
|
| .stats-chart h4 { |
| font-size: 15px; |
| font-weight: 600; |
| margin-bottom: 14px; |
| color: var(--text-primary); |
| } |
|
|
| .chart-bars { |
| display: flex; |
| align-items: flex-end; |
| gap: 6px; |
| height: 140px; |
| padding-top: 10px; |
| } |
|
|
| .chart-bar { |
| flex: 1; |
| border-radius: 4px 4px 0 0; |
| background: linear-gradient(to top, var(--primary), var(--secondary)); |
| transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1); |
| min-height: 4px; |
| position: relative; |
| cursor: pointer; |
| } |
|
|
| .chart-bar:hover { |
| opacity: 0.8; |
| } |
|
|
| .chart-bar-label { |
| position: absolute; |
| bottom: -20px; |
| left: 50%; |
| transform: translateX(-50%); |
| font-size: 10px; |
| color: var(--text-tertiary); |
| white-space: nowrap; |
| } |
|
|
| .chart-bar-value { |
| position: absolute; |
| top: -18px; |
| left: 50%; |
| transform: translateX(-50%); |
| font-size: 10px; |
| font-weight: 600; |
| color: var(--primary); |
| opacity: 0; |
| transition: var(--transition); |
| } |
|
|
| .chart-bar:hover .chart-bar-value { |
| opacity: 1; |
| } |
|
|
| .shortcuts-modal-content { |
| max-width: 500px; |
| } |
|
|
| .shortcuts-grid { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .shortcut-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 10px 14px; |
| background: var(--glass-bg); |
| backdrop-filter: blur(4px); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .shortcut-item span { |
| font-size: 14px; |
| color: var(--text-primary); |
| } |
|
|
| .shortcut-key { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 4px 10px; |
| background: var(--bg-tertiary); |
| border-radius: 6px; |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--text-secondary); |
| font-family: inherit; |
| border: 1px solid var(--border); |
| } |
|
|
| @media (max-width: 1024px) { |
| .sidebar { |
| width: 260px; |
| } |
|
|
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .calendar-grid { |
| gap: 4px; |
| } |
|
|
| .calendar-cell { |
| min-height: 60px; |
| padding: 4px; |
| font-size: 12px; |
| } |
|
|
| .quick-actions { |
| padding: 12px 16px 0; |
| } |
|
|
| .insight-panel { |
| grid-template-columns: 1fr; |
| } |
|
|
| .quick-add { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .quick-add input[type="text"], |
| .quick-add input[type="date"], |
| .quick-add select { |
| width: 100%; |
| min-width: 0; |
| } |
|
|
| .sidebar { |
| position: fixed; |
| left: -300px; |
| z-index: 999; |
| height: 100vh; |
| } |
|
|
| .sidebar.active { |
| left: 0; |
| box-shadow: var(--shadow-xl); |
| } |
|
|
| .sidebar-toggle { |
| display: flex; |
| } |
|
|
| .main-header { |
| padding: 14px 16px; |
| height: auto; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
|
|
| .header-left h2 { |
| font-size: 20px; |
| } |
|
|
| .search-box input { |
| width: 160px; |
| } |
|
|
| .search-box input:focus { |
| width: 200px; |
| } |
|
|
| .tasks-container { |
| padding: 12px 16px 90px; |
| } |
|
|
| .tasks-container.grid-view { |
| grid-template-columns: 1fr; |
| } |
|
|
| .form-row { |
| grid-template-columns: 1fr; |
| } |
|
|
| .fab { |
| bottom: 20px; |
| right: 20px; |
| width: 52px; |
| height: 52px; |
| font-size: 20px; |
| } |
|
|
| .pomodoro-inner { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .pomodoro-stats { |
| margin-left: 0; |
| } |
| } |
|
|
| .animate-bounce-in { |
| animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); |
| } |
|
|
| @keyframes bounceIn { |
| 0% { opacity: 0; transform: scale(0.3); } |
| 50% { opacity: 1; transform: scale(1.05); } |
| 70% { transform: scale(0.9); } |
| 100% { transform: scale(1); } |
| } |
|
|
