Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pref: Adjust ai panel style #717

Closed
wants to merge 5 commits into from
Closed

pref: Adjust ai panel style #717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05ad600
style: update interpret_panel styling
elliotxx Jan 11, 2025
44fd05e
style: improve re-scan and collapse button UI interactions
elliotxx Jan 11, 2025
3d9e409
style: update UI styling and enhance latency display
elliotxx Jan 11, 2025
c49e0ff
pref: ai result style pretty
hai-tian Jan 13, 2025
9563528
pref: ai result style pretty
hai-tian Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 56 additions & 31 deletions ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,45 +241,60 @@
.events_content_diagnosisPanel {
width: 400px;
height: 600px;
overflow: scroll;
border-radius: 12px;
display: flex;
flex-direction: column;
backdrop-filter: blur(8px);
z-index: 10;
background-image: radial-gradient(
ellipse 489px 674px at 6px 0px,
#fcf8ff 0%,
#ebd7ff 100%
),
radial-gradient(
ellipse 587px 672px at 433px 513px,
#dae4ffa1 0%,
#e1d2e704 100%
),
radial-gradient(
ellipse 346px 396px at 15px 506px,
#dae4ffa3 0%,
#e1d2e704 100%
),
radial-gradient(
ellipse 583px 668px at 436px 8px,
#f8f5ff 0%,
#f3e7f904 100%
);
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 24px rgba(149, 128, 247, 0.08),
0 2px 4px rgba(149, 128, 247, 0.12);
box-sizing: border-box;
border: 1px solid rgba(149, 128, 247, 0.15);
background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
#ffffff 0%,
#f3efff 100%),
radial-gradient(ellipse 587px 672px at 433px 513px,
#ece6ff95 0%,
#f0e9ff30 100%),
radial-gradient(ellipse 346px 396px at 15px 506px,
#e9e3ff90 0%,
#f0e9ff30 100%),
radial-gradient(ellipse 583px 668px at 436px 8px,
#ffffff 0%,
#f5f0ff30 100%);
position: relative;
overflow: hidden;

&::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center,
rgba(149, 128, 247, 0.03) 0%,
transparent 70%);
animation: rotate 60s linear infinite;
pointer-events: none;
}

.events_content_diagnosisHeader {
padding: 12px 16px;
border-bottom: 1px solid rgba(149, 128, 247, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-bottom: 1px solid rgba(147, 112, 219, 0.2);
border-radius: 12px 12px 0 0;
color: #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
font-size: 16px;
font-weight: 500;
backdrop-filter: blur(4px);
color: #000;
backdrop-filter: blur(8px);
background: linear-gradient(to right,
rgba(255, 255, 255, 0.95),
rgba(243, 239, 255, 0.95));


.events_content_diagnosisHeader_aiIcon {
width: 18px;
Expand Down Expand Up @@ -397,8 +412,8 @@

.events_content_diagnosisContent {
color: #000;
border-radius: 12px;
padding: 16px;
border-radius: 0 0 12px 12px;
padding: 20px 16px;
font-size: 14px;
line-height: 1.6;
box-sizing: border-box;
Expand All @@ -419,7 +434,7 @@

h2 {
font-size: 18px;
margin-top: 24px;
margin-top: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(147, 112, 219, 0.2);
}
Expand Down Expand Up @@ -910,3 +925,13 @@
transform: scale(1);
}
}

@keyframes rotate {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}
22 changes: 1 addition & 21 deletions ui/src/pages/insightDetail/components/exceptionList/style.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,26 +431,6 @@
rgba(243, 239, 255, 0.95)
);

.interpret_title {
font-weight: 500;
background: linear-gradient(90deg, #7c66ff, #6b4fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
gap: 8px;

.interpret_icon {
width: 18px;
height: 18px;

img {
width: 100%;
height: 100%;
}
}
}

.interpret_header_stopButton {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
width: 28px;
Expand Down Expand Up @@ -620,7 +600,7 @@

h2 {
font-size: 18px;
margin-top: 24px;
margin-top: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(147, 112, 219, 0.2);
}
Expand Down
Loading