/* ===================================================== Finance Assistant Page : Financial Module : Statistics File : statistics.css Version : 1.1.0 Description : Financial Statistics Page Theme Aware : - Light - Dark - Green - Pink ===================================================== */ /* ===================================================== STATISTICS PAGE ===================================================== */ #statistics-page{ padding-bottom:40px; } #statistics-page .section{ margin-bottom:32px; } #statistics-page .section-header{ margin-bottom:16px; } /* ===================================================== SECTION BADGE ===================================================== */ #statistics-page .section-badge{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; background:var(--surface); color:var(--text); font-size:1.15rem; font-weight:700; } /* ===================================================== FILTER ===================================================== */ #statistics-filter-list{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } /* ===================================================== FILTER ITEM ===================================================== */ #statistics-filter-list .statistics-filter-item{ padding:9px 15px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-secondary); font-size:14px; font-weight:600; line-height:1.2; cursor:pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } #statistics-filter-list .statistics-filter-item:hover{ border-color:var(--primary); color:var(--primary); } #statistics-filter-list .statistics-filter-item:active{ transform:scale(.97); } /* ===================================================== FILTER ACTIVE ===================================================== */ #statistics-filter-list .statistics-filter-item.active{ border-color:var(--primary); background:var(--primary); color:var(--on-primary, #fff); } /* ===================================================== CHART CARD ===================================================== */ #statistics-chart .card{ padding:20px; overflow:hidden; } /* ===================================================== CHART WRAPPER ===================================================== */ #statistics-chart{ min-width:0; } /* ===================================================== CHART CANVAS ===================================================== */ #statistics-chart-canvas{ display:block; width:100% !important; max-width:100%; } /* ===================================================== TRANSACTION CARD ===================================================== */ #statistics-transaction .card{ padding:20px; overflow:hidden; } /* ===================================================== TRANSACTION LIST ===================================================== */ #statistics-transaction-list{ display:flex; flex-direction:column; width:100%; } /* ===================================================== TRANSACTION ITEM ===================================================== */ #statistics-transaction-list .transaction-item{ display:flex; flex-direction:column; width:100%; padding:18px 0; border-bottom: 1px solid var(--border); } /* ===================================================== LAST TRANSACTION ===================================================== */ #statistics-transaction-list .transaction-item:last-child{ border-bottom:none; } /* ===================================================== TRANSACTION DATE ===================================================== */ #statistics-transaction-list .transaction-date{ width:100%; margin-bottom:12px; color:var(--text); font-size:15px; line-height:1.35; font-weight:600; } /* ===================================================== TRANSACTION DETAIL ===================================================== */ #statistics-transaction-list .transaction-detail{ display:flex; flex-direction:column; width:100%; gap:10px; } /* ===================================================== TRANSACTION WORK ROW ===================================================== */ #statistics-transaction-list .transaction-work-row{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; min-width:0; gap:20px; } /* ===================================================== TRANSACTION INFO ===================================================== */ #statistics-transaction-list .transaction-info{ flex: 1 1 auto; min-width:0; } /* ===================================================== TRANSACTION NAME ===================================================== */ #statistics-transaction-list .transaction-name{ display:block; width:100%; color:var(--text); font-size:16px; line-height:1.35; font-weight:600; font-style:normal; overflow-wrap:anywhere; } /* ===================================================== TRANSACTION NOTE ===================================================== */ #statistics-transaction-list .transaction-note{ display:block; margin-top:3px; color:var(--text-secondary); font-size:13px; line-height:1.4; font-weight:400; font-style:italic; overflow-wrap:anywhere; } /* ===================================================== TRANSACTION AMOUNT ===================================================== */ #statistics-transaction-list .transaction-amount{ flex: 0 0 auto; margin-left:auto; padding-left:10px; color:var(--text); font-size:16px; line-height:1.35; font-weight:600; font-style:normal; text-align:right; white-space:nowrap; } /* ===================================================== TRANSACTION EMPTY ===================================================== */ #statistics-transaction-list .statistics-summary-empty{ padding:24px 10px; text-align:center; color:var(--text-secondary); font-size:14px; line-height:1.5; } /* ===================================================== PAGINATION ===================================================== */ #statistics-show-more{ width:100%; margin-top:18px; } /* ===================================================== PAGINATION CONTAINER ===================================================== */ .statistics-pagination{ display:flex; align-items:center; justify-content:center; width:100%; gap:12px; padding:8px 0 4px; } /* ===================================================== PAGINATION BUTTON ===================================================== */ .statistics-pagination button{ min-width:110px; padding:10px 14px; border: 1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); font-size:14px; font-weight:600; line-height:1.2; cursor:pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .15s ease; } .statistics-pagination button:hover:not(:disabled){ border-color:var(--primary); color:var(--primary); } .statistics-pagination button:active:not(:disabled){ transform:scale(.97); } /* ===================================================== PAGINATION DISABLED ===================================================== */ .statistics-pagination button:disabled{ opacity:.4; cursor:not-allowed; } /* ===================================================== PAGE NUMBER ===================================================== */ .statistics-pagination span{ min-width:44px; color:var(--text-secondary); font-size:14px; font-weight:600; line-height:1.2; text-align:center; } /* ===================================================== TABLET ===================================================== */ @media( max-width:700px ){ /* --------------------------------------------- FILTER --------------------------------------------- */ #statistics-filter-list{ gap:8px; } #statistics-filter-list .statistics-filter-item{ padding:8px 13px; font-size:13px; } /* --------------------------------------------- CHART --------------------------------------------- */ #statistics-chart .card{ padding:18px 16px; } /* --------------------------------------------- TRANSACTION --------------------------------------------- */ #statistics-transaction .card{ padding:18px 16px; } #statistics-transaction-list .transaction-item{ padding:17px 0; } #statistics-transaction-list .transaction-name{ font-size:16px; } #statistics-transaction-list .transaction-note{ font-size:13px; } #statistics-transaction-list .transaction-amount{ font-size:16px; } } /* ===================================================== MOBILE ===================================================== */ @media( max-width:480px ){ /* --------------------------------------------- PAGE --------------------------------------------- */ #statistics-page{ padding-bottom:32px; } /* --------------------------------------------- FILTER --------------------------------------------- */ #statistics-filter-list{ gap:7px; } #statistics-filter-list .statistics-filter-item{ padding:8px 12px; font-size:13px; } /* --------------------------------------------- CHART --------------------------------------------- */ #statistics-chart .card{ padding:16px 12px; } /* --------------------------------------------- TRANSACTION --------------------------------------------- */ #statistics-transaction .card{ padding:16px 12px; } #statistics-transaction-list .transaction-item{ padding:16px 4px; } #statistics-transaction-list .transaction-date{ margin-bottom:10px; font-size:14px; } #statistics-transaction-list .transaction-detail{ gap:9px; } #statistics-transaction-list .transaction-work-row{ gap:12px; } #statistics-transaction-list .transaction-name{ font-size:15px; line-height:1.35; } #statistics-transaction-list .transaction-note{ margin-top:2px; font-size:12px; line-height:1.4; } #statistics-transaction-list .transaction-amount{ padding-left:6px; font-size:15px; line-height:1.35; } /* --------------------------------------------- PAGINATION --------------------------------------------- */ .statistics-pagination{ gap:8px; } .statistics-pagination button{ min-width:95px; padding:9px 10px; font-size:13px; } .statistics-pagination span{ min-width:38px; font-size:13px; } }