javier.2526/doli-front
javier.2526
/
doli-front
mirror of https://github.com/JavMB/doli-front.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

commit de mis cosos

This commit is contained in:
Алекс 2026-02-11 16:17:32 +01:00
parent 9c75ff154e
commit 1b81db1a6b
11 changed files with 1011 additions and 1240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

340
src/styles/base.css
View File

@ -1,30 +1,39 @@
/* ===================== BASE STYLES & CSS VARIABLES ===================== */ /* ====== BASE / VARIABLES ====== */
:root { :root {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5; line-height: 1.6;
font-weight: 400; font-weight: 400;
color-scheme: light; color-scheme: light;
color: #1a2332; color: #1e293b;
background-color: #f0f4f8; background-color: #f8fafc;
--primary: #0d9488; --primary: #2563eb;
--primary-hover: #0f766e; --primary-hover: #1d4ed8;
--primary-light: rgba(13, 148, 136, 0.1); --primary-light: rgba(37, 99, 235, 0.06);
--success: #059669; --primary-subtle: rgba(37, 99, 235, 0.08);
--success-hover: #047857; --success: #16a34a;
--warning: #d97706; --success-hover: #15803d;
--warning-hover: #b45309; --warning: #ca8a04;
--warning-hover: #a16207;
--danger: #dc2626; --danger: #dc2626;
--danger-hover: #b91c1c; --danger-hover: #b91c1c;
--card-bg: #ffffff; --card-bg: #ffffff;
--border-color: #e2e8f0; --border-color: #e2e8f0;
--text-primary: #1a2332; --border-subtle: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #64748b; --text-secondary: #64748b;
--sidebar-bg: #1a2332; --text-tertiary: #94a3b8;
--sidebar-bg: #0f172a;
--sidebar-text: #94a3b8; --sidebar-text: #94a3b8;
--sidebar-active: #0d9488; --sidebar-active: #3b82f6;
--sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-hover: rgba(255, 255, 255, 0.04);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -32,265 +41,173 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a { *, *::before, *::after { box-sizing: border-box; }
font-weight: 500;
color: var(--primary);
text-decoration: inherit;
}
a:hover { a { font-weight: 500; color: var(--primary); text-decoration: none; }
color: var(--primary-hover); a:hover { color: var(--primary-hover); }
}
body { body { margin: 0; min-width: 320px; min-height: 100vh; }
margin: 0;
min-width: 320px;
min-height: 100vh;
}
h1 { h1 { font-size: 1.625rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
font-size: 3.2em;
line-height: 1.1;
}
#app { #app { width: 100%; min-height: 100vh; }
width: 100%;
min-height: 100vh;
}
button { button {
border-radius: 8px; border-radius: var(--radius-md);
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.6em 1.2em; padding: 0.5em 1em;
font-size: 1em; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.25s, border-color 0.25s; transition: background-color 0.15s ease, box-shadow 0.15s ease;
} }
button:hover { background-color: var(--primary-hover); }
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button:hover { /* Status badges */
background-color: var(--primary-hover);
}
button:focus,
button:focus-visible {
outline: 4px auto var(--primary);
}
/* Shared status badges */
.status-badge { .status-badge {
display: inline-block; display: inline-flex;
padding: 0.25rem 0.75rem; align-items: center;
border-radius: 9999px; padding: 0.175rem 0.55rem;
font-size: 0.875rem; border-radius: 4px;
font-weight: 500; font-size: 0.7rem;
} font-weight: 600;
letter-spacing: 0.02em;
.status-pending { text-transform: uppercase;
background-color: #fef3c7;
color: #000000;
}
.status-paid {
background-color: #d1fae5;
color: #000000;
}
.status-overdue {
background-color: #fee2e2;
color: #000000;
}
.status-draft {
background-color: #f1f5f9;
color: #000000;
}
.status-validated {
background: #dbeafe;
color: #000000;
}
.status-unpaid {
background: #fee2e2;
color: #000000;
}
.status-canceled {
background: #f3f4f6;
color: #000000;
text-decoration: line-through;
}
/* Shared form group */
.form-group {
margin-bottom: 1.5rem;
} }
.status-pending { background: #fef9c3; color: #854d0e; }
.status-paid { background: #dcfce7; color: #166534; }
.status-overdue { background: #fee2e2; color: #991b1b; }
.status-draft { background: #f1f5f9; color: #475569; }
.status-validated { background: #dbeafe; color: #1e40af; }
.status-unpaid { background: #fef2f2; color: #991b1b; }
.status-canceled { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
/* Form group */
.form-group { margin-bottom: 1.25rem; }
.form-group label { .form-group label {
display: block; display: block;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.375rem;
font-weight: 500; font-weight: 500;
font-size: 0.8125rem;
} }
.form-group input { .form-group input {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: var(--radius-sm);
background: #fff; background: #fff;
color: var(--text-primary); color: var(--text-primary);
font-size: 1rem; font-size: 0.875rem;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
} }
/* Shared button styles */ /* View button */
.btn-view { .btn-view {
background: transparent; background: transparent;
border: none; border: none;
padding: 0.25rem; padding: 0.35rem;
border-radius: 4px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: var(--text-tertiary);
transition: all 0.2s; transition: color 0.15s ease, background 0.15s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.btn-view:hover { color: var(--primary); background: var(--primary-light); }
.btn-view:hover { /* Loading */
color: var(--primary); .loading, .error, .no-invoices, .no-clients {
transform: scale(1.1);
}
/* Loading/error shared */
.loading,
.error,
.no-invoices,
.no-clients {
padding: 3rem; padding: 3rem;
text-align: center; text-align: center;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 1.1rem; font-size: 0.9rem;
} }
.error { color: var(--danger); }
.error { /* Pagination */
color: var(--danger);
}
/* Pagination (shared between facturas & clientes) */
.pagination { .pagination {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 2rem; gap: 0.75rem;
margin-top: 2rem; margin-top: 1.25rem;
padding: 1.5rem; padding: 0.75rem 1rem;
background: var(--card-bg); background: var(--card-bg);
border-radius: 12px; border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
.pagination-info { .pagination-info {
font-weight: 600; font-weight: 500;
color: var(--text-primary); color: var(--text-secondary);
font-size: 1rem; font-size: 0.8125rem;
display: flex; display: flex;
gap: 0.5rem; gap: 0.3rem;
align-items: center; align-items: center;
} }
.pagination-info .current-page, .pagination-info .current-page,
.pagination-info .total-pages { .pagination-info .total-pages {
font-weight: 700; font-weight: 600;
color: var(--primary); color: var(--text-primary);
min-width: 30px; min-width: 20px;
text-align: center; text-align: center;
} }
.btn-pagination { .btn-pagination {
padding: 0.75rem 1.5rem; padding: 0.4rem 0.9rem;
background-color: var(--primary); background: var(--card-bg);
color: white; color: var(--text-primary);
border: none; border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 500;
transition: all 0.2s; font-size: 0.8125rem;
display: flex; transition: all 0.15s ease;
align-items: center;
gap: 0.5rem;
} }
.btn-pagination:hover:not(:disabled) { .btn-pagination:hover:not(:disabled) {
background-color: var(--primary-hover); background: var(--primary);
transform: translateY(-2px); color: #fff;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); border-color: var(--primary);
} }
.btn-pagination:disabled { .btn-pagination:disabled {
background-color: #cbd5e1; background: #f8fafc;
color: #cbd5e1;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.6;
}
.btn-pagination:active:not(:disabled) {
transform: translateY(0);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.pagination { .pagination { flex-wrap: wrap; gap: 0.5rem; }
flex-wrap: wrap; .btn-pagination { flex: 1; min-width: 90px; }
gap: 1rem; .pagination-info { order: 3; width: 100%; justify-content: center; }
} }
.btn-pagination { /* Skeleton */
flex: 1;
min-width: 120px;
}
.pagination-info {
order: 3;
width: 100%;
justify-content: center;
}
}
/* Skeleton loader animation */
@keyframes skeleton-shimmer { @keyframes skeleton-shimmer {
0% { background-position: -200% 0; } 0% { background-position: -200% 0; }
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
.skeleton { .skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 200% 100%; background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite; animation: skeleton-shimmer 1.8s ease-in-out infinite;
border-radius: 4px; border-radius: 4px;
} }
.skeleton-row { .skeleton-row {
display: flex; display: flex; gap: 1rem;
gap: 1rem; padding: 0.875rem 1.25rem;
padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-color);
} }
.skeleton-cell { height: 14px; border-radius: 3px; }
.skeleton-cell {
height: 16px;
border-radius: 4px;
}
.skeleton-cell.w-sm { width: 60px; } .skeleton-cell.w-sm { width: 60px; }
.skeleton-cell.w-md { width: 120px; } .skeleton-cell.w-md { width: 120px; }
.skeleton-cell.w-lg { width: 200px; } .skeleton-cell.w-lg { width: 200px; }
@ -301,47 +218,40 @@ button:focus-visible {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; padding: 3.5rem 2rem;
padding: 4rem 2rem;
text-align: center; text-align: center;
color: var(--text-secondary); color: var(--text-secondary);
} }
.empty-state-icon { .empty-state-icon {
width: 80px; width: 56px; height: 56px;
height: 80px; border-radius: 14px;
border-radius: 50%;
background: var(--primary-light); background: var(--primary-light);
display: flex; display: flex;
align-items: center; align-items: center; justify-content: center;
justify-content: center; margin-bottom: 1rem;
margin-bottom: 1.5rem;
color: var(--primary); color: var(--primary);
} }
.empty-state h3 { .empty-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.25rem;
color: var(--text-primary); color: var(--text-primary);
font-size: 1.2rem;
}
.empty-state p {
margin: 0 0 1.5rem;
font-size: 0.95rem; font-size: 0.95rem;
max-width: 360px; font-weight: 600;
}
.empty-state p {
margin: 0 0 1rem;
font-size: 0.8125rem;
max-width: 320px;
line-height: 1.5;
} }
.empty-state .btn-empty-action { .empty-state .btn-empty-action {
padding: 0.6rem 1.5rem; padding: 0.45rem 1rem;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm);
font-weight: 500; font-weight: 500;
font-size: 0.8125rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.15s ease;
}
.empty-state .btn-empty-action:hover {
background: var(--primary-hover);
} }
.empty-state .btn-empty-action:hover { background: var(--primary-hover); }

237
src/styles/clientes.css
View File

@ -6,34 +6,36 @@
} }
.clientes-header { .clientes-header {
margin-bottom: 2rem; margin-bottom: 1.5rem;
} }
.clientes-header h1 { .clientes-header h1 {
color: var(--text-primary); color: var(--text-primary);
font-size: 2rem; font-size: 1.5rem;
margin: 0; margin: 0;
font-weight: 600;
letter-spacing: -0.02em;
} }
.clientes-filters { .clientes-filters {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.25rem;
align-items: center; align-items: center;
} }
.clientes-filters .search-input { .clientes-filters .search-input {
flex: 1; flex: 1;
max-width: 500px; max-width: 400px;
} }
/* Clients Table */ /* Clients table */
.clients-table-container { .clients-table-container {
background: var(--card-bg); background: var(--card-bg);
border-radius: 12px; border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-xs);
} }
.clients-table { .clients-table {
@ -43,21 +45,22 @@
.clients-table thead { .clients-table thead {
background: #f8fafc; background: #f8fafc;
border-bottom: 2px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.clients-table th { .clients-table th {
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.85rem; font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
padding: 1rem 1.5rem; letter-spacing: 0.04em;
padding: 0.75rem 1.25rem;
text-align: left; text-align: left;
} }
.clients-table tbody tr { .clients-table tbody tr {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-subtle);
transition: background-color 0.2s; transition: background-color 0.1s ease;
} }
.clients-table tbody tr:hover { .clients-table tbody tr:hover {
@ -69,46 +72,42 @@
} }
.clients-table td { .clients-table td {
padding: 1rem 1.5rem; padding: 0.75rem 1.25rem;
vertical-align: middle; vertical-align: middle;
font-size: 0.8125rem;
} }
.client-avatar-col { .client-avatar-col { width: 56px; }
width: 60px; .client-avatar-cell { width: 56px; }
}
.client-avatar-cell {
width: 60px;
}
.client-avatar { .client-avatar {
width: 42px; width: 36px;
height: 42px; height: 36px;
border-radius: 50%; border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.8rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.client-name-wrapper { .client-name-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.15rem;
} }
.client-company-name { .client-company-name {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.8125rem;
} }
.client-code { .client-code {
font-size: 0.8rem; font-size: 0.7rem;
color: var(--text-secondary); color: var(--text-tertiary);
font-family: monospace; font-family: 'SF Mono', 'Fira Code', monospace;
} }
.client-email .email-text { .client-email .email-text {
@ -118,16 +117,16 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
font-size: 0.8125rem;
} }
.client-phone { .client-phone {
color: var(--text-primary); color: var(--text-primary);
font-family: monospace; font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.8125rem;
} }
.client-actions { .client-actions { text-align: center; }
text-align: center;
}
.client-actions .btn-action { .client-actions .btn-action {
margin: 0 auto; margin: 0 auto;
@ -137,7 +136,7 @@
} }
.clients-table .client-actions-col { .clients-table .client-actions-col {
width: 80px; width: 72px;
text-align: center; text-align: center;
} }
@ -153,36 +152,36 @@
/* Status badge for clients */ /* Status badge for clients */
.status-badge-client { .status-badge-client {
display: inline-block; display: inline-block;
padding: 0.2rem 0.6rem; padding: 0.15rem 0.5rem;
border-radius: 12px; border-radius: 4px;
font-size: 0.8rem; font-size: 0.7rem;
font-weight: 500; font-weight: 600;
white-space: nowrap; white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.02em;
} }
.status-badge-client.status-active { .status-badge-client.status-active {
background: rgba(16, 185, 129, 0.1); background: #dcfce7;
color: #059669; color: #166534;
} }
.status-badge-client.status-inactive { .status-badge-client.status-inactive {
background: rgba(239, 68, 68, 0.1); background: #fee2e2;
color: #dc2626; color: #991b1b;
} }
.status-badge-client.status-unknown { .status-badge-client.status-unknown {
background: rgba(100, 116, 139, 0.1); background: #f1f5f9;
color: #64748b; color: #64748b;
} }
/* Client Modal */ /* Client Modal */
.client-modal-overlay { .client-modal-overlay {
position: fixed; position: fixed;
top: 0; top: 0; left: 0; right: 0; bottom: 0;
left: 0; background: rgba(15, 23, 42, 0.5);
right: 0; backdrop-filter: blur(2px);
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -192,44 +191,44 @@
.client-modal { .client-modal {
background: var(--card-bg); background: var(--card-bg);
border-radius: 12px; border-radius: var(--radius-lg);
width: 100%; width: 100%;
max-width: 600px; max-width: 580px;
max-height: 80vh; max-height: 80vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-lg);
} }
.client-modal-header { .client-modal-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
background: #f8fafc;
} }
.client-modal-header h2 { .client-modal-header h2 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.125rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600;
} }
.btn-close-modal { .btn-close-modal {
background: transparent; background: transparent;
border: none; border: none;
font-size: 1.5rem; font-size: 1.25rem;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: var(--text-tertiary);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.4rem;
border-radius: 4px; border-radius: var(--radius-sm);
transition: all 0.2s; transition: all 0.15s;
} }
.btn-close-modal:hover { .btn-close-modal:hover {
background: var(--border-color); background: #f1f5f9;
color: var(--text-primary); color: var(--text-primary);
} }
@ -245,156 +244,114 @@
.client-info-section h3, .client-info-section h3,
.contacts-section h3 { .contacts-section h3 {
margin: 0 0 1rem 0; margin: 0 0 0.75rem 0;
font-size: 1rem; font-size: 0.7rem;
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.05em;
font-weight: 600;
} }
.info-grid { .info-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 1rem; gap: 0.875rem;
} }
.info-item { .info-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.2rem;
} }
.info-label { .info-label {
font-size: 0.8rem; font-size: 0.7rem;
color: var(--text-secondary); color: var(--text-tertiary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.03em;
} }
.info-value { .info-value {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
font-size: 0.875rem;
} }
.contacts-list { .contacts-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.75rem;
} }
.contact-card { .contact-card {
background: #f8fafc; background: #f8fafc;
border-radius: 8px; border-radius: var(--radius-sm);
padding: 1rem; padding: 0.875rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
.contact-header { .contact-header { margin-bottom: 0.5rem; }
margin-bottom: 0.75rem;
}
.contact-full-name { .contact-full-name {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
font-size: 1.05rem; font-size: 0.875rem;
} }
.contact-details { .contact-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.35rem;
} }
.contact-row { .contact-row {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
font-size: 0.9rem; font-size: 0.8125rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
.contact-row .label { .contact-row .label { min-width: 100px; }
min-width: 120px;
}
.no-contacts { .no-contacts {
color: var(--text-secondary); color: var(--text-tertiary);
text-align: center; text-align: center;
padding: 2rem; padding: 1.5rem;
background: #f8fafc; background: #f8fafc;
border-radius: 8px; border-radius: var(--radius-sm);
font-size: 0.8125rem;
} }
/* Responsive */ /* Responsive */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.clientes-page { .clientes-page { padding: 1rem; }
padding: 1rem;
}
.clients-table th, .clients-table th,
.clients-table td { .clients-table td { padding: 0.625rem 0.875rem; }
padding: 0.75rem 1rem; .client-email-col, .client-email,
} .client-type-col, .client-type { display: none; }
.client-email-col,
.client-email,
.client-type-col,
.client-type {
display: none;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.clientes-filters { .clientes-filters { flex-direction: column; }
flex-direction: column; .clientes-filters .search-input { max-width: 100%; }
} .clients-table thead { display: none; }
.clientes-filters .search-input {
max-width: 100%;
}
.clients-table thead {
display: none;
}
.clients-table tbody tr.client-item { .clients-table tbody tr.client-item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 1rem; padding: 0.875rem;
gap: 0.5rem; gap: 0.5rem;
position: relative; position: relative;
} }
.clients-table td { padding: 0; }
.clients-table td { .client-avatar-cell { width: auto; margin-right: 0.75rem; }
padding: 0; .client-name { flex: 1; }
} .client-status, .client-phone { width: 100%; padding-left: 50px; }
.client-type-col, .client-type { display: none; }
.client-avatar-cell {
width: auto;
margin-right: 1rem;
}
.client-name {
flex: 1;
}
.client-status,
.client-phone {
width: 100%;
padding-left: 58px;
}
.client-type-col,
.client-type {
display: none;
}
.client-actions { .client-actions {
position: absolute; position: absolute;
right: 1rem; right: 0.875rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.info-grid { grid-template-columns: 1fr; }
.info-grid {
grid-template-columns: 1fr;
}
} }

191
src/styles/create-invoice.css
View File

@ -1,7 +1,7 @@
/* ===================== CREATE INVOICE PAGE ===================== */ /* ===================== CREATE INVOICE PAGE ===================== */
.create-invoice-page { .create-invoice-page {
padding: 2rem; padding: 2rem;
max-width: 1000px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
} }
@ -10,27 +10,28 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 2rem; margin-bottom: 1.5rem;
flex-shrink: 0; flex-shrink: 0;
} }
.invoice-header-compact h1 { .invoice-header-compact h1 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.375rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600; font-weight: 600;
letter-spacing: -0.02em;
} }
.btn-back { .btn-back {
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 0.5rem 1rem; padding: 0.45rem 0.875rem;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.8125rem;
transition: all 0.2s; transition: all 0.15s ease;
} }
.btn-back:hover { .btn-back:hover {
@ -41,10 +42,10 @@
.invoice-form-compact { .invoice-form-compact {
background: var(--card-bg); background: var(--card-bg);
border-radius: 12px; border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 2rem; padding: 1.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-xs);
} }
.form-grid-compact { .form-grid-compact {
@ -73,24 +74,24 @@
.form-field-compact label { .form-field-compact label {
font-weight: 500; font-weight: 500;
margin-bottom: 0.5rem; margin-bottom: 0.375rem;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.8125rem;
} }
.form-field-compact input, .form-field-compact input,
.form-field-compact select, .form-field-compact select,
.form-field-compact textarea { .form-field-compact textarea {
padding: 0.625rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 0.9375rem; font-size: 0.875rem;
color: var(--text-primary); color: var(--text-primary);
background: #ffffff; background: #ffffff;
resize: vertical; resize: vertical;
min-height: 38px; min-height: 36px;
font-family: inherit; font-family: inherit;
transition: all 0.2s; transition: border-color 0.15s ease, box-shadow 0.15s ease;
} }
.form-field-compact input:focus, .form-field-compact input:focus,
@ -98,7 +99,7 @@
.form-field-compact textarea:focus { .form-field-compact textarea:focus {
outline: none; outline: none;
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
} }
/* Date input wrapper */ /* Date input wrapper */
@ -123,25 +124,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 0.75rem; padding: 0 0.625rem;
background: var(--primary); background: var(--primary);
color: white; color: white;
border: 1px solid var(--primary); border: 1px solid var(--primary);
border-top-right-radius: 6px; border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: 6px; border-bottom-right-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.15s;
} }
.date-picker-btn:hover { .date-picker-btn:hover {
background: var(--primary-hover); background: var(--primary-hover);
} }
.date-picker-btn:active { /* Lines section */
transform: scale(0.96);
}
/* Lines Section */
.lines-section-compact { .lines-section-compact {
flex: 1; flex: 1;
display: flex; display: flex;
@ -154,27 +151,29 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.75rem;
flex-shrink: 0; flex-shrink: 0;
} }
.lines-header-compact h3 { .lines-header-compact h3 {
margin: 0; margin: 0;
font-size: 1.125rem; font-size: 0.875rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600; font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
} }
.btn-add-compact { .btn-add-compact {
background: #f8fafc; background: #f8fafc;
color: var(--text-primary); color: var(--text-primary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 0.5rem 1rem; padding: 0.4rem 0.875rem;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 0.875rem; font-size: 0.8125rem;
transition: all 0.2s; transition: all 0.15s;
} }
.btn-add-compact:hover { .btn-add-compact:hover {
@ -187,7 +186,7 @@
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.375rem;
} }
/* Column headers */ /* Column headers */
@ -196,12 +195,12 @@
grid-template-columns: 4fr 0.8fr 1.2fr 0.8fr 1.2fr 40px; grid-template-columns: 4fr 0.8fr 1.2fr 0.8fr 1.2fr 40px;
gap: 0.75rem; gap: 0.75rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-size: 0.75rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
border-bottom: 2px solid var(--border-color); border-bottom: 1px solid var(--border-color);
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@ -212,42 +211,32 @@
align-items: center; align-items: center;
background: #f8fafc; background: #f8fafc;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--radius-sm);
padding: 0.75rem; padding: 0.625rem 0.75rem;
transition: all 0.2s; transition: border-color 0.15s ease;
} }
.line-row-compact:hover { .line-row-compact:hover {
background: #f1f5f9;
border-color: #cbd5e1; border-color: #cbd5e1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
} }
.line-label-mobile { .line-label-mobile { display: none; }
display: none; .line-field { display: flex; flex-direction: column; }
}
.line-field {
display: flex;
flex-direction: column;
}
.line-desc-compact, .line-desc-compact,
.line-qty-compact, .line-qty-compact,
.line-price-compact, .line-price-compact,
.line-tax-compact { .line-tax-compact {
padding: 0.5rem 0.625rem; padding: 0.4rem 0.5rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
font-size: 0.875rem; font-size: 0.8125rem;
background: white; background: white;
color: var(--text-primary); color: var(--text-primary);
transition: all 0.2s; transition: border-color 0.15s ease;
} }
.line-desc-compact { .line-desc-compact { width: 100%; }
width: 100%;
}
.line-desc-compact:focus, .line-desc-compact:focus,
.line-qty-compact:focus, .line-qty-compact:focus,
@ -255,51 +244,48 @@
.line-tax-compact:focus { .line-tax-compact:focus {
outline: none; outline: none;
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
} }
.line-total-compact { .line-total-compact {
font-weight: 600; font-weight: 600;
color: var(--primary); color: var(--primary);
font-size: 0.9375rem; font-size: 0.875rem;
text-align: right; text-align: right;
padding: 0.5rem 0.25rem; padding: 0.4rem 0.25rem;
background: rgba(13, 148, 136, 0.04);
border-radius: 4px;
} }
.btn-delete-compact { .btn-delete-compact {
background: transparent; background: transparent;
color: #94a3b8; color: var(--text-tertiary);
border: 1px solid transparent; border: 1px solid transparent;
width: 36px; width: 32px;
height: 36px; height: 32px;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.15s;
flex-shrink: 0; flex-shrink: 0;
} }
.btn-delete-compact:hover { .btn-delete-compact:hover {
color: #ef4444; color: #ef4444;
background: #fee2e2; background: #fee2e2;
border-color: #fecaca;
} }
/* Grand total */ /* Grand total */
.invoice-grand-total { .invoice-grand-total {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.4rem;
margin-top: 1rem; margin-top: 0.75rem;
padding: 1rem 1.25rem; padding: 0.875rem 1rem;
background: #f8fafc; background: #f8fafc;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--radius-sm);
max-width: 300px; max-width: 280px;
margin-left: auto; margin-left: auto;
} }
@ -307,7 +293,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 0.875rem; font-size: 0.8125rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
@ -317,23 +303,24 @@
} }
.grand-total-final { .grand-total-final {
padding-top: 0.5rem; padding-top: 0.4rem;
border-top: 2px solid var(--border-color); border-top: 1px solid var(--border-color);
font-size: 1.05rem; font-size: 0.9375rem;
} }
.grand-total-final strong { .grand-total-final strong {
color: var(--primary); color: var(--primary);
font-size: 1.125rem; font-size: 1rem;
font-weight: 700;
} }
/* Form actions */ /* Form actions */
.form-actions-compact { .form-actions-compact {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.625rem;
margin-top: 0; margin-top: 0;
padding-top: 1.5rem; padding-top: 1.25rem;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
flex-shrink: 0; flex-shrink: 0;
} }
@ -342,12 +329,12 @@
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 0.625rem 1.25rem; padding: 0.5rem 1rem;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 0.9375rem; font-size: 0.8125rem;
transition: all 0.2s; transition: all 0.15s;
} }
.btn-cancel-compact:hover { .btn-cancel-compact:hover {
@ -359,12 +346,12 @@
background: var(--primary); background: var(--primary);
color: white; color: white;
border: none; border: none;
padding: 0.625rem 1.5rem; padding: 0.5rem 1.25rem;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 0.9375rem; font-size: 0.8125rem;
transition: all 0.2s; transition: background 0.15s;
} }
.btn-submit-compact:hover { .btn-submit-compact:hover {
@ -389,40 +376,26 @@
gap: 0.5rem; gap: 0.5rem;
} }
.form-field-compact.full-width { .form-field-compact.full-width { grid-column: 1; }
grid-column: 1; .lines-columns-header { display: none; }
}
.lines-columns-header {
display: none;
}
.line-row-compact { .line-row-compact {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0.5rem; gap: 0.5rem;
padding: 0.75rem; padding: 0.625rem;
} }
.line-label-mobile { .line-label-mobile {
display: block; display: block;
font-size: 0.7rem; font-size: 0.65rem;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
margin-bottom: 0.2rem; margin-bottom: 0.15rem;
} }
.line-field-desc { .line-field-desc { grid-column: 1 / -1; }
grid-column: 1 / -1; .line-field-actions { grid-column: 2; justify-self: end; }
} .invoice-grand-total { max-width: 100%; }
.line-field-actions {
grid-column: 2;
justify-self: end;
}
.invoice-grand-total {
max-width: 100%;
}
} }

105
src/styles/dashboard.css
View File

@ -9,50 +9,51 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 2rem; margin-bottom: 1.75rem;
} }
.dashboard-header h1 { .dashboard-header h1 {
font-size: 1.8rem; font-size: 1.5rem;
margin: 0; margin: 0;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.02em;
} }
.dashboard-subtitle { .dashboard-subtitle {
margin: 0.25rem 0 0; margin: 0.2rem 0 0;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.95rem; font-size: 0.875rem;
} }
/* Dashboard Stats */ /* Stats */
.dashboard-stats { .dashboard-stats {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem; gap: 1rem;
margin-bottom: 2rem; margin-bottom: 1.75rem;
} }
.stat-card { .stat-card {
background: var(--card-bg); background: var(--card-bg);
border-radius: 14px; border-radius: var(--radius-md);
padding: 1.5rem; padding: 1.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.875rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); box-shadow: var(--shadow-xs);
transition: box-shadow 0.2s, transform 0.2s; transition: box-shadow 0.15s ease;
} }
.stat-card:hover { .stat-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-sm);
transform: translateY(-2px);
} }
.stat-icon { .stat-icon {
width: 48px; width: 42px;
height: 48px; height: 42px;
border-radius: 12px; border-radius: var(--radius-md);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -60,22 +61,22 @@
} }
.stat-icon-invoices { .stat-icon-invoices {
background: rgba(13, 148, 136, 0.1); background: rgba(37, 99, 235, 0.08);
color: #0d9488; color: #2563eb;
} }
.stat-icon-paid { .stat-icon-paid {
background: rgba(5, 150, 105, 0.1); background: rgba(22, 163, 74, 0.08);
color: #059669; color: #16a34a;
} }
.stat-icon-unpaid { .stat-icon-unpaid {
background: rgba(217, 119, 6, 0.1); background: rgba(202, 138, 4, 0.08);
color: #d97706; color: #ca8a04;
} }
.stat-icon-clients { .stat-icon-clients {
background: rgba(99, 102, 241, 0.1); background: rgba(99, 102, 241, 0.08);
color: #6366f1; color: #6366f1;
} }
@ -85,79 +86,81 @@
} }
.stat-value { .stat-value {
font-size: 1.6rem; font-size: 1.375rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.2; line-height: 1.2;
letter-spacing: -0.02em;
} }
.stat-label { .stat-label {
font-size: 0.82rem; font-size: 0.78rem;
color: var(--text-secondary); color: var(--text-secondary);
margin-top: 0.15rem; margin-top: 0.1rem;
} }
/* Dashboard Grid */ /* Dashboard grid */
.dashboard-grid { .dashboard-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem; gap: 1rem;
} }
.dashboard-card { .dashboard-card {
background: var(--card-bg); background: var(--card-bg);
border-radius: 14px; border-radius: var(--radius-md);
padding: 1.5rem; padding: 1.25rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); box-shadow: var(--shadow-xs);
} }
.dashboard-card h3 { .dashboard-card h3 {
margin: 0 0 1.25rem; margin: 0 0 1rem;
font-size: 1rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.03em;
} }
/* Quick Actions */ /* Quick actions */
.quick-actions { .quick-actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.5rem;
} }
.quick-action-btn { .quick-action-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.5rem;
padding: 0.75rem 1.25rem; padding: 0.625rem 1rem;
border-radius: 10px; border-radius: var(--radius-sm);
font-size: 0.9rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
transition: background 0.2s, transform 0.15s; transition: background-color 0.15s ease;
cursor: pointer; cursor: pointer;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
} }
.quick-action-btn:hover { .quick-action-btn:hover {
filter: brightness(1.1); background: var(--primary-hover);
transform: translateX(4px);
color: #fff; color: #fff;
} }
.quick-action-btn.secondary { .quick-action-btn.secondary {
background: var(--primary-light); background: var(--primary-subtle);
color: var(--primary); color: var(--primary);
} }
.quick-action-btn.secondary:hover { .quick-action-btn.secondary:hover {
background: rgba(13, 148, 136, 0.18); background: rgba(37, 99, 235, 0.12);
color: var(--primary); color: var(--primary);
} }
/* Dashboard Info List */ /* Dashboard info */
.dashboard-info-list { .dashboard-info-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -167,9 +170,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.65rem 0; padding: 0.55rem 0;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-subtle);
font-size: 0.88rem; font-size: 0.8125rem;
} }
.dashboard-info-row:last-child { .dashboard-info-row:last-child {
@ -182,11 +185,11 @@
.dashboard-info-value { .dashboard-info-value {
color: var(--text-primary); color: var(--text-primary);
font-weight: 500; font-weight: 600;
} }
/* Stat skeleton */ /* Stat skeleton */
.stat-card .skeleton-value { .stat-card .skeleton-value {
width: 50px; width: 50px;
height: 28px; height: 24px;
} }

72
src/styles/facturas.css
View File

@ -6,24 +6,27 @@
} }
.facturas-header { .facturas-header {
margin-bottom: 2rem; margin-bottom: 1.5rem;
} }
.facturas-header h1 { .facturas-header h1 {
color: var(--text-primary); color: var(--text-primary);
font-size: 2rem; font-size: 1.5rem;
margin: 0; margin: 0;
font-weight: 600;
letter-spacing: -0.02em;
} }
.btn-new-invoice { .btn-new-invoice {
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
padding: 0.75rem 1.5rem; padding: 0.575rem 1.25rem;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 500;
transition: background-color 0.2s; font-size: 0.8125rem;
transition: background-color 0.15s ease;
margin-left: auto; margin-left: auto;
} }
@ -33,38 +36,46 @@
.facturas-filters { .facturas-filters {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
margin-bottom: 1.5rem; margin-bottom: 1.25rem;
align-items: center; align-items: center;
} }
.search-input, .search-input,
.filter-status { .filter-status {
padding: 0.75rem 1rem; padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: var(--radius-sm);
font-size: 0.95rem; font-size: 0.8125rem;
background: var(--card-bg); background: var(--card-bg);
color: #000000; color: var(--text-primary);
transition: border-color 0.15s ease;
}
.search-input:focus,
.filter-status:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
} }
.search-input { .search-input {
flex: 1; flex: 1;
max-width: 400px; max-width: 360px;
} }
.filter-status { .filter-status {
min-width: 200px; min-width: 180px;
cursor: pointer; cursor: pointer;
} }
/* Invoices Table */ /* Invoices table */
.invoices-table-container { .invoices-table-container {
background: var(--card-bg); background: var(--card-bg);
border-radius: 12px; border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-xs);
} }
.invoices-table { .invoices-table {
@ -74,21 +85,22 @@
.invoices-table thead { .invoices-table thead {
background: #f8fafc; background: #f8fafc;
border-bottom: 2px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.invoices-table th { .invoices-table th {
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.85rem; font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
padding: 1rem 1.5rem; letter-spacing: 0.04em;
padding: 0.75rem 1.25rem;
text-align: left; text-align: left;
} }
.invoices-table tbody tr { .invoices-table tbody tr {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-subtle);
transition: background-color 0.2s; transition: background-color 0.1s ease;
} }
.invoices-table tbody tr:hover { .invoices-table tbody tr:hover {
@ -100,7 +112,8 @@
} }
.invoices-table td { .invoices-table td {
padding: 1rem 1.5rem; padding: 0.75rem 1.25rem;
font-size: 0.8125rem;
} }
.invoice-number { .invoice-number {
@ -110,9 +123,9 @@
.invoice-status .status-badge { .invoice-status .status-badge {
display: inline-block; display: inline-block;
padding: 0.4rem 0.8rem; padding: 0.2rem 0.55rem;
border-radius: 20px; border-radius: 4px;
font-size: 0.8rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
@ -120,12 +133,13 @@
.invoice-client { .invoice-client {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.4rem;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.8125rem;
} }
.client-icon { .client-icon {
font-size: 1rem; font-size: 0.875rem;
} }
.invoice-date, .invoice-date,
@ -141,7 +155,7 @@
.invoice-actions { .invoice-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
justify-content: center; justify-content: center;
} }

66
src/styles/login.css
View File

@ -4,21 +4,36 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, #1a2332 0%, #0d9488 100%); background: #0f172a;
position: relative;
overflow: hidden;
}
.login-container::before {
content: '';
position: absolute;
top: -40%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
pointer-events: none;
} }
.login-card { .login-card {
background: var(--card-bg); background: var(--card-bg);
padding: 2.5rem; padding: 2.75rem 2.5rem;
border-radius: 16px; border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.06);
width: 100%; width: 100%;
max-width: 420px; max-width: 400px;
animation: loginSlideUp 0.4s ease-out; animation: loginAppear 0.35s ease-out;
position: relative;
z-index: 1;
} }
@keyframes loginSlideUp { @keyframes loginAppear {
from { opacity: 0; transform: translateY(20px); } from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@ -28,41 +43,42 @@
} }
.login-logo-icon { .login-logo-icon {
width: 72px; width: 56px;
height: 72px; height: 56px;
margin: 0 auto 1rem; margin: 0 auto 0.875rem;
background: linear-gradient(135deg, #0d9488 0%, #1a2332 100%); background: var(--primary);
border-radius: 18px; border-radius: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 8px 24px rgba(13, 148, 136, 0.3); color: #fff;
} }
.login-brand { .login-brand {
margin: 0; margin: 0;
font-size: 1.75rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.025em;
} }
.login-subtitle { .login-subtitle {
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
font-size: 0.875rem; font-size: 0.8125rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
.login-button { .login-button {
width: 100%; width: 100%;
padding: 0.875rem; padding: 0.75rem;
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 1rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.25s, opacity 0.25s; transition: background-color 0.15s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -75,15 +91,15 @@
} }
.login-button:disabled { .login-button:disabled {
opacity: 0.7; opacity: 0.65;
cursor: not-allowed; cursor: not-allowed;
} }
.login-button .spinner { .login-button .spinner {
display: inline-block; display: inline-block;
width: 18px; width: 16px;
height: 18px; height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff; border-top-color: #fff;
border-radius: 50%; border-radius: 50%;
animation: spin 0.6s linear infinite; animation: spin 0.6s linear infinite;
@ -97,5 +113,5 @@
color: var(--danger); color: var(--danger);
text-align: center; text-align: center;
margin-top: 1rem; margin-top: 1rem;
font-size: 0.9rem; font-size: 0.8125rem;
} }

504
src/styles/modal.css
View File

@ -1,55 +1,41 @@
/* Modal Styles */ /* ===================== MODAL STYLES ===================== */
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
top: 0; top: 0; left: 0; right: 0; bottom: 0;
left: 0; background-color: rgba(15, 23, 42, 0.5);
right: 0; backdrop-filter: blur(2px);
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 1000;
padding: 1rem; padding: 1rem;
animation: fadeIn 0.2s ease-in-out; animation: modalFadeIn 0.2s ease;
} }
@keyframes fadeIn { @keyframes modalFadeIn {
from { from { opacity: 0; }
opacity: 0; to { opacity: 1; }
}
to {
opacity: 1;
}
} }
.modal-content { .modal-content {
background: var(--card-bg); background: var(--card-bg);
border-radius: 12px; border-radius: var(--radius-lg);
max-width: 900px; max-width: 880px;
width: 100%; width: 100%;
max-height: 90vh; max-height: 90vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--shadow-lg);
animation: slideUp 0.3s ease-out; animation: modalSlideUp 0.25s ease-out;
} }
@keyframes slideUp { @keyframes modalSlideUp {
from { from { transform: translateY(10px); opacity: 0; }
transform: translateY(20px); to { transform: translateY(0); opacity: 1; }
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} }
.modal-header { .modal-header {
padding: 1.5rem 2rem; padding: 1.25rem 1.75rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
align-items: center; align-items: center;
@ -60,21 +46,23 @@
.modal-title { .modal-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.75rem;
} }
.modal-title h2 { .modal-title h2 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.25rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.01em;
} }
.btn-close { .btn-close {
background: none; background: none;
border: none; border: none;
font-size: 2rem; font-size: 1.5rem;
line-height: 1; line-height: 1;
color: var(--text-secondary); color: var(--text-tertiary);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 32px; width: 32px;
@ -82,8 +70,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 4px; border-radius: var(--radius-sm);
transition: all 0.2s; transition: all 0.15s;
} }
.btn-close:hover { .btn-close:hover {
@ -92,30 +80,30 @@
} }
.modal-body { .modal-body {
padding: 2rem; padding: 1.75rem;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
} }
.modal-footer { .modal-footer {
padding: 1.5rem 2rem; padding: 1.25rem 1.75rem;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-shrink: 0; flex-shrink: 0;
gap: 1rem; gap: 0.75rem;
} }
.footer-actions-left, .footer-actions-left,
.footer-actions-right { .footer-actions-right {
display: flex; display: flex;
gap: 0.75rem; gap: 0.5rem;
} }
/* Form Styles in Modal */ /* Form in modal */
.form-section { .form-section {
margin-bottom: 2rem; margin-bottom: 1.75rem;
} }
.form-section:last-child { .form-section:last-child {
@ -123,24 +111,26 @@
} }
.form-section h3 { .form-section h3 {
margin: 0 0 1rem 0; margin: 0 0 0.875rem 0;
font-size: 1.125rem; font-size: 0.875rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600; font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
} }
.section-header { .section-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 1rem; margin-bottom: 0.875rem;
} }
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin-bottom: 0.875rem;
} }
.form-group { .form-group {
@ -153,20 +143,20 @@
} }
.form-group label { .form-group label {
font-size: 0.875rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 0.5rem; margin-bottom: 0.375rem;
} }
.form-group input, .form-group input,
.form-group textarea, .form-group textarea,
.form-group select { .form-group select {
padding: 0.625rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 0.9375rem; font-size: 0.875rem;
transition: all 0.2s; transition: border-color 0.15s ease, box-shadow 0.15s ease;
font-family: inherit; font-family: inherit;
background-color: #ffffff; background-color: #ffffff;
color: var(--text-primary); color: var(--text-primary);
@ -177,7 +167,7 @@
.form-group select:focus { .form-group select:focus {
outline: none; outline: none;
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
} }
.form-group input:disabled, .form-group input:disabled,
@ -193,13 +183,13 @@
color: var(--text-secondary); color: var(--text-secondary);
} }
/* Add Line Form */ /* Add line form */
.add-line-form { .add-line-form {
background-color: #f8fafc; background-color: #f8fafc;
padding: 1.5rem; padding: 1.25rem;
border-radius: 8px; border-radius: var(--radius-sm);
margin-bottom: 1rem; margin-bottom: 0.875rem;
border: 2px dashed var(--border-color); border: 1px dashed var(--border-color);
} }
.form-group textarea { .form-group textarea {
@ -207,15 +197,15 @@
min-height: 80px; min-height: 80px;
} }
/* Invoice Lines Table */ /* Invoice lines table */
.invoice-lines { .invoice-lines {
margin: 1rem 0; margin: 0.875rem 0;
} }
.lines-table { .lines-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 0.875rem; font-size: 0.8125rem;
} }
.lines-table thead { .lines-table thead {
@ -223,16 +213,19 @@
} }
.lines-table th { .lines-table th {
padding: 0.75rem; padding: 0.625rem 0.75rem;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
border-bottom: 2px solid var(--border-color); border-bottom: 1px solid var(--border-color);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
} }
.lines-table td { .lines-table td {
padding: 0.75rem; padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-subtle);
} }
.lines-table tbody tr:hover { .lines-table tbody tr:hover {
@ -241,110 +234,106 @@
.no-lines { .no-lines {
text-align: center; text-align: center;
color: var(--text-secondary); color: var(--text-tertiary);
font-style: italic; font-style: italic;
font-size: 0.8125rem;
} }
/* Delete line button */ /* Delete line */
.line-actions-col { .line-actions-col { width: 44px; }
width: 50px; .line-actions { text-align: center; }
}
.line-actions {
text-align: center;
}
.btn-delete-line { .btn-delete-line {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: var(--text-tertiary);
padding: 0.35rem; padding: 0.3rem;
border-radius: 6px; border-radius: var(--radius-sm);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.15s;
} }
.btn-delete-line:hover { .btn-delete-line:hover {
color: var(--danger, #ef4444); color: var(--danger);
background: rgba(239, 68, 68, 0.1); background: rgba(220, 38, 38, 0.08);
} }
.btn-delete-line:disabled { .btn-delete-line:disabled {
opacity: 0.5; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
} }
/* Invoice Totals */ /* Totals */
.invoice-totals { .invoice-totals {
margin-top: 1.5rem; margin-top: 1.25rem;
padding: 1rem; padding: 0.875rem;
background-color: #f8fafc; background-color: #f8fafc;
border-radius: 8px; border-radius: var(--radius-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.5rem;
max-width: 300px; max-width: 280px;
margin-left: auto; margin-left: auto;
border: 1px solid var(--border-color);
} }
.total-row { .total-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 0.9375rem; font-size: 0.8125rem;
} }
.total-row.paid { .total-row.paid {
color: var(--success, #22c55e); color: var(--success);
} }
.total-row.pending { .total-row.pending {
font-size: 1.125rem; font-size: 0.9375rem;
color: var(--primary); color: var(--primary);
padding-top: 0.75rem; padding-top: 0.5rem;
border-top: 2px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
/* Payment Section */ /* Payment */
.payment-section { .payment-section {
border-top: 2px solid var(--border-color); border-top: 1px solid var(--border-color);
padding-top: 1.25rem; padding-top: 1rem;
margin-top: 1rem; margin-top: 0.875rem;
} }
.payment-section h3 { .payment-section h3 {
margin: 0 0 1rem; margin: 0 0 0.75rem;
font-size: 1.05rem; font-size: 0.875rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600;
} }
.payment-form .form-row { .payment-form .form-row {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
margin-bottom: 0.75rem; margin-bottom: 0.625rem;
} }
.payment-form .form-group { .payment-form .form-group { flex: 1; }
flex: 1;
}
.payment-form label { .payment-form label {
display: block; display: block;
font-size: 0.8125rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.35rem; margin-bottom: 0.3rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
.payment-form input { .payment-form input {
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.45rem 0.625rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 0.875rem; font-size: 0.8125rem;
background: var(--card-bg); background: var(--card-bg);
color: var(--text-primary); color: var(--text-primary);
box-sizing: border-box; box-sizing: border-box;
@ -353,48 +342,50 @@
.payment-form input:focus { .payment-form input:focus {
outline: none; outline: none;
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
} }
.payment-hint { .payment-hint {
display: block; display: block;
font-size: 0.75rem; font-size: 0.7rem;
color: var(--text-secondary); color: var(--text-tertiary);
margin-top: 0.25rem; margin-top: 0.2rem;
} }
.btn-pay { .btn-pay {
padding: 0.5rem 1.25rem; padding: 0.45rem 1rem;
font-size: 0.875rem; font-size: 0.8125rem;
white-space: nowrap; white-space: nowrap;
} }
.btn-pay:disabled { .btn-pay:disabled {
opacity: 0.6; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
/* Payment History */ /* Payment history */
.payments-history-section { .payments-history-section {
border-top: 2px solid var(--border-color); border-top: 1px solid var(--border-color);
padding-top: 1.25rem; padding-top: 1rem;
margin-top: 1rem; margin-top: 0.875rem;
} }
.payments-history-section h3 { .payments-history-section h3 {
margin: 0 0 0.75rem; margin: 0 0 0.625rem;
font-size: 1.05rem; font-size: 0.875rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 600;
} }
.payment-amount-cell { .payment-amount-cell {
color: var(--success, #22c55e); color: var(--success);
font-weight: 600;
} }
/* Button Styles */ /* Buttons */
.btn-small { .btn-small {
padding: 0.5rem 1rem; padding: 0.45rem 0.875rem;
font-size: 0.875rem; font-size: 0.8125rem;
} }
.btn-primary { .btn-primary {
@ -430,7 +421,7 @@
background: transparent; background: transparent;
color: var(--danger); color: var(--danger);
border: 1px solid var(--danger); border: 1px solid var(--danger);
transition: all 0.2s; transition: all 0.15s;
} }
.btn-danger-outline:hover { .btn-danger-outline:hover {
@ -439,14 +430,14 @@
} }
.btn-danger-outline:disabled { .btn-danger-outline:disabled {
opacity: 0.6; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
/* Invoice Actions Buttons */ /* Invoice actions */
.invoice-actions { .invoice-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -454,206 +445,160 @@
.btn-action { .btn-action {
background: none; background: none;
border: none; border: none;
font-size: 1.25rem; font-size: 1.125rem;
cursor: pointer; cursor: pointer;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.375rem;
border-radius: 4px; border-radius: var(--radius-sm);
transition: all 0.2s; transition: all 0.15s;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-tertiary);
} }
.btn-action:hover { .btn-action:hover {
background-color: #f1f5f9; background-color: #f1f5f9;
transform: scale(1.1); color: var(--text-primary);
} }
.btn-delete:hover { .btn-delete:hover {
background-color: #fee2e2; background-color: #fee2e2;
color: var(--danger);
} }
/* Loading and Error States */ /* Loading/error */
.loading { .loading {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.8125rem;
} }
.error { .error {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: var(--danger); color: var(--danger);
font-size: 0.8125rem;
} }
/* Responsive Modal */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.modal-overlay { .modal-overlay { padding: 0; }
padding: 0;
}
.modal-content { .modal-content {
max-width: 100%; max-width: 100%;
max-height: 100vh; max-height: 100vh;
border-radius: 0; border-radius: 0;
} }
.modal-header, .modal-body, .modal-footer { padding: 1rem; }
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
.form-row { .form-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.75rem; gap: 0.625rem;
}
.invoice-totals {
max-width: 100%;
}
.modal-footer {
flex-direction: column;
}
.footer-actions-left,
.footer-actions-right {
width: 100%;
}
.footer-actions-left button,
.footer-actions-right button {
flex: 1;
} }
.invoice-totals { max-width: 100%; }
.modal-footer { flex-direction: column; }
.footer-actions-left, .footer-actions-right { width: 100%; }
.footer-actions-left button, .footer-actions-right button { flex: 1; }
} }
/* ============================================ /* ============================================
Confirm Exit Modal Styles Confirm Exit Modal
============================================ */ ============================================ */
.confirm-exit-overlay { .confirm-exit-overlay {
position: fixed; position: fixed;
top: 0; top: 0; left: 0; right: 0; bottom: 0;
left: 0; background-color: rgba(15, 23, 42, 0.55);
right: 0; backdrop-filter: blur(2px);
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2000; z-index: 2000;
padding: 1rem; padding: 1rem;
animation: confirmFadeIn 0.2s ease-out; animation: confirmFadeIn 0.15s ease-out;
} }
.confirm-exit-overlay.closing { .confirm-exit-overlay.closing {
animation: confirmFadeOut 0.2s ease-out forwards; animation: confirmFadeOut 0.15s ease-out forwards;
} }
@keyframes confirmFadeIn { @keyframes confirmFadeIn {
from { from { opacity: 0; }
opacity: 0; to { opacity: 1; }
}
to {
opacity: 1;
}
} }
@keyframes confirmFadeOut { @keyframes confirmFadeOut {
from { from { opacity: 1; }
opacity: 1; to { opacity: 0; }
}
to {
opacity: 0;
}
} }
.confirm-exit-modal { .confirm-exit-modal {
background: var(--card-bg, #ffffff); background: var(--card-bg, #ffffff);
border-radius: 16px; border-radius: var(--radius-lg);
padding: 2rem; padding: 2rem;
max-width: 400px; max-width: 380px;
width: 100%; width: 100%;
text-align: center; text-align: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); box-shadow: var(--shadow-lg);
animation: confirmSlideUp 0.3s ease-out; animation: confirmSlideUp 0.2s ease-out;
} }
.confirm-exit-overlay.closing .confirm-exit-modal { .confirm-exit-overlay.closing .confirm-exit-modal {
animation: confirmSlideDown 0.2s ease-out forwards; animation: confirmSlideDown 0.15s ease-out forwards;
} }
@keyframes confirmSlideUp { @keyframes confirmSlideUp {
from { from { transform: translateY(10px); opacity: 0; }
transform: translateY(20px) scale(0.95); to { transform: translateY(0); opacity: 1; }
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
} }
@keyframes confirmSlideDown { @keyframes confirmSlideDown {
from { from { transform: translateY(0); opacity: 1; }
transform: translateY(0) scale(1); to { transform: translateY(10px); opacity: 0; }
opacity: 1;
}
to {
transform: translateY(20px) scale(0.95);
opacity: 0;
}
} }
.confirm-exit-icon { .confirm-exit-icon {
width: 80px; width: 56px;
height: 80px; height: 56px;
margin: 0 auto 1.25rem; margin: 0 auto 1rem;
background: linear-gradient(135deg, #fef9c3 0%, #fde68a 50%, #fcd34d 100%); background: #fef9c3;
border-radius: 50%; border-radius: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.12), 0 4px 12px rgba(245, 158, 11, 0.2); color: #ca8a04;
animation: warningPulse 2s ease-in-out infinite;
}
@keyframes warningPulse {
0%, 100% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.12), 0 4px 12px rgba(245, 158, 11, 0.2); }
50% { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0.08), 0 4px 16px rgba(245, 158, 11, 0.25); }
} }
.confirm-exit-icon svg { .confirm-exit-icon svg {
filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.3)); width: 28px;
height: 28px;
} }
.confirm-exit-title { .confirm-exit-title {
margin: 0 0 0.75rem; margin: 0 0 0.5rem;
font-size: 1.375rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary, #1e293b); color: var(--text-primary, #1e293b);
} }
.confirm-exit-message { .confirm-exit-message {
margin: 0 0 1.75rem; margin: 0 0 1.5rem;
font-size: 0.9375rem; font-size: 0.8125rem;
color: var(--text-secondary, #64748b); color: var(--text-secondary, #64748b);
line-height: 1.5; line-height: 1.5;
} }
.confirm-exit-actions { .confirm-exit-actions {
display: flex; display: flex;
gap: 0.75rem; gap: 0.625rem;
} }
.confirm-exit-actions button { .confirm-exit-actions button {
flex: 1; flex: 1;
padding: 0.75rem 1.25rem; padding: 0.6rem 1rem;
border-radius: 8px; border-radius: var(--radius-sm);
font-size: 0.9375rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background-color 0.15s ease;
border: none; border: none;
} }
@ -664,8 +609,6 @@
.confirm-exit-actions .btn-stay:hover { .confirm-exit-actions .btn-stay:hover {
background-color: #1d4ed8; background-color: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
} }
.confirm-exit-actions .btn-exit { .confirm-exit-actions .btn-exit {
@ -676,50 +619,28 @@
.confirm-exit-actions .btn-exit:hover { .confirm-exit-actions .btn-exit:hover {
background-color: #e2e8f0; background-color: #e2e8f0;
border-color: #cbd5e1;
} }
/* Responsive Confirm Modal */ /* Responsive */
@media (max-width: 480px) { @media (max-width: 480px) {
.confirm-exit-modal { .confirm-exit-modal { padding: 1.5rem; margin: 1rem; }
padding: 1.5rem; .confirm-exit-icon { width: 48px; height: 48px; }
margin: 1rem; .confirm-exit-icon svg { width: 24px; height: 24px; }
} .confirm-exit-actions { flex-direction: column-reverse; }
.confirm-exit-icon {
width: 60px;
height: 60px;
}
.confirm-exit-icon svg {
width: 36px;
height: 36px;
}
.confirm-exit-title {
font-size: 1.25rem;
}
.confirm-exit-actions {
flex-direction: column-reverse;
}
} }
/* ===================== CONFIRM DIALOG ===================== */ /* ===================== CONFIRM DIALOG ===================== */
.confirm-dialog-overlay { .confirm-dialog-overlay {
position: fixed; position: fixed;
top: 0; top: 0; left: 0; right: 0; bottom: 0;
left: 0; background: rgba(15, 23, 42, 0.5);
right: 0; backdrop-filter: blur(2px);
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10001; z-index: 10001;
opacity: 0; opacity: 0;
transition: opacity 0.25s ease; transition: opacity 0.2s ease;
} }
.confirm-dialog-overlay.visible { .confirm-dialog-overlay.visible {
@ -728,81 +649,80 @@
.confirm-dialog-card { .confirm-dialog-card {
background: var(--card-bg, #fff); background: var(--card-bg, #fff);
border-radius: 16px; border-radius: var(--radius-lg);
padding: 2rem; padding: 2rem;
max-width: 400px; max-width: 380px;
width: 90%; width: 90%;
text-align: center; text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); box-shadow: var(--shadow-lg);
transform: scale(0.9) translateY(10px); transform: translateY(8px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
} }
.confirm-dialog-overlay.visible .confirm-dialog-card { .confirm-dialog-overlay.visible .confirm-dialog-card {
transform: scale(1) translateY(0); transform: translateY(0);
opacity: 1;
} }
.confirm-dialog-icon { .confirm-dialog-icon {
width: 56px; width: 48px;
height: 56px; height: 48px;
border-radius: 50%; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 1rem; margin: 0 auto 0.875rem;
} }
.confirm-dialog-title { .confirm-dialog-title {
font-size: 1.15rem; font-size: 1.05rem;
font-weight: 700; font-weight: 600;
color: var(--text-primary, #1a2332); color: var(--text-primary, #0f172a);
margin: 0 0 0.5rem; margin: 0 0 0.375rem;
} }
.confirm-dialog-message { .confirm-dialog-message {
font-size: 0.9rem; font-size: 0.8125rem;
color: var(--text-secondary, #64748b); color: var(--text-secondary, #64748b);
line-height: 1.5; line-height: 1.5;
margin: 0 0 1.5rem; margin: 0 0 1.25rem;
} }
.confirm-dialog-actions { .confirm-dialog-actions {
display: flex; display: flex;
gap: 0.75rem; gap: 0.625rem;
justify-content: center; justify-content: center;
} }
.confirm-dialog-btn-cancel { .confirm-dialog-btn-cancel {
padding: 0.6rem 1.25rem; padding: 0.5rem 1rem;
background: transparent; background: transparent;
border: 1px solid var(--border-color, #e2e8f0); border: 1px solid var(--border-color, #e2e8f0);
border-radius: 8px; border-radius: var(--radius-sm);
color: var(--text-secondary, #64748b); color: var(--text-secondary, #64748b);
font-weight: 500; font-weight: 500;
font-size: 0.8125rem;
cursor: pointer; cursor: pointer;
transition: background 0.2s, color 0.2s; transition: background 0.15s, color 0.15s;
} }
.confirm-dialog-btn-cancel:hover { .confirm-dialog-btn-cancel:hover {
background: #f8fafc; background: #f8fafc;
color: var(--text-primary, #1a2332); color: var(--text-primary, #0f172a);
} }
.confirm-dialog-btn-confirm { .confirm-dialog-btn-confirm {
padding: 0.6rem 1.25rem; padding: 0.5rem 1rem;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm);
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
font-size: 0.8125rem;
cursor: pointer; cursor: pointer;
transition: filter 0.2s, transform 0.15s; transition: filter 0.15s;
} }
.confirm-dialog-btn-confirm:hover { .confirm-dialog-btn-confirm:hover {
filter: brightness(1.1); filter: brightness(1.08);
transform: translateY(-1px);
}
.confirm-dialog-btn-confirm:active {
transform: translateY(0);
} }

87
src/styles/overlays.css
View File

@ -1,18 +1,15 @@
/* ===================== SESSION EXPIRED OVERLAY ===================== */ /* ===================== SESSION EXPIRED OVERLAY ===================== */
.session-expired-overlay { .session-expired-overlay {
position: fixed; position: fixed;
top: 0; top: 0; left: 0; right: 0; bottom: 0;
left: 0; background: rgba(15, 23, 42, 0.6);
right: 0; backdrop-filter: blur(4px);
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10000; z-index: 10000;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.25s ease;
} }
.session-expired-overlay.visible { .session-expired-overlay.visible {
@ -21,83 +18,67 @@
.session-expired-card { .session-expired-card {
background: var(--card-bg, #fff); background: var(--card-bg, #fff);
border-radius: 20px; border-radius: var(--radius-lg);
padding: 2.5rem 2rem; padding: 2.25rem 2rem;
max-width: 400px; max-width: 380px;
width: 90%; width: 90%;
text-align: center; text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: var(--shadow-lg);
transform: scale(0.9) translateY(20px); transform: translateY(10px);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.25s ease;
} }
.session-expired-overlay.visible .session-expired-card { .session-expired-overlay.visible .session-expired-card {
transform: scale(1) translateY(0); transform: translateY(0);
} }
.session-expired-icon { .session-expired-icon {
width: 80px; width: 56px;
height: 80px; height: 56px;
border-radius: 50%; border-radius: 14px;
background: linear-gradient(135deg, #e53e3e, #c53030); background: #fee2e2;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 1.25rem; margin: 0 auto 1.125rem;
color: #fff; color: #dc2626;
animation: expiredPulse 2s ease-in-out infinite;
}
@keyframes expiredPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
50% { box-shadow: 0 0 0 12px rgba(229, 62, 62, 0); }
} }
.session-expired-icon.disconnected { .session-expired-icon.disconnected {
background: linear-gradient(135deg, #ed8936, #dd6b20); background: #ffedd5;
animation: disconnectedPulse 2s ease-in-out infinite; color: #ea580c;
}
@keyframes disconnectedPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(237, 137, 54, 0.4); }
50% { box-shadow: 0 0 0 12px rgba(237, 137, 54, 0); }
} }
.session-expired-title { .session-expired-title {
font-size: 1.4rem; font-size: 1.125rem;
font-weight: 700; font-weight: 600;
color: var(--text-primary, #1a202c); color: var(--text-primary, #0f172a);
margin: 0 0 0.75rem; margin: 0 0 0.5rem;
letter-spacing: -0.01em;
} }
.session-expired-message { .session-expired-message {
font-size: 0.95rem; font-size: 0.8125rem;
color: var(--text-secondary, #718096); color: var(--text-secondary, #64748b);
line-height: 1.6; line-height: 1.6;
margin: 0 0 1.75rem; margin: 0 0 1.5rem;
} }
.session-expired-btn { .session-expired-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.4rem;
padding: 0.75rem 2rem; padding: 0.6rem 1.5rem;
background: linear-gradient(135deg, #0d9488, #1a2332); background: var(--primary, #2563eb);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 12px; border-radius: var(--radius-sm);
font-size: 1rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: transform 0.15s, box-shadow 0.25s; transition: background 0.15s ease;
box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
} }
.session-expired-btn:hover { .session-expired-btn:hover {
transform: translateY(-2px); background: var(--primary-hover, #1d4ed8);
box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5);
}
.session-expired-btn:active {
transform: translateY(0);
} }

127
src/styles/settings.css
View File

@ -1,103 +1,105 @@
/* ===================== SETTINGS PAGE ===================== */ /* ===================== SETTINGS PAGE ===================== */
.settings-page { .settings-page {
max-width: 960px; max-width: 880px;
margin: 0 auto; margin: 0 auto;
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
} }
.settings-header { .settings-header {
margin-bottom: 2rem; margin-bottom: 1.75rem;
} }
.settings-header h2 { .settings-header h2 {
font-size: 1.6rem; font-size: 1.375rem;
color: var(--text-primary); color: var(--text-primary);
margin: 0 0 0.35rem; margin: 0 0 0.25rem;
font-weight: 600;
letter-spacing: -0.02em;
} }
.settings-subtitle { .settings-subtitle {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.95rem; font-size: 0.8125rem;
margin: 0; margin: 0;
} }
/* Grid layout */ /* Grid */
.settings-grid { .settings-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem; gap: 1rem;
} }
/* Card base */ /* Card */
.settings-card { .settings-card {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 14px; border-radius: var(--radius-md);
padding: 1.75rem; padding: 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
transition: box-shadow 0.25s, transform 0.25s; transition: box-shadow 0.15s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-xs);
} }
.settings-card:hover { .settings-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
transform: translateY(-2px);
} }
/* Icon circles */ /* Icon */
.settings-card-icon { .settings-card-icon {
width: 56px; width: 44px;
height: 56px; height: 44px;
border-radius: 50%; border-radius: var(--radius-md);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 1rem; margin-bottom: 0.875rem;
} }
.settings-card-icon svg { .settings-card-icon svg {
width: 26px; width: 22px;
height: 26px; height: 22px;
} }
.session-icon { .session-icon {
background: linear-gradient(135deg, #0d9488, #0f766e); background: rgba(37, 99, 235, 0.08);
color: #fff; color: #2563eb;
} }
.api-icon { .api-icon {
background: linear-gradient(135deg, #48bb78, #38a169); background: rgba(22, 163, 74, 0.08);
color: #fff; color: #16a34a;
} }
.about-icon { .about-icon {
background: linear-gradient(135deg, #9f7aea, #805ad5); background: rgba(99, 102, 241, 0.08);
color: #fff; color: #6366f1;
} }
/* Card title */ /* Card title */
.settings-card h3 { .settings-card h3 {
font-size: 1.1rem; font-size: 0.9375rem;
color: var(--text-primary); color: var(--text-primary);
margin: 0 0 1rem; margin: 0 0 0.875rem;
font-weight: 600;
} }
/* Info rows */ /* Info rows */
.settings-info { .settings-info {
width: 100%; width: 100%;
margin-bottom: 1.25rem; margin-bottom: 1rem;
} }
.settings-info-row { .settings-info-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.5rem 0; padding: 0.4rem 0;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-subtle);
font-size: 0.88rem; font-size: 0.8125rem;
} }
.settings-info-row:last-child { .settings-info-row:last-child {
@ -115,70 +117,61 @@
max-width: 60%; max-width: 60%;
} }
/* Token preview */ /* Token */
.settings-token { .settings-token {
font-family: 'Courier New', Courier, monospace; font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.82rem; font-size: 0.75rem;
background: rgba(13, 148, 136, 0.08); background: rgba(37, 99, 235, 0.06);
padding: 2px 8px; padding: 2px 6px;
border-radius: 6px; border-radius: 4px;
color: var(--primary); color: var(--primary);
} }
/* API url */ /* API url */
.settings-api-url { .settings-api-url {
font-family: 'Courier New', Courier, monospace; font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.82rem; font-size: 0.75rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
/* API status */ /* API status */
.settings-api-status { .settings-api-status {
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.875rem;
margin-bottom: 0.5rem; margin-bottom: 0.375rem;
} }
.api-ok { .api-ok { color: #16a34a; }
color: #38a169; .api-error { color: #dc2626; }
}
.api-error {
color: #e53e3e;
}
/* Buttons */ /* Buttons */
.btn-settings { .btn-settings {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.4rem;
padding: 0.6rem 1.4rem; padding: 0.5rem 1.125rem;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm);
font-size: 0.9rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.2s, transform 0.15s; transition: background 0.15s ease;
margin-top: auto; margin-top: auto;
} }
.btn-settings:active {
transform: scale(0.97);
}
.btn-danger-settings { .btn-danger-settings {
background: #e53e3e; background: var(--danger);
color: #fff; color: #fff;
} }
.btn-danger-settings:hover { .btn-danger-settings:hover {
background: #c53030; background: var(--danger-hover);
} }
.btn-outline-settings { .btn-outline-settings {
background: transparent; background: transparent;
color: var(--primary); color: var(--primary);
border: 1.5px solid var(--primary); border: 1px solid var(--primary);
} }
.btn-outline-settings:hover { .btn-outline-settings:hover {
@ -188,16 +181,12 @@
/* Responsive */ /* Responsive */
@media (max-width: 640px) { @media (max-width: 640px) {
.settings-grid { .settings-grid { grid-template-columns: 1fr; }
grid-template-columns: 1fr;
}
.settings-info-row { .settings-info-row {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 0.25rem; gap: 0.2rem;
} }
.settings-info-row span { .settings-info-row span {
text-align: left; text-align: left;
max-width: 100%; max-width: 100%;

75
src/styles/sidebar.css
View File

@ -6,25 +6,24 @@
} }
.sidebar { .sidebar {
width: 250px; width: 240px;
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
border-right: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: width 0.3s ease, transform 0.3s ease; transition: width 0.2s ease;
position: relative; position: relative;
z-index: 100; z-index: 100;
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.06);
} }
.sidebar-header { .sidebar-header {
padding: 1.25rem 0.75rem; padding: 1.25rem 0.875rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
min-height: 64px; min-height: 60px;
box-sizing: border-box; box-sizing: border-box;
} }
@ -34,7 +33,7 @@
gap: 0.6rem; gap: 0.6rem;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
transition: opacity 0.2s; transition: opacity 0.15s;
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -51,34 +50,34 @@
.sidebar-header h2 { .sidebar-header h2 {
margin: 0; margin: 0;
font-size: 1.3rem; font-size: 1.125rem;
color: #ffffff; color: #ffffff;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 700; font-weight: 600;
letter-spacing: -0.02em; letter-spacing: -0.015em;
} }
.sidebar-toggle { .sidebar-toggle {
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: 0.4rem;
color: var(--sidebar-text); color: var(--sidebar-text);
font-size: 1.25rem; font-size: 1.125rem;
border-radius: 4px; border-radius: var(--radius-sm);
transition: background-color 0.2s, color 0.2s; transition: background-color 0.15s, color 0.15s;
flex-shrink: 0; flex-shrink: 0;
width: 36px; width: 32px;
height: 36px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.sidebar-toggle:hover { .sidebar-toggle:hover {
background-color: var(--sidebar-hover); background-color: rgba(255, 255, 255, 0.06);
border-color: transparent; border-color: transparent;
color: #fff; color: #fff;
} }
@ -86,7 +85,7 @@
.sidebar-nav { .sidebar-nav {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 1rem 0; padding: 0.75rem 0;
} }
.sidebar-menu { .sidebar-menu {
@ -96,34 +95,36 @@
} }
.sidebar-menu li { .sidebar-menu li {
margin: 0; margin: 1px 0;
} }
.sidebar-link { .sidebar-link {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.75rem 1rem; padding: 0.6rem 1rem;
margin: 0 0.5rem;
color: var(--sidebar-text); color: var(--sidebar-text);
text-decoration: none; text-decoration: none;
transition: background-color 0.2s, color 0.2s; transition: background-color 0.15s, color 0.15s;
cursor: pointer; cursor: pointer;
border-radius: var(--radius-sm);
font-size: 0.875rem;
} }
.sidebar-link:hover { .sidebar-link:hover {
background-color: var(--sidebar-hover); background-color: rgba(255, 255, 255, 0.06);
color: #e2e8f0; color: #e2e8f0;
} }
.sidebar-link.active { .sidebar-link.active {
background-color: rgba(13, 148, 136, 0.15); background-color: rgba(37, 99, 235, 0.12);
color: var(--sidebar-active); color: var(--sidebar-active);
border-left: 3px solid var(--sidebar-active);
} }
.sidebar-icon { .sidebar-icon {
font-size: 1.25rem; font-size: 1.125rem;
margin-right: 0.75rem; margin-right: 0.625rem;
min-width: 1.5rem; min-width: 1.25rem;
text-align: center; text-align: center;
} }
@ -133,9 +134,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* Collapsed Sidebar State */ /* Collapsed */
.sidebar.collapsed { .sidebar.collapsed {
width: 70px; width: 64px;
} }
.sidebar.collapsed .sidebar-header h2, .sidebar.collapsed .sidebar-header h2,
@ -159,11 +160,17 @@
margin-right: 0; margin-right: 0;
} }
/* Main Content Area */ .sidebar.collapsed .sidebar-link {
justify-content: center;
padding: 0.6rem;
margin: 1px 0.375rem;
}
/* Main content */
.main-content { .main-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
background-color: #f0f4f8; background-color: #f8fafc;
} }
.main-content > div { .main-content > div {
@ -172,7 +179,7 @@
padding: 2rem; padding: 2rem;
} }
/* Responsive Design */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.sidebar { .sidebar {
position: fixed; position: fixed;
@ -185,7 +192,7 @@
.sidebar.collapsed { .sidebar.collapsed {
transform: translateX(-100%); transform: translateX(-100%);
width: 250px; width: 240px;
} }
.main-content { .main-content {

87
src/styles/toast.css
View File

@ -1,29 +1,31 @@
/* ===================== TOAST NOTIFICATIONS ===================== */ /* ===================== TOAST NOTIFICATIONS ===================== */
.toast-container { .toast-container {
position: fixed; position: fixed;
top: 1.5rem; top: 1.25rem;
right: 1.5rem; right: 1.25rem;
z-index: 11000; z-index: 11000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.5rem;
pointer-events: none; pointer-events: none;
} }
.toast { .toast {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.625rem;
padding: 0.875rem 1.25rem; padding: 0.75rem 1rem;
border-radius: 12px; border-radius: var(--radius-md);
background: var(--card-bg, #fff); background: var(--card-bg, #fff);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 0, 0, 0.04);
min-width: 280px; min-width: 260px;
max-width: 420px; max-width: 380px;
pointer-events: auto; pointer-events: auto;
transform: translateX(120%); transform: translateX(110%);
opacity: 0; opacity: 0;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; transition: transform 0.25s ease, opacity 0.2s ease;
position: relative;
overflow: hidden;
} }
.toast.visible { .toast.visible {
@ -32,15 +34,15 @@
} }
.toast.removing { .toast.removing {
transform: translateX(120%); transform: translateX(110%);
opacity: 0; opacity: 0;
transition: transform 0.25s ease-in, opacity 0.2s ease; transition: transform 0.2s ease-in, opacity 0.15s ease;
} }
.toast-icon { .toast-icon {
width: 36px; width: 32px;
height: 36px; height: 32px;
border-radius: 50%; border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -48,28 +50,28 @@
} }
.toast-icon svg { .toast-icon svg {
width: 18px; width: 16px;
height: 18px; height: 16px;
} }
.toast.toast-success .toast-icon { .toast.toast-success .toast-icon {
background: rgba(5, 150, 105, 0.12); background: rgba(22, 163, 74, 0.08);
color: #059669; color: #16a34a;
} }
.toast.toast-error .toast-icon { .toast.toast-error .toast-icon {
background: rgba(220, 38, 38, 0.12); background: rgba(220, 38, 38, 0.08);
color: #dc2626; color: #dc2626;
} }
.toast.toast-warning .toast-icon { .toast.toast-warning .toast-icon {
background: rgba(217, 119, 6, 0.12); background: rgba(202, 138, 4, 0.08);
color: #d97706; color: #ca8a04;
} }
.toast.toast-info .toast-icon { .toast.toast-info .toast-icon {
background: rgba(13, 148, 136, 0.12); background: rgba(37, 99, 235, 0.08);
color: #0d9488; color: #2563eb;
} }
.toast-body { .toast-body {
@ -79,13 +81,13 @@
.toast-title { .toast-title {
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.8125rem;
color: var(--text-primary, #1a2332); color: var(--text-primary, #0f172a);
margin: 0 0 0.15rem; margin: 0 0 0.1rem;
} }
.toast-message { .toast-message {
font-size: 0.82rem; font-size: 0.75rem;
color: var(--text-secondary, #64748b); color: var(--text-secondary, #64748b);
margin: 0; margin: 0;
line-height: 1.4; line-height: 1.4;
@ -95,10 +97,10 @@
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: var(--text-secondary, #94a3b8); color: var(--text-tertiary, #94a3b8);
padding: 0.25rem; padding: 0.2rem;
border-radius: 4px; border-radius: 4px;
transition: color 0.2s, background 0.2s; transition: color 0.15s, background 0.15s;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -106,31 +108,30 @@
} }
.toast-close:hover { .toast-close:hover {
color: var(--text-primary, #1a2332); color: var(--text-primary, #0f172a);
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.04);
} }
.toast-progress { .toast-progress {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 3px; height: 2px;
border-radius: 0 0 12px 12px; border-radius: 0 0 var(--radius-md) var(--radius-md);
transition: width linear; transition: width linear;
} }
.toast.toast-success .toast-progress { background: #059669; } .toast.toast-success .toast-progress { background: #16a34a; }
.toast.toast-error .toast-progress { background: #dc2626; } .toast.toast-error .toast-progress { background: #dc2626; }
.toast.toast-warning .toast-progress { background: #d97706; } .toast.toast-warning .toast-progress { background: #ca8a04; }
.toast.toast-info .toast-progress { background: #0d9488; } .toast.toast-info .toast-progress { background: #2563eb; }
@media (max-width: 480px) { @media (max-width: 480px) {
.toast-container { .toast-container {
left: 1rem; left: 0.75rem;
right: 1rem; right: 0.75rem;
top: 1rem; top: 0.75rem;
} }
.toast { .toast {
min-width: auto; min-width: auto;
max-width: 100%; max-width: 100%;