289 lines
7.2 KiB
CSS
289 lines
7.2 KiB
CSS
/**
|
|
* 提示词小助手 (PromptAssistant) 样式表
|
|
* 包含所有组件样式和动画定义
|
|
*/
|
|
|
|
/* ======== 组件样式 ======== */
|
|
|
|
/* 输入框高亮动画 */
|
|
@keyframes inputHighlight {
|
|
0% {
|
|
background-color: transparent;
|
|
}
|
|
|
|
20% {
|
|
background-color: rgba(93, 243, 146, 0.07);
|
|
}
|
|
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.input-highlight {
|
|
animation: inputHighlight 0.2s ease-out;
|
|
}
|
|
|
|
/* 小助手容器 */
|
|
.prompt-assistant-container {
|
|
/* 基础布局 */
|
|
position: absolute;
|
|
pointer-events: all;
|
|
display: none;
|
|
/* 默认隐藏 */
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
/* 四周统一内边距 */
|
|
|
|
background-color: color-mix(in srgb, var(--bg-color), transparent 20%);
|
|
/* border: 1px solid rgba(100, 100, 100, 0.25); */
|
|
border: 1px solid var(--p-panel-border-color);
|
|
border-radius: 6px;
|
|
z-index: 9999;
|
|
opacity: 0.95;
|
|
backdrop-filter: blur(8px);
|
|
/* 动画与变换 */
|
|
transform-origin: bottom right;
|
|
user-select: none;
|
|
will-change: transform, opacity;
|
|
|
|
/* 尺寸设置 */
|
|
width: auto;
|
|
height: 28px !important;
|
|
/* 强制高度 */
|
|
max-width: fit-content;
|
|
box-sizing: border-box !important;
|
|
/* 优化性能 */
|
|
overflow: visible;
|
|
/* 允许内容溢出 */
|
|
}
|
|
|
|
/* 内部内容容器 */
|
|
.prompt-assistant-inner {
|
|
display: flex;
|
|
gap: 2px;
|
|
/* align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0; */
|
|
/* 防止内容撑开容器 */
|
|
}
|
|
|
|
/* 容器的悬停效果 */
|
|
.prompt-assistant-container:hover {
|
|
opacity: 1;
|
|
/* border-color: var(--p-inputtext-focus-border-color); */
|
|
/* transform: translateZ(0) scale(1.02); */
|
|
}
|
|
|
|
/* 按钮分割线样式 */
|
|
.prompt-assistant-divider {
|
|
width: 1px;
|
|
height: 10px;
|
|
background-color: var(--p-content-border-color);
|
|
margin: 0 2px;
|
|
align-self: center;
|
|
flex-shrink: 0;
|
|
transform: translateZ(0);
|
|
/* 确保硬件加速 */
|
|
border-radius: 0.5px;
|
|
/* 添加圆角效果 */
|
|
}
|
|
|
|
/* 小助手显示和隐藏动画类 */
|
|
.assistant-show {
|
|
display: flex !important;
|
|
animation: clipFadeInDown 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.assistant-hide {
|
|
display: flex !important;
|
|
animation: clipFadeOutUp 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
|
|
pointer-events: none;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* 状态提示的入场和退场动画类 */
|
|
.statustip-show {
|
|
animation: tipScaleIn 0.1s ease-out forwards !important;
|
|
}
|
|
|
|
.statustip-hide {
|
|
animation: tipFloatUp 0.4s ease-out forwards !important;
|
|
}
|
|
|
|
/* 按钮状态类 */
|
|
/* 通用按钮按钮样式 */
|
|
.prompt-assistant-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.8;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0 1px;
|
|
background-color: transparent;
|
|
transition: transform 0.15s, opacity 0.2s, background-color 0.2s;
|
|
flex-shrink: 0;
|
|
/* 防止按钮被压缩 */
|
|
border-radius: 3px;
|
|
color: var(--p-dialog-color);
|
|
/* 添加颜色属性用于SVG图标 */
|
|
}
|
|
|
|
/* SVG图标容器样式 */
|
|
.svg-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* SVG元素样式 */
|
|
.svg-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: currentColor;
|
|
color: inherit;
|
|
transition: all 0.2s;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 按钮内部图标样式 - 兼容旧的img和新的svg */
|
|
.prompt-assistant-button img,
|
|
.prompt-assistant-button .svg-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: inherit;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
z-index: 1;
|
|
vertical-align: middle;
|
|
/* 确保图标垂直居中 */
|
|
margin: 0;
|
|
/* 移除默认边距 */
|
|
}
|
|
|
|
/* 按钮悬停效果 */
|
|
.prompt-assistant-button:hover {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
/* 添加背景高亮 */
|
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
|
|
/* 添加轻微阴影 */
|
|
}
|
|
|
|
.prompt-assistant-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* 执行中状态 - 添加呼吸效果 */
|
|
.prompt-assistant-button.button-processing {
|
|
animation: buttonBreathing 1.5s infinite ease-in-out;
|
|
background-color: rgba(100, 100, 255, 0.15) !important;
|
|
/* border: 1px solid rgba(100, 150, 255, 0.3); */
|
|
position: relative;
|
|
z-index: 1;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* 激活状态 */
|
|
.prompt-assistant-button.button-active {
|
|
opacity: 1;
|
|
transform: scale(1.15);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
/* 添加背景高亮 */
|
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
|
|
/* 添加轻微阴影 */
|
|
color: var(--p-listbox-option-selected-color);
|
|
/* 激活状态颜色 */
|
|
}
|
|
|
|
.prompt-assistant-button.button-active img,
|
|
.prompt-assistant-button.button-active .svg-icon svg {
|
|
filter: brightness(1.8) !important;
|
|
}
|
|
|
|
/* 置灰状态 - 降低亮度且不可点击 */
|
|
.prompt-assistant-button.button-disabled {
|
|
opacity: 0.4 !important;
|
|
filter: grayscale(60%);
|
|
cursor: not-allowed !important;
|
|
pointer-events: none;
|
|
transform: none !important;
|
|
color: var(--p-text-muted-color);
|
|
/* 禁用状态颜色 */
|
|
}
|
|
|
|
.prompt-assistant-button.button-disabled:hover {
|
|
transform: none !important;
|
|
background-color: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.prompt-assistant-button.button-disabled img,
|
|
.prompt-assistant-button.button-disabled .svg-icon svg {
|
|
filter: brightness(0.9) grayscale(100%);
|
|
}
|
|
|
|
|
|
/* statustip状态提示样式 */
|
|
.statustip {
|
|
|
|
transform-origin: center bottom;
|
|
font-weight: bold;
|
|
letter-spacing: 0.5px;
|
|
position: absolute;
|
|
/* 使用absolute代替fixed */
|
|
padding: 4px 8px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
z-index: 10000;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
|
|
pointer-events: none;
|
|
/* 确保提示不会阻挡交互 */
|
|
backdrop-filter: blur(8px);
|
|
white-space: nowrap;
|
|
/* 防止文本换行 */
|
|
will-change: transform, opacity;
|
|
/* 优化动画性能 */
|
|
}
|
|
|
|
/* 不同状态的颜色效果 */
|
|
.statustip.success {
|
|
color: color-mix(in srgb, var(--p-inputtext-color), rgb(18, 255, 18) 40%) !important;
|
|
background-color: color-mix(in srgb, var(--p-content-background), rgb(4, 58, 4)30%);
|
|
}
|
|
|
|
.statustip.error {
|
|
color: color-mix(in srgb, var(--p-inputtext-color), rgb(255, 0, 0) 60%) !important;
|
|
background-color: color-mix(in srgb, var(--p-content-background), rgb(74, 12, 12)30%);
|
|
}
|
|
|
|
.statustip.loading {
|
|
color: color-mix(in srgb, var(--p-inputtext-color), rgb(249, 255, 69) 30%) !important;
|
|
background-color: color-mix(in srgb, var(--p-content-background), rgb(114, 117, 22)30%);
|
|
}
|
|
|
|
.statustip.info {
|
|
color: color-mix(in srgb, var(--p-inputtext-color), rgb(82, 70, 255) 60%) !important;
|
|
background-color: color-mix(in srgb, var(--p-content-background), rgb(55, 8, 113)30%);
|
|
|
|
} |