Skip to content

feat(ui): simplify connection list selected state styling #2026

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

Merged
ysfscream merged 11 commits into from
Jan 21, 2026
Merged

feat(ui): simplify connection list selected state styling #2026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1832c68
feat(ui): simplify connection list selected state styling
ysfscream Jan 20, 2026
a325909
feat(ui): improve unread message badge position and add mask effect
ysfscream Jan 20, 2026
5b74d54
feat(ui): refine message item styling and remove shadows
ysfscream Jan 20, 2026
f128faf
feat(ui): improve connection list and message item styling
ysfscream Jan 21, 2026
02aee92
feat(ui): remove connection topbar divider and improve tree selection
ysfscream Jan 21, 2026
0951dd7
feat(ui): improve subscription list styling and interactions
ysfscream Jan 21, 2026
0e77019
feat(ui): unify button styles and merge connect button group
ysfscream Jan 21, 2026
e73e2ce
feat(web): sync UI button styles from desktop
ysfscream Jan 21, 2026
fdf7653
feat(web): sync UI improvements from desktop
ysfscream Jan 21, 2026
6e345a4
feat(ui): redesign Payload Inspector with improved layout and interac…
ysfscream Jan 21, 2026
0b07008
fix(ui): fix navigation buttons height and hover consistency
ysfscream Jan 21, 2026
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
4 changes: 2 additions & 2 deletions src/assets/scss/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ body.select-none {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
border-radius: 8px;
background: var(--color-bg-scrollbar);
}
&::-webkit-scrollbar-corner {
Expand Down Expand Up @@ -146,7 +146,7 @@ textarea {
background-color: transparent;
border: 1px solid var(--color-main-green);
color: var(--color-main-green);
border-radius: 4px;
border-radius: 8px;
padding: 0 24px;
cursor: pointer;
}
2 changes: 1 addition & 1 deletion src/assets/scss/connections.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
box-shadow: 1px 0px 8px 0px var(--color-shadow-leftlist);
width: 260px;
height: 100%;
left: 81px;
left: 76px;
top: 0;
bottom: 0;
overflow-x: hidden;
Expand Down
6 changes: 3 additions & 3 deletions src/assets/scss/element/element-reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

/* Button */
.el-button--mini {
border-radius: 4px;
border-radius: 8px;
}
.el-button--outline {
background: var(--color-bg-normal);
Expand Down Expand Up @@ -359,9 +359,9 @@
.el-progress {
.el-progress-bar__outer {
background-color: var(--color-bg-code);
border-radius: 4px;
border-radius: 8px;
.el-progress-bar__inner {
border-radius: 4px;
border-radius: 8px;
}
}
.el-progress__text {
Expand Down
69 changes: 31 additions & 38 deletions src/assets/scss/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,91 +14,87 @@
pre {
white-space: pre-wrap;
word-wrap: break-word;
font-size: 13px;
line-height: 1.6;
}
p {
margin: 0px;
}
.left-info {
color: var(--color-text-left_info);
color: var(--color-text-title);
font-size: 13px;
font-weight: 500;
.qos {
color: var(--color-text-default);
}
}
.right-info {
color: var(--color-text-right_info);
}
.topic {
margin-right: 16px;
margin-right: 20px;
}
.retain {
margin-left: 16px;
font-size: 12px;
font-size: 11px;
color: var(--color-text-active);
background-color: #7e848885;
padding: 0 4px;
border-radius: 4px;
background-color: var(--color-main-yellow);
padding: 2px 8px;
border-radius: 8px;
float: right;
font-weight: 500;
}
.payload {
display: inline-block;
min-height: 41px;
max-width: 85%;
min-width: 20px;
margin: 10px 0 0px 0px;
padding: 10px;
padding: 14px 16px;
white-space: normal;
word-break: break-all;
}
.time {
color: var(--color-text-light);
margin-bottom: 5px;
font-size: 12px;
}
.properties {
margin-top: 10px;
padding-top: 6px;
border-top-width: 1px;
border-top-style: dashed;
&:last-child {
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: dashed;
}
margin-top: 12px;
padding-top: 10px;
&.left {
color: var(--color-text-left_info);
border-top-color: var(--color-border-left_metainfo);
&:last-child {
border-bottom-color: var(--color-border-left_metainfo);
}
color: var(--color-text-default);
}
&.right {
color: var(--color-text-right_info);
border-top-color: var(--color-text-right_metainfo);
&:last-child {
border-bottom-color: var(--color-border-right_metainfo);
}
}
}
.user-properties {
margin-top: 10px;
padding: 6px 0;
margin-top: 12px;
padding: 10px 0;
.key-value-editor.msg-item-props {
.editor-header {
margin-bottom: 10px;
margin-bottom: 12px;
.editor-title {
font-weight: 600;
font-size: 13px;
}
}
.el-input.is-disabled .el-input__inner {
background-color: transparent;
background-color: var(--color-bg-msg-input);
}
Comment on lines 83 to 85
Copy link

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--color-bg-msg-input is used for disabled input backgrounds here but isn’t defined anywhere in the theme files. Add this CSS variable to each theme (or provide a fallback) to avoid invalid CSS / inconsistent disabled input styling.

Copilot uses AI. Check for mistakes.
}
&.left {
.key-value-editor.msg-item-props {
.editor-title {
color: var(--color-text-left_info);
color: var(--color-text-title);
}
.el-input.is-disabled .el-input__inner {
color: var(--color-text-left_info);
border: 1px solid var(--color-border-left_metainfo);
color: var(--color-text-default);
border: 1px solid var(--color-border-default);
background-color: var(--color-bg-msg-input);
}
}
border: 1px dashed var(--color-border-left_metainfo);
border-right: none;
border-left: none;
}
&.right {
.key-value-editor.msg-item-props {
Expand All @@ -110,9 +106,6 @@
border: 1px solid var(--color-border-right_metainfo);
}
}
border: 1px dashed var(--color-border-right_metainfo);
border-right: none;
border-left: none;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scss/theme/custom/prism-one-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ div.code-toolbar {
background-color: var(--color-bg-normal);
border: 1px solid var(--color-border-default);
color: var(--color-text-default);
border-radius: 4px;
border-radius: 8px;
padding: 4px 8px;
cursor: pointer;
box-shadow: #00000014 0px 4px 12px;
Expand Down
2 changes: 1 addition & 1 deletion src/assets/scss/theme/custom/prism-one-light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ div.code-toolbar {
background-color: var(--color-bg-normal);
border: 1px solid var(--color-border-default);
color: var(--color-text-default);
border-radius: 4px;
border-radius: 8px;
padding: 4px 8px;
cursor: pointer;
box-shadow: #00000014 0px 4px 12px;
Expand Down
6 changes: 3 additions & 3 deletions src/assets/scss/theme/dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ body.dark {
--color-border-right_metainfo: #ffffff59;

/* Shadow color */
--color-shadow-leftlist: #00000061;
--color-shadow-sendbtn: #2dc17769;
--color-shadow-leftlist: #00000038;
--color-shadow-sendbtn: transparent;
--color-shadow-card: #00000059;
--color-shadow-message: #1f1f1f;
--color-shadow-message: transparent;
}
2 changes: 1 addition & 1 deletion src/assets/scss/theme/light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ body.light {
--color-text-light: #a2a9b0;
--color-text-tips: #b4b4b4;
--color-text-right_block: #34c388;
--color-text-right_info: #ffffffde;
--color-text-right_info: #ffffff;
--color-text-left_info: #00000075;
--color-text-active: #fff;
--color-text-leftbar_icon: #83929b;
Expand Down
6 changes: 3 additions & 3 deletions src/assets/scss/theme/night.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ body.night {
--color-border-right_metainfo: #ffffff54;

/* Shadow color */
--color-shadow-leftlist: #00000061;
--color-shadow-sendbtn: #2dc17769;
--color-shadow-leftlist: #00000038;
--color-shadow-sendbtn: transparent;
--color-shadow-card: #00000085;
--color-shadow-message: #151515;
--color-shadow-message: transparent;
}
106 changes: 98 additions & 8 deletions src/components/EmptyPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,25 +60,115 @@ export default class EmptyPage extends Vue {
</script>

<style lang="scss" scoped>
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}

@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.empty-page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
overflow: hidden;

&::before {
content: '';
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
pointer-events: none;
}

.empty-page__block {
text-align: center;
animation: fade-in-up 0.6s ease forwards;
position: relative;
z-index: 1;

img {
margin-bottom: 32px;
animation: float 4s ease-in-out infinite;
filter: drop-shadow(0 20px 40px rgba(16, 185, 129, 0.15));
}

.primary-btn {
background: linear-gradient(134deg, #37dc85 0%, #35ca8d 100%);
background: var(--color-bg-btn-gradient);
color: var(--color-text-active);
border: 1px solid #37dc85;
}
img {
margin-bottom: 20px;
border: none;
padding: 12px 28px;
font-size: 14px;
font-weight: 500;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.02em;

&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

&:active {
transform: translateY(0);
}

i {
margin-right: 6px;
}
}
text-align: center;

p {
margin: 24px auto;
max-width: 650px;
margin: 20px auto;
max-width: 500px;
color: var(--color-text-light);
font-size: 14px;
line-height: 1.6;

a {
color: var(--color-main-green);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
position: relative;

&::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--color-main-green);
transform: scaleX(0);
transition: transform 0.2s ease;
}

&:hover::after {
transform: scaleX(1);
}
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/FullMsgDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default class FullMsgDialog extends Vue {
background: var(--color-bg-normal);
border: 1px solid var(--color-border-default);
padding: 10px 1px 1px 1px;
border-radius: 4px;
border-radius: 8px;
}
}
</style>
Loading
Loading