@jx3box/jx3box-ui 0.0.1

package/assets/css/common/right-sidebar.less

@@ -0,0 +1,193 @@
+.c-sidebar-right {
+    // .pa;.lt(100%,0);
+    .pf;
+    .rt(0,@header-height + @bread-height);
+    .z(400);
+    bottom: 0;
+    .w(@aside-right);
+    background-color: #fff;
+    border-left: 1px solid #eee;
+    // height:100%;
+    box-sizing: border-box;
+
+    &.show-toggle {
+        background-color: @bg-light;
+    }
+}
+
+.c-sidebar-right-title {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 300;
+    margin: 0 0 10px 0;
+    padding: 0 0 5px 0;
+    border-bottom: 1px solid #ebeef5;
+
+    .u-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+    }
+}
+
+.c-sidebar-right-list {
+    .u-item {
+        .db;
+        height: 48px;
+        line-height: 48px;
+        background-color: #fff;
+        color: #303133;
+        cursor: pointer;
+        border-bottom: 1px solid #ebeef5;
+        font-size: 13px;
+        font-weight: 500;
+        transition: border-bottom-color 0.3s;
+        outline: none;
+        .pr;
+
+        &:hover {
+            color: @primary;
+        }
+
+        &:after {
+            content: "\e6e0";
+            .pa;
+            .rt(0,50%);
+            transform: translateY(-50%);
+            font-family: element-icons !important;
+            speak: none;
+            font-style: normal;
+            font-weight: 400;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1;
+            vertical-align: baseline;
+            display: inline-block;
+            -webkit-font-smoothing: antialiased;
+        }
+    }
+}
+
+// 笔记本<1440 缩小双边栏
+// @media screen and (max-width:@notebook){
+//     .c-sidebar-right{
+//         .w(@aside-right - 20px);
+//     }
+// }
+
+// // 平板横屏
+@media screen and (max-width: @smallpc) {
+    .c-sidebar-right {
+        .pr;
+        width: 100%;
+        top: 0;
+        &.show-toggle {
+            background-color: #fff;
+            .pf;
+            .rt(0,@header-height + @bread-height);
+            .z(400);
+            bottom: 0;
+            .w(@aside-right);
+        }
+    }
+}
+
+.c-sidebar-right-inner {
+    .size(100%);
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece {
+        background-color: #fafafa;
+        border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #eee;
+        border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+        display: none;
+    }
+}
+// 折叠相关逻辑
+.c-sidebar-right-toggle {
+    display: block;
+    .pa;
+    .lb(-21px, calc(50% - 20px));
+    width: 20px;
+    height: 40px;
+    line-height: 40px;
+    .pointer;
+    text-align: center;
+    background-color: @bg-light;
+    border-left: 1px solid #eee;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    border-radius: 0px 2px 2px 0px;
+    font-size: 16px;
+    color: #999;
+
+    &:hover {
+        color: #222;
+    }
+
+    &.close-sidebar-right {
+        left: 0;
+    }
+
+    svg {
+        fill: @color;
+    }
+}
+
+.closeLeftSidebar() {
+    transition: 0.2s ease-in-out;
+    transform: translateX(100%);
+}
+
+.openLeftSidebar() {
+    transition: 0.2s ease-in-out;
+    transform: translateX(0);
+}
+
+.c-sidebar-right.is-close {
+    .closeLeftSidebar();
+
+    .c-sidebar-right-toggle {
+        transition: 0.2s ease-in-out;
+        transform: translateX(-100%);
+    }
+}
+
+.c-sidebar-right.is-open {
+    .openLeftSidebar();
+
+    .c-sidebar-right-toggle {
+        transition: 0.2s ease-in-out;
+        transform: translateX(0);
+    }
+}
+
+@media screen and (max-width: @ipad) {
+    .c-sidebar-right-toggle {
+        // .none;
+    }
+
+    .c-sidebar-right.isopen {
+        box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
+    }
+}
+
+@media print {
+    .c-sidebar-right {
+        .none;
+    }
+}

package/assets/css/common/suspend-common.less

