Session 2026-05-29: tasks page redesign, projects sidebar, invoicing fix
- Tasks page: tabs (All/To Do/In Progress/In Review/Completed) in header, removed grid view, 70/30 split with projects card - Projects card: sortable table, dynamic height fills viewport - Removed Projects page and nav links; redirects → /tasks - Invoice dedup: prevent double-charge when multiple submissions per revision version - Dashboard table style applied to tasks table (10px headers, 5px cell padding, transparent cells) - stat cards: removed "Tasks" header, moved Total Tasks to far right Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
+124
-14
@@ -24,6 +24,7 @@
|
||||
linear-gradient(180deg, #111111 0%, #0d0d0d 42%, #0a0a0a 100%);
|
||||
--card-bg: rgba(255, 255, 255, 0.02);
|
||||
--card-bg-2: rgba(255, 255, 255, 0.08);
|
||||
--popup-bg: rgba(13,13,13,0.88);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a8a8a8;
|
||||
--text-muted: #666666;
|
||||
@@ -31,6 +32,9 @@
|
||||
--interactive-hover-border: rgba(245, 165, 35, 0.3);
|
||||
--interactive-row-hover: rgba(255,255,255,0.03);
|
||||
--file-row-alt-bg: rgba(255,255,255,0.02);
|
||||
--overlay-scrim: rgba(0,0,0,0.58);
|
||||
--popup-shadow: 0 24px 64px rgba(0,0,0,0.5);
|
||||
--avatar-inner-ring: #111111;
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
}
|
||||
@@ -51,6 +55,7 @@
|
||||
linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #ffffff 100%);
|
||||
--card-bg: rgba(0,0,0,0.02);
|
||||
--card-bg-2: rgba(0,0,0,0.08);
|
||||
--popup-bg: rgba(255,255,255,0.92);
|
||||
--text-primary: #0d0d0d;
|
||||
--text-secondary: rgba(0,0,0,0.6);
|
||||
--text-muted: rgba(0,0,0,0.38);
|
||||
@@ -58,6 +63,9 @@
|
||||
--interactive-hover-border: rgba(0,0,0,0.2);
|
||||
--interactive-row-hover: rgba(0,0,0,0.025);
|
||||
--file-row-alt-bg: rgba(0,0,0,0.02);
|
||||
--overlay-scrim: rgba(255,255,255,0.72);
|
||||
--popup-shadow: 0 16px 42px rgba(0,0,0,0.18);
|
||||
--avatar-inner-ring: #ffffff;
|
||||
}
|
||||
[data-theme="light"] input[type="text"],
|
||||
[data-theme="light"] input[type="email"],
|
||||
@@ -169,7 +177,7 @@ body {
|
||||
.sidebar-link {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 10px 8px; border-radius: 4px;
|
||||
padding: 10px 8px; border-radius: 8px;
|
||||
color: var(--sidebar-text); text-decoration: none;
|
||||
font-size: 13px; font-weight: 500;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
@@ -190,7 +198,7 @@ body {
|
||||
transform: translateY(-50%);
|
||||
background: var(--sidebar-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
@@ -204,7 +212,20 @@ body {
|
||||
.sidebar-link:hover .nav-label { opacity: 1; }
|
||||
[data-theme="light"] .nav-label { color: #0d0d0d; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||||
.sidebar-tools-divider,
|
||||
.sidebar-tools-label { display: none; }
|
||||
.sidebar-tools-label { display: block; }
|
||||
.sidebar-tools-divider {
|
||||
height: 1px;
|
||||
margin: 10px 12px;
|
||||
background: var(--border);
|
||||
}
|
||||
.sidebar-tools-label {
|
||||
padding: 0 12px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.grid-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: background 0.15s; }
|
||||
.grid-card:hover { background: var(--card-bg-2); }
|
||||
[data-theme="light"] .grid-card:hover { background: #fafafa; }
|
||||
@@ -251,7 +272,8 @@ body {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: scroll;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
@@ -261,28 +283,55 @@ body {
|
||||
.hot-items-row { cursor: pointer; }
|
||||
.hot-items-row:hover td { background: rgba(255,255,255,0.04); }
|
||||
.site-header-right { display: flex; align-items: center; gap: 0; }
|
||||
.site-header-search-wrap { position: relative; margin-right: 7px; }
|
||||
.site-header-search-btn { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; }
|
||||
.site-header-search-wrap { position: relative; margin-right: 7px; width: 300px; flex: 0 0 300px; }
|
||||
.site-header-search-btn { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; }
|
||||
.site-header-search-btn:hover { color: var(--accent); }
|
||||
.site-header-search-btn svg { width: 16px; height: 16px; }
|
||||
.site-header-search { width: 240px; height: 34px; background: var(--card-bg-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 13px; padding: 0 12px 0 34px; outline: none; font-family: inherit; transition: border-color 0.15s, width 0.2s; }
|
||||
.site-header-search:focus { border-color: var(--accent); width: 300px; }
|
||||
.site-header-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; }
|
||||
.site-header-search,
|
||||
input.site-header-search[type="text"] {
|
||||
width: 300px;
|
||||
height: var(--h-control);
|
||||
background: var(--card-bg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
padding: 3px 12px 0 38px;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.site-header-search::placeholder,
|
||||
input.site-header-search[type="text"]::placeholder {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: 1;
|
||||
}
|
||||
.site-header-search:focus,
|
||||
input.site-header-search[type="text"]:focus { border-color: var(--accent); }
|
||||
.site-header-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; }
|
||||
.site-header-search-icon svg { width: 14px; height: 14px; }
|
||||
.site-header-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 340px; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 300; overflow: hidden; }
|
||||
.site-header-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 340px; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 300; overflow: hidden; }
|
||||
.site-header-dropdown { animation: ui-fade-up var(--motion-fast) var(--motion-ease); }
|
||||
.site-header-dropdown-group { padding: 8px 12px 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
|
||||
.site-header-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary); border: 1px solid transparent; }
|
||||
.site-header-dropdown-item:hover { color: #fff; }
|
||||
.site-header-dropdown-empty { padding: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }
|
||||
.site-header-avatar-wrap { position: relative; margin-left: 14px; }
|
||||
.site-header-theme-toggle { background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
|
||||
.site-header-theme-toggle { background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
|
||||
.site-header-theme-toggle:hover { color: var(--accent); }
|
||||
.site-header-theme-toggle svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
|
||||
.site-header-avatar-btn { width: 49px; height: 49px; border-radius: 50%; background: var(--card-bg-2); border: 2px solid #111; outline: 2px solid var(--accent); outline-offset: 0; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; padding: 0; }
|
||||
.site-header-avatar-btn:hover { opacity: 0.85; }
|
||||
[data-theme="light"] .site-header-avatar-btn { border-color: #fff; }
|
||||
.site-header-avatar-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 300; min-width: 160px; overflow: hidden; }
|
||||
.site-header-avatar-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 300; min-width: 160px; overflow: hidden; }
|
||||
.site-header-avatar-menu { animation: ui-fade-up var(--motion-fast) var(--motion-ease); }
|
||||
.site-header-avatar-item { padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text-primary); display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; font-family: inherit; }
|
||||
.site-header-avatar-item:hover { color: #fff; }
|
||||
@@ -292,6 +341,39 @@ body {
|
||||
.main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||||
.main-content::-webkit-scrollbar-thumb:hover { background: var(--interactive-hover-border); }
|
||||
|
||||
.scrollbar-thin-theme {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
.scrollbar-thin-theme::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.scrollbar-thin-theme::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.scrollbar-thin-theme::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.scrollbar-thin-theme:hover {
|
||||
scrollbar-color: var(--interactive-hover-border) transparent;
|
||||
}
|
||||
.scrollbar-thin-theme:focus-within {
|
||||
scrollbar-color: var(--interactive-hover-border) transparent;
|
||||
}
|
||||
.scrollbar-thin-theme:hover::-webkit-scrollbar-thumb,
|
||||
.scrollbar-thin-theme:focus-within::-webkit-scrollbar-thumb,
|
||||
.scrollbar-thin-theme::-webkit-scrollbar-thumb:active {
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, var(--border) 38%), color-mix(in srgb, var(--accent) 42%, var(--border) 58%));
|
||||
}
|
||||
.scrollbar-thin-theme::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, var(--border) 28%), color-mix(in srgb, var(--accent) 52%, var(--border) 48%));
|
||||
}
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
margin-bottom: 24px; display: flex;
|
||||
@@ -987,6 +1069,14 @@ textarea {
|
||||
|
||||
/* Badges */
|
||||
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 400; white-space: nowrap; letter-spacing: 0.3px; }
|
||||
.badge-status {
|
||||
min-width: 78px;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.badge-not_started { background: #222; color: #888; border: 1px solid #333; }
|
||||
.badge-in_progress { background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3); }
|
||||
.badge-on_hold { background: rgba(217,119,6,0.15); color: #fbbf24; border: 1px solid rgba(217,119,6,0.3); }
|
||||
@@ -1015,8 +1105,28 @@ th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 400; te
|
||||
td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-primary); }
|
||||
|
||||
tr:hover td { background: rgba(255,255,255,0.02); }
|
||||
.table-link { color: var(--accent); text-decoration: none; font-weight: 400; }
|
||||
.table-link:hover { text-decoration: underline; }
|
||||
.table-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.table-link:hover,
|
||||
.table-link:focus-visible {
|
||||
color: var(--accent) !important;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.table-sticky-head thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: transparent !important;
|
||||
}
|
||||
.table-scroll-fade {
|
||||
position: static;
|
||||
}
|
||||
.dashboard-inline-link {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
Reference in New Issue
Block a user