@windoc/react 0.1.0

package/src/styles/editor.css

@@ -0,0 +1,1786 @@
+::-webkit-scrollbar {
+    height: 16px;
+    width: 16px;
+    overflow: visible;
+}
+
+::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #ddd;
+    background-clip: padding-box;
+    border: 4px solid #f2f4f7;
+    border-radius: 8px;
+    min-height: 24px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #c9c9c9;
+}
+
+::-webkit-scrollbar-track {
+    background: #f2f4f7;
+    background-clip: padding-box;
+}
+
+.menu *,
+.editor *,
+.footer[editor-component="footer"] *,
+.catalog *,
+.comment * {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #f2f4f7;
+}
+
+ul {
+    list-style: none;
+}
+
+.menu {
+    width: 100%;
+    height: 60px;
+    top: 0;
+    z-index: 9;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f2f4f7;
+    box-shadow: 0 2px 4px 0 transparent;
+    font-family: var(--font-inter), Inter, sans-serif;
+}
+
+.menu-divider {
+    width: 1px;
+    height: 16px;
+    margin: 0 8px;
+    display: inline-block;
+    background-color: #cfd2d8;
+}
+
+.menu-item {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.menu-item > div {
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 2px;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    color: #475467;
+    transition: all 0.2s;
+}
+
+.menu-item > div:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item > div.active {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.menu-item > div.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.menu-item i {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.menu-item svg {
+    flex-shrink: 0;
+}
+
+.menu-item > div > span {
+    width: 14px;
+    height: 3px;
+    display: inline-block;
+    border-radius: 1px;
+}
+
+.menu-item .select {
+    border: none;
+    font-size: 12px;
+    line-height: 28px;
+    user-select: none;
+    font-family: var(--font-inter), Inter, sans-serif;
+}
+
+.menu-item .select::after {
+    position: absolute;
+    content: "";
+    top: 12px;
+    width: 0;
+    height: 0;
+    right: 6px;
+    border-color: #667085 transparent transparent;
+    border-style: solid solid none;
+    border-width: 3px 3px 0;
+}
+
+.menu-item .options {
+    width: 70px;
+    position: absolute;
+    left: 0;
+    top: 32px;
+    padding: 6px;
+    background: #fff;
+    font-size: 12px;
+    font-family: var(--font-inter), Inter, sans-serif;
+    box-shadow: 0 4px 12px 0 rgb(56 56 56 / 15%);
+    border: 1px solid #e2e6ed;
+    border-radius: 8px;
+    display: none;
+    z-index: 99;
+}
+
+.menu-item .options.visible {
+    display: block;
+}
+
+.menu-item .options li {
+    padding: 5px 8px;
+    margin: 2px 0;
+    user-select: none;
+    transition: all 0.2s;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.menu-item .options li:hover {
+    background-color: #f2f4f7;
+}
+
+.menu-item .options li.active {
+    background-color: #eff6ff;
+    color: #3b82f6;
+}
+
+.menu-item .menu-item__font {
+    width: auto;
+    min-width: 65px;
+    height: 28px;
+    position: relative;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    padding: 0 16px 0 8px;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.menu-item .menu-item__font:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item .menu-item__size {
+    width: auto;
+    min-width: 45px;
+    height: 28px;
+    text-align: center;
+    position: relative;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    padding: 0 16px 0 8px;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.menu-item .menu-item__size:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__font .select,
+.menu-item__size .select {
+    width: 100%;
+    height: 100%;
+}
+
+.menu-item .menu-item__font .options {
+    width: 150px;
+}
+
+.menu-item .menu-item__size .options {
+    width: 60px;
+}
+
+.menu-item__undo.no-allow,
+.menu-item__redo.no-allow,
+.menu-item > div.disable {
+    color: #c0c4cc;
+    cursor: not-allowed;
+    opacity: 0.4;
+    pointer-events: none;
+    border-color: #e2e6ed;
+}
+
+.menu-item__undo i {
+    background-image: url("./images/undo.svg");
+}
+
+.menu-item__redo i {
+    background-image: url("./images/redo.svg");
+}
+
+.menu-item__painter i {
+    background-image: url("./images/painter.svg");
+}
+
+.menu-item__format i {
+    background-image: url("./images/format.svg");
+}
+
+.menu-item__size-add i {
+    background-image: url("./images/size-add.svg");
+}
+
+.menu-item__size-minus i {
+    background-image: url("./images/size-minus.svg");
+}
+
+.menu-item__bold i {
+    background-image: url("./images/bold.svg");
+}
+
+.menu-item__italic i {
+    background-image: url("./images/italic.svg");
+}
+
+.menu-item .menu-item__underline {
+    width: auto;
+    min-width: 38px;
+    height: 28px;
+    position: relative;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    padding: 0 4px;
+    margin: 0 2px;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s;
+}
+
+.menu-item .menu-item__underline svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+
+.menu-item .menu-item__underline:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__underline > i {
+    flex-shrink: 0;
+    background-image: url("./images/underline.svg");
+}
+
+.menu-item__underline .select {
+    width: 100%;
+    height: 100%;
+}
+
+.menu-item .menu-item__underline .options {
+    width: 128px;
+}
+
+.menu-item .menu-item__underline li {
+    padding: 1px 5px;
+}
+
+.menu-item__underline li i {
+    pointer-events: none;
+}
+
+.menu-item__underline li[data-decoration-style="solid"] {
+    background-image: url("./images/line-single.svg");
+}
+
+.menu-item__underline li[data-decoration-style="double"] {
+    background-image: url("./images/line-double.svg");
+}
+
+.menu-item__underline li[data-decoration-style="dashed"] {
+    background-image: url("./images/line-dash-small-gap.svg");
+}
+
+.menu-item__underline li[data-decoration-style="dotted"] {
+    background-image: url("./images/line-dot.svg");
+}
+
+.menu-item__underline li[data-decoration-style="wavy"] {
+    background-image: url("./images/line-wavy.svg");
+}
+
+.menu-item__strikeout i {
+    background-image: url("./images/strikeout.svg");
+}
+
+.menu-item__superscript i {
+    background-image: url("./images/superscript.svg");
+}
+
+.menu-item__subscript i {
+    background-image: url("./images/subscript.svg");
+}
+
+.menu-item__color,
+.menu-item__highlight {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    color: #475467;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+}
+
+.menu-item__color:hover,
+.menu-item__highlight:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__color #color,
+.menu-item__highlight #highlight {
+    width: 1px;
+    height: 1px;
+    visibility: hidden;
+    outline: none;
+    appearance: none;
+}
+
+.menu-item__color i {
+    background-image: url("./images/color.svg");
+}
+
+.menu-item__color span {
+    background-color: #000000;
+}
+
+.menu-item__highlight i {
+    background-image: url("./images/highlight.svg");
+}
+
+.menu-item__highlight span {
+    background-color: #ffff00;
+}
+
+.menu-item .menu-item__title {
+    width: auto;
+    min-width: 60px;
+    height: 28px;
+    position: relative;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    padding: 0 16px 0 8px;
+    margin: 0 2px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s;
+}
+
+.menu-item .menu-item__title:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__title .select {
+    width: 100%;
+    height: 100%;
+}
+
+.menu-item__title .options {
+    width: 100px;
+}
+
+.menu-item__left i {
+    background-image: url("./images/left.svg");
+}
+
+.menu-item__center i {
+    background-image: url("./images/center.svg");
+}
+
+.menu-item__right i {
+    background-image: url("./images/right.svg");
+}
+
+.menu-item__alignment i {
+    background-image: url("./images/alignment.svg");
+}
+
+.menu-item__justify i {
+    background-image: url("./images/justify.svg");
+}
+
+.menu-item__row-margin {
+    position: relative;
+}
+
+.menu-item__row-margin i {
+    background-image: url("./images/row-margin.svg");
+}
+
+.menu-item__list {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    color: #475467;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.menu-item__list:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__list i {
+    background-image: url("./images/list.svg");
+}
+
+.menu-item__list .options {
+    width: 110px;
+}
+
+.menu-item__list .options > ul > li * {
+    pointer-events: none;
+}
+
+.menu-item__list .options > ul > li li {
+    margin-left: 18px;
+}
+
+.menu-item__list .options > ul > li[data-list-style="checkbox"] li::marker {
+    font-size: 11px;
+}
+
+.menu-item__image i {
+    background-image: url("./images/image.svg");
+}
+
+.menu-item__image input {
+    display: none;
+}
+
+.menu-item__table {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    color: #475467;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.menu-item__table:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__table i {
+    background-image: url("./images/table.svg");
+}
+
+.menu-item .menu-item__table__collapse {
+    width: 270px;
+    height: 310px;
+    background: #fff;
+    box-shadow: 0 4px 12px 0 rgb(56 56 56 / 15%);
+    border: 1px solid #e2e6ed;
+    box-sizing: border-box;
+    border-radius: 8px;
+    position: absolute;
+    display: none;
+    z-index: 99;
+    top: 32px;
+    left: 0;
+    padding: 14px 27px;
+    cursor: auto;
+}
+
+.menu-item .menu-item__table__collapse .table-close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+}
+
+.menu-item .menu-item__table__collapse .table-close:hover {
+    color: #7d7e80;
+}
+
+.menu-item .menu-item__table__collapse:hover {
+    background: #fff;
+}
+
+.menu-item .menu-item__table__collapse .table-title {
+    display: flex;
+    justify-content: flex-start;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #e2e6ed;
+}
+
+.table-title span {
+    font-size: 12px;
+    color: #3d4757;
+    display: inline;
+    margin: 0;
+}
+
+.table-panel {
+    cursor: pointer;
+}
+
+.table-panel .table-row {
+    display: flex;
+    flex-wrap: nowrap;
+    margin-top: 10px;
+    pointer-events: auto;
+}
+
+.table-panel .table-cel {
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border: 1px solid #e2e6ed;
+    background: #fff;
+    position: relative;
+    margin-right: 6px;
+    pointer-events: auto;
+}
+
+.table-panel .table-cel.active {
+    border: 1px solid rgba(73, 145, 242, 0.2);
+    background: rgba(73, 145, 242, 0.15);
+}
+
+.table-panel .table-row .table-cel:last-child {
+    margin-right: 0;
+}
+
+.menu-item__hyperlink i {
+    background-image: url("./images/hyperlink.svg");
+}
+
+.menu-item__separator {
+    position: relative;
+}
+
+.menu-item__separator > i {
+    background-image: url("./images/separator.svg");
+}
+
+.menu-item .menu-item__separator .options {
+    width: 128px;
+}
+
+.menu-item .menu-item__separator li {
+    padding: 1px 5px;
+}
+
+.menu-item__separator li i {
+    pointer-events: none;
+}
+
+.menu-item__separator li[data-separator="0,0"] {
+    background-image: url("./images/line-single.svg");
+}
+
+.menu-item__separator li[data-separator="1,1"] {
+    background-image: url("./images/line-dot.svg");
+}
+
+.menu-item__separator li[data-separator="3,1"] {
+    background-image: url("./images/line-dash-small-gap.svg");
+}
+
+.menu-item__separator li[data-separator="4,4"] {
+    background-image: url("./images/line-dash-large-gap.svg");
+}
+
+.menu-item__separator li[data-separator="7,3,3,3"] {
+    background-image: url("./images/line-dash-dot.svg");
+}
+
+.menu-item__separator li[data-separator="6,2,2,2,2,2"] {
+    background-image: url("./images/line-dash-dot-dot.svg");
+}
+
+.menu-item__insert-element > i {
+    background-image: url("./images/insert-element.svg");
+}
+
+.menu-item__insert-element {
+    position: relative;
+}
+
+.menu-item .menu-item__insert-element .options {
+    width: 160px;
+}
+
+.menu-item .options li.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.menu-item__codeblock i {
+    background-image: url("./images/codeblock.svg");
+}
+
+.menu-item__page-break {
+    position: relative;
+}
+
+.menu-item__page-break i {
+    background-image: url("./images/page-break.svg");
+}
+
+.menu-item .menu-item__page-break .options {
+    width: 120px;
+}
+
+.menu-item__control {
+    position: relative;
+}
+
+.menu-item__control i {
+    background-image: url("./images/control.svg");
+}
+
+.menu-item__checkbox i {
+    background-image: url("./images/checkbox.svg");
+}
+
+.menu-item__radio i {
+    background-image: url("./images/radio.svg");
+}
+
+.menu-item__latex i {
+    background-image: url("./images/latex.svg");
+}
+
+.menu-item__date {
+    position: relative;
+}
+
+.menu-item__date i {
+    background-image: url("./images/date.svg");
+}
+
+.menu-item__date .options {
+    width: 160px;
+}
+
+.menu-item__block i {
+    background-image: url("./images/block.svg");
+}
+
+.menu-item .menu-item__control .options {
+    width: 55px;
+}
+
+.menu-item__search {
+    position: relative;
+}
+
+.menu-item__search i {
+    background-image: url("./images/search.svg");
+}
+
+.menu-item .menu-item__search__collapse {
+    width: 260px;
+    height: 108px;
+    box-sizing: border-box;
+    position: absolute;
+    display: none;
+    z-index: 99;
+    top: 25px;
+    left: 0;
+    background: #ffffff;
+    box-shadow: 0px 5px 5px #e3dfdf;
+}
+
+.menu-item .menu-item__search__collapse:hover {
+    background: #ffffff;
+}
+
+.menu-item .menu-item__search__collapse > div {
+    width: 250px;
+    height: 36px;
+    padding: 0 5px;
+    line-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 4px;
+}
+
+.menu-item .menu-item__search__collapse > div input[type="text"] {
+    width: 205px;
+    height: 27px;
+    appearance: none;
+    background-color: #fff;
+    background-image: none;
+    border-radius: 4px;
+    border: 1px solid #ebebeb;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    line-height: 27px;
+    outline: none;
+    padding: 0 5px;
+}
+
+.menu-item .menu-item__search__collapse > div span {
+    height: 100%;
+    color: #dcdfe6;
+    font-size: 25px;
+    display: inline-block;
+    border: 0;
+    padding: 0 10px;
+}
+
+.menu-item .menu-item__search__collapse__replace button {
+    display: inline-block;
+    border: 1px solid #e2e6ed;
+    border-radius: 2px;
+    background: #fff;
+    line-height: 22px;
+    padding: 0 6px;
+    white-space: nowrap;
+    margin-left: 4px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.menu-item .menu-item__search__collapse__replace button:hover {
+    background: rgba(25, 55, 88, 0.04);
+}
+
+.menu-item .menu-item__search__collapse__search {
+    position: relative;
+}
+
+.menu-item .menu-item__search__collapse__search label {
+    right: 110px;
+    font-size: 12px;
+    color: #3d4757;
+    position: absolute;
+}
+
+.menu-item .menu-item__search__collapse__search > input {
+    padding: 5px 90px 5px 5px !important;
+}
+
+.menu-item .menu-item__search__collapse__search > div {
+    width: 28px;
+    height: 27px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    border-left: 1px solid #e2e6ed;
+    transition: all 0.5s;
+}
+
+.menu-item .menu-item__search__collapse__search > div:hover {
+    background-color: rgba(25, 55, 88, 0.04);
+}
+
+.menu-item .menu-item__search__collapse__search i {
+    width: 6px;
+    height: 8px;
+    transform: translateY(1px);
+}
+
+.menu-item .menu-item__search__collapse__search .arrow-left {
+    right: 76px;
+}
+
+.menu-item .menu-item__search__collapse__search .arrow-left i {
+    background: url(./images/arrow-left.svg) no-repeat;
+}
+
+.menu-item .menu-item__search__collapse__search .arrow-right {
+    right: 48px;
+}
+
+.menu-item .menu-item__search__collapse__search .arrow-right i {
+    background: url(./images/arrow-right.svg) no-repeat;
+}
+
+.menu-item__search__collapse__option {
+    justify-content: flex-start !important;
+}
+
+.menu-item .menu-item__search__collapse__option .search-option-item {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+}
+
+.menu-item .menu-item__search__collapse__option label {
+    font-size: 12px;
+    margin-left: 4px;
+    cursor: pointer;
+}
+
+.menu-item__print i {
+    background-image: url("./images/print.svg");
+}
+
+.menu-item .menu-item__column {
+    width: auto;
+    min-width: 65px;
+    height: 28px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    color: #475467;
+    padding: 0 16px 0 8px;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.menu-item .menu-item__column:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__column .select {
+    width: 100%;
+    height: 100%;
+}
+
+.menu-item .menu-item__column .options {
+    width: 130px;
+}
+
+.option-divider {
+    height: 1px;
+    background: #e5e7eb;
+    margin: 4px 0;
+}
+
+.option-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 6px;
+    font-size: 12px;
+}
+
+.option-row label {
+    color: #667085;
+    white-space: nowrap;
+}
+
+.option-row input[type="number"] {
+    width: 50px;
+    height: 22px;
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    padding: 0 4px;
+    font-size: 12px;
+    text-align: center;
+}
+
+.menu-item__line-height {
+    width: auto;
+    min-width: 40px;
+    height: 28px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    background: #fff;
+    color: #475467;
+    padding: 0 16px 0 8px;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.menu-item__line-height:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+}
+
+.menu-item__line-height .select {
+    width: 100%;
+    height: 100%;
+}
+
+.menu-item__line-height .options {
+    width: 60px;
+}
+
+.catalog {
+    width: 250px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    top: 100px;
+    padding: 0 20px 40px 20px;
+}
+
+.catalog .catalog__header {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e2e6ed;
+}
+
+.catalog .catalog__header span {
+    color: #3d4757;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.catalog .catalog__header i {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    display: inline-block;
+    background: url(./images/close.svg) no-repeat;
+    transition: all 0.2s;
+}
+
+.catalog .catalog__header > div:hover {
+    background: rgba(235, 238, 241);
+}
+
+.catalog__main {
+    height: calc(100% - 60px);
+    padding: 10px 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.catalog__main .catalog-item {
+    width: 100%;
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+
+.catalog__main > .catalog-item {
+    padding-left: 0;
+}
+
+.catalog__main .catalog-item .catalog-item__content {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.catalog__main .catalog-item .catalog-item__content:hover > span {
+    color: #4991f2;
+}
+
+.catalog__main .catalog-item .catalog-item__content span {
+    color: #3d4757;
+    line-height: 30px;
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+}
+
+.editor > div {
+    margin: 80px auto;
+}
+
+.ce-page-container canvas {
+    box-shadow: none;
+    border: 1px solid #c4c7c5;
+}
+
+.comment {
+    width: 250px;
+    height: 650px;
+    position: fixed;
+    transform: translateX(420px);
+    top: 200px;
+    left: 50%;
+    overflow-y: auto;
+}
+
+.comment-item {
+    background: #ffffff;
+    border: 1px solid #e2e6ed;
+    position: relative;
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 14px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    transition: all 0.5s;
+}
+
+.comment-item:hover {
+    border-color: #c0c6cf;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.comment-item.active {
+    border-color: #e99d00;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.comment-item__title {
+    height: 22px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    color: #c1c6ce;
+}
+
+.comment-item__title span:first-child {
+    background-color: #dbdbdb;
+    width: 4px;
+    height: 16px;
+    margin-right: 5px;
+    display: inline-block;
+    border-radius: 999px;
+}
+
+.comment-item__title span:nth-child(2) {
+    width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.comment-item__title i {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    background: url(./images/close.svg) no-repeat;
+}
+
+.comment-item__title i:hover {
+    opacity: 0.6;
+}
+
+.comment-item__info {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.comment-item__info > span:first-child {
+    font-weight: 600;
+}
+
+.comment-item__info > span:last-child {
+    color: #c1c6ce;
+}
+
+.comment-item__content {
+    line-height: 22px;
+}
+
+.footer {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f2f4f7;
+    z-index: 9;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 12px;
+    padding: 0 4px 0 20px;
+    box-sizing: border-box;
+}
+
+.footer > div:first-child {
+    display: flex;
+    align-items: center;
+}
+
+.footer .catalog-mode {
+    padding: 1px;
+    position: relative;
+}
+
+.footer .catalog-mode i {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    cursor: pointer;
+    display: inline-block;
+    background-image: url("./images/catalog.svg");
+}
+
+.footer .page-mode {
+    padding: 1px;
+    position: relative;
+}
+
+.footer .page-mode i {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    cursor: pointer;
+    display: inline-block;
+    background-image: url("./images/page-mode.svg");
+}
+
+.footer .options {
+    width: auto;
+    min-width: 70px;
+    white-space: nowrap;
+    position: absolute;
+    left: 0;
+    bottom: 25px;
+    padding: 6px;
+    background: #fff;
+    font-size: 12px;
+    font-family: var(--font-inter), Inter, sans-serif;
+    box-shadow: 0 4px 12px 0 rgb(56 56 56 / 15%);
+    border: 1px solid #e2e6ed;
+    border-radius: 8px;
+    display: none;
+    z-index: 99;
+}
+
+.footer .options.visible {
+    display: block;
+}
+
+.footer .options li {
+    padding: 5px 8px;
+    margin: 2px 0;
+    user-select: none;
+    transition: all 0.15s;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.footer .options li:hover {
+    background-color: #f2f4f7;
+}
+
+.footer .options li.active {
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.footer > div:first-child > span {
+    display: inline-block;
+    margin-right: 8px;
+}
+
+.footer .footer-divider {
+    width: 1px;
+    height: 12px;
+    background: #c0c4cc;
+}
+
+.footer > div:last-child {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.footer > div:last-child > div {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.footer > div:last-child > div:hover {
+    background: rgba(25, 55, 88, 0.04);
+}
+
+.footer > div:last-child i {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.footer .editor-option i {
+    background-image: url("./images/option.svg");
+}
+
+.footer .page-scale-minus i {
+    background-image: url("./images/page-scale-minus.svg");
+}
+
+.footer .page-scale-add i {
+    background-image: url("./images/page-scale-add.svg");
+}
+
+.footer .page-scale-percentage {
+    cursor: pointer;
+    user-select: none;
+}
+
+.footer .fullscreen i {
+    background-image: url("./images/request-fullscreen.svg");
+}
+
+.footer .fullscreen.exist i {
+    background-image: url("./images/exit-fullscreen.svg");
+}
+
+.footer .paper-margin i {
+    background-image: url("./images/paper-margin.svg");
+}
+
+.footer .editor-mode {
+    cursor: pointer;
+    user-select: none;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.footer .paper-size {
+    position: relative;
+}
+
+.footer .paper-size i {
+    background-image: url("./images/paper-size.svg");
+}
+
+.footer .paper-size .options {
+    right: 0;
+    left: unset;
+}
+
+.footer .paper-direction {
+    position: relative;
+}
+
+.footer .paper-direction i {
+    background-image: url("./images/paper-direction.svg");
+}
+
+.footer .paper-direction .options {
+    right: 0;
+    left: unset;
+}
+
+.ce-contextmenu-signature {
+    background-image: url("./images/signature.svg");
+}
+
+.ce-contextmenu-word-tool {
+    background-image: url("./images/word-tool.svg");
+}
+
+/* List Preset Picker */
+.list-preset-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+}
+
+.list-preset-cell {
+    border: 1px solid #e4e7ec;
+    border-radius: 4px;
+    padding: 6px 8px;
+    cursor: pointer;
+    background: #fff;
+    transition: all 0.15s;
+}
+
+.list-preset-cell:hover {
+    border-color: #3b82f6;
+    background: #eff6ff;
+}
+
+.list-preset-line {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 1.4;
+}
+
+.list-preset-marker {
+    font-size: 10px;
+    color: #344054;
+    min-width: 16px;
+    flex-shrink: 0;
+}
+
+.list-preset-text {
+    height: 2px;
+    background: #d0d5dd;
+    border-radius: 1px;
+    flex: 1;
+    min-width: 20px;
+}
+
+.list-quick-btn {
+    flex: 1;
+    padding: 4px 8px;
+    font-size: 11px;
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    background: #fff;
+    color: #475467;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    transition: all 0.15s;
+}
+
+.list-quick-btn:hover {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+/* Table Dropdown */
+.table-dropdown {
+    position: absolute;
+    top: 32px;
+    left: 0;
+    z-index: 99;
+    background: #fff;
+    border: 1px solid #e4e7ec;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 12px;
+    cursor: default;
+}
+
+.table-dropdown-header {
+    font-size: 12px;
+    color: #475467;
+    font-weight: 500;
+    margin-bottom: 8px;
+    text-align: center;
+}
+
+.table-dropdown-grid {
+    cursor: pointer;
+}
+
+.table-dropdown-row {
+    display: flex;
+    gap: 3px;
+    margin-bottom: 3px;
+}
+
+.table-dropdown-cell {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #e4e7ec;
+    border-radius: 2px;
+    background: #fff;
+    transition: all 0.1s;
+}
+
+.table-dropdown-cell:hover {
+    border-color: #93b4f6;
+}
+
+.table-dropdown-cell.active {
+    border-color: rgba(59, 130, 246, 0.3);
+    background: rgba(59, 130, 246, 0.1);
+}
+
+/* Color Palette Dropdown */
+.color-palette-dropdown {
+    position: absolute;
+    top: 32px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 99;
+    background: #fff;
+    border: 1px solid #e4e7ec;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    cursor: default;
+}
+
+.color-palette-reset {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    padding: 4px 2px;
+    margin-bottom: 6px;
+    font-size: 12px;
+    border: none;
+    background: none;
+    color: #667085;
+    cursor: pointer;
+    font-family: var(--font-inter), Inter, sans-serif;
+}
+
+.color-palette-reset:hover {
+    color: #344054;
+}
+
+.color-palette-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.color-palette-row {
+    display: flex;
+    gap: 3px;
+}
+
+.color-palette-swatch {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: transform 0.1s;
+    flex-shrink: 0;
+}
+
+.color-palette-swatch:hover {
+    transform: scale(1.2);
+    border-color: rgba(0, 0, 0, 0.3);
+}
+
+.color-palette-swatch.active {
+    border: 1px solid #3b82f6;
+    box-shadow: 0 0 0 1px #3b82f6;
+}
+
+/* ========== Watermark Footer Panel ========== */
+.footer .watermark-footer {
+    position: relative;
+}
+
+.footer .watermark-footer i {
+    background-image: url("./images/watermark.svg");
+}
+
+.watermark-footer-panel {
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+    width: 280px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px 0 rgb(56 56 56 / 15%);
+    border: 1px solid #e2e6ed;
+    z-index: 99;
+    font-family: var(--font-inter), Inter, sans-serif;
+    font-size: 12px;
+}
+
+.wm-panel-tabs {
+    display: flex;
+    border-bottom: 1px solid #e2e6ed;
+}
+
+.wm-panel-tab {
+    flex: 1;
+    padding: 8px 0;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    color: #667085;
+    transition: all 0.15s;
+}
+
+.wm-panel-tab:hover {
+    color: #344054;
+}
+
+.wm-panel-tab.active {
+    color: #3b82f6;
+    border-bottom-color: #3b82f6;
+}
+
+.wm-panel-body {
+    padding: 10px 12px;
+    max-height: 340px;
+    overflow-y: auto;
+}
+
+.wm-panel-field {
+    margin-bottom: 10px;
+}
+
+.wm-panel-field label {
+    display: block;
+    font-size: 11px;
+    font-weight: 500;
+    color: #344054;
+    margin-bottom: 4px;
+}
+
+.wm-panel-value {
+    font-weight: 400;
+    color: #667085;
+}
+
+.wm-panel-field input[type="text"],
+.wm-panel-field input[type="number"],
+.wm-panel-field select {
+    width: 100%;
+    height: 28px;
+    border-radius: 4px;
+    border: 1px solid #d0d5dd;
+    padding: 4px 8px;
+    font-size: 12px;
+    outline: none;
+    box-sizing: border-box;
+    transition: border 0.2s;
+    font-family: inherit;
+}
+
+.wm-panel-field input[type="text"]:focus,
+.wm-panel-field input[type="number"]:focus,
+.wm-panel-field select:focus {
+    border-color: #3b82f6;
+}
+
+.wm-panel-field-row {
+    display: flex;
+    gap: 8px;
+}
+
+.wm-panel-field-half {
+    flex: 1;
+}
+
+.wm-panel-colors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+}
+
+.wm-panel-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: transform 0.1s;
+}
+
+.wm-panel-color:hover {
+    transform: scale(1.2);
+}
+
+.wm-panel-color.active {
+    border: 1.5px solid #3b82f6;
+    box-shadow: 0 0 0 1px #3b82f6;
+}
+
+.wm-panel-slider {
+    width: 100%;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #e2e6ed;
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+}
+
+.wm-panel-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #3b82f6;
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.wm-panel-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #3b82f6;
+    cursor: pointer;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.wm-panel-toggle {
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid #d0d5dd;
+}
+
+.wm-panel-toggle button {
+    flex: 1;
+    padding: 5px 0;
+    background: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 11px;
+    color: #667085;
+    transition: all 0.15s;
+}
+
+.wm-panel-toggle button:first-child {
+    border-right: 1px solid #d0d5dd;
+}
+
+.wm-panel-toggle button.active {
+    background: #eff6ff;
+    color: #3b82f6;
+    font-weight: 500;
+}
+
+.wm-panel-toggle button:hover:not(.active) {
+    background: #f9fafb;
+}
+
+.wm-panel-upload {
+    padding: 5px 12px;
+    background: #fff;
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 11px;
+    color: #344054;
+    transition: background 0.15s;
+}
+
+.wm-panel-upload:hover {
+    background: #f2f4f7;
+}
+
+.wm-panel-preview {
+    padding: 6px;
+    border: 1px solid #e2e6ed;
+    border-radius: 4px;
+    background: #f9fafb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wm-panel-actions {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-top: 1px solid #e2e6ed;
+}
+
+.wm-panel-btn-delete {
+    padding: 5px 12px;
+    background: #fff;
+    border: 1px solid #d0d5dd;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #dc2626;
+    transition: all 0.15s;
+}
+
+.wm-panel-btn-delete:hover {
+    background: #fef2f2;
+    border-color: #fca5a5;
+}
+
+.wm-panel-btn-apply {
+    padding: 5px 16px;
+    background: #3b82f6;
+    border: 1px solid #3b82f6;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #fff;
+    font-weight: 500;
+    transition: background 0.15s;
+}
+
+.wm-panel-btn-apply:hover {
+    background: #2563eb;
+    border-color: #2563eb;
+}