mirror of
https://github.com/meganjjzhang/Promptuary.git
synced 2026-07-22 07:49:22 +00:00
3251 lines
87 KiB
CSS
3251 lines
87 KiB
CSS
/* ============================================================
|
||
* Promptuary — visual styles
|
||
* 设计参考：design/demo-interactive.html
|
||
*
|
||
* 取色策略：尽量走 Obsidian 的 CSS 变量以同时适配亮/暗主题；
|
||
* 仅在设计稿里有独有视觉（紫色 accent、橙色批阅、4 色高亮、
|
||
* 引用块底色）时使用固定 RGBA。
|
||
* ============================================================ */
|
||
|
||
/* 字体：设计稿主体 DM Sans，引用与代码段 JetBrains Mono。
|
||
* Obsidian 自带 var(--font-monospace) 与 var(--font-interface)，
|
||
* 这里仅在引用框内强制 mono，UI 本身跟随 Obsidian 主题。 */
|
||
.promptuary-popover,
|
||
.promptuary-bottom-toolbar,
|
||
.promptuary-sidebar {
|
||
font-family: var(--font-interface, "DM Sans", system-ui, sans-serif);
|
||
}
|
||
|
||
/* ============================================================
|
||
* 1. 编辑器内的高亮 / 批阅装饰
|
||
* ============================================================ */
|
||
|
||
/* 高亮：低饱和背景 + 同色下划线（从设计稿 .hl-* 复刻） */
|
||
.cm-promptuary-highlight {
|
||
border-radius: 2px;
|
||
padding: 0;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
.cm-line .cm-promptuary-highlight-yellow {
|
||
background-color: rgba(250, 204, 21, 0.18);
|
||
border-bottom-color: rgba(250, 204, 21, 0.40);
|
||
}
|
||
.cm-line .cm-promptuary-highlight-blue {
|
||
background-color: rgba(96, 165, 250, 0.18);
|
||
border-bottom-color: rgba(96, 165, 250, 0.40);
|
||
}
|
||
.cm-line .cm-promptuary-highlight-green {
|
||
background-color: rgba(74, 222, 128, 0.18);
|
||
border-bottom-color: rgba(74, 222, 128, 0.40);
|
||
}
|
||
.cm-line .cm-promptuary-highlight-purple {
|
||
background-color: rgba(192, 132, 252, 0.18);
|
||
border-bottom-color: rgba(192, 132, 252, 0.40);
|
||
}
|
||
|
||
.theme-dark .cm-line .cm-promptuary-highlight-yellow {
|
||
background-color: rgba(250, 204, 21, 0.15);
|
||
border-bottom-color: rgba(250, 204, 21, 0.30);
|
||
}
|
||
.theme-dark .cm-line .cm-promptuary-highlight-blue {
|
||
background-color: rgba(96, 165, 250, 0.15);
|
||
border-bottom-color: rgba(96, 165, 250, 0.30);
|
||
}
|
||
.theme-dark .cm-line .cm-promptuary-highlight-green {
|
||
background-color: rgba(74, 222, 128, 0.15);
|
||
border-bottom-color: rgba(74, 222, 128, 0.30);
|
||
}
|
||
.theme-dark .cm-line .cm-promptuary-highlight-purple {
|
||
background-color: rgba(192, 132, 252, 0.15);
|
||
border-bottom-color: rgba(192, 132, 252, 0.30);
|
||
}
|
||
|
||
/* 批阅：橙色（设计稿 .hl-review） */
|
||
.cm-line .cm-promptuary-review {
|
||
background-color: rgba(251, 146, 60, 0.18);
|
||
border-bottom: 1px solid rgba(251, 146, 60, 0.40);
|
||
border-radius: 2px;
|
||
}
|
||
.theme-dark .cm-line .cm-promptuary-review {
|
||
background-color: rgba(251, 146, 60, 0.15);
|
||
border-bottom-color: rgba(251, 146, 60, 0.30);
|
||
}
|
||
|
||
.cm-promptuary-strike {
|
||
text-decoration-line: line-through;
|
||
text-decoration-color: rgba(251, 146, 60, 0.65);
|
||
text-decoration-thickness: 1.5px;
|
||
}
|
||
|
||
.cm-promptuary-fuzzy {
|
||
outline: 1px dashed var(--text-warning);
|
||
outline-offset: -1px;
|
||
}
|
||
|
||
/* auto-healed: subtle blue left border to indicate repaired position */
|
||
.cm-promptuary-auto-healed {
|
||
border-left: 2px solid rgba(96, 165, 250, 0.45);
|
||
margin-left: -2px;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 2. 选区浮窗 (Selection Popover, desktop)
|
||
* 设计稿 #popover-reading / #popover-reviewing
|
||
* 纵向布局：模式胶囊 + 按钮行 + Note 展开区
|
||
* ============================================================ */
|
||
|
||
.promptuary-popover {
|
||
position: fixed;
|
||
z-index: 999;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
padding: 6px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
|
||
font-size: 12px;
|
||
animation: prm-popover-fade-in 0.15s ease-out;
|
||
min-width: 220px;
|
||
}
|
||
.theme-dark .promptuary-popover {
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
@keyframes prm-popover-fade-in {
|
||
from { opacity: 0; transform: translateY(4px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* 阅读浮窗的 4 色圆点（直径 16px，hover 放大，active 环） */
|
||
.promptuary-popover .prm-color {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
flex-shrink: 0;
|
||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||
outline: 2px solid transparent;
|
||
outline-offset: 1px;
|
||
}
|
||
.promptuary-popover .prm-color.yellow {
|
||
background: rgba(250, 204, 21, 0.75);
|
||
border-color: rgba(250, 204, 21, 0.55);
|
||
}
|
||
.promptuary-popover .prm-color.blue {
|
||
background: rgba(96, 165, 250, 0.75);
|
||
border-color: rgba(96, 165, 250, 0.55);
|
||
}
|
||
.promptuary-popover .prm-color.green {
|
||
background: rgba(74, 222, 128, 0.75);
|
||
border-color: rgba(74, 222, 128, 0.55);
|
||
}
|
||
.promptuary-popover .prm-color.purple {
|
||
background: rgba(192, 132, 252, 0.75);
|
||
border-color: rgba(192, 132, 252, 0.55);
|
||
}
|
||
.promptuary-popover .prm-color:hover {
|
||
transform: scale(1.15);
|
||
}
|
||
/* 颜色选中态：白色外环 */
|
||
.promptuary-popover .prm-color.active.yellow { outline-color: rgba(250, 204, 21, 0.90); }
|
||
.promptuary-popover .prm-color.active.blue { outline-color: rgba(96, 165, 250, 0.90); }
|
||
.promptuary-popover .prm-color.active.green { outline-color: rgba(74, 222, 128, 0.90); }
|
||
.promptuary-popover .prm-color.active.purple { outline-color: rgba(192, 132, 252, 0.90); }
|
||
|
||
|
||
/* 浮窗内的分割线（圆点和按钮之间） */
|
||
.promptuary-popover .prm-divider {
|
||
width: 1px;
|
||
height: 16px;
|
||
background: var(--background-modifier-border);
|
||
margin: 0 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 浮窗按钮：扁平 chip 风格 */
|
||
.promptuary-popover button {
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 4px 8px;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.promptuary-popover button:hover {
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* 删除线 S 按钮（橙色方块，设计稿 #btn-strikethrough） */
|
||
.promptuary-popover .prm-strike-btn {
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 6px;
|
||
background: rgba(251, 146, 60, 0.15);
|
||
border: 1px solid rgba(251, 146, 60, 0.30);
|
||
color: rgba(251, 146, 60, 0.95);
|
||
font-weight: 700;
|
||
font-family: var(--font-monospace);
|
||
font-size: 13px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.promptuary-popover .prm-strike-btn:hover {
|
||
background: rgba(251, 146, 60, 0.25);
|
||
color: rgba(251, 146, 60, 1);
|
||
}
|
||
|
||
/* 提交按钮（紫色回车按钮，设计稿 #btn-submit-review） */
|
||
.promptuary-popover .prm-submit-btn {
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 6px;
|
||
background: rgba(167, 139, 250, 0.15);
|
||
border: 1px solid rgba(167, 139, 250, 0.30);
|
||
color: rgba(167, 139, 250, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
padding: 0;
|
||
}
|
||
.promptuary-popover .prm-submit-btn:hover {
|
||
background: rgba(167, 139, 250, 0.25);
|
||
}
|
||
|
||
/* 浮窗内模式切换胶囊（紧凑版） */
|
||
.prm-popover-capsule {
|
||
display: flex;
|
||
background: var(--background-secondary);
|
||
border-radius: 4px;
|
||
padding: 1px;
|
||
gap: 1px;
|
||
width: fit-content;
|
||
box-sizing: border-box;
|
||
align-self: center;
|
||
}
|
||
.prm-popover-capsule button {
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
outline: none;
|
||
padding: 1px 8px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
line-height: 1.4;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
.prm-popover-capsule button:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-popover-capsule button.prm-capsule-active,
|
||
.prm-popover-capsule button.active {
|
||
background: var(--background-primary);
|
||
color: var(--text-normal);
|
||
font-weight: 600;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.theme-dark .prm-popover-capsule button.active {
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
|
||
}
|
||
|
||
/* 浮窗标题行：左侧标题 + 右侧模式胶囊 */
|
||
.prm-popover-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding-bottom: 4px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
margin-bottom: 2px;
|
||
}
|
||
.prm-popover-title {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
font-family: var(--font-monospace);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* 浮窗按钮行（颜色圆点 + 按钮横排） */
|
||
.prm-popover-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Delete 按钮（批阅模式，橙色，可 toggle） */
|
||
.promptuary-popover .prm-delete-btn,
|
||
.promptuary-bottom-toolbar .prm-delete-btn {
|
||
background: rgba(251, 146, 60, 0.08);
|
||
border: 1px solid rgba(251, 146, 60, 0.20);
|
||
color: rgba(251, 146, 60, 0.7);
|
||
border-radius: 4px;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
font-family: var(--font-monospace);
|
||
transition: background 0.12s, border-color 0.12s, color 0.12s;
|
||
}
|
||
.promptuary-popover .prm-delete-btn:hover,
|
||
.promptuary-bottom-toolbar .prm-delete-btn:hover {
|
||
background: rgba(251, 146, 60, 0.16);
|
||
border-color: rgba(251, 146, 60, 0.35);
|
||
color: rgba(251, 146, 60, 0.9);
|
||
}
|
||
/* Delete 按钮 toggle 活跃态 */
|
||
.promptuary-popover .prm-delete-btn.active,
|
||
.promptuary-bottom-toolbar .prm-delete-btn.active {
|
||
background: rgba(251, 146, 60, 0.20);
|
||
border-color: rgba(251, 146, 60, 0.45);
|
||
color: rgba(251, 146, 60, 1);
|
||
}
|
||
|
||
/* ✓ 确认按钮（Delete toggle 激活时出现） */
|
||
.promptuary-popover .prm-review-confirm-btn,
|
||
.promptuary-bottom-toolbar .prm-review-confirm-btn {
|
||
background: rgba(251, 146, 60, 0.15);
|
||
border: 1px solid rgba(251, 146, 60, 0.35);
|
||
color: rgba(251, 146, 60, 1);
|
||
border-radius: 4px;
|
||
padding: 4px 8px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
font-family: var(--font-monospace);
|
||
transition: background 0.12s;
|
||
}
|
||
.promptuary-popover .prm-review-confirm-btn:hover,
|
||
.promptuary-bottom-toolbar .prm-review-confirm-btn:hover {
|
||
background: rgba(251, 146, 60, 0.28);
|
||
}
|
||
|
||
/* Note 展开区 header 中的"删除"标记 */
|
||
.prm-strike-indicator {
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
font-family: var(--font-monospace);
|
||
padding: 1px 5px;
|
||
border-radius: 999px;
|
||
background: rgba(251, 146, 60, 0.12);
|
||
color: rgba(251, 146, 60, 0.85);
|
||
border: 1px solid rgba(251, 146, 60, 0.25);
|
||
}
|
||
|
||
/* Note 按钮（批阅模式 + 阅读模式共用） */
|
||
.promptuary-popover .prm-note-btn,
|
||
.promptuary-bottom-toolbar .prm-note-btn {
|
||
background: transparent;
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
border-radius: 4px;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.promptuary-popover .prm-note-btn:hover,
|
||
.promptuary-bottom-toolbar .prm-note-btn:hover {
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* ===== Note 展开区 ===== */
|
||
.prm-popover-note-area {
|
||
margin-top: 2px;
|
||
padding-top: 6px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
animation: prm-note-area-expand 0.15s ease-out;
|
||
}
|
||
@keyframes prm-note-area-expand {
|
||
from { opacity: 0; max-height: 0; }
|
||
to { opacity: 1; max-height: 120px; }
|
||
}
|
||
|
||
/* Note 展开区 header：颜色指示 + 分割线 + 标签 */
|
||
.prm-popover-note-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.prm-note-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-note-dot.yellow { background: rgba(250, 204, 21, 0.65); border: 1px solid rgba(250, 204, 21, 0.45); }
|
||
.prm-note-dot.blue { background: rgba(96, 165, 250, 0.65); border: 1px solid rgba(96, 165, 250, 0.45); }
|
||
.prm-note-dot.green { background: rgba(74, 222, 128, 0.65); border: 1px solid rgba(74, 222, 128, 0.45); }
|
||
.prm-note-dot.purple { background: rgba(192, 132, 252, 0.65); border: 1px solid rgba(192, 132, 252, 0.45); }
|
||
.prm-note-dot.orange { background: rgba(251, 146, 60, 0.65); border: 1px solid rgba(251, 146, 60, 0.45); }
|
||
|
||
.prm-popover-note-header .prm-divider {
|
||
width: 1px;
|
||
height: 12px;
|
||
background: var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.prm-note-label {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
padding: 1px 6px;
|
||
border-radius: 999px;
|
||
}
|
||
.prm-note-label.yellow { background: rgba(250, 204, 21, 0.10); color: rgba(250, 204, 21, 0.80); }
|
||
.prm-note-label.blue { background: rgba(96, 165, 250, 0.10); color: rgba(96, 165, 250, 0.80); }
|
||
.prm-note-label.green { background: rgba(74, 222, 128, 0.10); color: rgba(74, 222, 128, 0.80); }
|
||
.prm-note-label.purple { background: rgba(192, 132, 252, 0.10); color: rgba(192, 132, 252, 0.80); }
|
||
.prm-note-label.orange { background: rgba(251, 146, 60, 0.10); color: rgba(251, 146, 60, 0.80); }
|
||
|
||
/* Note 展开区 input */
|
||
.prm-popover-note-input-wrap {
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
background: var(--background-secondary);
|
||
transition: border-color 0.15s;
|
||
}
|
||
.prm-popover-note-input-wrap:focus-within {
|
||
border-color: rgba(167, 139, 250, 0.45);
|
||
}
|
||
.prm-popover-note-input {
|
||
width: 100%;
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--text-normal);
|
||
font-size: 12px;
|
||
font-family: var(--font-monospace);
|
||
padding: 6px 8px;
|
||
outline: none;
|
||
}
|
||
.prm-popover-note-input::placeholder {
|
||
color: var(--text-muted);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Note 展开区 footer（右对齐 Save 按钮） */
|
||
.prm-popover-note-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.prm-popover-note-save {
|
||
background: rgba(167, 139, 250, 0.12);
|
||
border: 1px solid rgba(167, 139, 250, 0.25);
|
||
color: rgba(167, 139, 250, 0.9);
|
||
border-radius: 4px;
|
||
padding: 3px 12px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
transition: background 0.12s, border-color 0.12s;
|
||
}
|
||
.prm-popover-note-save:hover {
|
||
background: rgba(167, 139, 250, 0.22);
|
||
border-color: rgba(167, 139, 250, 0.40);
|
||
}
|
||
|
||
/* 输入框（批阅模式 #review-input — 保留旧行式兼容） */
|
||
.promptuary-popover input[type="text"] {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
padding: 5px 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
background: var(--background-secondary);
|
||
color: var(--text-normal);
|
||
font-size: 12px;
|
||
font-family: var(--font-monospace);
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.promptuary-popover input[type="text"]:focus {
|
||
border-color: rgba(167, 139, 250, 0.55);
|
||
}
|
||
.promptuary-popover input[type="text"]::placeholder {
|
||
color: var(--text-muted);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 3. 移动端底部工具栏
|
||
* ============================================================ */
|
||
.promptuary-bottom-toolbar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
background: var(--background-primary);
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16);
|
||
}
|
||
.promptuary-bottom-toolbar .prm-color {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
.promptuary-bottom-toolbar .prm-color.yellow { background: rgba(250, 204, 21, 0.65); }
|
||
.promptuary-bottom-toolbar .prm-color.blue { background: rgba(96, 165, 250, 0.65); }
|
||
.promptuary-bottom-toolbar .prm-color.green { background: rgba(74, 222, 128, 0.65); }
|
||
.promptuary-bottom-toolbar .prm-color.purple { background: rgba(192, 132, 252, 0.65); }
|
||
|
||
/* ============================================================
|
||
* 4. 侧边栏
|
||
* ============================================================ */
|
||
|
||
.promptuary-sidebar {
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: var(--background-primary);
|
||
}
|
||
|
||
/* 4.0 Header (fixed top) */
|
||
.prm-sidebar-header {
|
||
padding: 14px 12px 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.prm-header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
.prm-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.prm-header-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 4px;
|
||
background: rgba(192, 132, 252, 0.15);
|
||
color: rgba(192, 132, 252, 0.8);
|
||
font-size: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-header-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
font-family: var(--font-monospace);
|
||
color: var(--text-normal);
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.prm-header-settings {
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
padding: 2px 4px;
|
||
border-radius: 4px;
|
||
transition: color 0.15s, background 0.15s;
|
||
}
|
||
.prm-header-settings:hover {
|
||
color: var(--text-normal);
|
||
background: var(--background-modifier-hover);
|
||
}
|
||
|
||
/* 4.1 模式切换胶囊 — now inside header */
|
||
.prm-mode-capsule {
|
||
display: flex;
|
||
background: var(--background-secondary);
|
||
border-radius: 8px;
|
||
padding: 3px;
|
||
gap: 2px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.prm-mode-capsule button {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
padding: 5px 10px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
.prm-mode-capsule button:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-mode-capsule button.active {
|
||
background: var(--background-primary);
|
||
color: var(--text-normal);
|
||
font-weight: 600;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||
}
|
||
.theme-dark .prm-mode-capsule button.active {
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
|
||
}
|
||
|
||
/* 4.1b Scrollable content area */
|
||
.prm-sidebar-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 4.1c Bottom action bar (fixed bottom) */
|
||
.prm-sidebar-action-bar {
|
||
flex-shrink: 0;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
background: var(--background-secondary);
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.prm-action-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
.prm-action-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
padding: 10px 6px;
|
||
min-height: 36px;
|
||
border-radius: 6px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-normal);
|
||
opacity: 0.85;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.prm-action-btn:hover {
|
||
border-color: var(--text-muted);
|
||
opacity: 1;
|
||
}
|
||
.prm-action-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.prm-action-btn::before {
|
||
font-size: 13px;
|
||
opacity: 0.7;
|
||
}
|
||
/* Action row — container query for adaptive button labels */
|
||
.prm-action-row {
|
||
container-type: inline-size;
|
||
}
|
||
/* Wide: icon + short label + long label */
|
||
.prm-action-short,
|
||
.prm-action-long {
|
||
transition: opacity 0.15s;
|
||
}
|
||
/* Medium (≤340px): hide long label, show icon + short label */
|
||
@container (max-width: 260px) {
|
||
.prm-action-row .prm-action-long { display: none; }
|
||
}
|
||
/* Narrow (≤260px): hide all labels, icon only */
|
||
@container (max-width: 200px) {
|
||
.prm-action-row .prm-action-short { display: none; }
|
||
.prm-action-row .prm-action-btn { padding: 10px 6px; }
|
||
}
|
||
/* "…" more button — icon only, fixed small width */
|
||
.prm-more-btn {
|
||
flex: 0 0 auto;
|
||
min-width: 36px;
|
||
max-width: 36px;
|
||
padding: 10px 6px;
|
||
}
|
||
.prm-action-btn.secondary {
|
||
background: var(--background-primary);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-action-btn.secondary:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* Execute with Agent — purple CTA button */
|
||
.prm-action-execute {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
font-family: var(--font-monospace);
|
||
padding: 12px 14px;
|
||
min-height: 40px;
|
||
border-radius: 6px;
|
||
background: rgba(167, 139, 250, 0.12);
|
||
border: 1px solid rgba(167, 139, 250, 0.20);
|
||
color: rgba(167, 139, 250, 0.85);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.prm-action-execute::before {
|
||
font-size: 15px;
|
||
}
|
||
.prm-action-execute:hover {
|
||
background: rgba(167, 139, 250, 0.20);
|
||
border-color: rgba(167, 139, 250, 0.35);
|
||
}
|
||
.prm-action-execute:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.prm-action-execute:disabled {
|
||
opacity: 0.35;
|
||
cursor: default;
|
||
}
|
||
|
||
/* Secondary tool row — smaller, subdued (reserved) */
|
||
|
||
/* Status hint at bottom */
|
||
.prm-action-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
color: var(--text-muted);
|
||
opacity: 0.5;
|
||
font-size: 10px;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-status-dot {
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: rgba(74, 222, 128, 0.50);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-status-dot-executing {
|
||
background: rgba(167, 139, 250, 0.70);
|
||
animation: prm-pulse 1.2s ease-in-out infinite;
|
||
}
|
||
@keyframes prm-pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.3; }
|
||
}
|
||
|
||
/* Executing state — subtle pulse on CTA button */
|
||
.prm-action-execute.prm-executing {
|
||
animation: prm-btn-pulse 1.6s ease-in-out infinite;
|
||
}
|
||
.prm-action-btn.prm-executing {
|
||
animation: prm-btn-pulse 1.6s ease-in-out infinite;
|
||
}
|
||
@keyframes prm-btn-pulse {
|
||
0%, 100% { opacity: 0.85; }
|
||
50% { opacity: 0.55; }
|
||
}
|
||
|
||
/* 4.2 横幅（baseline 漂移提示） */
|
||
.prm-banner {
|
||
background: rgba(251, 146, 60, 0.10);
|
||
color: var(--text-normal);
|
||
border: 1px solid rgba(251, 146, 60, 0.30);
|
||
border-radius: 8px;
|
||
padding: 8px 10px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
.prm-banner button {
|
||
background: rgba(251, 146, 60, 0.15);
|
||
border: 1px solid rgba(251, 146, 60, 0.40);
|
||
color: rgba(251, 146, 60, 1);
|
||
border-radius: 4px;
|
||
padding: 3px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
.prm-banner button:hover {
|
||
background: rgba(251, 146, 60, 0.25);
|
||
}
|
||
|
||
.prm-cleanup-prompt {
|
||
background: rgba(167, 139, 250, 0.10);
|
||
color: var(--text-normal);
|
||
border: 1px solid rgba(167, 139, 250, 0.28);
|
||
border-radius: 8px;
|
||
padding: 9px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.prm-cleanup-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.prm-cleanup-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.prm-cleanup-desc {
|
||
color: var(--text-muted);
|
||
font-size: 11px;
|
||
line-height: 1.4;
|
||
}
|
||
.prm-cleanup-actions {
|
||
display: flex;
|
||
gap: 6px;
|
||
justify-content: flex-end;
|
||
}
|
||
.prm-cleanup-actions button {
|
||
border-radius: 5px;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
.prm-cleanup-keep {
|
||
background: transparent;
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-cleanup-keep:hover {
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-cleanup-confirm {
|
||
background: rgba(167, 139, 250, 0.16);
|
||
border: 1px solid rgba(167, 139, 250, 0.40);
|
||
color: rgba(167, 139, 250, 1);
|
||
}
|
||
.prm-cleanup-confirm:hover {
|
||
background: rgba(167, 139, 250, 0.25);
|
||
}
|
||
|
||
/* 4.3 工具栏样式已移至底部操作栏 (.prm-action-row / .prm-action-btn) */
|
||
|
||
/* 4.4 卡片（设计稿核心元素） */
|
||
.prm-card {
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
padding: 10px 10px 10px 12px;
|
||
font-size: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
.prm-card:hover {
|
||
background: var(--background-modifier-hover);
|
||
}
|
||
.theme-dark .prm-card {
|
||
background: rgba(255, 255, 255, 0.025);
|
||
}
|
||
.theme-dark .prm-card:hover {
|
||
background: rgba(255, 255, 255, 0.045);
|
||
}
|
||
|
||
/* 卡片左侧 2px 颜色条（设计稿 .w-0.5 self-stretch） */
|
||
.prm-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
bottom: 10px;
|
||
width: 2px;
|
||
border-radius: 999px;
|
||
background: var(--text-muted);
|
||
opacity: 0.45;
|
||
}
|
||
.prm-card.color-yellow::before { background: rgba(250, 204, 21, 0.55); }
|
||
.prm-card.color-blue::before { background: rgba(96, 165, 250, 0.55); }
|
||
.prm-card.color-green::before { background: rgba(74, 222, 128, 0.55); }
|
||
.prm-card.color-purple::before { background: rgba(192, 132, 252, 0.55); }
|
||
.prm-card.color-orange::before { background: rgba(251, 146, 60, 0.55); }
|
||
|
||
.prm-card:hover.color-yellow { border-color: rgba(250, 204, 21, 0.30); }
|
||
.prm-card:hover.color-blue { border-color: rgba(96, 165, 250, 0.30); }
|
||
.prm-card:hover.color-green { border-color: rgba(74, 222, 128, 0.30); }
|
||
.prm-card:hover.color-purple { border-color: rgba(192, 132, 252, 0.30); }
|
||
.prm-card:hover.color-orange { border-color: rgba(251, 146, 60, 0.30); }
|
||
|
||
/* fuzzy / auto-healed / drifted 状态 */
|
||
.prm-card.fuzzy::before { background: var(--text-warning); }
|
||
.prm-card.auto-healed::before { background: rgba(96, 165, 250, 0.55); }
|
||
.prm-card.drifted {
|
||
opacity: 0.55;
|
||
}
|
||
.prm-card.drifted::before { background: var(--background-modifier-error); }
|
||
|
||
/* ---- Review card layout (design ref: icon badge + orange quote + purple text) ---- */
|
||
.prm-card-layout {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* Icon badge: small square with S (strikethrough) or ✎ (review) */
|
||
.prm-card-badge {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-card-badge.strike {
|
||
background: rgba(251, 146, 60, 0.12);
|
||
border: 1px solid rgba(251, 146, 60, 0.20);
|
||
color: rgba(251, 146, 60, 0.80);
|
||
text-decoration-line: line-through;
|
||
text-decoration-color: rgba(251, 146, 60, 0.50);
|
||
}
|
||
.prm-card-badge.review {
|
||
background: rgba(251, 146, 60, 0.12);
|
||
border: 1px solid rgba(251, 146, 60, 0.20);
|
||
color: rgba(251, 146, 60, 0.80);
|
||
}
|
||
|
||
.prm-card-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* Orange quote block (original text with strikethrough) */
|
||
.prm-quote-orange {
|
||
background: rgba(251, 146, 60, 0.08);
|
||
border-left: 2px solid rgba(251, 146, 60, 0.25);
|
||
}
|
||
.prm-quote-orange.strike {
|
||
text-decoration-line: line-through;
|
||
text-decoration-color: rgba(251, 146, 60, 0.40);
|
||
opacity: 0.55;
|
||
}
|
||
.theme-dark .prm-quote-orange {
|
||
background: rgba(251, 146, 60, 0.06);
|
||
}
|
||
|
||
/* Review text block — aligned with reading note style (no purple bg) */
|
||
.prm-text-purple {
|
||
background: transparent;
|
||
border-left: none;
|
||
color: var(--text-normal);
|
||
border-radius: 0;
|
||
padding: 0 4px;
|
||
font-size: 11.5px;
|
||
line-height: 1.55;
|
||
}
|
||
.theme-dark .prm-text-purple {
|
||
background: transparent;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* Status hint for review cards */
|
||
.prm-card-status-hint {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
opacity: 0.7;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* 元信息（类型 chip + 漂移标记 + 删除按钮） */
|
||
.prm-card-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
/* spacer 把删除按钮推到右边 */
|
||
.prm-card-meta-spacer {
|
||
flex: 1;
|
||
}
|
||
/* 内联状态文字 */
|
||
.prm-card-status-inline {
|
||
font-size: 9px;
|
||
opacity: 0.75;
|
||
}
|
||
/* 删除按钮（meta 行右侧，hover 才显色） */
|
||
.prm-card-del-btn {
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--text-faint);
|
||
font-size: 9px;
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
font-family: var(--font-monospace);
|
||
opacity: 0;
|
||
transition: opacity 0.15s, color 0.12s, background 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-card:hover .prm-card-del-btn {
|
||
opacity: 1;
|
||
}
|
||
.prm-card-del-btn:hover {
|
||
color: var(--text-error);
|
||
background: rgba(239, 68, 68, 0.10);
|
||
}
|
||
|
||
.prm-card-meta .prm-tag {
|
||
padding: 1px 6px;
|
||
border-radius: 999px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
font-family: var(--font-monospace);
|
||
font-size: 9px;
|
||
text-transform: lowercase;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* 类型标签按颜色着色 */
|
||
.prm-card-meta .prm-tag.yellow {
|
||
background: rgba(250, 204, 21, 0.10);
|
||
color: rgba(250, 204, 21, 0.85);
|
||
border-color: rgba(250, 204, 21, 0.25);
|
||
}
|
||
.prm-card-meta .prm-tag.blue {
|
||
background: rgba(96, 165, 250, 0.10);
|
||
color: rgba(96, 165, 250, 0.85);
|
||
border-color: rgba(96, 165, 250, 0.25);
|
||
}
|
||
.prm-card-meta .prm-tag.green {
|
||
background: rgba(74, 222, 128, 0.10);
|
||
color: rgba(74, 222, 128, 0.85);
|
||
border-color: rgba(74, 222, 128, 0.25);
|
||
}
|
||
.prm-card-meta .prm-tag.purple {
|
||
background: rgba(192, 132, 252, 0.10);
|
||
color: rgba(192, 132, 252, 0.85);
|
||
border-color: rgba(192, 132, 252, 0.25);
|
||
}
|
||
.prm-card-meta .prm-tag.orange {
|
||
background: rgba(251, 146, 60, 0.10);
|
||
color: rgba(251, 146, 60, 0.85);
|
||
border-color: rgba(251, 146, 60, 0.25);
|
||
}
|
||
|
||
/* 引用块：原文摘录（设计稿 .bg-quote-bg） */
|
||
.prm-card-quote {
|
||
background: rgba(125, 125, 145, 0.08);
|
||
border-radius: 4px;
|
||
padding: 5px 8px;
|
||
font-family: var(--font-monospace);
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
color: var(--text-normal);
|
||
opacity: 0.85;
|
||
word-break: break-word;
|
||
}
|
||
.theme-dark .prm-card-quote {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
}
|
||
.prm-card-quote.strike {
|
||
text-decoration-line: line-through;
|
||
text-decoration-color: rgba(251, 146, 60, 0.55);
|
||
opacity: 0.55;
|
||
}
|
||
|
||
/* 笔记 / 批阅文本（带前缀图标） */
|
||
.prm-card-text {
|
||
padding: 0 4px;
|
||
font-size: 11.5px;
|
||
line-height: 1.55;
|
||
color: var(--text-normal);
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: flex-start;
|
||
}
|
||
.prm-card-text::before {
|
||
content: "";
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
background-color: var(--text-muted);
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E");
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
}
|
||
.prm-card-text.review::before {
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* 文件名 / 行号（卡片底部） */
|
||
.prm-card-source {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
opacity: 0.65;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-card-source::before {
|
||
content: "";
|
||
width: 12px;
|
||
height: 12px;
|
||
flex-shrink: 0;
|
||
background-color: var(--text-muted);
|
||
opacity: 0.65;
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.prm-empty {
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
text-align: center;
|
||
padding: 32px 12px;
|
||
opacity: 0.6;
|
||
line-height: 1.6;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* 空状态占位图 */
|
||
.prm-empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 16px 32px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.prm-empty-state-img {
|
||
width: 96px;
|
||
height: 96px;
|
||
opacity: 0.55;
|
||
object-fit: contain;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.prm-empty-state-text {
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
text-align: center;
|
||
opacity: 0.6;
|
||
line-height: 1.6;
|
||
white-space: pre-line;
|
||
max-width: 180px;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 5. v0.2 — Agent bridge / Diff
|
||
* 保留之前的样式，与新视觉对齐配色
|
||
* ============================================================ */
|
||
|
||
.prm-agent-buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
margin-top: 4px;
|
||
width: 100%;
|
||
}
|
||
.prm-agent-label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-agent-btn {
|
||
background: var(--background-secondary);
|
||
color: var(--text-normal);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
white-space: nowrap;
|
||
transition: all 0.15s;
|
||
}
|
||
.prm-agent-btn:hover {
|
||
background: var(--background-modifier-hover);
|
||
border-color: rgba(167, 139, 250, 0.40);
|
||
}
|
||
.prm-agent-btn.not-installed {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
.prm-agent-btn.secondary {
|
||
background: transparent;
|
||
border: 1px dashed var(--background-modifier-border);
|
||
}
|
||
|
||
/* ============================================================
|
||
* Command Confirm Modal — matches Confirm Execution.html
|
||
* ============================================================ */
|
||
|
||
.modal.prm-confirm-modal { padding: 0; }
|
||
.modal.prm-confirm-modal .modal-close-button { display: none; }
|
||
.modal.prm-confirm-modal {
|
||
width: 500px;
|
||
border-radius: 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.prm-ccm-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-ccm-header-left { display: flex; align-items: center; gap: 10px; }
|
||
.prm-ccm-icon {
|
||
width: 24px; height: 24px; border-radius: 7px;
|
||
background: rgba(167,139,250,0.12);
|
||
border: 1px solid rgba(167,139,250,0.20);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(167,139,250,0.85);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-ccm-title {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal); line-height: 1.2;
|
||
}
|
||
.prm-ccm-subtitle {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); margin-top: 2px;
|
||
}
|
||
.prm-ccm-close {
|
||
width: 28px; height: 28px;
|
||
border-radius: 6px;
|
||
background: transparent; border: none;
|
||
color: var(--text-muted); cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: background 0.12s, color 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-ccm-close:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
|
||
|
||
/* Agent badge row */
|
||
.prm-ccm-agent-row {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 10px 18px 4px;
|
||
}
|
||
.prm-ccm-agent-avatar {
|
||
width: 20px; height: 20px;
|
||
border-radius: 5px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border: 1px solid transparent;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-ccm-agent-char {
|
||
font-size: 10px; font-weight: 700;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-ccm-agent-name {
|
||
font-size: 12px; font-weight: 600;
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-ccm-agent-badge {
|
||
font-size: 8px; font-family: var(--font-monospace);
|
||
padding: 1px 6px; border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
white-space: nowrap;
|
||
}
|
||
.prm-ccm-agent-badge.installed {
|
||
background: rgba(74,222,128,0.10);
|
||
color: rgba(74,222,128,0.85);
|
||
border-color: rgba(74,222,128,0.22);
|
||
}
|
||
.prm-ccm-agent-vendor {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Command display */
|
||
.prm-ccm-cmd-wrap { padding: 4px 18px 8px; }
|
||
.prm-ccm-cmd-box {
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
}
|
||
.prm-ccm-cmd-box::-webkit-scrollbar { width: 6px; }
|
||
.prm-ccm-cmd-box::-webkit-scrollbar-thumb { background: var(--background-modifier-border); border-radius: 3px; }
|
||
.prm-ccm-cmd-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding-bottom: 6px; margin-bottom: 6px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-ccm-cmd-label {
|
||
font-size: 9px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); opacity: 0.6;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.prm-ccm-code {
|
||
font-family: var(--font-monospace);
|
||
font-size: 12px;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
color: var(--text-normal);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* Warning */
|
||
.prm-ccm-warning {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
background: rgba(251,146,60,0.08);
|
||
border: 1px solid rgba(251,146,60,0.20);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
margin: 4px 18px 0;
|
||
}
|
||
.prm-ccm-warning-icon {
|
||
color: rgba(251,146,60,0.85);
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
.prm-ccm-warning-text {
|
||
font-size: 11px;
|
||
color: var(--text-normal);
|
||
opacity: 0.80;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Instruction file hint */
|
||
.prm-ccm-hint {
|
||
display: flex; align-items: center; gap: 6px;
|
||
padding: 4px 18px 2px;
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-ccm-hint-icon svg { width: 12px; height: 12px; }
|
||
.prm-ccm-hint-text {
|
||
font-size: 10px;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
|
||
/* Footer */
|
||
.prm-ccm-footer {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 10px 18px 14px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
margin-top: 10px;
|
||
}
|
||
.prm-ccm-footer-left { display: flex; align-items: center; gap: 6px; }
|
||
.prm-ccm-footer-right { display: flex; align-items: center; gap: 8px; }
|
||
|
||
/* Shared button base */
|
||
.prm-ccm-btn {
|
||
display: inline-flex; align-items: center;
|
||
font-family: var(--font-monospace); cursor: pointer;
|
||
border-radius: 6px; transition: all 0.12s;
|
||
}
|
||
.prm-ccm-btn-inner {
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.prm-ccm-btn-icon svg { width: 12px; height: 12px; }
|
||
|
||
/* Cancel */
|
||
.prm-ccm-btn-cancel {
|
||
font-size: 10px; font-weight: 500;
|
||
padding: 6px 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-ccm-btn-cancel:hover {
|
||
color: rgba(180,40,55,0.90);
|
||
border-color: rgba(215,58,73,0.25);
|
||
background: rgba(215,58,73,0.06);
|
||
}
|
||
.theme-dark .prm-ccm-btn-cancel:hover {
|
||
color: rgba(248,150,150,0.90);
|
||
border-color: rgba(248,113,113,0.25);
|
||
background: rgba(248,113,113,0.08);
|
||
}
|
||
|
||
/* Copy Command */
|
||
.prm-ccm-btn-copy {
|
||
font-size: 10px; font-weight: 500;
|
||
padding: 6px 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-ccm-btn-copy:hover {
|
||
color: var(--text-normal);
|
||
border-color: var(--text-muted);
|
||
}
|
||
|
||
/* Execute (green CTA) */
|
||
.prm-ccm-btn-exec {
|
||
font-size: 11px; font-weight: 600;
|
||
padding: 7px 14px;
|
||
background: rgba(52,168,83,0.08);
|
||
border: 1px solid rgba(52,168,83,0.30);
|
||
color: rgba(30,120,50,0.92);
|
||
}
|
||
.prm-ccm-btn-exec:hover {
|
||
background: rgba(52,168,83,0.16);
|
||
border-color: rgba(52,168,83,0.45);
|
||
}
|
||
.theme-dark .prm-ccm-btn-exec {
|
||
background: rgba(74,222,128,0.10);
|
||
border-color: rgba(74,222,128,0.28);
|
||
color: rgba(110,220,140,0.95);
|
||
}
|
||
.theme-dark .prm-ccm-btn-exec:hover {
|
||
background: rgba(74,222,128,0.20);
|
||
}
|
||
|
||
/* Dark mode overrides for Confirm Modal */
|
||
.theme-dark .modal.prm-confirm-modal {
|
||
background: var(--background-primary);
|
||
border-color: var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
|
||
}
|
||
.theme-dark .prm-ccm-icon {
|
||
background: rgba(167,139,250,0.18);
|
||
border-color: rgba(167,139,250,0.30);
|
||
color: rgba(192,170,255,0.90);
|
||
}
|
||
.theme-dark .prm-ccm-cmd-box {
|
||
background: var(--background-secondary);
|
||
}
|
||
.theme-dark .prm-ccm-warning {
|
||
background: rgba(251,146,60,0.10);
|
||
border-color: rgba(251,146,60,0.25);
|
||
}
|
||
.theme-dark .prm-ccm-warning-icon {
|
||
color: rgba(251,170,100,0.90);
|
||
}
|
||
.theme-dark .prm-ccm-agent-badge.installed {
|
||
background: rgba(74,222,128,0.12);
|
||
color: rgba(110,220,140,0.90);
|
||
border-color: rgba(74,222,128,0.25);
|
||
}
|
||
|
||
/* ============================================================
|
||
* Diff Modal — matches promptuary-modal-diff-preview.html
|
||
* Light-mode first (white surface, colored borders)
|
||
* ============================================================ */
|
||
|
||
.modal.prm-diff-modal .modal-close-button { display: none; }
|
||
.modal.prm-diff-modal {
|
||
max-width: 820px;
|
||
width: 92vw;
|
||
max-height: 88vh;
|
||
height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||
}
|
||
|
||
/* Header */
|
||
.prm-dm-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 18px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
background: var(--background-primary);
|
||
}
|
||
.prm-dm-header-left { display: flex; align-items: center; gap: 10px; }
|
||
.prm-dm-icon {
|
||
width: 24px; height: 24px;
|
||
border-radius: 6px;
|
||
background: rgba(59,130,246,0.08);
|
||
border: 1px solid rgba(59,130,246,0.20);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(59,130,246,0.85);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-dm-title {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal); line-height: 1.2;
|
||
}
|
||
.prm-dm-subtitle {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); margin-top: 2px;
|
||
}
|
||
.prm-dm-header-right { display: flex; align-items: center; gap: 8px; }
|
||
.prm-dm-hunk-badge {
|
||
font-size: 9px; font-family: var(--font-monospace);
|
||
padding: 2px 8px; border-radius: 4px;
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-dm-refresh {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
height: 28px;
|
||
padding: 0 8px;
|
||
border-radius: 6px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font-size: 10px;
|
||
font-family: var(--font-monospace);
|
||
transition: background 0.12s, color 0.12s, border-color 0.12s;
|
||
}
|
||
.prm-dm-refresh:hover {
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-dm-refresh:disabled {
|
||
cursor: default;
|
||
opacity: 0.75;
|
||
}
|
||
.prm-dm-refresh svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
display: block;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-dm-refresh.is-loading svg {
|
||
animation: prm-dm-spin 0.8s linear infinite;
|
||
}
|
||
@keyframes prm-dm-spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.prm-dm-close {
|
||
width: 28px; height: 28px;
|
||
border-radius: 6px;
|
||
background: transparent; border: none;
|
||
color: var(--text-muted); cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: background 0.12s, color 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-dm-close:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
|
||
|
||
/* Scrollable hunk list */
|
||
.prm-dm-content {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
background: var(--background-secondary);
|
||
}
|
||
.prm-dm-content::-webkit-scrollbar { width: 6px; }
|
||
.prm-dm-content::-webkit-scrollbar-thumb { background: var(--background-modifier-border); border-radius: 3px; }
|
||
.prm-dm-empty { color: var(--text-muted); font-size: 13px; padding: 24px; text-align: center; }
|
||
|
||
/* Hunk block */
|
||
.prm-dm-hunk {
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px; overflow: hidden;
|
||
background: var(--background-primary);
|
||
transition: opacity 0.2s, transform 0.2s;
|
||
flex: 0 0 auto;
|
||
}
|
||
.prm-dm-hunk.prm-dm-hunk-decided {
|
||
opacity: 0;
|
||
transform: translateY(-4px);
|
||
pointer-events: none;
|
||
}
|
||
.prm-dm-hunk-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 6px 12px;
|
||
background: var(--background-secondary);
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-dm-hunk-header-left { display: flex; align-items: center; gap: 8px; }
|
||
.prm-dm-hunk-pos {
|
||
font-size: 9px; font-family: var(--font-monospace);
|
||
padding: 1px 6px; border-radius: 3px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-dm-hunk-actions { display: flex; align-items: center; gap: 6px; }
|
||
|
||
/* Hunk-level Accept / Reject buttons — design matches html spec */
|
||
.prm-dm-hunk-btn {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
font-size: 9px; font-family: var(--font-monospace); font-weight: 600;
|
||
padding: 3px 9px; border-radius: 5px; cursor: pointer;
|
||
border: 1px solid transparent; transition: all 0.12s;
|
||
line-height: 1.4;
|
||
}
|
||
.prm-dm-hunk-btn svg { display: block; flex-shrink: 0; }
|
||
|
||
/* Reject left, Accept right — matches design html order */
|
||
.prm-dm-hunk-btn.reject {
|
||
background: rgba(215,58,73,0.06);
|
||
border-color: rgba(215,58,73,0.22);
|
||
color: rgba(180,40,55,0.90);
|
||
}
|
||
.prm-dm-hunk-btn.reject:hover {
|
||
background: rgba(215,58,73,0.14);
|
||
border-color: rgba(215,58,73,0.40);
|
||
}
|
||
.prm-dm-hunk-btn.accept {
|
||
background: rgba(52,168,83,0.07);
|
||
border-color: rgba(52,168,83,0.28);
|
||
color: rgba(30,120,50,0.90);
|
||
}
|
||
.prm-dm-hunk-btn.accept:hover {
|
||
background: rgba(52,168,83,0.16);
|
||
border-color: rgba(52,168,83,0.45);
|
||
}
|
||
.theme-dark .prm-dm-hunk-btn.reject {
|
||
background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.22);
|
||
color: rgba(248,150,150,0.90);
|
||
}
|
||
.theme-dark .prm-dm-hunk-btn.reject:hover {
|
||
background: rgba(248,113,113,0.18);
|
||
}
|
||
.theme-dark .prm-dm-hunk-btn.accept {
|
||
background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.22);
|
||
color: rgba(110,220,140,0.90);
|
||
}
|
||
.theme-dark .prm-dm-hunk-btn.accept:hover {
|
||
background: rgba(74,222,128,0.18);
|
||
}
|
||
|
||
/* Diff lines */
|
||
.prm-dm-lines {
|
||
font-family: var(--font-monospace);
|
||
font-size: 11px; line-height: 1.7;
|
||
max-height: min(46vh, 460px);
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.prm-dm-lines::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
.prm-dm-lines::-webkit-scrollbar-thumb {
|
||
background: var(--background-modifier-border);
|
||
border-radius: 3px;
|
||
}
|
||
.prm-dm-line {
|
||
display: flex; align-items: baseline;
|
||
padding: 0 12px;
|
||
min-height: 19px;
|
||
}
|
||
.prm-dm-line-unchanged {
|
||
color: var(--text-normal);
|
||
opacity: 0.65;
|
||
}
|
||
.prm-dm-line-removed {
|
||
background: #fff0f0;
|
||
border-left: 2px solid #d73a49;
|
||
}
|
||
.prm-dm-line-removed .prm-dm-text { color: #b31d28; }
|
||
.prm-dm-line-removed .prm-dm-linenum { color: #cf9ba3; }
|
||
.prm-dm-line-added {
|
||
background: #e6ffec;
|
||
border-left: 2px solid #34a853;
|
||
}
|
||
.prm-dm-line-added .prm-dm-text { color: #22863a; }
|
||
.prm-dm-line-added .prm-dm-linenum { color: #7bc88a; }
|
||
|
||
.theme-dark .prm-dm-line-removed {
|
||
background: rgba(215,58,73,0.10);
|
||
border-left-color: rgba(215,58,73,0.55);
|
||
}
|
||
.theme-dark .prm-dm-line-removed .prm-dm-text { color: rgba(248,150,150,0.85); }
|
||
.theme-dark .prm-dm-line-added {
|
||
background: rgba(52,168,83,0.08);
|
||
border-left-color: rgba(52,168,83,0.55);
|
||
}
|
||
.theme-dark .prm-dm-line-added .prm-dm-text { color: rgba(110,220,140,0.90); }
|
||
|
||
.prm-dm-linenum {
|
||
min-width: 28px; text-align: right;
|
||
padding-right: 8px; flex-shrink: 0;
|
||
color: var(--text-faint); font-size: 10px; user-select: none;
|
||
}
|
||
.prm-dm-prefix {
|
||
min-width: 14px; flex-shrink: 0; user-select: none;
|
||
color: var(--text-faint);
|
||
}
|
||
.prm-dm-text { white-space: pre-wrap; word-break: break-all; flex: 1; }
|
||
|
||
@media (max-width: 640px) {
|
||
.prm-dm-refresh span { display: none; }
|
||
.prm-dm-hunk-header {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
.prm-dm-hunk-actions {
|
||
align-self: flex-end;
|
||
}
|
||
}
|
||
|
||
/* Footer */
|
||
.prm-dm-footer {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 10px 18px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
background: var(--background-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-dm-stats { display: flex; align-items: center; gap: 6px; }
|
||
.prm-dm-stat-label { font-size: 9px; font-family: var(--font-monospace); color: var(--text-muted); }
|
||
.prm-dm-stat-add { font-size: 9px; font-family: var(--font-monospace); color: #34a853; }
|
||
.prm-dm-stat-del { font-size: 9px; font-family: var(--font-monospace); color: #d73a49; }
|
||
.theme-dark .prm-dm-stat-add { color: rgba(74,222,128,0.80); }
|
||
.theme-dark .prm-dm-stat-del { color: rgba(248,113,113,0.80); }
|
||
.prm-dm-btns { display: flex; align-items: center; gap: 8px; }
|
||
|
||
.prm-dm-btn-rollback {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 10px; font-family: var(--font-monospace); font-weight: 500;
|
||
padding: 6px 12px; border-radius: 6px; cursor: pointer;
|
||
background: var(--background-primary);
|
||
border: 1px solid rgba(215,58,73,0.25);
|
||
color: rgba(180,40,55,0.90);
|
||
transition: all 0.12s;
|
||
}
|
||
.prm-dm-btn-rollback:hover { background: rgba(215,58,73,0.07); }
|
||
.prm-dm-btn-rollback svg { display: block; }
|
||
.theme-dark .prm-dm-btn-rollback {
|
||
border-color: rgba(248,113,113,0.25); color: rgba(248,150,150,0.90);
|
||
}
|
||
.theme-dark .prm-dm-btn-rollback:hover { background: rgba(248,113,113,0.10); }
|
||
|
||
.prm-dm-btn-accept {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 10px; font-family: var(--font-monospace); font-weight: 600;
|
||
padding: 6px 12px; border-radius: 6px; cursor: pointer;
|
||
background: rgba(52,168,83,0.08);
|
||
border: 1px solid rgba(52,168,83,0.30);
|
||
color: rgba(30,120,50,0.92);
|
||
transition: all 0.12s;
|
||
}
|
||
.prm-dm-btn-accept:hover { background: rgba(52,168,83,0.16); }
|
||
.prm-dm-btn-accept svg { display: block; }
|
||
.theme-dark .prm-dm-btn-accept {
|
||
background: rgba(74,222,128,0.10);
|
||
border-color: rgba(74,222,128,0.28);
|
||
color: rgba(110,220,140,0.95);
|
||
}
|
||
.theme-dark .prm-dm-btn-accept:hover { background: rgba(74,222,128,0.20); }
|
||
|
||
|
||
/* ============================================================
|
||
* Agent Select Modal — matches Select Agent.html design
|
||
* ============================================================ */
|
||
|
||
.modal.prm-agent-select-modal .modal-close-button { display: none; }
|
||
.modal.prm-agent-select-modal {
|
||
width: 400px;
|
||
border-radius: 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.prm-asm-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 16px 18px 12px;
|
||
border-bottom: 1px solid rgba(var(--background-modifier-border-rgb), 0.6);
|
||
}
|
||
.prm-asm-header-left { display: flex; align-items: center; gap: 10px; }
|
||
.prm-asm-icon {
|
||
width: 24px; height: 24px; border-radius: 7px;
|
||
background: rgba(167,139,250,0.12);
|
||
border: 1px solid rgba(167,139,250,0.20);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 13px; color: rgba(167,139,250,0.85);
|
||
}
|
||
.prm-asm-title {
|
||
font-size: 13px; font-weight: 600; color: var(--text-normal); line-height: 1.2;
|
||
}
|
||
.prm-asm-subtitle {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); margin-top: 2px;
|
||
}
|
||
.prm-asm-close {
|
||
width: 28px; height: 28px;
|
||
border-radius: 6px;
|
||
background: transparent; border: none;
|
||
color: var(--text-muted); cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: background 0.12s, color 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-asm-close:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
|
||
|
||
/* Agent list */
|
||
.prm-asm-list {
|
||
padding: 10px 12px;
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
}
|
||
|
||
/* Agent row */
|
||
.prm-asm-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 12px 14px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
background: var(--background-primary);
|
||
cursor: pointer;
|
||
transition: border-color 0.12s, box-shadow 0.12s;
|
||
}
|
||
.prm-asm-row:hover { border-color: var(--text-muted); }
|
||
.prm-asm-row.active {
|
||
border-color: rgba(167,139,250,0.35);
|
||
box-shadow: 0 0 0 1px rgba(167,139,250,0.12);
|
||
}
|
||
.prm-asm-row.disabled {
|
||
opacity: 0.55; cursor: not-allowed;
|
||
}
|
||
.prm-asm-row.disabled:hover { border-color: var(--background-modifier-border); }
|
||
|
||
/* Avatar */
|
||
.prm-asm-avatar {
|
||
width: 36px; height: 36px; border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0; border: 1px solid transparent;
|
||
}
|
||
.prm-asm-avatar-char {
|
||
font-size: 14px; font-weight: 700; font-family: var(--font-monospace);
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
/* Info */
|
||
.prm-asm-info { flex: 1; min-width: 0; }
|
||
.prm-asm-name-row { display: flex; align-items: center; gap: 7px; }
|
||
.prm-asm-name { font-size: 13px; font-weight: 600; color: var(--text-normal); }
|
||
.prm-asm-badge {
|
||
font-size: 8px; font-family: var(--font-monospace);
|
||
padding: 1px 6px; border-radius: 20px; border: 1px solid transparent;
|
||
}
|
||
.prm-asm-badge.installed {
|
||
background: rgba(74,222,128,0.12); color: rgba(74,222,128,0.85);
|
||
border-color: rgba(74,222,128,0.22);
|
||
}
|
||
.prm-asm-badge.missing {
|
||
background: rgba(107,114,128,0.10); color: var(--text-muted);
|
||
border-color: var(--background-modifier-border);
|
||
}
|
||
.prm-asm-meta {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); margin-top: 2px;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Radio */
|
||
.prm-asm-radio {
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
border: 2px solid var(--background-modifier-border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0; transition: border-color 0.12s;
|
||
}
|
||
.prm-asm-radio.selected { border-color: rgba(167,139,250,0.60); }
|
||
.prm-asm-radio-dot {
|
||
width: 8px; height: 8px; border-radius: 50%;
|
||
background: rgba(167,139,250,0.85);
|
||
}
|
||
|
||
/* Footer */
|
||
.prm-asm-footer {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 10px 18px 14px;
|
||
border-top: 1px solid rgba(var(--background-modifier-border-rgb), 0.6);
|
||
}
|
||
.prm-asm-config-btn {
|
||
background: none; border: none; cursor: pointer;
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); transition: color 0.12s;
|
||
display: flex; align-items: center; gap: 4px;
|
||
}
|
||
.prm-asm-config-btn:hover { color: var(--text-normal); }
|
||
.prm-asm-confirm-btn {
|
||
font-size: 11px; font-family: var(--font-monospace); font-weight: 600;
|
||
padding: 7px 16px; border-radius: 6px; cursor: pointer;
|
||
background: rgba(167,139,250,0.12);
|
||
border: 1px solid rgba(167,139,250,0.25);
|
||
color: rgba(200,185,255,0.92);
|
||
transition: all 0.12s;
|
||
}
|
||
.prm-asm-confirm-btn:hover { background: rgba(167,139,250,0.22); }
|
||
|
||
|
||
/* ============================================================
|
||
* Settings Page — visual overhaul
|
||
* 分区折叠、Agent 检测卡片、自定义规则卡片、Modal
|
||
* ============================================================ */
|
||
|
||
/* --- Page header --- */
|
||
.prm-settings-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding-bottom: 16px;
|
||
margin-bottom: 8px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-settings-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.prm-settings-page-icon {
|
||
width: 36px; height: 36px;
|
||
border-radius: 9px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
.prm-settings-page-title {
|
||
font-size: 16px; font-weight: 700;
|
||
color: var(--text-normal);
|
||
font-family: var(--font-monospace);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
/* --- Section wrapper --- */
|
||
.prm-settings-section {
|
||
margin-bottom: 6px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
background: var(--background-secondary);
|
||
}
|
||
.prm-settings-section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
user-select: none;
|
||
}
|
||
.prm-settings-section-header:hover {
|
||
background: var(--background-modifier-hover);
|
||
}
|
||
.prm-settings-section-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.prm-settings-section-icon {
|
||
width: 28px; height: 28px;
|
||
border-radius: 7px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-settings-section-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
.prm-settings-section-title {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal);
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-settings-section-desc {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-settings-section-chevron {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
transition: transform 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-settings-section-chevron.is-open {
|
||
transform: rotate(0deg);
|
||
}
|
||
.prm-settings-section-chevron:not(.is-open) {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
/* Collapsible body */
|
||
.prm-settings-section-body {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease-out, padding 0.2s ease;
|
||
padding: 0 16px;
|
||
}
|
||
.prm-settings-section-body.is-open {
|
||
max-height: 3000px;
|
||
padding: 4px 16px 14px;
|
||
transition: max-height 0.4s ease-in;
|
||
}
|
||
|
||
/* Remove h2 from Obsidian default (we have our own header) */
|
||
.prm-settings-section-body h2 { display: none; }
|
||
/* Tighter spacing inside section */
|
||
.prm-settings-section-body .setting-item {
|
||
padding: 8px 0;
|
||
}
|
||
|
||
/* --- Sub-section header (e.g. "自定义命令规则") --- */
|
||
.prm-settings-sub-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
margin-bottom: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-settings-sub-title {
|
||
font-size: 12px; font-weight: 600;
|
||
color: var(--text-normal);
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-settings-sub-btn {
|
||
background: rgba(167,139,250,0.10);
|
||
border: 1px solid rgba(167,139,250,0.20);
|
||
color: rgba(167,139,250,0.85);
|
||
border-radius: 5px;
|
||
padding: 3px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-family: var(--font-monospace);
|
||
font-weight: 600;
|
||
transition: all 0.12s;
|
||
}
|
||
.prm-settings-sub-btn:hover {
|
||
background: rgba(167,139,250,0.20);
|
||
border-color: rgba(167,139,250,0.35);
|
||
}
|
||
|
||
/* --- Agent detection cards --- */
|
||
.prm-agent-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 4px 0 8px;
|
||
}
|
||
.prm-agent-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
background: var(--background-primary);
|
||
transition: border-color 0.12s;
|
||
}
|
||
.prm-agent-card:hover {
|
||
border-color: var(--text-muted);
|
||
}
|
||
.prm-agent-card.not-installed {
|
||
opacity: 0.70;
|
||
}
|
||
.prm-agent-card-avatar {
|
||
width: 32px; height: 32px;
|
||
border-radius: 8px;
|
||
background: rgba(167,139,250,0.10);
|
||
border: 1px solid rgba(167,139,250,0.18);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px; font-weight: 700;
|
||
font-family: var(--font-monospace);
|
||
color: rgba(167,139,250,0.85);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-agent-card.not-installed .prm-agent-card-avatar {
|
||
background: rgba(107,114,128,0.08);
|
||
border-color: rgba(107,114,128,0.15);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-agent-card-info {
|
||
flex: 1; min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.prm-agent-card-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.prm-agent-card-name {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-agent-card-badge {
|
||
font-size: 9px;
|
||
font-family: var(--font-monospace);
|
||
padding: 1px 7px;
|
||
border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
white-space: nowrap;
|
||
}
|
||
.prm-agent-card-badge.installed {
|
||
background: rgba(74,222,128,0.10);
|
||
color: rgba(74,222,128,0.85);
|
||
border-color: rgba(74,222,128,0.20);
|
||
}
|
||
.prm-agent-card-badge.missing {
|
||
background: rgba(107,114,128,0.08);
|
||
color: var(--text-muted);
|
||
border-color: var(--background-modifier-border);
|
||
}
|
||
.prm-agent-card-vendor {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-agent-card-hint {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-monospace);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* --- Custom rule cards --- */
|
||
.prm-rule-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.prm-rule-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
background: var(--background-primary);
|
||
transition: border-color 0.12s;
|
||
}
|
||
.prm-rule-card:hover {
|
||
border-color: var(--text-muted);
|
||
}
|
||
.prm-rule-card-info {
|
||
flex: 1; min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
.prm-rule-card-label {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-rule-card-meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-rule-card-template {
|
||
opacity: 0.7;
|
||
}
|
||
.prm-rule-card-del {
|
||
background: transparent;
|
||
border: 1px solid transparent;
|
||
color: var(--text-faint);
|
||
border-radius: 4px;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-family: var(--font-monospace);
|
||
transition: all 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-rule-card-del:hover {
|
||
color: var(--text-error);
|
||
background: rgba(239,68,68,0.08);
|
||
border-color: rgba(239,68,68,0.15);
|
||
}
|
||
|
||
/* --- Empty state --- */
|
||
.prm-settings-empty {
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
font-style: italic;
|
||
padding: 10px 0;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* --- Template variables reference --- */
|
||
.prm-settings-var-details {
|
||
margin-top: 8px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
padding: 0;
|
||
background: var(--background-primary);
|
||
overflow: hidden;
|
||
}
|
||
.prm-settings-var-details summary {
|
||
padding: 8px 12px;
|
||
font-size: 11px;
|
||
font-family: var(--font-monospace);
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
}
|
||
.prm-settings-var-details summary:hover {
|
||
background: var(--background-modifier-hover);
|
||
}
|
||
.prm-settings-var-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 11px;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-settings-var-table td {
|
||
padding: 5px 12px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-settings-var-table td:first-child {
|
||
color: rgba(167,139,250,0.85);
|
||
white-space: nowrap;
|
||
width: 40%;
|
||
}
|
||
.prm-settings-var-table td:last-child {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* --- API Key visibility toggle --- */
|
||
.prm-api-key-input {
|
||
padding-right: 36px;
|
||
}
|
||
.prm-api-key-toggle {
|
||
position: absolute;
|
||
right: 4px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
padding: 2px 6px;
|
||
color: var(--text-muted);
|
||
box-shadow: none;
|
||
line-height: 1;
|
||
}
|
||
.prm-api-key-toggle:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* ============================================================
|
||
* Add Rule Modal
|
||
* ============================================================ */
|
||
|
||
.modal.prm-add-rule-modal .modal-close-button { display: none; }
|
||
.modal.prm-add-rule-modal {
|
||
width: 460px;
|
||
border-radius: 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.prm-arm-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 18px 12px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-arm-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.prm-arm-icon {
|
||
width: 24px; height: 24px;
|
||
border-radius: 7px;
|
||
background: rgba(167,139,250,0.12);
|
||
border: 1px solid rgba(167,139,250,0.20);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 13px;
|
||
}
|
||
.prm-arm-title {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal); line-height: 1.2;
|
||
}
|
||
.prm-arm-subtitle {
|
||
font-size: 10px;
|
||
font-family: var(--font-monospace);
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Form */
|
||
.prm-arm-form {
|
||
padding: 12px 18px;
|
||
max-height: 55vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Template variables reference (inside modal) */
|
||
.prm-arm-var-ref {
|
||
margin-top: 10px;
|
||
padding: 10px 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 6px;
|
||
}
|
||
.prm-arm-var-title {
|
||
font-size: 10px;
|
||
font-family: var(--font-monospace);
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
margin-bottom: 6px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.prm-arm-var-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px 12px;
|
||
}
|
||
.prm-arm-var-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 10px;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-arm-var-code {
|
||
color: rgba(167,139,250,0.85);
|
||
white-space: nowrap;
|
||
}
|
||
.prm-arm-var-desc {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Footer */
|
||
.prm-arm-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 10px 18px 14px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-arm-btn-cancel {
|
||
background: transparent;
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
border-radius: 6px;
|
||
padding: 6px 14px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-family: var(--font-monospace);
|
||
transition: all 0.12s;
|
||
}
|
||
.prm-arm-btn-cancel:hover {
|
||
color: var(--text-normal);
|
||
border-color: var(--text-muted);
|
||
}
|
||
.prm-arm-btn-save {
|
||
background: rgba(167,139,250,0.12);
|
||
border: 1px solid rgba(167,139,250,0.25);
|
||
color: rgba(167,139,250,0.90);
|
||
border-radius: 6px;
|
||
padding: 6px 16px;
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
font-family: var(--font-monospace);
|
||
font-weight: 600;
|
||
transition: all 0.12s;
|
||
}
|
||
.prm-arm-btn-save:hover {
|
||
background: rgba(167,139,250,0.22);
|
||
border-color: rgba(167,139,250,0.40);
|
||
}
|
||
|
||
/* --- Legacy (kept for backwards compat with runtime styles) --- */
|
||
.prm-empty-hint {
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
* 6. 浅色模式覆盖 — 对齐 design/light-mode.html
|
||
* 作用域：body:not(.theme-dark) 下的插件容器
|
||
* 要点：暖米色调 / 实心紫 CTA / 白底+阴影卡片 / 深紫 accent
|
||
* ============================================================ */
|
||
|
||
body:not(.theme-dark) {
|
||
/* 暖米色体系（设计稿 @theme tokens 复刻） */
|
||
--prm-surface: #fefefe;
|
||
--prm-surface-hover: #f5f3f0;
|
||
--prm-bg-base: #faf9f7;
|
||
--prm-border: #e5e2de;
|
||
--prm-border-subtle: #ece9e5;
|
||
--prm-text-primary: #1c1917;
|
||
--prm-text-secondary: #44403c;
|
||
--prm-text-muted: #78716c;
|
||
--prm-quote-bg: #f5f3f0;
|
||
/* 深紫 accent —— 设计稿 #6d5acd（不是浅薰衣草 rgba(167,139,250)） */
|
||
--prm-accent: #6d5acd;
|
||
--prm-accent-hover: #5b49bd;
|
||
--prm-accent-soft: rgba(109, 90, 205, 0.08);
|
||
}
|
||
|
||
/* ---- 6.1 容器：底色改成暖米基底，去除冷白默认 ---- */
|
||
body:not(.theme-dark) .promptuary-sidebar {
|
||
background: var(--prm-bg-base);
|
||
}
|
||
body:not(.theme-dark) .prm-sidebar-action-bar {
|
||
background: rgba(254, 254, 254, 0.6);
|
||
backdrop-filter: blur(6px);
|
||
-webkit-backdrop-filter: blur(6px);
|
||
border-top-color: var(--prm-border-subtle);
|
||
}
|
||
|
||
/* ---- 6.2 Header：icon 用 accent-soft，标题用 primary 文字色 ---- */
|
||
body:not(.theme-dark) .prm-header-icon {
|
||
background: var(--prm-accent-soft);
|
||
color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .prm-header-title {
|
||
color: var(--prm-text-primary);
|
||
}
|
||
|
||
/* ---- 6.3 Mode capsule：底用 border-subtle 暖米调 ---- */
|
||
body:not(.theme-dark) .prm-mode-capsule,
|
||
body:not(.theme-dark) .prm-popover-capsule {
|
||
background: rgba(236, 233, 229, 0.8);
|
||
}
|
||
body:not(.theme-dark) .prm-mode-capsule button.active,
|
||
body:not(.theme-dark) .prm-popover-capsule button.active {
|
||
background: var(--prm-surface);
|
||
color: var(--prm-text-primary);
|
||
box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
|
||
}
|
||
|
||
/* ---- 6.4 卡片：白底 + 双层阴影（核心改动）---- */
|
||
body:not(.theme-dark) .prm-card {
|
||
background: var(--prm-surface);
|
||
/* 阴影同时充当极细描边，去掉原 1px 实边框的"嵌进底色"感 */
|
||
border-color: transparent;
|
||
box-shadow:
|
||
0 1px 2px rgba(28, 25, 23, 0.04),
|
||
0 0 0 1px rgba(28, 25, 23, 0.03);
|
||
transition: box-shadow 0.15s, background 0.15s;
|
||
}
|
||
body:not(.theme-dark) .prm-card:hover {
|
||
background: var(--prm-surface);
|
||
box-shadow:
|
||
0 2px 8px rgba(28, 25, 23, 0.06),
|
||
0 0 0 1px rgba(28, 25, 23, 0.05);
|
||
}
|
||
|
||
/* 引用块：暖米色而非紫灰 */
|
||
body:not(.theme-dark) .prm-card-quote {
|
||
background: var(--prm-quote-bg);
|
||
color: var(--prm-text-secondary);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ---- 6.5 CTA 主按钮：实心紫 + 白字（核心改动）---- */
|
||
body:not(.theme-dark) .prm-action-execute {
|
||
background: var(--prm-accent);
|
||
border-color: var(--prm-accent);
|
||
color: #ffffff;
|
||
box-shadow: 0 1px 2px rgba(109, 90, 205, 0.15);
|
||
}
|
||
body:not(.theme-dark) .prm-action-execute:hover {
|
||
background: var(--prm-accent-hover);
|
||
border-color: var(--prm-accent-hover);
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 次按钮（Export / Copy Prompt）：白底 + 暖米边框 */
|
||
body:not(.theme-dark) .prm-action-btn {
|
||
background: var(--prm-surface);
|
||
border-color: var(--prm-border);
|
||
color: var(--prm-text-muted);
|
||
}
|
||
body:not(.theme-dark) .prm-action-btn:hover {
|
||
background: var(--prm-surface-hover);
|
||
color: var(--prm-text-primary);
|
||
border-color: var(--prm-border);
|
||
}
|
||
|
||
/* ---- 6.6 Note input：focus 用深紫 ---- */
|
||
body:not(.theme-dark) .prm-popover-note-input-wrap:focus-within {
|
||
border-color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .promptuary-popover input[type="text"]:focus {
|
||
border-color: var(--prm-accent);
|
||
}
|
||
|
||
/* Note Save 按钮：用深紫 accent，淡底 */
|
||
body:not(.theme-dark) .prm-popover-note-save {
|
||
background: var(--prm-accent-soft);
|
||
border-color: rgba(109, 90, 205, 0.20);
|
||
color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .prm-popover-note-save:hover {
|
||
background: rgba(109, 90, 205, 0.16);
|
||
border-color: rgba(109, 90, 205, 0.35);
|
||
}
|
||
|
||
/* 浮窗提交按钮：深紫描边 */
|
||
body:not(.theme-dark) .promptuary-popover .prm-submit-btn {
|
||
background: var(--prm-accent-soft);
|
||
border-color: rgba(109, 90, 205, 0.20);
|
||
color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .promptuary-popover .prm-submit-btn:hover {
|
||
background: rgba(109, 90, 205, 0.16);
|
||
}
|
||
|
||
/* Agent 按钮 hover 边框：深紫 */
|
||
body:not(.theme-dark) .prm-sidebar .prm-agent-btn:hover {
|
||
border-color: rgba(109, 90, 205, 0.40);
|
||
}
|
||
|
||
|
||
/* Diff 复选框 accent */
|
||
body:not(.theme-dark) .prm-diff-toggle input[type="checkbox"] {
|
||
accent-color: var(--prm-accent);
|
||
}
|
||
|
||
/* ---- 6.7 Settings page: warm tones ---- */
|
||
body:not(.theme-dark) .prm-settings-section {
|
||
background: var(--prm-bg-base);
|
||
border-color: var(--prm-border);
|
||
}
|
||
body:not(.theme-dark) .prm-settings-section-header:hover {
|
||
background: var(--prm-surface-hover);
|
||
}
|
||
body:not(.theme-dark) .prm-settings-section-icon {
|
||
background: var(--prm-surface);
|
||
border-color: var(--prm-border);
|
||
}
|
||
body:not(.theme-dark) .prm-settings-section-title {
|
||
color: var(--prm-text-primary);
|
||
}
|
||
body:not(.theme-dark) .prm-settings-section-desc {
|
||
color: var(--prm-text-muted);
|
||
}
|
||
body:not(.theme-dark) .prm-settings-page-icon {
|
||
/* Logo SVG has its own background, no need for extra styling */
|
||
}
|
||
|
||
body:not(.theme-dark) .prm-agent-card {
|
||
background: var(--prm-surface);
|
||
border-color: var(--prm-border);
|
||
}
|
||
body:not(.theme-dark) .prm-agent-card:hover {
|
||
border-color: var(--prm-border);
|
||
box-shadow: 0 1px 4px rgba(28,25,23,0.05);
|
||
}
|
||
body:not(.theme-dark) .prm-agent-card-avatar {
|
||
background: var(--prm-accent-soft);
|
||
border-color: rgba(109, 90, 205, 0.18);
|
||
color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .prm-agent-card.not-installed .prm-agent-card-avatar {
|
||
background: rgba(107,114,128,0.06);
|
||
border-color: var(--prm-border);
|
||
color: var(--prm-text-muted);
|
||
}
|
||
|
||
body:not(.theme-dark) .prm-rule-card {
|
||
background: var(--prm-surface);
|
||
border-color: var(--prm-border);
|
||
}
|
||
body:not(.theme-dark) .prm-rule-card:hover {
|
||
border-color: var(--prm-border);
|
||
box-shadow: 0 1px 4px rgba(28,25,23,0.05);
|
||
}
|
||
body:not(.theme-dark) .prm-rule-card-del:hover {
|
||
background: rgba(239,68,68,0.06);
|
||
}
|
||
|
||
body:not(.theme-dark) .prm-settings-sub-btn {
|
||
background: var(--prm-accent-soft);
|
||
border-color: rgba(109, 90, 205, 0.20);
|
||
color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .prm-settings-sub-btn:hover {
|
||
background: rgba(109, 90, 205, 0.16);
|
||
border-color: rgba(109, 90, 205, 0.35);
|
||
}
|
||
|
||
body:not(.theme-dark) .prm-settings-var-details {
|
||
background: var(--prm-surface);
|
||
border-color: var(--prm-border);
|
||
}
|
||
|
||
body:not(.theme-dark) .prm-arm-btn-save {
|
||
background: var(--prm-accent-soft);
|
||
border-color: rgba(109, 90, 205, 0.20);
|
||
color: var(--prm-accent);
|
||
}
|
||
body:not(.theme-dark) .prm-arm-btn-save:hover {
|
||
background: rgba(109, 90, 205, 0.16);
|
||
border-color: rgba(109, 90, 205, 0.35);
|
||
}
|
||
|
||
/* ============================================================
|
||
* 7. Icon sizing — setIcon SVG适配
|
||
* Obsidian setIcon() 会插入 <svg>，需控制尺寸
|
||
* ============================================================ */
|
||
|
||
/* Header icon (logo) */
|
||
.prm-logo-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
/* Settings button (⚙) */
|
||
.prm-header-settings svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Action bar buttons with icons */
|
||
.prm-action-btn svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.prm-action-execute svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Inline status badges (⚠/🔧) */
|
||
.prm-card-status-inline svg {
|
||
width: 11px;
|
||
height: 11px;
|
||
vertical-align: -1px;
|
||
}
|
||
|
||
/* Confirm warning icon */
|
||
.prm-confirm-warning svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
vertical-align: -2px;
|
||
}
|
||
|
||
/* ============================================================
|
||
* API Confirm Modal — matches API Confirm.html
|
||
* ============================================================ */
|
||
|
||
.modal.prm-api-confirm-modal .modal-close-button { display: none; }
|
||
.modal.prm-api-confirm-modal {
|
||
width: 500px;
|
||
border-radius: 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.prm-apm-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-apm-header-left { display: flex; align-items: center; gap: 10px; }
|
||
.prm-apm-icon {
|
||
width: 24px; height: 24px; border-radius: 7px;
|
||
background: rgba(96,165,250,0.12);
|
||
border: 1px solid rgba(96,165,250,0.20);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(96,165,250,0.85);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-apm-title {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal); line-height: 1.2;
|
||
}
|
||
.prm-apm-subtitle {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); margin-top: 2px;
|
||
}
|
||
|
||
/* Provider badge row */
|
||
.prm-apm-provider-row {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 10px 18px 4px;
|
||
}
|
||
.prm-apm-provider-avatar {
|
||
width: 20px; height: 20px;
|
||
border-radius: 5px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border: 1px solid transparent;
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-apm-provider-char {
|
||
font-size: 10px; font-weight: 700;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
.prm-apm-provider-name {
|
||
font-size: 12px; font-weight: 600;
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-apm-provider-badge {
|
||
font-size: 8px; font-family: var(--font-monospace);
|
||
padding: 1px 6px; border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Info table */
|
||
.prm-apm-info-wrap { padding: 4px 18px 8px; }
|
||
.prm-apm-info-box {
|
||
background: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.prm-apm-info-row {
|
||
display: flex; align-items: center;
|
||
padding: 7px 12px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
}
|
||
.prm-apm-info-row:last-child { border-bottom: none; }
|
||
.prm-apm-info-label {
|
||
font-size: 9px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); opacity: 0.6;
|
||
text-transform: uppercase; letter-spacing: 0.06em;
|
||
width: 80px; flex-shrink: 0;
|
||
}
|
||
.prm-apm-info-value {
|
||
font-size: 12px; font-family: var(--font-monospace);
|
||
color: var(--text-normal);
|
||
}
|
||
.prm-apm-info-warn {
|
||
color: rgba(251,146,60,0.90);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Warning */
|
||
.prm-apm-warning {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
background: rgba(251,146,60,0.08);
|
||
border: 1px solid rgba(251,146,60,0.20);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
margin: 4px 18px 0;
|
||
}
|
||
.prm-apm-warning-icon {
|
||
color: rgba(251,146,60,0.85);
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
.prm-apm-warning-text {
|
||
font-size: 11px;
|
||
color: var(--text-normal);
|
||
opacity: 0.80;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Footer */
|
||
.prm-apm-footer {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 10px 18px 14px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* API confirm buttons */
|
||
.prm-apm-btn {
|
||
display: inline-flex; align-items: center;
|
||
font-family: var(--font-monospace); cursor: pointer;
|
||
border-radius: 6px; transition: all 0.12s;
|
||
}
|
||
.prm-apm-btn-inner {
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.prm-apm-btn-icon svg, .prm-apm-btn-icon .svg-icon {
|
||
width: 12px; height: 12px;
|
||
}
|
||
|
||
/* Cancel */
|
||
.prm-apm-btn-cancel {
|
||
font-size: 10px; font-weight: 500;
|
||
padding: 6px 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
.prm-apm-btn-cancel:hover {
|
||
color: rgba(180,40,55,0.90);
|
||
border-color: rgba(215,58,73,0.25);
|
||
background: rgba(215,58,73,0.06);
|
||
}
|
||
.theme-dark .prm-apm-btn-cancel:hover {
|
||
color: rgba(248,150,150,0.90);
|
||
border-color: rgba(248,113,113,0.25);
|
||
background: rgba(248,113,113,0.08);
|
||
}
|
||
|
||
/* Execute (green CTA) */
|
||
.prm-apm-btn-exec {
|
||
font-size: 11px; font-weight: 600;
|
||
padding: 7px 14px;
|
||
background: rgba(52,168,83,0.08);
|
||
border: 1px solid rgba(52,168,83,0.30);
|
||
color: rgba(30,120,50,0.92);
|
||
}
|
||
.prm-apm-btn-exec:hover {
|
||
background: rgba(52,168,83,0.16);
|
||
border-color: rgba(52,168,83,0.45);
|
||
}
|
||
.theme-dark .prm-apm-btn-exec {
|
||
background: rgba(74,222,128,0.10);
|
||
border-color: rgba(74,222,128,0.28);
|
||
color: rgba(110,220,140,0.95);
|
||
}
|
||
.theme-dark .prm-apm-btn-exec:hover {
|
||
background: rgba(74,222,128,0.20);
|
||
}
|
||
|
||
/* Dark mode overrides for API Confirm Modal */
|
||
.theme-dark .modal.prm-api-confirm-modal {
|
||
background: var(--background-primary);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
|
||
}
|
||
.theme-dark .prm-apm-icon {
|
||
background: rgba(96,165,250,0.18);
|
||
border-color: rgba(96,165,250,0.30);
|
||
color: rgba(150,190,255,0.90);
|
||
}
|
||
.theme-dark .prm-apm-info-box {
|
||
background: var(--background-secondary);
|
||
}
|
||
.theme-dark .prm-apm-warning {
|
||
background: rgba(251,146,60,0.10);
|
||
border-color: rgba(251,146,60,0.25);
|
||
}
|
||
.theme-dark .prm-apm-warning-icon {
|
||
color: rgba(251,170,100,0.90);
|
||
}
|
||
|
||
/* API Confirm icon sizing */
|
||
.prm-apm-icon svg, .prm-apm-icon .svg-icon {
|
||
width: 14px; height: 14px;
|
||
}
|
||
.prm-apm-warning-icon svg, .prm-apm-warning-icon .svg-icon {
|
||
width: 14px; height: 14px;
|
||
}
|
||
|
||
/* ============================================================
|
||
* API Progress Modal — matches API Confirm.html (progress variant)
|
||
* ============================================================ */
|
||
|
||
.modal.prm-api-progress-modal .modal-close-button { display: none; }
|
||
.modal.prm-api-progress-modal {
|
||
width: 400px;
|
||
border-radius: 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Header */
|
||
.prm-ppm-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--background-modifier-border);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-ppm-header-left { display: flex; align-items: center; gap: 10px; }
|
||
.prm-ppm-icon {
|
||
width: 24px; height: 24px; border-radius: 7px;
|
||
background: rgba(96,165,250,0.12);
|
||
border: 1px solid rgba(96,165,250,0.20);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(96,165,250,0.85);
|
||
flex-shrink: 0;
|
||
}
|
||
.prm-ppm-title {
|
||
font-size: 13px; font-weight: 600;
|
||
color: var(--text-normal); line-height: 1.2;
|
||
}
|
||
.prm-ppm-subtitle {
|
||
font-size: 10px; font-family: var(--font-monospace);
|
||
color: var(--text-muted); margin-top: 2px;
|
||
}
|
||
|
||
/* Content area */
|
||
.prm-ppm-content {
|
||
padding: 12px 18px;
|
||
flex: 1;
|
||
}
|
||
|
||
/* Spinner state */
|
||
.prm-ppm-spinner {
|
||
width: 32px; height: 32px;
|
||
border: 2px solid rgba(96,165,250,0.20);
|
||
border-top-color: rgba(96,165,250,0.85);
|
||
border-radius: 50%;
|
||
animation: prm-spin 0.8s linear infinite;
|
||
margin: 16px auto 12px;
|
||
}
|
||
@keyframes prm-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.prm-ppm-calling-text {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
/* Error state */
|
||
.prm-ppm-error {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
background: rgba(215,58,73,0.06);
|
||
border: 1px solid rgba(215,58,73,0.20);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
}
|
||
.prm-ppm-error-icon {
|
||
color: rgba(215,58,73,0.80);
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
.prm-ppm-error-icon svg, .prm-ppm-error-icon .svg-icon {
|
||
width: 14px; height: 14px;
|
||
}
|
||
.prm-ppm-error-text {
|
||
font-size: 11px;
|
||
color: var(--text-normal);
|
||
opacity: 0.85;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Success state */
|
||
.prm-ppm-success {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
background: rgba(52,168,83,0.06);
|
||
border: 1px solid rgba(52,168,83,0.20);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
}
|
||
.prm-ppm-success-icon {
|
||
color: rgba(52,168,83,0.85);
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
.prm-ppm-success-icon svg, .prm-ppm-success-icon .svg-icon {
|
||
width: 14px; height: 14px;
|
||
}
|
||
.prm-ppm-success-text {
|
||
font-size: 11px;
|
||
color: var(--text-normal);
|
||
opacity: 0.85;
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Footer */
|
||
.prm-ppm-footer {
|
||
display: flex; align-items: center; justify-content: flex-end;
|
||
padding: 10px 18px 14px;
|
||
border-top: 1px solid var(--background-modifier-border);
|
||
margin-top: auto;
|
||
}
|
||
.prm-ppm-footer-right { display: flex; align-items: center; gap: 8px; }
|
||
|
||
/* Progress modal buttons */
|
||
.prm-ppm-btn {
|
||
display: inline-flex; align-items: center;
|
||
font-family: var(--font-monospace); cursor: pointer;
|
||
border-radius: 6px; transition: all 0.12s;
|
||
}
|
||
.prm-ppm-btn-inner {
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.prm-ppm-btn-icon svg, .prm-ppm-btn-icon .svg-icon {
|
||
width: 12px; height: 12px;
|
||
}
|
||
|
||
/* Close button */
|
||
.prm-ppm-btn-close {
|
||
font-size: 10px; font-weight: 500;
|
||
padding: 6px 12px;
|
||
background: var(--background-primary);
|
||
border: 1px solid var(--background-modifier-border);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Diff button (green CTA) */
|
||
.prm-ppm-btn-diff {
|
||
font-size: 11px; font-weight: 600;
|
||
padding: 7px 14px;
|
||
background: rgba(52,168,83,0.08);
|
||
border: 1px solid rgba(52,168,83,0.30);
|
||
color: rgba(30,120,50,0.92);
|
||
}
|
||
.prm-ppm-btn-diff:hover {
|
||
background: rgba(52,168,83,0.16);
|
||
border-color: rgba(52,168,83,0.45);
|
||
}
|
||
.theme-dark .prm-ppm-btn-diff {
|
||
background: rgba(74,222,128,0.10);
|
||
border-color: rgba(74,222,128,0.28);
|
||
color: rgba(110,220,140,0.95);
|
||
}
|
||
.theme-dark .prm-ppm-btn-diff:hover {
|
||
background: rgba(74,222,128,0.20);
|
||
}
|
||
|
||
/* Dark mode for progress modal */
|
||
.theme-dark .modal.prm-api-progress-modal {
|
||
background: var(--background-primary);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
|
||
}
|
||
.theme-dark .prm-ppm-icon {
|
||
background: rgba(96,165,250,0.18);
|
||
border-color: rgba(96,165,250,0.30);
|
||
color: rgba(150,190,255,0.90);
|
||
}
|
||
.theme-dark .prm-ppm-error {
|
||
background: rgba(248,113,113,0.08);
|
||
border-color: rgba(248,113,113,0.22);
|
||
}
|
||
.theme-dark .prm-ppm-error-icon {
|
||
color: rgba(248,113,113,0.85);
|
||
}
|
||
.theme-dark .prm-ppm-success {
|
||
background: rgba(74,222,128,0.08);
|
||
border-color: rgba(74,222,128,0.22);
|
||
}
|
||
.theme-dark .prm-ppm-success-icon {
|
||
color: rgba(110,220,140,0.90);
|
||
}
|
||
|
||
/* Progress modal icon sizing */
|
||
.prm-ppm-icon svg, .prm-ppm-icon .svg-icon {
|
||
width: 14px; height: 14px;
|
||
}
|
||
|
||
/* Diff modal icons */
|
||
.prm-dm-icon svg, .prm-dm-icon .svg-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.prm-dm-btn-icon svg, .prm-dm-btn-icon .svg-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
.prm-dm-hunk-btn-icon svg, .prm-dm-hunk-btn-icon .svg-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
/* Agent select modal icons */
|
||
.prm-asm-icon svg, .prm-asm-icon .svg-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Add Rule Modal icons */
|
||
.prm-arm-icon svg, .prm-arm-icon .svg-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Confirm Modal icons — override .svg-icon default sizing */
|
||
.prm-ccm-icon svg, .prm-ccm-icon .svg-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.prm-ccm-warning-icon svg, .prm-ccm-warning-icon .svg-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.prm-ccm-hint-icon svg, .prm-ccm-hint-icon .svg-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
.prm-ccm-btn-icon svg, .prm-ccm-btn-icon .svg-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
/* Modal close buttons — hard reset Obsidian's default button chrome */
|
||
button.prm-ccm-close,
|
||
button.prm-dm-close,
|
||
button.prm-asm-close {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
box-shadow: none;
|
||
border: 0;
|
||
outline: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
min-width: 28px;
|
||
width: 28px;
|
||
min-height: 28px;
|
||
height: 28px;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
line-height: 0;
|
||
font-size: 0;
|
||
}
|
||
button.prm-ccm-close:hover,
|
||
button.prm-dm-close:hover,
|
||
button.prm-asm-close:hover {
|
||
background: var(--background-modifier-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
button.prm-ccm-close:focus-visible,
|
||
button.prm-dm-close:focus-visible,
|
||
button.prm-asm-close:focus-visible {
|
||
box-shadow: 0 0 0 2px rgba(167,139,250,0.35);
|
||
}
|
||
button.prm-ccm-close svg,
|
||
button.prm-dm-close svg,
|
||
button.prm-asm-close svg,
|
||
button.prm-ccm-close .svg-icon,
|
||
button.prm-dm-close .svg-icon,
|
||
button.prm-asm-close .svg-icon {
|
||
display: block;
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Settings page icon */
|
||
.prm-settings-page-icon .prm-logo-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
/* Settings section icons */
|
||
.prm-settings-section-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* Settings section chevron */
|
||
.prm-settings-section-chevron svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
/* API key toggle icon */
|
||
.prm-api-key-toggle svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* ============================================================
|
||
* Utility classes (replacing inline styles per Obsidian lint rules)
|
||
* ============================================================ */
|
||
|
||
.promptuary-popover.prm-hidden,
|
||
.promptuary-bottom-toolbar.prm-hidden,
|
||
.prm-hidden { display: none; }
|
||
|
||
.prm-input-full-width { width: 100%; }
|
||
.prm-input-min-height { min-height: 120px; }
|
||
|
||
.prm-clip-textarea { position: fixed; left: -9999px; }
|
||
|
||
.prm-relative { position: relative; }
|
||
|
||
/* Dynamic color classes — set --prm-color-bg / --prm-color-border / --prm-color-text
|
||
* via el.style.setProperty(), then add these classes. */
|
||
.prm-dynamic-bg { background: var(--prm-color-bg); }
|
||
.prm-dynamic-border-color { border-color: var(--prm-color-border); }
|
||
.prm-dynamic-text-color { color: var(--prm-color-text); }
|
||
|
||
/* Dynamic position classes — set --prm-pos-top / --prm-pos-left
|
||
* via el.style.setProperty(), then add these classes. */
|
||
.prm-dynamic-position { top: var(--prm-pos-top); left: var(--prm-pos-left); }
|