Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-05 12:44:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6
3x-ui/frontend/src/styles/page-shell.css

144 lines
2.7 KiB
CSS
Raw Normal View History

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;
}
refactor(frontend): move default content-area padding to page-shell.css After page-shell.css landed, six of the seven panel pages still kept an identical `.X-page .content-area { padding: 24px }` desktop rule, plus three of them kept an identical `padding: 8px` mobile rule. Hoist both defaults into page-shell.css under a single 6-page selector group and delete the per-page copies. What stays page-specific: - IndexPage keeps its mobile override (padding 12px + padding-top: 64px for the fixed drawer handle clearance). - ApiDocsPage keeps its tighter desktop padding (16px) and its own mobile padding-top: 56px. Settings .ldap-no-inbounds also switches from #999 to var(--ant-color-text-tertiary) for theme adaptation.
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);
}
refactor(frontend): hoist .header-row, .icons-only, .summary-card to page-shell.css Settings and Xray pages both carried identical .header-row / .header-actions / .header-info rules and an identical six-rule .icons-only block that styles tabbed page navigation. Clients, Inbounds, and Nodes all carried identical .summary-card padding rules with the same mobile reduction. None of these are page-specific. Consolidate: - .header-row family → page-shell scoped to .settings-page, .xray-page - .icons-only family → page-shell global (the class is a deliberate opt-in marker, no scope needed) - .summary-card → page-shell scoped to .clients-page, .inbounds-page, .nodes-page (also fixes InboundsPage's missing scope — its rule was global and would have matched stray .summary-card uses elsewhere) InboundsPage.css and NodesPage.css became empty after the move so the files and their per-page imports are deleted.
2026-05-25 12:14:53 +00:00
.settings-page .header-row,
.xray-page .header-row {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.settings-page .header-actions,
.xray-page .header-actions {
padding: 4px;
}
.settings-page .header-info,
.xray-page .header-info {
display: flex;
justify-content: flex-end;
}
.icons-only .ant-tabs-nav {
margin-bottom: 8px;
}
.icons-only .ant-tabs-nav-wrap {
width: 100%;
}
.icons-only .ant-tabs-nav-list {
display: flex;
width: 100%;
}
.icons-only .ant-tabs-tab {
flex: 1 1 0;
justify-content: center;
margin: 0;
padding: 10px 0;
}
.icons-only .ant-tabs-tab .anticon {
margin: 0;
font-size: 18px;
}
.icons-only .ant-tabs-nav-operations {
display: none;
}
.clients-page .summary-card,
.inbounds-page .summary-card,
.nodes-page .summary-card {
padding: 16px;
}
@media (max-width: 768px) {
.clients-page .summary-card,
.inbounds-page .summary-card,
.nodes-page .summary-card {
padding: 8px;
}
}
Reference in a new issue Copy permalink