Session 2026-05-28: profile page overhaul, nav fixes, dashboard activity links
- Fix nav links not working from profile page (useEffect infinite re-render via unstable profile object ref)
- Fix nav hover/active: gold icon highlight, no background change; active links non-clickable
- Fix hover layout shift: add border: 1px solid transparent to all interactive elements
- Header icon buttons (search, theme toggle) now highlight gold on hover
- Profile page: replace calendar with activity feed (60/40 grid), add stat cards (tasks completed, active projects, revision requests, submissions)
- Profile card: title field, icon rows for location/email/linkedin, member since + role bottom-right, edit button top-right
- Profile portrait: remove wrapper column, fix left-gap alignment
- Add profiles.title migration
- Dashboard recent activity: name → /profile/{id}, task → /requests/{id} (clickable links)
- Icon-only sidebar with gold active/hover state, pointer-events: none on active links
- layout.md updated with profile page geometry rules
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
+353
-198
@@ -8,6 +8,10 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--motion-fast: 160ms;
|
||||
--motion-base: 220ms;
|
||||
--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--h-control: 30px;
|
||||
--sidebar-bg: #0d0d0d;
|
||||
--sidebar-text: #888888;
|
||||
--sidebar-active-text: #ffffff;
|
||||
@@ -15,34 +19,43 @@
|
||||
--sidebar-hover-bg: #1a1a1a;
|
||||
--accent: #F5A523;
|
||||
--accent-hover: #e09510;
|
||||
--bg: #111111;
|
||||
--card-bg: #1a1a1a;
|
||||
--card-bg-2: #222222;
|
||||
--bg:
|
||||
radial-gradient(560px circle at 58% -6%, rgba(245, 165, 35, 0.16) 0%, rgba(245, 165, 35, 0.105) 24%, rgba(245, 165, 35, 0.055) 48%, rgba(245, 165, 35, 0.018) 72%, rgba(245, 165, 35, 0) 100%),
|
||||
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);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a8a8a8;
|
||||
--text-muted: #666666;
|
||||
--border: #2a2a2a;
|
||||
--interactive-hover-border: #3a3a3a;
|
||||
--interactive-row-hover: rgba(255,255,255,0.02);
|
||||
--border: rgba(245, 165, 35, 0.15);
|
||||
--interactive-hover-border: rgba(245, 165, 35, 0.3);
|
||||
--interactive-row-hover: rgba(255,255,255,0.03);
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
}
|
||||
|
||||
@keyframes ui-fade-up {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--sidebar-bg: #1a1a1a;
|
||||
--sidebar-text: #888888;
|
||||
--sidebar-active-text: #ffffff;
|
||||
--sidebar-active-bg: #2a2a2a;
|
||||
--sidebar-hover-bg: #2a2a2a;
|
||||
--bg: #f4f4f4;
|
||||
--card-bg: #ffffff;
|
||||
--card-bg-2: #f0f0f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #5a5a5a;
|
||||
--text-muted: #999999;
|
||||
--border: #e0e0e0;
|
||||
--interactive-hover-border: #d0d0d0;
|
||||
--interactive-row-hover: #fafafa;
|
||||
--sidebar-bg: #ffffff;
|
||||
--sidebar-text: rgba(0,0,0,0.45);
|
||||
--sidebar-active-text: #0d0d0d;
|
||||
--sidebar-active-bg: rgba(0,0,0,0.1);
|
||||
--sidebar-hover-bg: rgba(0,0,0,0.08);
|
||||
--bg:
|
||||
radial-gradient(560px circle at 58% -6%, rgba(78,78,78,0.42) 0%, rgba(78,78,78,0.29) 24%, rgba(78,78,78,0.16) 48%, rgba(78,78,78,0.06) 72%, rgba(78,78,78,0) 100%),
|
||||
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);
|
||||
--text-primary: #0d0d0d;
|
||||
--text-secondary: rgba(0,0,0,0.6);
|
||||
--text-muted: rgba(0,0,0,0.38);
|
||||
--border: rgba(0,0,0,0.1);
|
||||
--interactive-hover-border: rgba(0,0,0,0.2);
|
||||
--interactive-row-hover: rgba(0,0,0,0.025);
|
||||
}
|
||||
[data-theme="light"] input[type="text"],
|
||||
[data-theme="light"] input[type="email"],
|
||||
@@ -102,23 +115,25 @@ body {
|
||||
.app-layout { display: flex; height: 100vh; overflow: hidden; }
|
||||
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
width: 76px;
|
||||
min-width: 76px;
|
||||
background: var(--sidebar-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 0;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid var(--border);
|
||||
transition: width 0.2s ease, min-width 0.2s ease;
|
||||
top: 24px; left: 24px;
|
||||
height: calc(100vh - 48px);
|
||||
overflow: visible;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
padding: 0 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 12px 24px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -127,70 +142,89 @@ body {
|
||||
height: auto;
|
||||
}
|
||||
.brand-logo-sidebar {
|
||||
width: 140px;
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.sidebar-pin-toggle {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #333;
|
||||
background: transparent;
|
||||
color: var(--sidebar-text);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sidebar-pin-toggle:hover {
|
||||
background: var(--sidebar-hover-bg);
|
||||
color: #fff;
|
||||
[data-theme="dark"] .brand-logo-sidebar {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.brand-logo-auth {
|
||||
width: 200px;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
.sidebar-logo h1 { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
|
||||
.sidebar-logo h1 { font-size: 18px; font-weight: 400; color: #fff; letter-spacing: -0.3px; }
|
||||
.sidebar-logo span { font-size: 12px; color: var(--sidebar-text); }
|
||||
|
||||
.sidebar-section { padding: 0 12px; margin-bottom: 8px; }
|
||||
.sidebar-section { padding: 0 8px; margin-bottom: 8px; }
|
||||
.sidebar-section-label {
|
||||
font-size: 10px; font-weight: 600; text-transform: uppercase;
|
||||
font-size: 10px; font-weight: 400; text-transform: uppercase;
|
||||
letter-spacing: 0.8px; color: #444; padding: 0 8px; margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 9px 12px; border-radius: 4px;
|
||||
justify-content: center;
|
||||
padding: 10px 8px; border-radius: 4px;
|
||||
color: var(--sidebar-text); text-decoration: none;
|
||||
font-size: 13px; font-weight: 500;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
cursor: pointer; border: none; background: none;
|
||||
cursor: pointer; border: 1px solid transparent; background: none;
|
||||
width: 100%; text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-link:hover { background: var(--sidebar-hover-bg); color: #fff; }
|
||||
.sidebar-link.active { background: var(--sidebar-active-bg); color: #fff; border: 1px solid rgba(245,165,35,0.3); }
|
||||
.sidebar-link:hover .nav-icon,
|
||||
.sidebar-link.active .nav-icon { color: var(--accent); opacity: 1; }
|
||||
.sidebar-link.active { cursor: default; pointer-events: none; }
|
||||
.sidebar-link .icon { font-size: 15px; width: 18px; text-align: center; opacity: 0.7; }
|
||||
.nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; opacity: 0.7; color: inherit; transition: color var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
|
||||
.nav-icon svg { width: 16px; height: 16px; display: block; }
|
||||
.nav-label {
|
||||
position: absolute;
|
||||
left: calc(100% + 10px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--sidebar-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
z-index: 300;
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
|
||||
.sidebar-bottom {
|
||||
margin-top: auto; padding: 16px 12px 0;
|
||||
margin-top: auto; padding: 16px 8px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.sidebar-bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
.sidebar-theme-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 7px 10px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
@@ -198,76 +232,79 @@ body {
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar-theme-toggle:hover {
|
||||
background: var(--sidebar-hover-bg);
|
||||
color: #fff;
|
||||
}
|
||||
.sidebar-theme-toggle:hover { color: #fff; }
|
||||
.sidebar-user { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-avatar {
|
||||
width: 30px; height: 30px; border-radius: 4px;
|
||||
background: var(--accent); display: flex; align-items: center;
|
||||
justify-content: center; color: #1a1a1a; font-size: 12px;
|
||||
font-weight: 700; flex-shrink: 0;
|
||||
font-weight: 400; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-user-info { overflow: hidden; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.sidebar-user-info { display: none; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.sidebar-user-role { font-size: 11px; color: var(--sidebar-text); text-transform: capitalize; }
|
||||
|
||||
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
|
||||
.main-wrapper { transition: margin-left 0.2s ease; }
|
||||
.main-content { flex: 1; padding: 32px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
|
||||
|
||||
.app-layout.sidebar-collapsed .sidebar {
|
||||
width: 76px;
|
||||
min-width: 76px;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .main-wrapper {
|
||||
margin-left: 76px;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-logo {
|
||||
padding: 0 12px 52px;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .brand-logo-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-pin-toggle {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-avatar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-user-info {
|
||||
display: none;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-bottom {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-bottom-actions {
|
||||
justify-content: center;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-theme-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
.main-wrapper { margin-left: 100px; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
|
||||
.main-content { flex: 1; padding: 24px; overflow-y: scroll; display: block; min-height: 0; scrollbar-gutter: stable; }
|
||||
.site-header { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; flex-shrink: 0; position: relative; z-index: 50; }
|
||||
.site-header-greeting { font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.3px; }
|
||||
.site-header-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
|
||||
.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-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-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 { 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: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 { 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; }
|
||||
.site-header-avatar-divider { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
.main-content::-webkit-scrollbar { width: 8px; }
|
||||
.main-content::-webkit-scrollbar-track { background: var(--bg); }
|
||||
.main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||||
.main-content::-webkit-scrollbar-thumb:hover { background: var(--interactive-hover-border); }
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
margin-bottom: 24px; display: flex;
|
||||
align-items: flex-start; justify-content: space-between; gap: 16px;
|
||||
background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px;
|
||||
align-items: flex-end; justify-content: space-between; gap: 16px;
|
||||
border-bottom: 1px solid var(--border); padding-bottom: 20px;
|
||||
position: sticky; top: 0; background: rgba(13,13,13,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 10;
|
||||
flex-shrink: 0; padding-top: 32px;
|
||||
}
|
||||
.page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
|
||||
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
|
||||
.page-title { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: -0.3px; }
|
||||
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
|
||||
.dashboard-banner { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
.page-header-left { display: flex; flex-direction: column; justify-content: flex-end; }
|
||||
.dashboard-greeting { font-size: 35px !important; letter-spacing: -0.5px; }
|
||||
.dashboard-header-stats { display: flex; align-items: flex-end; gap: 0; align-self: flex-end; }
|
||||
.dashboard-header-stat { display: flex; flex-direction: column; align-items: flex-end; padding: 0 14px; border-right: 1px solid var(--border); }
|
||||
.dashboard-header-stat:last-child { border-right: none; padding-right: 0; }
|
||||
.dashboard-header-stat-label { font-size: 9px; font-weight: 400; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
|
||||
.dashboard-header-stat-value { font-size: 15px; font-weight: 400; color: var(--text-primary); margin-top: 2px; }
|
||||
|
||||
/* Cards */
|
||||
.card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; }
|
||||
.card-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
|
||||
.card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 15px; }
|
||||
.card-title { font-size: 14px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
|
||||
.page-toolbar {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@@ -302,7 +339,18 @@ body {
|
||||
|
||||
/* Stats */
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
|
||||
.stat-card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; }
|
||||
.dash-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; }
|
||||
.profile-top-grid { display: grid; grid-template-columns: 60fr 40fr; gap: 24px; align-items: start; }
|
||||
.stat-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 20px; }
|
||||
.stat-bar { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 24px; flex-shrink: 0; }
|
||||
.stat-bar-item { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(245,165,35,0.15); border-right: none; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
|
||||
.stat-bar-header { display: flex; align-items: flex-start; justify-content: space-between; }
|
||||
.stat-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
|
||||
.stat-bar-item:last-child { border-right: 1px solid rgba(245,165,35,0.15); border-radius: 0 4px 4px 0; }
|
||||
.stat-bar-item:first-child { border-radius: 4px 0 0 4px; }
|
||||
[data-theme="light"] .stat-bar-item { background: rgba(255,255,255,0.7); border-color: rgba(245,165,35,0.2); }
|
||||
.stat-bar-label { font-size: 10px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
|
||||
.stat-bar-value { font-size: 32px; font-weight: 400; color: var(--text-primary); line-height: 1; }
|
||||
.stat-card-highlight {
|
||||
border-color: rgba(245, 165, 35, 0.45);
|
||||
background:
|
||||
@@ -310,7 +358,7 @@ body {
|
||||
var(--card-bg);
|
||||
box-shadow: inset 0 0 0 1px rgba(245, 165, 35, 0.08);
|
||||
}
|
||||
.stat-value { font-size: 32px; font-weight: 700; color: var(--text-primary); letter-spacing: -1px; }
|
||||
.stat-value { font-size: 32px; font-weight: 400; color: var(--text-primary); letter-spacing: -1px; }
|
||||
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
.stat-icon { display: none; }
|
||||
.dashboard-chart-grid {
|
||||
@@ -320,8 +368,10 @@ body {
|
||||
}
|
||||
.dashboard-chart-card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
}
|
||||
.dashboard-chart-content {
|
||||
@@ -330,6 +380,28 @@ body {
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.pie-charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.pie-charts-grid { grid-template-columns: 1fr; }
|
||||
.pie-chart-cell-first { border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.profile-top-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.dashboard-bottom-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.pie-chart-cell {
|
||||
padding: 20px;
|
||||
}
|
||||
.pie-chart-cell-first {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.dashboard-pie-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -409,14 +481,16 @@ body {
|
||||
.status-stat-card,
|
||||
.status-component {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg-2);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.status-stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
@@ -437,8 +511,10 @@ body {
|
||||
|
||||
.status-meter {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg-2);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
@@ -479,8 +555,10 @@ body {
|
||||
|
||||
.meeting-note-content {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg-2);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -493,7 +571,7 @@ body {
|
||||
|
||||
.meeting-note-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@@ -519,7 +597,7 @@ body {
|
||||
max-width: none;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
@@ -536,7 +614,7 @@ body {
|
||||
height: 3px;
|
||||
z-index: 10;
|
||||
background: transparent;
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -583,11 +661,11 @@ body {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card-bg-2);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
padding: 7px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -654,7 +732,7 @@ body {
|
||||
min-height: 38px;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
background: var(--card-bg);
|
||||
@@ -668,7 +746,7 @@ body {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -684,7 +762,7 @@ body {
|
||||
white-space: nowrap;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.file-name-button {
|
||||
@@ -727,7 +805,7 @@ body {
|
||||
color: var(--text-secondary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 17px;
|
||||
line-height: 1;
|
||||
@@ -737,6 +815,9 @@ body {
|
||||
color: var(--text-primary);
|
||||
background: var(--interactive-row-hover);
|
||||
}
|
||||
[data-theme="light"] .btn-icon:hover:not(:disabled) {
|
||||
background: rgba(0,0,0,0.06);
|
||||
}
|
||||
.btn-icon:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
@@ -765,7 +846,7 @@ body {
|
||||
min-width: 280px;
|
||||
max-width: min(420px, calc(100% - 40px));
|
||||
border: 1px solid rgba(245, 165, 35, 0.45);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg);
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
@@ -775,20 +856,20 @@ body {
|
||||
.file-drop-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--accent);
|
||||
color: #111;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
font-weight: 400;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.file-drop-title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@@ -821,8 +902,8 @@ body {
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 9px 18px; border-radius: 4px; font-size: 13px;
|
||||
font-weight: 600; cursor: pointer; border: 1px solid transparent;
|
||||
height: var(--h-control); padding: 0 14px; border-radius: 4px; font-size: 13px;
|
||||
font-weight: 400; cursor: pointer; border: 1px solid transparent;
|
||||
transition: all 0.15s; text-decoration: none; white-space: nowrap;
|
||||
font-family: inherit; line-height: 1;
|
||||
}
|
||||
@@ -848,7 +929,7 @@ body {
|
||||
@keyframes btn-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.btn-sm { padding: 5px 12px; font-size: 12px; line-height: 1; }
|
||||
.btn-sm { padding: 0 12px; font-size: 12px; line-height: 1; }
|
||||
.btn-primary { background: var(--accent); color: #111111; }
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
|
||||
@@ -859,10 +940,44 @@ body {
|
||||
.btn-warning:hover { background: var(--accent-hover); }
|
||||
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
|
||||
.btn-danger:hover { background: var(--danger); color: white; }
|
||||
.btn-lg { padding: 13px 28px; font-size: 15px; }
|
||||
.btn-lg { height: auto; padding: 11px 28px; font-size: 15px; }
|
||||
|
||||
/* Shared interaction smoothing */
|
||||
.sidebar-link,
|
||||
.site-header-search,
|
||||
.site-header-search-btn,
|
||||
.site-header-theme-toggle,
|
||||
.site-header-avatar-btn,
|
||||
.site-header-dropdown-item,
|
||||
.site-header-avatar-item,
|
||||
.grid-card,
|
||||
.card,
|
||||
.request-card,
|
||||
.btn,
|
||||
.dashboard-inline-link,
|
||||
.tab-btn,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--motion-ease),
|
||||
color var(--motion-fast) var(--motion-ease),
|
||||
border-color var(--motion-fast) var(--motion-ease),
|
||||
box-shadow var(--motion-base) var(--motion-ease),
|
||||
opacity var(--motion-fast) var(--motion-ease),
|
||||
transform var(--motion-fast) var(--motion-ease);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; }
|
||||
.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-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); }
|
||||
@@ -885,36 +1000,58 @@ body {
|
||||
[data-theme="light"] .badge-needs_revision { background: #dc2626; color: #fff; border-color: #b91c1c; }
|
||||
|
||||
/* Table */
|
||||
.table-wrapper { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); }
|
||||
.table-wrapper { overflow-x: auto; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: var(--card-bg); border-bottom: 1px solid var(--border); }
|
||||
th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); background: rgba(255,255,255,0.07); border-bottom: 1px solid var(--border); }
|
||||
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: 600; }
|
||||
.table-link { color: var(--accent); text-decoration: none; font-weight: 400; }
|
||||
.table-link:hover { text-decoration: underline; }
|
||||
.dashboard-inline-link {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.dashboard-inline-link:hover,
|
||||
.dashboard-inline-link:focus-visible {
|
||||
color: var(--accent) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: 18px; }
|
||||
label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
label { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
input[type="text"], input[type="email"], input[type="date"], input[type="password"], select, textarea {
|
||||
width: 100%; padding: 10px 14px; border: 1px solid var(--border);
|
||||
border-radius: 6px; font-size: 14px; color: var(--text-primary);
|
||||
width: 100%; padding: 0 14px; height: var(--h-control); border: 1px solid var(--border);
|
||||
border-radius: 4px; font-size: 14px; color: var(--text-primary);
|
||||
background: var(--card-bg-2); outline: none; transition: border 0.15s; font-family: inherit;
|
||||
line-height: 1;
|
||||
}
|
||||
select {
|
||||
-webkit-appearance: none; -moz-appearance: none; appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
|
||||
}
|
||||
input::placeholder, textarea::placeholder { color: var(--text-muted); }
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(245,165,35,0.1);
|
||||
}
|
||||
textarea { resize: vertical; min-height: 100px; }
|
||||
textarea { resize: vertical; height: auto; min-height: 100px; padding: 8px 14px; }
|
||||
select option { background: #222; color: #fff; }
|
||||
|
||||
/* Auth */
|
||||
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0d0d0d; padding: 20px; }
|
||||
.auth-card { background: #1a1a1a; border-radius: 8px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; }
|
||||
.auth-card { background: #1a1a1a; border-radius: 4px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; }
|
||||
.auth-logo { text-align: center; margin-bottom: 32px; }
|
||||
.auth-logo h1 { font-size: 22px; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; }
|
||||
.auth-logo h1 { font-size: 22px; font-weight: 400; color: #ffffff; letter-spacing: -0.5px; }
|
||||
.auth-logo p { font-size: 13px; color: #888; margin-top: 6px; }
|
||||
.auth-card label { color: var(--text-secondary); }
|
||||
.auth-card input[type="text"],
|
||||
@@ -934,11 +1071,11 @@ select option { background: #222; color: #fff; }
|
||||
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #444; font-size: 12px; }
|
||||
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
||||
.quick-login { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
|
||||
.quick-login-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 10px; }
|
||||
.quick-login-title { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 10px; }
|
||||
.quick-login-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.quick-login-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 6px; border: 1px solid #2a2a2a; background: #222; cursor: pointer; transition: background 0.15s; text-align: left; width: 100%; }
|
||||
.quick-login-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 4px; border: 1px solid #2a2a2a; background: #222; cursor: pointer; transition: background 0.15s; text-align: left; width: 100%; }
|
||||
.quick-login-btn:hover { background: #2a2a2a; }
|
||||
.quick-login-name { font-size: 13px; font-weight: 600; color: #fff; }
|
||||
.quick-login-name { font-size: 13px; font-weight: 400; color: #fff; }
|
||||
.quick-login-email { font-size: 11px; color: #666; }
|
||||
|
||||
/* Misc */
|
||||
@@ -946,24 +1083,24 @@ select option { background: #222; color: #fff; }
|
||||
.back-link:hover { color: var(--text-primary); }
|
||||
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-secondary); }
|
||||
.empty-state-icon { display: none; }
|
||||
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.empty-state h3 { font-size: 15px; font-weight: 400; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.version-timeline { display: flex; flex-direction: column; gap: 12px; }
|
||||
.version-item { border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: var(--card-bg); }
|
||||
.version-item { border: 1px solid var(--border); border-radius: 4px; padding: 16px; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
|
||||
.version-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.version-number { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
|
||||
.version-number { font-size: 12px; font-weight: 400; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
|
||||
.version-meta { font-size: 12px; color: var(--text-secondary); margin-top: 8px; display: flex; gap: 16px; }
|
||||
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
|
||||
.detail-item label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.detail-item label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; }
|
||||
.detail-item p { font-size: 14px; color: var(--text-primary); font-weight: 500; }
|
||||
.notification { padding: 12px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
|
||||
.notification { padding: 12px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
|
||||
.notification-success { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
|
||||
.notification-info { background: rgba(37,99,235,0.1); color: #60a5fa; border: 1px solid rgba(37,99,235,0.2); }
|
||||
.request-card,
|
||||
.interactive-surface {
|
||||
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.request-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 0; }
|
||||
.request-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; margin-bottom: 0; }
|
||||
.request-card:hover,
|
||||
.interactive-surface:hover { border-color: var(--interactive-hover-border); }
|
||||
.request-card:hover { background: var(--interactive-row-hover); }
|
||||
@@ -976,7 +1113,7 @@ select option { background: #222; color: #fff; }
|
||||
background: var(--interactive-row-hover);
|
||||
}
|
||||
.request-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
|
||||
.request-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
|
||||
.request-card-title { font-size: 15px; font-weight: 400; color: var(--text-primary); }
|
||||
.request-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
|
||||
.request-title-inline-meta {
|
||||
margin-left: 8px;
|
||||
@@ -996,7 +1133,7 @@ select option { background: #222; color: #fff; }
|
||||
background: var(--card-bg-2);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.request-column-header {
|
||||
@@ -1006,7 +1143,7 @@ select option { background: #222; color: #fff; }
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--text-muted);
|
||||
@@ -1022,7 +1159,7 @@ select option { background: #222; color: #fff; }
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--text-muted);
|
||||
@@ -1045,14 +1182,14 @@ select option { background: #222; color: #fff; }
|
||||
gap: 12px;
|
||||
margin: 4px 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.request-toolbar-card { margin-bottom: 24px; }
|
||||
.filter-select {
|
||||
padding: 6px 10px;
|
||||
height: var(--h-control); padding: 0 32px 0 10px; line-height: 1;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card-bg);
|
||||
@@ -1061,6 +1198,9 @@ select option { background: #222; color: #fff; }
|
||||
cursor: pointer;
|
||||
width: 25%;
|
||||
min-width: 120px;
|
||||
-webkit-appearance: none; -moz-appearance: none; appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat; background-position: right 10px center;
|
||||
}
|
||||
.request-toolbar-grid {
|
||||
display: grid;
|
||||
@@ -1103,7 +1243,7 @@ select option { background: #222; color: #fff; }
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.assign-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; color: var(--text-primary); background: var(--card-bg-2); cursor: pointer; font-family: inherit; }
|
||||
.assign-select { height: var(--h-control); padding: 0 10px; border-radius: 4px; border: 1px solid var(--border); font-size: 13px; color: var(--text-primary); background: var(--card-bg-2); cursor: pointer; font-family: inherit; line-height: 1; }
|
||||
.assign-select option { background: #222; }
|
||||
.flex { display: flex; }
|
||||
.items-center { align-items: center; }
|
||||
@@ -1116,7 +1256,7 @@ select option { background: #222; color: #fff; }
|
||||
.mb-4 { margin-bottom: 16px; }
|
||||
.mb-6 { margin-bottom: 24px; }
|
||||
.w-full { width: 100%; }
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-bold { font-weight: 400; }
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
|
||||
@@ -1128,9 +1268,11 @@ select option { background: #222; color: #fff; }
|
||||
|
||||
.client-summary-tile {
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card-bg-2);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
@@ -1152,7 +1294,7 @@ select option { background: #222; color: #fff; }
|
||||
.client-inline-empty {
|
||||
padding: 20px 16px;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
@@ -1171,8 +1313,10 @@ select option { background: #222; color: #fff; }
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg-2);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1192,15 +1336,17 @@ select option { background: #222; color: #fff; }
|
||||
.client-project-card {
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.client-project-card-title {
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
@@ -1213,7 +1359,7 @@ select option { background: #222; color: #fff; }
|
||||
|
||||
.client-project-highlight {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Mobile topbar — hidden on desktop */
|
||||
@@ -1232,7 +1378,7 @@ select option { background: #222; color: #fff; }
|
||||
}
|
||||
.hamburger span {
|
||||
display: block; width: 22px; height: 2px;
|
||||
background: var(--text-primary); border-radius: 2px; transition: all 0.2s;
|
||||
background: var(--text-primary); border-radius: 4px; transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* Sidebar overlay (mobile) */
|
||||
@@ -1254,30 +1400,12 @@ select option { background: #222; color: #fff; }
|
||||
|
||||
/* Sidebar slides in from left */
|
||||
.sidebar {
|
||||
position: fixed; left: -240px; top: 0; z-index: 200;
|
||||
position: fixed; left: -76px; top: 0; z-index: 200;
|
||||
transition: left 0.25s ease; height: 100vh;
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
width: 76px;
|
||||
min-width: 76px;
|
||||
}
|
||||
.sidebar.sidebar-open { left: 0; }
|
||||
.app-layout.sidebar-collapsed .sidebar {
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .brand-logo-sidebar {
|
||||
width: 140px;
|
||||
display: block;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-pin-toggle {
|
||||
display: none;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-user-info {
|
||||
display: block;
|
||||
}
|
||||
.app-layout.sidebar-collapsed .sidebar-bottom-actions {
|
||||
justify-content: flex-start;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* Show overlay when menu open */
|
||||
.sidebar-overlay { display: block; }
|
||||
@@ -1285,14 +1413,16 @@ select option { background: #222; color: #fff; }
|
||||
/* Main wrapper full width, no left margin */
|
||||
.main-wrapper { margin-left: 0; }
|
||||
.main-content { padding: 16px; }
|
||||
.site-header { display: none; }
|
||||
|
||||
/* Stack grids on mobile */
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||||
.dash-stat-grid { grid-template-columns: 1fr 1fr; }
|
||||
.detail-grid { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
/* Smaller page header */
|
||||
.page-header { flex-direction: column; gap: 12px; }
|
||||
.page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
|
||||
.page-title { font-size: 18px; }
|
||||
|
||||
/* Action buttons wrap */
|
||||
@@ -1302,7 +1432,7 @@ select option { background: #222; color: #fff; }
|
||||
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
|
||||
/* Cards tighter padding */
|
||||
.card { padding: 14px; }
|
||||
.card { padding: 11px; }
|
||||
|
||||
/* Request cards */
|
||||
.request-card-header { flex-direction: column; gap: 8px; }
|
||||
@@ -1310,6 +1440,8 @@ select option { background: #222; color: #fff; }
|
||||
.page-toolbar-grid { grid-template-columns: 1fr; }
|
||||
.dashboard-chart-content { grid-template-columns: 1fr; }
|
||||
.dashboard-pie-wrap { justify-content: flex-start; }
|
||||
.pie-charts-grid { grid-template-columns: 1fr; }
|
||||
.pie-chart-cell-first { border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.client-summary-grid { grid-template-columns: 1fr; }
|
||||
|
||||
/* Auth card full width */
|
||||
@@ -1321,7 +1453,7 @@ select option { background: #222; color: #fff; }
|
||||
|
||||
/* Tab bar */
|
||||
.tab-btn {
|
||||
padding: 6px 14px;
|
||||
height: var(--h-control); padding: 0 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
@@ -1333,4 +1465,27 @@ select option { background: #222; color: #fff; }
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tab-btn:hover { border-color: var(--interactive-hover-border); color: var(--text-secondary); }
|
||||
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
|
||||
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 400; }
|
||||
|
||||
/* Rebuilt hover system (single source of truth) */
|
||||
.sidebar-theme-toggle:hover,
|
||||
.site-header-dropdown-item:hover,
|
||||
.site-header-avatar-item:hover {
|
||||
background-color: rgba(255,255,255,0.12);
|
||||
}
|
||||
.site-header-search-btn:hover,
|
||||
.site-header-theme-toggle:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
[data-theme="dark"] .sidebar-theme-toggle:hover,
|
||||
[data-theme="dark"] .site-header-dropdown-item:hover,
|
||||
[data-theme="dark"] .site-header-avatar-item:hover {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
[data-theme="light"] .sidebar-theme-toggle:hover,
|
||||
[data-theme="light"] .site-header-dropdown-item:hover,
|
||||
[data-theme="light"] .site-header-avatar-item:hover {
|
||||
background-color: rgba(0,0,0,0.14);
|
||||
border-color: rgba(0,0,0,0.18);
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user