| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
|
| | |
| | |
| | |
| |
|
| | :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); } |
| | } |
| |
|
| | |
| |
|
