@jx3box/jx3box-ui 0.0.1

package/assets/css/module/talent.less

@@ -0,0 +1,424 @@
+// 输出样式
+.w-qixue-box {
+    @url: "https://img.jx3box.com/img/";
+
+    zoom: 1;
+
+    @color: #2e4946;
+    @gray: #6f888a;
+    @xf-l: 10px;
+    @xf-r: 5px;
+    @xf: 23px;
+    @out-bo: 2px;
+    @lp:@xf-l + @xf-r + @xf + @out-bo;
+    @space: 10px;
+    @bo: 2px;
+
+    //局部z级别
+    @icon-decorate: 5; //装饰框
+    @item-description: 999; //描述
+
+    .white() {
+        color: #fff;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
+    }
+    // .dbi;
+    display:inline-flex;
+
+    background-color: @color;
+    .r(5px);
+    border: @out-bo solid @gray;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+    //padding-right:5px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-right: 20px;
+    // padding-left: 10px;
+    white-space: nowrap;
+    font-size: 0;
+    // width:860px;
+    // overflow-x: auto;
+    // display: block;
+
+    &.isQQBrowser{
+        padding-right: 30px !important; //fix
+    }
+
+    //单项
+    li {
+        list-style: none;
+    }
+
+    //图片
+    img {
+        .db;
+        .size(48px);
+        .r(5px);
+        .auto(x);
+        box-sizing: border-box;
+        filter: saturate(110%) brightness(110%);
+        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+        user-select: none;
+    }
+
+    //心法label
+    .w-qixue-xf {
+        // .dbi;
+        .y(top);
+        .fz(14px);
+        .white;
+        .x;
+
+        box-sizing: border-box;
+        .retext(y);
+        background: url("@{url}qixue/label.png") no-repeat 0 0;
+        .size(@xf,86px);
+        .mr(@xf-r);
+        .ml(@xf-l);
+        user-select: none;
+        //针对正文覆写
+        border: none;
+        font-weight: normal;
+        margin-top: 0;
+        margin-bottom: 0;
+        line-height: 1.1;
+        padding-right:5px;
+        letter-spacing:1px;
+
+        // word-wrap: break-word;
+        // padding-left:26px;
+        // white-space: wrap;
+    }
+
+    .w-qixue-clist {
+        margin: 0;
+    }
+
+    //公共单项
+    .w-qixue-clist-item,
+    .w-qixue-olist-item {
+        .u-pic {
+            .db;
+            .pr;
+            &:before,
+            &:after {
+                content: "";
+                .db;
+            }
+            &:after {
+                .size(52px);
+                .pa;
+                .lt(-2px,-2px);
+                background: url("@{url}qixue/bg.png") no-repeat 0 0;
+                .z(@icon-decorate + 1);
+            }
+        }
+        img {
+            .r(48px);
+            //针对正文覆写
+            padding: 0;
+            margin: 0;
+            border: none;
+        }
+        .u-title {
+            .white;
+            .fz(13px,14px);
+            .x;
+            .db;
+            .auto(x);
+            .mt(6px);
+            .w(48px);
+        }
+    }
+
+    //当前盒子
+    .w-qixue-clist {
+        .dbi;
+        .y(top);
+        font-size: 0;
+        white-space: nowrap;
+        margin-top: 8px;
+        .pr;
+        .z(2);
+
+        //针对正文覆写
+        padding-left: 0;
+    }
+    //当前单项
+    .w-qixue-clist-item {
+        .dbi;
+        .y;
+        padding-left: @space;
+        padding-right: @space;
+        .pr;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        /* &.w-qixue-isskill .u-pic{
+            &:before{
+                .pa;.lt(0);
+                .size(100%);
+                border:2px solid @color-cyan;
+            }
+        } */
+
+        &:before {
+            content: "";
+            .size(44px,11px);
+            background: url("@{url}qixue/fold.png") no-repeat 0 0;
+            margin: 0 2px;
+
+            .none;
+        }
+
+        &.on {
+            &:before {
+                background-image: url("@{url}qixue/unfold.png");
+            }
+        }
+    }
+
+    .pr;
+    .w-qixue-obox,
+    .w-qixue-olist,
+    .w-qixue-item-pop {
+        .none;
+    }
+    //全部扩展列表容器
+    .w-qixue-obox {
+        .pa;
+        .lb(@lp,100%);
+        white-space: nowrap;
+        font-size: 0;
+        &.on {
+            .db;
+        }
+    }
+    //单个扩展列表
+    .w-qixue-olist {
+        .pr;
+        .z(1000);
+        .dbi;
+        .y(bottom);
+        background-color: @color;
+        padding: @space - @bo;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        border: @bo solid @gray;
+        border-bottom: none;
+        box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.4);
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        transform: scale(0);
+        &.on {
+            transform: scale(1);
+        }
+    }
+    .w-qixue-olist-item {
+        margin-bottom: 8px;
+        .pr;
+
+        .u-pic {
+            &:before {
+                .size(100%);
+                .pa;
+                .lt(0);
+                background-color: rgba(0, 0, 0, 0.6);
+                .r(48px);
+                .z(@icon-decorate);
+            }
+        }
+
+        &:hover {
+            .u-pic {
+                &:before {
+                    .tm(0);
+                }
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    //特殊技能
+    .w-qixue-is_skill {
+        .u-pic {
+            &:before,
+            img {
+                .r(0);
+            }
+            &:after {
+                .none;
+            }
+        }
+    }
+
+    //单个浮层描述
+    .w-qixue-item-pop {
+        .pa;
+        .lt(100%,0);
+        .z(@item-description);
+        background-color: rgba(0, 0, 0, 0.8);
+        margin-left: 4px;
+        .r(3px);
+        padding: 10px;
+        width: 320px;
+        max-width:none;
+
+        * {
+            .db;
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: break-all;
+        }
+        .u-name,
+        .u-desc {
+            color: #ffff00;
+        }
+        .u-name {
+            .fz(14px,2);
+        }
+        .u-desc {
+            .fz(12px,20px);
+        }
+        .u-skill {
+            color: #fff;
+            .fz(13px,20px);
+        }
+        .u-meta,
+        .u-extend {
+            color: #ff9600;
+            .fz(13px,2);
+            font-style: normal;
+        }
+        &.on {
+            .db;
+        }
+    }
+    //展示版奇穴的pop显示位置
+    .w-qixue-clist-item .w-qixue-item-pop {
+        left: 0;
+        top: auto;
+        bottom: 100%;
+        .mb(10px);
+    }
+}
+@media screen and (max-width: @ipad) {
+    .w-qixue-box {
+        // zoom: 0.8;
+        .clearfix;
+
+        .db;
+        .w(auto);
+        li,
+        .w-qixue-xf {
+            .fl;
+            margin-bottom: 10px;
+        }
+        .w-qixue-xf {
+            .none;
+        }
+        .w-qixue-clist{
+            // .w(100%);
+            // overflow-x: auto;
+            .db;
+            .clearfix;
+            margin-top:0;
+        }
+    }
+}
+
+.w-qixue-editable {
+    .w-qixue-xf{
+        margin-top: 5px;
+    }
+    li {
+        .pointer;
+    }
+    .w-qixue-clist-item {
+        user-select: none;
+    }
+    .w-qixue-clist-item:before {
+        .db;
+    }
+
+    &.disabled:after {
+        content: "";
+        .db;
+        .size(100%);
+        .pa;
+        .lt(0);
+        .z(10);
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    &.active {
+        &:after {
+            .none;
+        }
+    }
+    //编辑模式下当前版不加载pop
+    .w-qixue-clist-item .w-qixue-item-pop {
+        .none !important;
+    }
+}
+
+@media screen and (max-width: @ipad) {
+    .w-qixue-editable {
+        // zoom: 0.8;
+
+        .db;
+        .w(auto);
+        //overflow-x:auto;
+        //overflow-y:visible;
+        li,
+        .w-qixue-xf {
+            .fl;
+            margin-bottom: 10px;
+        }
+        .w-qixue-obox {
+            left: 0;
+        }
+        .w-qixue-olist {
+            .clearfix;
+            .none;
+            &.on {
+                .db;
+            }
+
+            li {
+                .mr(10px);
+                &:last-child {
+                    .mr(0);
+                }
+                transform: scale(1);
+            }
+        }
+
+        .w-qixue-item-pop {
+            left: 0;
+            top: auto;
+            bottom: 100%;
+        }
+    }
+}
+
+// 打印样式
+@media print{
+	.w-qixue-box{
+        page-break-inside: avoid !important;
+        padding-right:40px;
+        .w-qixue-clist-item{
+            padding-left:5px;
+            padding-right:0;
+            transform: scale(0.85);
+        }
+    }
+}

package/assets/css/single/author.less

@@ -0,0 +1,101 @@
+.c-author {
+    .u-tips {
+        .db;
+        color: #555;
+        font-size: 12px;
+    }
+
+    .u-label {
+        padding: 10px 0;
+        .flex;
+        align-items: center;
+        i,
+        svg {
+            .size(16px);
+            .mr(5px);
+        }
+        span {
+            .fz(12px);
+            .bold;
+        }
+        // border-bottom: 1px solid @border;
+    }
+    .u-more {
+        fill: #aaa;
+    }
+
+    @keyframes living-icon-ani {
+        0% {
+            -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+        }
+        50% {
+            -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+        }
+        to {
+            -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+        }
+    }
+
+    .u-tv-living {
+        .dbi;
+        .ml(10px);
+    }
+
+    .u-tv-living-icon {
+        .h(10px);
+    }
+
+    .u-tv-living-icon-col {
+        .dbi;
+        transform-origin: bottom;
+        width: 2px;
+        height: 100%;
+        margin: 0 1px;
+        background-color: #fb7299;
+        border-radius: 2px;
+        animation: living-icon-ani 0.6s linear infinite;
+    }
+    .u-tv-living-icon-col.first {
+        animation-delay: -0.2s;
+    }
+    .u-tv-living-icon-col.last {
+        animation-delay: 0.2s;
+    }
+
+    .u-interact {
+        .mt(5px);
+        display: flex;
+    }
+    .u-links {
+        .mt(15px);
+    }
+    .u-block {
+        .mt(20px);
+    }
+
+    .u-btn {
+        &:hover {
+            .u-msg-icon {
+                filter: invert(33%) sepia(39%) saturate(6852%) hue-rotate(201deg) brightness(87%) contrast(98%);
+            }
+        }
+    }
+
+    .u-msg-icon {
+        .size(14px);
+        .pr;
+        top: 1px;
+        filter: invert(40%) sepia(5%) saturate(419%) hue-rotate(182deg) brightness(89%) contrast(84%);
+    }
+}
+
+.c-sidebar-left .c-author {
+    margin: 10px;
+}
+
+.c-sidebar-right .c-author {
+    margin: 15px;
+}

package/assets/css/single/cms-single.less

@@ -0,0 +1,55 @@
+.m-single-box {
+    // padding: 0 30px;
+    .el-divider__text {
+        color: #888;
+        font-weight: 300;
+    }
+    .pr;
+}
+@media screen and (max-width: @phone) {
+    .m-single-box {
+        padding: 0 15px;
+    }
+}
+
+.m-single-prepend {
+    .pr;
+}
+
+.m-single-collection,
+.m-single-creators {
+    .mb(10px);
+}
+
+.m-single-post {
+    .mb(10px);
+    .pr;
+    .el-divider {
+        margin: 10px auto 20px auto;
+    }
+    overflow: hidden;
+}
+
+.m-single-content {
+    height: auto !important;
+}
+@media print {
+    .m-single-content {
+        table {
+            width: 100% !important;
+        }
+    }
+}
+@media print {
+    .m-single-comment {
+        .none;
+    }
+}
+
+.m-single-null {
+    padding: 20px 0;
+}
+
+.m-single-thx {
+    .mt(40px);
+}