:root { color-scheme: light; }
html.xarr-theme-dark { color-scheme: dark; background: #0f172a; }
html.xarr-theme-dark body,
html.xarr-theme-dark #app { background: #0f172a !important; color: #dbe4f0 !important; }
/* Theme toggle */
.xarr-theme-toggle {
display: none;
width: 52px; height: 32px; min-width: 52px; padding: 4px; border: 0; border-radius: 999px; font-size: 12px;
line-height: 1; text-align: center; cursor: pointer; background: transparent; color: inherit;
appearance: none; -webkit-appearance: none;
}
.xarr-theme-toggle--nav {
position: relative; right: auto; bottom: auto; z-index: 1; margin-left: auto; margin-right: 12px;
display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
flex: 0 0 auto; align-self: center;
}
.xarr-theme-toggle__track {
position: relative; display: block; width: 44px; height: 24px; border-radius: 999px;
background: #e8edf5; border: 1px solid #cbd5e1; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10);
transition: background-color .18s ease, border-color .18s ease;
}
.xarr-theme-toggle__thumb {
position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
background: #ffffff; box-shadow: 0 2px 6px rgba(15, 23, 42, .22);
transition: transform .18s ease, background-color .18s ease;
}
.xarr-theme-toggle__sun,
.xarr-theme-toggle__moon {
display: none !important;
}
.xarr-theme-toggle__sun {
left: 7px; border-radius: 50%; background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, .18);
}
.xarr-theme-toggle__moon {
right: 8px; border-radius: 50%; background: #64748b;
}
.xarr-theme-toggle__moon::after {
content: none !important;
}
.xarr-theme-toggle.is-dark .xarr-theme-toggle__track,
html.xarr-theme-dark .xarr-theme-toggle .xarr-theme-toggle__track {
background: #1e293b; border-color: #334155;
}
.xarr-theme-toggle.is-dark .xarr-theme-toggle__thumb,
html.xarr-theme-dark .xarr-theme-toggle .xarr-theme-toggle__thumb {
transform: translateX(20px); background: #e2e8f0;
}
.xarr-theme-toggle.is-dark .xarr-theme-toggle__sun,
html.xarr-theme-dark .xarr-theme-toggle .xarr-theme-toggle__sun { opacity: 0; box-shadow: none; }
.xarr-theme-toggle:not(.is-dark) .xarr-theme-toggle__moon,
html:not(.xarr-theme-dark) .xarr-theme-toggle .xarr-theme-toggle__moon { opacity: 0; }
.xarr-theme-toggle.is-dark .xarr-theme-toggle__moon,
html.xarr-theme-dark .xarr-theme-toggle .xarr-theme-toggle__moon { opacity: 1; background: #93c5fd; }
.xarr-theme-toggle.is-dark .xarr-theme-toggle__moon::after,
html.xarr-theme-dark .xarr-theme-toggle .xarr-theme-toggle__moon::after { background: #1e293b; }
.xarr-theme-toggle:focus-visible {
outline: 2px solid #3b82f6; outline-offset: 2px;
}
/* Layout */
html.xarr-theme-dark .el-container,
html.xarr-theme-dark .el-main,
html.xarr-theme-dark .el-aside,
html.xarr-theme-dark .el-header,
html.xarr-theme-dark .main,
html.xarr-theme-dark .content,
html.xarr-theme-dark .page,
html.xarr-theme-dark .user-home,
html.xarr-theme-dark .xarr-sub-page-root,
html.xarr-theme-dark .polling-root,
html.xarr-theme-dark .doc-root,
html.xarr-theme-dark .doc-container,
html.xarr-theme-dark .doc-content {
background: #0f172a !important; color: #dbe4f0 !important;
}
html.xarr-theme-dark header,
html.xarr-theme-dark aside,
html.xarr-theme-dark nav,
html.xarr-theme-dark .header,
html.xarr-theme-dark .topbar,
html.xarr-theme-dark .navbar,
html.xarr-theme-dark .sidebar,
html.xarr-theme-dark .doc-header,
html.xarr-theme-dark .doc-left-menu-main,
html.xarr-theme-dark .doc-left-menu-content {
background: #111827 !important; color: #e5edf7 !important; border-color: #263244 !important;
}
/* Element UI surfaces */
html.xarr-theme-dark .el-card,
html.xarr-theme-dark .el-card__header,
html.xarr-theme-dark .el-card__body,
html.xarr-theme-dark .el-dialog,
html.xarr-theme-dark .el-dialog__header,
html.xarr-theme-dark .el-dialog__body,
html.xarr-theme-dark .el-dialog__footer,
html.xarr-theme-dark .el-drawer,
html.xarr-theme-dark .el-drawer__header,
html.xarr-theme-dark .el-popover,
html.xarr-theme-dark .el-dropdown-menu,
html.xarr-theme-dark .el-message-box,
html.xarr-theme-dark .el-tabs,
html.xarr-theme-dark .el-tabs__header,
html.xarr-theme-dark .el-tabs__content,
html.xarr-theme-dark .el-collapse,
html.xarr-theme-dark .el-collapse-item__header,
html.xarr-theme-dark .el-collapse-item__wrap,
html.xarr-theme-dark .el-alert {
background: #111827 !important; color: #dbe4f0 !important; border-color: #263244 !important;
}
html.xarr-theme-dark .el-menu,
html.xarr-theme-dark .el-submenu .el-menu { background: #111827 !important; border-color: #263244 !important; }
html.xarr-theme-dark .el-menu-item,
html.xarr-theme-dark .el-submenu__title { background: transparent !important; color: #dbe4f0 !important; }
html.xarr-theme-dark .el-menu-item:hover,
html.xarr-theme-dark .el-submenu__title:hover { background: #1f2937 !important; color: #fff !important; }
html.xarr-theme-dark .el-menu-item.is-active,
html.xarr-theme-dark .router-link-active,
html.xarr-theme-dark .router-link-exact-active { background: #223044 !important; color: #fff !important; }
/* Tables */
html.xarr-theme-dark .el-table,
html.xarr-theme-dark .el-table tr,
html.xarr-theme-dark .el-table td,
html.xarr-theme-dark .el-table th,
html.xarr-theme-dark .el-table__body-wrapper,
html.xarr-theme-dark .el-table__expanded-cell {
background: #111827 !important; color: #dbe4f0 !important; border-color: #263244 !important;
}
html.xarr-theme-dark .el-table th.el-table__cell,
html.xarr-theme-dark .el-table__header-wrapper { background: #172033 !important; color: #f8fafc !important; }
html.xarr-theme-dark .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background: #1f2937 !important; }
html.xarr-theme-dark .el-table::before,
html.xarr-theme-dark .el-table--border::after { background: #263244 !important; }
/* Forms */
html.xarr-theme-dark .el-form,
html.xarr-theme-dark .el-form-item { background: transparent !important; color: #dbe4f0 !important; }
html.xarr-theme-dark .el-form-item__label { color: #94a3b8 !important; background: transparent !important; }
html.xarr-theme-dark .el-input__inner,
html.xarr-theme-dark .el-textarea__inner,
html.xarr-theme-dark .el-select-dropdown,
html.xarr-theme-dark .el-date-editor,
html.xarr-theme-dark .el-range-input,
html.xarr-theme-dark .el-input-number__decrease,
html.xarr-theme-dark .el-input-number__increase {
background: #0b1220 !important; color: #e2e8f0 !important; border-color: #334155 !important;
}
html.xarr-theme-dark .el-input__inner::placeholder,
html.xarr-theme-dark .el-textarea__inner::placeholder { color: #7b8798 !important; }
html.xarr-theme-dark .el-input.is-disabled .el-input__inner,
html.xarr-theme-dark .el-textarea.is-disabled .el-textarea__inner { background: #111827 !important; color: #64748b !important; }
/* Buttons */
html.xarr-theme-dark .el-button--default,
html.xarr-theme-dark .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
background: #eef5ff !important; border-color: #cfe3ff !important; color: #2563eb !important;
}
html.xarr-theme-dark .el-button--primary { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; }
/* Native Element UI tags */
html.xarr-theme-dark .el-tag { font-weight: 500 !important; box-shadow: none !important; }
html.xarr-theme-dark .el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) { background:#ecf5ff !important; border-color:#d9ecff !important; color:#409eff !important; }
html.xarr-theme-dark .el-tag--success { background:#f0f9eb !important; border-color:#e1f3d8 !important; color:#67c23a !important; }
html.xarr-theme-dark .el-tag--warning { background:#fdf6ec !important; border-color:#faecd8 !important; color:#e6a23c !important; }
html.xarr-theme-dark .el-tag--danger { background:#fef0f0 !important; border-color:#fde2e2 !important; color:#f56c6c !important; }
html.xarr-theme-dark .el-tag--info { background:#f4f4f5 !important; border-color:#e9e9eb !important; color:#909399 !important; }
html.xarr-theme-dark .el-tag--dark:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) { background:#409eff !important; border-color:#409eff !important; color:#fff !important; }
html.xarr-theme-dark .el-tag--success.el-tag--dark { background:#67c23a !important; border-color:#67c23a !important; color:#fff !important; }
html.xarr-theme-dark .el-tag--warning.el-tag--dark { background:#e6a23c !important; border-color:#e6a23c !important; color:#fff !important; }
html.xarr-theme-dark .el-tag--danger.el-tag--dark { background:#f56c6c !important; border-color:#f56c6c !important; color:#fff !important; }
html.xarr-theme-dark .el-tag--info.el-tag--dark { background:#909399 !important; border-color:#909399 !important; color:#fff !important; }
/* User home known classes */
html.xarr-theme-dark .user-home .stats-card,
html.xarr-theme-dark .user-home .quick-menu-card,
html.xarr-theme-dark .user-home .notice-list,
html.xarr-theme-dark .user-home .static-group,
html.xarr-theme-dark .user-home .x-data-card {
background: #111827 !important; border: 1px solid #263244 !important; color: #dbe4f0 !important; box-shadow: none !important;
}
html.xarr-theme-dark .user-home .stats-content,
html.xarr-theme-dark .user-home .stats-info,
html.xarr-theme-dark .user-home .stats-value,
html.xarr-theme-dark .user-home .stats-label,
html.xarr-theme-dark .user-home .menu-item,
html.xarr-theme-dark .user-home .menu-label,
html.xarr-theme-dark .user-home .x-data-card-title,
html.xarr-theme-dark .user-home .x-data-value,
html.xarr-theme-dark .user-home .item-title,
html.xarr-theme-dark .user-home .item-value,
html.xarr-theme-dark .user-home .group-title {
background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
html.xarr-theme-dark .user-home .stats-value,
html.xarr-theme-dark .user-home .x-data-value,
html.xarr-theme-dark .user-home .item-value { color: #f8fafc !important; }
html.xarr-theme-dark .user-home .stats-label,
html.xarr-theme-dark .user-home .menu-label,
html.xarr-theme-dark .user-home .x-data-card-title,
html.xarr-theme-dark .user-home .item-title { color: #dbe4f0 !important; }
html.xarr-theme-dark .user-home .stats-icon { background: rgba(59,130,246,.10) !important; border: 1px solid rgba(96,165,250,.22) !important; box-shadow: none !important; }
html.xarr-theme-dark .user-home .stats-icon i { color: #93c5fd !important; background: transparent !important; }
/* User sub pages: channel, finance, api, account */
html.xarr-theme-dark .polling-root,
html.xarr-theme-dark .polling-cards-container,
html.xarr-theme-dark .polling-card,
html.xarr-theme-dark .user-add,
html.xarr-theme-dark .doc-content,
html.xarr-theme-dark .markdown-body,
html.xarr-theme-dark .xarr-markdown,
html.xarr-theme-dark .xarr-sub-page-root {
background: #0f172a !important; color: #dbe4f0 !important; border-color: #263244 !important;
}
html.xarr-theme-dark .polling-card,
html.xarr-theme-dark .doc-content,
html.xarr-theme-dark .markdown-body,
html.xarr-theme-dark .xarr-markdown {
background: #111827 !important; border-color: #263244 !important;
}
html.xarr-theme-dark .polling-card .card-header,
html.xarr-theme-dark .polling-card .card-content,
html.xarr-theme-dark .polling-card .flex,
html.xarr-theme-dark .polling-card span,
html.xarr-theme-dark .user-add span,
html.xarr-theme-dark .doc-content span,
html.xarr-theme-dark .markdown-body span {
background: transparent !important; box-shadow: none !important;
}
/* Text utilities used by bundled Tailwind-like classes */
html.xarr-theme-dark .text-gray-800,
html.xarr-theme-dark .text-gray-700,
html.xarr-theme-dark .text-gray-600 { color: #dbe4f0 !important; }
html.xarr-theme-dark .text-gray-500,
html.xarr-theme-dark .text-gray-400 { color: #94a3b8 !important; }
html.xarr-theme-dark .border-gray-200,
html.xarr-theme-dark .border-gray-100 { border-color: #334155 !important; }
html.xarr-theme-dark .bg-gray-50,
html.xarr-theme-dark .bg-gray-100 { background-color: #1e293b !important; }
html.xarr-theme-dark .hover\:bg-gray-50:hover,
html.xarr-theme-dark .hover\:bg-gray-100:hover { background-color: #1f2937 !important; }
/* API docs/code */
html.xarr-theme-dark pre,
html.xarr-theme-dark code,
html.xarr-theme-dark .hljs { background: #0b1220 !important; color: #dbe4f0 !important; border-color: #263244 !important; }
/* Notifications */
html.xarr-theme-dark .el-notification,
html.xarr-theme-dark .el-message,
html.xarr-theme-dark .el-picker-panel,
html.xarr-theme-dark .el-cascader__dropdown { background:#172033 !important; color:#dbe4f0 !important; border-color:#334155 !important; }
html.xarr-theme-dark .el-notification__title,
html.xarr-theme-dark .el-notification__content,
html.xarr-theme-dark .el-message__content { color:#dbe4f0 !important; }
/* Scrollbars */
html.xarr-theme-dark * { scrollbar-color: #475569 #111827; }
html.xarr-theme-dark ::-webkit-scrollbar-track { background: #111827 !important; }
html.xarr-theme-dark ::-webkit-scrollbar-thumb { background: #475569 !important; border-color: #111827 !important; }
/* Narrow layout/nav background patch only */
html.xarr-theme-dark body,
html.xarr-theme-dark #app,
html.xarr-theme-dark #app > div {
background: #0f172a !important;
}
html.xarr-theme-dark .el-container,
html.xarr-theme-dark .el-main,
html.xarr-theme-dark .el-footer,
html.xarr-theme-dark .page-wrapper,
html.xarr-theme-dark .app-wrapper,
html.xarr-theme-dark .main-wrapper,
html.xarr-theme-dark .main-container,
html.xarr-theme-dark .layout-wrapper {
background: #0f172a !important;
}
html.xarr-theme-dark .el-header,
html.xarr-theme-dark .el-aside,
html.xarr-theme-dark .sidebar-container,
html.xarr-theme-dark .side-menu,
html.xarr-theme-dark .sidebar,
html.xarr-theme-dark .navbar,
html.xarr-theme-dark .topbar,
html.xarr-theme-dark .app-header,
html.xarr-theme-dark .main-header,
html.xarr-theme-dark .layout-header {
background: #111827 !important;
border-color: #263244 !important;
color: #e5edf7 !important;
}
html.xarr-theme-dark .el-header *,
html.xarr-theme-dark .navbar *,
html.xarr-theme-dark .topbar *,
html.xarr-theme-dark .app-header *,
html.xarr-theme-dark .main-header *,
html.xarr-theme-dark .layout-header * {
color: inherit;
}
/* Admin outer chrome only: top white bar and page gutter */
html.xarr-theme-dark,
html.xarr-theme-dark body,
html.xarr-theme-dark #app,
html.xarr-theme-dark #app > div,
html.xarr-theme-dark #app > div > div {
background-color: #0f172a !important;
}
html.xarr-theme-dark body > div,
html.xarr-theme-dark #app > div > div:first-child,
html.xarr-theme-dark #app > div > header,
html.xarr-theme-dark #app > div > aside,
html.xarr-theme-dark #app > div > nav {
background-color: #111827 !important;
border-color: #263244 !important;
color: #e5edf7 !important;
}
html.xarr-theme-dark #app > div > div:first-child *,
html.xarr-theme-dark #app > div > header *,
html.xarr-theme-dark #app > div > nav * {
color: inherit;
}
/* White background utility fallback for admin/user chrome */
html.xarr-theme-dark .bg-white,
html.xarr-theme-dark .bg-gray-50,
html.xarr-theme-dark .bg-gray-100,
html.xarr-theme-dark .bg-gray-200,
html.xarr-theme-dark [style*="background: white"],
html.xarr-theme-dark [style*="background:white"],
html.xarr-theme-dark [style*="background-color: white"],
html.xarr-theme-dark [style*="background-color:white"],
html.xarr-theme-dark [style*="background: #fff"],
html.xarr-theme-dark [style*="background:#fff"],
html.xarr-theme-dark [style*="background-color: #fff"],
html.xarr-theme-dark [style*="background-color:#fff"],
html.xarr-theme-dark [style*="background: rgb(255, 255, 255)"],
html.xarr-theme-dark [style*="background-color: rgb(255, 255, 255)"] {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
}
html.xarr-theme-dark .bg-slate-50,
html.xarr-theme-dark .bg-slate-100,
html.xarr-theme-dark .bg-blue-50 {
background: #111827 !important;
background-color: #111827 !important;
}
html.xarr-theme-dark .text-black,
html.xarr-theme-dark .text-gray-900,
html.xarr-theme-dark .text-slate-900 {
color: #e5edf7 !important;
}
/* Runtime-detected white shell containers */
html.xarr-theme-dark .xarr-dark-shell {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #e5edf7 !important;
}
html.xarr-theme-dark .xarr-dark-page-shell {
background: #0f172a !important;
background-color: #0f172a !important;
}
/* Runtime-detected large workspace background */
html.xarr-theme-dark .xarr-dark-workspace {
background: #0f172a !important;
background-color: #0f172a !important;
}
/* Point-detected workspace shell */
html.xarr-theme-dark .xarr-point-workspace {
background: #0f172a !important;
background-color: #0f172a !important;
}
/* Admin/user workspace shell from the active background theme */
html.xarr-theme-dark .user-content,
html.xarr-theme-dark .user-container-v2 {
background: #0f172a !important;
background-color: #0f172a !important;
}
/* User account/API/password pages */
html.xarr-theme-dark .api-root,
html.xarr-theme-dark .order-root,
html.xarr-theme-dark .reset-pwd-page {
background: transparent !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .api-root .copy-box,
html.xarr-theme-dark .api-root .operation-card,
html.xarr-theme-dark .api-root .bg-white,
html.xarr-theme-dark .api-root .bg-orange-50,
html.xarr-theme-dark .api-root .bg-green-50,
html.xarr-theme-dark .api-root .bg-blue-50,
html.xarr-theme-dark .reset-pwd-page .verify-method,
html.xarr-theme-dark .order-root .table-search {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .api-root .bg-orange-100,
html.xarr-theme-dark .api-root .bg-green-100,
html.xarr-theme-dark .api-root .bg-blue-100,
html.xarr-theme-dark .api-root .w-8.h-8,
html.xarr-theme-dark .api-root .w-6.h-6 {
background: #1e293b !important;
background-color: #1e293b !important;
}
html.xarr-theme-dark .api-root .text-gray-700,
html.xarr-theme-dark .api-root .text-gray-600,
html.xarr-theme-dark .api-root .text-orange-800,
html.xarr-theme-dark .api-root .text-orange-700,
html.xarr-theme-dark .api-root .text-green-800,
html.xarr-theme-dark .api-root .text-green-700,
html.xarr-theme-dark .reset-pwd-page .method-title,
html.xarr-theme-dark .reset-pwd-page .el-radio__label,
html.xarr-theme-dark .order-root .el-form-item__label {
color: #dbe4f0 !important;
}
html.xarr-theme-dark .api-root .text-gray-500,
html.xarr-theme-dark .api-root .text-gray-400,
html.xarr-theme-dark .reset-pwd-page .strength-label {
color: #94a3b8 !important;
}
html.xarr-theme-dark .api-root .border,
html.xarr-theme-dark .api-root .border-orange-100,
html.xarr-theme-dark .api-root .border-green-100,
html.xarr-theme-dark .api-root .border-gray-100,
html.xarr-theme-dark .api-root .border-gray-200,
html.xarr-theme-dark .order-root .border-gray-100 {
border-color: #263244 !important;
}
html.xarr-theme-dark .api-root .group:hover .group-hover\:opacity-100,
html.xarr-theme-dark .api-root .group-hover\:opacity-100 {
background-color: rgba(30, 41, 59, .55) !important;
}
/* User finance center and profile detail panes */
html.xarr-theme-dark .recharge-card .amount-item,
html.xarr-theme-dark .recharge-card .pay-type-item,
html.xarr-theme-dark .user-info .safe-setting-scene,
html.xarr-theme-dark .user-info .event-item {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .recharge-card .amount-item.active,
html.xarr-theme-dark .recharge-card .pay-type-item.chose,
html.xarr-theme-dark .user-info .event-item:hover {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #3b82f6 !important;
}
html.xarr-theme-dark .recharge-card .amount-item .amount,
html.xarr-theme-dark .recharge-card .amount-item .currency,
html.xarr-theme-dark .recharge-card .pay-type-item,
html.xarr-theme-dark .user-info .safe-setting-scene .scene-header,
html.xarr-theme-dark .user-info .safe-setting-scene .scene-description,
html.xarr-theme-dark .user-info .event-item .event-label {
color: #dbe4f0 !important;
}
html.xarr-theme-dark .user-info .icon-email.el-avatar,
html.xarr-theme-dark .user-info .icon-mfa.el-avatar,
html.xarr-theme-dark .user-info .el-checkbox__inner {
background: #0b1220 !important;
background-color: #0b1220 !important;
border-color: #475569 !important;
}
html.xarr-theme-dark .user-info .el-checkbox.is-checked .el-checkbox__inner {
background: #409eff !important;
background-color: #409eff !important;
border-color: #409eff !important;
}
html.xarr-theme-dark .user-info .el-divider__text {
background: #111827 !important;
background-color: #111827 !important;
color: #94a3b8 !important;
}
html.xarr-theme-dark .user-info .el-loading-mask {
background: rgba(15, 23, 42, .72) !important;
background-color: rgba(15, 23, 42, .72) !important;
}
html.xarr-theme-dark .user-content-v2 .el-button--text,
html.xarr-theme-dark .user-content-v2 .el-avatar.\!bg-gray-100,
html.xarr-theme-dark .user-content-v2 .el-avatar.bg-gray-100 {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
}
html.xarr-theme-dark .user-container-v2 .el-button--text {
background: transparent !important;
background-color: transparent !important;
}
html.xarr-theme-dark .user-info .el-input-group__prepend {
background: #0b1220 !important;
background-color: #0b1220 !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
html.xarr-theme-dark .el-button.el-button--text {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
/* Active user/admin header and sidebar components */
html.xarr-theme-dark .user-header,
html.xarr-theme-dark .user-header .header-content,
html.xarr-theme-dark .user-header .header-mid,
html.xarr-theme-dark .header-l,
html.xarr-theme-dark .header-l .header-logo-container {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #e5edf7 !important;
}
html.xarr-theme-dark .user-header {
border-bottom: 1px solid #263244 !important;
}
html.xarr-theme-dark .header-l .web-title,
html.xarr-theme-dark .header-l .header-logo-container .web-title,
html.xarr-theme-dark .user-header .header-actions .el-button,
html.xarr-theme-dark .user-header .header-actions .el-button i {
color: #e5edf7 !important;
}
html.xarr-theme-dark .user-header .header-actions .el-button,
html.xarr-theme-dark .user-header .header-actions .el-button.el-button--text,
html.xarr-theme-dark .user-header .header-actions .el-button[style] {
background: #172033 !important;
background-color: #172033 !important;
border-color: #263244 !important;
color: #e5edf7 !important;
box-shadow: none !important;
}
html.xarr-theme-dark .user-header .header-actions .el-button:hover,
html.xarr-theme-dark .user-header .header-actions .el-button:focus {
background: #1f2937 !important;
background-color: #1f2937 !important;
border-color: #334155 !important;
color: #ffffff !important;
}
html.xarr-theme-dark .user-menu-root,
html.xarr-theme-dark .user-menus-container,
html.xarr-theme-dark .user-menus,
html.xarr-theme-dark .user-menus .el-menu,
html.xarr-theme-dark .user-menus .el-menu--inline,
html.xarr-theme-dark .user-menu-vertical,
html.xarr-theme-dark .user-menu-vertical-collapse {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .user-menus {
border-right: 1px solid #263244 !important;
}
html.xarr-theme-dark .user-menus .el-menu-item,
html.xarr-theme-dark .user-menus .el-submenu__title,
html.xarr-theme-dark .el-menu--popup .el-menu-item,
html.xarr-theme-dark .el-menu--popup .el-submenu__title {
background: transparent !important;
background-color: transparent !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .user-menus .el-menu-item i,
html.xarr-theme-dark .user-menus .el-submenu__title i,
html.xarr-theme-dark .user-menus .el-submenu__title span,
html.xarr-theme-dark .el-menu--popup .el-menu-item i,
html.xarr-theme-dark .el-menu--popup .el-submenu__title i,
html.xarr-theme-dark .el-menu--popup .el-submenu__title span {
color: #94a3b8 !important;
}
html.xarr-theme-dark .user-menus .el-menu-item:hover,
html.xarr-theme-dark .user-menus .el-submenu__title:hover,
html.xarr-theme-dark .el-menu--popup .el-menu-item:hover,
html.xarr-theme-dark .el-menu--popup .el-submenu__title:hover {
background: #1f2937 !important;
background-color: #1f2937 !important;
color: #ffffff !important;
}
html.xarr-theme-dark .user-menus .el-menu-item.is-active,
html.xarr-theme-dark .user-menus .el-submenu.is-active > .el-submenu__title,
html.xarr-theme-dark .el-menu--popup .el-menu-item.is-active {
background: #223044 !important;
background-color: #223044 !important;
color: #ffffff !important;
}
html.xarr-theme-dark .el-menu--popup {
background: #111827 !important;
background-color: #111827 !important;
border: 1px solid #263244 !important;
}
html.xarr-theme-dark .el-message-box__title,
html.xarr-theme-dark .el-message-box__content,
html.xarr-theme-dark .el-message-box__message,
html.xarr-theme-dark .el-message-box__input {
color: #dbe4f0 !important;
}
/* Header icon buttons are scoped components and can carry inline colors. */
html.xarr-theme-dark .user-header[data-v-28c5887c] .header-actions[data-v-28c5887c] > button.el-button.el-button--text[data-v-28c5887c],
html.xarr-theme-dark .user-header[data-v-015ef76a] .header-actions[data-v-015ef76a] > button.el-button.el-button--text[data-v-015ef76a],
html[data-xarr-theme="dark"] .user-header[data-v-28c5887c] .header-actions[data-v-28c5887c] > button.el-button.el-button--text[data-v-28c5887c],
html[data-xarr-theme="dark"] .user-header[data-v-015ef76a] .header-actions[data-v-015ef76a] > button.el-button.el-button--text[data-v-015ef76a] {
background: #172033 !important;
background-color: #172033 !important;
border: 1px solid #263244 !important;
color: #e5edf7 !important;
box-shadow: none !important;
}
html.xarr-theme-dark .user-header[data-v-28c5887c] .header-actions[data-v-28c5887c] > button.el-button.el-button--text[data-v-28c5887c] i,
html.xarr-theme-dark .user-header[data-v-015ef76a] .header-actions[data-v-015ef76a] > button.el-button.el-button--text[data-v-015ef76a] i,
html[data-xarr-theme="dark"] .user-header[data-v-28c5887c] .header-actions[data-v-28c5887c] > button.el-button.el-button--text[data-v-28c5887c] i,
html[data-xarr-theme="dark"] .user-header[data-v-015ef76a] .header-actions[data-v-015ef76a] > button.el-button.el-button--text[data-v-015ef76a] i {
color: #e5edf7 !important;
}
html.xarr-theme-dark .user-header .header-actions > button.xarr-dark-header-action,
html[data-xarr-theme="dark"] .user-header .header-actions > button.xarr-dark-header-action {
background: #172033 !important;
background-color: #172033 !important;
border: 1px solid #263244 !important;
color: #e5edf7 !important;
box-shadow: none !important;
}
html.xarr-theme-dark .user-header .header-actions > button.xarr-dark-header-action i,
html[data-xarr-theme="dark"] .user-header .header-actions > button.xarr-dark-header-action i {
color: #e5edf7 !important;
}
/* Search prompt glass layer */
html.xarr-theme-dark .v-modal,
html[data-xarr-theme="dark"] .v-modal {
opacity: 1 !important;
background: rgba(2, 6, 23, .24) !important;
background-color: rgba(2, 6, 23, .24) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html.xarr-theme-dark body > .el-message-box__wrapper,
html[data-xarr-theme="dark"] body > .el-message-box__wrapper,
html.xarr-theme-dark .el-message-box__wrapper,
html[data-xarr-theme="dark"] .el-message-box__wrapper {
background: transparent !important;
background-color: transparent !important;
}
html.xarr-theme-dark .el-message-box,
html[data-xarr-theme="dark"] .el-message-box {
background: rgba(17, 24, 39, .86) !important;
background-color: rgba(17, 24, 39, .86) !important;
border: 1px solid rgba(148, 163, 184, .24) !important;
box-shadow: 0 24px 72px rgba(0, 0, 0, .42) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
html.xarr-theme-dark .el-message-box__header,
html.xarr-theme-dark .el-message-box__content,
html.xarr-theme-dark .el-message-box__btns,
html[data-xarr-theme="dark"] .el-message-box__header,
html[data-xarr-theme="dark"] .el-message-box__content,
html[data-xarr-theme="dark"] .el-message-box__btns {
background: transparent !important;
background-color: transparent !important;
}
/* User profile tabs and pagination jumper */
html.xarr-theme-dark .user-info .el-tabs__nav-wrap,
html.xarr-theme-dark .user-info .el-tabs__nav-scroll,
html.xarr-theme-dark .user-info .el-tabs__nav,
html[data-xarr-theme="dark"] .user-info .el-tabs__nav-wrap,
html[data-xarr-theme="dark"] .user-info .el-tabs__nav-scroll,
html[data-xarr-theme="dark"] .user-info .el-tabs__nav {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
}
html.xarr-theme-dark .user-info .el-tabs__nav-wrap::after,
html[data-xarr-theme="dark"] .user-info .el-tabs__nav-wrap::after {
background-color: #263244 !important;
}
html.xarr-theme-dark .user-info .el-tabs__item,
html[data-xarr-theme="dark"] .user-info .el-tabs__item {
background: transparent !important;
background-color: transparent !important;
color: #94a3b8 !important;
}
html.xarr-theme-dark .user-info .el-tabs__item.is-active,
html.xarr-theme-dark .user-info .el-tabs__item:hover,
html[data-xarr-theme="dark"] .user-info .el-tabs__item.is-active,
html[data-xarr-theme="dark"] .user-info .el-tabs__item:hover {
color: #60a5fa !important;
}
html.xarr-theme-dark .user-info .el-tabs__active-bar,
html[data-xarr-theme="dark"] .user-info .el-tabs__active-bar {
background-color: #3b82f6 !important;
}
html.xarr-theme-dark .el-pagination,
html.xarr-theme-dark .el-pagination__total,
html.xarr-theme-dark .el-pagination__sizes,
html.xarr-theme-dark .el-pagination__jump,
html[data-xarr-theme="dark"] .el-pagination,
html[data-xarr-theme="dark"] .el-pagination__total,
html[data-xarr-theme="dark"] .el-pagination__sizes,
html[data-xarr-theme="dark"] .el-pagination__jump {
background: transparent !important;
background-color: transparent !important;
color: #94a3b8 !important;
}
html.xarr-theme-dark .el-pagination button,
html.xarr-theme-dark .el-pager li,
html.xarr-theme-dark .el-pagination__editor.el-input .el-input__inner,
html[data-xarr-theme="dark"] .el-pagination button,
html[data-xarr-theme="dark"] .el-pager li,
html[data-xarr-theme="dark"] .el-pagination__editor.el-input .el-input__inner {
background: #0b1220 !important;
background-color: #0b1220 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.xarr-theme-dark .el-pager li.active,
html[data-xarr-theme="dark"] .el-pager li.active {
color: #60a5fa !important;
}
html.xarr-theme-dark .pagination-container,
html.xarr-theme-dark .el-table + .pagination-container,
html.xarr-theme-dark .el-table__append-wrapper,
html[data-xarr-theme="dark"] .pagination-container,
html[data-xarr-theme="dark"] .el-table + .pagination-container,
html[data-xarr-theme="dark"] .el-table__append-wrapper {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #94a3b8 !important;
}
html.xarr-theme-dark .pagination-container .el-pagination,
html[data-xarr-theme="dark"] .pagination-container .el-pagination {
background: transparent !important;
background-color: transparent !important;
}
html.xarr-theme-dark .xarr-table-container,
html.xarr-theme-dark .xarr-table-pagination,
html[data-xarr-theme="dark"] .xarr-table-container,
html[data-xarr-theme="dark"] .xarr-table-pagination {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #94a3b8 !important;
}
html.xarr-theme-dark .xarr-table-pagination .el-pagination,
html[data-xarr-theme="dark"] .xarr-table-pagination .el-pagination {
background: transparent !important;
background-color: transparent !important;
}
/* Public payment cashier page */
html.xarr-theme-dark .pay-content,
html[data-xarr-theme="dark"] .pay-content {
background: #0f172a !important;
background-color: #0f172a !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .pay-content .pay .pay-container,
html.xarr-theme-dark .pay-content .footer,
html[data-xarr-theme="dark"] .pay-content .pay .pay-container,
html[data-xarr-theme="dark"] .pay-content .footer {
background: #111827 !important;
background-color: #111827 !important;
border-color: #263244 !important;
color: #94a3b8 !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, .28) !important;
}
html.xarr-theme-dark .pay-content .pay .pay-container .order-id,
html.xarr-theme-dark .pay-content .actual_account,
html.xarr-theme-dark .pay-content .text-content,
html.xarr-theme-dark .pay-content .bg-white,
html.xarr-theme-dark .pay-content .bg-gray-50,
html.xarr-theme-dark .pay-content .bg-gray-100,
html.xarr-theme-dark .pay-content .bg-gray-200,
html[data-xarr-theme="dark"] .pay-content .pay .pay-container .order-id,
html[data-xarr-theme="dark"] .pay-content .actual_account,
html[data-xarr-theme="dark"] .pay-content .text-content,
html[data-xarr-theme="dark"] .pay-content .bg-white,
html[data-xarr-theme="dark"] .pay-content .bg-gray-50,
html[data-xarr-theme="dark"] .pay-content .bg-gray-100,
html[data-xarr-theme="dark"] .pay-content .bg-gray-200 {
background: #0b1220 !important;
background-color: #0b1220 !important;
border-color: #334155 !important;
color: #dbe4f0 !important;
}
html.xarr-theme-dark .pay-content .goods-name,
html.xarr-theme-dark .pay-content .goods-name span,
html.xarr-theme-dark .pay-content .pay-exp-time,
html.xarr-theme-dark .pay-content .pay-exp-time span,
html.xarr-theme-dark .pay-content .order-id span,
html.xarr-theme-dark .pay-content .text-gray-400,
html.xarr-theme-dark .pay-content .text-gray-600,
html.xarr-theme-dark .pay-content .text-gray-700,
html[data-xarr-theme="dark"] .pay-content .goods-name,
html[data-xarr-theme="dark"] .pay-content .goods-name span,
html[data-xarr-theme="dark"] .pay-content .pay-exp-time,
html[data-xarr-theme="dark"] .pay-content .pay-exp-time span,
html[data-xarr-theme="dark"] .pay-content .order-id span,
html[data-xarr-theme="dark"] .pay-content .text-gray-400,
html[data-xarr-theme="dark"] .pay-content .text-gray-600,
html[data-xarr-theme="dark"] .pay-content .text-gray-700 {
color: #cbd5e1 !important;
}
html.xarr-theme-dark .pay-content .price,
html.xarr-theme-dark .pay-content .price span,
html[data-xarr-theme="dark"] .pay-content .price,
html[data-xarr-theme="dark"] .pay-content .price span {
color: #60a5fa !important;
}
html.xarr-theme-dark .pay-content .qrcode-img,
html[data-xarr-theme="dark"] .pay-content .qrcode-img {
background: #ffffff !important;
border: 10px solid #ffffff !important;
border-radius: 8px !important;
}