@hailin-zheng/editor-core 2.2.3 → 2.2.5

package/editor.css

@@ -1,610 +1,694 @@
-.svg-container {
-    background: #f2f4f7;
-    overflow: hidden;
-    flex: 1;
-    height: 100%;
-    position: relative;
-}
-
-.svg-container * {
-    white-space: pre;
-}
-
-.drop-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-.data-list > div {
-    padding: 10px 6px;
-    display: flex;
-    align-items: center;
-    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;
-    }
-}
-
-.magic-radio,
-.magic-checkbox {
-    position: absolute;
-    display: none;
-}
-
-.magic-radio[disabled],
-.magic-checkbox[disabled] {
-    cursor: not-allowed;
-}
-
-.magic-radio + label,
-.magic-checkbox + label {
-    position: relative;
-    display: block;
-    padding-left: 30px;
-    cursor: pointer;
-    vertical-align: middle;
-}
-
-.magic-radio + label:hover:before,
-.magic-checkbox + label:hover:before {
-    animation-duration: 0.4s;
-    animation-fill-mode: both;
-    animation-name: hover-color;
-}
-
-.magic-radio + label:before,
-.magic-checkbox + label:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    content: "";
-    border: 1px solid #c0c0c0;
-}
-
-.magic-radio + label:after,
-.magic-checkbox + label:after {
-    position: absolute;
-    display: none;
-    content: "";
-}
-
-.magic-radio[disabled] + label,
-.magic-checkbox[disabled] + label {
-    cursor: not-allowed;
-    color: #e4e4e4;
-}
-
-.magic-radio[disabled] + label:hover,
-.magic-radio[disabled] + label:before,
-.magic-radio[disabled] + label:after,
-.magic-checkbox[disabled] + label:hover,
-.magic-checkbox[disabled] + label:before,
-.magic-checkbox[disabled] + label:after {
-    cursor: not-allowed;
-}
-
-.magic-radio[disabled] + label:hover:before,
-.magic-checkbox[disabled] + label:hover:before {
-    border: 1px solid #e4e4e4;
-    animation-name: none;
-}
-
-.magic-radio[disabled] + label:before,
-.magic-checkbox[disabled] + label:before {
-    border-color: #e4e4e4;
-}
-
-.magic-radio:checked + label:before,
-.magic-checkbox:checked + label:before {
-    animation-name: none;
-}
-
-.magic-radio:checked + label:after,
-.magic-checkbox:checked + label:after {
-    display: block;
-}
-
-.magic-radio + label:before {
-    border-radius: 50%;
-}
-
-.magic-radio + label:after {
-    top: 7px;
-    left: 7px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #3e97eb;
-}
-
-.magic-radio:checked + label:before {
-    border: 1px solid #3e97eb;
-}
-
-.magic-radio:checked[disabled] + label:before {
-    border: 1px solid #c9e2f9;
-}
-
-.magic-radio:checked[disabled] + label:after {
-    background: #c9e2f9;
-}
-
-.magic-checkbox + label:before {
-    border-radius: 3px;
-}
-
-.magic-checkbox + label:after {
-    top: 2px;
-    left: 7px;
-    box-sizing: border-box;
-    width: 6px;
-    height: 12px;
-    transform: rotate(45deg);
-    border-width: 2px;
-    border-style: solid;
-    border-color: #fff;
-    border-top: 0;
-    border-left: 0;
-}
-
-.magic-checkbox:checked + label:before {
-    border: #3e97eb;
-    background: #3e97eb;
-}
-
-.magic-checkbox:checked[disabled] + label:before {
-    border: #c9e2f9;
-    background: #c9e2f9;
-}
-/* 样式化 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;
-    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-body-day-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;
-    align-items: center;
-    word-break: keep-all;
-    border-bottom: 1px solid #ccc; /* 在每个列表项的底部添加一条边框线 */
-}
-
-.editor-overlays-menus > li:hover {
-    background-color: #ccc;
-}
-
-.editor-overlays-menus > li:last-child {
-    border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
-}
-
-/*.scale-container > *{*/
-/*    transform-origin: center top;*/
-/*}*/
-.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;
-}
-.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
-}
+.svg-container {
+    background: #f2f4f7;
+    overflow: hidden;
+    flex: 1;
+    height: 100%;
+    position: relative;
+}
+
+.svg-container * {
+    white-space: pre;
+}
+
+.drop-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.data-list > div {
+    padding: 10px 6px;
+    display: flex;
+    align-items: center;
+    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;
+    }
+}
+
+.magic-radio,
+.magic-checkbox {
+    position: absolute;
+    display: none;
+}
+
+.magic-radio[disabled],
+.magic-checkbox[disabled] {
+    cursor: not-allowed;
+}
+
+.magic-radio + label,
+.magic-checkbox + label {
+    position: relative;
+    display: block;
+    padding-left: 30px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.magic-radio + label:hover:before,
+.magic-checkbox + label:hover:before {
+    animation-duration: 0.4s;
+    animation-fill-mode: both;
+    animation-name: hover-color;
+}
+
+.magic-radio + label:before,
+.magic-checkbox + label:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    content: "";
+    border: 1px solid #c0c0c0;
+}
+
+.magic-radio + label:after,
+.magic-checkbox + label:after {
+    position: absolute;
+    display: none;
+    content: "";
+}
+
+.magic-radio[disabled] + label,
+.magic-checkbox[disabled] + label {
+    cursor: not-allowed;
+    color: #e4e4e4;
+}
+
+.magic-radio[disabled] + label:hover,
+.magic-radio[disabled] + label:before,
+.magic-radio[disabled] + label:after,
+.magic-checkbox[disabled] + label:hover,
+.magic-checkbox[disabled] + label:before,
+.magic-checkbox[disabled] + label:after {
+    cursor: not-allowed;
+}
+
+.magic-radio[disabled] + label:hover:before,
+.magic-checkbox[disabled] + label:hover:before {
+    border: 1px solid #e4e4e4;
+    animation-name: none;
+}
+
+.magic-radio[disabled] + label:before,
+.magic-checkbox[disabled] + label:before {
+    border-color: #e4e4e4;
+}
+
+.magic-radio:checked + label:before,
+.magic-checkbox:checked + label:before {
+    animation-name: none;
+}
+
+.magic-radio:checked + label:after,
+.magic-checkbox:checked + label:after {
+    display: block;
+}
+
+.magic-radio + label:before {
+    border-radius: 50%;
+}
+
+.magic-radio + label:after {
+    top: 7px;
+    left: 7px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #3e97eb;
+}
+
+.magic-radio:checked + label:before {
+    border: 1px solid #3e97eb;
+}
+
+.magic-radio:checked[disabled] + label:before {
+    border: 1px solid #c9e2f9;
+}
+
+.magic-radio:checked[disabled] + label:after {
+    background: #c9e2f9;
+}
+
+.magic-checkbox + label:before {
+    border-radius: 3px;
+}
+
+.magic-checkbox + label:after {
+    top: 2px;
+    left: 7px;
+    box-sizing: border-box;
+    width: 6px;
+    height: 12px;
+    transform: rotate(45deg);
+    border-width: 2px;
+    border-style: solid;
+    border-color: #fff;
+    border-top: 0;
+    border-left: 0;
+}
+
+.magic-checkbox:checked + label:before {
+    border: #3e97eb;
+    background: #3e97eb;
+}
+
+.magic-checkbox:checked[disabled] + label:before {
+    border: #c9e2f9;
+    background: #c9e2f9;
+}
+
+/* 样式化 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;
+    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-body-day-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% + 5px);
+    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;*/
+/*}*/
+.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;
+}
+
+.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; /* 去掉最后一个列表项的底部边框线 */
+}