refactor(frontend): consolidate shared page-shell rules into one stylesheet
Every panel page CSS file repeated the same wrapper boilerplate — the
--bg-page/--bg-card token triples for light/dark/ultra-dark, the
min-height + background root rule, the .ant-layout transparent reset,
the .content-shell transparent reset, and the .loading-spacer min-height.
That's ~30 identical lines duplicated across IndexPage, ClientsPage,
InboundsPage, XrayPage, SettingsPage, NodesPage, and ApiDocsPage.
Move all of it into styles/page-shell.css and import it once from
main.tsx alongside utils.css and page-cards.css. Each page CSS file
now only contains genuinely page-specific rules (content-area padding
overrides, page-specific tokens like ApiDocs's Swagger --sw-* set).
Also drop the per-page `import '@/styles/page-cards.css'` statements
from the 7 page tsx files now that main.tsx loads it globally.
Net: -211 deleted, +6 inserted in the touched files, plus the new
page-shell.css. .zero-margin (Divider override used by Nord/Warp
modals) folded into utils.css alongside the margin classes.
2026-05-25 12:04:29 +00:00
|
|
|
.index-page,
|
|
|
|
|
.clients-page,
|
|
|
|
|
.inbounds-page,
|
|
|
|
|
.xray-page,
|
|
|
|
|
.settings-page,
|
|
|
|
|
.nodes-page,
|
|
|
|
|
.api-docs-page {
|
|
|
|
|
--bg-page: #e6e8ec;
|
|
|
|
|
--bg-card: #ffffff;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
background: var(--bg-page);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.index-page.is-dark,
|
|
|
|
|
.clients-page.is-dark,
|
|
|
|
|
.inbounds-page.is-dark,
|
|
|
|
|
.xray-page.is-dark,
|
|
|
|
|
.settings-page.is-dark,
|
|
|
|
|
.nodes-page.is-dark,
|
|
|
|
|
.api-docs-page.is-dark {
|
|
|
|
|
--bg-page: #1a1b1f;
|
|
|
|
|
--bg-card: #23252b;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.index-page.is-dark.is-ultra,
|
|
|
|
|
.clients-page.is-dark.is-ultra,
|
|
|
|
|
.inbounds-page.is-dark.is-ultra,
|
|
|
|
|
.xray-page.is-dark.is-ultra,
|
|
|
|
|
.settings-page.is-dark.is-ultra,
|
|
|
|
|
.nodes-page.is-dark.is-ultra,
|
|
|
|
|
.api-docs-page.is-dark.is-ultra {
|
|
|
|
|
--bg-page: #000;
|
|
|
|
|
--bg-card: #101013;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.index-page .ant-layout,
|
|
|
|
|
.index-page .ant-layout-content,
|
|
|
|
|
.clients-page .ant-layout,
|
|
|
|
|
.clients-page .ant-layout-content,
|
|
|
|
|
.inbounds-page .ant-layout,
|
|
|
|
|
.inbounds-page .ant-layout-content,
|
|
|
|
|
.xray-page .ant-layout,
|
|
|
|
|
.xray-page .ant-layout-content,
|
|
|
|
|
.settings-page .ant-layout,
|
|
|
|
|
.settings-page .ant-layout-content,
|
|
|
|
|
.nodes-page .ant-layout,
|
|
|
|
|
.nodes-page .ant-layout-content,
|
|
|
|
|
.api-docs-page .ant-layout,
|
|
|
|
|
.api-docs-page .ant-layout-content {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.index-page .content-shell,
|
|
|
|
|
.clients-page .content-shell,
|
|
|
|
|
.inbounds-page .content-shell,
|
|
|
|
|
.xray-page .content-shell,
|
|
|
|
|
.settings-page .content-shell,
|
|
|
|
|
.nodes-page .content-shell,
|
|
|
|
|
.api-docs-page .content-shell {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-25 12:08:41 +00:00
|
|
|
.index-page .content-area,
|
|
|
|
|
.clients-page .content-area,
|
|
|
|
|
.inbounds-page .content-area,
|
|
|
|
|
.xray-page .content-area,
|
|
|
|
|
.settings-page .content-area,
|
|
|
|
|
.nodes-page .content-area {
|
|
|
|
|
padding: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.clients-page .content-area,
|
|
|
|
|
.inbounds-page .content-area,
|
|
|
|
|
.nodes-page .content-area {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
refactor(frontend): consolidate shared page-shell rules into one stylesheet
Every panel page CSS file repeated the same wrapper boilerplate — the
--bg-page/--bg-card token triples for light/dark/ultra-dark, the
min-height + background root rule, the .ant-layout transparent reset,
the .content-shell transparent reset, and the .loading-spacer min-height.
That's ~30 identical lines duplicated across IndexPage, ClientsPage,
InboundsPage, XrayPage, SettingsPage, NodesPage, and ApiDocsPage.
Move all of it into styles/page-shell.css and import it once from
main.tsx alongside utils.css and page-cards.css. Each page CSS file
now only contains genuinely page-specific rules (content-area padding
overrides, page-specific tokens like ApiDocs's Swagger --sw-* set).
Also drop the per-page `import '@/styles/page-cards.css'` statements
from the 7 page tsx files now that main.tsx loads it globally.
Net: -211 deleted, +6 inserted in the touched files, plus the new
page-shell.css. .zero-margin (Divider override used by Nord/Warp
modals) folded into utils.css alongside the margin classes.
2026-05-25 12:04:29 +00:00
|
|
|
.loading-spacer {
|
|
|
|
|
min-height: calc(100vh - 120px);
|
|
|
|
|
}
|