1582 lines
34 KiB
CSS
1582 lines
34 KiB
CSS
/**
|
|
* 设置界面样式
|
|
*/
|
|
|
|
/* Z-index 层级管理 */
|
|
:root {
|
|
--settings-modal-z-index: 9203;
|
|
--settings-dropdown-z-index: 9204;
|
|
--settings-overlay-z-index: 9202;
|
|
}
|
|
|
|
/* 遮罩层样式 */
|
|
.settings-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: var(--settings-overlay-z-index);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.settings-modal-overlay.overlay-show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.settings-modal-overlay.overlay-hide {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* 设置面板容器 */
|
|
.settings-panel {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* 设置项组 */
|
|
.settings-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* 设置项标题 */
|
|
.settings-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
/* 服务申请链接容器样式 */
|
|
.settings-service-links {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-color: var(--p-button-secondary-background);
|
|
border-radius: 10px;
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
|
|
/* 服务申请前缀文本样式（与链接字号一致） */
|
|
.settings-service-prefix {
|
|
color: var(--p-button-text-primary-color);
|
|
font-size: 14px;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
/* 服务申请链接样式 */
|
|
.settings-service-link {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
color: var(--p-button-text-primary-color) !important;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.settings-service-link:hover {
|
|
color: var(--p-button-text-primary-color) !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
/* 服务链接分隔符 */
|
|
.settings-service-separator {
|
|
color: var(--p-button-text-primary-color);
|
|
opacity: 0.5;
|
|
padding: 0 2px;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 设置项内容 */
|
|
.settings-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* 按钮组样式 */
|
|
.button-group {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* 设置弹窗样式 */
|
|
.settings-modal {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0.8);
|
|
/* 响应式宽度设置 */
|
|
width: min(90vw, 800px);
|
|
min-width: 400px;
|
|
/* 响应式高度设置 */
|
|
max-height: 90vh;
|
|
min-height: 300px;
|
|
margin: 0;
|
|
z-index: var(--settings-modal-z-index);
|
|
background-color: var(--p-dialog-background);
|
|
border: 1px solid var(--p-dialog-border-color);
|
|
border-radius: var(--p-dialog-border-radius);
|
|
box-shadow: var(--p-dialog-shadow);
|
|
color: var(--p-dialog-color);
|
|
/* 添加弹性布局 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* 添加动画属性 */
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* 弹窗显示动画类 */
|
|
.settings-modal.modal-show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
|
|
/* 弹窗隐藏动画类 */
|
|
.settings-modal.modal-hide {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translate(-50%, -50%) scale(0.8);
|
|
}
|
|
|
|
/* 拖动时的状态 */
|
|
.settings-modal.dragging {
|
|
transition: none;
|
|
cursor: move;
|
|
}
|
|
|
|
/* 标题栏样式 */
|
|
.settings-modal .p-dialog-header {
|
|
padding: var(--p-dialog-header-padding);
|
|
border-bottom: 1px solid var(--p-dialog-border-color);
|
|
|
|
/* 固定头部 */
|
|
flex: 0 0 auto;
|
|
user-select: none;
|
|
}
|
|
|
|
.settings-modal .p-dialog-content {
|
|
padding: 10px 40px;
|
|
position: relative;
|
|
/* 作为二维码的定位参照，避免被外层裁剪 */
|
|
/* 内容区域自适应 */
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
/* 添加平滑滚动 */
|
|
scroll-behavior: smooth;
|
|
/* 优化滚动条样式 */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--p-scrollpanel-bar-background) transparent;
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
.settings-modal .p-dialog-content::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
.settings-modal .p-dialog-content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-modal .p-dialog-content::-webkit-scrollbar-thumb {
|
|
background: var(--p-scrollpanel-bar-background);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.settings-modal .p-dialog-content::-webkit-scrollbar-thumb:hover {
|
|
background: var(--p-scrollpanel-bar-background);
|
|
}
|
|
|
|
.settings-modal .p-dialog-footer {
|
|
padding: 10px 40px 20px 40px;
|
|
|
|
|
|
gap: 0.9rem;
|
|
/* 固定底部 */
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* 表单部分样式 */
|
|
.settings-form-section {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--p-dialog-border-color);
|
|
}
|
|
|
|
.settings-form-section:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.settings-form-section-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--p-dialog-header-color);
|
|
}
|
|
|
|
/* 表单组样式 */
|
|
.settings-form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* 水平布局的表单组 */
|
|
.settings-form-group.horizontal {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.settings-form-group.horizontal>* {
|
|
flex: 1;
|
|
min-width: 0;
|
|
/* 防止flex项溢出 */
|
|
}
|
|
|
|
/* 调整水平布局中标签的样式 */
|
|
.settings-form-group.horizontal .settings-form-label {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* 调整下拉选择器在水平布局中的样式 */
|
|
.settings-form-group.horizontal .p-dropdown,
|
|
.settings-form-group.horizontal .p-inputtext {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 确保下拉选择器的容器不会被挤压 */
|
|
.settings-form-group.horizontal .p-dropdown-container {
|
|
min-width: 150px;
|
|
}
|
|
|
|
/* 确保输入框容器不会被挤压 */
|
|
.settings-form-group.horizontal .p-input-wrapper {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.settings-form-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.settings-form-label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
color: var(--p-text-color);
|
|
}
|
|
|
|
/* 输入框容器样式 */
|
|
.flex-1 {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 优化关闭按钮悬停效果 */
|
|
.settings-modal .p-dialog-header-icon.p-dialog-header-close {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 0.5rem;
|
|
color: var(--p-button-text-secondary-color);
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.settings-modal .p-dialog-header-icon.p-dialog-header-close:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.settings-modal .p-dialog-header-icon.p-dialog-header-close .pi-times {
|
|
font-size: 1rem;
|
|
|
|
}
|
|
|
|
/* 独立下拉选择组件样式（不依赖 PrimeVue 全局样式） */
|
|
/* 仅影响通过小助手创建的选择框，不改变ComfyUI内置组件 */
|
|
.pa-dropdown {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: var(--p-inputtext-background);
|
|
border: 1px solid var(--p-inputtext-border-color);
|
|
border-radius: 6px;
|
|
transition: border-color 0.2s;
|
|
width: 100%;
|
|
box-shadow: var(--p-inputtext-shadow);
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.pa-dropdown:hover {
|
|
border-color: var(--p-form-field-hover-border-color);
|
|
}
|
|
|
|
.pa-dropdown.p-focus {
|
|
border-color: var(--p-form-field-focus-border-color);
|
|
}
|
|
|
|
.pa-dropdown .pa-dropdown-label {
|
|
flex: 1 1 auto;
|
|
border: 0 none;
|
|
color: var(--p-inputtext-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 1%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pa-dropdown .pa-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 2.5rem;
|
|
color: var(--p-form-field-hover-border-color);
|
|
height: 100%;
|
|
}
|
|
|
|
/* 下拉面板（独立样式） */
|
|
.pa-dropdown-panel {
|
|
z-index: var(--settings-dropdown-z-index);
|
|
background: var(--p-inputtext-background);
|
|
border: 1px solid var(--p-inputtext-border-color);
|
|
box-shadow: var(--p-inputtext-shadow);
|
|
border-radius: 6px;
|
|
transform-origin: center top;
|
|
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.pa-dropdown-panel.p-hidden {
|
|
opacity: 0;
|
|
transform: scaleY(0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pa-dropdown-panel.p-enter-active {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* 隐藏辅助可访问性选择器（在未加载PrimeVue时也生效） */
|
|
.p-hidden-accessible {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0 0 0 0) !important;
|
|
clip-path: inset(50%) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
}
|
|
|
|
/* 面板内容滚动容器（独立样式） */
|
|
.pa-dropdown-panel .p-dropdown-items-wrapper {
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
/* 列表与选项（独立样式） */
|
|
.pa-dropdown-panel .p-dropdown-items {
|
|
padding: 4px;
|
|
list-style: none;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.pa-dropdown-panel .p-dropdown-item {
|
|
padding: 10px 12px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s;
|
|
color: var(--p-select-option-color);
|
|
}
|
|
|
|
.pa-dropdown-panel .p-dropdown-item:hover {
|
|
background-color: var(--p-form-field-filled-hover-background);
|
|
}
|
|
|
|
.pa-dropdown-panel .p-dropdown-item.p-highlight {
|
|
background-color: var(--p-list-option-selected-focus-background);
|
|
color: var(--p-form-field-focus-border-color);
|
|
}
|
|
|
|
/* 水平表单布局中的宽度适配 */
|
|
.settings-form-group.horizontal .pa-dropdown,
|
|
.settings-form-group.horizontal .p-inputtext {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-form-group.horizontal .pa-dropdown-container {
|
|
min-width: 150px;
|
|
}
|
|
|
|
|
|
/* 选择器控件样式 */
|
|
.settings-modal .p-dropdown:not(.pa-dropdown) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: var(--p-select-background);
|
|
border: 1px solid var(--p-select-border-color);
|
|
border-radius: var(--p-select-border-radius);
|
|
transition: border-color 0.2s;
|
|
width: 100%;
|
|
box-shadow: var(--p-select-shadow);
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.settings-modal .p-dropdown:not(.pa-dropdown):hover {
|
|
border-color: var(--p-form-field-hover-border-color);
|
|
}
|
|
|
|
.settings-modal .p-dropdown:not(.pa-dropdown).p-focus {
|
|
border-color: var(--p-primary-color);
|
|
}
|
|
|
|
.settings-modal .p-dropdown-label:not(.pa-dropdown-label) {
|
|
flex: 1 1 auto;
|
|
padding: var(--p-select-padding-y) var(--p-select-padding-x);
|
|
padding-right: 0;
|
|
background: transparent;
|
|
border: 0 none;
|
|
color: var(--p-select-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 1%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.settings-modal .p-dropdown-trigger:not(.pa-dropdown-trigger) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 2.5rem;
|
|
color: var(--p-button-text-secondary-color);
|
|
height: 100%;
|
|
}
|
|
|
|
/* 下拉面板动画相关样式（排除小助手下拉） */
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel),
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) {
|
|
z-index: var(--settings-dropdown-z-index);
|
|
background: var(--p-dialog-background);
|
|
border: 1px solid var(--p-select-overlay-border-color);
|
|
box-shadow: var(--p-select-overlay-shadow);
|
|
border-radius: var(--p-select-overlay-border-radius);
|
|
transform-origin: center top;
|
|
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
|
|
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel).p-hidden,
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel).p-hidden {
|
|
opacity: 0;
|
|
transform: scaleY(0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel).p-enter-active,
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel).p-enter-active {
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-items,
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-items {
|
|
padding: var(--p-list-padding, 0.5rem 0);
|
|
list-style: none;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--p-select-list-gap);
|
|
}
|
|
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item,
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item {
|
|
padding: var(--p-list-item-padding, 0.75rem 1rem);
|
|
margin: 0;
|
|
cursor: pointer;
|
|
border-radius: var(--p-select-option-border-radius);
|
|
transition: background-color 0.2s;
|
|
color: var(--p-list-item-color);
|
|
}
|
|
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item:hover,
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item:hover {
|
|
background-color: var(--p-select-option-focus-background);
|
|
color: var(--p-select-option-focus-color);
|
|
}
|
|
|
|
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item.p-highlight,
|
|
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item.p-highlight {
|
|
background-color: var(--p-select-option-selected-background);
|
|
color: var(--p-select-option-selected-color);
|
|
}
|
|
|
|
/* 响应式布局媒体查询 */
|
|
@media screen and (max-width: 640px) {
|
|
.settings-modal {
|
|
width: 95vw;
|
|
min-width: 320px;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.settings-form-group {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.settings-form-section {
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
/* 拖拽排序相关样式 */
|
|
.tags-manager-container .tag_accordion.dragging,
|
|
.tags-manager-container .tag_item.dragging {
|
|
opacity: 0.7;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
z-index: 100;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion.drag-over-top {
|
|
border-top: 3px solid var(--p-primary-500) !important;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion.drag-over-bottom {
|
|
border-bottom: 3px solid var(--p-primary-500) !important;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tags-manager-container .tag_item.drag-over-left {
|
|
border-left: 3px solid var(--p-primary-500) !important;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.tags-manager-container .tag_item.drag-over-right {
|
|
border-right: 3px solid var(--p-primary-500) !important;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
/* 标签管理界面特有样式 */
|
|
.tags-manager-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tags-scroll-container {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.tags-manager-container .tag_item {
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.tags-manager-container .tag_item:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion {
|
|
cursor: grab;
|
|
user-select: none;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* 标签配置管理器样式 */
|
|
.tags-config-container {
|
|
width: 800px;
|
|
height: 600px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tags-config-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 标签管理弹窗大小 */
|
|
.tags-config-dialog {
|
|
width: 760px;
|
|
height: 600px;
|
|
}
|
|
|
|
.tag-management-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tags-action-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
.tags-scroll-container {
|
|
flex: 1;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
padding: 10px;
|
|
border: 1px solid var(--comfy-menu-secondary-bg);
|
|
border-radius: 8px;
|
|
background-color: var(--p-listbox-background);
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.settings-action-btn {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* 删除按钮样式 */
|
|
|
|
.tag_delete_button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--p-button-text-secondary-color);
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
margin-left: 4px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
min-width: 24px;
|
|
/* 添加最小宽度 */
|
|
min-height: 24px;
|
|
/* 添加最小高度 */
|
|
transition: all 0.2s;
|
|
opacity: 0.5;
|
|
box-sizing: border-box;
|
|
/* 确保padding不会影响整体大小 */
|
|
}
|
|
|
|
.tag_delete_button.small {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
/* 添加最小宽度 */
|
|
min-height: 20px;
|
|
/* 添加最小高度 */
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
/* 确保padding不会影响整体大小 */
|
|
}
|
|
|
|
.tag_delete_button:hover {
|
|
background: rgba(255, 100, 100, 0.2);
|
|
color: rgba(255, 100, 100, 1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.tag_delete_icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
min-width: 14px;
|
|
/* 添加最小宽度 */
|
|
min-height: 14px;
|
|
/* 添加最小高度 */
|
|
flex-shrink: 0;
|
|
/* 防止图标被压缩 */
|
|
display: block;
|
|
/* 确保图标显示为块级元素 */
|
|
}
|
|
|
|
.tag_delete_icon.small {
|
|
width: 12px;
|
|
height: 12px;
|
|
min-width: 12px;
|
|
/* 添加最小宽度 */
|
|
min-height: 12px;
|
|
/* 添加最小高度 */
|
|
}
|
|
|
|
/* 编辑按钮样式 */
|
|
.tag_edit_button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--p-text-muted-color);
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
margin-left: 4px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
min-width: 24px;
|
|
/* 添加最小宽度 */
|
|
min-height: 24px;
|
|
/* 添加最小高度 */
|
|
transition: all 0.2s;
|
|
opacity: 0.5;
|
|
box-sizing: border-box;
|
|
/* 确保padding不会影响整体大小 */
|
|
}
|
|
|
|
.tag_edit_button.small {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
/* 添加最小宽度 */
|
|
min-height: 20px;
|
|
/* 添加最小高度 */
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
/* 确保padding不会影响整体大小 */
|
|
}
|
|
|
|
.tag_edit_button:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: rgb(207, 215, 211);
|
|
opacity: 1;
|
|
}
|
|
|
|
.tag_edit_icon {
|
|
color: var(--p-button-text-secondary-color);
|
|
font-size: 12px;
|
|
width: 12px;
|
|
height: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.tag_edit_icon.small {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.tag_action_icon {
|
|
font-size: 14px;
|
|
width: 14px;
|
|
/* 添加固定宽度 */
|
|
height: 14px;
|
|
/* 添加固定高度 */
|
|
min-width: 14px;
|
|
/* 添加最小宽度 */
|
|
min-height: 14px;
|
|
/* 添加最小高度 */
|
|
flex-shrink: 0;
|
|
/* 防止图标被压缩 */
|
|
display: flex;
|
|
/* 使用flex布局确保内容居中 */
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tag_action_icon.small {
|
|
font-size: 12px;
|
|
width: 12px;
|
|
/* 添加固定宽度 */
|
|
height: 12px;
|
|
/* 添加固定高度 */
|
|
min-width: 12px;
|
|
/* 添加最小宽度 */
|
|
min-height: 12px;
|
|
/* 添加最小高度 */
|
|
}
|
|
|
|
/* 确保图标在按钮中居中显示 */
|
|
.tag_accordion_icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
/* 添加右对齐 */
|
|
gap: 4px;
|
|
height: 24px;
|
|
/* 保持固定高度 */
|
|
min-width: 80px;
|
|
/* 确保容器有足够的宽度容纳所有图标 */
|
|
}
|
|
|
|
.tag_accordion_icon .accordion_arrow_icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
padding: 2px;
|
|
border-radius: 50%;
|
|
color: var(--p-button-text-secondary-color);
|
|
opacity: 0.5;
|
|
transition: all 0.2s;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tag_accordion_icon .accordion_arrow_icon:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.tag_accordion_icon .accordion_arrow_icon.rotate-180 {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 调整图标容器内部布局 */
|
|
.tag_accordion_header {
|
|
padding: 4px 14px;
|
|
background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
border-radius: 6px;
|
|
min-height: 32px;
|
|
/* 确保标题栏有足够的高度 */
|
|
}
|
|
|
|
.tag_accordion_title {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: var(--p-text-muted-color);
|
|
font-weight: 500;
|
|
margin-right: 8px;
|
|
/* 添加右边距，与图标保持距离 */
|
|
overflow: hidden;
|
|
/* 防止文本溢出 */
|
|
text-overflow: ellipsis;
|
|
/* 文本溢出时显示省略号 */
|
|
white-space: nowrap;
|
|
/* 保持单行 */
|
|
}
|
|
|
|
.tags_container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 90%);
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
/* 使用popup.css中定义的标签样式，只修改cursor为grab */
|
|
.tags-manager-container .tag_item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: grab;
|
|
}
|
|
|
|
.tags-manager-container .tag_item:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion {
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
cursor: default;
|
|
/* 标签管理页面中使用默认指针 */
|
|
user-select: none;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion:hover {
|
|
border-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion_header {
|
|
cursor: grab;
|
|
/* 只有标题部分可拖动 */
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion_header:active {
|
|
cursor: grabbing;
|
|
/* 拖动时显示抓取光标 */
|
|
}
|
|
|
|
/* 拖拽状态样式 */
|
|
.tags-manager-container .tag_accordion.dragging,
|
|
.tags-manager-container .tag_item.dragging {
|
|
opacity: 0.5;
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 新增拖拽动画样式 */
|
|
.tags-manager-container .tag-dragging,
|
|
.tags-manager-container .category-dragging {
|
|
opacity: 0.6 !important;
|
|
/* 移除缩放效果 */
|
|
/* transform: scale(1.02); */
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
|
|
z-index: 100 !important;
|
|
}
|
|
|
|
/* 拖拽过程中的目标位置指示器 */
|
|
.tag-ghost,
|
|
.category-ghost {
|
|
opacity: 0.3;
|
|
background-color: color-mix(in srgb, var(--p-primary-500), transparent 85%) !important;
|
|
border: 1px dashed var(--p-primary-500) !important;
|
|
}
|
|
|
|
/* 被选中的元素样式 */
|
|
.tag-chosen,
|
|
.category-chosen {
|
|
background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
|
|
border-color: var(--p-primary-500) !important;
|
|
}
|
|
|
|
/* 拖拽时的样式 */
|
|
.tag-drag,
|
|
.category-drag {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 添加元素移动的过渡动画 */
|
|
.tags-manager-container .tag_accordion,
|
|
.tags-manager-container .tag_item {
|
|
/* 移除transform过渡效果 */
|
|
transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
/* 拖拽排序时的位置指示 */
|
|
.sortable-fallback {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.sortable-ghost {
|
|
position: relative;
|
|
}
|
|
|
|
.sortable-ghost::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
|
|
border: 1px dashed var(--p-primary-500);
|
|
z-index: -1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion.drag-over-top {
|
|
border-top: 2px solid var(--p-primary-500);
|
|
}
|
|
|
|
.tags-manager-container .tag_accordion.drag-over-bottom {
|
|
border-bottom: 2px solid var(--p-primary-500);
|
|
}
|
|
|
|
.tags-manager-container .tag_item.drag-over-left {
|
|
border-left: 2px solid var(--p-primary-500);
|
|
}
|
|
|
|
.tags-manager-container .tag_item.drag-over-right {
|
|
border-right: 2px solid var(--p-primary-500);
|
|
}
|
|
|
|
/* tooltip处理 */
|
|
.has-tooltip {
|
|
position: relative;
|
|
}
|
|
|
|
/* 标签容器布局 */
|
|
.tags-manager-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 弹窗表单内容样式 */
|
|
.dialog-form-content {
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.dialog-form-content .settings-form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dialog-form-content .settings-form-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 确保下拉框和输入框有合适的宽度和间距 */
|
|
.dialog-form-content .p-dropdown,
|
|
.dialog-form-content .p-inputtext {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 规则配置表单样式 */
|
|
.rules-config-form {
|
|
max-height: 70vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.settings-form-textarea {
|
|
width: 100%;
|
|
min-height: 150px;
|
|
height: calc(100% - 30px);
|
|
resize: vertical;
|
|
font-family: monospace;
|
|
padding: 8px;
|
|
background-color: var(--p-inputtext-background);
|
|
border: 1px solid var(--p-inputtext-border-color);
|
|
border-radius: 4px;
|
|
color: var(--p-inputtext-color);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* API配置表单样式 */
|
|
.api-config-form {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
/* 刷新按钮样式 */
|
|
.settings-refresh-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 14px;
|
|
color: var(--p-message-info-color);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.settings-refresh-button:hover {
|
|
background-color: color-mix(in srgb, var(--p-message-info-color), transparent 90%);
|
|
}
|
|
|
|
.refresh-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 表单分组的间距 */
|
|
.settings-form-section {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 表单输入组件的样式 */
|
|
.settings-form-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* 水平布局组的样式 */
|
|
.settings-form-group.horizontal {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.settings-form-group.horizontal>div {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
/* 添加标签管理部分的样式 */
|
|
.tag-management-section {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tags-config-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tags-config-form {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tags-manager-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tags-scroll-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 确保标签手风琴适配宽度 */
|
|
.tag_accordion {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 确保标签项目不会导致容器溢出 */
|
|
.tags_container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tag_item {
|
|
max-width: calc(100% - 16px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 修复弹窗样式，确保内容不会溢出 */
|
|
.settings-dialog {
|
|
max-width: 90vw;
|
|
width: 600px;
|
|
}
|
|
|
|
.settings-dialog-content {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-form-section {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 提示词列表样式 */
|
|
.prompt-list-container {
|
|
border: 1px solid var(--p-dialog-border-color);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background-color: var(--p-listbox-background);
|
|
height: 250px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 反推规则配置列表特定高度 */
|
|
.vision-prompt-list-container {
|
|
height: 150px;
|
|
}
|
|
|
|
.prompt-list-header {
|
|
display: flex;
|
|
background-color: var(--p-button-secondary-background);
|
|
border-bottom: 1px solid var(--p-dialog-border-color);
|
|
font-weight: 600;
|
|
color: var(--p-dialog-header-color);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.prompt-scroll-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.prompt-list-row {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--p-dialog-border-color);
|
|
transition: background-color 0.2s ease;
|
|
cursor: move;
|
|
}
|
|
|
|
.prompt-list-row:hover {
|
|
background-color: var(--p-select-option-focus-background);
|
|
}
|
|
|
|
.prompt-list-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.prompt-list-row.sortable-ghost {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.prompt-list-row.sortable-chosen {
|
|
background-color: var(--p-select-option-selected-background);
|
|
}
|
|
|
|
.prompt-list-cell {
|
|
padding: 8px 12px;
|
|
border-right: 1px solid var(--p-dialog-border-color);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.prompt-list-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.prompt-list-cell.status-cell {
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prompt-list-cell.name-cell {
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.prompt-list-cell.content-cell {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.prompt-list-cell.action-cell {
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
min-width: 80px;
|
|
}
|
|
|
|
/* 列宽调整手柄 */
|
|
.column-resizer {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -2px;
|
|
width: 4px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
z-index: 10;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.column-resizer:hover {
|
|
background: var(--p-primary-500);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.column-resizer.resizing {
|
|
background: var(--p-primary-500);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 确保列单元格有相对定位以支持绝对定位的调整手柄 */
|
|
.prompt-list-cell {
|
|
position: relative;
|
|
}
|
|
|
|
/* 拖拽时的全局样式 */
|
|
body.column-resizing {
|
|
cursor: col-resize !important;
|
|
user-select: none !important;
|
|
}
|
|
|
|
body.column-resizing * {
|
|
cursor: col-resize !important;
|
|
user-select: none !important;
|
|
}
|
|
|
|
/* 拖拽排序样式 */
|
|
.sortable-drag {
|
|
opacity: 0.8;
|
|
transform: rotate(2deg);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.prompt-list-row.sortable-ghost {
|
|
opacity: 0.4;
|
|
background: var(--p-primary-100);
|
|
}
|
|
|
|
.prompt-list-row.sortable-chosen {
|
|
background: var(--p-select-option-selected-background);
|
|
border: 1px solid var(--p-primary-500);
|
|
}
|
|
|
|
/* 状态图标样式优化 */
|
|
.status-cell .active-status {
|
|
color: var(--p-green-500);
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.status-cell .inactive-status {
|
|
color: var(--p-surface-400);
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.status-cell:hover .active-status {
|
|
color: var(--p-green-600);
|
|
}
|
|
|
|
.status-cell:hover .inactive-status {
|
|
color: var(--p-primary-500);
|
|
}
|
|
|
|
/* 状态图标样式 */
|
|
.active-status {
|
|
color: var(--p-message-success-color);
|
|
}
|
|
|
|
.inactive-status {
|
|
color: var(--p-message-warn-color);
|
|
}
|
|
|
|
/* 操作按钮样式 */
|
|
.prompt-action-btn {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 4px 6px;
|
|
margin: 0 2px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
color: var(--p-button-text-secondary-color);
|
|
}
|
|
|
|
.prompt-action-btn:hover {
|
|
background-color: var(--p-button-secondary-background);
|
|
}
|
|
|
|
.prompt-action-btn.toggle-btn:hover {
|
|
color: var(--p-message-info-color);
|
|
}
|
|
|
|
.prompt-action-btn.edit-btn:hover {
|
|
color: var(--p-message-warn-color);
|
|
}
|
|
|
|
.prompt-action-btn.delete-btn:hover {
|
|
color: var(--p-message-error-color);
|
|
}
|
|
|
|
/* 规则配置对话框样式 */
|
|
.rules-config-form {
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.settings-modal.prompt-edit-dialog {
|
|
width: 600px !important;
|
|
height: 600px !important;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rules-config-content {
|
|
padding: 20px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rules-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.rules-section h3 {
|
|
margin: 0 0 15px 0;
|
|
color: var(--p-dialog-header-color);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 标签页样式 */
|
|
.settings-modal .popup_tabs_container {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.settings-modal .popup_tabs_scroll {
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.settings-modal .popup_tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--p-dialog-border-color);
|
|
min-width: max-content;
|
|
}
|
|
|
|
.settings-modal .popup_tab {
|
|
padding: 8px 16px;
|
|
background: var(--p-button-secondary-background);
|
|
border: 1px solid var(--p-dialog-border-color);
|
|
border-bottom: none;
|
|
cursor: pointer;
|
|
margin-right: 2px;
|
|
border-radius: 4px 4px 0 0;
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
color: var(--p-button-text-secondary-color);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.settings-modal .popup_tab.active {
|
|
background: var(--p-dialog-background);
|
|
border-bottom: 1px solid var(--p-dialog-background);
|
|
margin-bottom: -1px;
|
|
font-weight: 500;
|
|
color: var(--p-dialog-header-color);
|
|
}
|
|
|
|
.settings-modal .popup_tab:hover {
|
|
background: var(--p-select-option-focus-background);
|
|
}
|
|
|
|
.settings-modal .popup_tab.active:hover {
|
|
background: var(--p-dialog-background);
|
|
}
|
|
|
|
.settings-modal .popup_tab_content {
|
|
display: none;
|
|
}
|
|
|
|
.settings-modal .popup_tab_content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 对话框按钮样式 */
|
|
.dialog-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--p-dialog-border-color);
|
|
}
|
|
|
|
.dialog-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.dialog-btn.primary {
|
|
background: var(--p-button-primary-background);
|
|
color: var(--p-button-primary-color);
|
|
}
|
|
|
|
.dialog-btn.primary:hover {
|
|
background: var(--p-button-primary-hover-background);
|
|
}
|
|
|
|
.dialog-btn.secondary {
|
|
background: var(--p-button-secondary-background);
|
|
color: var(--p-button-secondary-color);
|
|
}
|
|
|
|
.dialog-btn.secondary:hover {
|
|
background: var(--p-button-secondary-hover-background);
|
|
}
|
|
|
|
|
|
|
|
/* 微信徽标悬浮二维码 */
|
|
.pa-wechat-badge {
|
|
position: relative;
|
|
/* 作为二维码定位参照 */
|
|
/* 让绝对定位参照到内容容器 */
|
|
}
|
|
|
|
.pa-wechat-qr {
|
|
position: absolute;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
top: calc(100% + 6px);
|
|
right: 10px;
|
|
/* 向左偏移，避免被滚动条遮挡 */
|
|
transform: none;
|
|
background: var(--p-dialog-background);
|
|
border: 1px solid var(--p-dialog-border-color);
|
|
border-radius: 10px;
|
|
padding: 6px;
|
|
box-shadow: var(--p-dialog-shadow);
|
|
z-index: calc(var(--settings-modal-z-index) + 5);
|
|
/* 淡入淡出动画 */
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
}
|
|
|
|
.pa-wechat-badge:hover .pa-wechat-qr {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.pa-wechat-qr-img {
|
|
display: block;
|
|
width: 256px;
|
|
height: auto;
|
|
} |