mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 20:54:14 +00:00
style(frontend): refined dark/ultra palette + shared pro card frame
- Dark tokens shifted to a cooler, Linear-style palette: page #1a1b1f, sidebar/header #15161a (recessed nav, darker than cards), card #23252b, elevated #2d2f37 - Ultra dark: page pure #000 for OLED, sidebar #050507 disappears into the frame, card #101013 with a clear step, elevated #1a1a1e - New styles/page-cards.css holds the card border/shadow/hover rules so all seven content pages (index, clients, inbounds, xray, settings, nodes, api-docs) share one definition instead of duplicating in each page CSS - Dashboard typography: uppercase card titles with letter-spacing, larger 17px stat values, subtle gradient divider between stat columns, ellipsis on action labels so "Backup & Restore" doesn't break the card height at mid widths - Light --bg-page stays at #e6e8ec for the contrast against white cards
This commit is contained in:
parent
f9fb197cdb
commit
3939356b70
19 changed files with 382 additions and 57 deletions
|
|
@ -1,25 +1,38 @@
|
||||||
.ant-statistic-content {
|
.ant-statistic-content {
|
||||||
font-size: 15px !important;
|
font-size: 17px !important;
|
||||||
line-height: 1.4 !important;
|
line-height: 1.4 !important;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-statistic-content-value,
|
.ant-statistic-content-value,
|
||||||
.ant-statistic-content-prefix,
|
.ant-statistic-content-prefix,
|
||||||
.ant-statistic-content-suffix {
|
.ant-statistic-content-suffix {
|
||||||
font-size: 15px !important;
|
font-size: 17px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-statistic-content-prefix {
|
.ant-statistic-content-prefix {
|
||||||
margin-inline-end: 6px !important;
|
margin-inline-end: 8px !important;
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-statistic-content-prefix .anticon {
|
.ant-statistic-content-prefix .anticon {
|
||||||
font-size: 16px !important;
|
font-size: 17px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-statistic-content-suffix {
|
||||||
|
font-size: 12px !important;
|
||||||
|
opacity: 0.55;
|
||||||
|
margin-inline-start: 4px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-statistic-title {
|
.ant-statistic-title {
|
||||||
font-size: 12px !important;
|
font-size: 11px !important;
|
||||||
margin-bottom: 4px !important;
|
margin-bottom: 6px !important;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.55;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark .ant-statistic-content {
|
body.dark .ant-statistic-content {
|
||||||
|
|
|
||||||
|
|
@ -29,44 +29,44 @@ const initialUltra = readBool(STORAGE_ULTRA, false);
|
||||||
applyDom(initialDark, initialUltra);
|
applyDom(initialDark, initialUltra);
|
||||||
|
|
||||||
const DARK_TOKENS = {
|
const DARK_TOKENS = {
|
||||||
colorBgBase: '#1e1e1e',
|
colorBgBase: '#1a1b1f',
|
||||||
colorBgLayout: '#1e1e1e',
|
colorBgLayout: '#1a1b1f',
|
||||||
colorBgContainer: '#252526',
|
colorBgContainer: '#23252b',
|
||||||
colorBgElevated: '#2d2d30',
|
colorBgElevated: '#2d2f37',
|
||||||
};
|
};
|
||||||
const ULTRA_DARK_TOKENS = {
|
const ULTRA_DARK_TOKENS = {
|
||||||
colorBgBase: '#000',
|
colorBgBase: '#000',
|
||||||
colorBgLayout: '#000',
|
colorBgLayout: '#000',
|
||||||
colorBgContainer: '#0a0a0a',
|
colorBgContainer: '#101013',
|
||||||
colorBgElevated: '#141414',
|
colorBgElevated: '#1a1a1e',
|
||||||
};
|
};
|
||||||
const DARK_LAYOUT_TOKENS = {
|
const DARK_LAYOUT_TOKENS = {
|
||||||
bodyBg: '#1e1e1e',
|
bodyBg: '#1a1b1f',
|
||||||
headerBg: '#252526',
|
headerBg: '#15161a',
|
||||||
headerColor: '#ffffff',
|
headerColor: '#ffffff',
|
||||||
footerBg: '#1e1e1e',
|
footerBg: '#1a1b1f',
|
||||||
siderBg: '#252526',
|
siderBg: '#15161a',
|
||||||
triggerBg: '#333333',
|
triggerBg: '#23252b',
|
||||||
triggerColor: '#ffffff',
|
triggerColor: '#ffffff',
|
||||||
};
|
};
|
||||||
const ULTRA_DARK_LAYOUT_TOKENS = {
|
const ULTRA_DARK_LAYOUT_TOKENS = {
|
||||||
bodyBg: '#000',
|
bodyBg: '#000',
|
||||||
headerBg: '#0a0a0a',
|
headerBg: '#050507',
|
||||||
headerColor: '#ffffff',
|
headerColor: '#ffffff',
|
||||||
footerBg: '#000',
|
footerBg: '#000',
|
||||||
siderBg: '#0a0a0a',
|
siderBg: '#050507',
|
||||||
triggerBg: '#141414',
|
triggerBg: '#1a1a1e',
|
||||||
triggerColor: '#ffffff',
|
triggerColor: '#ffffff',
|
||||||
};
|
};
|
||||||
const DARK_MENU_TOKENS = {
|
const DARK_MENU_TOKENS = {
|
||||||
darkItemBg: '#252526',
|
darkItemBg: '#15161a',
|
||||||
darkSubMenuItemBg: '#1e1e1e',
|
darkSubMenuItemBg: '#1a1b1f',
|
||||||
darkPopupBg: '#252526',
|
darkPopupBg: '#23252b',
|
||||||
};
|
};
|
||||||
const ULTRA_DARK_MENU_TOKENS = {
|
const ULTRA_DARK_MENU_TOKENS = {
|
||||||
darkItemBg: '#0a0a0a',
|
darkItemBg: '#050507',
|
||||||
darkSubMenuItemBg: '#000',
|
darkSubMenuItemBg: '#000',
|
||||||
darkPopupBg: '#0a0a0a',
|
darkPopupBg: '#101013',
|
||||||
};
|
};
|
||||||
|
|
||||||
export function buildAntdThemeConfig(isDark: boolean, isUltra: boolean): ThemeConfig {
|
export function buildAntdThemeConfig(isDark: boolean, isUltra: boolean): ThemeConfig {
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-docs-page.is-dark {
|
.api-docs-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-docs-page.is-dark.is-ultra {
|
.api-docs-page.is-dark.is-ultra {
|
||||||
--bg-page: #000;
|
--bg-page: #000;
|
||||||
--bg-card: #0a0a0a;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-docs-page .content-shell {
|
.api-docs-page .content-shell {
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@ import { sections as allSections } from './endpoints.js';
|
||||||
import EndpointSection from './EndpointSection';
|
import EndpointSection from './EndpointSection';
|
||||||
import type { Section } from './EndpointSection';
|
import type { Section } from './EndpointSection';
|
||||||
import CodeBlock from './CodeBlock';
|
import CodeBlock from './CodeBlock';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './ApiDocsPage.css';
|
import './ApiDocsPage.css';
|
||||||
|
|
||||||
const sectionIcons: Record<string, ComponentType<{ className?: string }>> = {
|
const sectionIcons: Record<string, ComponentType<{ className?: string }>> = {
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.clients-page.is-dark {
|
.clients-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clients-page.is-dark.is-ultra {
|
.clients-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clients-page .ant-layout,
|
.clients-page .ant-layout,
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,7 @@ import ClientFormModal from './ClientFormModal';
|
||||||
import ClientInfoModal from './ClientInfoModal';
|
import ClientInfoModal from './ClientInfoModal';
|
||||||
import ClientQrModal from './ClientQrModal';
|
import ClientQrModal from './ClientQrModal';
|
||||||
import ClientBulkAddModal from './ClientBulkAddModal';
|
import ClientBulkAddModal from './ClientBulkAddModal';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './ClientsPage.css';
|
import './ClientsPage.css';
|
||||||
|
|
||||||
const basePath = window.X_UI_BASE_PATH || '';
|
const basePath = window.X_UI_BASE_PATH || '';
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.inbounds-page.is-dark {
|
.inbounds-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inbounds-page.is-dark.is-ultra {
|
.inbounds-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inbounds-page .ant-layout,
|
.inbounds-page .ant-layout,
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@ import InboundList from './InboundList';
|
||||||
import InboundFormModal from './InboundFormModal';
|
import InboundFormModal from './InboundFormModal';
|
||||||
import InboundInfoModal from './InboundInfoModal';
|
import InboundInfoModal from './InboundInfoModal';
|
||||||
import QrCodeModal from './QrCodeModal';
|
import QrCodeModal from './QrCodeModal';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './InboundsPage.css';
|
import './InboundsPage.css';
|
||||||
|
|
||||||
type RowAction =
|
type RowAction =
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-page.is-dark {
|
.index-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-page.is-dark.is-ultra {
|
.index-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-page .ant-layout,
|
.index-page .ant-layout,
|
||||||
|
|
@ -40,9 +40,147 @@
|
||||||
min-height: calc(100vh - 120px);
|
min-height: calc(100vh - 120px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card {
|
||||||
|
border-color: rgba(255, 255, 255, 0.06);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 2px rgba(0, 0, 0, 0.4),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card {
|
||||||
|
border-color: rgba(255, 255, 255, 0.04);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 2px rgba(0, 0, 0, 0.6),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.025);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card.ant-card-hoverable:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: rgba(0, 0, 0, 0.10);
|
||||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card.ant-card-hoverable:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.12);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 24px rgba(0, 0, 0, 0.5),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card.ant-card-hoverable:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 24px rgba(0, 0, 0, 0.75),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-head {
|
||||||
|
min-height: 44px;
|
||||||
|
padding-inline: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-head-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-body {
|
||||||
|
padding: 18px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-body > .ant-row > .ant-col {
|
||||||
|
position: relative;
|
||||||
|
padding: 4px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
.index-page .ant-card .ant-card-body > .ant-row > .ant-col + .ant-col::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 10%;
|
||||||
|
bottom: 10%;
|
||||||
|
width: 1px;
|
||||||
|
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.10), transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-body > .ant-row > .ant-col + .ant-col::before {
|
||||||
|
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-head {
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-actions {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.06);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-actions > li {
|
||||||
|
border-inline-end-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-head {
|
||||||
|
border-bottom-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-actions {
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-actions > li {
|
||||||
|
border-inline-end-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-head {
|
||||||
|
border-bottom-color: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-actions {
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-actions > li {
|
||||||
|
border-inline-end-color: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
.index-page .action {
|
.index-page .action {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 8px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .action > span:not(.anticon):not(.tg-icon) {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .action:hover {
|
||||||
|
opacity: 0.75;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card-actions > li {
|
||||||
|
margin: 8px 0;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-page .action-update {
|
.index-page .action-update {
|
||||||
|
|
|
||||||
|
|
@ -51,6 +51,7 @@ import SystemHistoryModal from './SystemHistoryModal';
|
||||||
import XrayMetricsModal from './XrayMetricsModal';
|
import XrayMetricsModal from './XrayMetricsModal';
|
||||||
import XrayLogModal from './XrayLogModal';
|
import XrayLogModal from './XrayLogModal';
|
||||||
import VersionModal from './VersionModal';
|
import VersionModal from './VersionModal';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './IndexPage.css';
|
import './IndexPage.css';
|
||||||
|
|
||||||
export default function IndexPage() {
|
export default function IndexPage() {
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
.login-app.is-dark.is-ultra {
|
.login-app.is-dark.is-ultra {
|
||||||
--bg-page: #000;
|
--bg-page: #000;
|
||||||
--bg-card: rgba(15, 17, 28, 0.6);
|
--bg-card: rgba(15, 17, 28, 0.6);
|
||||||
--bg-card-solid: #0a0c14;
|
--bg-card-solid: #101013;
|
||||||
--color-border: rgba(255, 255, 255, 0.06);
|
--color-border: rgba(255, 255, 255, 0.06);
|
||||||
--blob-1: rgba(99, 102, 241, 0.30);
|
--blob-1: rgba(99, 102, 241, 0.30);
|
||||||
--blob-2: rgba(236, 72, 153, 0.22);
|
--blob-2: rgba(236, 72, 153, 0.22);
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes-page.is-dark {
|
.nodes-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes-page.is-dark.is-ultra {
|
.nodes-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nodes-page .ant-layout,
|
.nodes-page .ant-layout,
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ import CustomStatistic from '@/components/CustomStatistic';
|
||||||
import NodeList from './NodeList';
|
import NodeList from './NodeList';
|
||||||
import NodeFormModal from './NodeFormModal';
|
import NodeFormModal from './NodeFormModal';
|
||||||
import { setMessageInstance } from '@/utils/messageBus';
|
import { setMessageInstance } from '@/utils/messageBus';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './NodesPage.css';
|
import './NodesPage.css';
|
||||||
|
|
||||||
const basePath = window.X_UI_BASE_PATH || '';
|
const basePath = window.X_UI_BASE_PATH || '';
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-page.is-dark {
|
.settings-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-page.is-dark.is-ultra {
|
.settings-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-page .ant-layout,
|
.settings-page .ant-layout,
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@ import SecurityTab from './SecurityTab';
|
||||||
import TelegramTab from './TelegramTab';
|
import TelegramTab from './TelegramTab';
|
||||||
import SubscriptionGeneralTab from './SubscriptionGeneralTab';
|
import SubscriptionGeneralTab from './SubscriptionGeneralTab';
|
||||||
import SubscriptionFormatsTab from './SubscriptionFormatsTab';
|
import SubscriptionFormatsTab from './SubscriptionFormatsTab';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './SettingsPage.css';
|
import './SettingsPage.css';
|
||||||
|
|
||||||
interface ApiMsg {
|
interface ApiMsg {
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscription-page.is-dark {
|
.subscription-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscription-page.is-dark.is-ultra {
|
.subscription-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscription-page .ant-layout,
|
.subscription-page .ant-layout,
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.xray-page.is-dark {
|
.xray-page.is-dark {
|
||||||
--bg-page: #1e1e1e;
|
--bg-page: #1a1b1f;
|
||||||
--bg-card: #252526;
|
--bg-card: #23252b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xray-page.is-dark.is-ultra {
|
.xray-page.is-dark.is-ultra {
|
||||||
--bg-page: #050505;
|
--bg-page: #000;
|
||||||
--bg-card: #0c0e12;
|
--bg-card: #101013;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xray-page .ant-layout,
|
.xray-page .ant-layout,
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,7 @@ import BalancersTab from './BalancersTab';
|
||||||
import DnsTab from './DnsTab';
|
import DnsTab from './DnsTab';
|
||||||
import WarpModal from './WarpModal';
|
import WarpModal from './WarpModal';
|
||||||
import NordModal from './NordModal';
|
import NordModal from './NordModal';
|
||||||
|
import '@/styles/page-cards.css';
|
||||||
import './XrayPage.css';
|
import './XrayPage.css';
|
||||||
|
|
||||||
const TAB_KEYS = ['tpl-basic', 'tpl-routing', 'tpl-outbound', 'tpl-balancer', 'tpl-dns', 'tpl-advanced'];
|
const TAB_KEYS = ['tpl-basic', 'tpl-routing', 'tpl-outbound', 'tpl-balancer', 'tpl-dns', 'tpl-advanced'];
|
||||||
|
|
|
||||||
167
frontend/src/styles/page-cards.css
Normal file
167
frontend/src/styles/page-cards.css
Normal file
|
|
@ -0,0 +1,167 @@
|
||||||
|
.index-page .ant-card,
|
||||||
|
.clients-page .ant-card,
|
||||||
|
.inbounds-page .ant-card,
|
||||||
|
.xray-page .ant-card,
|
||||||
|
.settings-page .ant-card,
|
||||||
|
.nodes-page .ant-card,
|
||||||
|
.api-docs-page .ant-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card,
|
||||||
|
body.dark .clients-page .ant-card,
|
||||||
|
body.dark .inbounds-page .ant-card,
|
||||||
|
body.dark .xray-page .ant-card,
|
||||||
|
body.dark .settings-page .ant-card,
|
||||||
|
body.dark .nodes-page .ant-card,
|
||||||
|
body.dark .api-docs-page .ant-card {
|
||||||
|
border-color: rgba(255, 255, 255, 0.06);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 2px rgba(0, 0, 0, 0.4),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card,
|
||||||
|
html[data-theme='ultra-dark'] .clients-page .ant-card,
|
||||||
|
html[data-theme='ultra-dark'] .inbounds-page .ant-card,
|
||||||
|
html[data-theme='ultra-dark'] .xray-page .ant-card,
|
||||||
|
html[data-theme='ultra-dark'] .settings-page .ant-card,
|
||||||
|
html[data-theme='ultra-dark'] .nodes-page .ant-card,
|
||||||
|
html[data-theme='ultra-dark'] .api-docs-page .ant-card {
|
||||||
|
border-color: rgba(255, 255, 255, 0.04);
|
||||||
|
box-shadow:
|
||||||
|
0 1px 2px rgba(0, 0, 0, 0.6),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.025);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
.clients-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
.inbounds-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
.xray-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
.settings-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
.nodes-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
.api-docs-page .ant-card.ant-card-hoverable:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: rgba(0, 0, 0, 0.10);
|
||||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
body.dark .clients-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
body.dark .inbounds-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
body.dark .xray-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
body.dark .settings-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
body.dark .nodes-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
body.dark .api-docs-page .ant-card.ant-card-hoverable:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.12);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 24px rgba(0, 0, 0, 0.5),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
html[data-theme='ultra-dark'] .clients-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
html[data-theme='ultra-dark'] .inbounds-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
html[data-theme='ultra-dark'] .xray-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
html[data-theme='ultra-dark'] .settings-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
html[data-theme='ultra-dark'] .nodes-page .ant-card.ant-card-hoverable:hover,
|
||||||
|
html[data-theme='ultra-dark'] .api-docs-page .ant-card.ant-card-hoverable:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 24px rgba(0, 0, 0, 0.75),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-head,
|
||||||
|
.clients-page .ant-card .ant-card-head,
|
||||||
|
.inbounds-page .ant-card .ant-card-head,
|
||||||
|
.xray-page .ant-card .ant-card-head,
|
||||||
|
.settings-page .ant-card .ant-card-head,
|
||||||
|
.nodes-page .ant-card .ant-card-head,
|
||||||
|
.api-docs-page .ant-card .ant-card-head {
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-actions,
|
||||||
|
.clients-page .ant-card .ant-card-actions,
|
||||||
|
.inbounds-page .ant-card .ant-card-actions,
|
||||||
|
.xray-page .ant-card .ant-card-actions,
|
||||||
|
.settings-page .ant-card .ant-card-actions,
|
||||||
|
.nodes-page .ant-card .ant-card-actions,
|
||||||
|
.api-docs-page .ant-card .ant-card-actions {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.06);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page .ant-card .ant-card-actions > li,
|
||||||
|
.clients-page .ant-card .ant-card-actions > li,
|
||||||
|
.inbounds-page .ant-card .ant-card-actions > li,
|
||||||
|
.xray-page .ant-card .ant-card-actions > li,
|
||||||
|
.settings-page .ant-card .ant-card-actions > li,
|
||||||
|
.nodes-page .ant-card .ant-card-actions > li,
|
||||||
|
.api-docs-page .ant-card .ant-card-actions > li {
|
||||||
|
border-inline-end-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-head,
|
||||||
|
body.dark .clients-page .ant-card .ant-card-head,
|
||||||
|
body.dark .inbounds-page .ant-card .ant-card-head,
|
||||||
|
body.dark .xray-page .ant-card .ant-card-head,
|
||||||
|
body.dark .settings-page .ant-card .ant-card-head,
|
||||||
|
body.dark .nodes-page .ant-card .ant-card-head,
|
||||||
|
body.dark .api-docs-page .ant-card .ant-card-head {
|
||||||
|
border-bottom-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-actions,
|
||||||
|
body.dark .clients-page .ant-card .ant-card-actions,
|
||||||
|
body.dark .inbounds-page .ant-card .ant-card-actions,
|
||||||
|
body.dark .xray-page .ant-card .ant-card-actions,
|
||||||
|
body.dark .settings-page .ant-card .ant-card-actions,
|
||||||
|
body.dark .nodes-page .ant-card .ant-card-actions,
|
||||||
|
body.dark .api-docs-page .ant-card .ant-card-actions {
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .index-page .ant-card .ant-card-actions > li,
|
||||||
|
body.dark .clients-page .ant-card .ant-card-actions > li,
|
||||||
|
body.dark .inbounds-page .ant-card .ant-card-actions > li,
|
||||||
|
body.dark .xray-page .ant-card .ant-card-actions > li,
|
||||||
|
body.dark .settings-page .ant-card .ant-card-actions > li,
|
||||||
|
body.dark .nodes-page .ant-card .ant-card-actions > li,
|
||||||
|
body.dark .api-docs-page .ant-card .ant-card-actions > li {
|
||||||
|
border-inline-end-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-head,
|
||||||
|
html[data-theme='ultra-dark'] .clients-page .ant-card .ant-card-head,
|
||||||
|
html[data-theme='ultra-dark'] .inbounds-page .ant-card .ant-card-head,
|
||||||
|
html[data-theme='ultra-dark'] .xray-page .ant-card .ant-card-head,
|
||||||
|
html[data-theme='ultra-dark'] .settings-page .ant-card .ant-card-head,
|
||||||
|
html[data-theme='ultra-dark'] .nodes-page .ant-card .ant-card-head,
|
||||||
|
html[data-theme='ultra-dark'] .api-docs-page .ant-card .ant-card-head {
|
||||||
|
border-bottom-color: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-actions,
|
||||||
|
html[data-theme='ultra-dark'] .clients-page .ant-card .ant-card-actions,
|
||||||
|
html[data-theme='ultra-dark'] .inbounds-page .ant-card .ant-card-actions,
|
||||||
|
html[data-theme='ultra-dark'] .xray-page .ant-card .ant-card-actions,
|
||||||
|
html[data-theme='ultra-dark'] .settings-page .ant-card .ant-card-actions,
|
||||||
|
html[data-theme='ultra-dark'] .nodes-page .ant-card .ant-card-actions,
|
||||||
|
html[data-theme='ultra-dark'] .api-docs-page .ant-card .ant-card-actions {
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .index-page .ant-card .ant-card-actions > li,
|
||||||
|
html[data-theme='ultra-dark'] .clients-page .ant-card .ant-card-actions > li,
|
||||||
|
html[data-theme='ultra-dark'] .inbounds-page .ant-card .ant-card-actions > li,
|
||||||
|
html[data-theme='ultra-dark'] .xray-page .ant-card .ant-card-actions > li,
|
||||||
|
html[data-theme='ultra-dark'] .settings-page .ant-card .ant-card-actions > li,
|
||||||
|
html[data-theme='ultra-dark'] .nodes-page .ant-card .ant-card-actions > li,
|
||||||
|
html[data-theme='ultra-dark'] .api-docs-page .ant-card .ant-card-actions > li {
|
||||||
|
border-inline-end-color: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue