mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-04-19 21:42:24 +00:00
Ultra Dark Theme for 3X-UI (#1871)
This commit is contained in:
Tara Rostami
GitHub
parent
fe7a5f1813
commit
fc3ea2dd4b
9 changed files with 304 additions and 106 deletions
|
|
@ -45,8 +45,8 @@ 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: #222D42; border-color: #2c3950; 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.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); }
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
:root {
|
||||
--dark-color-background: #21242a;
|
||||
--dark-color-surface-100: #0c0e12;
|
||||
--dark-color-surface-200: #222327;
|
||||
--dark-color-surface-300: #32353b;
|
||||
--dark-color-surface-400: rgba(255, 255, 255, 0.1);
|
||||
--dark-color-surface-500: #3b404b;
|
||||
--dark-color-surface-600: #505663;
|
||||
--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;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
|
|
@ -502,13 +517,13 @@ style attribute {
|
|||
.dark .ant-table,
|
||||
.dark .ant-collapse-content,
|
||||
.dark .ant-tabs {
|
||||
background-color: #151f31;
|
||||
color: #ffffffa6;
|
||||
background-color: var(--dark-color-surface-100);
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.dark > .ant-layout,
|
||||
|
|
@ -518,8 +533,8 @@ style attribute {
|
|||
.dark .ant-table-expanded-row:hover,
|
||||
.dark .ant-table-expanded-row .ant-table-tbody,
|
||||
.dark .ant-calendar {
|
||||
background-color: #101828;
|
||||
color: rgb(255 255 255 /65%);
|
||||
background-color: var(--dark-color-background);
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
|
||||
.dark .ant-table-expanded-row .ant-table-thead > tr:first-child > th {
|
||||
|
|
@ -528,7 +543,7 @@ style attribute {
|
|||
|
||||
.dark .ant-calendar,
|
||||
.dark .ant-card-bordered {
|
||||
border-color: #151f31;
|
||||
border-color: var(--dark-color-background);
|
||||
}
|
||||
|
||||
.dark .ant-table-bordered,
|
||||
|
|
@ -540,7 +555,7 @@ style attribute {
|
|||
.dark .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th,
|
||||
.dark .ant-table-bordered .ant-table-tbody > tr > td,
|
||||
.dark .ant-table-bordered .ant-table-thead > tr > th {
|
||||
border-color: #2c3950;
|
||||
border-color: var(--dark-color-surface-400);
|
||||
}
|
||||
|
||||
.dark .ant-table-tbody > tr > td,
|
||||
|
|
@ -553,7 +568,7 @@ style attribute {
|
|||
.dark .ant-popover-title,
|
||||
.dark .ant-calendar-header,
|
||||
.dark .ant-calendar-input-wrap {
|
||||
border-bottom-color: #2c3950;
|
||||
border-bottom-color: var(--dark-color-surface-400);
|
||||
}
|
||||
|
||||
.dark .ant-modal-footer,
|
||||
|
|
@ -561,7 +576,7 @@ style attribute {
|
|||
.dark .ant-calendar-footer,
|
||||
.dark .ant-divider-horizontal.ant-divider-with-text-center:before,
|
||||
.dark .ant-divider-horizontal.ant-divider-with-text-center:after {
|
||||
border-top-color: #2c3950;
|
||||
border-top-color: var(--dark-color-surface-300);
|
||||
}
|
||||
|
||||
.dark .ant-progress-text,
|
||||
|
|
@ -597,7 +612,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.65);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-list-item-meta-description {
|
||||
|
|
@ -623,13 +638,12 @@ style attribute {
|
|||
.dark .ant-select-dropdown li,
|
||||
.dark .ant-select-dropdown-menu-item,
|
||||
.dark .ant-divider:not(.ant-divider-with-text-center),
|
||||
.dark .ant-calendar-input,
|
||||
.dark .client-table-header,
|
||||
.dark .ant-select-selection--multiple .ant-select-selection__choice,
|
||||
.dark .ant-calendar-time-picker-inner {
|
||||
background-color: #222d42;
|
||||
border-color: #2c3950;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
background-color: var(--dark-color-surface-200);
|
||||
border-color: var(--dark-color-surface-300);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.dark .ant-select-selection:hover,
|
||||
|
|
@ -643,7 +657,7 @@ style attribute {
|
|||
}
|
||||
|
||||
.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
background-color: rgb(10 117 87 / 30%);
|
||||
border: 1px solid #008771;
|
||||
}
|
||||
|
|
@ -666,7 +680,7 @@ style attribute {
|
|||
.dark .ant-btn-danger[disabled],
|
||||
.dark .ant-calendar-ok-btn-disabled {
|
||||
color: rgb(255 255 255 / 35%);
|
||||
background-color: #2c3950;
|
||||
background-color: var(--dark-color-surface-300);
|
||||
border-color: #42516c;
|
||||
}
|
||||
|
||||
|
|
@ -675,7 +689,7 @@ style attribute {
|
|||
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
|
||||
> td,
|
||||
.dark .client-table-odd-row {
|
||||
background-color: #00877122;
|
||||
background-color: rgb(89 89 89 / 15%);
|
||||
}
|
||||
|
||||
.dark .ant-table-row-expand-icon {
|
||||
|
|
@ -692,31 +706,31 @@ style attribute {
|
|||
|
||||
.dark .ant-switch:not(.ant-switch-checked),
|
||||
.dark .ant-progress-line .ant-progress-inner {
|
||||
background-color: #2c3950;
|
||||
background-color: var(--dark-color-surface-500);
|
||||
}
|
||||
|
||||
.dark .ant-progress-circle-trail {
|
||||
stroke: #2c3950 !important;
|
||||
stroke: var(--dark-color-stroke) !important;
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-dark,
|
||||
.dark .ant-popover-inner {
|
||||
background-color: #222d42;
|
||||
background-color: var(--dark-color-surface-500);
|
||||
}
|
||||
|
||||
.dark > .ant-popover-content > .ant-popover-arrow {
|
||||
border-color: #222d42;
|
||||
border-color: var(--dark-color-surface-500);
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,
|
||||
.dark .ant-select-dropdown-menu-item-selected,
|
||||
.dark .ant-select-dropdown-menu-item:hover,
|
||||
.dark .ant-calendar-time-picker-select-option-selected {
|
||||
background-color: #313f5a;
|
||||
background-color: var(--dark-color-surface-600);
|
||||
}
|
||||
|
||||
.ant-menu-dark .ant-menu-item:hover {
|
||||
background-color: #2c3950;
|
||||
background-color: var(--dark-color-surface-300);
|
||||
}
|
||||
|
||||
.dark .ant-alert-message {
|
||||
|
|
@ -724,9 +738,9 @@ style attribute {
|
|||
}
|
||||
|
||||
.dark .ant-tag {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
background-color: #ffffff0a;
|
||||
border-color: #344461;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.dark .ant-tag-blue {
|
||||
|
|
@ -737,38 +751,38 @@ style attribute {
|
|||
|
||||
.dark .ant-tag-red,
|
||||
.dark .ant-alert-error {
|
||||
background-color: #291515;
|
||||
border-color: #5c2626;
|
||||
color: #e04141;
|
||||
background-color: #2a1215;
|
||||
border-color: #58181c;
|
||||
color: #e84749;
|
||||
}
|
||||
|
||||
.dark .ant-tag-orange,
|
||||
.dark .ant-alert-warning {
|
||||
background-color: #312313;
|
||||
border-color: #593914;
|
||||
color: #ffa031;
|
||||
background-color: #2b1d11;
|
||||
border-color: #593815;
|
||||
color: #e89a3c;
|
||||
}
|
||||
|
||||
.dark .ant-tag-green {
|
||||
background-color: #112421;
|
||||
border-color: #144840;
|
||||
color: #33bca5;
|
||||
border-color: #195544;
|
||||
color: #59cbac;
|
||||
}
|
||||
|
||||
.dark .ant-tag-purple {
|
||||
background-color: #2c1e32;
|
||||
border-color: #49394e;
|
||||
color: #cfb9cc;
|
||||
background-color: #241121;
|
||||
border-color: #5a2969;
|
||||
color: #d686ca;
|
||||
}
|
||||
|
||||
.dark .ant-modal-content,
|
||||
.dark .ant-modal-header {
|
||||
background-color: #181f2c;
|
||||
background-color: #101113;
|
||||
}
|
||||
|
||||
.dark .ant-calendar-next-month-btn-day .ant-calendar-date,
|
||||
.dark .ant-calendar-last-month-cell .ant-calendar-date {
|
||||
color: #2c3950;
|
||||
color: var(--dark-color-surface-300);
|
||||
}
|
||||
|
||||
.dark .ant-calendar-selected-day .ant-calendar-date {
|
||||
|
|
@ -778,7 +792,7 @@ style attribute {
|
|||
|
||||
.dark .ant-calendar-date:hover,
|
||||
.dark .ant-calendar-time-picker-select li:hover {
|
||||
background-color: #313f5a;
|
||||
background-color: var(--dark-color-surface-300);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -796,7 +810,7 @@ style attribute {
|
|||
}
|
||||
|
||||
.dark .ant-calendar-time-picker-select {
|
||||
border-right-color: #2c3950;
|
||||
border-right-color: var(--dark-color-surface-300);
|
||||
}
|
||||
|
||||
.has-warning .ant-input,
|
||||
|
|
@ -957,7 +971,7 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
}
|
||||
|
||||
.dark .ant-calendar-year-panel-header {
|
||||
border-bottom: 1px solid #222d42;
|
||||
border-bottom: 1px solid var(--dark-color-surface-200);
|
||||
}
|
||||
|
||||
.dark .ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year,
|
||||
|
|
@ -968,7 +982,7 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
.dark .ant-calendar-year-panel-year:hover,
|
||||
.dark .ant-calendar-month-panel-month:hover,
|
||||
.dark .ant-calendar-decade-panel-decade:hover {
|
||||
background-color: #222d42;
|
||||
background-color: var(--dark-color-surface-600);
|
||||
}
|
||||
|
||||
.dark .ant-calendar-header a:hover {
|
||||
|
|
@ -976,13 +990,13 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
}
|
||||
|
||||
.dark .ant-calendar-month-panel-header {
|
||||
background-color: #101828;
|
||||
border-bottom: 1px solid #222d42;
|
||||
background-color: var(--dark-color-background);
|
||||
border-bottom: 1px solid var(--dark-color-surface-200);
|
||||
}
|
||||
|
||||
.dark .ant-calendar-year-panel,
|
||||
.dark .ant-calendar table {
|
||||
background-color: #101828;
|
||||
background-color: var(--dark-color-background);
|
||||
}
|
||||
|
||||
.dark .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
|
||||
|
|
@ -1028,8 +1042,8 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
}
|
||||
|
||||
.dark .ant-calendar-decade-panel-header {
|
||||
border-bottom: 1px solid #222d42;
|
||||
background-color: #101828;
|
||||
border-bottom: 1px solid var(--dark-color-surface-200);
|
||||
background-color: var(--dark-color-background);
|
||||
}
|
||||
|
||||
.dark .ant-checkbox-inner {
|
||||
|
|
@ -1043,19 +1057,14 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
}
|
||||
|
||||
.dark .ant-calendar-input {
|
||||
background-color: #101828;
|
||||
background-color: var(--dark-color-background);
|
||||
color: var(--dark-color-text-primary);
|
||||
}
|
||||
|
||||
.dark .ant-calendar-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.dark .ant-message-notice-content {
|
||||
background-color: #222d42;
|
||||
border: 1px solid #2c3950;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(
|
||||
:last-child
|
||||
),
|
||||
|
|
@ -1105,11 +1114,10 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
background-color: rgb(232 244 242);
|
||||
}
|
||||
|
||||
.dark .ant-dropdown-menu-item:hover,
|
||||
.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: #313f5a;
|
||||
background-color: var(--dark-color-surface-300);
|
||||
}
|
||||
|
||||
.ant-select-dropdown,
|
||||
|
|
@ -1122,6 +1130,8 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
}
|
||||
|
||||
.qr-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -1141,3 +1151,23 @@ li.ant-select-dropdown-menu-item:empty:after {
|
|||
b, strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ant-collapse>.ant-collapse-item>.ant-collapse-header {
|
||||
padding: 10px 16px 10px 40px;
|
||||
}
|
||||
|
||||
.dark .ant-message-notice-content {
|
||||
background-color: #000000;
|
||||
border: 1px solid #303134;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: var(--dark-color-btn-danger);
|
||||
border-color: var(--dark-color-btn-danger-border);
|
||||
}
|
||||
|
||||
.ant-btn-danger:focus, .ant-btn-danger:hover {
|
||||
background-color: var(--dark-color-btn-danger-hover);
|
||||
border-color: var(--dark-color-btn-danger-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@ jdp-container :before {
|
|||
}
|
||||
jdp-container .jdp-icon-minus,
|
||||
jdp-container .jdp-icon-plus {
|
||||
border: 1px solid rgb(232 244 242);
|
||||
outline: 1px solid rgb(232 244 242);
|
||||
outline-offset: -1px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
@ -368,26 +369,26 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
|
|||
}
|
||||
|
||||
.dark jdp-container .jdp-days {
|
||||
border-color: #313f5a;
|
||||
border-color: #32353b;
|
||||
}
|
||||
|
||||
.dark jdp-overlay {
|
||||
background-color: #181f2c;
|
||||
}
|
||||
.dark jdp-container {
|
||||
background: #101828;
|
||||
background: #000000;
|
||||
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 {
|
||||
border-color: #313f5a;
|
||||
outline-color: #32353b;
|
||||
}
|
||||
|
||||
.dark jdp-container .jdp-icon-minus:hover,
|
||||
.dark jdp-container .jdp-icon-plus:hover {
|
||||
background-color: #313f5a;
|
||||
background-color: #32353b;
|
||||
}
|
||||
|
||||
.dark jdp-container .jdp-months,
|
||||
|
|
@ -404,13 +405,13 @@ 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: #101828;
|
||||
color: rgb(255 255 255 / 65%);
|
||||
background: #000000;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.dark jdp-container .jdp-day,
|
||||
.dark jdp-container .jdp-day-name {
|
||||
border: 1px solid transparent;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.dark jdp-container .jdp-day-name.today,
|
||||
.dark jdp-container .jdp-day.today {
|
||||
|
|
@ -420,11 +421,11 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
|
|||
opacity: 0.15;
|
||||
}
|
||||
.dark jdp-container .jdp-day:not(.disabled-day):hover {
|
||||
background-color: #313f5a;
|
||||
background-color: #32353b;
|
||||
color: #fff;
|
||||
}
|
||||
.dark jdp-container .jdp-footer {
|
||||
border-color: #313f5a;
|
||||
border-color: #32353b;
|
||||
}
|
||||
.dark jdp-container .jdp-btn-close,
|
||||
.dark jdp-container .jdp-btn-empty,
|
||||
|
|
@ -445,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: #313f5a;
|
||||
background-color: #32353b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark jdp-container .jdp-time-container .jdp-time select {
|
||||
border: 1px solid rgb(49 63 90);
|
||||
border: 1px solid #32353b;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
|
||||
<canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))"
|
||||
id="qrCode-sub"
|
||||
style="width: 100%; height: 100%; display: flex; border-radius: 1rem;">
|
||||
class="qr-bg">
|
||||
</canvas>
|
||||
<a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
|
||||
<canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))"
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
</template>
|
||||
<a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
|
||||
<template v-for="(row, index) in qrModal.qrcodes">
|
||||
<a-tag color="blue" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
|
||||
<a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
|
||||
<canvas @click="copyToClipboard('qrCode-'+index, row.link)"
|
||||
:id="'qrCode-'+index"
|
||||
style="width: 100%; height: 100%; display: flex; border-radius: 1rem;"></canvas>
|
||||
class="qr-bg"></canvas>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</a-button>
|
||||
<a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
|
||||
</template>
|
||||
<a-input type="textarea" v-model="txtModal.content"
|
||||
<a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
|
||||
:autosize="{ minRows: 10, maxRows: 20}"></a-input>
|
||||
</a-modal>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,14 @@
|
|||
<html lang="en">
|
||||
{{template "head" .}}
|
||||
<style>
|
||||
html * {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 20px 0 50px 0;
|
||||
/* margin: 20px 0 50px 0;*/
|
||||
height: 110px;
|
||||
}
|
||||
.ant-btn,
|
||||
.ant-input {
|
||||
|
|
@ -31,7 +36,9 @@
|
|||
}
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.title b {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
#app {
|
||||
overflow: hidden;
|
||||
|
|
@ -64,10 +71,10 @@
|
|||
background-color: #0f2d32;
|
||||
}
|
||||
.dark #login {
|
||||
background-color: #151f31;
|
||||
background-color: #101113;
|
||||
}
|
||||
.dark h1 {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(255, 255, 255);
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -192,7 +199,7 @@
|
|||
z-index: -1;
|
||||
}
|
||||
.dark .waves-header {
|
||||
background-color: #101828;
|
||||
background-color: #0a2227;
|
||||
}
|
||||
.waves-inner-header {
|
||||
height: 50vh;
|
||||
|
|
@ -247,6 +254,123 @@
|
|||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
.words-wrapper {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.words-wrapper b {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.words-wrapper b.is-visible {
|
||||
position: relative;
|
||||
}
|
||||
.headline.zoom .words-wrapper {
|
||||
-webkit-perspective: 300px;
|
||||
-moz-perspective: 300px;
|
||||
perspective: 300px;
|
||||
}
|
||||
.headline {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.headline.zoom b {
|
||||
opacity: 0;
|
||||
}
|
||||
.headline.zoom b.is-visible {
|
||||
opacity: 1;
|
||||
-webkit-animation: zoom-in 0.8s;
|
||||
-moz-animation: zoom-in 0.8s;
|
||||
animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
|
||||
}
|
||||
.headline.zoom b.is-hidden {
|
||||
-webkit-animation: zoom-out 0.8s;
|
||||
-moz-animation: zoom-out 0.8s;
|
||||
animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
|
||||
}
|
||||
@-webkit-keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateZ(100px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
@keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(100px);
|
||||
-moz-transform: translateZ(100px);
|
||||
-ms-transform: translateZ(100px);
|
||||
-o-transform: translateZ(100px);
|
||||
transform: translateZ(100px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
@keyframes zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-100px);
|
||||
-moz-transform: translateZ(-100px);
|
||||
-ms-transform: translateZ(-100px);
|
||||
-o-transform: translateZ(-100px);
|
||||
transform: translateZ(-100px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
|
||||
|
|
@ -269,8 +393,13 @@
|
|||
<a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
|
||||
<a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
|
||||
<a-row type="flex" justify="center">
|
||||
<a-col>
|
||||
<h1 class="title">{{ i18n "pages.login.title" }}</h1>
|
||||
<a-col style="width: 100%;">
|
||||
<h1 class="title headline zoom">
|
||||
<span class="words-wrapper">
|
||||
<b class="is-visible">{{ i18n "pages.login.title" }}</b>
|
||||
<b>3X-UI</b>
|
||||
</span>
|
||||
</h1>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row type="flex" justify="center">
|
||||
|
|
@ -377,6 +506,42 @@
|
|||
},
|
||||
},
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var animationDelay = 2000;
|
||||
initHeadline();
|
||||
|
||||
function initHeadline() {
|
||||
animateHeadline(document.querySelectorAll('.headline'));
|
||||
}
|
||||
|
||||
function animateHeadline(headlines) {
|
||||
var duration = animationDelay;
|
||||
headlines.forEach(function(headline) {
|
||||
setTimeout(function() {
|
||||
hideWord(headline.querySelector('.is-visible'));
|
||||
}, duration);
|
||||
});
|
||||
}
|
||||
|
||||
function hideWord(word) {
|
||||
var nextWord = takeNext(word);
|
||||
switchWord(word, nextWord);
|
||||
setTimeout(function() {
|
||||
hideWord(nextWord);
|
||||
}, animationDelay);
|
||||
}
|
||||
|
||||
function takeNext(word) {
|
||||
return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild;
|
||||
}
|
||||
|
||||
function switchWord(oldWord, newWord) {
|
||||
oldWord.classList.remove('is-visible');
|
||||
oldWord.classList.add('is-hidden');
|
||||
newWord.classList.remove('is-hidden');
|
||||
newWord.classList.add('is-visible');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<a-input v-model.trim="fakednsModal.fakeDns.ipPool"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.fakedns.poolSize" }}'>
|
||||
<a-input type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input>
|
||||
<a-input-number style="width: 100%;" type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input-number>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
|
|
|||
|
|
@ -19,12 +19,14 @@
|
|||
color: hsla(0, 0%, 100%, .65);
|
||||
}
|
||||
|
||||
.ant-tag-df {
|
||||
color: rgb(0 0 0 / 80%);
|
||||
.dark .ant-card-hoverable:hover,
|
||||
.dark .ant-space-item > .ant-tabs:hover {
|
||||
transform: scale(0.987);
|
||||
outline-color: #40434d;
|
||||
}
|
||||
|
||||
.dark .ant-tag-df {
|
||||
color: rgb(255 255 255 / 80%);
|
||||
.dark .ant-card-bordered {
|
||||
outline: 2px solid var(--dark-color-background);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -102,8 +104,8 @@
|
|||
<a-col :sm="24" :lg="12">
|
||||
<a-card hoverable>
|
||||
<b>{{ i18n "pages.index.operationHours" }}:</b>
|
||||
<a-tag class="ant-tag-df">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
|
||||
<a-tag class="ant-tag-df">OS [[ formatSecond(status.uptime) ]]</a-tag>
|
||||
<a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
|
||||
<a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :lg="12">
|
||||
|
|
@ -137,7 +139,7 @@
|
|||
<a-col :sm="24" :lg="12">
|
||||
<a-card hoverable>
|
||||
<b>{{ i18n "pages.index.systemLoad" }}:</b>
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag color="green">
|
||||
<a-tooltip>
|
||||
[[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
|
||||
<template slot="title">
|
||||
|
|
@ -150,10 +152,10 @@
|
|||
<a-col :sm="24" :lg="12">
|
||||
<a-card hoverable>
|
||||
<b>{{ i18n "usage"}}:</b>
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag color="green">
|
||||
RAM [[ sizeFormat(status.appStats.mem) ]]
|
||||
</a-tag>
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag color="green">
|
||||
Threads [[ status.appStats.threads ]]
|
||||
</a-tag>
|
||||
</a-card>
|
||||
|
|
@ -162,7 +164,7 @@
|
|||
<a-card hoverable>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="global"></a-icon> IPv4
|
||||
<template slot="title">
|
||||
|
|
@ -172,7 +174,7 @@
|
|||
</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="global"></a-icon> IPv6
|
||||
<template slot="title">
|
||||
|
|
@ -188,7 +190,7 @@
|
|||
<a-card hoverable>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
|
||||
<template slot="title">
|
||||
|
|
@ -198,7 +200,7 @@
|
|||
</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
|
||||
<template slot="title">
|
||||
|
|
@ -214,7 +216,7 @@
|
|||
<a-card hoverable>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="arrow-up"></a-icon>
|
||||
Up: [[ sizeFormat(status.netIO.up) ]]/s
|
||||
|
|
@ -225,7 +227,7 @@
|
|||
</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="arrow-down"></a-icon>
|
||||
Down: [[ sizeFormat(status.netIO.down) ]]/s
|
||||
|
|
@ -242,7 +244,7 @@
|
|||
<a-card hoverable>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="cloud-upload"></a-icon>
|
||||
<template slot="title">
|
||||
|
|
@ -252,7 +254,7 @@
|
|||
</a-tag>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-tag class="ant-tag-df">
|
||||
<a-tag>
|
||||
<a-tooltip>
|
||||
<a-icon type="cloud-download"></a-icon>
|
||||
<template slot="title">
|
||||
|
|
|
|||
|
|
@ -95,15 +95,15 @@
|
|||
</a-alert>
|
||||
</transition>
|
||||
<a-space direction="vertical">
|
||||
<a-card hoverable style="margin-bottom: .5rem;">
|
||||
<a-row>
|
||||
<a-col :xs="24" :sm="8" style="padding: 4px;">
|
||||
<a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
|
||||
<a-row style="display: flex; flex-wrap: wrap; align-items: center;">
|
||||
<a-col :xs="24" :sm="10" style="padding: 4px;">
|
||||
<a-space direction="horizontal">
|
||||
<a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
|
||||
<a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="16">
|
||||
<a-col :xs="24" :sm="14">
|
||||
<template>
|
||||
<div>
|
||||
<a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
|
||||
|
|
|
|||
Loading…
Reference in a new issue