From 8dc23f97b647b182df3faecff975498fee345e2c Mon Sep 17 00:00:00 2001 From: Alireza Ahmadi Date: Mon, 4 Dec 2023 19:04:28 +0100 Subject: Customize theme #1286 --- web/assets/css/custom.css | 696 +++++++++++++++++++++++++++++++--------------- 1 file changed, 474 insertions(+), 222 deletions(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 4e8bbd2e..ca7c7b87 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -7,6 +7,28 @@ body { overflow: hidden; } +body { + color: rgba(0,0,0,.65); + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5; + background-color: #fff; + font-feature-settings: "tnum"; +} +html { + --antd-wave-shadow-color: #0a7557; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +::selection { + color: #0a7557; + background-color: #0a755730; +} + #app { height: 100%; position: fixed; @@ -19,6 +41,73 @@ body { overflow: auto; } +.ant-layout, .ant-layout * { + box-sizing: border-box; +} + +.ant-spin-blur { + border-radius: 1.5rem; +} + +style attribute { + text-align: center; +} +.ant-table-tbody>tr>td, .ant-table-thead>tr>th { + padding: 16px; + overflow-wrap: break-word; +} +.ant-table-thead>tr>th { + color: rgba(0,0,0,.85); + font-weight: 500; + text-align: left; + border-bottom: 1px solid #e8e8e8; + transition: background .3s ease; +} +.ant-table-row-cell-break-word { + word-wrap: break-word; + word-break: break-word; +} + +.ant-table table { + width: 100%; + text-align: left; + border-radius: 1rem 1rem 0 0; + border-collapse: separate; + border-spacing: 0; +} +.ant-table { + box-sizing: border-box; + margin: 0; + padding: 0; + color: rgba(0,0,0,.65); + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5; + list-style: none; + font-feature-settings: "tnum"; + position: relative; + clear: both; +} +.ant-card-hoverable { + cursor: auto; + cursor: pointer; +} +.ant-card { + box-sizing: border-box; + margin: 0; + padding: 0; + color: rgba(0,0,0,.65); + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5; + list-style: none; + font-feature-settings: "tnum"; + position: relative; + background: #fff; + border-radius: 2px; + transition: all .3s; +} + .ant-space { width: 100%; } @@ -31,9 +120,21 @@ body { .ant-layout-sider { display: none; } + .ant-card { + margin: .5rem; + } + .ant-tabs { + margin: .5rem; + padding: .5rem; + } } -.ant-card { +.ant-layout-content { + min-height: auto; +} + +.ant-card, +.ant-tabs { border-radius: 1.5rem; } @@ -64,13 +165,78 @@ body { border-radius: 0 4px 4px 0; } +.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { + background-color: #0a7557 !important; + background-image: linear-gradient( 270deg, rgba(123, 199, 77, 0) 30%, #00ab80, rgba(123, 199, 77, 0) 100% ); + background-repeat: no-repeat; + animation: ma-bg-move linear 6.6s infinite; + color: #fff; + border-radius: 0.5rem +} +@-webkit-keyframes ma-bg-move { + 0% {background-position: -500px 0;} + 100% {background-position: 1000px 0;} +} +@keyframes ma-bg-move { + 0% {background-position: -500px 0;} + 50% {background-position: 1000px 0;} + 100% {background-position: 1000px 0;} +} +.ant-menu-item-active, +.ant-menu-item:hover, +.ant-menu-submenu-active, +.ant-menu-submenu-title:hover, +.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open{ + color:#0a7557; + background-color: #dce9f5; + border-radius: 0.5rem; +} + +.ant-menu-inline .ant-menu-item { + border-radius: 0.5rem; +} + +.ant-menu-inline .ant-menu-item:after, +.ant-menu { + border-right-width: 0; +} +.ant-layout-sider-children, +.ant-pagination ul { + margin-top:-.1px; + padding:0.5rem +} + +.ant-dropdown-menu, +.ant-select-dropdown-menu { + padding: .5rem; +} +.ant-dropdown-menu-item, +.ant-dropdown-menu-item:hover, +.ant-select-dropdown-menu-item, +.ant-select-dropdown-menu-item:hover, +.ant-select-dropdown-menu-item-selected, +.ant-select-selection--multiple .ant-select-selection__choice { + border-radius: .5rem; + margin-bottom: 2px; +} + @media (min-width: 769px) { .drawer-handle { display: none; } + .ant-tabs { + padding: 2rem; + } } -.fade-in-enter, .fade-in-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active { +.fade-in-enter, +.fade-in-leave-active, +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active, +.fade-in-linear-enter, +.fade-in-linear-leave, +.fade-in-linear-leave-active { opacity: 0 } @@ -165,6 +331,10 @@ body { transform: translateY(-30px) } +.ant-list-item-meta-title { + font-size: 14px; +} + .ant-progress-inner { background-color: #EBEEF5; } @@ -176,7 +346,7 @@ body { .ant-table-tbody>tr>td, .ant-table-thead>tr>th{ - padding:16px; + padding:16px 5px; } .ant-table-expand-icon-th, @@ -185,318 +355,400 @@ body { min-width: 30px; } -.ant-menu-dark, -.ant-menu-dark .ant-menu-sub, -.ant-layout-header, -.ant-layout-sider-dark, -.ant-layout-sider-zero-width-trigger, -.ant-dropdown-menu-dark,.ant-dropdown-menu-dark .ant-dropdown-menu, -.ant-menu-dark.ant-menu-horizontal>.ant-menu-item,.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu { - background:#1A202B +.ant-tabs { + background-color: white; } -.ant-card-dark { - color: hsla(0,0%,100%,.65); - background-color: #1a212a; - border-color:rgba(0,0,0,.09); +.ant-setting-textarea { + margin-top: 1.5rem; } -.ant-card-dark:hover { - /*border-color: #e8e8e8; - animation:light-shadow ease-in 3s infinite;*/ - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 80%); +.client-table-header { + background-color: #f0f2f5; } -/* -@keyframes light-shadow { - 0% { - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 60%); - } - 20% { - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 60%); - } - 60% { - box-shadow: 0 1px 11px 2px rgb(154 175 238 / 70%); - } - 100% { - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 60%); - } -}*/ -.ant-setting-textarea { - margin-top: 1.5rem; - min-height: 300px !important; - /*max-height: 800px !important;*/ +.client-table-odd-row { + background-color: #fafafa; } -.ant-card-dark-box-nohover{ - margin-top: .5rem; - padding: 0 20px 20px !important; - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important; -} -.ant-card-dark-box-nohover:hover{ - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important; - /*background-color: rgb(36 44 58 / 50%);*/ +.ant-table-pagination.ant-pagination { + float: left; } -.ant-card-dark-securitybox-nohover{ - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important; +/* change basic colors */ +.ant-tag-blue { + background-color: #edf4fa; + border-color: #a9c5e7; + color: #0a7557; } -.ant-card-dark-securitybox-nohover:hover{ - box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important; +.ant-tag-green { + background-color: #f6ffed; + border-color: #b7eb8f; + color: #389e0d; } - -/* .ant-card-bordered:hover { - box-shadow: 0 3px 12px -0.8px #0000005c; -} */ - -.ant-card-dark .ant-table-thead th { - color: hsla(0,0%,100%,.65); - background-color: #161b22; +.ant-tag-purple { + background-color: #f2eaf1; + border-color: #d5bed2; + color: #7a316f; +} +.ant-tag-orange, +.ant-alert-warning { + background-color:#fff6E6; + border-color: #ffd98c; + color: #ffa031; +} +.ant-tag-red, +.ant-alert-error { + background-color:#fff0f0; + border-color: #fb9d9d; + color: #e04141; } -.ant-card-dark .ant-table-tbody tr td, -.ant-card-dark .ant-modal-title { - color: hsla(0,0%,100%,.65); +.ant-input::placeholder{ + opacity: 0.5; } -.ant-card-dark .ant-collapse-content, -.ant-card-dark .ant-calendar, -.ant-card-dark .ant-table-placeholder, -.ant-card-dark .ant-select-selection__choice, -.ant-card-dark .ant-input-group-addon { - color: hsla(0,0%,100%,.65); - background-color: #262f3d; - border: 1px solid rgb(149 149 149 / 30%); +.ant-input:hover, +.ant-input:focus { + background-color: #edfaf9; } -.ant-card-dark .ant-list-item-meta-title, -.ant-card-dark .ant-list-item-meta-description, -.ant-card-dark .ant-form-item-label>label, -.ant-card-dark .ant-form-item, -.ant-card-dark .ant-divider-inner-text, -.ant-card-dark .ant-modal-confirm-content, -.ant-card-dark .ant-modal-confirm-title, -.ant-card-dark .ant-progress-text, -.ant-card-dark .ant-modal-close, -.ant-card-dark i, -.ant-card-dark .ant-select-dropdown-menu-item, -.ant-card-dark .ant-calendar-day-select, -.ant-card-dark .ant-calendar-month-select, -.ant-card-dark .ant-calendar-year-select, -.ant-card-dark .ant-calendar-date, -.ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header, -.ant-card-dark .ant-empty-normal, -.ant-card-dark .ant-checkbox+span { - color: hsla(0,0%,100%,.65); +.delete-icon:hover { + color: #E04141; } -.ant-card-dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td { - background-color: #11314d; +.normal-icon:hover { + color: #0a7557; } -.ant-card-dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled), -.ant-card-dark .ant-select-dropdown-menu-item-active, -.ant-card-dark .ant-calendar-date:hover, -.ant-card-dark li.ant-calendar-time-picker-select-option-selected { - background-color: rgb(4, 119, 90); +/* DARK THEME */ + +.dark ::selection { + color: #fff; + background-color: #0a7557; } -.ant-card-dark tbody .ant-table-expanded-row, -.ant-card-dark .ant-calendar-time-picker-inner { - color: hsla(0,0%,100%,.65); - background-color: #1a212a; +.dark .normal-icon:hover { + color: #ffffff; } -.ant-input-number { - min-width: 100px; +.dark .ant-layout-sider, +.dark .ant-drawer-content, +.ant-menu-dark, +.ant-menu-dark .ant-menu-sub, +.dark .ant-card, +.dark .ant-table, +.dark .ant-collapse-content, +.dark .ant-tabs { + background-color: #151F31; + color: #ffffffa6; } -.ant-card-dark .ant-input, -.ant-card-dark .ant-input-number, -.ant-card-dark .ant-input-number-handler-wrap, -.ant-card-dark .ant-calendar-input, -.ant-card-dark .ant-select-dropdown-menu-item-selected, -.ant-card-dark .ant-select-selection, -.ant-card-dark .ant-calendar-picker-clear { - color: hsla(0,0%,100%,.65); - background-color: rgb(46 59 82 / 50%); - border: 1px solid rgb(0 150 112 / 0%); +.dark .ant-card-hoverable:hover, +.dark .ant-space-item>.ant-tabs:hover { + box-shadow: 0 1px 10px -1px rgb(154 175 238 / 80%); } -.ant-layout:not(.login) .ant-input:focus, -.ant-layout:not(.login) .ant-input:hover, -.ant-layout:not(.login) .ant-input-number:focus, -.ant-layout:not(.login) .ant-input-number:hover, -.ant-layout:not(.login) .ant-calendar-input:focus, -.ant-layout:not(.login) .ant-calendar-input:hover { - background-color: rgba(0, 149, 111, 0.1); +.dark>.ant-layout, +.dark .drawer-handle, +.dark .ant-table-thead>tr>th, +.dark .ant-table-expanded-row, +.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%); +} + +.dark .ant-table-expanded-row .ant-table-thead>tr:first-child>th { + border-radius: 0; +} + +.dark .ant-calendar, +.dark .ant-card-bordered { + border-color: #151f31; +} + +.dark .ant-table-bordered, +.dark .ant-table-bordered.ant-table-empty .ant-table-placeholder, +.dark .ant-table-bordered .ant-table-body>table, +.dark .ant-table-bordered .ant-table-fixed-left table, +.dark .ant-table-bordered .ant-table-fixed-right table, +.dark .ant-table-bordered .ant-table-header>table, +.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; +} + +.dark .ant-table-tbody>tr>td, +.dark .ant-table-thead>tr>th, +.dark .ant-card-head, +.dark .ant-modal-header, +.dark .ant-collapse>.ant-collapse-item, +.dark .ant-tabs-bar, +.dark .ant-list-split .ant-list-item, +.dark .ant-popover-title, +.dark .ant-calendar-header, +.dark .ant-calendar-input-wrap { + border-bottom-color: #2C3950; +} + +.dark .ant-modal-footer, +.dark .ant-collapse-content, +.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; +} + +.dark .ant-progress-text, +.dark .ant-card-head, +.dark .ant-form, +.dark .ant-collapse>.ant-collapse-item>.ant-collapse-header, +.dark .ant-form-item i, +.dark .ant-modal-close-x, +.dark .ant-pagination-item a, +.dark li:not(.ant-pagination-disabled) i, +.dark .ant-form .anticon, +.dark .ant-tabs-tab-arrow-show:not(.ant-tabs-tab-btn-disabled), +.dark .anticon-close, +.dark .ant-list-item-meta-title, +.dark .ant-select-selection i, +.dark .ant-modal-confirm-title, +.dark .ant-modal-confirm-content, +.dark .ant-popover-message, +.dark .ant-modal, +.dark .ant-divider-inner-text, +.dark .ant-popover-title, +.dark .ant-popover-inner-content, +.dark h2 { + color: rgb(255 255 255 / 65%); } -.ant-card-dark .ant-select-disabled .ant-select-selection { - border: 1px solid rgba(255, 255, 255, 0.2); - background-color: #242c3a; +.dark .ant-list-item-meta-description { + color: rgb(255 255 255 / 45%); } -.ant-card-dark .ant-collapse-item { - color: hsla(0,0%,100%,.65); - background-color: #161b22; - border-radius: 0.5rem 0.5rem 0 0; +.dark .ant-pagination-disabled i, +.dark .ant-tabs-tab-btn-disabled { + color: rgb(255 255 255 / 25%); } -.ant-dropdown-menu-dark, -.ant-card-dark .ant-modal-content { - border:1px solid rgb(100 100 100 / 20%); - box-shadow: 0 2px 8px rgba(255,255,255,.15); +.dark .ant-input, +.dark .ant-input-group-addon, +.dark .ant-collapse, +.dark .ant-select-selection, +.dark .ant-input-number, +.dark .ant-input-number-handler-wrap, +.dark .ant-pagination-item-active, +.dark .ant-table-placeholder, +.dark .ant-empty-normal, +.dark.ant-select-dropdown, +.dark .ant-select-dropdown, +.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: rgb(255 255 255 / 65%); } -.ant-card-dark .ant-modal-content, -.ant-card-dark .ant-modal-body, -.ant-card-dark .ant-modal-header { - color: hsla(0,0%,100%,.65); - background-color: #222a37; +.dark .ant-select-selection:hover, +.dark .ant-calendar-picker-clear, +.dark .ant-input-number:hover, +.dark .ant-input-number:focus, +.dark .ant-input:hover, +.dark .ant-input:focus { + background-color: rgb(10 117 87 / 30%); + border-color: #0a7557; +} + +.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) { + color: rgb(255 255 255 / 65%); + background-color: rgb(10 117 87 / 30%); + border: 1px solid #0a7557; +} + +.dark .ant-radio-button-wrapper, +.dark .ant-radio-button-wrapper:before { + color: rgb(255 255 255 / 65%); + background-color: rgb(10 117 87 / 30%); + border-color: #0a7557; +} + +.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: #ffffff; + background-color: rgb(10 117 87 / 50%); + border-color: #0a7557; } -.ant-card-dark .ant-calendar-selected-day .ant-calendar-date { - background-color: rgb(0 150 112); +.dark .ant-btn-primary[disabled], +.dark .ant-calendar-ok-btn-disabled { + color: rgb(255 255 255 / 35%); + background-color: #2c3950; + border-color: #42516c; } -.ant-card-dark .ant-calendar-time-picker-select li:hover { - background: #1668dc; +.dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td, +.dark .client-table-odd-row { + background-color: #0A755722; } -.client-table-header { - background-color: #f0f2f5; +.dark .ant-table-row-expand-icon { + color: #fff; + background-color: #fff0; + border-color: #9ea2a8; } -.client-table-odd-row { - background-color: #fafafa; +.dark .ant-table-row-expand-icon:hover { + color: #0a7557; + background-color: #fff0; + border-color: #0a7557; } -.ant-card-dark .client-table-header { - background-color: #1a212a; - color: hsla(0,0%,100%,.65); +.dark .ant-switch:not(.ant-switch-checked) { + background-color: #2C3950; } -.ant-card-dark .client-table-odd-row { - color: hsla(0,0%,100%,.65); - background-color: #242c3a; +.dark .ant-progress-line .ant-progress-inner { + background-color: #2c3950; } -.ant-card-dark .ant-calendar-last-month-cell .ant-calendar-date, -.ant-card-dark .ant-calendar-next-month-btn-day .ant-calendar-date { - color: hsla(0,0%,100%,.30); +.dark .ant-progress-circle-trail { + stroke: #2c3950 !important; } -.ant-drawer-dark { - color: hsla(0,0%,100%,.65); +.ant-dropdown-menu-dark, +.dark .ant-popover-inner { + background-color: #222D42; } -.ant-drawer-dark .ant-drawer-wrapper-body, -.ant-drawer-dark .drawer-handle { - background-color: #1a212a; - border: 1px solid hsla(0,0%,100%,.30); +.dark>.ant-popover-content>.ant-popover-arrow { + border-color: #222D42; } -.ant-card-dark .ant-tag { - color: hsla(0,0%,100%,.65); - background: rgba(255,255,255,.04); - border-color: #434343; +.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; } -.ant-card-dark .ant-tag-blue { - color: #3c9ae8; - background: #111d2c; - border-color: #15395b; +.ant-menu-dark .ant-menu-item:hover { + background-color: #2c3950; } -.ant-card-dark .ant-tag-green { - color: #37b998; - background: #101e1a; - border-color: #144237; +.dark .ant-alert-message { + color: rgb(255 255 255 /85%); } -.ant-card-dark .ant-tag-cyan { - color: #33bcb7; - background: #112123; - border-color: #144848; +.dark .ant-tag { + color: rgb(255 255 255 / 65%); + background-color: #ffffff0a; + border-color: #344461; } -.ant-card-dark .ant-tag-red { - color: #e84749; - background: #2a1215; - border-color: #58181c; +.dark .ant-tag-blue { + background-color: #111a2c; + border-color: #0f367e; + color: #3c89e8; } -.ant-card-dark .ant-tag-orange { - color: #e89a3c; - background: #2b1d11; - border-color: #593815; +.dark .ant-tag-red, +.dark .ant-alert-error { + background-color: #291515; + border-color: #5C2626; + color: #e04141; } -.ant-card-dark .ant-table-row-expand-icon, -.ant-card-dark .ant-checkbox-inner { - background: none; +.dark .ant-tag-orange, +.dark .ant-alert-warning { + background-color: #312313; + border-color: #593914; + color: #ffa031; } -.ant-card-dark .ant-switch-checked { - background-color: #009670; +.dark .ant-tag-green { + background-color: #142429; + border-color: #23432c; + color: #61bf39; } -.ant-card-dark .ant-btn, -.ant-card-dark .ant-radio-button-wrapper { - color: hsla(0,0%,100%,.65); - background: none; - border: 1px solid hsla(0,0%,100%,.65); +.dark .ant-tag-purple { + background-color: #2c1e32; + border-color: #49394e; + color: #f2eaf1; } -.ant-card-dark .ant-radio-button-wrapper:hover { - color: #009670; +.dark .ant-modal-content, +.dark .ant-modal-header { + background-color: #181f2c; } -.ant-card-dark .ant-btn-primary { - color: hsla(0,0%,100%,.65); - background-color: rgb(7 98 75 / 50%); - border-color: #009670; - text-shadow: 0 -1px 0 rgba(255,255,255,.12); - box-shadow: 0 2px 0 rgba(255,255,255,.045); +.dark .ant-modal-title, +.dark .ant-form-item-label>label, +.dark .ant-checkbox-wrapper, +.dark .ant-form-item, +.dark .ant-calendar-footer .ant-calendar-today-btn, +.dark .ant-calendar-footer .ant-calendar-time-picker-btn, +.dark .ant-calendar-day-select, +.dark .ant-calendar-month-select, +.dark .ant-calendar-year-select, +.dark .ant-calendar-date { + color: rgb(255 255 255 / 65%); } -.ant-card-dark .ant-btn-primary:hover { - background-color: #009670; - border-color: #40a9ff00; + +.dark .ant-calendar-next-month-btn-day .ant-calendar-date, +.dark .ant-calendar-last-month-cell .ant-calendar-date { + color: #2c3950; } -.ant-dark .ant-popover-content { - border: 1px solid #e8e8e8; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(255,255,255,.15); +.dark .ant-calendar-selected-day .ant-calendar-date { + background-color: #0a7557 !important; + color: #fff; } -.ant-dark .ant-popover-inner { - background: #222a37; +.dark .ant-calendar-date:hover, +.dark .ant-calendar-time-picker-select li:hover { + background-color: #313f5a; + color: #fff; } -.ant-dark .ant-popover-title, -.ant-dark .ant-popover-inner-content { - color: hsla(0,0%,100%,.65); +.dark .ant-calendar-header a:hover, +.dark .ant-calendar-header a:hover::before, +.dark .ant-calendar-header a:hover::after { + border-color: #fff; } -.ant-dark .ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow { - border-color: transparent #2e3b52 #2e3b52 transparent; +.dark .ant-calendar-time-picker-select li:focus { + color: #ffffff; + font-weight: 600; + outline: none; + background-color: #0a7557; } -::-webkit-scrollbar { - width: 0.7em; +.dark .ant-calendar-time-picker-select { + border-right-color: #2C3950; } -::-webkit-scrollbar-track { - background: rgb(50 62 82 / 25%); +.dark .anticon-close-circle { + color: #E04141; } -::-webkit-scrollbar-thumb { - background: rgb(133 133 133 / 80%); - border-radius: 100vw; +.dark .ant-spin-nested-loading>div>.ant-spin .ant-spin-text { + text-shadow: 0 1px 2px #00000077; } -::-webkit-scrollbar-thumb:hover { - background: #919191; +.dark .ant-spin { + color: #ffffff; } + +.dark .ant-spin-dot-item { + background-color: #ffffffff; +} \ No newline at end of file -- cgit v1.2.3 From 6367b1c69f50696228804b23bbaf03f752be6c34 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Mon, 4 Dec 2023 23:14:55 +0330 Subject: fix color & stream view --- web/assets/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index ca7c7b87..cc11427d 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -683,7 +683,7 @@ style attribute { .dark .ant-tag-purple { background-color: #2c1e32; border-color: #49394e; - color: #f2eaf1; + color: #f7aeed; } .dark .ant-modal-content, -- cgit v1.2.3 From 1bbef6d612e4db7749497fef6b76611831d75494 Mon Sep 17 00:00:00 2001 From: Alireza Ahmadi Date: Tue, 5 Dec 2023 22:58:08 +0100 Subject: small theme fixes #1286 --- web/assets/css/custom.css | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index cc11427d..66085680 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -331,6 +331,10 @@ style attribute { transform: translateY(-30px) } +.ant-tooltip-inner { + min-height: 0; +} + .ant-list-item-meta-title { font-size: 14px; } @@ -506,7 +510,6 @@ style attribute { .dark .ant-card-head, .dark .ant-form, .dark .ant-collapse>.ant-collapse-item>.ant-collapse-header, -.dark .ant-form-item i, .dark .ant-modal-close-x, .dark .ant-pagination-item a, .dark li:not(.ant-pagination-disabled) i, @@ -589,6 +592,7 @@ style attribute { } .dark .ant-btn-primary[disabled], +.dark .ant-btn-danger[disabled], .dark .ant-calendar-ok-btn-disabled { color: rgb(255 255 255 / 35%); background-color: #2c3950; @@ -737,6 +741,20 @@ style attribute { border-right-color: #2C3950; } +.dark .has-warning .ant-input, +.dark .has-warning .ant-input:hover { + border-color: #faad14; +} + +.dark .has-warning .anticon { + color: #ffa031; +} + +.dark .has-success .anticon { + color: #61bf39; + animation-name: diffZoomIn1!important; +} + .dark .anticon-close-circle { color: #E04141; } @@ -751,4 +769,4 @@ style attribute { .dark .ant-spin-dot-item { background-color: #ffffffff; -} \ No newline at end of file +} -- cgit v1.2.3 From 68ee4e003c7189ca9530f8c1cb70a623ab47831c Mon Sep 17 00:00:00 2001 From: Alireza Ahmadi Date: Fri, 8 Dec 2023 19:44:09 +0100 Subject: css correction #1300 --- web/assets/css/custom.css | 563 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 418 insertions(+), 145 deletions(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 66085680..17f9c03e 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -8,7 +8,7 @@ body { } body { - color: rgba(0,0,0,.65); + color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; @@ -21,7 +21,7 @@ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; - -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } ::selection { @@ -41,7 +41,8 @@ html { overflow: auto; } -.ant-layout, .ant-layout * { +.ant-layout, +.ant-layout * { box-sizing: border-box; } @@ -52,16 +53,17 @@ html { style attribute { text-align: center; } -.ant-table-tbody>tr>td, .ant-table-thead>tr>th { +.ant-table-tbody > tr > td, +.ant-table-thead > tr > th { padding: 16px; overflow-wrap: break-word; } -.ant-table-thead>tr>th { - color: rgba(0,0,0,.85); +.ant-table-thead > tr > th { + color: rgba(0, 0, 0, 0.85); font-weight: 500; text-align: left; border-bottom: 1px solid #e8e8e8; - transition: background .3s ease; + transition: background 0.3s ease; } .ant-table-row-cell-break-word { word-wrap: break-word; @@ -79,7 +81,7 @@ style attribute { box-sizing: border-box; margin: 0; padding: 0; - color: rgba(0,0,0,.65); + color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; @@ -88,6 +90,9 @@ style attribute { position: relative; clear: both; } +.ant-table-body { + overflow-x: auto !important; +} .ant-card-hoverable { cursor: auto; cursor: pointer; @@ -96,16 +101,16 @@ style attribute { box-sizing: border-box; margin: 0; padding: 0; - color: rgba(0,0,0,.65); + color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; font-feature-settings: "tnum"; position: relative; - background: #fff; + background-color: #fff; border-radius: 2px; - transition: all .3s; + transition: all 0.3s; } .ant-space { @@ -121,11 +126,11 @@ style attribute { display: none; } .ant-card { - margin: .5rem; + margin: 0.5rem; } .ant-tabs { - margin: .5rem; - padding: .5rem; + margin: 0.5rem; + padding: 0.5rem; } } @@ -142,7 +147,7 @@ style attribute { cursor: auto; } -.ant-card+.ant-card { +.ant-card + .ant-card { margin-top: 20px; } @@ -159,7 +164,7 @@ style attribute { display: flex; justify-content: center; align-items: center; - background: #fff; + background-color: #fff; right: -40px; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); border-radius: 0 4px 4px 0; @@ -167,27 +172,45 @@ style attribute { .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { background-color: #0a7557 !important; - background-image: linear-gradient( 270deg, rgba(123, 199, 77, 0) 30%, #00ab80, rgba(123, 199, 77, 0) 100% ); + background-image: linear-gradient( + 270deg, + rgba(123, 199, 77, 0) 30%, + #00ab80, + rgba(123, 199, 77, 0) 100% + ); background-repeat: no-repeat; animation: ma-bg-move linear 6.6s infinite; color: #fff; - border-radius: 0.5rem + border-radius: 0.5rem; } + @-webkit-keyframes ma-bg-move { - 0% {background-position: -500px 0;} - 100% {background-position: 1000px 0;} + 0% { + background-position: -500px 0; + } + 100% { + background-position: 1000px 0; + } } + @keyframes ma-bg-move { - 0% {background-position: -500px 0;} - 50% {background-position: 1000px 0;} - 100% {background-position: 1000px 0;} + 0% { + background-position: -500px 0; + } + 50% { + background-position: 1000px 0; + } + 100% { + background-position: 1000px 0; + } } + .ant-menu-item-active, .ant-menu-item:hover, .ant-menu-submenu-active, .ant-menu-submenu-title:hover, -.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open{ - color:#0a7557; +.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open { + color: #0a7557; background-color: #dce9f5; border-radius: 0.5rem; } @@ -202,13 +225,13 @@ style attribute { } .ant-layout-sider-children, .ant-pagination ul { - margin-top:-.1px; - padding:0.5rem + margin-top: -0.1px; + padding: 0.5rem; } .ant-dropdown-menu, .ant-select-dropdown-menu { - padding: .5rem; + padding: 0.5rem; } .ant-dropdown-menu-item, .ant-dropdown-menu-item:hover, @@ -216,7 +239,7 @@ style attribute { .ant-select-dropdown-menu-item:hover, .ant-select-dropdown-menu-item-selected, .ant-select-selection--multiple .ant-select-selection__choice { - border-radius: .5rem; + border-radius: 0.5rem; margin-bottom: 2px; } @@ -237,98 +260,126 @@ style attribute { .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active { - opacity: 0 + opacity: 0; } -.fade-in-linear-enter-active, .fade-in-linear-leave-active { - -webkit-transition: opacity .2s linear; - transition: opacity .2s linear +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + -webkit-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; } -.fade-in-linear-enter-active, .fade-in-linear-leave-active { - -webkit-transition: opacity .2s linear; - transition: opacity .2s linear +.fade-in-linear-enter-active, +.fade-in-linear-leave-active { + -webkit-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; } -.fade-in-enter-active, .fade-in-leave-active { - -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); - transition: all .3s cubic-bezier(.55, 0, .1, 1) +.fade-in-enter-active, +.fade-in-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } -.zoom-in-center-enter-active, .zoom-in-center-leave-active { - -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); - transition: all .3s cubic-bezier(.55, 0, .1, 1) +.zoom-in-center-enter-active, +.zoom-in-center-leave-active { + -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } -.zoom-in-center-enter, .zoom-in-center-leave-active { +.zoom-in-center-enter, +.zoom-in-center-leave-active { opacity: 0; -webkit-transform: scaleX(0); - transform: scaleX(0) + transform: scaleX(0); } -.zoom-in-top-enter-active, .zoom-in-top-leave-active { +.zoom-in-top-enter-active, +.zoom-in-top-leave-active { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); - -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); - transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); - transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); - transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), + opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), + opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform-origin: center top; - transform-origin: center top + transform-origin: center top; } -.zoom-in-top-enter, .zoom-in-top-leave-active { +.zoom-in-top-enter, +.zoom-in-top-leave-active { opacity: 0; -webkit-transform: scaleY(0); - transform: scaleY(0) + transform: scaleY(0); } -.zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active { +.zoom-in-bottom-enter-active, +.zoom-in-bottom-leave-active { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); - -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); - transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); - transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); - transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), + opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), + opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform-origin: center bottom; - transform-origin: center bottom + transform-origin: center bottom; } -.zoom-in-bottom-enter, .zoom-in-bottom-leave-active { +.zoom-in-bottom-enter, +.zoom-in-bottom-leave-active { opacity: 0; -webkit-transform: scaleY(0); - transform: scaleY(0) + transform: scaleY(0); } -.zoom-in-left-enter-active, .zoom-in-left-leave-active { +.zoom-in-left-enter-active, +.zoom-in-left-leave-active { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); - -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); - transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); - transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); - transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), + opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), + opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), + -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform-origin: top left; - transform-origin: top left + transform-origin: top left; } -.zoom-in-left-enter, .zoom-in-left-leave-active { +.zoom-in-left-enter, +.zoom-in-left-leave-active { opacity: 0; - -webkit-transform: scale(.45, .45); - transform: scale(.45, .45) + -webkit-transform: scale(0.45, 0.45); + transform: scale(0.45, 0.45); } -.list-enter-active, .list-leave-active { - -webkit-transition: all .3s; - transition: all .3s +.list-enter-active, +.list-leave-active { + -webkit-transition: all 0.3s; + transition: all 0.3s; } -.list-enter, .list-leave-active { +.list-enter, +.list-leave-active { opacity: 0; -webkit-transform: translateY(-30px); - transform: translateY(-30px) + transform: translateY(-30px); } .ant-tooltip-inner { @@ -340,17 +391,17 @@ style attribute { } .ant-progress-inner { - background-color: #EBEEF5; + background-color: #ebeef5; } -.deactive-client .ant-collapse-header{ - color:rgb(255, 255, 255) !important; +.deactive-client .ant-collapse-header { + color: rgb(255, 255, 255) !important; background-color: rgb(255, 127, 127); } -.ant-table-tbody>tr>td, -.ant-table-thead>tr>th{ - padding:16px 5px; +.ant-table-tbody > tr > td, +.ant-table-thead > tr > th { + padding: 16px 5px; } .ant-table-expand-icon-th, @@ -397,28 +448,28 @@ style attribute { } .ant-tag-orange, .ant-alert-warning { - background-color:#fff6E6; + background-color: #fff6e6; border-color: #ffd98c; color: #ffa031; } .ant-tag-red, .ant-alert-error { - background-color:#fff0f0; + background-color: #fff0f0; border-color: #fb9d9d; color: #e04141; } -.ant-input::placeholder{ +.ant-input::placeholder { opacity: 0.5; } .ant-input:hover, .ant-input:focus { - background-color: #edfaf9; + background-color: #edf4fa; } .delete-icon:hover { - color: #E04141; + color: #e04141; } .normal-icon:hover { @@ -444,18 +495,18 @@ style attribute { .dark .ant-table, .dark .ant-collapse-content, .dark .ant-tabs { - background-color: #151F31; + background-color: #151f31; color: #ffffffa6; } .dark .ant-card-hoverable:hover, -.dark .ant-space-item>.ant-tabs:hover { +.dark .ant-space-item > .ant-tabs:hover { box-shadow: 0 1px 10px -1px rgb(154 175 238 / 80%); } -.dark>.ant-layout, +.dark > .ant-layout, .dark .drawer-handle, -.dark .ant-table-thead>tr>th, +.dark .ant-table-thead > tr > th, .dark .ant-table-expanded-row, .dark .ant-table-expanded-row:hover, .dark .ant-table-expanded-row .ant-table-tbody, @@ -464,7 +515,7 @@ style attribute { color: rgb(255 255 255 /65%); } -.dark .ant-table-expanded-row .ant-table-thead>tr:first-child>th { +.dark .ant-table-expanded-row .ant-table-thead > tr:first-child > th { border-radius: 0; } @@ -475,27 +526,27 @@ style attribute { .dark .ant-table-bordered, .dark .ant-table-bordered.ant-table-empty .ant-table-placeholder, -.dark .ant-table-bordered .ant-table-body>table, +.dark .ant-table-bordered .ant-table-body > table, .dark .ant-table-bordered .ant-table-fixed-left table, .dark .ant-table-bordered .ant-table-fixed-right table, -.dark .ant-table-bordered .ant-table-header>table, -.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; +.dark .ant-table-bordered .ant-table-header > table, +.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; } -.dark .ant-table-tbody>tr>td, -.dark .ant-table-thead>tr>th, +.dark .ant-table-tbody > tr > td, +.dark .ant-table-thead > tr > th, .dark .ant-card-head, .dark .ant-modal-header, -.dark .ant-collapse>.ant-collapse-item, +.dark .ant-collapse > .ant-collapse-item, .dark .ant-tabs-bar, .dark .ant-list-split .ant-list-item, .dark .ant-popover-title, .dark .ant-calendar-header, .dark .ant-calendar-input-wrap { - border-bottom-color: #2C3950; + border-bottom-color: #2c3950; } .dark .ant-modal-footer, @@ -509,7 +560,7 @@ style attribute { .dark .ant-progress-text, .dark .ant-card-head, .dark .ant-form, -.dark .ant-collapse>.ant-collapse-item>.ant-collapse-header, +.dark .ant-collapse > .ant-collapse-item > .ant-collapse-header, .dark .ant-modal-close-x, .dark .ant-pagination-item a, .dark li:not(.ant-pagination-disabled) i, @@ -525,17 +576,30 @@ style attribute { .dark .ant-divider-inner-text, .dark .ant-popover-title, .dark .ant-popover-inner-content, -.dark h2 { - color: rgb(255 255 255 / 65%); +.dark h2, +.dark .ant-modal-title, +.dark .ant-form-item-label > label, +.dark .ant-checkbox-wrapper, +.dark .ant-form-item, +.dark .ant-calendar-footer .ant-calendar-today-btn, +.dark .ant-calendar-footer .ant-calendar-time-picker-btn, +.dark .ant-calendar-day-select, +.dark .ant-calendar-month-select, +.dark .ant-calendar-year-select, +.dark .ant-calendar-date, +.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); } .dark .ant-list-item-meta-description { - color: rgb(255 255 255 / 45%); + color: rgba(255, 255, 255, 0.45); } .dark .ant-pagination-disabled i, .dark .ant-tabs-tab-btn-disabled { - color: rgb(255 255 255 / 25%); + color: rgba(255, 255, 255, 0.25); } .dark .ant-input, @@ -556,9 +620,9 @@ style attribute { .dark .client-table-header, .dark .ant-select-selection--multiple .ant-select-selection__choice, .dark .ant-calendar-time-picker-inner { - background-color: #222D42; + background-color: #222d42; border-color: #2c3950; - color: rgb(255 255 255 / 65%); + color: rgba(255, 255, 255, 0.65); } .dark .ant-select-selection:hover, @@ -572,7 +636,7 @@ style attribute { } .dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) { - color: rgb(255 255 255 / 65%); + color: rgba(255, 255, 255, 0.65); background-color: rgb(10 117 87 / 30%); border: 1px solid #0a7557; } @@ -580,13 +644,13 @@ style attribute { .dark .ant-radio-button-wrapper, .dark .ant-radio-button-wrapper:before { color: rgb(255 255 255 / 65%); - background-color: rgb(10 117 87 / 30%); + background-color: rgb(14 73 181 / 30%); border-color: #0a7557; } -.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: #ffffff; +.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: #0a7557; } @@ -599,7 +663,10 @@ style attribute { border-color: #42516c; } -.dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td, +.dark + .ant-table-tbody + > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) + > td, .dark .client-table-odd-row { background-color: #0A755722; } @@ -616,10 +683,7 @@ style attribute { border-color: #0a7557; } -.dark .ant-switch:not(.ant-switch-checked) { - background-color: #2C3950; -} - +.dark .ant-switch:not(.ant-switch-checked), .dark .ant-progress-line .ant-progress-inner { background-color: #2c3950; } @@ -630,11 +694,11 @@ style attribute { .ant-dropdown-menu-dark, .dark .ant-popover-inner { - background-color: #222D42; + background-color: #222d42; } -.dark>.ant-popover-content>.ant-popover-arrow { - border-color: #222D42; +.dark > .ant-popover-content > .ant-popover-arrow { + border-color: #222d42; } .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover, @@ -649,11 +713,11 @@ style attribute { } .dark .ant-alert-message { - color: rgb(255 255 255 /85%); + color: rgba(255, 255, 255, 0.85); } .dark .ant-tag { - color: rgb(255 255 255 / 65%); + color: rgba(255, 255, 255, 0.65); background-color: #ffffff0a; border-color: #344461; } @@ -667,7 +731,7 @@ style attribute { .dark .ant-tag-red, .dark .ant-alert-error { background-color: #291515; - border-color: #5C2626; + border-color: #5c2626; color: #e04141; } @@ -687,7 +751,7 @@ style attribute { .dark .ant-tag-purple { background-color: #2c1e32; border-color: #49394e; - color: #f7aeed; + color: #f2eaf1; } .dark .ant-modal-content, @@ -695,19 +759,6 @@ style attribute { background-color: #181f2c; } -.dark .ant-modal-title, -.dark .ant-form-item-label>label, -.dark .ant-checkbox-wrapper, -.dark .ant-form-item, -.dark .ant-calendar-footer .ant-calendar-today-btn, -.dark .ant-calendar-footer .ant-calendar-time-picker-btn, -.dark .ant-calendar-day-select, -.dark .ant-calendar-month-select, -.dark .ant-calendar-year-select, -.dark .ant-calendar-date { - color: rgb(255 255 255 / 65%); -} - .dark .ant-calendar-next-month-btn-day .ant-calendar-date, .dark .ant-calendar-last-month-cell .ant-calendar-date { color: #2c3950; @@ -731,19 +782,38 @@ style attribute { } .dark .ant-calendar-time-picker-select li:focus { - color: #ffffff; + color: #fff; font-weight: 600; outline: none; background-color: #0a7557; } .dark .ant-calendar-time-picker-select { - border-right-color: #2C3950; + border-right-color: #2c3950; +} + +.has-warning .ant-input, +.has-warning .ant-input:hover { + background-color: #fff6e6; + border-color: #ffd98c; +} + +.has-warning .ant-input::placeholder { + color: #faad14; +} + +.has-warning .ant-input:not([disabled]):hover { + border-color: #ffd98c; } .dark .has-warning .ant-input, .dark .has-warning .ant-input:hover { - border-color: #faad14; + border-color: #784e1d; + background: rgb(49, 35, 19); +} + +.dark .has-warning .ant-input::placeholder { + color: rgb(255 160 49 / 70%); } .dark .has-warning .anticon { @@ -752,21 +822,224 @@ style attribute { .dark .has-success .anticon { color: #61bf39; - animation-name: diffZoomIn1!important; + animation-name: diffZoomIn1 !important; } .dark .anticon-close-circle { - color: #E04141; + color: #e04141; } -.dark .ant-spin-nested-loading>div>.ant-spin .ant-spin-text { +.dark .ant-spin-nested-loading > div > .ant-spin .ant-spin-text { text-shadow: 0 1px 2px #00000077; } .dark .ant-spin { - color: #ffffff; + color: #fff; } .dark .ant-spin-dot-item { - background-color: #ffffffff; + background-color: #fff; +} + +.ant-menu, +.ant-radio-button-wrapper { + user-select: none; +} + +.ant-calendar-date:hover { + background-color: #dae9f5; +} + +.ant-calendar-date:active { + background-color: #dae9f5; + color: rgba(0, 0, 0, 0.65); +} + +.ant-calendar-today .ant-calendar-date { + color: #0a7557; + font-weight: 700; + border-color: #0a7557; +} + +.dark .ant-calendar-today .ant-calendar-date { + color: #fff; + font-weight: 700; + border-color: #0a7557; +} + +.ant-calendar-selected-day .ant-calendar-date { + background: #0a7557; + color: #ffffff; +} + +li.ant-select-dropdown-menu-item:empty:after { + content: "None"; + font-weight: normal; + color: rgba(0, 0, 0, 0.25); +} + +.dark li.ant-select-dropdown-menu-item:empty:after { + content: "None"; + font-weight: normal; + color: rgba(255, 255, 255, 0.3); +} + +.ant-select-dropdown.ant-select-dropdown--multiple + .ant-select-dropdown-menu-item:hover + .ant-select-selected-icon { + color: rgba(0, 0, 0, 0.87); +} + +.dark.ant-select-dropdown.ant-select-dropdown--multiple + .ant-select-dropdown-menu-item:hover + .ant-select-selected-icon { + color: rgb(255, 255, 255); +} + +.ant-select-dropdown.ant-select-dropdown--multiple + .ant-select-dropdown-menu-item-selected + .ant-select-selected-icon, +.ant-select-dropdown.ant-select-dropdown--multiple + .ant-select-dropdown-menu-item-selected:hover + .ant-select-selected-icon { + color: #3c89e8; +} +.ant-select-selection:hover, +.ant-input-number-focused, +.ant-input-number:hover { + background-color: #edf4fa; +} + +.dark .ant-input-number-handler:active { + background-color: #0a7557; +} + +.dark .ant-input-number-handler:hover .ant-input-number-handler-down-inner, +.dark .ant-input-number-handler:hover .ant-input-number-handler-up-inner { + color: #fff; +} + +.dark .ant-input-number-handler-down { + border-top: 1px solid rgba(217, 217, 217, 0.3); +} + +.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-century-select, +.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select, +.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-month-select, +.dark + .ant-calendar-year-panel-header + .ant-calendar-year-panel-year-select + .dark + .ant-calendar-month-panel-header + .ant-calendar-month-panel-century-select, +.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select, +.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-month-select, +.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-year-select { + color: rgba(255, 255, 255, 0.85); +} + +.dark .ant-calendar-year-panel-header { + border-bottom: 1px solid #222d42; +} + +.dark .ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year, +.dark .ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year { + color: rgba(255, 255, 255, 0.35); +} + +.dark .ant-calendar-year-panel-year:hover, +.dark .ant-calendar-month-panel-month:hover, +.dark .ant-calendar-decade-panel-decade:hover { + background-color: #222d42; +} + +.dark .ant-calendar-header a:hover { + color: #fff; +} + +.dark .ant-calendar-month-panel-header { + background-color: #101828; + border-bottom: 1px solid #222d42; +} + +.dark .ant-calendar-year-panel, +.dark .ant-calendar table { + background-color: #101828; +} + +.dark .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year, +.dark + .ant-calendar-year-panel-selected-cell + .ant-calendar-year-panel-year:hover, +.dark .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month, +.dark + .ant-calendar-month-panel-selected-cell + .ant-calendar-month-panel-month:hover, +.dark + .ant-calendar-decade-panel-selected-cell + .ant-calendar-decade-panel-decade, +.dark + .ant-calendar-decade-panel-selected-cell + .ant-calendar-decade-panel-decade:hover { + color: #fff; + background-color: #0a7557; +} + +.dark .ant-calendar-last-month-cell .ant-calendar-date, +.dark .ant-calendar-last-month-cell .ant-calendar-date:hover, +.dark .ant-calendar-next-month-btn-day .ant-calendar-date, +.dark .ant-calendar-next-month-btn-day .ant-calendar-date:hover { + color: rgb(255 255 255 / 25%); + background: transparent; + border-color: transparent; +} + +.dark .ant-calendar-today .ant-calendar-date:hover { + color: #fff; + border-color: #0a7557; + background-color: #0a7557; +} + +.dark + .ant-calendar-decade-panel-last-century-cell + .ant-calendar-decade-panel-decade, +.dark + .ant-calendar-decade-panel-next-century-cell + .ant-calendar-decade-panel-decade { + color: rgb(255 255 255 / 25%); +} + +.dark .ant-calendar-decade-panel-header { + border-bottom: 1px solid #222d42; + background-color: #101828; +} + +.dark .ant-checkbox-inner { + background-color: rgba(14, 73, 181, 0.3); + border-color: rgba(14, 73, 181, 0.3); +} + +.dark .ant-checkbox-checked .ant-checkbox-inner { + background-color: #0a7557; + border-color: #0a7557; +} + +.dark .ant-calendar-input { + background-color: #101828; +} + +.dark .ant-calendar-input::placeholder { + color: rgba(255, 255, 255, 0.25); +} + +.ant-input-number-handler-wrap { + border-radius: 0; +} + +.ant-input-number-handler { + border-radius: 0; +} + +.ant-input-number { + overflow: clip; } -- cgit v1.2.3 From 07019d659464f698755f7a83d920871f6a8a7c08 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Sat, 9 Dec 2023 01:06:22 +0330 Subject: better view --- web/assets/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 17f9c03e..93de4422 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -751,7 +751,7 @@ style attribute { .dark .ant-tag-purple { background-color: #2c1e32; border-color: #49394e; - color: #f2eaf1; + color: #cfb9cc; } .dark .ant-modal-content, -- cgit v1.2.3 From ad7d04fedaca660b6803e009a650ce82158e7a3d Mon Sep 17 00:00:00 2001 From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com> Date: Sun, 10 Dec 2023 16:01:29 +0330 Subject: Update custom.css --- web/assets/css/custom.css | 131 +++++++++++++++++++++++++++++----------------- 1 file changed, 82 insertions(+), 49 deletions(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 93de4422..b4ef0523 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -16,7 +16,7 @@ body { font-feature-settings: "tnum"; } html { - --antd-wave-shadow-color: #0a7557; + --antd-wave-shadow-color: #008771; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -25,8 +25,8 @@ html { } ::selection { - color: #0a7557; - background-color: #0a755730; + color: #008771; + background-color: #cfe8e4; } #app { @@ -171,11 +171,11 @@ style attribute { } .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { - background-color: #0a7557 !important; + background-color: #006655 !important; background-image: linear-gradient( 270deg, rgba(123, 199, 77, 0) 30%, - #00ab80, + #009980, rgba(123, 199, 77, 0) 100% ); background-repeat: no-repeat; @@ -210,8 +210,8 @@ style attribute { .ant-menu-submenu-active, .ant-menu-submenu-title:hover, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open { - color: #0a7557; - background-color: #dce9f5; + color: #008771; + background-color: rgb(232 244 242); border-radius: 0.5rem; } @@ -434,12 +434,12 @@ style attribute { .ant-tag-blue { background-color: #edf4fa; border-color: #a9c5e7; - color: #0a7557; + color: #0e49b5; } .ant-tag-green { - background-color: #f6ffed; - border-color: #b7eb8f; - color: #389e0d; + background-color: #eef9f7; + border-color: #89d9cc; + color: #00ad91; } .ant-tag-purple { background-color: #f2eaf1; @@ -448,15 +448,15 @@ style attribute { } .ant-tag-orange, .ant-alert-warning { - background-color: #fff6e6; - border-color: #ffd98c; - color: #ffa031; + background-color: #ffeee1; + border-color: #fec093; + color: #f37b24; } .ant-tag-red, .ant-alert-error { - background-color: #fff0f0; - border-color: #fb9d9d; - color: #e04141; + background-color: #ffe9e9; + border-color: #ff9e9e; + color: #cf3c3c; } .ant-input::placeholder { @@ -465,7 +465,7 @@ style attribute { .ant-input:hover, .ant-input:focus { - background-color: #edf4fa; + background-color: rgb(232 244 242); } .delete-icon:hover { @@ -473,14 +473,14 @@ style attribute { } .normal-icon:hover { - color: #0a7557; + color: #008771; } /* DARK THEME */ .dark ::selection { color: #fff; - background-color: #0a7557; + background-color: #008771; } .dark .normal-icon:hover { @@ -631,28 +631,28 @@ style attribute { .dark .ant-input-number:focus, .dark .ant-input:hover, .dark .ant-input:focus { - background-color: rgb(10 117 87 / 30%); - border-color: #0a7557; + background-color: rgba(0, 135, 113, 0.3); + border-color: #008771; } .dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) { color: rgba(255, 255, 255, 0.65); background-color: rgb(10 117 87 / 30%); - border: 1px solid #0a7557; + border: 1px solid #008771; } .dark .ant-radio-button-wrapper, .dark .ant-radio-button-wrapper:before { color: rgb(255 255 255 / 65%); - background-color: rgb(14 73 181 / 30%); - border-color: #0a7557; + background-color: rgba(0, 135, 113, 0.3); + border-color: #008771; } .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: #0a7557; + border-color: #008771; } .dark .ant-btn-primary[disabled], @@ -668,7 +668,7 @@ style attribute { > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .dark .client-table-odd-row { - background-color: #0A755722; + background-color: #00877122; } .dark .ant-table-row-expand-icon { @@ -678,9 +678,9 @@ style attribute { } .dark .ant-table-row-expand-icon:hover { - color: #0a7557; + color: #008771; background-color: #fff0; - border-color: #0a7557; + border-color: #008771; } .dark .ant-switch:not(.ant-switch-checked), @@ -743,9 +743,9 @@ style attribute { } .dark .ant-tag-green { - background-color: #142429; - border-color: #23432c; - color: #61bf39; + background-color: #121b2b; + border-color: #144840; + color: #33bca5; } .dark .ant-tag-purple { @@ -765,7 +765,7 @@ style attribute { } .dark .ant-calendar-selected-day .ant-calendar-date { - background-color: #0a7557 !important; + background-color: #008771 !important; color: #fff; } @@ -785,7 +785,7 @@ style attribute { color: #fff; font-weight: 600; outline: none; - background-color: #0a7557; + background-color: #008771; } .dark .ant-calendar-time-picker-select { @@ -847,28 +847,28 @@ style attribute { } .ant-calendar-date:hover { - background-color: #dae9f5; + background-color: rgb(232 244 242); } .ant-calendar-date:active { - background-color: #dae9f5; + background-color: rgb(232 244 242); color: rgba(0, 0, 0, 0.65); } .ant-calendar-today .ant-calendar-date { - color: #0a7557; + color: #008771; font-weight: 700; - border-color: #0a7557; + border-color: #008771; } .dark .ant-calendar-today .ant-calendar-date { color: #fff; font-weight: 700; - border-color: #0a7557; + border-color: #008771; } .ant-calendar-selected-day .ant-calendar-date { - background: #0a7557; + background: #008771; color: #ffffff; } @@ -907,11 +907,11 @@ li.ant-select-dropdown-menu-item:empty:after { .ant-select-selection:hover, .ant-input-number-focused, .ant-input-number:hover { - background-color: #edf4fa; + background-color: rgb(232 244 242); } .dark .ant-input-number-handler:active { - background-color: #0a7557; + background-color: #008771; } .dark .ant-input-number-handler:hover .ant-input-number-handler-down-inner, @@ -982,7 +982,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: #0a7557; + background-color: #008771; } .dark .ant-calendar-last-month-cell .ant-calendar-date, @@ -996,8 +996,8 @@ li.ant-select-dropdown-menu-item:empty:after { .dark .ant-calendar-today .ant-calendar-date:hover { color: #fff; - border-color: #0a7557; - background-color: #0a7557; + border-color: #008771; + background-color: #008771; } .dark @@ -1015,13 +1015,13 @@ li.ant-select-dropdown-menu-item:empty:after { } .dark .ant-checkbox-inner { - background-color: rgba(14, 73, 181, 0.3); - border-color: rgba(14, 73, 181, 0.3); + background-color: rgba(0, 135, 113, 0.3); + border-color: rgba(0, 135, 113, 0.3); } .dark .ant-checkbox-checked .ant-checkbox-inner { - background-color: #0a7557; - border-color: #0a7557; + background-color: #008771; + border-color: #008771; } .dark .ant-calendar-input { @@ -1043,3 +1043,36 @@ li.ant-select-dropdown-menu-item:empty:after { .ant-input-number { overflow: clip; } + +.ant-calendar-year-panel-year:hover, +.ant-calendar-decade-panel-decade:hover, +.ant-calendar-month-panel-month:hover, +.ant-dropdown-menu-item:hover, +.ant-dropdown-menu-submenu-title:hover, +.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled), +.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled), +.ant-table-tbody + > tr.ant-table-row-hover:not(.ant-table-expanded-row):not( + .ant-table-row-selected + ) + > td, +.ant-table-tbody + > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) + > td, +.ant-table-thead + > tr.ant-table-row-hover:not(.ant-table-expanded-row):not( + .ant-table-row-selected + ) + > td, +.ant-table-thead + > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) + > td { + 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; +} -- cgit v1.2.3 From 578ebf3cb572888128948d3b533737d7fda7cddd Mon Sep 17 00:00:00 2001 From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com> Date: Sun, 10 Dec 2023 17:04:20 +0330 Subject: Update custom.css --- web/assets/css/custom.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index b4ef0523..811bb32b 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -433,11 +433,11 @@ style attribute { /* change basic colors */ .ant-tag-blue { background-color: #edf4fa; - border-color: #a9c5e7; - color: #0e49b5; + border-color: #76ccb4; + color: #199270; } .ant-tag-green { - background-color: #eef9f7; + background-color: #eafff9; border-color: #89d9cc; color: #00ad91; } @@ -743,7 +743,7 @@ style attribute { } .dark .ant-tag-green { - background-color: #121b2b; + background-color: #112421; border-color: #144840; color: #33bca5; } -- cgit v1.2.3 From 848e549c0cdff9b21991e9bd2f6534f59b7a6b5b Mon Sep 17 00:00:00 2001 From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com> Date: Sun, 10 Dec 2023 17:06:16 +0330 Subject: Update custom.css --- web/assets/css/custom.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index 811bb32b..d2fad5a4 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -433,13 +433,13 @@ style attribute { /* change basic colors */ .ant-tag-blue { background-color: #edf4fa; - border-color: #76ccb4; - color: #199270; + border-color: #a9c5e7; + color: #0e49b5; } .ant-tag-green { background-color: #eafff9; - border-color: #89d9cc; - color: #00ad91; + border-color: #76ccb4; + color: #199270; } .ant-tag-purple { background-color: #f2eaf1; -- cgit v1.2.3