Ultra Dark Theme for 3X-UI (#1871)

1 files changed, 87 insertions, 57 deletions

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 8eb5037f..f4a13b51 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -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);
+}