feat: add initial frontend setup with styles, types, and testing framework
- Created a global CSS file for styling the frontend with responsive design. - Introduced TypeScript types for various entities including Research, Alpha, and Account. - Implemented Playwright tests for account management and data synchronization workflows. - Configured TypeScript with strict settings and included necessary libraries. - Set up Vite as the build tool with React plugin and API proxy configuration. - Added a Python script to initialize environment variables securely.
This commit is contained in:
yuxuanhui
@@ -0,0 +1,905 @@
|
||||
:root {
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"PingFang SC",
|
||||
sans-serif;
|
||||
color: #293346;
|
||||
background: #f5f6fa;
|
||||
font-synthesis: none;
|
||||
--accent: #6355d9;
|
||||
--surface: #fff;
|
||||
--canvas: #f5f6fa;
|
||||
--line: #e8ebf1;
|
||||
--ink: #293346;
|
||||
--muted: #81899a;
|
||||
--semi-color-primary: var(--accent);
|
||||
--semi-color-primary-hover: #7567e5;
|
||||
--semi-color-primary-active: #5143c5;
|
||||
--semi-color-primary-light-default: #efedfb;
|
||||
--semi-border-radius-small: 6px;
|
||||
--semi-border-radius-medium: 8px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body[theme-mode] {
|
||||
--semi-color-primary: var(--accent);
|
||||
--semi-color-primary-hover: #7567e5;
|
||||
--semi-color-primary-active: #5143c5;
|
||||
--semi-color-primary-light-default: #efedfb;
|
||||
margin: 0;
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
body[theme-mode="dark"] {
|
||||
--surface: #242630;
|
||||
--canvas: #191b24;
|
||||
--line: #343744;
|
||||
--ink: #e0e4ee;
|
||||
--muted: #9ba3b6;
|
||||
--semi-color-primary-light-default: #343046;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
letter-spacing: -0.7px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
p {
|
||||
line-height: 1.7;
|
||||
}
|
||||
label:not(.semi-checkbox):not(.semi-radio) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.9px;
|
||||
font-weight: 650;
|
||||
color: var(--muted);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.inline-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen-center {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.workspace {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
background: #191e30;
|
||||
color: #e5e6f3;
|
||||
width: 224px;
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
padding: 31px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 5;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.brand > div > span {
|
||||
display: block;
|
||||
font-size: 7px;
|
||||
letter-spacing: 1.8px;
|
||||
font-weight: 400;
|
||||
margin-top: 5px;
|
||||
color: #8f95b3;
|
||||
}
|
||||
.brand-mark {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
border-radius: 11px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 30px;
|
||||
font-family: Georgia, serif;
|
||||
background: #6d60d9;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.nav-label {
|
||||
font-size: 10px;
|
||||
color: #7e86a2;
|
||||
margin: 51px 15px 13px;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #a3abc4;
|
||||
padding: 13px 15px;
|
||||
margin-bottom: 7px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: #232a40;
|
||||
color: white;
|
||||
}
|
||||
.nav-item.active {
|
||||
background: #30304c;
|
||||
color: #c7bffe;
|
||||
}
|
||||
.sidebar-bottom {
|
||||
margin-top: auto;
|
||||
color: #717c99;
|
||||
font-size: 10px;
|
||||
padding: 20px 12px 0;
|
||||
line-height: 2;
|
||||
}
|
||||
.connection-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #a8b1c8;
|
||||
font-size: 11px;
|
||||
}
|
||||
.connection-line i {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
background: #727d91;
|
||||
}
|
||||
.connection-line i.connected {
|
||||
background: #6cc1a0;
|
||||
}
|
||||
.main-shell {
|
||||
margin-left: 224px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.topbar {
|
||||
height: 72px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
padding: 0 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
}
|
||||
.breadcrumbs {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.breadcrumbs span {
|
||||
margin: 0 13px;
|
||||
color: #c1c7d1;
|
||||
}
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
}
|
||||
.account-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.top-divider {
|
||||
height: 21px;
|
||||
border-left: 1px solid var(--line);
|
||||
margin: 0 6px;
|
||||
}
|
||||
.page-content {
|
||||
padding: 36px;
|
||||
max-width: 1800px;
|
||||
margin: auto;
|
||||
}
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.page-heading p {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
.library-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1.6fr;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 24px;
|
||||
padding: 23px 0;
|
||||
}
|
||||
.library-stats > div {
|
||||
padding: 0 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
.library-stats > div:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.library-stats span {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.library-stats strong {
|
||||
font-size: 25px;
|
||||
font-weight: 550;
|
||||
letter-spacing: -0.6px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.library-stats .last-sync strong {
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
margin-top: 9px;
|
||||
font-weight: 450;
|
||||
}
|
||||
.library-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.filter-panel {
|
||||
padding: 21px 22px 17px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.primary-filters {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.primary-filters > .semi-input-wrapper {
|
||||
flex: 2;
|
||||
min-width: 180px;
|
||||
}
|
||||
.primary-filters > .semi-select {
|
||||
flex: 1;
|
||||
min-width: 122px;
|
||||
}
|
||||
.advanced-filters {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.advanced-filters > summary {
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
width: max-content;
|
||||
}
|
||||
.advanced-grid {
|
||||
padding-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 4px 16px;
|
||||
}
|
||||
.advanced-grid label {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.range-inputs {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
.range-inputs > span {
|
||||
color: var(--muted);
|
||||
}
|
||||
.table-toolbar {
|
||||
padding: 20px 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.table-toolbar strong {
|
||||
font-size: 13px;
|
||||
font-weight: 550;
|
||||
}
|
||||
.table-toolbar .semi-select {
|
||||
min-width: 86px;
|
||||
}
|
||||
.count-pill {
|
||||
background: var(--canvas);
|
||||
padding: 3px 8px;
|
||||
margin-left: 9px;
|
||||
border-radius: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.selection-text {
|
||||
font-size: 11px;
|
||||
color: var(--accent);
|
||||
margin-left: 14px;
|
||||
}
|
||||
.columns-picker {
|
||||
padding: 18px;
|
||||
min-width: 190px;
|
||||
}
|
||||
.columns-picker > strong {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.alpha-link {
|
||||
border: 0;
|
||||
background: none;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: var(--ink);
|
||||
max-width: 165px;
|
||||
display: block;
|
||||
}
|
||||
.alpha-link > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 13px;
|
||||
color: var(--accent);
|
||||
font-weight: 550;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.alpha-link > small,
|
||||
.stacked-cell > small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
margin-top: 5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.favorite-icon {
|
||||
color: #d8aa45;
|
||||
}
|
||||
.stacked-cell {
|
||||
font-size: 12px;
|
||||
}
|
||||
.expression-cell {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.numeric {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 12px;
|
||||
}
|
||||
.inline-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: var(--canvas);
|
||||
color: var(--muted);
|
||||
}
|
||||
.semi-table-row-cell {
|
||||
border-color: var(--line) !important;
|
||||
}
|
||||
.semi-table-pagination-outer {
|
||||
padding: 8px 22px;
|
||||
}
|
||||
.page-footnote {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
margin: 19px 0;
|
||||
}
|
||||
.semi-banner {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.text-link {
|
||||
color: var(--accent);
|
||||
font-size: inherit;
|
||||
background: none;
|
||||
border: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.alpha-empty {
|
||||
padding: 52px 18px 60px;
|
||||
}
|
||||
.empty-alpha {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 22px;
|
||||
background: var(--canvas);
|
||||
border: 1px solid var(--line);
|
||||
color: #c1beda;
|
||||
font:
|
||||
52px Georgia,
|
||||
serif;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.account-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 26px;
|
||||
}
|
||||
.panel.full-width {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
.panel-title > .semi-icon {
|
||||
color: var(--accent);
|
||||
background: var(--semi-color-primary-light-default);
|
||||
padding: 11px;
|
||||
box-sizing: content-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.panel-title > div {
|
||||
flex: 1;
|
||||
}
|
||||
.panel-title h2 {
|
||||
font-size: 15px;
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
.panel-title p {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
.credential-note {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
margin: -2px 0 24px;
|
||||
}
|
||||
.profile-grid {
|
||||
margin: 0;
|
||||
}
|
||||
.profile-grid > div {
|
||||
display: grid;
|
||||
grid-template-columns: 100px 1fr;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
gap: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.profile-grid > div:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.profile-grid dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
.profile-grid dd {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.preferences-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
}
|
||||
.verification-callout {
|
||||
background: var(--surface);
|
||||
border: 1px solid #e7d2a0;
|
||||
border-radius: 9px;
|
||||
padding: 22px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.verification-callout p {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
margin: 7px 0 15px;
|
||||
}
|
||||
.job-card {
|
||||
border: 1px solid var(--line);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 18px 0;
|
||||
}
|
||||
.job-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.job-header strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
.job-card p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.job-numbers {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin: 16px 0;
|
||||
}
|
||||
.job-numbers b {
|
||||
font-size: 14px;
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.job-card .inline-actions {
|
||||
margin-top: 17px;
|
||||
}
|
||||
.error-text {
|
||||
color: #d35968;
|
||||
font-size: 12px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.detail-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
.detail-title h2 {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.detail-section {
|
||||
padding: 18px 0;
|
||||
}
|
||||
.detail-section .semi-descriptions {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.detail-section .semi-descriptions-item {
|
||||
font-size: 12px;
|
||||
}
|
||||
.code-block {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--canvas);
|
||||
padding: 18px;
|
||||
border-radius: 8px;
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
line-height: 1.75;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.check-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 11px;
|
||||
align-items: center;
|
||||
}
|
||||
.check-row > span:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
.detail-save {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.section-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.section-toolbar h3 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pnl-chart {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 350px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.pnl-chart text {
|
||||
font: 10px system-ui;
|
||||
fill: var(--muted);
|
||||
}
|
||||
.chart-empty {
|
||||
padding: 65px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.login-story {
|
||||
background: #191e30;
|
||||
color: #e5e6f3;
|
||||
padding: 48px 64px;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.login-story:after {
|
||||
content: "α";
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
right: -60px;
|
||||
font:
|
||||
600px Georgia,
|
||||
serif;
|
||||
color: #ffffff03;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.story-copy {
|
||||
margin: auto 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.story-copy .eyebrow {
|
||||
color: #8f89c9;
|
||||
font-size: 10px;
|
||||
letter-spacing: 2.5px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.story-copy h1 {
|
||||
font-size: 42px;
|
||||
line-height: 1.55;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 550;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.story-copy p {
|
||||
color: #949db6;
|
||||
font-size: 14px;
|
||||
line-height: 2.1;
|
||||
}
|
||||
.story-signal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
color: #aaa1eb;
|
||||
margin-top: 40px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.login-footnote {
|
||||
font-size: 10px;
|
||||
color: #747e9b;
|
||||
}
|
||||
.login-form-shell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 48px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.login-form {
|
||||
max-width: 365px;
|
||||
width: 100%;
|
||||
}
|
||||
.login-form h2 {
|
||||
font-size: 26px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.login-form > p {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
.login-form label {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.login-form label > .semi-input-wrapper {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.login-note {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.semi-sidesheet-inner {
|
||||
max-width: 100vw;
|
||||
}
|
||||
.semi-tabs-content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
.page-content {
|
||||
padding: 42px 48px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.sidebar {
|
||||
width: 190px;
|
||||
padding: 26px 14px;
|
||||
}
|
||||
.main-shell {
|
||||
margin-left: 190px;
|
||||
}
|
||||
.page-content {
|
||||
padding: 26px 22px;
|
||||
}
|
||||
.topbar {
|
||||
padding: 0 22px;
|
||||
}
|
||||
.page-heading {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.library-stats > div {
|
||||
padding: 0 18px;
|
||||
}
|
||||
.advanced-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.preferences-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.login-story {
|
||||
padding: 40px;
|
||||
}
|
||||
.story-copy h1 {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.sidebar {
|
||||
width: 64px;
|
||||
padding: 23px 8px;
|
||||
}
|
||||
.sidebar .brand > div,
|
||||
.nav-label,
|
||||
.sidebar-bottom {
|
||||
display: none;
|
||||
}
|
||||
.sidebar .brand {
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.nav-item {
|
||||
font-size: 0;
|
||||
padding: 13px;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-item .semi-icon {
|
||||
font-size: 19px;
|
||||
}
|
||||
.main-shell {
|
||||
margin-left: 64px;
|
||||
}
|
||||
.page-content {
|
||||
padding: 22px 16px;
|
||||
}
|
||||
.topbar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.account-name,
|
||||
.breadcrumbs {
|
||||
display: none;
|
||||
}
|
||||
.top-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
.page-heading {
|
||||
flex-direction: column;
|
||||
}
|
||||
.library-stats {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 22px;
|
||||
}
|
||||
.library-stats > div:nth-child(2) {
|
||||
border: 0;
|
||||
}
|
||||
.library-stats .last-sync strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
.primary-filters {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.primary-filters > .semi-input-wrapper {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.primary-filters > .semi-select {
|
||||
min-width: 0;
|
||||
}
|
||||
.advanced-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.account-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.preferences-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.login-page {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.login-story {
|
||||
display: none;
|
||||
}
|
||||
.login-form-shell {
|
||||
min-height: 100vh;
|
||||
padding: 30px;
|
||||
}
|
||||
.table-toolbar {
|
||||
padding: 16px;
|
||||
}
|
||||
.table-toolbar > .inline-actions {
|
||||
gap: 5px;
|
||||
}
|
||||
.profile-grid > div {
|
||||
grid-template-columns: 80px 1fr;
|
||||
}
|
||||
.detail-title {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user