@@ -0,0 +1,343 @@
+@bgColor: #24292e;
+@color: #fedaa3;
+@color2: #24292e;
+
+.p-suspend {
+    .pf;
+    .lb(0);
+    .z(1994);
+    bottom: 0;
+    //margin: 0 calc(calc(100% - 23.438rem) / 2);
+    .w(100vw);
+    padding: 1.25rem 0px 1.5rem 0px;
+    border-radius: 1.25rem 1.25rem 0 0;
+    background: @bgColor;
+    color: @color;
+    .fz(1rem, 1.5rem);
+    .bold(700);
+
+    .m-home-box,
+    .m-pin-box,
+    .m-icon-box {
+        .flex;
+        .flex(o);
+    }
+
+    .m-pin-box {
+        gap: 1.125rem;
+
+        .u-item {
+            .flex;
+            .flex(o);
+
+            img {
+                .size(1.5rem);
+                .r(50%);
+            }
+
+            .u-text-r {
+                .size(1.5rem);
+                .r(50%);
+                background-color: #d9d9d9;
+                .flex;
+                .flex(o);
+            }
+        }
+    }
+
+    .m-btn-box {
+        .flex;
+        align-items: center;
+        justify-content: space-between;
+        flex: auto;
+        // gap: 3rem;
+        padding: 0 1.25rem;
+
+        .u-icon-d {
+            .flex;
+            .flex(o);
+            .size(1.5rem);
+
+            .u-icon {
+                &.active {
+                    fill: #fedaa3;
+                    stroke: #fedaa3;
+                }
+            }
+        }
+    }
+
+    .m-more {
+        .w(7.5rem);
+        .flex;
+        .flex(o);
+        flex-shrink: 0;
+        border-left: 0.5px solid rgba(254, 218, 163, 0.2);
+        gap: 0.5rem;
+    }
+}
+
+.p-drawer-suspend {
+    .size(100%);
+    .lt(0);
+
+    .u-drawer {
+        border-radius: 1.25rem 1.25rem 0 0;
+        position: fixed !important;
+        bottom: 0;
+        margin: auto;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+        user-select: none;
+        -webkit-touch-callout: none;
+        .w(100%);
+        .h(auto) !important;
+        padding: 1.25rem 0.75rem 2.5rem 0.75rem;
+        background: @bgColor !important;
+
+        // .el-drawer__body {}
+
+        .p-drawer-suspend_box {
+            .flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+
+        .u-drawer-box {
+            .flex;
+            .w(100%);
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.75rem;
+
+            .u-item {
+                border-radius: 12px;
+                background: rgba(255, 255, 255, 0.05);
+                .flex;
+                .flex(o);
+                flex-direction: column;
+                gap: 0.75rem;
+                flex: auto;
+                padding: 0.75rem 0;
+                box-sizing: border-box;
+
+                &.top {
+                    .h(6.875rem);
+                }
+
+                &.report {
+                    max-width: 50%;
+                }
+
+                .u-icon {
+                    .flex;
+                    .flex(o);
+                }
+
+                .u-self {
+                    .h(2.5rem);
+
+                    .flex;
+                    flex-direction: column;
+                    .flex(o);
+
+                    img {
+                        .size(1.5rem);
+                        .r(50%);
+                    }
+
+                    .u-circle-top {
+                        .pr;
+                        bottom: -0.75rem;
+                    }
+
+                    .u-circle-bottom {
+                        .flex;
+                        gap: 0;
+                    }
+
+                    .u-text-r {
+                        .size(1.5rem);
+                        .r(50%);
+                        background-color: #d9d9d9;
+                        .flex;
+                        .flex(o);
+                    }
+                }
+
+                .u-text {
+                    color: #acaeaf;
+                    .fz(0.875rem, 1.25rem);
+                    .bold(700);
+
+                    &.search,
+                    &.fix {
+                        color: #fedaa3;
+                    }
+                }
+
+                .u-author {
+                    //作者名字最多显示8个中文字符，超出后，第八个中文字符用...代替
+
+                    .fz(0.875rem, 1.25rem);
+                    .bold(700);
+                    .flex;
+                    .flex(o);
+                    gap: 0.2rem;
+                    padding: 0 0.75rem;
+                    box-sizing: border-box;
+                    color: #acaeaf;
+                    .w(100%);
+
+                    .u-avatar {
+                        .size(1.25rem);
+                        overflow: hidden;
+                        .r(50%);
+                        flex-shrink: 0;
+                    }
+
+                    .u-author-name {
+                        flex: auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        min-width: 0;
+                    }
+                }
+            }
+        }
+
+        .p-drawer-fix,
+        .p-drawer-collect {
+            color: rgba(255, 255, 255, 0.4);
+
+            .u-collect-icon {
+                .flex;
+                .flex(o);
+                flex-direction: column;
+                .w(100%);
+                .mb(1.25rem);
+
+                .u-text {
+                    .fz(0.875rem, 1.25rem);
+                }
+            }
+
+            .u-collect-tips {
+                .fz(0.75rem, 1rem);
+                text-align: center;
+
+                .mb(1.25rem);
+
+                &.edit {
+                    .flex;
+                    align-items: center;
+                    .fz(0.875rem, 1.25rem);
+                }
+            }
+
+            .u-btn-box {
+                .flex;
+                .flex(o);
+                gap: 0.75rem;
+                .mb(1.25rem);
+
+                .u-btn {
+                    .flex;
+                    .flex(o);
+                    .fz(1rem, 1.5rem);
+                    .bold(700);
+                    border-radius: 0.75rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    padding: 0.75rem 1rem;
+                    color: rgba(255, 255, 255, 0.4);
+                    flex: auto;
+
+                    &.collect {
+                        background-color: @color;
+                        color: @color2;
+                    }
+                }
+            }
+        }
+
+        .p-drawer-fix {
+            .u-edit-title {
+                .mb(1.25rem);
+                color: rgba(255, 255, 255, 0.6);
+                .fz(0.875rem, 1.25rem);
+                .bold(700);
+            }
+
+            .u-pin-box {
+                .mb(1.25rem);
+                .flex;
+                flex-direction: column;
+                gap: 0.75rem;
+
+                .u-item {
+                    .flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.5rem 1rem;
+                    align-self: stretch;
+                    .r(0.5rem);
+                    background: rgba(255, 255, 255, 0.1);
+
+                    .u-text-r,
+                    .u-icon {
+                        .size(1.875rem);
+                        .r(50%);
+                        flex-shrink: 0;
+                    }
+
+                    .u-text-r {
+                        .flex;
+                        .flex(o);
+                        background-color: #d9d9d9;
+                        color: #000;
+                    }
+
+                    .u-text {
+                        flex: auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        min-width: 0;
+                        color: #fff;
+                    }
+
+                    .u-slash {
+                        .flex;
+                        .flex(o);
+                        .size(1.875rem);
+                        flex-shrink: 0;
+                    }
+                }
+            }
+        }
+
+        .p-drawer-fixData {
+            .h(70vh);
+            .pr;
+            .u-icon {
+                .pa;
+                .z(3);
+                right: 1.25rem;
+            }
+            span {
+                color: #fff;
+            }
+            .u-iframe {
+                border-radius: 1.25rem 1.25rem 0 0;
+            }
+        }
+        .slide-up-enter-active,
+        .slide-up-leave-active {
+            transition: transform 0.3s ease-in-out;
+        }
+        .slide-up-enter, .slide-up-leave-to /* .slide-up-leave-active in <2.1.8 */ {
+            transform: translateY(100%);
+        }
+    }
+}

package/assets/css/editor/article.less

@@ -0,0 +1,36 @@
+// tinymce文章样式
+
+@import "../tinymce/_.less";
+@import "../tinymce/a.less";
+@import "../tinymce/list.less";
+@import "../tinymce/quote.less";
+@import "../tinymce/hr.less";
+@import "../tinymce/table.less";
+@import "../tinymce/img.less";
+@import "../tinymce/p.less";
+@import "../tinymce/h.less";
+@import "../tinymce/code.less";
+@import "../tinymce/fold.less";
+@import "../tinymce/plugin.less";
+@import "../tinymce/imgpreview.less";
+@import "../tinymce/latex.less";
+@import "../tinymce/nextpage.less";
+
+@import "../module/macro.less";
+@import "../module/talent.less";
+
+@import "../tinymce/video.less";
+@import "../tinymce/macro.less";
+@import "../tinymce/qixue.less";
+@import "../tinymce/pz.less";
+@import "../tinymce/combo.less";
+
+@import "../module/directory.less";
+@import "../module/icon.less";
+@import "../module/resource.less";
+@import "../module/jx3_element.less";
+
+@import "../module/buff.less";
+@import "../module/skill.less";
+@import "../module/item.less";
+@import "../module/npc.less";