fun/Task-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

credit abis

Browse Source
This commit is contained in:
root
2026-03-27 00:14:49 +07:00
parent f89fcbee1c
commit 937033ea07
6 changed files with 265 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
public/css/style.css
View File

@@ -30,11 +30,62 @@ a { text-decoration: none; color: var(--primary); }
a:hover { text-decoration: underline; }
.app-container { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar h2 { font-size: 1.15rem; margin-bottom: 1.5rem; color: var(--primary); }
.nav-link { padding: 0.6rem 0.9rem; border-radius: 0.5rem; text-decoration: none !important; color: var(--text); font-weight: 500; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
width: 240px; background: var(--surface); border-right: 1px solid var(--border);
padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.75rem;
position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
transition: width 0.25s cubic-bezier(.4,0,.2,1); flex-shrink: 0;
position: relative;
}
.sidebar-brand {
display: flex; align-items: center; gap: 8px; font-size: 1.1rem;
font-weight: 700; color: var(--primary); margin-bottom: 0.75rem;
white-space: nowrap; overflow: hidden;
}
/* Toggle button pinned to right edge */
.sidebar-toggle-btn {
position: absolute; top: 1.5rem; right: -14px;
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--border); background: var(--surface);
color: var(--text-light); font-size: 0.65rem;
cursor: pointer; display: flex; align-items: center; justify-content: center;
z-index: 20; transition: background 0.15s, color 0.15s, border-color 0.15s;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sidebar-toggle-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Nav link: icon always visible, label collapses */
.nav-link {
padding: 0.6rem 0.75rem; border-radius: 0.5rem;
text-decoration: none !important; color: var(--text); font-weight: 500;
transition: background 0.2s; display: flex; align-items: center;
gap: 0.65rem; font-size: 0.875rem; white-space: nowrap; overflow: hidden;
position: relative;
}
.nav-link:hover, .nav-link.active { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
.nav-link .badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.75rem; }
.nav-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.95rem; }
.sidebar-label { overflow: hidden; transition: opacity 0.2s; opacity: 1; flex: 1; }
.nav-link .badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.72rem; margin-left: auto; }
/* ── Collapsed State ────────────────────────────────────────────────────── */
body.sidebar-collapsed .sidebar { width: 64px; }
body.sidebar-collapsed .sidebar-label { opacity: 0; width: 0; pointer-events: none; }
body.sidebar-collapsed .nav-link { justify-content: center; padding: 0.65rem; gap: 0; }
body.sidebar-collapsed .nav-link .badge { position: absolute; top: 2px; right: 2px; padding: 1px 4px; font-size: 0.6rem; }
body.sidebar-collapsed .sidebar-toggle-btn .fa-chevron-left { display: block; }
/* Tooltip on collapsed nav links */
body.sidebar-collapsed .nav-link { position: relative; }
body.sidebar-collapsed .nav-link::after {
content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%;
transform: translateY(-50%); background: var(--text); color: var(--surface);
padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100;
}
body.sidebar-collapsed .nav-link:hover::after { opacity: 1; }
.main-content { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; max-height: 100vh; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
@@ -97,6 +148,16 @@ body.dark-mode .project-item:hover { background: rgba(255,255,255,0.03); }
flex-shrink: 0;
}
.user-avatar-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.2); }
/* Notification count badge overlaid on avatar */
.avatar-notif-badge {
position: absolute; top: -3px; right: -3px;
background: #EF4444; color: #fff; font-size: 0.6rem; font-weight: 700;
min-width: 17px; height: 17px; border-radius: 10px; border: 2px solid var(--bg);
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 10; padding: 0 3px; line-height: 1;
animation: badge-pop 0.3s cubic-bezier(.17,.67,.83,.67);
}
@keyframes badge-pop { 0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)} }
.user-dropdown-menu {
display: none; position: absolute; top: calc(100% + 8px); right: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem;
@@ -123,6 +184,19 @@ body.dark-mode .project-item:hover { background: rgba(255,255,255,0.03); }
.user-dropdown-logout:hover { background: rgba(239,68,68,0.07) !important; }
.user-dropdown-logout i { color: #EF4444 !important; }
/* ── Activity log scrollbar fix ────────────────────────────────────────── */
.log-list {
display: flex; flex-direction: column; gap: 0.5rem;
overflow-y: auto; flex: 1; max-height: 360px;
padding-right: 8px; /* prevent scrollbar from eating time */
scrollbar-gutter: stable; /* modern browsers reserve scrollbar space */
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.log-list::-webkit-scrollbar { width: 4px; }
.log-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.log-list::-webkit-scrollbar-track { background: transparent; }
/* ── Notes / Google Keep Style ───────────────────────────────────────────── */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.note-card {