JoeAllen/mqttx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
33d0ca10e773a8f147f70b2592d841ee6402ab4c
mqttx/src/styles/comfort.css
T
JoeAllen 8a2c63e575 feat: 集成 visual-json 可视化 JSON 编辑/查看并更新品牌图标 
- 发送面板 Payload 增加「文本 / JSON 可视化」切换，可视化编辑实时回写
- 消息流 JSON 消息改为只读可视化查看，拦截双击/删除/右键等编辑入口
- visual-json 主题跟随应用亮/暗 comfort 色板
- 更新应用图标与启动页 logo（mqttx.svg + Tauri 各尺寸图标）
2026-08-24 13:41:08 +08:00

361 lines
13 KiB
CSS
Raw Blame History

:root {
/* ─── Soft color palette ─────────────────────────────────────── */
--comfort-bg: #f5f5f0;
--comfort-bg-soft: #fafaf7;
--comfort-bg-card: #ffffff;
--comfort-text: #2c2c2c;
--comfort-text-secondary: #6b6b6b;
--comfort-text-muted: #999999;
--comfort-border: #e8e8e3;
--comfort-border-light: #f0f0eb;
--comfort-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
--comfort-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
--comfort-primary: #5b8c5a;
--comfort-primary-light: #7dab7c;
--comfort-primary-bg: #eef5ee;
--comfort-success: #5b8c5a;
--comfort-warning: #c4a35a;
--comfort-danger: #c46a5a;
--comfort-info: #6b8a9a;
--comfort-font: "Inter", "LXGW WenKai", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
--comfort-font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", monospace;
--comfort-radius: 8px;
--comfort-radius-sm: 6px;
/* Element Plus variable overrides */
--el-bg-color: var(--comfort-bg);
--el-bg-color-overlay: var(--comfort-bg-card);
--el-text-color-primary: var(--comfort-text);
--el-text-color-regular: var(--comfort-text);
--el-text-color-secondary: var(--comfort-text-secondary);
--el-text-color-placeholder: var(--comfort-text-muted);
--el-border-color: var(--comfort-border);
--el-border-color-light: var(--comfort-border-light);
--el-border-color-extra-light: var(--comfort-border-light);
--el-fill-color: #efefea;
--el-fill-color-light: #eaeae5;
--el-fill-color-lighter: #f0f0eb;
--el-fill-color-extra-light: #f5f5f0;
--el-color-primary: var(--comfort-primary);
--el-color-primary-light-3: var(--comfort-primary-light);
--el-color-primary-light-5: #9dc09c;
--el-color-primary-light-7: #bdd5bc;
--el-color-primary-light-8: #d0e2cf;
--el-color-primary-light-9: var(--comfort-primary-bg);
--el-color-primary-dark-2: #4a7a49;
--el-color-success: var(--comfort-success);
--el-color-warning: var(--comfort-warning);
--el-color-danger: var(--comfort-danger);
--el-color-info: var(--comfort-info);
--el-border-radius-base: var(--comfort-radius-sm);
--el-font-size-base: 13px;
--el-font-size-small: 12px;
--el-font-size-extra-small: 11px;
--el-font-family: var(--comfort-font);
}
/* ─── Dark mode ─────────────────────────────────────────────────── */
.dark {
--comfort-bg: #1a1a1e;
--comfort-bg-soft: #222226;
--comfort-bg-card: #2a2a2e;
--comfort-text: #e0e0e0;
--comfort-text-secondary: #a0a0a0;
--comfort-text-muted: #707070;
--comfort-border: #3a3a3e;
--comfort-border-light: #323236;
--comfort-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
--comfort-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.3);
--comfort-primary: #7dab7c;
--comfort-primary-light: #9dc09c;
--comfort-primary-bg: #2a3a2a;
--comfort-success: #7dab7c;
--comfort-warning: #c4a35a;
--comfort-danger: #c46a5a;
--comfort-info: #6b8a9a;
/* Element Plus core */
--el-color-white: #1a1a1e;
--el-color-black: #e0e0e0;
--el-bg-color: var(--comfort-bg);
--el-bg-color-overlay: var(--comfort-bg-card);
--el-bg-color-page: var(--comfort-bg);
--el-text-color-primary: var(--comfort-text);
--el-text-color-regular: var(--comfort-text);
--el-text-color-secondary: var(--comfort-text-secondary);
--el-text-color-placeholder: var(--comfort-text-muted);
--el-text-color-disabled: #505050;
--el-border-color: var(--comfort-border);
--el-border-color-light: var(--comfort-border-light);
--el-border-color-lighter: #2e2e32;
--el-border-color-extra-light: #2a2a2e;
--el-border-color-dark: #4a4a4e;
--el-fill-color: #2e2e32;
--el-fill-color-light: #36363a;
--el-fill-color-lighter: #323236;
--el-fill-color-extra-light: #2a2a2e;
--el-fill-color-dark: #3a3a3e;
--el-fill-color-blank: var(--comfort-bg-card);
/* Element Plus component colors */
--el-color-primary: var(--comfort-primary);
--el-color-primary-light-3: var(--comfort-primary-light);
--el-color-primary-light-5: #bdd5bc;
--el-color-primary-light-7: #3a4a3a;
--el-color-primary-light-8: #324032;
--el-color-primary-light-9: var(--comfort-primary-bg);
--el-color-primary-dark-2: #5b8c5a;
--el-color-success: var(--comfort-success);
--el-color-success-light-3: #9dc09c;
--el-color-success-light-5: #7dab7c;
--el-color-success-light-7: #3a4a3a;
--el-color-success-light-8: #324032;
--el-color-success-light-9: #2a3a2a;
--el-color-success-dark-2: #5b8c5a;
--el-color-warning: var(--comfort-warning);
--el-color-warning-light-3: #d4b86a;
--el-color-warning-light-5: #c4a35a;
--el-color-warning-light-7: #4a3a2a;
--el-color-warning-light-8: #3a3020;
--el-color-warning-light-9: #2a2a1a;
--el-color-warning-dark-2: #a08040;
--el-color-danger: var(--comfort-danger);
--el-color-danger-light-3: #d47a6a;
--el-color-danger-light-5: #c46a5a;
--el-color-danger-light-7: #4a2a2a;
--el-color-danger-light-8: #3a2020;
--el-color-danger-light-9: #2a1a1a;
--el-color-danger-dark-2: #a05040;
--el-color-info: var(--comfort-info);
--el-color-info-light-3: #8baab0;
--el-color-info-light-5: #6b8a9a;
--el-color-info-light-7: #2a3a3a;
--el-color-info-light-8: #202a2a;
--el-color-info-light-9: #1a2a2a;
--el-color-info-dark-2: #4a6a7a;
/* Element Plus specific */
--el-mask-color: rgba(0, 0, 0, 0.5);
--el-overlay-color: rgba(0, 0, 0, 0.6);
--el-overlay-color-lighter: rgba(0, 0, 0, 0.4);
--el-popper-bg-color: var(--comfort-bg-card);
--el-input-bg-color: var(--comfort-bg-soft);
--el-input-text-color: var(--comfort-text);
--el-input-border-color: var(--comfort-border);
--el-input-hover-border-color: var(--comfort-primary-light);
--el-input-focus-border-color: var(--comfort-primary);
--el-input-placeholder-color: var(--comfort-text-muted);
--el-table-bg-color: var(--comfort-bg-card);
--el-table-tr-bg-color: var(--comfort-bg-card);
--el-table-header-bg-color: var(--comfort-bg-soft);
--el-table-header-text-color: var(--comfort-text-secondary);
--el-table-text-color: var(--comfort-text);
--el-table-row-hover-bg-color: var(--comfort-primary-bg);
--el-table-border-color: var(--comfort-border-light);
--el-tag-bg-color: var(--comfort-primary-bg);
--el-tag-text-color: var(--comfort-primary);
--el-tag-border-color: transparent;
--el-dialog-bg-color: var(--comfort-bg-card);
--el-select-bg-color: var(--comfort-bg-soft);
--el-select-input-focus-border-color: var(--comfort-primary);
--el-select-dropdown-bg: var(--comfort-bg-card);
--el-select-dropdown-border: var(--comfort-border);
--el-message-bg-color: var(--comfort-bg-card);
--el-message-shadow: var(--comfort-shadow-hover);
--el-checkbox-bg-color: var(--comfort-bg-soft);
--el-checkbox-checked-bg-color: var(--comfort-primary);
--el-checkbox-input-border-color: var(--comfort-border);
--el-checkbox-input-border-color-hover: var(--comfort-primary-light);
--el-switch-on-color: var(--comfort-primary);
--el-switch-off-color: #3a3a3e;
}
/* ─── Global comfort styles ─────────────────────────────────────── */
body {
background: var(--comfort-bg);
color: var(--comfort-text);
font-family: var(--comfort-font);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Softer scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--comfort-border);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--comfort-text-muted);
}
/* Subtle transitions */
* {
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Card style */
.comfort-card {
background: var(--comfort-bg-card);
border: 1px solid var(--comfort-border);
border-radius: var(--comfort-radius);
box-shadow: var(--comfort-shadow);
}
/* Better focus ring */
:focus-visible {
outline: 2px solid var(--comfort-primary-light);
outline-offset: 2px;
border-radius: 2px;
}
/* Input/textarea comfort */
.el-input__wrapper,
.el-textarea__inner {
box-shadow: none !important;
border: 1px solid var(--comfort-border) !important;
background: var(--comfort-bg-soft) !important;
border-radius: var(--comfort-radius-sm) !important;
}
.el-input__wrapper:hover,
.el-textarea__inner:hover {
border-color: var(--comfort-primary-light) !important;
}
.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
border-color: var(--comfort-primary) !important;
}
/* Button comfort */
.el-button {
--el-button-hover-bg-color: var(--comfort-primary-bg);
--el-button-hover-border-color: var(--comfort-primary-light);
border-radius: var(--comfort-radius-sm) !important;
font-weight: 450 !important;
}
.el-button--primary {
--el-button-bg-color: var(--comfort-primary);
--el-button-border-color: var(--comfort-primary);
--el-button-hover-bg-color: var(--comfort-primary-light);
--el-button-hover-border-color: var(--comfort-primary-light);
}
/* Table comfort */
.el-table {
--el-table-border-color: var(--comfort-border-light) !important;
--el-table-header-bg-color: var(--comfort-bg-soft) !important;
--el-table-row-hover-bg-color: var(--comfort-primary-bg) !important;
font-size: 13px !important;
}
.el-table th.el-table__cell {
font-weight: 600 !important;
color: var(--comfort-text-secondary) !important;
font-size: 12px !important;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Dialog comfort */
.el-dialog {
--el-dialog-bg-color: var(--comfort-bg-card);
border-radius: var(--comfort-radius) !important;
box-shadow: var(--comfort-shadow-hover) !important;
}
/* Tag comfort */
.el-tag {
--el-tag-bg-color: var(--comfort-primary-bg);
--el-tag-border-color: transparent;
--el-tag-text-color: var(--comfort-primary);
font-weight: 450;
border-radius: 4px;
}
/* Select dropdown comfort */
.el-select-dropdown {
--el-select-dropdown-bg: var(--comfort-bg-card);
border: 1px solid var(--comfort-border) !important;
box-shadow: var(--comfort-shadow-hover) !important;
border-radius: var(--comfort-radius-sm) !important;
}
.el-select-dropdown__item.hover {
background: var(--comfort-primary-bg) !important;
}
/* Message comfort */
.el-message {
border-radius: var(--comfort-radius-sm) !important;
box-shadow: var(--comfort-shadow-hover) !important;
border: 1px solid var(--comfort-border) !important;
}
/* Checkbox comfort */
.el-checkbox {
--el-checkbox-checked-bg-color: var(--comfort-primary);
--el-checkbox-checked-input-border-color: var(--comfort-primary);
--el-checkbox-input-border-color-hover: var(--comfort-primary-light);
}
/* ─── visual-json theme override ───────────────────────────────────
The library injects its dark defaults as inline custom properties,
so we need !important stylesheet rules to win the cascade and follow
the app's light/dark comfort palette. */
[data-vj-root] {
--vj-bg: var(--comfort-bg-card) !important;
--vj-bg-panel: var(--comfort-bg-soft) !important;
--vj-bg-hover: #f0f0eb !important;
--vj-bg-selected: var(--comfort-primary-bg) !important;
--vj-bg-selected-muted: #f0f0eb !important;
--vj-bg-match: #f7ecd2 !important;
--vj-bg-match-active: #f0dc9f !important;
--vj-border: var(--comfort-border) !important;
--vj-border-subtle: var(--comfort-border-light) !important;
--vj-text: var(--comfort-text) !important;
--vj-text-muted: var(--comfort-text-secondary) !important;
--vj-text-dim: var(--comfort-text-muted) !important;
--vj-text-dimmer: #c0c0ba !important;
--vj-string: #a31515 !important;
--vj-number: #098658 !important;
--vj-boolean: #0000ff !important;
--vj-accent: var(--comfort-primary) !important;
--vj-accent-muted: #d7e5d6 !important;
--vj-input-bg: var(--comfort-bg-card) !important;
--vj-input-border: var(--comfort-border) !important;
--vj-error: var(--comfort-danger) !important;
--vj-font: var(--comfort-font-mono) !important;
--vj-input-font-size: 13px !important;
}
.dark [data-vj-root] {
--vj-bg: var(--comfort-bg-card) !important;
--vj-bg-panel: var(--comfort-bg-soft) !important;
--vj-bg-hover: #323236 !important;
--vj-bg-selected: var(--comfort-primary-bg) !important;
--vj-bg-selected-muted: #2e2e32 !important;
--vj-bg-match: #3a3520 !important;
--vj-bg-match-active: #51502b !important;
--vj-border: var(--comfort-border) !important;
--vj-border-subtle: var(--comfort-border-light) !important;
--vj-text: var(--comfort-text) !important;
--vj-text-muted: var(--comfort-text-secondary) !important;
--vj-text-dim: var(--comfort-text-muted) !important;
--vj-text-dimmer: #555555 !important;
--vj-string: #ce9178 !important;
--vj-number: #b5cea8 !important;
--vj-boolean: #569cd6 !important;
--vj-accent: var(--comfort-primary) !important;
--vj-accent-muted: #3a4a3a !important;
--vj-input-bg: #36363a !important;
--vj-input-border: #4a4a4e !important;
--vj-error: var(--comfort-danger) !important;
--vj-font: var(--comfort-font-mono) !important;
--vj-input-font-size: 13px !important;
}
Reference in New Issue View Git Blame Copy Permalink