| |
| |
| |
| |
| |
| |
| |
|
|
| |
| |
| |
|
|
| :root { |
| |
| --primary-color: #4a90d9; |
| --primary-hover: #3a7bc8; |
| --primary-light: #e8f2fc; |
| |
| |
| --success-color: #28a745; |
| --success-light: #d4edda; |
| --warning-color: #ffc107; |
| --warning-light: #fff3cd; |
| --danger-color: #dc3545; |
| --danger-light: #f8d7da; |
| --info-color: #17a2b8; |
| --info-light: #d1ecf1; |
| |
| |
| --high-priority: #dc3545; |
| --medium-priority: #ffc107; |
| --low-priority: #28a745; |
| |
| |
| --bg-primary: #f8f9fa; |
| --bg-secondary: #ffffff; |
| --bg-tertiary: #e9ecef; |
| --bg-dark: #343a40; |
| |
| |
| --text-primary: #212529; |
| --text-secondary: #6c757d; |
| --text-muted: #adb5bd; |
| --text-light: #ffffff; |
| |
| |
| --border-color: #dee2e6; |
| --border-radius: 8px; |
| --border-radius-lg: 12px; |
| --border-radius-sm: 4px; |
| --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); |
| |
| |
| --transition-fast: 0.15s ease; |
| --transition-normal: 0.25s ease; |
| --transition-slow: 0.4s ease; |
| |
| |
| --spacing-xs: 4px; |
| --spacing-sm: 8px; |
| --spacing-md: 16px; |
| --spacing-lg: 24px; |
| --spacing-xl: 32px; |
| |
| |
| --font-size-xs: 12px; |
| --font-size-sm: 14px; |
| --font-size-md: 16px; |
| --font-size-lg: 18px; |
| --font-size-xl: 24px; |
| --font-size-xxl: 32px; |
| |
| |
| --sidebar-width: 260px; |
| --sidebar-collapsed: 70px; |
| |
| |
| --header-height: 70px; |
| } |
|
|
| |
| [data-theme="dark"] { |
| --bg-primary: #1a1d21; |
| --bg-secondary: #222629; |
| --bg-tertiary: #2d3238; |
| --bg-dark: #16191c; |
| |
| --text-primary: #e9ecef; |
| --text-secondary: #adb5bd; |
| --text-muted: #6c757d; |
| |
| --border-color: #3d4248; |
| |
| --primary-light: #1e3a5f; |
| --success-light: #1e3d2f; |
| --warning-light: #3d3a1f; |
| --danger-light: #3d1e22; |
| --info-light: #1e3d3f; |
| } |
|
|
| |
| [data-color="green"] { |
| --primary-color: #28a745; |
| --primary-hover: #218838; |
| --primary-light: #d4edda; |
| } |
|
|
| [data-color="purple"] { |
| --primary-color: #6f42c1; |
| --primary-hover: #5a32a3; |
| --primary-light: #e2d9f3; |
| } |
|
|
| [data-color="orange"] { |
| --primary-color: #fd7e14; |
| --primary-hover: #e66a02; |
| --primary-light: #ffe5d0; |
| } |
|
|
| [data-color="pink"] { |
| --primary-color: #e83e8c; |
| --primary-hover: #d62c7a; |
| --primary-light: #f5d6e8; |
| } |
|
|
| |
| |
| |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| html { |
| font-size: 16px; |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.6; |
| overflow-x: hidden; |
| direction: rtl; |
| transition: background-color var(--transition-normal), color var(--transition-normal); |
| } |
|
|
| |
| body[data-font-size="small"] { |
| font-size: 14px; |
| } |
|
|
| body[data-font-size="large"] { |
| font-size: 18px; |
| } |
|
|
| a { |
| text-decoration: none; |
| color: inherit; |
| } |
|
|
| ul { |
| list-style: none; |
| } |
|
|
| button { |
| font-family: inherit; |
| cursor: pointer; |
| border: none; |
| outline: none; |
| background: none; |
| } |
|
|
| input, select, textarea { |
| font-family: inherit; |
| font-size: inherit; |
| outline: none; |
| border: none; |
| } |
|
|
| img { |
| max-width: 100%; |
| height: auto; |
| } |
|
|
| |
| |
| |
|
|
| .loading-screen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(135deg, var(--primary-color), #2d6cb5); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 9999; |
| transition: opacity 0.5s ease, visibility 0.5s ease; |
| } |
|
|
| .loading-screen.hidden { |
| opacity: 0; |
| visibility: hidden; |
| } |
|
|
| .loading-content { |
| text-align: center; |
| color: white; |
| } |
|
|
| .loading-spinner { |
| width: 60px; |
| height: 60px; |
| border: 4px solid rgba(255, 255, 255, 0.3); |
| border-top-color: white; |
| border-radius: 50%; |
| margin: 0 auto 20px; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| .loading-content h2 { |
| font-size: var(--font-size-xl); |
| margin-bottom: 10px; |
| } |
|
|
| .loading-content p { |
| opacity: 0.9; |
| } |
|
|
| |
| |
| |
|
|
| .login-page { |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, var(--primary-color) 0%, #2d6cb5 100%); |
| padding: 20px; |
| } |
|
|
| .login-page.hidden { |
| display: none; |
| } |
|
|
| .login-container { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow-lg); |
| width: 100%; |
| max-width: 420px; |
| padding: 40px; |
| animation: slideUp 0.5s ease; |
| } |
|
|
| @keyframes slideUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .login-header { |
| text-align: center; |
| margin-bottom: 30px; |
| } |
|
|
| .login-header .logo { |
| width: 80px; |
| height: 80px; |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto 15px; |
| font-size: 36px; |
| color: white; |
| box-shadow: 0 8px 20px rgba(74, 144, 217, 0.3); |
| } |
|
|
| .login-header h1 { |
| font-size: var(--font-size-xl); |
| color: var(--text-primary); |
| margin-bottom: 5px; |
| } |
|
|
| .login-header p { |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .login-form { |
| animation: fadeIn 0.3s ease; |
| } |
|
|
| .login-form.hidden { |
| display: none; |
| } |
|
|
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
|
|
| .form-group { |
| margin-bottom: 20px; |
| position: relative; |
| } |
|
|
| .form-group label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 500; |
| color: var(--text-primary); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .form-group input, |
| .form-group select, |
| .form-group textarea { |
| width: 100%; |
| padding: 14px 16px; |
| padding-left: 45px; |
| border: 2px solid var(--border-color); |
| border-radius: var(--border-radius); |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| font-size: var(--font-size-md); |
| transition: border-color var(--transition-fast), box-shadow var(--transition-fast); |
| } |
|
|
| .form-group textarea { |
| min-height: 120px; |
| resize: vertical; |
| padding-left: 16px; |
| } |
|
|
| .form-group input:focus, |
| .form-group select:focus, |
| .form-group textarea:focus { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px var(--primary-light); |
| } |
|
|
| .form-group input::placeholder { |
| color: var(--text-muted); |
| } |
|
|
| .form-group > i { |
| position: absolute; |
| right: 16px; |
| bottom: 14px; |
| color: var(--text-muted); |
| font-size: var(--font-size-md); |
| } |
|
|
| .form-group input:focus + i, |
| .form-group:has(input:focus) > i { |
| color: var(--primary-color); |
| } |
|
|
| .form-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| } |
|
|
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 12px 24px; |
| border-radius: var(--border-radius); |
| font-weight: 600; |
| font-size: var(--font-size-md); |
| transition: all var(--transition-fast); |
| cursor: pointer; |
| border: none; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); |
| color: white; |
| box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3); |
| } |
|
|
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 16px rgba(74, 144, 217, 0.4); |
| } |
|
|
| .btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--border-color); |
| } |
|
|
| .btn-block { |
| width: 100%; |
| } |
|
|
| .btn-icon { |
| width: 40px; |
| height: 40px; |
| padding: 0; |
| border-radius: var(--border-radius); |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| } |
|
|
| .btn-icon:hover { |
| background: var(--border-color); |
| } |
|
|
| .btn-social { |
| width: 100%; |
| margin-bottom: 12px; |
| padding: 14px; |
| border-radius: var(--border-radius); |
| font-weight: 500; |
| } |
|
|
| .btn-google { |
| background: #db4437; |
| color: white; |
| } |
|
|
| .btn-github { |
| background: #24292e; |
| color: white; |
| } |
|
|
| .login-options { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin: 20px 0; |
| font-size: var(--font-size-sm); |
| } |
|
|
| .remember-me { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| } |
|
|
| .remember-me input[type="checkbox"] { |
| width: 18px; |
| height: 18px; |
| cursor: pointer; |
| accent-color: var(--primary-color); |
| } |
|
|
| .forgot-password { |
| color: var(--primary-color); |
| transition: color var(--transition-fast); |
| } |
|
|
| .forgot-password:hover { |
| color: var(--primary-hover); |
| } |
|
|
| .divider { |
| display: flex; |
| align-items: center; |
| margin: 20px 0; |
| } |
|
|
| .divider::before, |
| .divider::after { |
| content: ''; |
| flex: 1; |
| height: 1px; |
| background: var(--border-color); |
| } |
|
|
| .divider span { |
| padding: 0 15px; |
| color: var(--text-muted); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .signup-link { |
| text-align: center; |
| margin-top: 20px; |
| color: var(--text-secondary); |
| } |
|
|
| .signup-link a { |
| color: var(--primary-color); |
| font-weight: 600; |
| } |
|
|
| |
| |
| |
|
|
| .main-app { |
| display: flex; |
| min-height: 100vh; |
| } |
|
|
| .main-app.hidden { |
| display: none; |
| } |
|
|
| |
| .sidebar { |
| width: var(--sidebar-width); |
| background: var(--bg-secondary); |
| border-left: 1px solid var(--border-color); |
| display: flex; |
| flex-direction: column; |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 100; |
| transition: width var(--transition-normal); |
| box-shadow: var(--box-shadow); |
| } |
|
|
| .sidebar.collapsed { |
| width: var(--sidebar-collapsed); |
| } |
|
|
| .sidebar.collapsed .logo span, |
| .sidebar.collapsed nav span, |
| .sidebar.collapsed .sidebar-footer span { |
| display: none; |
| } |
|
|
| .sidebar-header { |
| padding: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .sidebar .logo { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: var(--font-size-lg); |
| font-weight: 700; |
| color: var(--primary-color); |
| } |
|
|
| .sidebar .logo i { |
| font-size: 28px; |
| } |
|
|
| .sidebar-toggle { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| transition: all var(--transition-fast); |
| } |
|
|
| .sidebar-toggle:hover { |
| background: var(--primary-color); |
| color: white; |
| } |
|
|
| .sidebar-nav { |
| flex: 1; |
| padding: 20px 0; |
| overflow-y: auto; |
| } |
|
|
| .sidebar-nav ul { |
| padding: 0 12px; |
| } |
|
|
| .sidebar-nav li { |
| margin-bottom: 4px; |
| } |
|
|
| .sidebar-nav a { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 16px; |
| border-radius: var(--border-radius); |
| color: var(--text-secondary); |
| font-weight: 500; |
| transition: all var(--transition-fast); |
| } |
|
|
| .sidebar-nav a i { |
| width: 24px; |
| text-align: center; |
| font-size: var(--font-size-md); |
| } |
|
|
| .sidebar-nav li.active a, |
| .sidebar-nav a:hover { |
| background: var(--primary-light); |
| color: var(--primary-color); |
| } |
|
|
| .sidebar-footer { |
| padding: 20px 0; |
| border-top: 1px solid var(--border-color); |
| } |
|
|
| .sidebar-footer ul { |
| padding: 0 12px; |
| } |
|
|
| .sidebar-footer li { |
| margin-bottom: 4px; |
| } |
|
|
| |
| .main-content { |
| flex: 1; |
| margin-right: var(--sidebar-width); |
| transition: margin-right var(--transition-normal); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| body.sidebar-collapsed .main-content { |
| margin-right: var(--sidebar-collapsed); |
| } |
|
|
| |
| .main-header { |
| height: var(--header-height); |
| background: var(--bg-secondary); |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 24px; |
| position: sticky; |
| top: 0; |
| z-index: 50; |
| } |
|
|
| .header-right { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .menu-toggle { |
| display: none; |
| width: 40px; |
| height: 40px; |
| border-radius: var(--border-radius); |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| font-size: var(--font-size-lg); |
| } |
|
|
| .search-box { |
| position: relative; |
| } |
|
|
| .search-box i { |
| position: absolute; |
| right: 14px; |
| top: 50%; |
| transform: translateY(-50%); |
| color: var(--text-muted); |
| } |
|
|
| .search-box input { |
| width: 300px; |
| padding: 10px 16px; |
| padding-right: 45px; |
| border: 1px solid var(--border-color); |
| border-radius: 25px; |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| transition: all var(--transition-fast); |
| } |
|
|
| .search-box input:focus { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px var(--primary-light); |
| width: 350px; |
| } |
|
|
| .header-left { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .header-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .action-btn { |
| width: 42px; |
| height: 42px; |
| border-radius: 50%; |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| transition: all var(--transition-fast); |
| } |
|
|
| .action-btn:hover { |
| background: var(--primary-light); |
| color: var(--primary-color); |
| } |
|
|
| .action-btn .badge { |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| width: 20px; |
| height: 20px; |
| background: var(--danger-color); |
| color: white; |
| font-size: 11px; |
| font-weight: 600; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .user-btn { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 6px 12px 6px 20px; |
| border-radius: 25px; |
| background: var(--bg-tertiary); |
| transition: all var(--transition-fast); |
| } |
|
|
| .user-btn:hover { |
| background: var(--border-color); |
| } |
|
|
| .user-avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| object-fit: cover; |
| } |
|
|
| .user-name { |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| .user-btn i { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| |
| .dropdown-menu { |
| position: absolute; |
| top: 100%; |
| left: 0; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--border-radius); |
| box-shadow: var(--box-shadow-lg); |
| min-width: 200px; |
| opacity: 0; |
| visibility: hidden; |
| transform: translateY(10px); |
| transition: all var(--transition-fast); |
| z-index: 1000; |
| } |
|
|
| .dropdown-menu.active { |
| opacity: 1; |
| visibility: visible; |
| transform: translateY(5px); |
| } |
|
|
| .notifications-menu { |
| left: auto; |
| right: 0; |
| width: 350px; |
| max-height: 400px; |
| overflow: hidden; |
| } |
|
|
| .dropdown-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 15px; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .dropdown-header h4 { |
| font-size: var(--font-size-md); |
| color: var(--text-primary); |
| } |
|
|
| .mark-all-read { |
| font-size: var(--font-size-sm); |
| color: var(--primary-color); |
| cursor: pointer; |
| } |
|
|
| .notifications-list { |
| max-height: 300px; |
| overflow-y: auto; |
| } |
|
|
| .notification-item { |
| padding: 12px 15px; |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| gap: 12px; |
| cursor: pointer; |
| transition: background var(--transition-fast); |
| } |
|
|
| .notification-item:hover { |
| background: var(--bg-tertiary); |
| } |
|
|
| .notification-item.unread { |
| background: var(--primary-light); |
| } |
|
|
| .notification-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
|
|
| .notification-icon.task { |
| background: var(--primary-light); |
| color: var(--primary-color); |
| } |
|
|
| .notification-icon.comment { |
| background: var(--info-light); |
| color: var(--info-color); |
| } |
|
|
| .notification-icon.project { |
| background: var(--success-light); |
| color: var(--success-color); |
| } |
|
|
| .notification-content h5 { |
| font-size: var(--font-size-sm); |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .notification-content p { |
| font-size: var(--font-size-xs); |
| color: var(--text-secondary); |
| margin-bottom: 4px; |
| } |
|
|
| .notification-time { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| } |
|
|
| .user-menu { |
| left: auto; |
| right: 0; |
| min-width: 180px; |
| padding: 8px 0; |
| } |
|
|
| .user-menu a { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 15px; |
| color: var(--text-secondary); |
| transition: all var(--transition-fast); |
| } |
|
|
| .user-menu a:hover { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| } |
|
|
| .user-menu a i { |
| width: 20px; |
| text-align: center; |
| } |
|
|
| .user-menu .divider { |
| margin: 8px 15px; |
| height: 1px; |
| background: var(--border-color); |
| } |
|
|
| |
| .content-area { |
| flex: 1; |
| padding: 24px; |
| overflow-y: auto; |
| } |
|
|
| |
| .view { |
| display: none; |
| animation: fadeIn 0.3s ease; |
| } |
|
|
| .view.active { |
| display: block; |
| } |
|
|
| .view-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 24px; |
| } |
|
|
| .view-header h1 { |
| font-size: var(--font-size-xxl); |
| color: var(--text-primary); |
| } |
|
|
| .view-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .filter-group { |
| display: flex; |
| gap: 10px; |
| } |
|
|
| .filter-group select { |
| padding: 10px 15px; |
| border: 1px solid var(--border-color); |
| border-radius: var(--border-radius); |
| background: var(--bg-secondary); |
| color: var(--text-primary); |
| cursor: pointer; |
| min-width: 150px; |
| } |
|
|
| |
| |
| |
|
|
| .dashboard-stats { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); |
| gap: 20px; |
| margin-bottom: 24px; |
| } |
|
|
| .stat-card { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| padding: 24px; |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| box-shadow: var(--box-shadow); |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); |
| } |
|
|
| .stat-card:hover { |
| transform: translateY(-4px); |
| box-shadow: var(--box-shadow-lg); |
| } |
|
|
| .stat-icon { |
| width: 60px; |
| height: 60px; |
| border-radius: 15px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| } |
|
|
| .stat-icon.blue { |
| background: var(--primary-light); |
| color: var(--primary-color); |
| } |
|
|
| .stat-icon.green { |
| background: var(--success-light); |
| color: var(--success-color); |
| } |
|
|
| .stat-icon.orange { |
| background: var(--warning-light); |
| color: #d39e00; |
| } |
|
|
| .stat-icon.purple { |
| background: #f3e8ff; |
| color: #9333ea; |
| } |
|
|
| .stat-info h3 { |
| font-size: var(--font-size-xxl); |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .stat-info p { |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .dashboard-content { |
| display: grid; |
| grid-template-columns: 2fr 1fr; |
| gap: 24px; |
| } |
|
|
| .dashboard-main { |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| } |
|
|
| .dashboard-sidebar { |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| } |
|
|
| |
| .card { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| overflow: hidden; |
| } |
|
|
| .card-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .card-header h3 { |
| font-size: var(--font-size-lg); |
| color: var(--text-primary); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .card-header h3 i { |
| color: var(--primary-color); |
| } |
|
|
| .view-all { |
| color: var(--primary-color); |
| font-size: var(--font-size-sm); |
| font-weight: 500; |
| transition: color var(--transition-fast); |
| } |
|
|
| .view-all:hover { |
| color: var(--primary-hover); |
| } |
|
|
| .card-body { |
| padding: 20px; |
| } |
|
|
| |
| .progress-chart { |
| padding: 10px 0; |
| } |
|
|
| .progress-bar-container { |
| margin-bottom: 20px; |
| } |
|
|
| .progress-label { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 10px; |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| .progress-bar { |
| height: 12px; |
| background: var(--bg-tertiary); |
| border-radius: 6px; |
| overflow: hidden; |
| } |
|
|
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, var(--primary-color), var(--success-color)); |
| border-radius: 6px; |
| width: 0%; |
| transition: width 1s ease; |
| } |
|
|
| .chart-legend { |
| display: flex; |
| gap: 20px; |
| justify-content: center; |
| } |
|
|
| .legend-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| .legend-color { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| } |
|
|
| .legend-color.completed { |
| background: var(--success-color); |
| } |
|
|
| .legend-color.in-progress { |
| background: var(--primary-color); |
| } |
|
|
| .legend-color.pending { |
| background: var(--warning-color); |
| } |
|
|
| |
| .featured-tasks, |
| .today-tasks { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .task-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px; |
| background: var(--bg-primary); |
| border-radius: var(--border-radius); |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| } |
|
|
| .task-item:hover { |
| background: var(--bg-tertiary); |
| } |
|
|
| .task-item.completed .task-text { |
| text-decoration: line-through; |
| color: var(--text-muted); |
| } |
|
|
| .task-checkbox { |
| width: 22px; |
| height: 22px; |
| border: 2px solid var(--border-color); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| flex-shrink: 0; |
| } |
|
|
| .task-checkbox:hover { |
| border-color: var(--primary-color); |
| } |
|
|
| .task-item.completed .task-checkbox { |
| background: var(--success-color); |
| border-color: var(--success-color); |
| color: white; |
| } |
|
|
| .task-text { |
| flex: 1; |
| font-weight: 500; |
| color: var(--text-primary); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .task-priority-badge { |
| padding: 4px 10px; |
| border-radius: 12px; |
| font-size: var(--font-size-xs); |
| font-weight: 600; |
| } |
|
|
| .task-priority-badge.high { |
| background: var(--danger-light); |
| color: var(--danger-color); |
| } |
|
|
| .task-priority-badge.medium { |
| background: var(--warning-light); |
| color: #856404; |
| } |
|
|
| .task-priority-badge.low { |
| background: var(--success-light); |
| color: var(--success-color); |
| } |
|
|
| |
| .tasks-distribution { |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
|
|
| .distribution-item { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .distribution-info { |
| display: flex; |
| justify-content: space-between; |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| .distribution-bar { |
| height: 8px; |
| background: var(--bg-tertiary); |
| border-radius: 4px; |
| overflow: hidden; |
| } |
|
|
| .distribution-fill { |
| height: 100%; |
| border-radius: 4px; |
| transition: width 1s ease; |
| } |
|
|
| .distribution-fill.high { |
| background: var(--high-priority); |
| } |
|
|
| .distribution-fill.medium { |
| background: var(--medium-priority); |
| } |
|
|
| .distribution-fill.low { |
| background: var(--low-priority); |
| } |
|
|
| |
| |
| |
|
|
| .tasks-container { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| overflow: hidden; |
| } |
|
|
| .tasks-header { |
| display: grid; |
| grid-template-columns: 40px 2fr 1fr 100px 120px 120px 100px; |
| gap: 16px; |
| padding: 16px 20px; |
| background: var(--bg-tertiary); |
| border-bottom: 1px solid var(--border-color); |
| font-weight: 600; |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| } |
|
|
| .tasks-list { |
| min-height: 400px; |
| } |
|
|
| .task-row { |
| display: grid; |
| grid-template-columns: 40px 2fr 1fr 100px 120px 120px 100px; |
| gap: 16px; |
| padding: 16px 20px; |
| align-items: center; |
| border-bottom: 1px solid var(--border-color); |
| transition: background var(--transition-fast); |
| } |
|
|
| .task-row:hover { |
| background: var(--bg-tertiary); |
| } |
|
|
| .task-row.completed .task-row-title { |
| text-decoration: line-through; |
| color: var(--text-muted); |
| } |
|
|
| .task-row-actions { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .task-row-actions button { |
| width: 32px; |
| height: 32px; |
| border-radius: var(--border-radius-sm); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--text-secondary); |
| transition: all var(--transition-fast); |
| } |
|
|
| .task-row-actions button:hover { |
| background: var(--primary-light); |
| color: var(--primary-color); |
| } |
|
|
| .task-row-actions button.delete:hover { |
| background: var(--danger-light); |
| color: var(--danger-color); |
| } |
|
|
| |
| .empty-state { |
| display: none; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 60px 20px; |
| text-align: center; |
| } |
|
|
| .empty-state.show { |
| display: flex; |
| } |
|
|
| .empty-state i { |
| font-size: 64px; |
| color: var(--text-muted); |
| margin-bottom: 20px; |
| } |
|
|
| .empty-state h3 { |
| font-size: var(--font-size-xl); |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
|
|
| .empty-state p { |
| color: var(--text-secondary); |
| margin-bottom: 24px; |
| } |
|
|
| |
| |
| |
|
|
| .projects-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 24px; |
| } |
|
|
| .project-card { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| overflow: hidden; |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); |
| } |
|
|
| .project-card:hover { |
| transform: translateY(-4px); |
| box-shadow: var(--box-shadow-lg); |
| } |
|
|
| .project-header { |
| height: 120px; |
| position: relative; |
| } |
|
|
| .project-color-bar { |
| height: 100%; |
| width: 100%; |
| } |
|
|
| .project-actions-overlay { |
| position: absolute; |
| top: 10px; |
| left: 10px; |
| display: flex; |
| gap: 8px; |
| opacity: 0; |
| transition: opacity var(--transition-fast); |
| } |
|
|
| .project-card:hover .project-actions-overlay { |
| opacity: 1; |
| } |
|
|
| .project-actions-overlay button { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: white; |
| color: var(--text-secondary); |
| box-shadow: var(--box-shadow); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all var(--transition-fast); |
| } |
|
|
| .project-actions-overlay button:hover { |
| background: var(--primary-color); |
| color: white; |
| } |
|
|
| .project-body { |
| padding: 20px; |
| } |
|
|
| .project-title { |
| font-size: var(--font-size-lg); |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
|
|
| .project-description { |
| color: var(--text-secondary); |
| font-size: var(--font-size-sm); |
| margin-bottom: 16px; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
|
|
| .project-meta { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding-top: 16px; |
| border-top: 1px solid var(--border-color); |
| } |
|
|
| .project-progress { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .project-progress-bar { |
| width: 100px; |
| height: 6px; |
| background: var(--bg-tertiary); |
| border-radius: 3px; |
| overflow: hidden; |
| } |
|
|
| .project-progress-fill { |
| height: 100%; |
| background: var(--primary-color); |
| border-radius: 3px; |
| } |
|
|
| .project-progress-text { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| } |
|
|
| .project-tasks-count { |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| |
| |
| |
|
|
| .kanban-board { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 24px; |
| min-height: 500px; |
| } |
|
|
| .kanban-column { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .column-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 16px 20px; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .column-header h3 { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: var(--font-size-md); |
| color: var(--text-primary); |
| } |
|
|
| .column-header .task-count { |
| background: var(--bg-tertiary); |
| padding: 4px 10px; |
| border-radius: 12px; |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| .column-content { |
| flex: 1; |
| padding: 16px; |
| overflow-y: auto; |
| min-height: 200px; |
| } |
|
|
| .kanban-card { |
| background: var(--bg-primary); |
| border-radius: var(--border-radius); |
| padding: 16px; |
| margin-bottom: 12px; |
| cursor: grab; |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); |
| border: 1px solid transparent; |
| } |
|
|
| .kanban-card:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--box-shadow); |
| border-color: var(--primary-color); |
| } |
|
|
| .kanban-card.dragging { |
| opacity: 0.5; |
| cursor: grabbing; |
| } |
|
|
| .kanban-card-title { |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
|
|
| .kanban-card-meta { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| } |
|
|
| .kanban-card-project { |
| padding: 2px 8px; |
| border-radius: 4px; |
| background: var(--primary-light); |
| color: var(--primary-color); |
| font-weight: 500; |
| } |
|
|
| .add-task-to-column { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 12px; |
| margin: 12px; |
| border: 2px dashed var(--border-color); |
| border-radius: var(--border-radius); |
| color: var(--text-muted); |
| font-weight: 500; |
| transition: all var(--transition-fast); |
| } |
|
|
| .add-task-to-column:hover { |
| border-color: var(--primary-color); |
| color: var(--primary-color); |
| background: var(--primary-light); |
| } |
|
|
| |
| |
| |
|
|
| .calendar-nav { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .calendar-nav h3 { |
| min-width: 180px; |
| text-align: center; |
| } |
|
|
| .calendar-container { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| padding: 20px; |
| } |
|
|
| .calendar-header { |
| display: grid; |
| grid-template-columns: repeat(7, 1fr); |
| gap: 8px; |
| margin-bottom: 10px; |
| } |
|
|
| .day-name { |
| text-align: center; |
| font-weight: 600; |
| color: var(--text-secondary); |
| padding: 10px; |
| } |
|
|
| .calendar-grid { |
| display: grid; |
| grid-template-columns: repeat(7, 1fr); |
| gap: 8px; |
| } |
|
|
| .calendar-day { |
| aspect-ratio: 1; |
| min-height: 100px; |
| border: 1px solid var(--border-color); |
| border-radius: var(--border-radius); |
| padding: 8px; |
| background: var(--bg-primary); |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| } |
|
|
| .calendar-day:hover { |
| border-color: var(--primary-color); |
| } |
|
|
| .calendar-day.other-month { |
| opacity: 0.4; |
| } |
|
|
| .calendar-day.today { |
| border-color: var(--primary-color); |
| background: var(--primary-light); |
| } |
|
|
| .calendar-day-number { |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
|
|
| .calendar-tasks { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .calendar-task { |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-size: var(--font-size-xs); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| cursor: pointer; |
| } |
|
|
| .calendar-task.high { |
| background: var(--danger-light); |
| color: var(--danger-color); |
| } |
|
|
| .calendar-task.medium { |
| background: var(--warning-light); |
| color: #856404; |
| } |
|
|
| .calendar-task.low { |
| background: var(--success-light); |
| color: var(--success-color); |
| } |
|
|
| .calendar-task.completed { |
| background: var(--bg-tertiary); |
| color: var(--text-muted); |
| text-decoration: line-through; |
| } |
|
|
| .calendar-legend { |
| display: flex; |
| gap: 20px; |
| justify-content: center; |
| margin-top: 20px; |
| } |
|
|
| .legend-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| } |
|
|
| .legend-dot.high { |
| background: var(--high-priority); |
| } |
|
|
| .legend-dot.medium { |
| background: var(--medium-priority); |
| } |
|
|
| .legend-dot.low { |
| background: var(--low-priority); |
| } |
|
|
| .legend-dot.completed { |
| background: var(--text-muted); |
| } |
|
|
| |
| |
| |
|
|
| .team-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 24px; |
| } |
|
|
| .team-member-card { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| padding: 24px; |
| text-align: center; |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); |
| } |
|
|
| .team-member-card:hover { |
| transform: translateY(-4px); |
| box-shadow: var(--box-shadow-lg); |
| } |
|
|
| .member-avatar { |
| width: 80px; |
| height: 80px; |
| border-radius: 50%; |
| object-fit: cover; |
| margin-bottom: 16px; |
| border: 4px solid var(--primary-light); |
| } |
|
|
| .member-name { |
| font-size: var(--font-size-lg); |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .member-role { |
| color: var(--primary-color); |
| font-size: var(--font-size-sm); |
| font-weight: 500; |
| margin-bottom: 16px; |
| } |
|
|
| .member-stats { |
| display: flex; |
| justify-content: center; |
| gap: 24px; |
| padding-top: 16px; |
| border-top: 1px solid var(--border-color); |
| } |
|
|
| .member-stat { |
| text-align: center; |
| } |
|
|
| .member-stat-value { |
| font-size: var(--font-size-xl); |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .member-stat-label { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| } |
|
|
| |
| |
| |
|
|
| .analytics-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 24px; |
| } |
|
|
| .analytics-card { |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| } |
|
|
| .analytics-card.large { |
| grid-column: span 2; |
| } |
|
|
| .card-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .card-header h3 { |
| font-size: var(--font-size-lg); |
| color: var(--text-primary); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .card-header h3 i { |
| color: var(--primary-color); |
| } |
|
|
| .chart-container { |
| padding: 20px; |
| height: 300px; |
| } |
|
|
| |
| .completion-rate { |
| display: flex; |
| justify-content: center; |
| padding: 20px; |
| } |
|
|
| .rate-circle { |
| position: relative; |
| width: 180px; |
| height: 180px; |
| } |
|
|
| .rate-circle svg { |
| transform: rotate(-90deg); |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .rate-circle circle { |
| fill: none; |
| stroke-width: 8; |
| } |
|
|
| .rate-circle .bg { |
| stroke: var(--bg-tertiary); |
| } |
|
|
| .rate-circle .progress { |
| stroke: var(--primary-color); |
| stroke-linecap: round; |
| stroke-dasharray: 283; |
| stroke-dashoffset: 283; |
| transition: stroke-dashoffset 1.5s ease; |
| } |
|
|
| .rate-value { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: var(--font-size-xxl); |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| |
| .top-performers { |
| padding: 10px 0; |
| } |
|
|
| .performer-item { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 0; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .performer-item:last-child { |
| border-bottom: none; |
| } |
|
|
| .performer-rank { |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| font-size: var(--font-size-sm); |
| } |
|
|
| .performer-rank.gold { |
| background: linear-gradient(135deg, #ffd700, #ffb700); |
| color: #5c4100; |
| } |
|
|
| .performer-rank.silver { |
| background: linear-gradient(135deg, #c0c0c0, #a0a0a0); |
| color: #333; |
| } |
|
|
| .performer-rank.bronze { |
| background: linear-gradient(135deg, #cd7f32, #a66928); |
| color: white; |
| } |
|
|
| .performer-info { |
| flex: 1; |
| } |
|
|
| .performer-name { |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .performer-tasks { |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| |
| |
| |
|
|
| .settings-container { |
| display: grid; |
| grid-template-columns: 240px 1fr; |
| gap: 24px; |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow); |
| overflow: hidden; |
| } |
|
|
| .settings-sidebar { |
| background: var(--bg-tertiary); |
| padding: 20px 0; |
| } |
|
|
| .settings-sidebar ul li { |
| margin-bottom: 4px; |
| } |
|
|
| .settings-sidebar a { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 20px; |
| color: var(--text-secondary); |
| font-weight: 500; |
| transition: all var(--transition-fast); |
| } |
|
|
| .settings-sidebar a i { |
| width: 20px; |
| text-align: center; |
| } |
|
|
| .settings-sidebar li.active a, |
| .settings-sidebar a:hover { |
| background: var(--bg-secondary); |
| color: var(--primary-color); |
| } |
|
|
| .settings-content { |
| padding: 30px; |
| } |
|
|
| .settings-panel { |
| display: none; |
| animation: fadeIn 0.3s ease; |
| } |
|
|
| .settings-panel.active { |
| display: block; |
| } |
|
|
| .settings-panel h2 { |
| font-size: var(--font-size-xl); |
| color: var(--text-primary); |
| margin-bottom: 24px; |
| padding-bottom: 16px; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .settings-options { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .setting-item { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 16px; |
| background: var(--bg-primary); |
| border-radius: var(--border-radius); |
| } |
|
|
| .setting-info h4 { |
| font-size: var(--font-size-md); |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .setting-info p { |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| |
| .toggle-switch { |
| position: relative; |
| width: 52px; |
| height: 28px; |
| } |
|
|
| .toggle-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
|
|
| .toggle-switch .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: var(--bg-tertiary); |
| border-radius: 28px; |
| transition: var(--transition-fast); |
| } |
|
|
| .toggle-switch .slider::before { |
| position: absolute; |
| content: ""; |
| height: 22px; |
| width: 22px; |
| right: 3px; |
| bottom: 3px; |
| background-color: white; |
| border-radius: 50%; |
| transition: var(--transition-fast); |
| box-shadow: var(--box-shadow); |
| } |
|
|
| .toggle-switch input:checked + .slider { |
| background-color: var(--primary-color); |
| } |
|
|
| .toggle-switch input:checked + .slider::before { |
| transform: translateX(-24px); |
| } |
|
|
| |
| .color-options { |
| display: flex; |
| gap: 10px; |
| } |
|
|
| .color-option { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| border: 3px solid transparent; |
| cursor: pointer; |
| transition: transform var(--transition-fast), border-color var(--transition-fast); |
| } |
|
|
| .color-option:hover { |
| transform: scale(1.1); |
| } |
|
|
| .color-option.blue { |
| background: #4a90d9; |
| } |
|
|
| .color-option.green { |
| background: #28a745; |
| } |
|
|
| .color-option.purple { |
| background: #6f42c1; |
| } |
|
|
| .color-option.orange { |
| background: #fd7e14; |
| } |
|
|
| .color-option.pink { |
| background: #e83e8c; |
| } |
|
|
| .color-option.active { |
| border-color: var(--text-primary); |
| } |
|
|
| |
| |
| |
|
|
| .modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 1000; |
| display: none; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| } |
|
|
| .modal.active { |
| display: flex; |
| } |
|
|
| .modal-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.5); |
| backdrop-filter: blur(4px); |
| } |
|
|
| .modal-content { |
| position: relative; |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow-lg); |
| width: 100%; |
| max-width: 500px; |
| max-height: 90vh; |
| overflow-y: auto; |
| animation: modalSlideIn 0.3s ease; |
| } |
|
|
| .modal-content.large { |
| max-width: 700px; |
| } |
|
|
| @keyframes modalSlideIn { |
| from { |
| opacity: 0; |
| transform: translateY(-30px) scale(0.95); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| } |
|
|
| .modal-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .modal-header h3 { |
| font-size: var(--font-size-lg); |
| color: var(--text-primary); |
| } |
|
|
| .modal-close { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all var(--transition-fast); |
| } |
|
|
| .modal-close:hover { |
| background: var(--danger-light); |
| color: var(--danger-color); |
| } |
|
|
| .modal form { |
| padding: 20px; |
| } |
|
|
| .modal-footer { |
| display: flex; |
| justify-content: flex-end; |
| gap: 12px; |
| padding-top: 20px; |
| border-top: 1px solid var(--border-color); |
| margin-top: 20px; |
| } |
|
|
| |
| .checkbox-label { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| cursor: pointer; |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| .checkbox-label input[type="checkbox"] { |
| width: 20px; |
| height: 20px; |
| accent-color: var(--primary-color); |
| } |
|
|
| |
| .task-details-content { |
| padding: 20px; |
| } |
|
|
| .task-detail-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: 20px; |
| } |
|
|
| .task-detail-title { |
| font-size: var(--font-size-xl); |
| color: var(--text-primary); |
| } |
|
|
| .task-detail-meta { |
| display: flex; |
| gap: 16px; |
| flex-wrap: wrap; |
| margin-bottom: 20px; |
| } |
|
|
| .task-detail-meta span { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 12px; |
| background: var(--bg-tertiary); |
| border-radius: var(--border-radius); |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| .task-detail-meta span i { |
| color: var(--primary-color); |
| } |
|
|
| .task-detail-description { |
| padding: 16px; |
| background: var(--bg-primary); |
| border-radius: var(--border-radius); |
| margin-bottom: 20px; |
| } |
|
|
| .task-detail-description h4 { |
| font-size: var(--font-size-md); |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
|
|
| .task-detail-description p { |
| color: var(--text-secondary); |
| line-height: 1.8; |
| } |
|
|
| |
| |
| |
|
|
| .quick-add-popup { |
| position: fixed; |
| bottom: 30px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 500; |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius-lg); |
| box-shadow: var(--box-shadow-lg); |
| padding: 12px 16px; |
| animation: slideUp 0.3s ease; |
| } |
|
|
| .quick-add-popup.hidden { |
| display: none; |
| } |
|
|
| .quick-add-content { |
| display: flex; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| .quick-add-content input { |
| width: 300px; |
| padding: 12px 16px; |
| border: 2px solid var(--border-color); |
| border-radius: var(--border-radius); |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| font-size: var(--font-size-md); |
| } |
|
|
| .quick-add-content input:focus { |
| border-color: var(--primary-color); |
| } |
|
|
| |
| |
| |
|
|
| .toast-container { |
| position: fixed; |
| top: 90px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 2000; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .toast { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 14px 20px; |
| background: var(--bg-secondary); |
| border-radius: var(--border-radius); |
| box-shadow: var(--box-shadow-lg); |
| animation: toastSlideIn 0.3s ease; |
| min-width: 300px; |
| } |
|
|
| @keyframes toastSlideIn { |
| from { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .toast.success { |
| border-right: 4px solid var(--success-color); |
| } |
|
|
| .toast.error { |
| border-right: 4px solid var(--danger-color); |
| } |
|
|
| .toast.warning { |
| border-right: 4px solid var(--warning-color); |
| } |
|
|
| .toast.info { |
| border-right: 4px solid var(--info-color); |
| } |
|
|
| .toast-icon { |
| font-size: var(--font-size-lg); |
| } |
|
|
| .toast.success .toast-icon { |
| color: var(--success-color); |
| } |
|
|
| .toast.error .toast-icon { |
| color: var(--danger-color); |
| } |
|
|
| .toast.warning .toast-icon { |
| color: var(--warning-color); |
| } |
|
|
| .toast.info .toast-icon { |
| color: var(--info-color); |
| } |
|
|
| .toast-message { |
| flex: 1; |
| color: var(--text-primary); |
| font-weight: 500; |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 1200px) { |
| .dashboard-content { |
| grid-template-columns: 1fr; |
| } |
| |
| .analytics-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .analytics-card.large { |
| grid-column: span 1; |
| } |
| } |
|
|
| @media (max-width: 992px) { |
| .sidebar { |
| transform: translateX(100%); |
| } |
| |
| .sidebar.active { |
| transform: translateX(0); |
| } |
| |
| .main-content { |
| margin-right: 0; |
| } |
| |
| .menu-toggle { |
| display: flex; |
| } |
| |
| .search-box input { |
| width: 200px; |
| } |
| |
| .search-box input:focus { |
| width: 250px; |
| } |
| |
| .kanban-board { |
| grid-template-columns: 1fr; |
| overflow-x: auto; |
| } |
| |
| .tasks-header, |
| .task-row { |
| grid-template-columns: 40px 1fr 80px; |
| } |
| |
| .task-project, |
| .task-due-date { |
| display: none; |
| } |
| |
| .settings-container { |
| grid-template-columns: 1fr; |
| } |
| |
| .settings-sidebar { |
| display: flex; |
| overflow-x: auto; |
| padding: 10px; |
| } |
| |
| .settings-sidebar ul { |
| display: flex; |
| gap: 8px; |
| } |
| |
| .settings-sidebar li { |
| flex-shrink: 0; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .header-right { |
| flex: 1; |
| } |
| |
| .search-box { |
| display: none; |
| } |
| |
| .user-name { |
| display: none; |
| } |
| |
| .view-header { |
| flex-direction: column; |
| gap: 16px; |
| align-items: flex-start; |
| } |
| |
| .view-actions { |
| width: 100%; |
| flex-wrap: wrap; |
| } |
| |
| .filter-group { |
| width: 100%; |
| flex-wrap: wrap; |
| } |
| |
| .filter-group select { |
| flex: 1; |
| min-width: 120px; |
| } |
| |
| .dashboard-stats { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .stat-card { |
| flex-direction: column; |
| text-align: center; |
| } |
| |
| .calendar-header { |
| display: none; |
| } |
| |
| .calendar-grid { |
| grid-template-columns: repeat(7, 1fr); |
| } |
| |
| .calendar-day { |
| min-height: 60px; |
| } |
| |
| .calendar-tasks { |
| display: none; |
| } |
| |
| .modal-content { |
| margin: 10px; |
| max-height: calc(100vh - 20px); |
| } |
| |
| .form-row { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .content-area { |
| padding: 16px; |
| } |
| |
| .dashboard-stats { |
| grid-template-columns: 1fr; |
| } |
| |
| .stat-card { |
| flex-direction: row; |
| text-align: right; |
| } |
| |
| .projects-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .team-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .tasks-header { |
| display: none; |
| } |
| |
| .task-row { |
| grid-template-columns: 1fr; |
| gap: 8px; |
| } |
| |
| .task-checkbox { |
| position: absolute; |
| top: 16px; |
| left: 16px; |
| } |
| |
| .task-row { |
| position: relative; |
| padding-left: 50px; |
| } |
| |
| .user-btn { |
| padding: 6px; |
| } |
| |
| .user-btn img { |
| width: 32px; |
| height: 32px; |
| } |
| |
| .quick-add-content input { |
| width: 200px; |
| } |
| } |
|
|
| |
| |
| |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--bg-tertiary); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--text-muted); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--text-secondary); |
| } |
|
|
| |
| ::selection { |
| background: var(--primary-color); |
| color: white; |
| } |
|
|
| |
| :focus-visible { |
| outline: 2px solid var(--primary-color); |
| outline-offset: 2px; |
| } |
|
|
| |
| [data-tooltip] { |
| position: relative; |
| } |
|
|
| [data-tooltip]::after { |
| content: attr(data-tooltip); |
| position: absolute; |
| bottom: 100%; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 6px 12px; |
| background: var(--bg-dark); |
| color: white; |
| font-size: var(--font-size-xs); |
| border-radius: var(--border-radius-sm); |
| white-space: nowrap; |
| opacity: 0; |
| visibility: hidden; |
| transition: all var(--transition-fast); |
| pointer-events: none; |
| z-index: 100; |
| } |
|
|
| [data-tooltip]:hover::after { |
| opacity: 1; |
| visibility: visible; |
| bottom: calc(100% + 8px); |
| } |
|
|
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
|
|
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 10px rgba(74, 144, 217, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(74, 144, 217, 0); |
| } |
| } |
|
|
| .shake { |
| animation: shake 0.5s ease; |
| } |
|
|
| @keyframes shake { |
| 0%, 100% { transform: translateX(0); } |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } |
| } |
|
|
| |
|
|
