jimmy/weflow-new
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: BackupPage & ContactsPage & ExportPage & InsightInboxPage & MyFootprintPage & ResourcesPage UI rebuild

Browse Source
This commit is contained in:
Jason committed 2026-05-05 22:17:30 +08:00
1 parent 5319153879
commit 24ab0239df
8 files changed
+358 -398
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/BackupPage.scss
+29 -29
View File
@@ -1,7 +1,7 @@
.backup-page { .backup-page {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding: 24px; padding: 20px;
color: var(--text-primary); color: var(--text-primary);
background: var(--bg-primary); background: var(--bg-primary);
} }
@@ -10,13 +10,13 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 16px;
margin-bottom: 20px; margin-bottom: 16px;
h1 { h1 {
margin: 0; margin: 0;
font-size: 26px; font-size: 22px;
font-weight: 700; font-weight: 650;
letter-spacing: 0; letter-spacing: 0;
} }
@@ -30,7 +30,7 @@
.backup-actions { .backup-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
} }
@@ -38,17 +38,17 @@
.resource-options { .resource-options {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
margin: -8px 0 18px; margin: -6px 0 14px;
label { label {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
min-height: 36px; min-height: 34px;
padding: 8px 10px; padding: 7px 10px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -69,7 +69,7 @@
.secondary-btn { .secondary-btn {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
padding: 9px 12px; padding: 8px 11px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -100,19 +100,19 @@
} }
.backup-status-band { .backup-status-band {
min-height: 88px; min-height: 76px;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 12px;
margin-bottom: 18px; margin-bottom: 14px;
padding: 16px 0; padding: 12px 0;
} }
.status-icon { .status-icon {
width: 42px; width: 36px;
height: 42px; height: 36px;
border-radius: 8px; border-radius: 8px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--primary); color: var(--primary);
@@ -142,8 +142,8 @@
} }
.progress-track { .progress-track {
margin-top: 12px; margin-top: 10px;
height: 6px; height: 5px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border-radius: 999px; border-radius: 999px;
overflow: hidden; overflow: hidden;
@@ -160,7 +160,7 @@
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px; gap: 12px;
margin-bottom: 18px; margin-bottom: 14px;
} }
.summary-item, .summary-item,
@@ -168,8 +168,8 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
background: var(--bg-secondary); background: var(--bg-secondary);
padding: 14px; padding: 12px;
min-height: 74px; min-height: 66px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
@@ -185,14 +185,14 @@
strong { strong {
color: var(--text-primary); color: var(--text-primary);
font-size: 20px; font-size: 18px;
line-height: 1.1; line-height: 1.1;
} }
} }
.backup-detail { .backup-detail {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
padding-top: 18px; padding-top: 14px;
} }
.detail-heading { .detail-heading {
@@ -200,11 +200,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
margin-bottom: 12px; margin-bottom: 10px;
h2 { h2 {
margin: 0; margin: 0;
font-size: 18px; font-size: 17px;
} }
span { span {
@@ -217,7 +217,7 @@
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; gap: 12px;
margin-bottom: 14px; margin-bottom: 12px;
div { div {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@@ -246,7 +246,7 @@
.db-list { .db-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 6px;
} }
.db-row { .db-row {
@@ -255,7 +255,7 @@
gap: 10px; gap: 10px;
align-items: center; align-items: center;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding: 9px 0; padding: 8px 0;
font-size: 13px; font-size: 13px;
span { span {
src/pages/ContactsPage.scss
+60 -67
View File
@@ -7,8 +7,8 @@
// 左侧联系人面板 // 左侧联系人面板
.contacts-panel { .contacts-panel {
width: 350px; width: 324px;
min-width: 350px; min-width: 324px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
@@ -19,7 +19,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 24px; padding: 14px 18px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
h2 { h2 {
@@ -40,7 +40,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-secondary); color: var(--text-secondary);
transition: all 0.2s; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
background: var(--bg-hover); background: var(--bg-hover);
@@ -67,10 +67,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin: 16px 20px; margin: 12px 16px;
padding: 10px 14px; padding: 8px 10px;
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: 10px; border-radius: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
transition: border-color 0.2s; transition: border-color 0.2s;
@@ -117,9 +117,9 @@
.type-filters { .type-filters {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 6px;
padding: 0 20px 16px; padding: 0 16px 12px;
max-width: 300px; max-width: 292px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@@ -129,16 +129,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 8px 14px; padding: 7px 10px;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 10px; border-radius: 8px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-secondary);
transition: all 0.2s ease; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap; white-space: nowrap;
input[type="checkbox"] { input[type="checkbox"] {
@@ -167,7 +167,7 @@
color: var(--text-primary); color: var(--text-primary);
svg { svg {
transform: translateY(-1px); transform: none;
} }
} }
@@ -185,7 +185,7 @@
} }
.contacts-count { .contacts-count {
padding: 0 20px 12px; padding: 0 16px 10px;
font-size: 13px; font-size: 13px;
color: var(--text-secondary); color: var(--text-secondary);
@@ -211,7 +211,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
padding: 0 20px 12px; padding: 0 16px 10px;
.checkbox-item { .checkbox-item {
font-size: 13px; font-size: 13px;
@@ -249,7 +249,7 @@
.issue-card { .issue-card {
border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color)); border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color));
background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--card-bg)); background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--card-bg));
border-radius: 12px; border-radius: 8px;
padding: 14px; padding: 14px;
color: var(--text-primary); color: var(--text-primary);
@@ -303,7 +303,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
&:hover { &:hover {
color: var(--text-primary); color: var(--text-primary);
@@ -335,7 +335,7 @@
.contacts-list { .contacts-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0 12px 12px; padding: 0 10px 10px;
position: relative; position: relative;
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -358,7 +358,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 76px; height: 64px;
padding-bottom: 4px; padding-bottom: 4px;
will-change: transform; will-change: transform;
} }
@@ -366,12 +366,12 @@
.contact-item { .contact-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
padding: 12px; padding: 8px 10px;
height: 72px; height: 60px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 8px;
transition: all 0.2s; transition: background 0.15s ease;
cursor: pointer; cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
@@ -402,10 +402,10 @@
} }
.contact-avatar { .contact-avatar {
width: 44px; width: 38px;
height: 44px; height: 38px;
border-radius: 10px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -419,8 +419,8 @@
} }
span { span {
color: #fff; color: var(--text-secondary);
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
} }
@@ -484,23 +484,23 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
padding-bottom: 24px; padding-bottom: 18px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
margin-bottom: 20px; margin-bottom: 16px;
.detail-avatar { .detail-avatar {
width: 80px; width: 68px;
height: 80px; height: 68px;
border-radius: 16px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
img { width: 100%; height: 100%; object-fit: cover; } img { width: 100%; height: 100%; object-fit: cover; }
span { color: #fff; font-size: 28px; font-weight: 600; } span { color: var(--text-secondary); font-size: 24px; font-weight: 600; }
} }
.detail-name { .detail-name {
@@ -511,7 +511,7 @@
} }
.detail-info-list { .detail-info-list {
margin-bottom: 24px; margin-bottom: 18px;
.detail-row { .detail-row {
display: flex; display: flex;
@@ -565,15 +565,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 12px; padding: 10px 12px;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 10px; border-radius: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: background 0.15s ease;
&:hover { background: var(--primary-hover); } &:hover { background: var(--primary-hover); }
} }
@@ -600,7 +600,7 @@
.settings-content { .settings-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 20px 24px; padding: 16px 18px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
@@ -613,7 +613,7 @@
} }
.setting-section { .setting-section {
margin-bottom: 28px; margin-bottom: 22px;
h3 { h3 {
font-size: 13px; font-size: 13px;
@@ -621,7 +621,7 @@
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin: 0 0 14px; margin: 0 0 10px;
} }
} }
@@ -631,10 +631,9 @@
.select-trigger { .select-trigger {
width: 100%; width: 100%;
padding: 10px 16px; padding: 9px 12px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 9999px; border-radius: 8px;
/* Rounded pill shape */
font-size: 14px; font-size: 14px;
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
@@ -643,7 +642,7 @@
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: border-color 0.15s ease, box-shadow 0.15s ease;
&:hover { &:hover {
border-color: var(--text-tertiary); border-color: var(--text-tertiary);
@@ -671,14 +670,12 @@
right: 0; right: 0;
background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary)); background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary));
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px; border-radius: 8px;
padding: 6px; padding: 6px;
box-shadow: var(--shadow-md); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
z-index: 20; z-index: 20;
max-height: 260px; max-height: 260px;
overflow-y: auto; overflow-y: auto;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
} }
.select-option { .select-option {
@@ -689,10 +686,10 @@
gap: 4px; gap: 4px;
padding: 10px 12px; padding: 10px 12px;
border: none; border: none;
border-radius: 10px; border-radius: 8px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: background 0.15s ease, color 0.15s ease;
color: var(--text-primary); color: var(--text-primary);
font-size: 14px; font-size: 14px;
@@ -740,9 +737,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 12px 16px; padding: 10px 12px;
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: 10px; border-radius: 8px;
font-size: 13px; font-size: 13px;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 12px; margin-bottom: 12px;
@@ -774,7 +771,7 @@
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
&:hover { &:hover {
background: var(--bg-hover); background: var(--bg-hover);
@@ -786,10 +783,6 @@
} }
} }
&:active {
transform: scale(0.98);
}
svg { svg {
color: var(--text-secondary); color: var(--text-secondary);
transition: color 0.2s; transition: color 0.2s;
@@ -797,7 +790,7 @@
} }
.export-action { .export-action {
padding: 20px 24px; padding: 16px 18px;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
} }
@@ -807,15 +800,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
padding: 14px 24px; padding: 12px 16px;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: background 0.15s ease;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: var(--primary-hover); background: var(--primary-hover);
src/pages/ContactsPage.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ interface ContactEnrichInfo {
const AVATAR_ENRICH_BATCH_SIZE = 80 const AVATAR_ENRICH_BATCH_SIZE = 80
const SEARCH_DEBOUNCE_MS = 120 const SEARCH_DEBOUNCE_MS = 120
const VIRTUAL_ROW_HEIGHT = 76 const VIRTUAL_ROW_HEIGHT = 64
const VIRTUAL_OVERSCAN = 10 const VIRTUAL_OVERSCAN = 10
const DEFAULT_CONTACTS_LOAD_TIMEOUT_MS = 10000 const DEFAULT_CONTACTS_LOAD_TIMEOUT_MS = 10000
const AVATAR_RECHECK_INTERVAL_MS = 24 * 60 * 60 * 1000 const AVATAR_RECHECK_INTERVAL_MS = 24 * 60 * 60 * 1000
src/pages/ExportPage.scss
+154 -182
View File
@@ -2,15 +2,14 @@
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
margin: -24px -24px 0; margin: -24px -24px 0;
padding: 18px 22px 12px; padding: 16px 18px 12px;
background: var(--bg-primary); background: var(--bg-primary);
/* Minimal background matching Footprint */ /* Minimal background matching Footprint */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 12px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
animation: exportPageEnter 0.34s ease-out;
.spin { .spin {
animation: exportSpin 1s linear infinite; animation: exportSpin 1s linear infinite;
@@ -22,7 +21,7 @@
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 55; z-index: 55;
animation: exportSectionReveal 0.34s ease both; animation: none;
} }
.export-top-bar { .export-top-bar {
@@ -38,8 +37,8 @@
justify-content: flex-start; justify-content: flex-start;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 8px; margin-bottom: 6px;
animation: exportSectionReveal 0.38s ease both; animation: none;
} }
.session-load-detail-entry { .session-load-detail-entry {
@@ -137,7 +136,7 @@
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: 0.2px; letter-spacing: 0;
} }
.section-info-tooltip { .section-info-tooltip {
@@ -209,10 +208,10 @@
width: min(820px, 100%); width: min(820px, 100%);
max-height: min(78vh, 860px); max-height: min(78vh, 860px);
overflow: hidden; overflow: hidden;
border-radius: 14px; border-radius: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: exportModalPopIn 0.24s cubic-bezier(0.2, 0.78, 0.26, 1) both; animation: exportModalPopIn 0.24s cubic-bezier(0.2, 0.78, 0.26, 1) both;
@@ -530,10 +529,10 @@
width: min(760px, 100%); width: min(760px, 100%);
max-height: min(82vh, 900px); max-height: min(82vh, 900px);
overflow: hidden; overflow: hidden;
border-radius: 16px; border-radius: 10px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: exportModalPopIn 0.24s cubic-bezier(0.2, 0.78, 0.26, 1) both; animation: exportModalPopIn 0.24s cubic-bezier(0.2, 0.78, 0.26, 1) both;
@@ -559,7 +558,7 @@
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -754,29 +753,28 @@
--top-inline-control-height: 34px; --top-inline-control-height: 34px;
flex: 0 1 980px; flex: 0 1 980px;
width: min(980px, 100%); width: min(980px, 100%);
background: background: var(--bg-secondary);
linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 75%, var(--bg-primary)) 0%, var(--card-bg) 100%);
border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
border-radius: 14px; border-radius: 8px;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08); box-shadow: none;
padding: 13px; padding: 10px;
display: grid; display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr) auto; grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr) auto;
gap: 10px; gap: 10px;
align-items: stretch; align-items: stretch;
animation: exportSectionReveal 0.4s ease both; animation: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; transition: border-color 0.15s ease, background 0.15s ease;
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1); box-shadow: none;
} }
.control-label { .control-label {
font-size: 11px; font-size: 11px;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 600; font-weight: 600;
letter-spacing: 0.2px; letter-spacing: 0;
width: 78px; width: 78px;
flex: 0 0 78px; flex: 0 0 78px;
line-height: 1.2; line-height: 1.2;
@@ -879,7 +877,7 @@
.more-export-settings-btn { .more-export-settings-btn {
min-height: var(--top-inline-control-height); min-height: var(--top-inline-control-height);
border-radius: 10px; border-radius: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
@@ -889,13 +887,12 @@
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, transform 0.12s ease; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
&:hover { &:hover {
border-color: var(--primary); border-color: var(--primary);
color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 6%, var(--bg-secondary)); background: color-mix(in srgb, var(--primary) 6%, var(--bg-secondary));
transform: translateY(-1px);
} }
} }
@@ -934,8 +931,8 @@
max-width: calc(100vw - 40px); max-width: calc(100vw - 40px);
background: var(--bg-secondary-solid, #ffffff); background: var(--bg-secondary-solid, #ffffff);
border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
border-radius: 14px; border-radius: 8px;
box-shadow: 0 22px 38px rgba(15, 23, 42, 0.2); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
padding: 6px; padding: 6px;
z-index: 3000; z-index: 3000;
max-height: 260px; max-height: 260px;
@@ -1070,14 +1067,13 @@
.task-center-card { .task-center-card {
min-width: 92px; min-width: 92px;
min-height: 42px; min-height: 38px;
margin-left: auto; margin-left: auto;
border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
border-radius: 14px; border-radius: 8px;
background: background: var(--bg-secondary);
linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 80%, var(--bg-primary)) 0%, var(--card-bg) 100%);
color: var(--text-primary); color: var(--text-primary);
padding: 10px 12px; padding: 8px 11px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -1087,15 +1083,14 @@
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
transition: border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease, background 0.14s ease; transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
animation: exportSectionReveal 0.46s ease both; animation: none;
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 48%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 48%, var(--border-color));
color: var(--primary); color: var(--primary);
transform: translateY(-2px);
background: color-mix(in srgb, var(--primary) 7%, var(--card-bg)); background: color-mix(in srgb, var(--primary) 7%, var(--card-bg));
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12); box-shadow: none;
} }
&.has-alert { &.has-alert {
@@ -1120,10 +1115,10 @@
width: min(720px, 100%); width: min(720px, 100%);
max-height: min(80vh, 860px); max-height: min(80vh, 860px);
overflow: hidden; overflow: hidden;
border-radius: 14px; border-radius: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: exportModalPopIn 0.24s cubic-bezier(0.2, 0.78, 0.26, 1) both; animation: exportModalPopIn 0.24s cubic-bezier(0.2, 0.78, 0.26, 1) both;
@@ -1180,35 +1175,32 @@
justify-content: center; justify-content: center;
padding: 0 5px; padding: 0 5px;
line-height: 1; line-height: 1;
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.16); box-shadow: none;
animation: exportTaskBadgePulse 1.2s ease-in-out infinite; animation: none;
} }
.content-card-grid { .content-card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
gap: 10px; gap: 8px;
flex-shrink: 0; flex-shrink: 0;
animation: exportSectionReveal 0.52s ease both; animation: none;
} }
.content-card { .content-card {
border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
border-radius: 13px; border-radius: 8px;
background: background: var(--bg-secondary);
linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 82%, var(--bg-primary)) 0%, var(--card-bg) 100%); box-shadow: none;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06); padding: 10px;
padding: 11px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease; transition: border-color 0.15s ease, background 0.15s ease;
animation: exportCardReveal 0.42s ease both; animation: none;
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color));
box-shadow: 0 16px 24px rgba(15, 23, 42, 0.11);
transform: translateY(-2px);
background: color-mix(in srgb, var(--primary) 4%, var(--card-bg)); background: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
} }
@@ -1263,8 +1255,8 @@
.card-export-btn { .card-export-btn {
margin-top: auto; margin-top: auto;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 9px; border-radius: 8px;
padding: 8px 10px; padding: 7px 10px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
@@ -1281,8 +1273,7 @@
&.primary:hover { &.primary:hover {
background: var(--primary-hover); background: var(--primary-hover);
transform: translateY(-1px); box-shadow: none;
box-shadow: 0 8px 14px color-mix(in srgb, var(--primary) 24%, transparent);
} }
&.secondary { &.secondary {
@@ -1295,7 +1286,6 @@
border-color: color-mix(in srgb, var(--primary) 28%, transparent); border-color: color-mix(in srgb, var(--primary) 28%, transparent);
color: var(--text-primary); color: var(--text-primary);
background: color-mix(in srgb, var(--bg-primary) 94%, var(--primary) 6%); background: color-mix(in srgb, var(--bg-primary) 94%, var(--primary) 6%);
transform: translateY(-1px);
} }
&:disabled { &:disabled {
@@ -1372,10 +1362,10 @@
.task-center-modal { .task-center-modal {
width: min(980px, calc(100vw - 40px)); width: min(980px, calc(100vw - 40px));
max-height: calc(100vh - 72px); max-height: calc(100vh - 72px);
border-radius: 14px; border-radius: 10px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-secondary-solid, #ffffff); background: var(--bg-secondary-solid, #ffffff);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@@ -1677,16 +1667,15 @@
flex-direction: column; flex-direction: column;
overflow: visible; overflow: visible;
border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
border-radius: 14px; border-radius: 8px;
background: background: var(--bg-secondary);
linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 72%, var(--bg-primary)) 0%, color-mix(in srgb, var(--card-bg) 90%, var(--bg-primary)) 100%); box-shadow: none;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07); animation: none;
animation: exportSectionReveal 0.58s ease both; transition: border-color 0.15s ease, background 0.15s ease;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 20%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 20%, var(--border-color));
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09); box-shadow: none;
} }
} }
@@ -1696,24 +1685,24 @@
gap: 6px; gap: 6px;
margin: 8px 12px 0; margin: 8px 12px 0;
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: 8px;
background: rgba(var(--primary-rgb), 0.1); background: rgba(var(--primary-rgb), 0.1);
border: 1px solid rgba(var(--primary-rgb), 0.2); border: 1px solid rgba(var(--primary-rgb), 0.2);
color: var(--primary); color: var(--primary);
font-size: 12px; font-size: 12px;
width: fit-content; width: fit-content;
animation: exportSectionReveal 0.35s ease both; animation: none;
} }
.table-toolbar { .table-toolbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
padding: 12px 14px; padding: 10px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 88%, var(--card-bg)) 0%, color-mix(in srgb, var(--bg-primary) 92%, var(--bg-secondary)) 100%); background: var(--bg-secondary);
transition: border-color 0.16s ease, background 0.16s ease; transition: border-color 0.16s ease, background 0.16s ease;
} }
@@ -1751,7 +1740,7 @@
color: var(--text-secondary); color: var(--text-secondary);
min-height: 32px; min-height: 32px;
padding: 7px 12px; padding: 7px 12px;
border-radius: 999px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
@@ -1759,7 +1748,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
.tab-btn-content { .tab-btn-content {
display: inline-flex; display: inline-flex;
@@ -1791,7 +1780,7 @@
&.active { &.active {
color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent); background: color-mix(in srgb, var(--primary) 12%, transparent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); box-shadow: none;
.tab-btn-content span:last-child { .tab-btn-content span:last-child {
background: color-mix(in srgb, var(--primary) 16%, transparent); background: color-mix(in srgb, var(--primary) 16%, transparent);
@@ -1822,11 +1811,10 @@
.secondary-btn { .secondary-btn {
min-height: 34px; min-height: 34px;
border-radius: 10px; border-radius: 8px;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, transform 0.14s ease; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
&:hover:not(:disabled) { &:hover:not(:disabled) {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color));
color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary)); background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
@@ -1842,14 +1830,14 @@
border-radius: 10px; border-radius: 10px;
border: none; border: none;
background: color-mix(in srgb, var(--text-tertiary) 4%, transparent); background: color-mix(in srgb, var(--text-tertiary) 4%, transparent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) inset; box-shadow: none;
flex: 1; flex: 1;
min-width: 180px; min-width: 180px;
max-width: 320px; max-width: 320px;
transition: all 0.2s ease; transition: background 0.15s ease, box-shadow 0.15s ease;
&:focus-within { &:focus-within {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent), 0 1px 3px rgba(0, 0, 0, 0.02) inset; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
background: color-mix(in srgb, var(--text-tertiary) 6%, transparent); background: color-mix(in srgb, var(--text-tertiary) 6%, transparent);
} }
@@ -1874,7 +1862,7 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 999px; border-radius: 999px;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
color: var(--primary); color: var(--primary);
@@ -1909,31 +1897,31 @@
.table-wrap { .table-wrap {
--contacts-native-scrollbar-compensation: 18px; --contacts-native-scrollbar-compensation: 18px;
--contacts-row-height: 76px; --contacts-row-height: 64px;
--contacts-default-visible-rows: 8; --contacts-default-visible-rows: 9;
--contacts-default-list-height: calc(var(--contacts-row-height) * var(--contacts-default-visible-rows)); --contacts-default-list-height: calc(var(--contacts-row-height) * var(--contacts-default-visible-rows));
--contacts-select-col-width: 34px; --contacts-select-col-width: 30px;
--contacts-avatar-col-width: 44px; --contacts-avatar-col-width: 38px;
--contacts-inline-padding: 12px; --contacts-inline-padding: 10px;
--contacts-column-gap: 10px; --contacts-column-gap: 8px;
--contacts-name-text-width: 9.5em; --contacts-name-text-width: 9.5em;
--contacts-main-col-width: calc(var(--contacts-avatar-col-width) + var(--contacts-column-gap) + var(--contacts-name-text-width)); --contacts-main-col-width: calc(var(--contacts-avatar-col-width) + var(--contacts-column-gap) + var(--contacts-name-text-width));
--contacts-left-sticky-width: calc(var(--contacts-select-col-width) + var(--contacts-main-col-width) + var(--contacts-column-gap)); --contacts-left-sticky-width: calc(var(--contacts-select-col-width) + var(--contacts-main-col-width) + var(--contacts-column-gap));
--contacts-message-col-width: 104px; --contacts-message-col-width: 94px;
--contacts-media-col-width: 66px; --contacts-media-col-width: 58px;
--contacts-action-col-width: 140px; --contacts-action-col-width: 126px;
--contacts-actions-sticky-width: 180px; --contacts-actions-sticky-width: 160px;
--contacts-table-min-width: 1240px; --contacts-table-min-width: 1120px;
overflow: hidden; overflow: hidden;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
min-height: 320px; min-height: 320px;
height: auto; height: auto;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-secondary); background: var(--bg-secondary);
transition: all 0.2s ease; transition: background 0.15s ease;
&:hover { &:hover {
background: color-mix(in srgb, var(--text-tertiary) 2%, var(--bg-secondary)); background: color-mix(in srgb, var(--text-tertiary) 2%, var(--bg-secondary));
@@ -2012,7 +2000,7 @@
.issue-card { .issue-card {
border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color)); border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color));
background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--bg-secondary)); background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--bg-secondary));
border-radius: 12px; border-radius: 8px;
padding: 14px; padding: 14px;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -2068,12 +2056,11 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
color: var(--text-primary); color: var(--text-primary);
background: color-mix(in srgb, var(--text-tertiary) 16%, transparent); background: color-mix(in srgb, var(--text-tertiary) 16%, transparent);
transform: translateY(-1px);
} }
&.primary { &.primary {
@@ -2104,7 +2091,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--contacts-column-gap); gap: var(--contacts-column-gap);
padding: 10px var(--contacts-inline-padding) 8px; padding: 8px var(--contacts-inline-padding) 6px;
min-width: max(100%, var(--contacts-table-min-width)); min-width: max(100%, var(--contacts-table-min-width));
border-bottom: 1px solid color-mix(in srgb, var(--text-tertiary) 6%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text-tertiary) 6%, transparent);
background: var(--contacts-header-bg); background: var(--contacts-header-bg);
@@ -2113,7 +2100,6 @@
font-weight: 600; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.01em;
flex-shrink: 0; flex-shrink: 0;
backdrop-filter: blur(10px);
&.is-draggable { &.is-draggable {
cursor: grab; cursor: grab;
@@ -2273,12 +2259,11 @@
padding: 6px 10px; padding: 6px 10px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: var(--text-primary); color: var(--text-primary);
background: color-mix(in srgb, var(--text-tertiary) 16%, transparent); background: color-mix(in srgb, var(--text-tertiary) 16%, transparent);
transform: translateY(-1px);
} }
&:disabled { &:disabled {
@@ -2301,13 +2286,12 @@
gap: 6px; gap: 6px;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.2s ease; transition: background 0.15s ease;
box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 20%, transparent); box-shadow: none;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 85%, #fff); background: color-mix(in srgb, var(--primary) 85%, #fff);
transform: translateY(-1px); box-shadow: none;
box-shadow: 0 8px 14px color-mix(in srgb, var(--primary) 30%, transparent);
} }
.selection-export-count { .selection-export-count {
@@ -2382,19 +2366,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--contacts-column-gap); gap: var(--contacts-column-gap);
padding: 12px var(--contacts-inline-padding); padding: 8px var(--contacts-inline-padding);
min-width: max(100%, var(--contacts-table-min-width)); min-width: max(100%, var(--contacts-table-min-width));
height: 72px; height: 60px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 8px;
transition: all 0.2s ease; transition: background 0.15s ease;
cursor: default; cursor: default;
background: var(--contacts-row-bg); background: var(--contacts-row-bg);
box-shadow: none; box-shadow: none;
&:hover { &:hover {
background: color-mix(in srgb, var(--text-tertiary) 6%, transparent); background: color-mix(in srgb, var(--text-tertiary) 6%, transparent);
transform: translateX(2px);
} }
} }
@@ -2421,10 +2404,10 @@
} }
.contact-avatar { .contact-avatar {
width: 44px; width: var(--contacts-avatar-col-width);
height: 44px; height: var(--contacts-avatar-col-width);
border-radius: 10px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -2438,8 +2421,8 @@
} }
span { span {
color: #fff; color: var(--text-secondary);
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
} }
@@ -2740,7 +2723,7 @@
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -2752,7 +2735,7 @@
} }
span { span {
color: #fff; color: var(--text-secondary);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
@@ -2811,12 +2794,11 @@
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
color: var(--text-primary); color: var(--text-primary);
background: color-mix(in srgb, var(--text-tertiary) 14%, transparent); background: color-mix(in srgb, var(--text-tertiary) 14%, transparent);
transform: translateY(-1px);
} }
&.active { &.active {
@@ -2923,7 +2905,7 @@
height: 100%; height: 100%;
max-height: calc(100vh - 24px); max-height: calc(100vh - 24px);
border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
border-radius: 20px; border-radius: 10px;
background: var(--bg-primary); background: var(--bg-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -2949,8 +2931,8 @@
.detail-header-avatar { .detail-header-avatar {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 10px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -3248,13 +3230,12 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, transform 0.14s ease; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
&:hover:not(:disabled) { &:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color));
color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 9%, var(--bg-secondary)); background: color-mix(in srgb, var(--primary) 9%, var(--bg-secondary));
transform: translateY(-1px);
} }
&:focus-visible { &:focus-visible {
@@ -3321,10 +3302,10 @@
.export-session-sns-dialog { .export-session-sns-dialog {
width: min(760px, 100%); width: min(760px, 100%);
max-height: min(86vh, 860px); max-height: min(86vh, 860px);
border-radius: 20px; border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--text-tertiary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text-tertiary) 8%, transparent);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@@ -3349,8 +3330,8 @@
.sns-dialog-avatar { .sns-dialog-avatar {
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 10px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover)); background: var(--bg-tertiary);
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@@ -3739,7 +3720,7 @@
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(15, 18, 28, 0.48); background: rgba(15, 18, 28, 0.48);
backdrop-filter: blur(7px); backdrop-filter: blur(2px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -3752,9 +3733,9 @@
max-height: calc(100vh - 40px); max-height: calc(100vh - 40px);
background: var(--card-bg); background: var(--card-bg);
border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
border-radius: 16px; border-radius: 10px;
box-shadow: 0 26px 52px rgba(0, 0, 0, 0.3); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
padding: 16px 16px 14px; padding: 14px 14px 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@@ -3789,9 +3770,9 @@
h3 { h3 {
margin: 0; margin: 0;
color: var(--text-primary); color: var(--text-primary);
font-size: 22px; font-size: 20px;
line-height: 1.2; line-height: 1.2;
letter-spacing: 0.2px; letter-spacing: 0;
} }
} }
@@ -3811,7 +3792,7 @@
.close-icon-btn { .close-icon-btn {
border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
background: color-mix(in srgb, var(--bg-secondary) 86%, var(--bg-primary)); background: color-mix(in srgb, var(--bg-secondary) 86%, var(--bg-primary));
border-radius: 10px; border-radius: 8px;
width: 34px; width: 34px;
height: 34px; height: 34px;
display: flex; display: flex;
@@ -3819,20 +3800,19 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: var(--text-secondary);
transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, background 0.16s ease; transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 7%, var(--bg-primary)); background: color-mix(in srgb, var(--primary) 7%, var(--bg-primary));
transform: translateY(-1px);
} }
} }
.dialog-section { .dialog-section {
border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
border-radius: 12px; border-radius: 8px;
padding: 13px 14px; padding: 12px;
background: color-mix(in srgb, var(--bg-secondary) 78%, var(--bg-primary)); background: color-mix(in srgb, var(--bg-secondary) 78%, var(--bg-primary));
h4 { h4 {
@@ -3840,7 +3820,7 @@
font-size: 15px; font-size: 15px;
color: var(--text-primary); color: var(--text-primary);
font-weight: 700; font-weight: 700;
letter-spacing: 0.2px; letter-spacing: 0;
line-height: 1.3; line-height: 1.3;
} }
} }
@@ -3924,7 +3904,7 @@
border-radius: 10px; border-radius: 10px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: background 0.15s ease, color 0.15s ease;
color: var(--text-primary); color: var(--text-primary);
font-size: 14px; font-size: 14px;
@@ -4007,8 +3987,8 @@
width: 100%; width: 100%;
min-height: 0; min-height: 0;
border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
border-radius: 11px; border-radius: 8px;
padding: 10px 11px; padding: 9px 10px;
text-align: left; text-align: left;
background: color-mix(in srgb, var(--bg-primary) 70%, var(--bg-secondary)); background: color-mix(in srgb, var(--bg-primary) 70%, var(--bg-secondary));
cursor: pointer; cursor: pointer;
@@ -4016,7 +3996,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; transition: border-color 0.15s ease, background 0.15s ease;
.format-label { .format-label {
font-size: 14px; font-size: 14px;
@@ -4034,7 +4014,6 @@
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color));
transform: translateY(-1px);
} }
&.active { &.active {
@@ -4102,20 +4081,19 @@
.media-option-card { .media-option-card {
position: relative; position: relative;
border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
border-radius: 12px; border-radius: 8px;
background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-secondary)); background: color-mix(in srgb, var(--bg-primary) 76%, var(--bg-secondary));
min-height: 74px; min-height: 68px;
padding: 10px 11px; padding: 9px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 9px; gap: 9px;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 46%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 46%, var(--border-color));
transform: translateY(-1px);
} }
&:has(.media-option-input:focus-visible) { &:has(.media-option-input:focus-visible) {
@@ -4126,7 +4104,7 @@
&.active { &.active {
border-color: color-mix(in srgb, var(--primary) 76%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 76%, var(--border-color));
background: color-mix(in srgb, var(--primary) 12%, var(--bg-secondary)); background: color-mix(in srgb, var(--primary) 12%, var(--bg-secondary));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent);
} }
} }
@@ -4147,7 +4125,7 @@
.media-option-icon { .media-option-icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 9px; border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-secondary)); background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-secondary));
color: var(--text-secondary); color: var(--text-secondary);
@@ -4428,7 +4406,7 @@
font: inherit; font: inherit;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; transition: border-color 0.15s ease, background 0.15s ease;
&:focus-visible { &:focus-visible {
outline: 2px solid rgba(var(--primary-rgb), 0.35); outline: 2px solid rgba(var(--primary-rgb), 0.35);
@@ -4437,7 +4415,6 @@
&:hover { &:hover {
border-color: color-mix(in srgb, var(--primary) 44%, var(--border-color)); border-color: color-mix(in srgb, var(--primary) 44%, var(--border-color));
transform: translateY(-1px);
} }
span { span {
@@ -4467,14 +4444,12 @@
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 10px;
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient(180deg, background: var(--card-bg);
transparent,
var(--card-bg) 38%);
} }
.primary-btn, .primary-btn,
.secondary-btn { .secondary-btn {
border-radius: 10px; border-radius: 8px;
min-height: 38px; min-height: 38px;
padding: 8px 14px; padding: 8px 14px;
font-size: 13px; font-size: 13px;
@@ -4484,7 +4459,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
} }
.primary-btn { .primary-btn {
@@ -4495,7 +4470,6 @@
&:hover { &:hover {
background: var(--primary-hover); background: var(--primary-hover);
transform: translateY(-1px);
} }
&:disabled { &:disabled {
@@ -4513,7 +4487,6 @@
border-color: var(--primary); border-color: var(--primary);
color: var(--primary); color: var(--primary);
background: color-mix(in srgb, var(--primary) 7%, var(--bg-secondary)); background: color-mix(in srgb, var(--primary) 7%, var(--bg-secondary));
transform: translateY(-1px);
} }
} }
@@ -5028,10 +5001,10 @@
.table-wrap { .table-wrap {
--contacts-inline-padding: 10px; --contacts-inline-padding: 10px;
--contacts-name-text-width: 10em; --contacts-name-text-width: 10em;
--contacts-main-col-width: calc(44px + 10px + var(--contacts-name-text-width)); --contacts-main-col-width: calc(var(--contacts-avatar-col-width) + var(--contacts-column-gap) + var(--contacts-name-text-width));
--contacts-message-col-width: 104px; --contacts-message-col-width: 94px;
--contacts-media-col-width: 62px; --contacts-media-col-width: 56px;
--contacts-action-col-width: 140px; --contacts-action-col-width: 126px;
} }
.table-wrap .contacts-list-header { .table-wrap .contacts-list-header {
@@ -5094,7 +5067,7 @@
width: calc(100vw - 20px); width: calc(100vw - 20px);
max-height: calc(100vh - 20px); max-height: calc(100vh - 20px);
padding: 12px 10px 10px; padding: 12px 10px 10px;
border-radius: 14px; border-radius: 8px;
} }
.dialog-header { .dialog-header {
@@ -5266,10 +5239,10 @@
.automation-modal { .automation-modal {
width: min(680px, 100%); width: min(680px, 100%);
max-height: min(80vh, 820px); max-height: min(80vh, 820px);
border-radius: 20px; border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--text-tertiary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text-tertiary) 8%, transparent);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@@ -5320,9 +5293,9 @@
} }
.automation-task-card { .automation-task-card {
border-radius: 14px; border-radius: 8px;
background: color-mix(in srgb, var(--text-tertiary) 5%, transparent); background: color-mix(in srgb, var(--text-tertiary) 5%, transparent);
padding: 14px 16px; padding: 12px 14px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
@@ -5411,10 +5384,10 @@
.automation-editor-modal { .automation-editor-modal {
width: min(560px, 100%); width: min(560px, 100%);
max-height: min(88vh, 900px); max-height: min(88vh, 900px);
border-radius: 20px; border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--text-tertiary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text-tertiary) 8%, transparent);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@@ -5683,7 +5656,7 @@
border-radius: 4px; border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--text-tertiary) 30%, transparent); border: 1px solid color-mix(in srgb, var(--text-tertiary) 30%, transparent);
background: transparent; background: transparent;
transition: all 0.2s ease; transition: background 0.15s ease, border-color 0.15s ease;
position: relative; position: relative;
&:hover { &:hover {
@@ -5724,7 +5697,7 @@
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.18s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
background: color-mix(in srgb, var(--text-tertiary) 14%, transparent); background: color-mix(in srgb, var(--text-tertiary) 14%, transparent);
@@ -5749,7 +5722,7 @@
.automation-draft-summary { .automation-draft-summary {
padding: 10px 12px; padding: 10px 12px;
border-radius: 10px; border-radius: 8px;
background: color-mix(in srgb, var(--text-tertiary) 5%, transparent); background: color-mix(in srgb, var(--text-tertiary) 5%, transparent);
font-size: 12px; font-size: 12px;
color: var(--text-secondary); color: var(--text-secondary);
@@ -5768,7 +5741,7 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.18s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
background: color-mix(in srgb, var(--text-tertiary) 16%, transparent); background: color-mix(in srgb, var(--text-tertiary) 16%, transparent);
@@ -5778,20 +5751,19 @@
.primary-btn { .primary-btn {
border: none; border: none;
border-radius: 9px; border-radius: 8px;
padding: 8px 18px; padding: 8px 18px;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease;
box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 20%, transparent); box-shadow: none;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 85%, #fff); background: color-mix(in srgb, var(--primary) 85%, #fff);
transform: translateY(-1px); box-shadow: none;
box-shadow: 0 8px 14px color-mix(in srgb, var(--primary) 30%, transparent);
} }
&:disabled { &:disabled {
@@ -5819,7 +5791,7 @@
padding: 0 10px; padding: 0 10px;
font-size: 13px; font-size: 13px;
outline: none; outline: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: background 0.15s ease, box-shadow 0.15s ease;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
&:hover { &:hover {
src/pages/ExportPage.tsx
+1 -1
View File
@@ -9552,7 +9552,7 @@ function ExportPage() {
customScrollParent={contactsListScrollParent ?? undefined} customScrollParent={contactsListScrollParent ?? undefined}
data={filteredContacts} data={filteredContacts}
computeItemKey={(_, contact) => contact.username} computeItemKey={(_, contact) => contact.username}
fixedItemHeight={76} fixedItemHeight={64}
itemContent={renderContactRow} itemContent={renderContactRow}
rangeChanged={handleContactsRangeChanged} rangeChanged={handleContactsRangeChanged}
atTopStateChange={setIsContactsListAtTop} atTopStateChange={setIsContactsListAtTop}
src/pages/InsightInboxPage.scss
+48 -50
View File
@@ -1,5 +1,5 @@
.insight-inbox-page { .insight-inbox-page {
--insight-panel-width: 360px; --insight-panel-width: 328px;
--insight-card-bg: var(--bg-secondary); --insight-card-bg: var(--bg-secondary);
display: flex; display: flex;
height: calc(100% + 48px); height: calc(100% + 48px);
@@ -14,15 +14,15 @@
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 18px 24px 14px; padding: 16px 20px 12px;
} }
.insight-inbox-header { .insight-inbox-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 14px;
padding: 0 4px 12px; padding: 0 2px 10px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@@ -30,7 +30,7 @@
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 7px; gap: 6px;
} }
.insight-inbox-title-line { .insight-inbox-title-line {
@@ -40,7 +40,7 @@
h2 { h2 {
margin: 0; margin: 0;
font-size: 22px; font-size: 21px;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -82,7 +82,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
&:hover { &:hover {
color: var(--text-primary); color: var(--text-primary);
@@ -92,15 +92,15 @@
} }
.insight-icon-btn { .insight-icon-btn {
width: 40px; width: 34px;
height: 40px; height: 34px;
border-radius: 10px; border-radius: 8px;
} }
.insight-action-btn { .insight-action-btn {
width: 30px; width: 28px;
height: 30px; height: 28px;
border-radius: 8px; border-radius: 6px;
&.code { &.code {
color: var(--primary); color: var(--primary);
@@ -118,10 +118,10 @@
} }
.insight-focus-bar { .insight-focus-bar {
margin: 12px 4px 0; margin: 10px 2px 0;
padding: 9px 12px; padding: 8px 10px;
border: 1px solid rgba(91, 147, 144, 0.22); border: 1px solid rgba(91, 147, 144, 0.22);
border-radius: 10px; border-radius: 8px;
background: rgba(91, 147, 144, 0.08); background: rgba(91, 147, 144, 0.08);
color: var(--text-secondary); color: var(--text-secondary);
display: flex; display: flex;
@@ -143,14 +143,14 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: 16px 4px 22px; padding: 12px 2px 18px;
} }
.insight-date-group { .insight-date-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
margin-bottom: 18px; margin-bottom: 16px;
} }
.insight-date-label { .insight-date-label {
@@ -158,27 +158,26 @@
top: 0; top: 0;
z-index: 1; z-index: 1;
width: fit-content; width: fit-content;
padding: 5px 10px; padding: 4px 8px;
border-radius: 999px; border-radius: 6px;
background: color-mix(in srgb, var(--bg-primary) 86%, transparent); background: var(--bg-primary);
color: var(--text-tertiary); color: var(--text-tertiary);
font-size: 12px; font-size: 12px;
backdrop-filter: blur(10px);
} }
.insight-card { .insight-card {
display: flex; display: flex;
gap: 14px; gap: 12px;
padding: 18px; padding: 14px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 14px; border-radius: 8px;
background: var(--insight-card-bg); background: var(--insight-card-bg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); box-shadow: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; transition: border-color 0.15s ease, background 0.15s ease;
&:hover { &:hover {
border-color: rgba(91, 147, 144, 0.28); border-color: rgba(91, 147, 144, 0.28);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07); background: color-mix(in srgb, var(--bg-secondary) 86%, var(--bg-primary));
} }
&.unread { &.unread {
@@ -187,7 +186,7 @@
&.focused { &.focused {
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(91, 147, 144, 0.14), 0 12px 32px rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(91, 147, 144, 0.28);
} }
} }
@@ -200,7 +199,7 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
} }
.insight-card-header { .insight-card-header {
@@ -277,8 +276,8 @@
.insight-body { .insight-body {
margin: 0; margin: 0;
color: var(--text-primary); color: var(--text-primary);
font-size: 15px; font-size: 14px;
line-height: 1.72; line-height: 1.66;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
} }
@@ -286,14 +285,14 @@
.insight-filter-panel { .insight-filter-panel {
width: var(--insight-panel-width); width: var(--insight-panel-width);
flex-shrink: 0; flex-shrink: 0;
padding: 24px 24px 18px; padding: 18px 18px 14px;
border-left: 1px solid var(--border-color); border-left: 1px solid var(--border-color);
background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary)); background: var(--bg-secondary);
overflow-y: auto; overflow-y: auto;
} }
.insight-filter-header { .insight-filter-header {
margin-bottom: 18px; margin-bottom: 14px;
h3 { h3 {
margin: 0; margin: 0;
@@ -304,10 +303,10 @@
.insight-filter-widget { .insight-filter-widget {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px; border-radius: 8px;
background: var(--bg-secondary); background: var(--bg-primary);
padding: 14px; padding: 12px;
margin-bottom: 14px; margin-bottom: 12px;
} }
.insight-widget-title { .insight-widget-title {
@@ -330,14 +329,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
border-radius: 9px; border-radius: 8px;
background: var(--bg-tertiary); background: var(--bg-tertiary);
padding: 0 9px; padding: 0 9px;
input { input {
min-width: 0; min-width: 0;
flex: 1; flex: 1;
height: 38px; height: 34px;
border: none; border: none;
outline: none; outline: none;
background: transparent; background: transparent;
@@ -410,12 +409,12 @@
.insight-contact-row { .insight-contact-row {
width: 100%; width: 100%;
min-height: 42px; min-height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
border: none; border: none;
border-radius: 9px; border-radius: 8px;
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-secondary);
padding: 7px 8px; padding: 7px 8px;
@@ -478,7 +477,6 @@
inset: 0; inset: 0;
z-index: 1000; z-index: 1000;
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -490,9 +488,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 14px; border-radius: 10px;
background: var(--bg-secondary); background: var(--bg-secondary);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
overflow: hidden; overflow: hidden;
} }
@@ -501,7 +499,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 16px 18px; padding: 14px 16px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
background: var(--bg-tertiary); background: var(--bg-tertiary);
@@ -549,7 +547,7 @@
.insight-log-body { .insight-log-body {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 18px; padding: 16px;
background: var(--bg-primary); background: var(--bg-primary);
section { section {
@@ -567,7 +565,7 @@
margin: 0; margin: 0;
padding: 12px; padding: 12px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 10px; border-radius: 8px;
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
font-family: Consolas, Monaco, 'Courier New', monospace; font-family: Consolas, Monaco, 'Courier New', monospace;
src/pages/MyFootprintPage.scss
+23 -24
View File
@@ -11,7 +11,6 @@
gap: 24px; gap: 24px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
animation: footprintPageEnter 0.4s ease-out;
.card-surface { .card-surface {
/* Removing border and strong shadows, just subtle background if any */ /* Removing border and strong shadows, just subtle background if any */
@@ -31,7 +30,7 @@
gap: 20px; gap: 20px;
padding: 10px 0 20px 0; padding: 10px 0 20px 0;
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
animation: footprintFadeSlideUp 0.3s ease both; animation: footprintFadeSlideUp 0.22s ease both;
} }
.footprint-title-wrap { .footprint-title-wrap {
@@ -41,10 +40,10 @@
h1 { h1 {
margin: 0; margin: 0;
font-size: 26px; font-size: 24px;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
letter-spacing: -0.3px; letter-spacing: 0;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -84,7 +83,7 @@
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
color: var(--text-primary); color: var(--text-primary);
@@ -93,7 +92,7 @@
&.active { &.active {
color: var(--text-primary); color: var(--text-primary);
background: var(--bg-primary); background: var(--bg-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow: none;
} }
} }
@@ -117,9 +116,9 @@
padding: 6px 10px; padding: 6px 10px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
transition: all 0.2s ease; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
cursor: pointer; cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset; box-shadow: none;
&:hover { &:hover {
background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); background: color-mix(in srgb, var(--text-tertiary) 12%, transparent);
@@ -135,7 +134,7 @@
&::-webkit-calendar-picker-indicator { &::-webkit-calendar-picker-indicator {
cursor: pointer; cursor: pointer;
opacity: 0.5; opacity: 0.5;
transition: all 0.2s ease; transition: opacity 0.15s ease, background 0.15s ease;
padding: 4px; padding: 4px;
margin-left: 4px; margin-left: 4px;
margin-right: -4px; margin-right: -4px;
@@ -165,7 +164,7 @@
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 8px 12px;
color: var(--text-tertiary); color: var(--text-tertiary);
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:focus-within { &:focus-within {
background: color-mix(in srgb, var(--primary) 8%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent);
@@ -201,7 +200,7 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
background: color-mix(in srgb, var(--text-tertiary) 15%, transparent); background: color-mix(in srgb, var(--text-tertiary) 15%, transparent);
@@ -217,8 +216,8 @@
.kpi-grid { .kpi-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px; gap: 16px;
padding: 20px 0; padding: 18px 0;
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
} }
@@ -241,11 +240,11 @@
} }
strong { strong {
font-size: 32px; font-size: 30px;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.5px; letter-spacing: 0;
} }
small { small {
@@ -259,7 +258,7 @@
} }
.footprint-ai-result { .footprint-ai-result {
border-radius: 10px; border-radius: 8px;
padding: 14px 16px; padding: 14px 16px;
background: color-mix(in srgb, var(--text-tertiary) 8%, transparent); background: color-mix(in srgb, var(--text-tertiary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
@@ -360,7 +359,7 @@
padding: 6px 12px; padding: 6px 12px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&:hover { &:hover {
color: var(--text-primary); color: var(--text-primary);
@@ -688,11 +687,11 @@
.footprint-export-modal { .footprint-export-modal {
width: min(520px, 100%); width: min(520px, 100%);
border-radius: 16px; border-radius: 10px;
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.2); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
padding: 22px 22px 18px; padding: 18px 18px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@@ -700,7 +699,7 @@
h3 { h3 {
margin: 0; margin: 0;
font-size: 18px; font-size: 17px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -716,7 +715,7 @@
.export-modal-icon { .export-modal-icon {
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 10px; border-radius: 8px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -740,8 +739,8 @@
.export-modal-path { .export-modal-path {
display: block; display: block;
margin-top: 2px; margin-top: 2px;
padding: 10px 12px; padding: 9px 11px;
border-radius: 10px; border-radius: 8px;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
src/pages/ResourcesPage.scss
+42 -44
View File
@@ -1,37 +1,37 @@
.resources-page.stream-rebuild { .resources-page.stream-rebuild {
--stream-columns: 4; --stream-columns: 4;
--stream-grid-gap: 12px; --stream-grid-gap: 10px;
--stream-card-width: 272px; --stream-card-width: 248px;
--stream-card-height: 356px; --stream-card-height: 318px;
--stream-visual-height: 236px; --stream-visual-height: 210px;
--stream-slot-width: calc(var(--stream-card-width) + var(--stream-grid-gap)); --stream-slot-width: calc(var(--stream-card-width) + var(--stream-grid-gap));
--stream-slot-height: calc(var(--stream-card-height) + var(--stream-grid-gap)); --stream-slot-height: calc(var(--stream-card-height) + var(--stream-grid-gap));
--stream-grid-width: calc(var(--stream-slot-width) * var(--stream-columns)); --stream-grid-width: calc(var(--stream-slot-width) * var(--stream-columns));
height: calc(100% + 48px); height: calc(100% + 48px);
margin: -24px; margin: -24px;
padding: 16px 18px; padding: 14px 16px;
position: relative; position: relative;
background: var(--bg-primary); background: var(--bg-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
overflow: hidden; overflow: hidden;
.stream-toolbar { .stream-toolbar {
border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
background: var(--card-bg, #f8f9fb); background: var(--card-bg, #f8f9fb);
border-radius: 16px; border-radius: 8px;
padding: 12px; padding: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 10px;
align-items: flex-start; align-items: flex-start;
} }
.toolbar-left { .toolbar-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 8px;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
} }
@@ -41,7 +41,7 @@
align-items: center; align-items: center;
width: fit-content; width: fit-content;
padding: 4px; padding: 4px;
border-radius: 12px; border-radius: 8px;
background: color-mix(in srgb, var(--bg-secondary) 85%, transparent); background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@@ -49,16 +49,16 @@
border: none; border: none;
background: transparent; background: transparent;
color: var(--text-secondary, #5f6674); color: var(--text-secondary, #5f6674);
border-radius: 9px; border-radius: 6px;
padding: 7px 14px; padding: 6px 12px;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background 0.15s ease, color 0.15s ease;
&.active { &.active {
background: color-mix(in srgb, var(--primary) 18%, var(--card-bg)); background: color-mix(in srgb, var(--primary) 18%, var(--card-bg));
color: var(--text-primary, #1c2230); color: var(--text-primary, #1c2230);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: none;
} }
} }
} }
@@ -76,9 +76,9 @@
border: 1px solid color-mix(in srgb, var(--border-color, #d2d7df) 95%, transparent); border: 1px solid color-mix(in srgb, var(--border-color, #d2d7df) 95%, transparent);
background: var(--bg-secondary, #f3f5f8); background: var(--bg-secondary, #f3f5f8);
color: var(--text-secondary, #566074); color: var(--text-secondary, #566074);
border-radius: 10px; border-radius: 8px;
padding: 0 10px; padding: 0 10px;
min-height: 36px; min-height: 34px;
box-sizing: border-box; box-sizing: border-box;
svg { svg {
@@ -103,8 +103,8 @@
color: var(--text-primary, #1c2230); color: var(--text-primary, #1c2230);
font-size: 13px; font-size: 13px;
min-width: 0; min-width: 0;
height: 34px; height: 32px;
line-height: 34px; line-height: 32px;
font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
appearance: none; appearance: none;
} }
@@ -129,8 +129,8 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: transparent; background: transparent;
color: var(--text-secondary, #5f6674); color: var(--text-secondary, #5f6674);
border-radius: 10px; border-radius: 8px;
height: 36px; height: 34px;
padding: 0 12px; padding: 0 12px;
cursor: pointer; cursor: pointer;
} }
@@ -152,8 +152,8 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-secondary, #f3f5f8); background: var(--bg-secondary, #f3f5f8);
color: var(--text-secondary, #5f6674); color: var(--text-secondary, #5f6674);
border-radius: 10px; border-radius: 8px;
height: 34px; height: 32px;
padding: 0 12px; padding: 0 12px;
font-size: 13px; font-size: 13px;
display: inline-flex; display: inline-flex;
@@ -184,9 +184,9 @@
} }
.stream-state { .stream-state {
height: 120px; height: 104px;
border: 1px dashed var(--border-color); border: 1px dashed var(--border-color);
border-radius: 12px; border-radius: 8px;
background: var(--card-bg); background: var(--card-bg);
color: var(--text-secondary); color: var(--text-secondary);
display: flex; display: flex;
@@ -204,7 +204,7 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
border-radius: 16px; border-radius: 8px;
background: color-mix(in srgb, var(--card-bg) 94%, transparent); background: color-mix(in srgb, var(--card-bg) 94%, transparent);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@@ -226,7 +226,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
align-content: flex-start; align-content: flex-start;
padding: 10px 0 2px; padding: 8px 0 2px;
width: var(--stream-grid-width); width: var(--stream-grid-width);
min-width: var(--stream-grid-width); min-width: var(--stream-grid-width);
max-width: var(--stream-grid-width); max-width: var(--stream-grid-width);
@@ -257,7 +257,7 @@
height: 100%; height: 100%;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: 14px; border-radius: 8px;
overflow: hidden; overflow: hidden;
transition: border-color 0.16s ease; transition: border-color 0.16s ease;
position: relative; position: relative;
@@ -288,7 +288,7 @@
z-index: 4; z-index: 4;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 9px; border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--danger) 48%, var(--border-color)); border: 1px solid color-mix(in srgb, var(--danger) 48%, var(--border-color));
color: var(--danger); color: var(--danger);
background: color-mix(in srgb, var(--bg-secondary) 90%, transparent); background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
@@ -297,9 +297,9 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transform: translateY(-2px) scale(0.96); transform: none;
pointer-events: none; pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease; transition: opacity 0.15s ease;
} }
.floating-info { .floating-info {
@@ -317,7 +317,7 @@
.media-card:hover .floating-delete, .media-card:hover .floating-delete,
.media-card:focus-within .floating-delete { .media-card:focus-within .floating-delete {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); transform: none;
pointer-events: auto; pointer-events: auto;
} }
@@ -329,7 +329,7 @@
border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border-color)); border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border-color));
background: color-mix(in srgb, var(--bg-secondary) 90%, transparent); background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
color: var(--text-primary); color: var(--text-primary);
border-radius: 9px; border-radius: 6px;
height: 28px; height: 28px;
padding: 0 8px; padding: 0 8px;
font-size: 11px; font-size: 11px;
@@ -408,15 +408,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: none; pointer-events: none;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); background: rgba(255, 255, 255, 0.08);
overflow: hidden; overflow: hidden;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: -40%; inset: -40%;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); background: none;
animation: decrypt-sheen 1.6s linear infinite; animation: none;
pointer-events: none; pointer-events: none;
} }
} }
@@ -429,16 +429,14 @@
border-radius: 999px; border-radius: 999px;
border: 2px solid rgba(15, 23, 42, 0.2); border: 2px solid rgba(15, 23, 42, 0.2);
border-top-color: color-mix(in srgb, var(--primary) 78%, #ffffff); border-top-color: color-mix(in srgb, var(--primary) 78%, #ffffff);
animation: decrypt-spin 0.85s linear infinite, decrypt-pulse 1.2s ease-in-out infinite; animation: decrypt-spin 0.85s linear infinite;
box-shadow: box-shadow: none;
0 0 0 8px rgba(255, 255, 255, 0.26),
0 10px 24px rgba(15, 23, 42, 0.12);
} }
} }
.card-meta { .card-meta {
padding: 9px 10px 8px; padding: 8px 10px;
min-height: 66px; min-height: 58px;
margin-top: auto; margin-top: auto;
cursor: pointer; cursor: pointer;
border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
@@ -517,8 +515,8 @@
width: min(420px, calc(100% - 32px)); width: min(420px, calc(100% - 32px));
background: var(--dialog-surface); background: var(--dialog-surface);
border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent); border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
border-radius: 14px; border-radius: 10px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
overflow: hidden; overflow: hidden;
} }