diff --git a/README.md b/README.md index 34956d9a..10e199ad 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # 3X-UI +

+ **An Advanced Web Panel • Built on Xray Core** [![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases) diff --git a/media/3X-UI.png b/media/3X-UI.png new file mode 100644 index 00000000..8b1af8a7 Binary files /dev/null and b/media/3X-UI.png differ diff --git a/web/assets/codemirror/xq.css b/web/assets/codemirror/xq.css index 3b2dbf73..1e9eaaeb 100644 --- a/web/assets/codemirror/xq.css +++ b/web/assets/codemirror/xq.css @@ -45,12 +45,12 @@ THE SOFTWARE. .cm-s-xq .CodeMirror-activeline-background { background: #e8f2ff; } .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey;color:black !important;background:yellow; } -.dark .cm-s-xq.CodeMirror { background-color: #000000; border-color: #25272a; color: rgb(255 255 255 / 85%); } -.dark .cm-s-xq.CodeMirror:hover { background-color: rgb(0 50 42 / 20%); border-color: #008771; transition: all .3s; } -.dark .cm-s-xq div.CodeMirror-selected { background: rgba(0, 0, 0, 0.5); } -.dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: rgba(39, 0, 122, 0.99); } -.dark .cm-s-xq .CodeMirror-line::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection { background: rgba(39, 0, 122, 0.99); } -.dark .cm-s-xq .CodeMirror-gutters { background: rgb(0 0 0 / 30%); border-right: 1px solid #2c3950; } +.dark .cm-s-xq.CodeMirror { background-color: var(--dark-color-surface-200); border-color: var(--dark-color-surface-300); color: rgb(255 255 255 / 65%); } +.dark .cm-s-xq.CodeMirror:hover { background-color: rgb(0 50 42 / 30%); border-color: #008771; transition: all .3s; } +.dark .cm-s-xq div.CodeMirror-selected { background: var(--dark-color-codemirror-line-selection); } +.dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: var(--dark-color-codemirror-line-selection); } +.dark .cm-s-xq .CodeMirror-line::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection { background: var(--dark-color-codemirror-line-selection); } +.dark .cm-s-xq .CodeMirror-gutters { background: rgb(0 0 0 / 30%); border-right: 1px solid var(--dark-color-surface-300); } .dark .cm-s-xq .CodeMirror-guttermarker { color: #FFBD40; } .dark .cm-s-xq .CodeMirror-guttermarker-subtle { color: rgb(255 255 255 / 70%); } .dark .cm-s-xq .CodeMirror-linenumber { color: rgb(255 255 255 / 50%); } @@ -80,7 +80,7 @@ THE SOFTWARE. .Line-Hover{transition: all .2s;} .Line-Hover:hover{ background-color: rgba(0, 102, 85, 0.05) !important; } -.dark .Line-Hover:hover{ background-color: rgb(0 0 0 / 20%) !important; } +.dark .Line-Hover:hover{ background-color: var(--dark-color-codemirror-line-hover) !important; } .CodeMirror-foldmarker { color: #fc8800; text-shadow: #ffd8aa 1px 1px 2px, #ffd8aa -1px -1px 2px, #ffd8aa 1px -1px 2px, #ffd8aa -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; } .dark .CodeMirror-foldmarker { color: #ffffff; text-shadow: #bbb 1px 1px 2px, #bbb -1px -1px 2px, #bbb 1px -1px 2px, #bbb -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; } diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 53c1168a..d023faee 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -1,4 +1,44 @@ :root { + --color-primary-100: #008771; + --dark-color-background: #0a1222; + --dark-color-surface-100: #151f31; + --dark-color-surface-200: #222d42; + --dark-color-surface-300: #2c3950; + --dark-color-surface-400: rgba(65, 85, 119, 0.5); /* line */ + --dark-color-surface-500: #2c3950; /* popover & switch btn */ + --dark-color-surface-600: #313f5a; /* dropmenu hover */ + --dark-color-surface-700: #111929; /* modals */ + --dark-color-table-hover: rgba(44, 57, 80, 0.2); + --dark-color-text-primary: rgba(255, 255, 255, 0.75); + --dark-color-stroke: #2c3950; + --dark-color-btn-danger: #cd3838; + --dark-color-btn-danger-border: transparent; + --dark-color-btn-danger-hover: #e94b4b; + --dark-color-tag-bg: rgba(255, 255, 255, 0.05); + --dark-color-tag-border:rgba(255, 255, 255, 0.15); + --dark-color-tag-color:rgba(255, 255, 255, 0.75); + --dark-color-tag-green-bg: #112421; + --dark-color-tag-green-border: #195141; + --dark-color-tag-green-color: #3ad3ba; + --dark-color-tag-purple-bg: #201425; + --dark-color-tag-purple-border: #5a2969; + --dark-color-tag-purple-color: #d988cd; + --dark-color-tag-red-bg: #291515; + --dark-color-tag-red-border: #5c2626; + --dark-color-tag-red-color: #e04141; + --dark-color-tag-orange-bg: #312313; + --dark-color-tag-orange-border: #593914; + --dark-color-tag-orange-color: #ffa031; + --dark-color-tag-blue-bg: #111a2c; + --dark-color-tag-blue-border: #1348ab; + --dark-color-tag-blue-color: #529fff; + --dark-color-codemirror-line-hover: rgba(0, 135, 113, 0.2); + --dark-color-codemirror-line-selection: rgba(0, 135, 113, 0.3); + --dark-color-login-background: var(--dark-color-background); + --dark-color-login-wave: var(--dark-color-surface-200); +} + +html[data-theme='ultra-dark'] { --dark-color-background: #21242a; --dark-color-surface-100: #0c0e12; --dark-color-surface-200: #222327; @@ -6,11 +46,40 @@ --dark-color-surface-400: rgba(255, 255, 255, 0.1); --dark-color-surface-500: #3b404b; --dark-color-surface-600: #505663; + --dark-color-surface-700: #101113; + --dark-color-table-hover: rgba(89, 89, 89, 0.15); --dark-color-text-primary: rgb(255 255 255 / 85%); --dark-color-stroke: #202025; - --dark-color-btn-danger: #cd3838; - --dark-color-btn-danger-border: transparent; - --dark-color-btn-danger-hover: #e94b4b; + --dark-color-tag-green-bg: #112421; + --dark-color-tag-green-border: #1d5f4d; + --dark-color-tag-green-color: #59cbac; + --dark-color-tag-purple-bg: #241121; + --dark-color-tag-purple-border: #5a2969; + --dark-color-tag-purple-color: #d686ca; + --dark-color-tag-red-bg: #2a1215; + --dark-color-tag-red-border: #58181c; + --dark-color-tag-red-color: #e84749; + --dark-color-tag-orange-bg: #2b1d11; + --dark-color-tag-orange-border: #593815; + --dark-color-tag-orange-color: #e89a3c; + --dark-color-tag-blue-bg: #111a2c; + --dark-color-tag-blue-border: #0f367e; + --dark-color-tag-blue-color: #3c89e8; + --dark-color-codemirror-line-hover: rgba(85, 85, 85, 0.3); + --dark-color-codemirror-line-selection: rgba(85, 85, 85, 0.4); + --dark-color-login-background: #0a2227; + --dark-color-login-wave: #0f2d32; + .ant-dropdown-menu-dark { + background-color: var(--dark-color-surface-500); + } + .dark .ant-dropdown-menu-submenu-title:hover, + .dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled), + .dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) { + background-color: var(--dark-color-surface-300); + } + .dark .waves-header { + background-color: #0a2227; + } } html, @@ -31,7 +100,7 @@ body { font-feature-settings: "tnum"; } html { - --antd-wave-shadow-color: #008771; + --antd-wave-shadow-color: var(--color-primary-100); line-height: 1.15; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -41,7 +110,7 @@ html { } ::selection { - color: #008771; + color: var(--color-primary-100); background-color: #cfe8e4; } @@ -149,7 +218,7 @@ style attribute { padding: 0.5rem; } .ant-modal-body { - padding: 10px; + padding: 20px; } .ant-form-item-label { line-height: 1.5; @@ -233,7 +302,7 @@ style attribute { .ant-menu-submenu-active, .ant-menu-submenu-title:hover, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open { - color: #008771; + color: var(--color-primary-100); background-color: rgb(232 244 242); border-radius: 0.5rem; } @@ -495,14 +564,14 @@ style attribute { } .normal-icon:hover { - color: #008771; + color: var(--color-primary-100); } /* DARK THEME */ .dark ::selection { color: #fff; - background-color: #008771; + background-color: var(--color-primary-100); } .dark .normal-icon:hover { @@ -523,6 +592,7 @@ style attribute { .dark .ant-card-hoverable:hover, .dark .ant-space-item > .ant-tabs:hover { + /* box-shadow: 0 1px 10px -1px rgb(154 175 238 / 80%); */ box-shadow: 0 2px 8px transparent; } @@ -612,7 +682,7 @@ style attribute { .dark .ant-calendar-year-panel-year, .dark .ant-calendar-month-panel-month, .dark .ant-calendar-decade-panel-decade { - color: rgba(255, 255, 255, 0.85); + color: var(--dark-color-text-primary); } .dark .ant-list-item-meta-description { @@ -643,7 +713,7 @@ style attribute { .dark .ant-calendar-time-picker-inner { background-color: var(--dark-color-surface-200); border-color: var(--dark-color-surface-300); - color: rgba(255, 255, 255, 0.85); + color: var(--dark-color-text-primary); } .dark .ant-select-selection:hover, @@ -653,27 +723,27 @@ style attribute { .dark .ant-input:hover, .dark .ant-input:focus { background-color: rgba(0, 135, 113, 0.3); - border-color: #008771; + border-color: var(--color-primary-100); } .dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) { - color: rgba(255, 255, 255, 0.85); + color: var(--dark-color-text-primary); background-color: rgb(10 117 87 / 30%); - border: 1px solid #008771; + border: 1px solid var(--color-primary-100); } .dark .ant-radio-button-wrapper, .dark .ant-radio-button-wrapper:before { - color: rgb(255 255 255 / 65%); + color: var(--dark-color-text-primary); background-color: rgba(0, 135, 113, 0.3); - border-color: #008771; + border-color: var(--color-primary-100); } .dark .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .dark .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) { color: #fff; background-color: rgb(10 117 87 / 50%); - border-color: #008771; + border-color: var(--color-primary-100); } .dark .ant-btn-primary[disabled], @@ -689,7 +759,7 @@ style attribute { > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .dark .client-table-odd-row { - background-color: rgb(89 89 89 / 15%); + background-color: var(--dark-color-table-hover); } .dark .ant-table-row-expand-icon { @@ -699,9 +769,9 @@ style attribute { } .dark .ant-table-row-expand-icon:hover { - color: #008771; + color: var(--color-primary-100); background-color: #fff0; - border-color: #008771; + border-color: var(--color-primary-100); } .dark .ant-switch:not(.ant-switch-checked), @@ -713,7 +783,6 @@ style attribute { stroke: var(--dark-color-stroke) !important; } -.ant-dropdown-menu-dark, .dark .ant-popover-inner { background-color: var(--dark-color-surface-500); } @@ -738,46 +807,46 @@ style attribute { } .dark .ant-tag { - color: rgba(255, 255, 255, 0.85); - background-color: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.15); + color: var(--dark-color-tag-color); + background-color: var(--dark-color-tag-bg); + border-color: var(--dark-color-tag-border); } .dark .ant-tag-blue { - background-color: #111a2c; - border-color: #0f367e; - color: #3c89e8; + background-color: var(--dark-color-blue-red-bg); + border-color: var(--dark-color-tag-blue-border); + color: var(--dark-color-tag-blue-color); } .dark .ant-tag-red, .dark .ant-alert-error { - background-color: #2a1215; - border-color: #58181c; - color: #e84749; + background-color: var(--dark-color-tag-red-bg); + border-color: var(--dark-color-tag-red-border); + color: var(--dark-color-tag-red-color); } .dark .ant-tag-orange, .dark .ant-alert-warning { - background-color: #2b1d11; - border-color: #593815; - color: #e89a3c; + background-color: var(--dark-color-tag-orange-bg); + border-color: var(--dark-color-tag-orange-border); + color: var(--dark-color-tag-orange-color); } .dark .ant-tag-green { - background-color: #112421; - border-color: #195544; - color: #59cbac; + background-color: var(--dark-color-tag-green-bg); + border-color: var(--dark-color-tag-green-border); + color: var(--dark-color-tag-green-color); } .dark .ant-tag-purple { - background-color: #241121; - border-color: #5a2969; - color: #d686ca; + background-color: var(--dark-color-tag-purple-bg); + border-color: var(--dark-color-tag-purple-border); + color: var(--dark-color-tag-purple-color); } .dark .ant-modal-content, .dark .ant-modal-header { - background-color: #101113; + background-color: var(--dark-color-surface-700); } .dark .ant-calendar-next-month-btn-day .ant-calendar-date, @@ -786,13 +855,13 @@ style attribute { } .dark .ant-calendar-selected-day .ant-calendar-date { - background-color: #008771 !important; + background-color: var(--color-primary-100) !important; color: #fff; } .dark .ant-calendar-date:hover, .dark .ant-calendar-time-picker-select li:hover { - background-color: var(--dark-color-surface-300); + background-color: var(--dark-color-surface-600); color: #fff; } @@ -806,13 +875,15 @@ style attribute { color: #fff; font-weight: 600; outline: none; - background-color: #008771; + background-color: var(--color-primary-100); } .dark .ant-calendar-time-picker-select { border-right-color: var(--dark-color-surface-300); } +.has-warning .ant-select-selection, +.has-warning .ant-select-selection:hover, .has-warning .ant-input, .has-warning .ant-input:hover { background-color: #ffeee1; @@ -827,6 +898,8 @@ style attribute { border-color: #fec093; } +.dark .has-warning .ant-select-selection, +.dark .has-warning .ant-select-selection:hover, .dark .has-warning .ant-input, .dark .has-warning .ant-input:hover { border-color: #784e1d; @@ -842,7 +915,7 @@ style attribute { } .dark .has-success .anticon { - color: #61bf39; + color: var(--color-primary-100); animation-name: diffZoomIn1 !important; } @@ -888,19 +961,19 @@ style attribute { } .ant-calendar-today .ant-calendar-date { - color: #008771; + color: var(--color-primary-100); font-weight: 700; - border-color: #008771; + border-color: var(--color-primary-100); } .dark .ant-calendar-today .ant-calendar-date { color: #fff; font-weight: 700; - border-color: #008771; + border-color: var(--color-primary-100); } .ant-calendar-selected-day .ant-calendar-date { - background: #008771; + background: var(--color-primary-100); color: #ffffff; } @@ -934,7 +1007,7 @@ li.ant-select-dropdown-menu-item:empty:after { .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon { - color: #008771; + color: var(--color-primary-100); } .ant-select-selection:hover, .ant-input-number-focused, @@ -943,7 +1016,7 @@ li.ant-select-dropdown-menu-item:empty:after { } .dark .ant-input-number-handler:active { - background-color: #008771; + background-color: var(--color-primary-100); } .dark .ant-input-number-handler:hover .ant-input-number-handler-down-inner, @@ -979,10 +1052,11 @@ li.ant-select-dropdown-menu-item:empty:after { color: rgba(255, 255, 255, 0.35); } +.ant-dropdown-menu-dark, .dark .ant-calendar-year-panel-year:hover, .dark .ant-calendar-month-panel-month:hover, .dark .ant-calendar-decade-panel-decade:hover { - background-color: var(--dark-color-surface-600); + background-color: var(--dark-color-surface-200); } .dark .ant-calendar-header a:hover { @@ -1014,7 +1088,7 @@ li.ant-select-dropdown-menu-item:empty:after { .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover { color: #fff; - background-color: #008771; + background-color: var(--color-primary-100); } .dark .ant-calendar-last-month-cell .ant-calendar-date, @@ -1028,8 +1102,8 @@ li.ant-select-dropdown-menu-item:empty:after { .dark .ant-calendar-today .ant-calendar-date:hover { color: #fff; - border-color: #008771; - background-color: #008771; + border-color: var(--color-primary-100); + background-color: var(--color-primary-100); } .dark @@ -1052,8 +1126,8 @@ li.ant-select-dropdown-menu-item:empty:after { } .dark .ant-checkbox-checked .ant-checkbox-inner { - background-color: #008771; - border-color: #008771; + background-color: var(--color-primary-100); + border-color: var(--color-primary-100); } .dark .ant-calendar-input { @@ -1117,7 +1191,7 @@ li.ant-select-dropdown-menu-item:empty:after { .dark .ant-dropdown-menu-submenu-title:hover, .dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled), .dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) { - background-color: var(--dark-color-surface-300); + background-color: var(--dark-color-surface-600); } .ant-select-dropdown, @@ -1140,7 +1214,7 @@ li.ant-select-dropdown-menu-item:empty:after { border-radius: 1rem; } -.ant-input-group-addon:not(:first-child):not(:last-child), .ant-input-group-wrap:not(:first-child):not(:last-child), .ant-input-group>.ant-input:not(:first-child):not(:last-child) { +.ant-input-group-addon:not(:first-child):not(:last-child) { border-radius: 0rem 1rem 1rem 0rem; } @@ -1157,9 +1231,9 @@ b, strong { } .dark .ant-message-notice-content { - background-color: #000000; - border: 1px solid #303134; - color: rgba(255, 255, 255, 0.85); + background-color: var(--dark-color-surface-200); + border: 1px solid var(--dark-color-surface-300); + color: var(--dark-color-text-primary); } .ant-btn-danger { @@ -1174,4 +1248,4 @@ b, strong { .dark .ant-alert-close-icon .anticon-close:hover { color: rgb(255 255 255); -} \ No newline at end of file +} diff --git a/web/assets/persian-datepicker/persian-datepicker.min.css b/web/assets/persian-datepicker/persian-datepicker.min.css index 2681d6a4..133f80d0 100644 --- a/web/assets/persian-datepicker/persian-datepicker.min.css +++ b/web/assets/persian-datepicker/persian-datepicker.min.css @@ -206,15 +206,15 @@ jdp-container .jdp-day-name { } jdp-container .jdp-day-name.today, jdp-container .jdp-day.today { - border-color: #008771; - color: #008771; + border-color: var(--color-primary-100); + color: var(--color-primary-100); font-weight: 700; } .dark jdp-container .jdp-day-name.selected, .dark jdp-container .jdp-day.selected, jdp-container .jdp-day-name.selected, jdp-container .jdp-day.selected { - background-color: #008771 !important; + background-color: var(--color-primary-100) !important; color: #fff !important; opacity: 1 !important; } @@ -267,7 +267,7 @@ jdp-container .jdp-btn-empty, jdp-container .jdp-btn-today { background: #00877000; border-radius: 5px; - color: #008771; + color: var(--color-primary-100); cursor: pointer; display: inline-block; font-size: 90%; @@ -369,26 +369,26 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after { } .dark jdp-container .jdp-days { - border-color: #32353b; + border-color: var(--dark-color-surface-400); } .dark jdp-overlay { background-color: #181f2c; } .dark jdp-container { - background: #000000; + background: var(--dark-color-background); border-color: #2c3950; box-shadow: 0 2px 8px rgba(0,0,0,.15); color: #fff; } .dark jdp-container .jdp-icon-minus, .dark jdp-container .jdp-icon-plus { - outline-color: #32353b; + outline-color: var(--dark-color-surface-600); } .dark jdp-container .jdp-icon-minus:hover, .dark jdp-container .jdp-icon-plus:hover { - background-color: #32353b; + background-color: var(--dark-color-surface-600); } .dark jdp-container .jdp-months, @@ -405,27 +405,27 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after { .dark jdp-container .jdp-year, .dark jdp-container .jdp-year input, .dark jdp-container .jdp-year select { - background: #000000; - color: rgba(255, 255, 255, 0.85); + background: var(--dark-color-background); + color: var(--dark-color-text-primary); } .dark jdp-container .jdp-day, .dark jdp-container .jdp-day-name { border: 1px solid transparent; - color: rgba(255, 255, 255, 0.85); + color: var(--dark-color-text-primary); } .dark jdp-container .jdp-day-name.today, .dark jdp-container .jdp-day.today { - border-color: #008771; + border-color: var(--color-primary-100); } .dark jdp-container .jdp-day.disabled-day { opacity: 0.15; } .dark jdp-container .jdp-day:not(.disabled-day):hover { - background-color: #32353b; + background-color: var(--dark-color-surface-600); color: #fff; } .dark jdp-container .jdp-footer { - border-color: #32353b; + border-color: var(--dark-color-surface-400); } .dark jdp-container .jdp-btn-close, .dark jdp-container .jdp-btn-empty, @@ -446,10 +446,10 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after { } .dark jdp-container .jdp-time-container .jdp-time select:hover { - background-color: #32353b; + background-color: var(--dark-color-surface-600); color: #fff; } .dark jdp-container .jdp-time-container .jdp-time select { - border: 1px solid #32353b; + border: 1px solid var(--dark-color-surface-600); } diff --git a/web/html/login.html b/web/html/login.html index fc38166b..7655c66f 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -49,6 +49,9 @@ border-radius: 2rem; padding: 3rem; transition: all 0.3s; + user-select:none; + -webkit-user-select:none; + -moz-user-select: none; } #login:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); @@ -68,10 +71,10 @@ z-index: 0; } .dark .under { - background-color: #0f2d32; + background-color: var(--dark-color-login-wave); } .dark #login { - background-color: #101113; + background-color: var(--dark-color-surface-100); } .dark h1 { color: rgba(255, 255, 255); @@ -199,7 +202,7 @@ z-index: -1; } .dark .waves-header { - background-color: #0a2227; + background-color: var(--dark-color-login-background); } .waves-inner-header { height: 50vh; @@ -219,7 +222,7 @@ animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .dark .parallax > use { - fill: #0f2d32; + fill: var(--dark-color-login-wave); } .parallax > use:nth-child(1) { animation-delay: -2s; @@ -373,98 +376,106 @@ } - - - -
-
- - - - - - - - - - - -
- - - - -

- - {{ i18n "pages.login.title" }} - Hello! - -

- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - - - - - -    - - - - - - - - -   - - - - - - - - - - - - - - + + + +
+
+ + + + + + + + + + + +
+ + + + +

+ + {{ i18n "pages.login.hello" }} + {{ i18n "pages.login.title" }} + +

+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +    + + + + + + + + +   + + + + + Ultra + + + + + + + + + + + + {{template "js" .}} {{template "component/themeSwitcher" .}} {{template "component/password" .}} diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html index 13d5bd49..78b833b9 100644 --- a/web/html/xui/common_sider.html +++ b/web/html/xui/common_sider.html @@ -15,10 +15,6 @@ {{ i18n "menu.xray"}} - - - - {{ i18n "menu.logout"}} @@ -31,7 +27,13 @@ - + + + + Ultra + - + + + + Ultra + function createThemeSwitcher() { const isDarkTheme = localStorage.getItem('dark-mode') === 'true'; + const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true'; + if (isUltra) { + document.documentElement.setAttribute('data-theme', 'ultra-dark'); + } const theme = isDarkTheme ? 'dark' : 'light'; - document.querySelector('body').setAttribute('class', theme) + document.querySelector('body').setAttribute('class', theme); return { isDarkTheme, + isUltra, get currentTheme() { return this.isDarkTheme ? 'dark' : 'light'; }, toggleTheme() { this.isDarkTheme = !this.isDarkTheme; localStorage.setItem('dark-mode', this.isDarkTheme); - document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light') + document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light'); document.getElementById('message').className = themeSwitcher.currentTheme; }, + toggleUltra() { + this.isUltra = !this.isUltra; + if (this.isUltra) { + document.documentElement.setAttribute('data-theme', 'ultra-dark'); + } else { + document.documentElement.removeAttribute('data-theme'); + } + localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString()); + } }; } - const themeSwitcher = createThemeSwitcher(); - Vue.component('theme-switch', { props: [], template: `{{template "component/themeSwitchTemplate"}}`, - data: () => ({ themeSwitcher }), + data: () => ({ + themeSwitcher + }), mounted() { - this.$message.config({getContainer: () => document.getElementById('message')}); + this.$message.config({ + getContainer: () => document.getElementById('message') + }); document.getElementById('message').className = themeSwitcher.currentTheme; } }); -{{end}} \ No newline at end of file +{{end}} diff --git a/web/html/xui/index.html b/web/html/xui/index.html index 90c45b85..fe867214 100644 --- a/web/html/xui/index.html +++ b/web/html/xui/index.html @@ -10,23 +10,11 @@ margin-inline: 0.3rem; } } - .ant-col-sm-24 { margin-top: 10px; } - .ant-card-dark h2 { - color: hsla(0, 0%, 100%, .65); - } - - .dark .ant-card-hoverable:hover, - .dark .ant-space-item > .ant-tabs:hover { - transform: scale(0.987); - outline-color: #40434d; - } - - .dark .ant-card-bordered { - outline: 2px solid var(--dark-color-background); + color: var(--dark-color-text-primary); } @@ -104,8 +92,8 @@ {{ i18n "pages.index.operationHours" }}: - Xray [[ formatSecond(status.appStats.uptime) ]] - OS [[ formatSecond(status.uptime) ]] + Xray: [[ formatSecond(status.appStats.uptime) ]] + OS: [[ formatSecond(status.uptime) ]] @@ -153,10 +141,10 @@ {{ i18n "usage"}}: - RAM [[ sizeFormat(status.appStats.mem) ]] + RAM: [[ sizeFormat(status.appStats.mem) ]] - Threads [[ status.appStats.threads ]] + Threads: [[ status.appStats.threads ]] diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html index 5afa77c8..35f5cad7 100644 --- a/web/html/xui/xray.html +++ b/web/html/xui/xray.html @@ -74,8 +74,8 @@ - - + + {{ i18n "pages.xray.save" }} {{ i18n "pages.xray.restart" }} @@ -89,7 +89,7 @@ - +