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