From 1fe38aadb7b8a5786b4a2c9b6972e013a93eba7d Mon Sep 17 00:00:00 2001
From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:18:55 +0330
Subject: [PATCH] Update custom.css

---
 web/assets/css/custom.css | 160 ++++++++++++++++++++++----------------
 1 file changed, 93 insertions(+), 67 deletions(-)

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 53c1168a..0b73ee32 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -1,16 +1,37 @@
 :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;
+    --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;
 }
 
 html,
@@ -31,7 +52,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 +62,7 @@ html {
 }
 
 ::selection {
-    color: #008771;
+    color: var(--color-primary-100);
     background-color: #cfe8e4;
 }
 
@@ -233,7 +254,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 +516,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 +544,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;
 }
 
@@ -543,7 +565,7 @@ style attribute {
 
 .dark .ant-calendar,
 .dark .ant-card-bordered {
-    border-color: var(--dark-color-background);
+    border-color: var(--dark-color-surface-100);
 }
 
 .dark .ant-table-bordered,
@@ -612,7 +634,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 +665,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 +675,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 +711,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 +721,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 +735,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 +759,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 +807,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 +827,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 +850,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 +867,7 @@ style attribute {
 }
 
 .dark .has-success .anticon {
-    color: #61bf39;
+    color: var(--color-primary-100);
     animation-name: diffZoomIn1 !important;
 }
 
@@ -888,19 +913,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 +959,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 +968,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 +1004,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 +1040,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 +1054,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 +1078,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 +1143,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,
@@ -1157,9 +1183,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 +1200,4 @@ b, strong {
 
 .dark .ant-alert-close-icon .anticon-close:hover {
     color: rgb(255 255 255);
-}
\ No newline at end of file
+}