frost-craft/frost-mqtt-client
1
0
Fork 0
Code Releases 1 Activity

refactor: 整理代码，使用 Less

Browse Source
This commit is contained in:
Frost-ZX
2026-07-21 21:17:43 +08:00
parent 7ec0ad36ba
commit e491dd78bf
7 changed files with 355 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/renderer/src/App.vue
+73 -39
View File
@@ -172,7 +172,38 @@ function handleSwitchTab(tab) {
</n-config-provider> </n-config-provider>
</template> </template>
<style> <style lang="less">
:root {
--frost-primary-color: #0ea5a0;
--frost-primary-color-hover: #0b8c87;
--frost-primary-color-pressed: #0b8c87;
--frost-primary-color-suppl: #0ea5a0;
--frost-success-color: #22c55e;
--frost-success-color-hover: #16a34a;
--frost-success-color-pressed: #15803d;
--frost-success-color-suppl: #22c55e;
--frost-warning-color: #f59e0b;
--frost-warning-color-hover: #d97706;
--frost-warning-color-pressed: #b45309;
--frost-warning-color-suppl: #f59e0b;
--frost-error-color: #ef4444;
--frost-error-color-hover: #dc2626;
--frost-error-color-pressed: #b91c1c;
--frost-error-color-suppl: #ef4444;
--frost-info-color: #3b82f6;
--frost-info-color-hover: #2563eb;
--frost-info-color-pressed: #1d4ed8;
--frost-info-color-suppl: #3b82f6;
--frost-color-text-tertiary: #999;
--frost-color-topic: #d25a00;
--frost-color-bg-light: #f5f7fa;
--frost-color-bg-item: #fafafa;
--frost-shadow-black-4: rgba(0, 0, 0, 0.04);
--frost-shadow-black-6: rgba(0, 0, 0, 0.06);
--frost-shadow-black-8: rgba(0, 0, 0, 0.08);
--frost-shadow-black-12: rgba(0, 0, 0, 0.12);
}
html, body, #app { html, body, #app {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -189,12 +220,12 @@ html, body, #app {
padding: 0 0 16px 0; padding: 0 0 16px 0;
height: calc(100vh - 50px); height: calc(100vh - 50px);
overflow: hidden; overflow: hidden;
}
.dashboard-content { &.dashboard-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
}
} }
.dashboard-scroll-wrapper { .dashboard-scroll-wrapper {
@@ -210,29 +241,27 @@ html, body, #app {
gap: 12px; gap: 12px;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
}
.publish-panel, .publish-panel,
.messages-panel { .messages-panel {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
} }
.publish-panel { .publish-panel {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
} }
.messages-panel { .messages-panel {
height: 100%; height: 100%;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.message-center-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@@ -242,22 +271,27 @@ html, body, #app {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(144, 147, 153, 0.5) transparent; scrollbar-color: rgba(144, 147, 153, 0.5) transparent;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
}
::-webkit-scrollbar-track { &-track {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.5); &-thumb {
border-radius: 4px; background-color: rgba(144, 147, 153, 0.5);
} border-radius: 4px;
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 147, 153, 0.8); &:hover {
} background-color: rgba(144, 147, 153, 0.8);
::-webkit-scrollbar-corner { }
display: none; }
background-color: transparent;
&-corner {
display: none;
background-color: transparent;
}
} }
</style> </style>
app/src/renderer/src/components/Sidebar.vue
+34 -34
View File
@@ -216,7 +216,7 @@ async function handleImportFile(event) {
</n-layout-sider> </n-layout-sider>
</template> </template>
<style scoped> <style scoped lang="less">
:deep(.sidebar-scroll-container) { :deep(.sidebar-scroll-container) {
height: 100%; height: 100%;
overflow: hidden !important; overflow: hidden !important;
@@ -242,7 +242,7 @@ async function handleImportFile(event) {
.sidebar-logo { .sidebar-logo {
width: 32px; width: 32px;
height: 32px; height: 32px;
background: #0ea5a0; background: var(--frost-primary-color);
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -278,15 +278,19 @@ async function handleImportFile(event) {
margin-bottom: 4px; margin-bottom: 4px;
border: 1px solid transparent; border: 1px solid transparent;
transition: all 0.15s; transition: all 0.15s;
}
.server-item:hover { &:hover {
background: var(--n-color-hover); background: var(--n-color-hover);
}
.server-item.active { .server-actions {
background: var(--n-color-pressed); opacity: 1;
border-color: #0ea5a0; }
}
&.active {
background: var(--n-color-pressed);
border-color: var(--frost-primary-color);
}
} }
.server-item-top { .server-item-top {
@@ -310,23 +314,19 @@ async function handleImportFile(event) {
transition: opacity 0.15s; transition: opacity 0.15s;
} }
.server-item:hover .server-actions {
opacity: 1;
}
.server-url { .server-url {
margin-top: 4px; margin-top: 4px;
overflow: hidden; overflow: hidden;
}
.server-url :deep(.n-tag) { :deep(.n-tag) {
max-width: 100%; max-width: 100%;
} }
.server-url :deep(.n-tag__content) { :deep(.n-tag__content) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
.server-bottom { .server-bottom {
@@ -347,23 +347,23 @@ async function handleImportFile(event) {
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
margin-right: 2px; margin-right: 2px;
}
.status-dot.connected { &.connected {
background: #22c55e; background: var(--frost-success-color);
} }
.status-dot.connecting { &.connecting {
background: #f59e0b; background: var(--frost-warning-color);
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
.status-dot.disconnected { &.disconnected {
background: #999; background: var(--frost-color-text-tertiary);
} }
.status-dot.error { &.error {
background: #ef4444; background: var(--frost-error-color);
}
} }
@keyframes pulse { @keyframes pulse {
app/src/renderer/src/views/Dashboard.vue
+28 -26
View File
@@ -189,25 +189,27 @@ async function handleToggleConnection(srv) {
</div> </div>
</template> </template>
<style scoped> <style scoped lang="less">
.dashboard { .dashboard {
max-width: 900px; max-width: 900px;
} }
.server-descriptions :deep(.n-descriptions-table) { .server-descriptions {
table-layout: fixed; :deep(.n-descriptions-table) {
width: 100%; table-layout: fixed;
} width: 100%;
}
.server-descriptions :deep(.n-descriptions-table-header), :deep(.n-descriptions-table-header),
.server-descriptions :deep(.n-descriptions-table-content) { :deep(.n-descriptions-table-content) {
width: 25%; width: 25%;
} }
.server-descriptions :deep(.n-descriptions-table-content) { :deep(.n-descriptions-table-content) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
.status-dot { .status-dot {
@@ -215,23 +217,23 @@ async function handleToggleConnection(srv) {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
}
.status-dot.connected { &.connected {
background: #22c55e; background: var(--frost-success-color);
} }
.status-dot.connecting { &.connecting {
background: #f59e0b; background: var(--frost-warning-color);
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
.status-dot.disconnected { &.disconnected {
background: #999; background: var(--frost-color-text-tertiary);
} }
.status-dot.error { &.error {
background: #ef4444; background: var(--frost-error-color);
}
} }
@keyframes pulse { @keyframes pulse {
app/src/renderer/src/views/Messages.vue
+33 -27
View File
@@ -154,29 +154,29 @@ function formatPayload(payload) {
</template> </template>
<style scoped> <style scoped lang="less">
.messages-view { .messages-view {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
}
.messages-view :deep(.n-card) { :deep(.n-card) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.messages-view :deep(.n-card__content) { :deep(.n-card__content) {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
}
} }
.msg-log { .msg-log {
background: #f5f7fa; background: var(--frost-color-bg-light);
border-radius: 6px; border-radius: 6px;
padding: 12px; padding: 12px;
height: 100%; height: 100%;
@@ -192,7 +192,7 @@ function formatPayload(payload) {
.msg-entry { .msg-entry {
padding: 8px 0; padding: 8px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid var(--frost-shadow-black-6);
} }
.msg-header { .msg-header {
@@ -203,45 +203,51 @@ function formatPayload(payload) {
} }
.msg-time { .msg-time {
color: #999; color: var(--frost-color-text-tertiary);
flex-shrink: 0; flex-shrink: 0;
} }
.msg-dir { .msg-dir {
flex-shrink: 0; flex-shrink: 0;
font-weight: 700; font-weight: 700;
width: 28px; width: 28px;
&.pub {
color: var(--frost-info-color);
}
&.sub {
color: var(--frost-success-color);
}
} }
.msg-dir.pub {
color: #3b82f6;
}
.msg-dir.sub {
color: #22c55e;
}
.msg-topic { .msg-topic {
color: #d25a00; color: var(--frost-color-topic);
min-width: 0; min-width: 0;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
&:hover {
text-decoration: underline;
}
} }
.msg-topic:hover {
text-decoration: underline;
}
.msg-payload { .msg-payload {
margin: 6px 0 0; margin: 6px 0 0;
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
background: rgba(0, 0, 0, 0.04); background: var(--frost-shadow-black-4);
color: #333; color: #333;
font: inherit; font: inherit;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.msg-meta { .msg-meta {
color: #999; color: var(--frost-color-text-tertiary);
font-size: 11px; font-size: 11px;
flex-shrink: 0; flex-shrink: 0;
} }
app/src/renderer/src/views/Publish.vue
+75 -75
View File
@@ -299,7 +299,7 @@ async function copyTopic(topic) {
</template> </template>
<style scoped> <style scoped lang="less">
.publish-view { .publish-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -307,61 +307,61 @@ async function copyTopic(topic) {
height: 100%; height: 100%;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
}
.publish-view :deep(.n-tabs) { :deep(.n-tabs) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.publish-view :deep(.n-tabs-nav) { :deep(.n-tabs-nav) {
flex-shrink: 0; flex-shrink: 0;
} }
.publish-view :deep(.n-tabs-pane-wrapper) { :deep(.n-tabs-pane-wrapper) {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
} }
.publish-view :deep(.n-tabs-tab-panels), :deep(.n-tabs-tab-panels),
.publish-view :deep(.n-tabs-pane-wrapper) { :deep(.n-tabs-pane-wrapper) {
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.publish-view :deep(.n-tab-pane) { :deep(.n-tab-pane) {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.publish-view :deep(.n-tab-pane > .n-card) { :deep(.n-tab-pane > .n-card) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.publish-view :deep(.n-card__content) { :deep(.n-card__content) {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
}
.publish-view :deep(.n-card__content > div) { > div {
height: 100%; height: 100%;
min-height: 0; min-height: 0;
}
}
} }
.topic-field { .topic-field {
width: 100%; width: 100%;
}
.topic-field :deep(.n-form-item-blank) { :deep(.n-form-item-blank) {
width: 100%; width: 100%;
}
} }
.publish-form { .publish-form {
@@ -369,34 +369,34 @@ async function copyTopic(topic) {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
}
.publish-form .payload-field { .payload-field {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.publish-form .payload-field :deep(.n-form-item-blank) { :deep(.n-form-item-blank) {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
.publish-form .payload-field :deep(.n-input) { :deep(.n-input) {
height: 100%; height: 100%;
} }
.publish-form .payload-field :deep(.n-input__textarea-el), :deep(.n-input__textarea-el),
.publish-form .payload-field :deep(textarea) { :deep(textarea) {
resize: none !important; resize: none !important;
height: 100% !important; height: 100% !important;
min-height: 0 !important; min-height: 0 !important;
font-family: monospace; font-family: monospace;
}
}
} }
.msg-log { .msg-log {
background: #f5f7fa; background: var(--frost-color-bg-light);
border-radius: 6px; border-radius: 6px;
padding: 12px; padding: 12px;
height: 100%; height: 100%;
@@ -411,7 +411,7 @@ async function copyTopic(topic) {
.msg-entry { .msg-entry {
padding: 8px 0; padding: 8px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid var(--frost-shadow-black-6);
} }
.msg-header { .msg-header {
@@ -422,7 +422,7 @@ async function copyTopic(topic) {
} }
.msg-time { .msg-time {
color: #999; color: var(--frost-color-text-tertiary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -430,31 +430,31 @@ async function copyTopic(topic) {
flex-shrink: 0; flex-shrink: 0;
font-weight: 700; font-weight: 700;
width: 28px; width: 28px;
}
.msg-dir.pub { &.pub {
color: #3b82f6; color: var(--frost-info-color);
}
} }
.msg-topic { .msg-topic {
color: #d25a00; color: var(--frost-color-topic);
min-width: 0; min-width: 0;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
}
.msg-topic:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
} }
.msg-payload { .msg-payload {
margin: 6px 0 0; margin: 6px 0 0;
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
background: rgba(0, 0, 0, 0.04); background: var(--frost-shadow-black-4);
color: #333; color: #333;
font: inherit; font: inherit;
white-space: pre-wrap; white-space: pre-wrap;
@@ -462,7 +462,7 @@ async function copyTopic(topic) {
} }
.msg-meta { .msg-meta {
color: #999; color: var(--frost-color-text-tertiary);
font-size: 11px; font-size: 11px;
flex-shrink: 0; flex-shrink: 0;
} }
app/src/renderer/src/views/QuickSend.vue
+67 -63
View File
@@ -664,7 +664,7 @@ onUnmounted(() => {
</template> </template>
<style scoped> <style scoped lang="less">
.quick-send-view { .quick-send-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -672,19 +672,19 @@ onUnmounted(() => {
height: 100%; height: 100%;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
}
.quick-send-view :deep(.n-card) { :deep(.n-card) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.quick-send-view :deep(.n-card__content) { :deep(.n-card__content) {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
}
} }
.quick-list { .quick-list {
@@ -696,18 +696,18 @@ onUnmounted(() => {
gap: 12px; gap: 12px;
padding-right: 4px; padding-right: 4px;
align-content: start; align-content: start;
}
.quick-list.columns-1 { &.columns-1 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.quick-list.columns-2 { &.columns-2 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.quick-list.columns-3 { &.columns-3 {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
}
} }
.payload-field { .payload-field {
@@ -715,29 +715,29 @@ onUnmounted(() => {
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
width: 100%; width: 100%;
}
.payload-field :deep(.n-input) { :deep(.n-input) {
width: 100%; width: 100%;
} }
.payload-field .n-button { .n-button {
align-self: flex-end; align-self: flex-end;
}
} }
.quick-item { .quick-item {
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid var(--frost-shadow-black-8);
border-radius: 6px; border-radius: 6px;
padding: 12px; padding: 12px;
background: #fafafa; background: var(--frost-color-bg-item);
cursor: grab; cursor: grab;
transition: box-shadow 0.2s, opacity 0.2s; transition: box-shadow 0.2s, opacity 0.2s;
}
.quick-item.dragging { &.dragging {
opacity: 0.6; opacity: 0.6;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); box-shadow: 0 4px 12px var(--frost-shadow-black-12);
cursor: grabbing; cursor: grabbing;
}
} }
.quick-header { .quick-header {
@@ -751,11 +751,11 @@ onUnmounted(() => {
.quick-checkbox { .quick-checkbox {
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px; margin-top: 2px;
}
.quick-checkbox :deep(.n-checkbox-box) { :deep(.n-checkbox-box) {
width: 16px; width: 16px;
height: 16px; height: 16px;
}
} }
.quick-topic-wrap { .quick-topic-wrap {
@@ -772,14 +772,14 @@ onUnmounted(() => {
font-weight: 700; font-weight: 700;
width: 28px; width: 28px;
font-size: 12px; font-size: 12px;
}
.quick-dir.pub { &.pub {
color: #3b82f6; color: var(--frost-info-color);
}
} }
.quick-topic { .quick-topic {
color: #d25a00; color: var(--frost-color-topic);
min-width: 0; min-width: 0;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
@@ -788,14 +788,14 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
font-family: monospace; font-family: monospace;
font-size: 13px; font-size: 13px;
}
.quick-topic:hover { &:hover {
text-decoration: underline; text-decoration: underline;
}
} }
.quick-meta { .quick-meta {
color: #999; color: var(--frost-color-text-tertiary);
font-size: 11px; font-size: 11px;
flex-shrink: 0; flex-shrink: 0;
font-family: monospace; font-family: monospace;
@@ -805,7 +805,7 @@ onUnmounted(() => {
margin: 10px 0 0; margin: 10px 0 0;
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
background: rgba(0, 0, 0, 0.04); background: var(--frost-shadow-black-4);
color: #333; color: #333;
font: inherit; font: inherit;
white-space: pre-wrap; white-space: pre-wrap;
@@ -817,23 +817,27 @@ onUnmounted(() => {
overflow-y: auto; overflow-y: auto;
} }
.quick-send-modal .n-form-item { .quick-send-modal {
margin-bottom: 20px; .n-form-item {
margin-bottom: 20px;
&__label {
margin-bottom: 8px;
}
&:last-child {
margin-bottom: 0;
}
}
.n-grid {
margin-bottom: 20px;
}
} }
.quick-send-modal .n-form-item__label { .quick-send-dialog {
margin-bottom: 8px; :deep(.n-dialog__icon) {
} color: var(--frost-primary-color);
}
.quick-send-modal .n-form-item:last-child {
margin-bottom: 0;
}
.quick-send-modal .n-grid {
margin-bottom: 20px;
}
.quick-send-dialog .n-dialog__icon {
color: #0ea5a0;
} }
</style> </style>
app/src/renderer/src/views/Subscribe.vue
+45 -43
View File
@@ -426,7 +426,7 @@ async function handleEditSave(t) {
</template> </template>
<style scoped> <style scoped lang="less">
.subscribe-view { .subscribe-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -479,10 +479,12 @@ async function handleEditSave(t) {
flex: 0 0 auto; flex: 0 0 auto;
} }
.topic-field :deep(.n-form-item-blank), .topic-field,
.qos-field :deep(.n-form-item-blank), .qos-field,
.comment-field :deep(.n-form-item-blank) { .comment-field {
width: 100%; :deep(.n-form-item-blank) {
width: 100%;
}
} }
.topic-item { .topic-item {
@@ -491,14 +493,14 @@ async function handleEditSave(t) {
min-height: 56px; min-height: 56px;
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
}
.topic-item :deep(.n-list-item__main) { :deep(.n-list-item__main) {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
gap: 12px; gap: 12px;
}
} }
.topic-content { .topic-content {
@@ -526,10 +528,10 @@ async function handleEditSave(t) {
font-size: 13px; font-size: 13px;
overflow: hidden; overflow: hidden;
visibility: visible; visibility: visible;
}
.topic-name.is-hidden { &.is-hidden {
visibility: hidden; visibility: hidden;
}
} }
.topic-label { .topic-label {
@@ -554,19 +556,19 @@ async function handleEditSave(t) {
color: var(--n-text-color-3); color: var(--n-text-color-3);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
}
.topic-comment-prefix { &-prefix {
flex-shrink: 0; flex-shrink: 0;
color: #0f766e; color: #0f766e;
} }
.topic-comment-text { &-text {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
} }
.topic-qos-tag { .topic-qos-tag {
@@ -577,23 +579,23 @@ async function handleEditSave(t) {
.topic-actions { .topic-actions {
flex-shrink: 0; flex-shrink: 0;
visibility: visible; visibility: visible;
}
.topic-actions.is-hidden { &.is-hidden {
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
} }
.topic-actions .n-button { .n-button {
min-width: 40px; min-width: 40px;
} }
.topic-actions .topic-action-sub { .topic-action-sub {
min-width: auto; min-width: auto;
} }
.topic-actions .topic-action-remove { .topic-action-remove {
min-width: 24px; min-width: 24px;
}
} }
.topic-edit-row { .topic-edit-row {
@@ -609,11 +611,11 @@ async function handleEditSave(t) {
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
}
.topic-edit-row.is-visible { &.is-visible {
visibility: visible; visibility: visible;
pointer-events: auto; pointer-events: auto;
}
} }
.topic-edit-topic { .topic-edit-topic {