297 lines
8.8 KiB
CSS
297 lines
8.8 KiB
CSS
/* 设定引用样式 - 实现多点下划线效果，无默认背景色 */
|
|
|
|
/* AI生成内容样式 - 蓝色文字标识 */
|
|
.ql-editor .ai-generated,
|
|
.ql-editor span[style*="ai-generated"],
|
|
.ql-editor span[data-ai-generated] {
|
|
color: #2196F3 !important; /* 蓝色文字 */
|
|
position: relative;
|
|
transition: color 0.2s ease;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* AI生成内容的底部标识线 */
|
|
.ql-editor .ai-generated::after,
|
|
.ql-editor span[style*="ai-generated"]::after,
|
|
.ql-editor span[data-ai-generated]::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -1px;
|
|
height: 1px;
|
|
background: linear-gradient(to right, #2196F3, #64B5F6);
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* AI生成内容悬停效果 */
|
|
.ql-editor .ai-generated:hover,
|
|
.ql-editor span[style*="ai-generated"]:hover,
|
|
.ql-editor span[data-ai-generated]:hover {
|
|
color: #1976D2 !important; /* 深蓝色 */
|
|
background-color: #E3F2FD !important; /* 浅蓝色背景 */
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ql-editor .ai-generated:hover::after,
|
|
.ql-editor span[style*="ai-generated"]:hover::after,
|
|
.ql-editor span[data-ai-generated]:hover::after {
|
|
opacity: 1;
|
|
background: linear-gradient(to right, #1976D2, #42A5F5);
|
|
}
|
|
|
|
/* 深色模式下的AI生成内容样式 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.ql-editor .ai-generated,
|
|
.ql-editor span[style*="ai-generated"],
|
|
.ql-editor span[data-ai-generated] {
|
|
color: #64B5F6 !important; /* 亮蓝色 */
|
|
}
|
|
|
|
.ql-editor .ai-generated::after,
|
|
.ql-editor span[style*="ai-generated"]::after,
|
|
.ql-editor span[data-ai-generated]::after {
|
|
background: linear-gradient(to right, #64B5F6, #90CAF9);
|
|
}
|
|
|
|
.ql-editor .ai-generated:hover,
|
|
.ql-editor span[style*="ai-generated"]:hover,
|
|
.ql-editor span[data-ai-generated]:hover {
|
|
color: #90CAF9 !important;
|
|
background-color: #0D47A1 !important; /* 深蓝色背景 */
|
|
}
|
|
|
|
.ql-editor .ai-generated:hover::after,
|
|
.ql-editor span[style*="ai-generated"]:hover::after,
|
|
.ql-editor span[data-ai-generated]:hover::after {
|
|
background: linear-gradient(to right, #90CAF9, #BBDEFB);
|
|
}
|
|
}
|
|
|
|
/* QuillEditor中的设定引用文本 - 使用类名匹配 */
|
|
.ql-editor .setting-reference {
|
|
position: relative;
|
|
text-decoration: none !important;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
/* 🎯 移除默认背景色，只在悬停时显示 */
|
|
}
|
|
|
|
/* 🎯 匹配Flutter Quill渲染的带自定义属性的元素 */
|
|
.ql-editor span[style*="setting-reference"],
|
|
.ql-editor span[style*="setting-style"],
|
|
.ql-editor span[data-setting-reference] {
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
/* 移除默认背景色 */
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 多点下划线效果 - 默认显示 - 匹配Flutter的自定义属性 */
|
|
.ql-editor .setting-reference::after,
|
|
.ql-editor span[style*="setting-reference"]::after,
|
|
.ql-editor span[style*="setting-style"]::after,
|
|
.ql-editor span[data-setting-reference]::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -2px;
|
|
height: 1px;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#666,
|
|
#666 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 悬停时的效果 - 背景色 + 更明显的下划线 */
|
|
.ql-editor .setting-reference:hover,
|
|
.ql-editor span[style*="setting-reference"]:hover,
|
|
.ql-editor span[style*="setting-style"]:hover,
|
|
.ql-editor span[data-setting-reference]:hover {
|
|
background-color: #FFF3CD !important;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ql-editor .setting-reference:hover::after,
|
|
.ql-editor span[style*="setting-reference"]:hover::after,
|
|
.ql-editor span[style*="setting-style"]:hover::after,
|
|
.ql-editor span[data-setting-reference]:hover::after {
|
|
opacity: 1;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#333,
|
|
#333 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
}
|
|
|
|
/* 🎯 兼容性：也匹配带下划线的设定引用文本 */
|
|
.ql-editor u[data-setting-reference],
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference],
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference] {
|
|
position: relative;
|
|
text-decoration: none !important;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
/* 🎯 移除默认背景色 */
|
|
}
|
|
|
|
.ql-editor u[data-setting-reference]::after,
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference]::after,
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference]::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -2px;
|
|
height: 1px;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#666,
|
|
#666 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ql-editor u[data-setting-reference]:hover,
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference]:hover,
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference]:hover {
|
|
background-color: #FFF3CD !important;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ql-editor u[data-setting-reference]:hover::after,
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference]:hover::after,
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference]:hover::after {
|
|
opacity: 1;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#333,
|
|
#333 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
}
|
|
|
|
/* 🚨 强制移除原有的始终显示背景色的样式 */
|
|
.ql-editor span[style*="background-color: rgb(255, 243, 205)"],
|
|
.ql-editor span[style*="background-color: #FFF3CD"],
|
|
.ql-editor span[style*="background-color: #fff3cd"],
|
|
.ql-editor span[style*="background"],
|
|
.ql-editor span[style*="background-color"] {
|
|
background-color: transparent !important;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
/* 这些元素的多点下划线效果 */
|
|
.ql-editor span[style*="background-color: rgb(255, 243, 205)"]::after,
|
|
.ql-editor span[style*="background-color: #FFF3CD"]::after,
|
|
.ql-editor span[style*="background-color: #fff3cd"]::after,
|
|
.ql-editor span[style*="background"]::after,
|
|
.ql-editor span[style*="background-color"]::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -2px;
|
|
height: 1px;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#666,
|
|
#666 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 悬停时恢复背景色 */
|
|
.ql-editor span[style*="background-color: rgb(255, 243, 205)"]:hover,
|
|
.ql-editor span[style*="background-color: #FFF3CD"]:hover,
|
|
.ql-editor span[style*="background-color: #fff3cd"]:hover,
|
|
.ql-editor span[style*="background"]:hover,
|
|
.ql-editor span[style*="background-color"]:hover {
|
|
background-color: #FFF3CD !important;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 悬停时的下划线效果 */
|
|
.ql-editor span[style*="background-color: rgb(255, 243, 205)"]:hover::after,
|
|
.ql-editor span[style*="background-color: #FFF3CD"]:hover::after,
|
|
.ql-editor span[style*="background-color: #fff3cd"]:hover::after,
|
|
.ql-editor span[style*="background"]:hover::after,
|
|
.ql-editor span[style*="background-color"]:hover::after {
|
|
opacity: 1;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#333,
|
|
#333 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
}
|
|
|
|
/* 深色模式支持 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.ql-editor .setting-reference::after,
|
|
.ql-editor u[data-setting-reference]::after,
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference]::after,
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference]::after {
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#999,
|
|
#999 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
}
|
|
|
|
.ql-editor .setting-reference:hover,
|
|
.ql-editor u[data-setting-reference]:hover,
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference]:hover,
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference]:hover {
|
|
background-color: #4A4A00 !important;
|
|
}
|
|
|
|
.ql-editor .setting-reference:hover::after,
|
|
.ql-editor u[data-setting-reference]:hover::after,
|
|
.ql-editor span[style*="text-decoration: underline"][data-setting-reference]:hover::after,
|
|
.ql-editor span[style*="text-decoration-line: underline"][data-setting-reference]:hover::after {
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
#CCC,
|
|
#CCC 3px,
|
|
transparent 3px,
|
|
transparent 7px
|
|
);
|
|
}
|
|
}
|
|
|
|
/* 🎯 确保设定引用元素的鼠标样式 */
|
|
.ql-editor .setting-reference,
|
|
.ql-editor [data-setting-reference] {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.ql-editor .setting-reference:hover,
|
|
.ql-editor [data-setting-reference]:hover {
|
|
cursor: pointer !important;
|
|
} |