This is an automated email from the ASF dual-hosted git repository.
zhengqiwei pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new 2947ee218 chore: update ui theme (#3682)
2947ee218 is described below
commit 2947ee218e7d0aa3a5829c7eb4bcb9aa8f89f2aa
Author: tomsun28 <tomsu...@outlook.com>
AuthorDate: Fri Aug 22 22:37:51 2025 +0800
chore: update ui theme (#3682)
Signed-off-by: tomsun28 <tomsu...@outlook.com>
Co-authored-by: Calvin <zhengqi...@apache.org>
---
web-app/src/app/layout/basic/basic.component.less | 296 ++++++++++++++++++++-
.../app/routes/dashboard/dashboard.component.html | 6 +-
.../help-message-show.component.html | 5 +-
.../help-message-show.component.less | 81 +++++-
web-app/src/assets/color.less | 6 +-
web-app/src/styles/index.less | 147 ++++++++++
6 files changed, 521 insertions(+), 20 deletions(-)
diff --git a/web-app/src/app/layout/basic/basic.component.less
b/web-app/src/app/layout/basic/basic.component.less
index 4e007f4b1..7dd6dddf8 100644
--- a/web-app/src/app/layout/basic/basic.component.less
+++ b/web-app/src/app/layout/basic/basic.component.less
@@ -2,11 +2,23 @@
/* Import system theme variables */
@import 'src/styles/theme.less';
+/* CSS Variables for theme support */
:host {
+ /* Light theme variables */
+ --background-color: #f5f7fa;
+ --sidebar-background: #ffffff;
+ --content-background: #ffffff;
+ --border-color: rgba(255, 255, 255, 0.2);
+ --shadow-color: rgba(0, 0, 0, 0.06);
+ --primary-color: @primary-color;
+ --primary-color-light: lighten(@primary-color, 10%);
+
display: block; /* Change to block layout to avoid extra whitespace */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: var(--background-color);
+ min-height: 100vh;
@media (max-width: 1200px) {
.page-header-item {
@@ -20,6 +32,288 @@
}
}
+/* Dark theme variables */
+:host.dark {
+ --background-color: #141414;
+ --sidebar-background: #1f1f1f;
+ --content-background: #1f1f1f;
+ --border-color: rgba(255, 255, 255, 0.1);
+ --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Dark theme support for ng-alain */
+:host ::ng-deep .dark {
+ --background-color: #141414;
+ --sidebar-background: #1f1f1f;
+ --content-background: #1f1f1f;
+ --border-color: rgba(255, 255, 255, 0.1);
+ --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Global dark theme support */
+[data-theme='dark'] :host,
+.dark :host {
+ --background-color: #141414;
+ --sidebar-background: #1f1f1f;
+ --content-background: #1f1f1f;
+ --border-color: rgba(255, 255, 255, 0.1);
+ --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Modern Layout Styles with Rounded Separation - Complete Override */
+:host ::ng-deep {
+ /* Reset all default ng-alain positioning - exclude header items */
+ .alain-default {
+ position: static !important;
+ transform: none !important;
+ left: auto !important;
+ right: auto !important;
+ top: auto !important;
+ bottom: auto !important;
+ }
+
+ .alain-default__aside,
+ .alain-default__content {
+ position: static !important;
+ transform: none !important;
+ left: auto !important;
+ right: auto !important;
+ top: auto !important;
+ bottom: auto !important;
+ }
+
+ /* Layout container styling with CSS Grid */
+ .alain-default {
+ background-color: var(--background-color, #f5f7fa) !important;
+ padding: 12px !important;
+ display: grid !important;
+ grid-template-columns: 200px 1fr !important;
+ grid-template-rows: 64px 1fr !important;
+ grid-template-areas:
+ "header header"
+ "sidebar content" !important;
+ gap: 12px !important;
+ min-height: 100vh !important;
+ box-sizing: border-box !important;
+ }
+
+ /* Collapsed sidebar layout */
+ .alain-default.alain-default__collapsed {
+ grid-template-columns: 64px 1fr !important;
+ }
+
+ /* Header modern styling */
+ .alain-default__header {
+ grid-area: header !important;
+ background: linear-gradient(135deg, var(--primary-color, @primary-color)
0%, var(--primary-color-light, lighten(@primary-color, 10%)) 100%) !important;
+ box-shadow: 0 4px 20px var(--shadow-color, rgba(0, 0, 0, 0.08)) !important;
+ border-radius: 16px !important;
+ backdrop-filter: blur(10px) !important;
+ transition: all 0.3s ease !important;
+ position: relative !important;
+ z-index: 10 !important;
+ margin: 0 !important;
+ width: 100% !important;
+ height: 64px !important;
+ display: flex !important;
+ align-items: center !important;
+ overflow: hidden !important;
+ }
+
+ /* Ensure header items are visible and properly positioned */
+ .alain-default__header-item,
+ .alain-default__header .alain-default__header-logo,
+ .alain-default__header .alain-default__header-trigger,
+ .alain-default__header .alain-default__header-action,
+ .alain-default__nav-item,
+ header-notify,
+ header-user,
+ header-search {
+ position: relative !important;
+ z-index: 11 !important;
+ display: flex !important;
+ align-items: center !important;
+ }
+
+ /* Fix notification badge positioning */
+ .alain-default__nav-item .ant-badge,
+ .alain-default__nav-item nz-badge {
+ display: inline-flex !important;
+ align-items: center !important;
+ }
+
+ /* Sidebar modern styling */
+ .alain-default__aside {
+ grid-area: sidebar !important;
+ background: var(--sidebar-background, #ffffff) !important;
+ border-radius: 16px !important;
+ box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.06)) !important;
+ border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2)) !important;
+ backdrop-filter: blur(20px) !important;
+ overflow: hidden !important;
+ transition: all 0.3s ease !important;
+ position: relative !important;
+ margin: 0 !important;
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ .alain-default__aside::after {
+ display: none !important; /* Remove default border */
+ }
+
+ /* Content area modern styling */
+ .alain-default__content {
+ grid-area: content !important;
+ background: var(--content-background, #ffffff) !important;
+ border-radius: 16px !important;
+ box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.06)) !important;
+ border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2)) !important;
+ backdrop-filter: blur(20px) !important;
+ overflow: auto !important;
+ transition: all 0.3s ease !important;
+ position: relative !important;
+ margin: 0 !important;
+ padding: 12px !important;
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ /* Sidebar navigation modern styling */
+ .sidebar-nav__item {
+ margin: 4px 12px;
+ border-radius: 12px;
+ border-left: none;
+ transition: all 0.3s ease;
+ overflow: hidden;
+ }
+
+ .sidebar-nav__item:hover {
+ background: linear-gradient(135deg, rgba(63, 81, 181, 0.08) 0%, rgba(63,
81, 181, 0.04) 100%);
+ transform: translateX(4px);
+ }
+
+ .sidebar-nav__selected {
+ background: linear-gradient(135deg, rgba(63, 81, 181, 0.12) 0%, rgba(63,
81, 181, 0.08) 100%);
+ border-left: none;
+ border-radius: 12px;
+ position: relative;
+ }
+
+ .sidebar-nav__selected::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 24px;
+ background: linear-gradient(135deg, @primary-color 0%,
lighten(@primary-color, 20%) 100%);
+ border-radius: 0 4px 4px 0;
+ }
+
+ .sidebar-nav__item-link {
+ padding: 12px 16px;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+ font-weight: 500;
+ }
+
+ .sidebar-nav__selected > .sidebar-nav__item-link {
+ font-weight: 600;
+ }
+
+ /* Header items modern styling */
+ .alain-default__nav-item {
+ border-radius: 8px;
+ margin: 0 4px;
+ transition: all 0.3s ease;
+ }
+
+ .alain-default__nav-item:hover {
+ background-color: rgba(255, 255, 255, 0.15) !important;
+ transform: translateY(-1px);
+ }
+
+ /* Search component modern styling */
+ .alain-default__search {
+ .ant-input-affix-wrapper {
+ border-radius: 20px;
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ backdrop-filter: blur(10px);
+ transition: all 0.3s ease;
+ }
+
+ .ant-input-affix-wrapper:hover,
+ .ant-input-affix-wrapper:focus {
+ background: rgba(255, 255, 255, 0.25);
+ border-color: rgba(255, 255, 255, 0.4);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
+ }
+
+ /* Logo area styling */
+ .alain-default__header-logo {
+ border-radius: 12px;
+ margin: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .alain-default__header-logo:hover {
+ transform: scale(1.02);
+ }
+
+ /* Responsive design */
+ @media (max-width: 768px) {
+ .alain-default {
+ padding: 4px;
+ }
+
+ .alain-default__header {
+ border-radius: 12px;
+ }
+
+ .alain-default__aside {
+ margin-top: 4px;
+ border-radius: 12px;
+ }
+
+ .alain-default__content {
+ margin-top: 4px;
+ margin-left: 4px;
+ border-radius: 12px;
+ }
+ }
+
+ /* Dark theme support */
+ [data-theme='dark'] & {
+ :host {
+ background-color: #141414;
+ }
+
+ .alain-default__aside {
+ background: #1f1f1f;
+ border-color: rgba(255, 255, 255, 0.1);
+ }
+
+ .alain-default__content {
+ background: #1f1f1f;
+ border-color: rgba(255, 255, 255, 0.1);
+ }
+
+ .sidebar-nav__item:hover {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.04) 100%);
+ }
+
+ .sidebar-nav__selected {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.08) 100%);
+ }
+ }
+}
+
/* Footer styles */
global-footer {
text-align: center;
@@ -198,4 +492,4 @@ global-footer {
.chatbot-input input {
flex: 1;
margin-right: 8px;
-}
\ No newline at end of file
+}
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html
b/web-app/src/app/routes/dashboard/dashboard.component.html
index 19e2692db..a3aa73891 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.html
+++ b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -18,7 +18,7 @@
-->
<div class="mobile-hide">
- <ngx-slick-carousel style="margin-top: 70px" nz-row class="carousel"
[config]="slideConfig">
+ <ngx-slick-carousel nz-row class="carousel" [config]="slideConfig">
<div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
<div class="mb-md hoverCard">
<div nz-row nzAlign="middle" class="bg-primary rounded-lg">
@@ -288,7 +288,7 @@
</ngx-slick-carousel>
</div>
-<div nz-row nzGutter="16" style="margin-top: 25px; height: 400px">
+<div nz-row nzGutter="16" style="margin-top: 25px; height: 500px">
<div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }"
style="height: 100%">
<nz-spin [nzSpinning]="wordCloudDataLoading">
<angular-tag-cloud
@@ -391,7 +391,7 @@
</div>
</div>
-<div nz-row nzGutter="16" style="margin-top: 25px; height: 320px">
+<div nz-row nzGutter="16" style="margin-top: 25px; height: 420px">
<div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 15
}" class="mb-md timeline-card" style="height: 100%">
<nz-spin [nzSpinning]="alertContentLoading">
<nz-card nzHoverable [nzTitle]="alertCardTitleTemplate"
[nzExtra]="extraTemplate" style="height: inherit; overflow: hidden">
diff --git
a/web-app/src/app/shared/components/help-message-show/help-message-show.component.html
b/web-app/src/app/shared/components/help-message-show/help-message-show.component.html
index dbeb4c0e9..10ce38268 100644
---
a/web-app/src/app/shared/components/help-message-show/help-message-show.component.html
+++
b/web-app/src/app/shared/components/help-message-show/help-message-show.component.html
@@ -39,11 +39,10 @@
<button class="handover_button_content" id="handover_button_self"
(click)="handleButtonClick()">{{
'common.button.' + collapse_expand | i18n
}}</button>
- <i nz-icon (click)="handleButtonClick()">
- <svg viewBox="64 64 896 896" focusable="false" fill="#000000"
width="1.12em" height="1.12em" data-icon="alert" aria-hidden="true">
+ <i nz-icon (click)="handleButtonClick()" class="help-toggle-icon">
+ <svg viewBox="64 64 896 896" focusable="false" width="1.12em"
height="1.12em" data-icon="alert" aria-hidden="true">
<path
d="M550.4 793.6L490.666667 853.333333l-59.733334-59.733333L256
618.666667l59.733333-59.733334 174.933334 174.933334 174.933333-174.933334
59.733333 59.733334-174.933333 174.933333zM490.666667 332.8l-174.933334
174.933333L256 448l174.933333-174.933333L490.666667 213.333333l59.733333
59.733334 174.933333 174.933333-59.733333 59.733333-174.933333-174.933333z"
- fill="#000000"
p-id="3525"
></path>
</svg>
diff --git
a/web-app/src/app/shared/components/help-message-show/help-message-show.component.less
b/web-app/src/app/shared/components/help-message-show/help-message-show.component.less
index 477013409..3f6f97b69 100644
---
a/web-app/src/app/shared/components/help-message-show/help-message-show.component.less
+++
b/web-app/src/app/shared/components/help-message-show/help-message-show.component.less
@@ -1,16 +1,18 @@
.help_message_div {
- margin-top: 60px;
width: 100%;
max-height: 140px;
overflow-y: hidden;
- box-shadow: inset 1px 4px 6px 1px rgb(0 0 0 / 0.05);
+ box-shadow: inset 1px 4px 6px 1px rgba(0, 0, 0, 0.05);
+ background-color: var(--help-message-bg, #ffffff);
+ color: var(--help-message-text, rgba(0, 0, 0, 0.85));
}
.collapsed_content{
overflow-y: hidden;
max-height: 131.2px;
}
.help_message_nav_item {
- color: gray;
+ color: var(--help-message-nav-text, #8c8c8c);
+ transition: color 0.3s ease;
}
.help_link_nav_item {
@@ -23,7 +25,7 @@
.level1_breadcrumb {
height: 28.8px;
- background-color: rgba(0, 0, 0, 0.05);
+ background-color: var(--help-message-breadcrumb-bg, rgba(0, 0, 0, 0.05));
}
.menu_name {
@@ -39,7 +41,16 @@
}
.level2_message_show::-webkit-scrollbar-track {
- background-color: rgba(63, 81, 181, 0.38);
+ background-color: var(--help-message-scrollbar-track, rgba(63, 81, 181,
0.38));
+}
+
+.level2_message_show::-webkit-scrollbar-thumb {
+ background-color: var(--help-message-scrollbar-thumb, rgba(63, 81, 181,
0.6));
+ border-radius: 4px;
+}
+
+.level2_message_show::-webkit-scrollbar-thumb:hover {
+ background-color: var(--help-message-scrollbar-thumb-hover, rgba(63, 81,
181, 0.8));
}
.help_link_content {
@@ -65,11 +76,11 @@
}
.help_message_nav_item:hover {
- color: #282828;
+ color: var(--help-message-nav-hover, #282828);
}
.help_message_nav:hover {
- border-bottom: 2px solid rgba(116, 54, 157, 0.79);
+ border-bottom: 2px solid var(--help-message-nav-border-hover, rgba(116, 54,
157, 0.79));
}
.help_link_nav {
@@ -85,7 +96,7 @@
float: left;
height: 13px;
width: 2px;
- background-color: rgba(0, 0, 0, 0.44);
+ background-color: var(--help-message-divider, rgba(0, 0, 0, 0.44));
margin-top: 8.5px;
margin-left: 22px;
}
@@ -105,22 +116,38 @@
}
.hover_blue:hover {
- color: #2b4acb;
+ color: var(--help-message-link-hover, #2b4acb);
}
.handover_button_content {
border: none;
background-color: transparent;
+ color: var(--help-message-button-text, rgba(0, 0, 0, 0.85));
+ transition: color 0.3s ease;
}
.handover_button_content:hover {
- color: #282828;
+ color: var(--help-message-button-hover, #282828);
}
.help_link_span {
margin-right: 6px;
}
+.help-toggle-icon {
+ cursor: pointer;
+ transition: color 0.3s ease;
+
+ svg {
+ fill: var(--help-message-button-text, rgba(0, 0, 0, 0.85));
+ transition: fill 0.3s ease;
+ }
+
+ &:hover svg {
+ fill: var(--help-message-button-hover, #282828);
+ }
+}
+
.help_com_icon {
width: 22px;
height: 22px;
@@ -131,3 +158,37 @@
float: left;
}
+:host {
+ --help-message-bg: #ffffff;
+ --help-message-text: rgba(0, 0, 0, 0.85);
+ --help-message-nav-text: #8c8c8c;
+ --help-message-nav-hover: #282828;
+ --help-message-breadcrumb-bg: rgba(0, 0, 0, 0.05);
+ --help-message-nav-border-hover: rgba(116, 54, 157, 0.79);
+ --help-message-divider: rgba(0, 0, 0, 0.44);
+ --help-message-link-hover: #2b4acb;
+ --help-message-button-text: rgba(0, 0, 0, 0.85);
+ --help-message-button-hover: #282828;
+ --help-message-scrollbar-track: rgba(63, 81, 181, 0.38);
+ --help-message-scrollbar-thumb: rgba(63, 81, 181, 0.6);
+ --help-message-scrollbar-thumb-hover: rgba(63, 81, 181, 0.8);
+}
+
+[data-theme='dark'] :host,
+:host.dark,
+.dark :host {
+ --help-message-bg: #1f1f1f;
+ --help-message-text: rgba(255, 255, 255, 0.85);
+ --help-message-nav-text: rgba(255, 255, 255, 0.65);
+ --help-message-nav-hover: rgba(255, 255, 255, 0.85);
+ --help-message-breadcrumb-bg: rgba(255, 255, 255, 0.08);
+ --help-message-nav-border-hover: rgba(116, 54, 157, 0.79);
+ --help-message-divider: rgba(255, 255, 255, 0.3);
+ --help-message-link-hover: #4096ff;
+ --help-message-button-text: rgba(255, 255, 255, 0.85);
+ --help-message-button-hover: rgba(255, 255, 255, 0.95);
+ --help-message-scrollbar-track: rgba(255, 255, 255, 0.1);
+ --help-message-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+ --help-message-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+}
+
diff --git a/web-app/src/assets/color.less b/web-app/src/assets/color.less
index ae3da562f..16a9a4fab 100644
--- a/web-app/src/assets/color.less
+++ b/web-app/src/assets/color.less
@@ -2084,11 +2084,11 @@ body {color: rgba(0, 0, 0, 0.85);background-color:
#f5f7fa;}
.alain-default__aside-inner::-webkit-scrollbar-thumb {background-color:
transparent;}
.alain-default__progress-bar {background: rgba(221, 221, 221, 0.4);}
.sidebar-nav__item {border-left: 3px solid transparent;}
-.sidebar-nav__item-link {color: rgba(0, 0, 0, 0.85);}
-.sidebar-nav__item-link:hover {color: @primary-color;}
+.sidebar-nav__item-link {color: rgba(0, 0, 0, 0.85); font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans
GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-weight: 500;}
+.sidebar-nav__item-link:hover {color: @primary-color; font-weight: 500;}
.sidebar-nav__item-disabled:hover {color: rgba(0, 0, 0, 0.85);}
.sidebar-nav__selected {background-color: #fcfcfc;border-left-color:
@primary-color;}
-.sidebar-nav__selected > .sidebar-nav__item-link {color: @primary-color;}
+.sidebar-nav__selected > .sidebar-nav__item-link {color: @primary-color;
font-weight: 600;}
.sidebar-nav__group-title {color: rgba(0, 0, 0, 0.45);}
.sidebar-nav__sub .sidebar-nav__item {border-left: 0 !important;}
.sidebar-nav__sub-arrow::before, .sidebar-nav__sub-arrow::after {background:
#fff;background-image: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0,
0, 0, 0.85));border-radius: 2px;}
diff --git a/web-app/src/styles/index.less b/web-app/src/styles/index.less
index 144259a1c..042f07380 100644
--- a/web-app/src/styles/index.less
+++ b/web-app/src/styles/index.less
@@ -4,3 +4,150 @@
display: none;
}
}
+
+/* Modern UI Enhancements */
+body {
+ background-color: #f5f7fa;
+ transition: background-color 0.3s ease;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+ font-weight: 400;
+}
+
+[data-theme='dark'] body {
+ background-color: #141414;
+}
+
+/* Smooth scrolling */
+html {
+ scroll-behavior: smooth;
+}
+
+/* Enhanced card styling */
+.ant-card {
+ border-radius: 12px !important;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
+ border: 1px solid rgba(0, 0, 0, 0.06) !important;
+ transition: all 0.3s ease !important;
+}
+
+.ant-card:hover {
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
+ transform: translateY(-2px) !important;
+}
+
+[data-theme='dark'] .ant-card {
+ background-color: #1f1f1f !important;
+ border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Enhanced button styling */
+.ant-btn {
+ transition: all 0.3s ease !important;
+}
+
+.ant-btn:hover {
+ transform: translateY(-1px) !important;
+}
+
+/* Enhanced table styling */
+.ant-table {
+ border-radius: 12px !important;
+ overflow: hidden !important;
+}
+
+.ant-table-thead > tr > th {
+ background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%) !important;
+ border-bottom: 2px solid #e8e8e8 !important;
+}
+
+[data-theme='dark'] .ant-table-thead > tr > th {
+ background: linear-gradient(135deg, #262626 0%, #1f1f1f 100%) !important;
+ border-bottom-color: #434343 !important;
+}
+
+/* Enhanced modal styling */
+.ant-modal-content {
+ border-radius: 16px !important;
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* Enhanced form styling */
+.ant-form-item {
+ margin-bottom: 20px !important;
+}
+
+.ant-input,
+.ant-input-number,
+.ant-select-selector {
+ transition: all 0.3s ease !important;
+}
+
+.ant-input:focus,
+.ant-input-number:focus,
+.ant-select-focused .ant-select-selector {
+ transform: translateY(-1px) !important;
+ box-shadow: 0 4px 12px rgba(63, 81, 181, 0.15) !important;
+}
+
+/* Enhanced pagination styling */
+.ant-pagination-item {
+ transition: all 0.3s ease !important;
+}
+
+.ant-pagination-item:hover {
+ transform: translateY(-1px) !important;
+}
+
+/* Enhanced tag styling */
+.ant-tag {
+ transition: all 0.3s ease !important;
+}
+
+.ant-tag:hover {
+ transform: translateY(-1px) !important;
+}
+
+/* Loading animation enhancement */
+.ant-spin-dot {
+ animation: antSpinMove 1s infinite linear !important;
+}
+
+@keyframes antSpinMove {
+ to {
+ opacity: 1;
+ transform: rotate(405deg);
+ }
+}
+
+/* Custom scrollbar styling */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.04);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 4px;
+ transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.04);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@hertzbeat.apache.org
For additional commands, e-mail: notifications-h...@hertzbeat.apache.org
