@hailin-zheng/editor-core 2.2.29 → 2.2.31

package/editor.css

@@ -1,639 +1,639 @@
-.svg-container {
-	background: #C0C6CF;
-	overflow: hidden;
-	flex: 1;
-	height: 100%;
-	position: relative;
-}
-
-.svg-container * {
-	white-space: pre;
-}
-.svg-container svg{
-	pointer-events: none;
-}
-
-.absolute-container {
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-
-.data-list > div {
-	padding: 6px 4px;
-	display: flex;
-	align-items: center;
-	font-size: 14px;
-	gap: 10px;
-	border-bottom: 1px solid #ccc;
-	cursor: default;
-}
-
-.data-list > div:hover {
-	background-color: #ccc;
-}
-
-.data-list > div:last-child {
-	border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
-}
-
-@keyframes hover-color {
-	from {
-		border-color: #c0c0c0;
-	}
-	to {
-		border-color: #3e97eb;
-	}
-}
-
-
-/* 样式化 radio box 的外观 */
-.editor-list-radiobox {
-	width: 16px;
-	height: 16px;
-	border: 1px solid #000;
-	border-radius: 50%;
-	cursor: pointer;
-	display: inline-block;
-	position: relative;
-}
-
-/* 选中状态的样式 */
-.editor-list-radiobox.checked::after {
-	content: "";
-	width: 8px;
-	height: 8px;
-	background-color: #007bff;
-	border-radius: 50%;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-/* 样式化 checkbox 的外观 */
-.editor-list-checkbox {
-	width: 16px;
-	height: 16px;
-	border: 1px solid #000;
-	cursor: pointer;
-}
-
-/* 选中状态的样式 */
-.editor-list-checkbox.checked::after {
-	content: "✔";
-	font-size: 14px;
-	color: #007bff;
-	display: block;
-	text-align: center;
-	line-height: 16px;
-}
-
-.decorate-container {
-	position: absolute;
-	cursor: default;
-	z-index: 1;
-}
-
-.tg-container {
-	font-size: 12px;
-	border: 1px solid #ccc;
-	padding: 10px;
-	position: absolute;
-	width: 200px;
-	background: #fff;
-	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
-}
-
-.tg-container--selected {
-	box-shadow: 0 2px 16px 0 rgb(0 0 0 / 20%);
-}
-
-.tg-container > .header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.tg-container > .content {
-	margin-top: 10px;
-	white-space: normal;
-	word-break: break-all;
-}
-
-.tg-container > .header > .header-user {
-	color: #3e97eb;
-}
-
-.tg-container > .header > .header-date {
-	color: #c0c0c0;
-	padding-right: 10px;
-}
-
-.tg-container > .bg {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 4px;
-	height: 100%;
-}
-
-.editor-calendar {
-	width: 212px;
-	height: 272px;
-	border: 1px solid #ccc;
-	background: #fff;
-	cursor: default;
-	user-select: none;
-	font-size: 12px;
-}
-
-.editor-calendar-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	line-height: 30px;
-}
-
-.editor-calendar-header-left {
-	display: flex;
-	align-items: center;
-}
-
-.editor-calendar-header-left-year {
-	padding: 0 5px;
-}
-
-.editor-calendar-header-left-year:hover {
-	background: #ccc;
-}
-
-.editor-calendar-item:hover {
-	background: #ccc;
-}
-
-.editor-calendar-header-left-month {
-	padding: 0 5px;
-}
-
-.editor-calendar-header-left-month:hover {
-	background: #ccc;
-}
-
-.editor-calendar-header-right {
-	display: flex;
-	align-items: center;
-}
-
-.editor-calendar-header-right-prev {
-	padding: 0 5px;
-}
-
-.editor-calendar-header-right-prev:hover {
-	background-color: #ccc;
-}
-
-.editor-calendar-header-right-next {
-	padding: 0 5px;
-}
-
-.editor-calendar-header-right-next:hover {
-	background-color: #ccc;
-}
-
-.editor-calendar-body {
-	display: flex;
-	flex-direction: column;
-}
-
-.editor-calendar-body-week {
-	display: flex;
-}
-
-.editor-calendar-body-week-item {
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	text-align: center;
-}
-
-.editor-calendar-body-day {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.editor-calendar-body-day-item {
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	text-align: center;
-	opacity: 0.6;
-}
-
-.editor-calendar-body-day-item--current-month {
-	opacity: 1;
-}
-
-.editor-calendar-body-day-item--today {
-	background: #2b88d8;
-	color: #fff;
-}
-
-.editor-calendar-item--selected {
-	outline: #2b88d8 1px solid;
-	font-weight: bold;
-}
-
-.editor-calendar-body-day-item:hover {
-	background-color: #ccc;
-}
-
-.editor-calendar-footer {
-	display: flex;
-	justify-content: space-between;
-}
-
-.editor-calendar-footer-right {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	height: 30px;
-	font-size: 12px;
-}
-
-.editor-calendar-footer-right-btn {
-	padding: 2px 3px;
-	cursor: default;
-	user-select: none;
-}
-
-.editor-calendar-footer-right-btn:hover {
-	outline: 1px solid rgb(118, 142, 222);
-}
-
-.editor-calendar-footer-right-btn:active {
-	outline: 1px solid rgb(95, 19, 216);
-}
-
-.invert {
-	filter: invert(100%);
-}
-
-.editor-calendar-month {
-	width: 210px;
-	height: 180px;
-	border: 1px solid #ccc;
-	background: #fff;
-	cursor: default;
-}
-
-.editor-calendar-month-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 30px;
-}
-
-.editor-calendar-month-header-left {
-	display: flex;
-	align-items: center;
-}
-
-.editor-calendar-month-header-left-year {
-	padding-left: 10px;
-}
-
-.editor-calendar-month-header-right {
-	display: flex;
-	align-items: center;
-}
-
-.editor-calendar-month-header-right-prev {
-	padding: 0 5px;
-}
-
-.editor-calendar-month-header-right-next {
-	padding: 0 5px;
-}
-
-.editor-calendar-month-body {
-	display: flex;
-	flex-direction: column;
-}
-
-.editor-calendar-month-body-month {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.editor-calendar-month-body-month-item {
-	width: 52px;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
-}
-
-.editor-calendar-month-body-month-item--current {
-	outline: #2b88d8 1px solid;
-	font-weight: bold;
-}
-
-.editor-calendar-year {
-	width: 210px;
-	height: 210px;
-	border: 1px solid #ccc;
-	background: #fff;
-	cursor: default;
-}
-
-.editor-calendar-year-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 30px;
-}
-
-.editor-calendar-year-header-left {
-	display: flex;
-	align-items: center;
-}
-
-.editor-calendar-year-header-left-year {
-	padding: 0 5px;
-}
-
-.editor-calendar-year-header-right {
-	display: flex;
-	align-items: center;
-}
-
-.editor-calendar-year-header-right-prev {
-	padding: 0 5px;
-}
-
-.editor-calendar-year-header-right-next {
-	padding: 0 5px;
-}
-
-.editor-calendar-year-body {
-	display: flex;
-	flex-direction: column;
-}
-
-.editor-calendar-year-body-year {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.editor-calendar-year-body-year-item {
-	width: 52px;
-	height: 36px;
-	line-height: 36px;
-	text-align: center;
-}
-
-.editor-contextmenu {
-	z-index: 1000;
-	position: absolute;
-	background: white;
-	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
-}
-
-.editor-overlays-menus {
-	font-size: 14px;
-	font-family: "宋体", serif;
-	margin: 0;
-	cursor: pointer;
-	padding: 0;
-	list-style: none;
-	user-select: none;
-}
-
-.editor-overlays-menus {
-	padding: 3px;
-}
-
-.editor-overlays-menus > li {
-	padding: 8px 12px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	word-break: keep-all;
-	border-bottom: 1px solid #ccc; /* 在每个列表项的底部添加一条边框线 */
-	position: relative;
-}
-.editor-overlays-menus > li > ul {
-	display: none;
-	position: absolute;
-	left: calc(100%);
-	top: 0;
-	z-index: 1;
-	background: #fff;
-	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
-}
-.editor-overlays-menus .sub:after {
-	content: "▸";
-	margin-left: auto;
-}
-.editor-overlays-menus > li:hover > ul {
-	display: block;
-}
-
-.editor-overlays-menus > li:hover {
-	background-color: #ccc;
-}
-
-.editor-overlays-menus > li:last-child {
-	border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
-}
-
-/*.scale-container > *{*/
-/*    transform-origin: center top;*/
-/*}*/
-
-
-.editor-calendar-footer-left {
-	display: flex;
-}
-
-.editor-calendar-footer-left-time {
-	outline: none;
-	width: 110px;
-	text-align: center;
-	padding: 0;
-	margin: 0;
-	font-size: 14px;
-}
-
-.editor-input-cursor {
-	position: absolute;
-	width: 1.6px;
-	padding: 0;
-	border: none;
-	outline: none;
-	background: black;
-	pointer-events: none;
-	opacity: 0;
-	animation: editor-cursor-blink 1s infinite steps(1, start);
-}
-
-@keyframes editor-cursor-blink {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-.doc-triangle {
-	position: absolute;
-	width: 0;
-	height: 0;
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	border-bottom: 10px solid red; /* 修改颜色 */
-}
-
-.doc-triangle-line {
-	position: absolute;
-	height: 1px;
-	background: red;
-	transform-origin: top left;
-}
-
-.data-list-container {
-	min-width: 100px;
-	background-color: white;
-	z-index: 1000;
-	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
-	user-select: none;
-}
-.editor-suggestions-container {
-	z-index: 1000;
-	position: absolute;
-	background: white;
-	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
-	max-height: 300px;
-	overflow: auto;
-}
-
-.editor-suggestions {
-	font-size: 14px;
-	font-family: "宋体", serif;
-	margin: 0;
-	cursor: pointer;
-	padding: 0;
-	list-style: none;
-	user-select: none;
-}
-
-.editor-suggestions {
-	padding: 3px;
-}
-
-.editor-suggestions > li {
-	padding: 8px 12px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	word-break: keep-all;
-	border-bottom: 1px solid #ccc; /* 在每个列表项的底部添加一条边框线 */
-	position: relative;
-}
-
-.editor-suggestions > li:hover {
-	background-color: #eee;
-}
-.editor-suggestions > li.hovered {
-	background-color: #ccc;
-}
-.editor-suggestions > li:last-child {
-	border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
-}
-.doc-rule {
-	position: absolute;
-	font-size: 0;
-	background: white;
-	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
-	cursor: default;
-	left: 0;
-	top: 0;
-}
-.rule-thumb-container{
-	position: absolute;
-	cursor: pointer;
-}
-.rule-thumb-top{
-	top:0;
-}
-.rule-thumb-left{
-	top: calc(100% - 10px);
-}
-
-.rule-wrapper{
-	position: absolute;
-	transform-origin: 0px 0px;
-	top: 0;
-}
-
-.editor-search-box {
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: flex;
-	align-items: center;
-	background-color: #f3f3f3;
-	padding: 2px;
-	color: #333;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.editor-search-box .search-input {
-	flex-grow: 1;
-	padding: 2px;
-	margin-right: 4px;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	color: #333;
-	background-color: white;
-	font-size: 14px;
-}
-
-.editor-search-box .icon-button {
-	background-color: transparent;
-	border: none;
-	color: #666;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-}
-
-.editor-search-box .icon-button:hover {
-	background-color: #e0e0e0;
-	color: #333;
-}
-
-.editor-search-box .search-count {
-	margin: 0 8px;
-	color: #666;
-	font-size: 14px;
-}
-
-.editor-search-box .material-icons {
-	font-size: 16px;
-}
-
-.editor-search-box input:focus,
-button:focus {
-	outline: none;
-}
-
-.editor-search-box input::placeholder {
-	color: #aaa;
+.svg-container {
+	background: #C0C6CF;
+	overflow: hidden;
+	flex: 1;
+	height: 100%;
+	position: relative;
+}
+
+.svg-container * {
+	white-space: pre;
+}
+.svg-container svg{
+	pointer-events: none;
+}
+
+.absolute-container {
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.data-list > div {
+	padding: 6px 4px;
+	display: flex;
+	align-items: center;
+	font-size: 14px;
+	gap: 10px;
+	border-bottom: 1px solid #ccc;
+	cursor: default;
+}
+
+.data-list > div:hover {
+	background-color: #ccc;
+}
+
+.data-list > div:last-child {
+	border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
+}
+
+@keyframes hover-color {
+	from {
+		border-color: #c0c0c0;
+	}
+	to {
+		border-color: #3e97eb;
+	}
+}
+
+
+/* 样式化 radio box 的外观 */
+.editor-list-radiobox {
+	width: 16px;
+	height: 16px;
+	border: 1px solid #000;
+	border-radius: 50%;
+	cursor: pointer;
+	display: inline-block;
+	position: relative;
+}
+
+/* 选中状态的样式 */
+.editor-list-radiobox.checked::after {
+	content: "";
+	width: 8px;
+	height: 8px;
+	background-color: #007bff;
+	border-radius: 50%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+/* 样式化 checkbox 的外观 */
+.editor-list-checkbox {
+	width: 16px;
+	height: 16px;
+	border: 1px solid #000;
+	cursor: pointer;
+}
+
+/* 选中状态的样式 */
+.editor-list-checkbox.checked::after {
+	content: "✔";
+	font-size: 14px;
+	color: #007bff;
+	display: block;
+	text-align: center;
+	line-height: 16px;
+}
+
+.decorate-container {
+	position: absolute;
+	cursor: default;
+	z-index: 1;
+}
+
+.tg-container {
+	font-size: 12px;
+	border: 1px solid #ccc;
+	padding: 10px;
+	position: absolute;
+	width: 200px;
+	background: #fff;
+	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+}
+
+.tg-container--selected {
+	box-shadow: 0 2px 16px 0 rgb(0 0 0 / 20%);
+}
+
+.tg-container > .header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tg-container > .content {
+	margin-top: 10px;
+	white-space: normal;
+	word-break: break-all;
+}
+
+.tg-container > .header > .header-user {
+	color: #3e97eb;
+}
+
+.tg-container > .header > .header-date {
+	color: #c0c0c0;
+	padding-right: 10px;
+}
+
+.tg-container > .bg {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 4px;
+	height: 100%;
+}
+
+.editor-calendar {
+	width: 212px;
+	height: 272px;
+	border: 1px solid #ccc;
+	background: #fff;
+	cursor: default;
+	user-select: none;
+	font-size: 12px;
+}
+
+.editor-calendar-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	line-height: 30px;
+}
+
+.editor-calendar-header-left {
+	display: flex;
+	align-items: center;
+}
+
+.editor-calendar-header-left-year {
+	padding: 0 5px;
+}
+
+.editor-calendar-header-left-year:hover {
+	background: #ccc;
+}
+
+.editor-calendar-item:hover {
+	background: #ccc;
+}
+
+.editor-calendar-header-left-month {
+	padding: 0 5px;
+}
+
+.editor-calendar-header-left-month:hover {
+	background: #ccc;
+}
+
+.editor-calendar-header-right {
+	display: flex;
+	align-items: center;
+}
+
+.editor-calendar-header-right-prev {
+	padding: 0 5px;
+}
+
+.editor-calendar-header-right-prev:hover {
+	background-color: #ccc;
+}
+
+.editor-calendar-header-right-next {
+	padding: 0 5px;
+}
+
+.editor-calendar-header-right-next:hover {
+	background-color: #ccc;
+}
+
+.editor-calendar-body {
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-calendar-body-week {
+	display: flex;
+}
+
+.editor-calendar-body-week-item {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+}
+
+.editor-calendar-body-day {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.editor-calendar-body-day-item {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+	opacity: 0.6;
+}
+
+.editor-calendar-body-day-item--current-month {
+	opacity: 1;
+}
+
+.editor-calendar-body-day-item--today {
+	background: #2b88d8;
+	color: #fff;
+}
+
+.editor-calendar-item--selected {
+	outline: #2b88d8 1px solid;
+	font-weight: bold;
+}
+
+.editor-calendar-body-day-item:hover {
+	background-color: #ccc;
+}
+
+.editor-calendar-footer {
+	display: flex;
+	justify-content: space-between;
+}
+
+.editor-calendar-footer-right {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	height: 30px;
+	font-size: 12px;
+}
+
+.editor-calendar-footer-right-btn {
+	padding: 2px 3px;
+	cursor: default;
+	user-select: none;
+}
+
+.editor-calendar-footer-right-btn:hover {
+	outline: 1px solid rgb(118, 142, 222);
+}
+
+.editor-calendar-footer-right-btn:active {
+	outline: 1px solid rgb(95, 19, 216);
+}
+
+.invert {
+	filter: invert(100%);
+}
+
+.editor-calendar-month {
+	width: 210px;
+	height: 180px;
+	border: 1px solid #ccc;
+	background: #fff;
+	cursor: default;
+}
+
+.editor-calendar-month-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 30px;
+}
+
+.editor-calendar-month-header-left {
+	display: flex;
+	align-items: center;
+}
+
+.editor-calendar-month-header-left-year {
+	padding-left: 10px;
+}
+
+.editor-calendar-month-header-right {
+	display: flex;
+	align-items: center;
+}
+
+.editor-calendar-month-header-right-prev {
+	padding: 0 5px;
+}
+
+.editor-calendar-month-header-right-next {
+	padding: 0 5px;
+}
+
+.editor-calendar-month-body {
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-calendar-month-body-month {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.editor-calendar-month-body-month-item {
+	width: 52px;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+
+.editor-calendar-month-body-month-item--current {
+	outline: #2b88d8 1px solid;
+	font-weight: bold;
+}
+
+.editor-calendar-year {
+	width: 210px;
+	height: 210px;
+	border: 1px solid #ccc;
+	background: #fff;
+	cursor: default;
+}
+
+.editor-calendar-year-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 30px;
+}
+
+.editor-calendar-year-header-left {
+	display: flex;
+	align-items: center;
+}
+
+.editor-calendar-year-header-left-year {
+	padding: 0 5px;
+}
+
+.editor-calendar-year-header-right {
+	display: flex;
+	align-items: center;
+}
+
+.editor-calendar-year-header-right-prev {
+	padding: 0 5px;
+}
+
+.editor-calendar-year-header-right-next {
+	padding: 0 5px;
+}
+
+.editor-calendar-year-body {
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-calendar-year-body-year {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.editor-calendar-year-body-year-item {
+	width: 52px;
+	height: 36px;
+	line-height: 36px;
+	text-align: center;
+}
+
+.editor-contextmenu {
+	z-index: 1000;
+	position: absolute;
+	background: white;
+	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+}
+
+.editor-overlays-menus {
+	font-size: 14px;
+	font-family: "宋体", serif;
+	margin: 0;
+	cursor: pointer;
+	padding: 0;
+	list-style: none;
+	user-select: none;
+}
+
+.editor-overlays-menus {
+	padding: 3px;
+}
+
+.editor-overlays-menus > li {
+	padding: 8px 12px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	word-break: keep-all;
+	border-bottom: 1px solid #ccc; /* 在每个列表项的底部添加一条边框线 */
+	position: relative;
+}
+.editor-overlays-menus > li > ul {
+	display: none;
+	position: absolute;
+	left: calc(100%);
+	top: 0;
+	z-index: 1;
+	background: #fff;
+	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+}
+.editor-overlays-menus .sub:after {
+	content: "▸";
+	margin-left: auto;
+}
+.editor-overlays-menus > li:hover > ul {
+	display: block;
+}
+
+.editor-overlays-menus > li:hover {
+	background-color: #ccc;
+}
+
+.editor-overlays-menus > li:last-child {
+	border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
+}
+
+/*.scale-container > *{*/
+/*    transform-origin: center top;*/
+/*}*/
+
+
+.editor-calendar-footer-left {
+	display: flex;
+}
+
+.editor-calendar-footer-left-time {
+	outline: none;
+	width: 110px;
+	text-align: center;
+	padding: 0;
+	margin: 0;
+	font-size: 14px;
+}
+
+.editor-input-cursor {
+	position: absolute;
+	width: 1.6px;
+	padding: 0;
+	border: none;
+	outline: none;
+	background: black;
+	pointer-events: none;
+	opacity: 0;
+	animation: editor-cursor-blink 1s infinite steps(1, start);
+}
+
+@keyframes editor-cursor-blink {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.doc-triangle {
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 10px solid red; /* 修改颜色 */
+}
+
+.doc-triangle-line {
+	position: absolute;
+	height: 1px;
+	background: red;
+	transform-origin: top left;
+}
+
+.data-list-container {
+	min-width: 100px;
+	background-color: white;
+	z-index: 1000;
+	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+	user-select: none;
+}
+.editor-suggestions-container {
+	z-index: 1000;
+	position: absolute;
+	background: white;
+	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+	max-height: 300px;
+	overflow: auto;
+}
+
+.editor-suggestions {
+	font-size: 14px;
+	font-family: "宋体", serif;
+	margin: 0;
+	cursor: pointer;
+	padding: 0;
+	list-style: none;
+	user-select: none;
+}
+
+.editor-suggestions {
+	padding: 3px;
+}
+
+.editor-suggestions > li {
+	padding: 8px 12px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	word-break: keep-all;
+	border-bottom: 1px solid #ccc; /* 在每个列表项的底部添加一条边框线 */
+	position: relative;
+}
+
+.editor-suggestions > li:hover {
+	background-color: #eee;
+}
+.editor-suggestions > li.hovered {
+	background-color: #ccc;
+}
+.editor-suggestions > li:last-child {
+	border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
+}
+.doc-rule {
+	position: absolute;
+	font-size: 0;
+	background: white;
+	box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+	cursor: default;
+	left: 0;
+	top: 0;
+}
+.rule-thumb-container{
+	position: absolute;
+	cursor: pointer;
+}
+.rule-thumb-top{
+	top:0;
+}
+.rule-thumb-left{
+	top: calc(100% - 10px);
+}
+
+.rule-wrapper{
+	position: absolute;
+	transform-origin: 0px 0px;
+	top: 0;
+}
+
+.editor-search-box {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	background-color: #f3f3f3;
+	padding: 2px;
+	color: #333;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.editor-search-box .search-input {
+	flex-grow: 1;
+	padding: 2px;
+	margin-right: 4px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	color: #333;
+	background-color: white;
+	font-size: 14px;
+}
+
+.editor-search-box .icon-button {
+	background-color: transparent;
+	border: none;
+	color: #666;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+}
+
+.editor-search-box .icon-button:hover {
+	background-color: #e0e0e0;
+	color: #333;
+}
+
+.editor-search-box .search-count {
+	margin: 0 8px;
+	color: #666;
+	font-size: 14px;
+}
+
+.editor-search-box .material-icons {
+	font-size: 16px;
+}
+
+.editor-search-box input:focus,
+button:focus {
+	outline: none;
+}
+
+.editor-search-box input::placeholder {
+	color: #aaa;
 }