fix: crash bugs in TeamInvoices + faster load
Bug fixes: - TeamInvoices: add useAuth import/currentUser (invoice-create crash) - TeamInvoices: setChartYear -> setExportYear (year-dropdown crash) - TeamDashboard: drop redundant setState-in-effect (cascading renders) - Companies: delete dead _UnusedClientCompanies (illegal hook calls) - annotate intentional empty PDF-fallback catches Load speed: - preconnect/dns-prefetch to Supabase origin - lazy-load heic-to in Converters: page chunk 2737KB -> 9KB - split recharts into its own 'charts' vendor chunk Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
+254
-286
@@ -42,15 +42,58 @@
|
||||
--overlay-scrim: rgba(0,0,0,0.58);
|
||||
--popup-shadow: 0 24px 64px rgba(0,0,0,0.5);
|
||||
--avatar-inner-ring: #111111;
|
||||
--bg-grid-line: rgba(245, 165, 35, 0.07);
|
||||
--bg-grid-glow: rgba(245, 165, 35, 0.08);
|
||||
--bg-grid-streak: rgba(255, 252, 244, 1);
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
--table-scroll-thumb: rgba(0,0,0,0.1);
|
||||
--table-scroll-thumb-hover: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
@keyframes ui-fade-up {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
@keyframes ambient-grid-flow {
|
||||
0% {
|
||||
background-position:
|
||||
calc(42px - 4px) calc(-126px - 4px),
|
||||
calc(126px - 4px) calc(100vh + 126px - 4px),
|
||||
calc(-126px - 4px) calc(84px - 4px),
|
||||
calc(100vw + 126px - 4px) calc(168px - 4px),
|
||||
calc(294px - 4px) calc(-210px - 4px),
|
||||
calc(378px - 4px) calc(100vh + 168px - 4px),
|
||||
calc(-168px - 4px) calc(336px - 4px),
|
||||
calc(100vw + 168px - 4px) calc(420px - 4px),
|
||||
calc(546px - 4px) calc(-168px - 4px),
|
||||
calc(714px - 4px) calc(100vh + 210px - 4px);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
background-position:
|
||||
calc(42px - 4px) calc(50vh - 4px),
|
||||
calc(126px - 4px) calc(50vh - 4px),
|
||||
calc(50vw - 4px) calc(84px - 4px),
|
||||
calc(50vw - 4px) calc(168px - 4px),
|
||||
calc(294px - 4px) calc(50vh - 4px),
|
||||
calc(378px - 4px) calc(50vh - 4px),
|
||||
calc(50vw - 4px) calc(336px - 4px),
|
||||
calc(50vw - 4px) calc(420px - 4px),
|
||||
calc(546px - 4px) calc(50vh - 4px),
|
||||
calc(714px - 4px) calc(50vh - 4px);
|
||||
opacity: 0.38;
|
||||
}
|
||||
100% {
|
||||
background-position:
|
||||
calc(42px - 4px) calc(100vh + 126px - 4px),
|
||||
calc(126px - 4px) calc(-126px - 4px),
|
||||
calc(100vw + 126px - 4px) calc(84px - 4px),
|
||||
calc(-126px - 4px) calc(168px - 4px),
|
||||
calc(294px - 4px) calc(100vh + 210px - 4px),
|
||||
calc(378px - 4px) calc(-168px - 4px),
|
||||
calc(100vw + 168px - 4px) calc(336px - 4px),
|
||||
calc(-168px - 4px) calc(420px - 4px),
|
||||
calc(546px - 4px) calc(100vh + 168px - 4px),
|
||||
calc(714px - 4px) calc(-210px - 4px);
|
||||
opacity: 0.16;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
@@ -75,6 +118,9 @@
|
||||
--overlay-scrim: rgba(255,255,255,0.72);
|
||||
--popup-shadow: 0 16px 42px rgba(0,0,0,0.18);
|
||||
--avatar-inner-ring: #ffffff;
|
||||
--bg-grid-line: rgba(0, 0, 0, 0.06);
|
||||
--bg-grid-glow: rgba(0, 0, 0, 0.05);
|
||||
--bg-grid-streak: rgba(255, 255, 255, 1);
|
||||
--table-scroll-thumb: rgba(0,0,0,0.1);
|
||||
--table-scroll-thumb-hover: rgba(0,0,0,0.2);
|
||||
}
|
||||
@@ -90,8 +136,6 @@
|
||||
}
|
||||
[data-theme="light"] input::placeholder,
|
||||
[data-theme="light"] textarea::placeholder { color: #aaa; }
|
||||
[data-theme="light"] th { background: #fafafa; }
|
||||
[data-theme="light"] tr:hover td { background: #fafafa; }
|
||||
[data-theme="light"] .assign-select { background: #fff; color: #1a1a1a; }
|
||||
[data-theme="light"] .badge-not_started { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
|
||||
[data-theme="light"] .badge-in_progress { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
|
||||
@@ -128,9 +172,63 @@ body {
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
#root { all: unset; display: block; height: 100%; }
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, var(--bg-grid-line) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--bg-grid-line) 1px, transparent 1px),
|
||||
radial-gradient(circle at 50% 0%, var(--bg-grid-glow) 0%, transparent 62%);
|
||||
background-size: 42px 42px, 42px 42px, 100% 100%;
|
||||
background-position: 0 0, 0 0, center top;
|
||||
mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 18%, rgba(0,0,0,0.58) 62%, rgba(0,0,0,0.2) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 18%, rgba(0,0,0,0.58) 62%, rgba(0,0,0,0.2) 100%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image:
|
||||
radial-gradient(circle, var(--bg-grid-streak) 0 1.64px, rgba(255,255,255,1) 2.02px, transparent 4.15px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 99%, transparent) 0 1.58px, rgba(255,255,255,0.98) 1.96px, transparent 4px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 97%, transparent) 0 1.54px, rgba(255,255,255,0.94) 1.9px, transparent 3.88px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 95%, transparent) 0 1.5px, rgba(255,255,255,0.9) 1.84px, transparent 3.74px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 98%, transparent) 0 1.6px, rgba(255,255,255,0.98) 1.98px, transparent 4.06px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 94%, transparent) 0 1.48px, rgba(255,255,255,0.88) 1.8px, transparent 3.66px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 96%, transparent) 0 1.52px, rgba(255,255,255,0.92) 1.88px, transparent 3.8px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 100%, transparent) 0 1.66px, rgba(255,255,255,1) 2.04px, transparent 4.18px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 97%, transparent) 0 1.56px, rgba(255,255,255,0.95) 1.92px, transparent 3.92px),
|
||||
radial-gradient(circle, color-mix(in srgb, var(--bg-grid-streak) 93%, transparent) 0 1.46px, rgba(255,255,255,0.86) 1.76px, transparent 3.56px);
|
||||
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(0.22px);
|
||||
mix-blend-mode: screen;
|
||||
mask-image:
|
||||
linear-gradient(to right, #000 0 1px, transparent 1px 42px),
|
||||
linear-gradient(to bottom, #000 0 1px, transparent 1px 42px),
|
||||
linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.94) 20%, rgba(0,0,0,0.62) 64%, rgba(0,0,0,0.22) 100%);
|
||||
mask-size: 42px 42px, 42px 42px, 100% 100%;
|
||||
mask-position: 0 0, 0 0, 0 0;
|
||||
-webkit-mask-image:
|
||||
linear-gradient(to right, #000 0 1px, transparent 1px 42px),
|
||||
linear-gradient(to bottom, #000 0 1px, transparent 1px 42px),
|
||||
linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.94) 20%, rgba(0,0,0,0.62) 64%, rgba(0,0,0,0.22) 100%);
|
||||
-webkit-mask-size: 42px 42px, 42px 42px, 100% 100%;
|
||||
-webkit-mask-position: 0 0, 0 0, 0 0;
|
||||
animation: ambient-grid-flow 9.5s linear infinite;
|
||||
}
|
||||
|
||||
#root { all: unset; display: block; height: 100%; position: relative; z-index: 1; }
|
||||
|
||||
/* Layout */
|
||||
.app-layout { display: flex; height: 100vh; overflow: hidden; }
|
||||
@@ -330,7 +428,6 @@ 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: 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; }
|
||||
@@ -343,7 +440,6 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
|
||||
.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: 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; }
|
||||
.site-header-avatar-divider { height: 1px; background: var(--border); margin: 4px 0; }
|
||||
@@ -693,41 +789,14 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* File Sharing */
|
||||
.file-browser {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-browser-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
z-index: 10;
|
||||
background: transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-browser-progress-bar {
|
||||
.shared-progress-bar {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
transition: width 0.2s ease;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.file-browser-progress-bar.indeterminate {
|
||||
.shared-progress-bar.indeterminate {
|
||||
width: 40% !important;
|
||||
animation: progress-slide 1.4s ease-in-out infinite;
|
||||
}
|
||||
@@ -737,168 +806,6 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
|
||||
100% { transform: translateX(350%); }
|
||||
}
|
||||
|
||||
.file-browser-dragging {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.file-browser-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
.file-browser-breadcrumbs,
|
||||
.file-browser-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.file-breadcrumb {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card-bg-2);
|
||||
color: var(--text-primary);
|
||||
border-radius: 4px;
|
||||
padding: 7px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-breadcrumb::before {
|
||||
content: '/';
|
||||
color: var(--text-muted);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.file-breadcrumb:hover {
|
||||
border-color: var(--interactive-hover-border);
|
||||
}
|
||||
|
||||
.file-browser-create {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 340px) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--card-bg-2);
|
||||
}
|
||||
|
||||
.file-upload-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.file-row {
|
||||
display: grid;
|
||||
grid-template-columns: 34px minmax(180px, 2fr) minmax(90px, 120px) minmax(110px, 140px) minmax(220px, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 700px;
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.file-row:not(.file-row-head):hover,
|
||||
.file-row-button:hover {
|
||||
background: var(--interactive-row-hover);
|
||||
}
|
||||
|
||||
|
||||
.file-row-head {
|
||||
min-height: 38px;
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
.file-row-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent);
|
||||
background: var(--card-bg-2);
|
||||
}
|
||||
|
||||
.file-name,
|
||||
.file-name-button {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.file-name-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-name-button:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.file-row-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.file-action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -932,75 +839,6 @@ input.site-header-search[type="text"]:focus { border-color: var(--accent); }
|
||||
background: var(--interactive-row-hover);
|
||||
}
|
||||
|
||||
.file-drop-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(17, 17, 17, 0.72);
|
||||
border: 2px dashed var(--accent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.file-drop-panel {
|
||||
min-width: 280px;
|
||||
max-width: min(420px, calc(100% - 40px));
|
||||
border: 1px solid rgba(245, 165, 35, 0.45);
|
||||
border-radius: 4px;
|
||||
background: var(--card-bg);
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.file-drop-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 4px;
|
||||
background: var(--accent);
|
||||
color: #111;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.file-drop-title {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.file-drop-subtitle {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.file-browser-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-browser-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.file-browser-create {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.file-row {
|
||||
grid-template-columns: 34px minmax(150px, 2fr) 90px 110px minmax(170px, 1fr);
|
||||
min-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
@@ -1133,11 +971,10 @@ textarea {
|
||||
.table-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--table-scroll-thumb-hover);
|
||||
}
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
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); }
|
||||
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
|
||||
th { text-align: left; padding: 0 16px 12px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); background: transparent; border: none; vertical-align: top; }
|
||||
td { padding: 5px 16px; border: none; font-size: 13px; color: var(--text-primary); background: transparent; }
|
||||
|
||||
tr:hover td { background: rgba(255,255,255,0.02); }
|
||||
.table-no-row-hover tr:hover td { background: transparent !important; }
|
||||
[data-theme="light"] .table-no-row-hover tr:hover td { background: transparent !important; }
|
||||
.table-no-row-hover tbody tr:hover .table-link:not(:hover) { color: inherit !important; }
|
||||
@@ -1149,6 +986,17 @@ tr:hover td { background: rgba(255,255,255,0.02); }
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
button.table-link {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.table-link:hover,
|
||||
.table-link:focus-visible {
|
||||
color: var(--accent) !important;
|
||||
@@ -1269,8 +1117,8 @@ 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: 4px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; }
|
||||
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; padding: 20px; position: relative; z-index: 1; }
|
||||
.auth-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid var(--border); padding: 40px; width: 100%; max-width: 440px; box-shadow: var(--popup-shadow); }
|
||||
.auth-logo { text-align: center; margin-bottom: 32px; }
|
||||
.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; }
|
||||
@@ -1280,24 +1128,24 @@ select option { background: #222; color: #fff; }
|
||||
.auth-card input[type="password"],
|
||||
.auth-card select,
|
||||
.auth-card textarea {
|
||||
background: #222;
|
||||
border-color: #333;
|
||||
color: #fff;
|
||||
background: var(--card-bg-2);
|
||||
border-color: var(--border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.auth-card input::placeholder,
|
||||
.auth-card textarea::placeholder { color: #555; }
|
||||
.auth-card textarea::placeholder { color: var(--text-muted); }
|
||||
.auth-card input:focus, .auth-card select:focus, .auth-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,165,35,0.1); }
|
||||
.auth-card .btn-outline { border-color: #333; color: #888; }
|
||||
.auth-card .btn-outline:hover { background: #222; color: #fff; }
|
||||
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #444; font-size: 12px; }
|
||||
.auth-card .btn-outline { border-color: var(--border); color: var(--text-secondary); }
|
||||
.auth-card .btn-outline:hover { background: var(--card-bg-2); color: var(--text-primary); }
|
||||
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); 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: 400; 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: var(--text-muted); 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: 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: 400; color: #fff; }
|
||||
.quick-login-email { font-size: 11px; color: #666; }
|
||||
.quick-login-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 4px; border: 1px solid var(--border); background: var(--card-bg-2); cursor: pointer; transition: background 0.15s; text-align: left; width: 100%; }
|
||||
.quick-login-btn:hover { background: color-mix(in srgb, var(--card-bg-2) 72%, var(--accent) 28%); }
|
||||
.quick-login-name { font-size: 13px; font-weight: 400; color: var(--text-primary); }
|
||||
.quick-login-email { font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
/* Misc */
|
||||
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 12px; font-weight: 500; margin-bottom: 20px; cursor: pointer; border: none; background: none; text-transform: uppercase; letter-spacing: 0.5px; font-family: inherit; }
|
||||
@@ -1325,6 +1173,104 @@ select option { background: #222; color: #fff; }
|
||||
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
|
||||
.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; }
|
||||
.invoice-detail-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.invoice-detail-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.invoice-detail-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.invoice-detail-card {
|
||||
margin: 0;
|
||||
padding: 18px 21px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.invoice-detail-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.invoice-detail-card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.invoice-detail-section-title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
.invoice-detail-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 18px 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.invoice-detail-meta-item label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.invoice-detail-meta-item p {
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
color: var(--text-primary);
|
||||
font-weight: 400;
|
||||
}
|
||||
.invoice-detail-table tbody td {
|
||||
vertical-align: top;
|
||||
}
|
||||
.invoice-detail-cell {
|
||||
padding: 5px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.invoice-detail-total-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 16px;
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.invoice-detail-total-label {
|
||||
margin-bottom: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.invoice-detail-total-value {
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
font-weight: 400;
|
||||
color: var(--accent);
|
||||
}
|
||||
.invoice-detail-notes {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.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); }
|
||||
@@ -1475,6 +1421,20 @@ select option { background: #222; color: #fff; }
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.modal-action-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.modal-action-row > .btn,
|
||||
.modal-action-row > .btn-icon,
|
||||
.modal-action-row > a.btn {
|
||||
width: 132px;
|
||||
min-width: 132px;
|
||||
flex: 0 0 132px;
|
||||
justify-content: center;
|
||||
}
|
||||
.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; }
|
||||
@@ -1649,6 +1609,8 @@ select option { background: #222; color: #fff; }
|
||||
|
||||
/* Stack grids on mobile */
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.invoice-detail-summary-grid { grid-template-columns: 1fr; }
|
||||
.invoice-detail-meta-grid { grid-template-columns: 1fr; gap: 16px; }
|
||||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||||
.dash-stat-grid { grid-template-columns: 1fr 1fr; }
|
||||
.detail-grid { grid-template-columns: 1fr 1fr; }
|
||||
@@ -1702,6 +1664,8 @@ select option { background: #222; color: #fff; }
|
||||
/* Shared section tabs (Tasks / Projects / Finances / Detail tabs) */
|
||||
.section-tab-btn {
|
||||
font-family: 'Fourge', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
@@ -1713,22 +1677,26 @@ select option { background: #222; color: #fff; }
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
box-shadow: inset 0 -2px 0 transparent;
|
||||
transition: all 160ms;
|
||||
}
|
||||
.section-tab-btn:hover,
|
||||
.section-tab-btn:focus-visible {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
box-shadow: inset 0 -2px 0 var(--accent);
|
||||
outline: none;
|
||||
}
|
||||
button.section-tab-btn:hover,
|
||||
button.section-tab-btn:focus-visible {
|
||||
color: var(--accent) !important;
|
||||
border-bottom-color: var(--accent) !important;
|
||||
box-shadow: inset 0 -2px 0 var(--accent) !important;
|
||||
}
|
||||
.section-tab-btn.is-active {
|
||||
color: var(--text-primary);
|
||||
border-bottom-color: var(--accent);
|
||||
box-shadow: inset 0 -2px 0 var(--accent);
|
||||
}
|
||||
|
||||
/* Rebuilt hover system (single source of truth) */
|
||||
|
||||
Reference in New Issue
Block a user