Optimize Dark Theme & Ultra Dark (#1889)

---------

Co-authored-by: MHSanaei <ho3ein.sanaei@gmail.com>
Co-authored-by: Alireza Ahmadi <alireza7@gmail.com>

16 files changed, 320 insertions, 215 deletions

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 @@
   }
 </style>
 <body>
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-  <transition name="list" appear>
-    <a-layout-content class="under" style="min-height: 0;">
-      <div class="waves-header">
-        <div class="waves-inner-header"></div>
-        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
-          <defs>
-            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-          </defs>
-          <g class="parallax">
-            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
-            <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
-          </g>
-        </svg>
-      </div>
-      <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 style="width: 100%;">
-              <h1 class="title headline zoom">
-                <span class="words-wrapper">
-                  <b class="is-visible">{{ i18n "pages.login.title" }}</b>
-                  <b>Hello!</b>
-                </span>
-              </h1>
-            </a-col>
-          </a-row>
-          <a-row type="flex" justify="center">
-            <a-col span="24">
-              <a-form>
-                <a-form-item>
-                  <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
-                    @keydown.enter.native="login" autofocus>
-                    <a-icon slot="prefix" type="user" style="font-size: 16px;" />
-                  </a-input>
-                </a-form-item>
-                <a-form-item>
-                  <password-input icon="lock" v-model.trim="user.password" placeholder='{{ i18n "password" }}'
-                    @keydown.enter.native="login">
-                  </password-input>
-                </a-form-item>
-                <a-form-item v-if="secretEnable">
-                  <password-input icon="key" v-model.trim="user.loginSecret" placeholder='{{ i18n "secretToken" }}'
-                    @keydown.enter.native="login">
-                  </password-input>
-                  </a-input>
-                </a-form-item>
-                <a-form-item>
-                  <a-row justify="center" class="centered">
-                    <div class="wave-btn-bg wave-btn-bg-cl"
-                      :style="loading ? { width: '52px' } : { display: 'inline-block' }">
-                      <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login"
-                        :icon="loading ? 'poweroff' : undefined">
-                        [[ loading ? '' : '{{ i18n "login" }}' ]]
-                      </a-button>
-                    </div>
-                  </a-row>
-                </a-form-item>
-                <a-form-item>
-                  <a-row justify="center" class="centered">
-                    <a-col :span="24">
-                      <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" style="width: 150px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
-                          <span role="img" aria-label="l.name" v-text="l.icon"></span>
-                          &nbsp;&nbsp;<span v-text="l.name"></span>
-                        </a-select-option>
-                      </a-select>
-                    </a-col>
-                  </a-row>
-                </a-form-item>
-                <a-form-item>
-                  <a-row justify="center" class="centered">
-                    <a-col>
-                      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>&nbsp;
-                    </a-col>
-                    <a-col>
-                      <theme-switch />
-                    </a-col>
-                  </a-row>
-                </a-form-item>
-              </a-form>
-            </a-col>
-          </a-row>
-        </a-col>
-      </a-row>
-    </a-layout-content>
-  </transition>
-</a-layout>
+  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+    <transition name="list" appear>
+      <a-layout-content class="under" style="min-height: 0;">
+        <div class="waves-header">
+          <div class="waves-inner-header"></div>
+          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+               viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+            <defs>
+              <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+            </defs>
+            <g class="parallax">
+              <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
+              <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
+              <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
+              <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
+            </g>
+          </svg>
+        </div>
+        <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 style="width: 100%;">
+                <h1 class="title headline zoom">
+                  <span class="words-wrapper">
+                    <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
+                    <b>{{ i18n "pages.login.title" }}</b>
+                  </span>
+                </h1>
+              </a-col>
+            </a-row>
+            <a-row type="flex" justify="center">
+              <a-col span="24">
+                <a-form>
+                  <a-form-item>
+                    <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
+                             @keydown.enter.native="login" autofocus>
+                      <a-icon slot="prefix" type="user" style="font-size: 16px;"></a-icon>
+                    </a-input>
+                  </a-form-item>
+                  <a-form-item>
+                    <password-input icon="lock" v-model.trim="user.password"
+                                    placeholder='{{ i18n "password" }}'
+                                    @keydown.enter.native="login">
+                    </password-input>
+                  </a-form-item>
+                  <a-form-item v-if="secretEnable">
+                    <password-input icon="key" v-model.trim="user.loginSecret"
+                                    placeholder='{{ i18n "secretToken" }}'
+                                    @keydown.enter.native="login">
+                    </password-input>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-row justify="center" class="centered">
+                      <div style="height: 50px;" class="wave-btn-bg wave-btn-bg-cl"
+                           :style="loading ? { width: '52px' } : { display: 'inline-block' }">
+                        <a-button class="ant-btn-primary-login" type="primary"
+                                  :loading="loading" @click="login"
+                                  :icon="loading ? 'poweroff' : undefined">
+                                  [[ loading ? '' : '{{ i18n "login" }}' ]]
+                        </a-button>
+                      </div>
+                    </a-row>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-row justify="center" class="centered">
+                      <a-col :span="24">
+                        <a-select ref="selectLang" v-model="lang"
+                                  @change="setLang(lang)" style="width: 150px;"
+                                  :dropdown-class-name="themeSwitcher.currentTheme">
+                          <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
+                            <span role="img" aria-label="l.name" v-text="l.icon"></span>
+                            &nbsp;&nbsp;<span v-text="l.name"></span>
+                          </a-select-option>
+                        </a-select>
+                      </a-col>
+                    </a-row>
+                  &l            
                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living