damanukyan/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

F

Browse Source
This commit is contained in:
Артём Рассадин
2026-05-22 22:34:00 +03:00
parent fac5e2ea5e
commit 52a0b7f3c7
14 changed files with 823 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/pages/transactions/ui/TransactionsPage.module.css Normal file
View File

@@ -0,0 +1,357 @@
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-deep);
}
.main {
flex: 1;
padding: 28px 32px 40px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
position: relative;
}
.glow {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 320px;
background: radial-gradient(ellipse, rgba(61, 42, 142, 0.15), transparent 70%);
pointer-events: none;
z-index: 0;
}
.title {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 24px;
position: relative;
z-index: 1;
}
.list {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
}
.empty {
color: var(--text-secondary);
font-size: 15px;
position: relative;
z-index: 1;
}
.status {
color: var(--text-secondary);
font-size: 14px;
position: relative;
z-index: 1;
}
.statusError {
color: var(--error, #ff4466);
font-size: 14px;
position: relative;
z-index: 1;
}
/* ── Load more ── */
.loadMore {
display: flex;
justify-content: center;
padding: 24px 0 0;
position: relative;
z-index: 1;
}
.loadMoreBtn {
display: inline-flex;
align-items: center;
height: 44px;
padding: 0 28px;
background: rgba(74, 109, 255, 0.08);
border: 1px solid rgba(74, 109, 255, 0.3);
border-radius: 12px;
color: var(--interactive, #4a6dff);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.loadMoreBtn:hover:not(:disabled) {
background: rgba(74, 109, 255, 0.18);
border-color: var(--interactive, #4a6dff);
}
.loadMoreBtn:disabled {
opacity: 0.5;
cursor: default;
}
/* ── Status badge ── */
.statusBadge {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.status_pending {
background: rgba(243, 186, 47, 0.15);
color: #f3ba2f;
}
.status_completed {
background: rgba(0, 196, 140, 0.15);
color: var(--success, #00c48c);
}
.status_cancelled {
background: rgba(255, 77, 77, 0.15);
color: #ff4d4d;
}
.status_failed {
background: rgba(255, 77, 77, 0.15);
color: #ff4d4d;
}
/* ── Accordion item ── */
.accordionItem {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
border-radius: 16px;
overflow: hidden;
}
/* ── Summary row ── */
.summaryRow {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
width: 100%;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.summaryRow:hover {
background: rgba(255, 255, 255, 0.04);
}
.summaryLeft {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
flex-wrap: wrap;
}
.summaryDate {
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-mono);
white-space: nowrap;
}
.summaryRight {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.amount {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
}
.totalAmount {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.chevron {
color: var(--text-secondary);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.chevronOpen {
transform: rotate(180deg);
}
/* ── Accordion body — grid-rows animation ── */
.bodyOuter {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.bodyOuterOpen {
grid-template-rows: 1fr;
}
.bodyInner {
overflow: hidden;
}
/* ── Body content ── */
.body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 32px;
padding: 4px 20px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.col {
display: flex;
flex-direction: column;
}
.colTitle {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-secondary);
margin: 14px 0 4px;
}
.infoRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
gap: 12px;
}
.infoRow:last-child {
border-bottom: none;
}
.infoRowTotal {
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: none;
margin-top: 4px;
}
.infoRowTotal .infoLabel,
.infoRowTotal .infoValue {
font-weight: 700;
color: var(--text-primary);
font-size: 14px;
}
.infoLabel {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
}
.infoValue {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-primary);
text-align: right;
}
.infoValueRow {
display: flex;
align-items: center;
gap: 6px;
}
.infoLink {
font-size: 13px;
color: var(--interactive, #4a6dff);
text-decoration: none;
font-family: var(--font-mono);
}
.infoLink:hover {
text-decoration: underline;
}
/* ── Copy button ── */
.copyBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--glass-border);
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary);
padding: 0;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.copyBtn:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--text-primary);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.main {
padding: 20px 16px 32px;
}
.glow {
width: auto;
height: auto;
}
.summaryRight {
gap: 10px;
}
.totalAmount {
display: none;
}
}
@media (max-width: 640px) {
.body {
grid-template-columns: 1fr;
gap: 0;
}
.col + .col {
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 4px;
}
.summaryDate {
display: none;
}
}