feat(web): deliver responsive wealth dashboard and complete portfolio workflows
This commit is contained in:
陈煜 committed
1 parent
2eb2f4b56e
commit
ba0d5201c9
11 files changed
+2379
-18
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,91 @@
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
message: string,
|
||||
public status: number,
|
||||
) {
|
||||
super(message);
|
||||
}
|
||||
}
|
||||
export async function api<T>(path: string, method = 'GET', data?: unknown): Promise<T> {
|
||||
const res = await fetch('/api' + path, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: data === undefined ? {} : { 'Content-Type': 'application/json' },
|
||||
body: data === undefined ? undefined : JSON.stringify(data),
|
||||
});
|
||||
const body = await res.json().catch(() => ({ message: '服务响应异常' }));
|
||||
if (!res.ok) throw new ApiError(body.message || '操作失败', res.status);
|
||||
return body;
|
||||
}
|
||||
export type User = { username: string; baseCurrency: string };
|
||||
export type History = {
|
||||
id: string;
|
||||
sequence: number;
|
||||
createdAt: string | null;
|
||||
positionId: string;
|
||||
name: string;
|
||||
kind: string;
|
||||
before: string;
|
||||
after: string;
|
||||
delta: string;
|
||||
currency: string;
|
||||
date: string;
|
||||
notes: string;
|
||||
reason: string;
|
||||
};
|
||||
export type Position = {
|
||||
id: string;
|
||||
kind: string;
|
||||
side: string;
|
||||
name: string;
|
||||
category: string;
|
||||
currency: string;
|
||||
amount: string;
|
||||
notes: string;
|
||||
archived: boolean;
|
||||
history: History[];
|
||||
outgoing: { targetId: string }[];
|
||||
};
|
||||
export type Total = {
|
||||
date: string;
|
||||
assets: string;
|
||||
liabilities: string;
|
||||
net: string;
|
||||
complete: boolean;
|
||||
missing: string[];
|
||||
balanceChange?: string | null;
|
||||
fxChange?: string | null;
|
||||
};
|
||||
export type Overview = Total & {
|
||||
baseCurrency: string;
|
||||
trend: Total[];
|
||||
recent: History[];
|
||||
items: {
|
||||
id: string;
|
||||
converted: string | null;
|
||||
rateDate: string | null;
|
||||
currency: string;
|
||||
amount: string;
|
||||
source: string | null;
|
||||
}[];
|
||||
};
|
||||
export type Rate = {
|
||||
currency: string;
|
||||
baseCurrency: string;
|
||||
rate: string;
|
||||
date: string;
|
||||
source: string;
|
||||
};
|
||||
export const currencies = ['CNY', 'USD', 'HKD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD', 'CHF', 'SGD'];
|
||||
export function today() {
|
||||
return new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Asia/Hong_Kong',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}).format(new Date());
|
||||
}
|
||||
export function money(v: string, currency: string) {
|
||||
const [whole, frac] = v.split('.');
|
||||
return `${currency} ${whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${frac !== undefined ? '.' + frac : ''}`;
|
||||
}
|
||||
@@ -1 +1,8 @@
|
||||
import React from 'react';import{createRoot}from'react-dom/client';createRoot(document.getElementById('root')!).render(<React.StrictMode><h1>WorthPath</h1><p>资产管理服务正在搭建。</p></React.StrictMode>);
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App';
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,867 @@
|
||||
:root {
|
||||
font-family: Inter, 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
color: #233b35;
|
||||
background: #f4f7f5;
|
||||
font-synthesis: none;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.55;
|
||||
}
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 3px solid #68ad99;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #d7e0dc;
|
||||
background: #fff;
|
||||
border-radius: 9px;
|
||||
padding: 11px 12px;
|
||||
color: #253d36;
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid #7ebdab;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
color: #74877e;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
}
|
||||
strong {
|
||||
font-weight: 650;
|
||||
}
|
||||
.muted {
|
||||
color: #7b8c84;
|
||||
font-size: 13px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: #79978b;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 23px;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
.brand > span {
|
||||
background: #2c8066;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 23px;
|
||||
}
|
||||
.primary,
|
||||
.secondary {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 17px;
|
||||
border-radius: 9px;
|
||||
min-height: 44px;
|
||||
font-size: 13px;
|
||||
font-weight: 550;
|
||||
}
|
||||
.primary {
|
||||
color: #fff;
|
||||
background: #277b61;
|
||||
}
|
||||
.primary:hover {
|
||||
background: #216750;
|
||||
}
|
||||
.secondary {
|
||||
background: #fff;
|
||||
border: 1px solid #dce5df;
|
||||
color: #345548;
|
||||
}
|
||||
.text {
|
||||
background: transparent;
|
||||
color: #277b61;
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.icon {
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
color: #769186;
|
||||
border-radius: 7px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.icon:hover {
|
||||
background: #e7f0eb;
|
||||
}
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
.field {
|
||||
display: block;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.field > span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.auth-layout {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.auth-story {
|
||||
background: #e7efe8;
|
||||
padding: 45px 9%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100vh;
|
||||
background-image: radial-gradient(ellipse at 100% 70%, #d0e7d880, transparent 55%);
|
||||
}
|
||||
.auth-story h1 {
|
||||
font-size: 42px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -1.5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.auth-story p {
|
||||
color: #657f70;
|
||||
font-size: 14px;
|
||||
}
|
||||
.auth-story .eyebrow {
|
||||
font-size: 10px;
|
||||
}
|
||||
.story-line {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
margin-top: 50px;
|
||||
padding: 22px;
|
||||
background: #ffffff66;
|
||||
border: 1px solid #ffffff80;
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
color: #40725c;
|
||||
font-size: 14px;
|
||||
}
|
||||
.auth-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 36px;
|
||||
}
|
||||
.auth-form > div {
|
||||
max-width: 355px;
|
||||
width: 100%;
|
||||
}
|
||||
.auth-form h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.auth-form form {
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
.privacy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #83988c;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.splash {
|
||||
padding: 30vh 20px;
|
||||
text-align: center;
|
||||
color: #277b61;
|
||||
}
|
||||
.app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
width: 228px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fcfdfb;
|
||||
border-right: 1px solid #e3eae4;
|
||||
padding: 28px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar .brand {
|
||||
font-size: 22px;
|
||||
}
|
||||
.nav-caption {
|
||||
font-size: 10px;
|
||||
color: #9baba2;
|
||||
margin: 43px 13px 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
nav button {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
padding: 12px 14px;
|
||||
background: transparent;
|
||||
color: #788e82;
|
||||
text-align: left;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
nav button.active {
|
||||
color: #277b61;
|
||||
background: #e9f2ec;
|
||||
font-weight: 600;
|
||||
}
|
||||
nav button:hover {
|
||||
background: #eff5f0;
|
||||
}
|
||||
.side-bottom {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid #e7eee7;
|
||||
padding-top: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #e6eee5;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #5b806c;
|
||||
}
|
||||
.side-bottom strong {
|
||||
font-size: 12px;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.side-bottom small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
}
|
||||
.side-bottom .icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
main {
|
||||
margin-left: 228px;
|
||||
width: calc(100% - 228px);
|
||||
}
|
||||
.topbar {
|
||||
height: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 38px;
|
||||
border-bottom: 1px solid #e5ebe6;
|
||||
background: #ffffff80;
|
||||
color: #84968a;
|
||||
font-size: 11px;
|
||||
}
|
||||
.topbar > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.currency-pill,
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 6px;
|
||||
color: #728b7c;
|
||||
background: #edf2eb;
|
||||
}
|
||||
.content {
|
||||
padding: 32px 38px;
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
}
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.page-heading .muted {
|
||||
margin: 9px 0 0;
|
||||
}
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
.metric {
|
||||
background: white;
|
||||
border: 1px solid #e1e9e2;
|
||||
border-radius: 12px;
|
||||
padding: 23px;
|
||||
min-width: 0;
|
||||
}
|
||||
.metric > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #7c9486;
|
||||
font-size: 12px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.metric strong {
|
||||
font-size: clamp(17px, 2vw, 29px);
|
||||
font-weight: 600;
|
||||
letter-spacing: -1px;
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.metric small {
|
||||
display: block;
|
||||
margin-top: 13px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.metric.net {
|
||||
background: #277b61;
|
||||
border-color: #277b61;
|
||||
color: white;
|
||||
}
|
||||
.metric.net > div,
|
||||
.metric.net small {
|
||||
color: #c0dcd0;
|
||||
}
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.8fr 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e9e1;
|
||||
border-radius: 12px;
|
||||
padding: 23px;
|
||||
margin-bottom: 22px;
|
||||
min-width: 0;
|
||||
}
|
||||
.panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 17px;
|
||||
gap: 8px;
|
||||
}
|
||||
.panel-title h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 17px;
|
||||
font-size: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.legend span:before {
|
||||
content: '●';
|
||||
margin-right: 5px;
|
||||
}
|
||||
.green {
|
||||
color: #199b76;
|
||||
}
|
||||
.orange {
|
||||
color: #dc9463;
|
||||
}
|
||||
.blue {
|
||||
color: #457bca;
|
||||
}
|
||||
.chart {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.chart-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
color: #92a096;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.composition {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #edf0eb;
|
||||
text-align: left;
|
||||
color: #436a56;
|
||||
font-size: 13px;
|
||||
}
|
||||
.composition small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
th {
|
||||
font-weight: 400;
|
||||
color: #92a497;
|
||||
text-align: left;
|
||||
padding: 11px 12px;
|
||||
background: #f8faf7;
|
||||
font-size: 10px;
|
||||
}
|
||||
td {
|
||||
padding: 14px 12px;
|
||||
border-bottom: 1px solid #edf1eb;
|
||||
}
|
||||
td small {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
td .text {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.notes-cell {
|
||||
max-width: 240px;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.empty {
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
color: #95aa9b;
|
||||
padding: 22px;
|
||||
gap: 6px;
|
||||
}
|
||||
.empty h3 {
|
||||
color: #5e7e69;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.empty p {
|
||||
font-size: 12px;
|
||||
color: #91a096;
|
||||
max-width: 310px;
|
||||
}
|
||||
.fx-caption {
|
||||
color: #8d9e91;
|
||||
font-size: 10px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.notice {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-radius: 8px;
|
||||
padding: 12px 15px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.notice.error {
|
||||
background: #fbeeed;
|
||||
color: #9c534d;
|
||||
}
|
||||
.notice.success {
|
||||
background: #e5f1e9;
|
||||
color: #367657;
|
||||
}
|
||||
.notice.warning {
|
||||
background: #faf2dd;
|
||||
color: #8f793d;
|
||||
}
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||||
gap: 17px;
|
||||
}
|
||||
.position-card {
|
||||
text-align: left;
|
||||
background: #fcfdfa;
|
||||
border: 1px solid #e0e9e0;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
color: #385b47;
|
||||
}
|
||||
.position-card:hover {
|
||||
border-color: #8bbfa4;
|
||||
}
|
||||
.position-card > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.position-icon {
|
||||
background: #eaf2e9;
|
||||
display: flex;
|
||||
padding: 9px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.position-card h3 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.position-card p {
|
||||
font-size: 11px;
|
||||
color: #8b9d8d;
|
||||
}
|
||||
.position-card strong {
|
||||
font-size: 20px;
|
||||
overflow-wrap: anywhere;
|
||||
display: block;
|
||||
}
|
||||
.position-card small {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
.detail-summary h2 {
|
||||
font-size: 30px;
|
||||
margin: 17px 0 8px;
|
||||
}
|
||||
.detail-summary p {
|
||||
font-size: 13px;
|
||||
}
|
||||
.back {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.file-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-button input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.import-preview {
|
||||
margin-top: 20px;
|
||||
background: #f3f7ee;
|
||||
border-radius: 9px;
|
||||
padding: 18px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.veil {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #163a2b60;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
padding: 25px;
|
||||
width: 480px;
|
||||
max-height: 92vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0 25px 80px #0f312b30;
|
||||
}
|
||||
.modal header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.modal h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.link-options label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 13px;
|
||||
}
|
||||
.link-options input {
|
||||
width: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
footer {
|
||||
font-size: 10px;
|
||||
color: #a4b2a7;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.auth-form .notice {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 1550px) {
|
||||
.content {
|
||||
padding-top: 45px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.sidebar {
|
||||
width: 190px;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
main {
|
||||
margin-left: 190px;
|
||||
width: calc(100% - 190px);
|
||||
}
|
||||
.brand {
|
||||
font-size: 19px;
|
||||
}
|
||||
.content {
|
||||
padding: 26px;
|
||||
}
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.metric {
|
||||
padding: 18px;
|
||||
}
|
||||
.detail-summary {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.metrics {
|
||||
gap: 12px;
|
||||
}
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.auth-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.auth-story {
|
||||
min-height: auto;
|
||||
padding: 25px;
|
||||
gap: 35px;
|
||||
}
|
||||
.auth-story h1 {
|
||||
font-size: 29px;
|
||||
margin: 0;
|
||||
}
|
||||
.auth-story > div:nth-child(2) > p:not(.eyebrow),
|
||||
.story-line,
|
||||
.auth-story > small {
|
||||
display: none;
|
||||
}
|
||||
.auth-form {
|
||||
padding: 35px 25px;
|
||||
}
|
||||
.sidebar {
|
||||
inset: auto 0 0;
|
||||
width: 100%;
|
||||
height: 67px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
z-index: 5;
|
||||
border-top: 1px solid #e2ebe1;
|
||||
border-right: 0;
|
||||
}
|
||||
.sidebar > .brand,
|
||||
.nav-caption,
|
||||
.side-bottom {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
}
|
||||
nav button {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 9px 6px;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
font-size: 9px;
|
||||
flex: 1;
|
||||
}
|
||||
nav button.active {
|
||||
background: #f1f7f0;
|
||||
}
|
||||
main {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 67px;
|
||||
}
|
||||
.topbar {
|
||||
height: 53px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
.content {
|
||||
padding: 24px 17px;
|
||||
}
|
||||
.page-heading {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.page-heading h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.page-heading > .primary {
|
||||
padding: 9px;
|
||||
font-size: 11px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.metrics {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.metric {
|
||||
padding: 17px 19px;
|
||||
}
|
||||
.metric > div {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.metric strong {
|
||||
font-size: 27px;
|
||||
}
|
||||
.metric small {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.panel {
|
||||
padding: 17px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.dashboard-grid {
|
||||
gap: 0;
|
||||
}
|
||||
.position-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.modal {
|
||||
padding: 20px;
|
||||
border-radius: 13px;
|
||||
max-height: 90vh;
|
||||
}
|
||||
.veil {
|
||||
padding: 12px;
|
||||
}
|
||||
.metric:not(.net) {
|
||||
min-height: 125px;
|
||||
}
|
||||
.table-wrap {
|
||||
margin: 0 -6px;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.settings-grid {
|
||||
gap: 0;
|
||||
}
|
||||
.detail-summary h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.actions {
|
||||
gap: 8px;
|
||||
}
|
||||
.notice {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user