diff --git a/404.php b/404.php
new file mode 100644
index 0000000..6cfe8c6
--- /dev/null
+++ b/404.php
@@ -0,0 +1 @@
+need('public/include.php'); ?>
\ No newline at end of file
diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index bc8edbb..39bc809 100644
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
@@ -1 +1 @@
-html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--radius-wrap: 8px;--radius-inner: 4px;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #333;--theme: #54b5db;--main: #808080;--routine: #7b7b7b;--minor: #6d6d6d;--seat: #666;--classA: #444;--classB: #444;--classC: #444;--classD: #444;--text-shadow: none;--box-shadow: none}html[data-night='night'] body::before{background:#202122;z-index:-500}html[data-night='night'] .joe_header__above-logo img{display:none}html[data-night='night'] .joe_header__above-logo svg{display:block}.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;transform-origin:top;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:0 0 var(--radius-inner) var(--radius-inner);padding:10px 0;opacity:0;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo svg{display:none}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .joe_dropdown__link a{height:60px;line-height:60px;font-size:15px;padding-left:8px;padding-right:3px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu a{display:block;line-height:34px;height:34px;transition:color 0.35s, background 0.35s;color:var(--minor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 15px}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__above-search .result{position:absolute;z-index:2;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:var(--radius-inner);visibility:hidden;opacity:0;transition:visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(0, 15px, 0);transform:translate3d(0, 15px, 0)}.joe_header__above-search .result.active{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;visibility:visible}.joe_header__above-search .result .item{height:40px;line-height:40px;border-bottom:1px solid var(--classD);display:flex;align-items:center;overflow:hidden;padding:0 8px;transition:background 0.35s}.joe_header__above-search .result .item:last-child{border-bottom:none}.joe_header__above-search .result .item:nth-child(1) .sort{background:#fe2d46}.joe_header__above-search .result .item:nth-child(2) .sort{background:#f60}.joe_header__above-search .result .item:nth-child(3) .sort{background:#faa90e}.joe_header__above-search .result .item:hover{background:var(--classD)}.joe_header__above-search .result .item .sort{color:#fff;background:#7f7f8c;width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center;margin-right:8px;font-weight:500}.joe_header__above-search .result .item .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--routine);font-size:12px}.joe_header__above-search .result .item .views{color:var(--seat);font-size:12px;margin-left:3px}.joe_header__below{position:relative;border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu a{display:block;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:color 0.35s, background 0.35s}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__below-progress{position:absolute;z-index:1;left:0;bottom:-3px;height:3px;border-radius:1.5px;background:linear-gradient(to right, #4cd964, #5ac8fa, #007aff);transition:width 0.35s}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item-title{display:flex;align-items:center;border-bottom:1px solid var(--classC);font-size:16px;font-weight:500;height:45px;line-height:45px;padding:0 15px;color:var(--main)}.joe_aside__item-title .icon{width:18px;height:18px;margin-right:8px;fill:var(--main)}.joe_aside__item-title .line{width:10px;height:1px;background:#54b5db;margin-left:12px}.joe_aside__item-contain{position:relative;padding:15px}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::before{content:'';position:absolute;top:90px;left:0;width:100%;height:30px;z-index:2;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--background))}.joe_aside__item.author::after{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:273px;background:url("https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif") no-repeat;background-size:cover;z-index:3;pointer-events:none}.joe_aside__item.author:hover::after{display:block}.joe_aside__item.author .image{position:absolute;top:0;left:0;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;z-index:1}.joe_aside__item.author .user{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding-bottom:15px}.joe_aside__item.author .user .avatar{width:75px;height:75px;border-radius:50%;overflow:hidden;margin-bottom:10px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s;background:var(--background);padding:5px}.joe_aside__item.author .user .avatar:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_aside__item.author .user .link{color:var(--theme);margin-bottom:10px;font-size:16px;font-weight:500}.joe_aside__item.author .user .link:hover{text-decoration:underline}.joe_aside__item.author .user .motto{color:var(--main);text-align:center}.joe_aside__item.author .count{width:100%;padding-bottom:15px;display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_aside__item.author .count .item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;color:var(--routine);font-size:12px}.joe_aside__item.author .count .item:first-child{border-right:1px solid var(--classC)}.joe_aside__item.author .count .item .num{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:22px;color:var(--main);margin-bottom:3px;text-shadow:var(--text_shadow)}.joe_aside__item.author .list{padding-top:15px}.joe_aside__item.author .list .item{display:flex;align-items:center;justify-content:space-between;line-height:30px}.joe_aside__item.author .list .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.author .list .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_aside__item.author .list .item .link:hover{color:var(--theme)}.joe_aside__item.author .list .item .link:hover::after{width:100%}.joe_aside__item.author .list .item .icon{fill:var(--routine)}.joe_aside__item.timelife{background:var(--background)}.joe_aside__item.timelife .item{margin-bottom:15px}.joe_aside__item.timelife .item:last-child{margin-bottom:0}.joe_aside__item.timelife .item .title{font-size:12px;color:var(--minor);margin-bottom:5px;display:flex;align-items:center}.joe_aside__item.timelife .item .title .text{color:var(--theme);font-weight:500;font-size:14px;margin:0 5px}.joe_aside__item.timelife .item .progress{display:flex;align-items:center}.joe_aside__item.timelife .item .progress-bar{height:10px;border-radius:5px;overflow:hidden;background:var(--classC);width:0;min-width:0;flex:1;margin-right:5px}.joe_aside__item.timelife .item .progress-bar-inner{width:0;height:100%;border-radius:5px;transition:width 0.35s;-webkit-animation:progress 750ms linear infinite;animation:progress 750ms linear infinite}.joe_aside__item.timelife .item .progress-bar-inner-0{background:#bde6ff;background-image:linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-1{background:#ffd980;background-image:linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-2{background:#ffa9a9;background-image:linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-3{background:#67c23a;background-image:linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-percentage{color:var(--minor)}.joe_aside__item.weather{background:var(--background)}.joe_aside__item.weather .joe_aside__item-contain{min-height:300px}.joe_aside__item.hot{background:var(--background)}.joe_aside__item.hot .empty{text-align:center;color:var(--routine)}.joe_aside__item.hot .item{margin-bottom:15px}.joe_aside__item.hot .item:last-child{margin-bottom:0}.joe_aside__item.hot .item:nth-child(1) .link .sort{background:#ff183e}.joe_aside__item.hot .item:nth-child(2) .link .sort{background:#ff5c38}.joe_aside__item.hot .item:nth-child(3) .link .sort{background:#ffb821}.joe_aside__item.hot .item .link{position:relative;display:block;border-radius:var(--radius-inner);overflow:hidden}.joe_aside__item.hot .item .link:hover .image{-webkit-transform:scale(1.2);transform:scale(1.2)}.joe_aside__item.hot .item .link .sort{position:absolute;top:5px;right:-20px;background:#7f7f8c;color:#fff;width:65px;text-align:center;font-size:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-weight:500;z-index:1;font-style:normal}.joe_aside__item.hot .item .link .image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_aside__item.hot .item .link .describe{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));font-size:12px;color:var(--seat)}.joe_aside__item.hot .item .link .describe h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:24px;font-size:14px}.joe_aside__item.ranking{background:var(--background)}.joe_aside__item.ranking .item{display:flex;align-items:center;line-height:32px;overflow:hidden}.joe_aside__item.ranking .item:nth-child(1) .sort{color:#fe2d46}.joe_aside__item.ranking .item:nth-child(2) .sort{color:#f60}.joe_aside__item.ranking .item:nth-child(3) .sort{color:#faa90e}.joe_aside__item.ranking .item .sort{color:var(--minor);font-weight:700;font-size:18px;width:18px;min-width:18px;max-width:18px}.joe_aside__item.ranking .item .link{position:relative;color:var(--routine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_aside__item.ranking .item .link::after{position:absolute;content:'';bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:width 0.5s}.joe_aside__item.ranking .item .link:hover{color:var(--theme)}.joe_aside__item.ranking .item .link:hover::after{width:100%}.joe_aside__item.ranking .error{text-align:center;color:var(--routine)}.joe_aside__item.newreply{background:var(--background)}.joe_aside__item.newreply .empty{text-align:center;color:var(--routine)}.joe_aside__item.newreply .item{margin-bottom:15px;border-bottom:1px dashed var(--classC);padding-bottom:15px}.joe_aside__item.newreply .item:last-child{margin-bottom:0;border-bottom-color:transparent;padding-bottom:0}.joe_aside__item.newreply .item .user{display:flex;margin-bottom:12px}.joe_aside__item.newreply .item .user .avatar{width:40px;height:40px;min-width:40px;min-height:40px;margin-right:12px;border-radius:50%;border:1px solid var(--classA);padding:3px}.joe_aside__item.newreply .item .user .info{display:flex;flex-direction:column;justify-content:space-between}.joe_aside__item.newreply .item .user .info .author{color:var(--main);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.newreply .item .user .info .date{font-size:12px;color:var(--minor)}.joe_aside__item.newreply .item .reply{position:relative;background:var(--classD);border-radius:6px;padding:5px 10px}.joe_aside__item.newreply .item .reply::before{content:'';width:0;height:0;border-bottom:6px solid var(--classD);border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;left:15px;bottom:100%}.joe_aside__item.newreply .item .reply .link{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);font-size:13px;font-weight:500;line-height:24px;transition:all 0.35s}.joe_aside__item.newreply .item .reply .link:hover{color:var(--theme)}.joe_aside__item.newreply .item .reply .link .owo_image{height:18px;vertical-align:-5px}.joe_list__item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__item:last-child{border-bottom:none}.joe_list__item:hover .line{-webkit-transform:scaleY(1);transform:scaleY(1)}.joe_list__item:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item .line{position:absolute;z-index:1;top:15px;left:-15px;width:4px;height:25px;border-radius:2px;background:var(--theme);-webkit-transform:scaleY(0);transform:scaleY(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_list__item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;overflow:hidden}.joe_list__item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_list__item .thumbnail img:hover{opacity:0.85}.joe_list__item .thumbnail time{position:absolute;z-index:1;top:5px;right:5px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item .thumbnail svg{position:absolute;z-index:1;top:5px;left:5px;width:20px;height:20px;fill:#fff}.joe_list__item .information{display:flex;flex-direction:column;flex:1;min-width:0}.joe_list__item .information .title{display:flex;align-items:center;margin-bottom:10px}.joe_list__item .information .title .badge{height:20px;line-height:20px;background-image:-webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);color:#fff;font-size:12px;margin-right:5px;border-radius:2px;padding:0 8px;white-space:nowrap}.joe_list__item .information .title h6{color:var(--main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;line-height:24px;transition:color 0.35s}.joe_list__item .information .title h6:hover{color:var(--theme)}.joe_list__item .information .abstract{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:opacity 0.35s;word-break:break-all;line-height:24px}.joe_list__item .information .abstract:hover{opacity:0.8}.joe_list__item .information .meta{display:flex;align-items:center;margin-top:auto;color:var(--minor);font-size:13px}.joe_list__item .information .meta .items{display:flex;align-items:center}.joe_list__item .information .meta .items li::after{content:'/';color:#e1e1e1;padding:0 5px}.joe_list__item .information .meta .items li:last-child::after{display:none}.joe_list__item .information .meta .last{margin-left:auto;display:flex;align-items:center}.joe_list__item .information .meta .last .icon{margin-right:3px}.joe_list__item .information .meta .last .link{color:var(--minor)}.joe_list__item .information .meta .last .link:hover{color:var(--theme)}.joe_list__loading .item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__loading .item:last-child{border-bottom:none}.joe_list__loading .item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;background:var(--classD);-webkit-animation:list_thumbnail_loading 0.5s infinite alternate;animation:list_thumbnail_loading 0.5s infinite alternate;border-radius:var(--radius-inner)}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:var(--radius-inner);background:var(--classD);-webkit-animation:list_title_loading 0.75s infinite alternate;animation:list_title_loading 0.75s infinite alternate;margin-bottom:15px}.joe_list__loading .item .information .abstract p{height:18px;border-radius:var(--radius-inner);background:var(--classD);margin-bottom:5px;-webkit-animation:list_abstract_loading 0.8s infinite alternate;animation:list_abstract_loading 0.8s infinite alternate}.joe_load{margin:15px auto 0;width:120px;height:32px;line-height:32px;text-align:center;border-radius:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--background);color:var(--routine);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;box-shadow:var(--box-shadow)}.joe_load:active{-webkit-transform:scale(0.75);transform:scale(0.75)}.joe_detail{background:var(--background);border-radius:var(--radius-wrap);padding:15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_detail__category{display:flex;align-items:center;margin-bottom:15px}.joe_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__category .item:hover{opacity:0.85;-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__category .item:last-child{margin-right:0}.joe_detail__category .item-0{background:#0396ff}.joe_detail__category .item-1{background:#ea5455}.joe_detail__category .item-2{background:#7367f0}.joe_detail__category .item-3{background:#28c76f}.joe_detail__category .item-4{background:#9f44d3}.joe_detail__category .edit{color:var(--minor);margin-left:auto}.joe_detail__category .edit:hover{color:var(--theme)}.joe_detail__title{font-size:24px;color:var(--main);text-shadow:var(--text-shadow);text-align:center;margin-bottom:15px;word-break:break-all}.joe_detail__count{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--classC)}.joe_detail__count::after{content:'';position:absolute;bottom:-1.5px;left:0;width:80px;height:3px;border-radius:1.5px;background:var(--theme)}.joe_detail__count-information{display:flex;align-items:center}.joe_detail__count-information .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;border:1px solid var(--classA);padding:3px;-o-object-fit:cover;object-fit:cover}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between;font-size:12px}.joe_detail__count-information .meta .author .link{font-weight:500;color:var(--theme)}.joe_detail__count-information .meta .author .link:hover{text-decoration:underline}.joe_detail__count-information .meta .item{display:flex;align-items:center;color:var(--minor);line-height:16px}.joe_detail__count-information .meta .item .line{color:var(--seat);margin:0 7px;vertical-align:middle}.joe_detail__count-created{font-size:32px;line-height:42px;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:var(--text-shadow);font-family:consolas}.joe_detail__article{padding-top:15px;font-size:15px}.joe_detail__article h1,.joe_detail__article h2,.joe_detail__article h3,.joe_detail__article h4,.joe_detail__article h5,.joe_detail__article h6{color:var(--main);font-size:18px;line-height:24px;margin-bottom:15px;position:relative}.joe_detail__article h1{padding:0 15px 0 20px}.joe_detail__article h1::before{content:'#';color:var(--theme);font-weight:700;position:absolute;top:0;left:0;line-height:24px}.joe_detail__article h2{padding:0 15px}.joe_detail__article h2::before{content:'';position:absolute;top:10%;bottom:10%;left:0;width:4px;border-radius:2px;background:var(--theme)}.joe_detail__article h3{padding:0 15px}.joe_detail__article h3::before{content:'';position:absolute;top:8.5px;left:0;height:7px;width:7px;border-radius:50%;background:var(--theme)}.joe_detail__article h4::before{content:'「';color:var(--theme);font-weight:600;margin-right:5px}.joe_detail__article h4::after{content:'」';color:var(--theme);font-weight:600;margin-left:5px}.joe_detail__article h5{padding:0 15px 0 28px}.joe_detail__article h5::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");background-size:100% 100%}.joe_detail__article h6{padding:0 15px 0 28px}.joe_detail__article h6::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");background-size:100% 100%}.joe_detail__article hr{border:none;height:1px;background-color:var(--classB);margin-bottom:15px}.joe_detail__article p{color:var(--routine);line-height:26px;letter-spacing:1px;word-break:break-all;margin-bottom:15px}.joe_detail__article blockquote{color:var(--routine);line-height:26px;letter-spacing:1px;word-break:break-all;margin-bottom:15px;background:#ecf8ff;border-left:5px solid #50bfff;padding:10px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 0;font-size:14px}.joe_detail__article blockquote p{margin:0}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn){display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn):hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn)::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article code{display:inline-block;min-height:26px;line-height:26px;border-radius:var(--radius-inner);font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c;vertical-align:top}.joe_detail__article pre code{display:unset;vertical-align:unset;min-height:unset;line-height:unset;border-radius:unset;font-size:unset;background:unset;padding:unset;color:unset}.joe_detail__article pre[class*='language-']{position:relative;padding:15px;padding-top:35px;margin:0 0 15px;border-radius:var(--radius-inner)}.joe_detail__article pre[class*='language-']::after{content:'';position:absolute;top:0;left:0;width:100%;height:30px;background:#2d2d2d}.joe_detail__article pre[class*='language-']::before{content:'';position:absolute;top:9px;left:15px;width:12px;height:12px;border-radius:50%;background:#fc625d;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;z-index:1}.joe_detail__article img{display:block;max-width:100%;border-radius:var(--radius-inner);transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;cursor:zoom-in;margin:0 auto}.joe_detail__article img:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article ol,.joe_detail__article ul{color:var(--routine);margin-bottom:15px;padding:0 30px}.joe_detail__article ol li,.joe_detail__article ul li{line-height:26px}.joe_detail__article ol li{list-style:decimal}.joe_detail__article ul li{list-style:disc}.joe_detail__article ul li::marker{color:var(--routine)}.joe_detail__article table{width:100%;max-width:100%;table-layout:fixed;color:var(--minor);margin-bottom:15px;font-size:13px;border-top:1px solid var(--classC);border-left:1px solid var(--classC)}.joe_detail__article table td,.joe_detail__article table th{padding:8px;border-bottom:1px solid var(--classC);border-right:1px solid var(--classC)}.joe_detail__article table thead th{font-weight:500;background:var(--classC)}.joe_detail__article table tbody tr{transition:background 0.35s}.joe_detail__article table tbody tr:hover{background:var(--classD)}.joe_detail__article span.block{display:block}.joe_detail__article-hide{background:repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);padding:15px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-player{width:100%;height:500px}.joe_detail__article-protected{display:flex;justify-content:center;background:repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);padding:20px 0;margin-bottom:15px}.joe_detail__article-protected .contain{position:relative;box-shadow:var(--box-shadow)}.joe_detail__article-protected .contain .icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:15px}.joe_detail__article-protected .contain .password{width:300px;height:44px;border:none;border-radius:var(--radius-inner);color:var(--routine);padding-left:50px;background:var(--background)}.joe_detail__article-protected .contain .submit{position:absolute;top:0;right:0;height:44px;line-height:44px;width:44px;cursor:pointer;text-align:center;font-size:13px;color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-checkbox{-webkit-appearance:none;position:relative;border-radius:2px;width:15px;height:15px;border:2px solid var(--theme);vertical-align:-2px}.joe_detail__article-checkbox:disabled{cursor:not-allowed}.joe_detail__article-checkbox:checked{border:none;background:var(--theme)}.joe_detail__article-checkbox:checked::after{content:'';width:3px;height:7px;position:absolute;top:2px;left:5px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.joe_detail__article-card{margin:0 auto;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);border-radius:var(--radius-inner);border:1px solid var(--classC);background:var(--background)}.joe_detail__article-card .title{padding:8px 10px;border-bottom:1px solid var(--classC);color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-card .content{padding:10px;color:var(--routine)}.joe_detail__article-message{position:relative;border-left-width:4px;border-left-style:solid;padding:10px 15px;border-radius:0 4px 4px 0}.joe_detail__article-message:hover .icon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_detail__article-message .icon{position:absolute;top:-9px;left:-11px;width:18px;height:18px;border-radius:50%;transition:-webkit-transform 0.85s;transition:transform 0.85s;transition:transform 0.85s, -webkit-transform 0.85s}.joe_detail__article-message .icon::before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:10px;height:10px;fill:#fff;background-repeat:no-repeat;background-size:100% 100%}.joe_detail__article-message.success{border-left-color:#2bde3f;background:#2bde3f20;color:#2bde3f}.joe_detail__article-message.success .icon{background:#2bde3f}.joe_detail__article-message.success .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=)}.joe_detail__article-message.info{border-left-color:#1d72f3;background:#1d72f320;color:#1d72f3}.joe_detail__article-message.info .icon{background:#1d72f3}.joe_detail__article-message.info .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.warning{border-left-color:#ffc007;background:#ffc00720;color:#ffc007}.joe_detail__article-message.warning .icon{background:#ffc007}.joe_detail__article-message.warning .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.error{border-left-color:#f56c6c;background:#f56c6c20;color:#f56c6c}.joe_detail__article-message.error .icon{background:#f56c6c}.joe_detail__article-message.error .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+)}.joe_detail__article-mtitle{display:flex;justify-content:center}.joe_detail__article-mtitle .text{position:relative;color:var(--minor);padding:0 15px;transition:padding 0.35s}.joe_detail__article-mtitle .text:hover{padding:0}.joe_detail__article-mtitle .text::before,.joe_detail__article-mtitle .text::after{content:'';position:absolute;top:50%;width:20px;height:1px;background:var(--theme)}.joe_detail__article-mtitle .text::before{left:-35px}.joe_detail__article-mtitle .text::after{right:-35px}.joe_detail__article-anote{display:inline-block;color:#fff;height:35px;line-height:35px;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s}.joe_detail__article-anote:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article-anote .icon{display:inline-block;vertical-align:top;width:35px;height:35px;text-align:center;background:rgba(0,0,0,0.2)}.joe_detail__article-anote .icon .fa{color:#fff;font-size:15px}.joe_detail__article-anote .content{display:inline-block;vertical-align:top;padding:0 12px;max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__article-anote.secondary{background:#34495e}.joe_detail__article-anote.success{background:#27ae60}.joe_detail__article-anote.warning{background:#f39c12}.joe_detail__article-anote.error{background:#e74c3c}.joe_detail__article-anote.info{background:#3498db}.joe_detail__article-abtn{display:inline-block;color:#fff;height:35px;line-height:35px;padding:0 15px;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0)}.joe_detail__article-abtn:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.joe_detail__article-abtn .icon{display:inline-block;vertical-align:top;text-align:center}.joe_detail__article-abtn .icon .fa{color:#fff;font-size:14px}.joe_detail__article-abtn .icon [class^='fa-']{margin-right:8px}.joe_detail__article-abtn .content{display:inline-block;vertical-align:top;max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__agree{display:flex;align-items:center;justify-content:center;margin-bottom:15px}.joe_detail__agree .agree{text-align:center;font-size:12px;color:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__agree .agree .icon{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#f56c6c;cursor:pointer;margin-bottom:8px}.joe_detail__agree .agree .icon.active{-webkit-animation:box_shadow 1s;animation:box_shadow 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_detail__agree .agree .icon svg{position:absolute;width:28px;height:28px;-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_detail__agree .agree .icon svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_detail__copyright{padding-top:15px;border-top:1px solid var(--classC)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:var(--radius-inner)}.joe_detail__copyright .content .item{display:flex;align-items:center;color:var(--minor);white-space:nowrap;margin-bottom:10px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__copyright .content .item .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__friends{display:flex;flex-wrap:wrap;margin:0 -7.5px;margin-bottom:15px}.joe_detail__friends-item{width:25%;padding:7.5px}.joe_detail__friends-item .contain{display:block;border-radius:var(--radius-inner);overflow:hidden;padding:15px;color:#fff;word-break:break-all;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s}.joe_detail__friends-item .contain:hover{-webkit-transform:translateY(-5px) scale(1.025);transform:translateY(-5px) scale(1.025);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__friends-item .contain .title{position:relative}.joe_detail__friends-item .contain .title::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#fff}.joe_detail__friends-item .contain .content{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.joe_detail__friends-item .contain .content .desc{margin-right:10px}.joe_detail__friends-item .contain .content .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.joe_footer{border-top:1px solid var(--classB);color:var(--minor)}.joe_footer .joe_container{display:flex;align-items:center;justify-content:space-between;min-height:65px}.joe_footer .joe_container a{color:var(--minor);transition:all 0.35s}.joe_footer .joe_container a:hover{color:var(--theme)}.joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_pagination li{margin-left:5px}.joe_pagination li.active a{background:var(--theme);color:#fff;font-weight:500}.joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;transition:background 0.35s, color 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_pagination li a:hover{background:var(--theme);color:#fff}.joe_pagination li a:hover .icon{fill:#fff}.joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine);transition:fill 0.35s}.joe_pagination li a .icon-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_action{position:fixed;bottom:90px;right:30px;z-index:333}.joe_action_item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}.joe_action_item svg{position:absolute;width:25px;height:25px;fill:var(--theme)}.joe_action_item.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, transform 0.35s;transition:visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_action_item.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.joe_action_item.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_action_item.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_comment{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px}.joe_comment__title{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classC);margin-bottom:15px;padding-bottom:15px}.joe_comment__close{display:flex;align-items:center;justify-content:center;color:var(--routine)}.joe_comment__close-icon{fill:var(--routine);margin-right:5px}.joe_comment__respond-type{display:flex;align-items:center;justify-content:flex-end}.joe_comment__respond-type .item{background:var(--classD);padding:0 15px;height:32px;color:var(--main);border:none;transition:color 0.35s, background 0.35s}.joe_comment__respond-type .item:first-child{border-top-left-radius:var(--radius-inner)}.joe_comment__respond-type .item:last-child{border-top-right-radius:var(--radius-inner)}.joe_comment__respond-type .item.active{color:#fff;background:var(--theme)}.joe_comment__respond-form{border-radius:6px 0 6px 6px;background:var(--classD)}.joe_comment__respond-form .head{display:flex;align-items:center;border-bottom:1px solid var(--classA)}.joe_comment__respond-form .head .list{flex:1}.joe_comment__respond-form .head .list input{width:100%;border:none;background:transparent;padding:0 15px;height:40px;color:var(--routine)}.joe_comment__respond-form .head .list:nth-child(2){position:relative}.joe_comment__respond-form .head .list:nth-child(2)::after,.joe_comment__respond-form .head .list:nth-child(2)::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}.joe_comment__respond-form .head .list:nth-child(2)::before{left:0}.joe_comment__respond-form .head .list:nth-child(2)::after{right:0}.joe_comment__respond-form .body{padding:15px}.joe_comment__respond-form .body .text{width:100%;height:200px;border:none;resize:none;vertical-align:middle;color:var(--routine);background:transparent;font-size:15px}.joe_comment__respond-form .body .draw{position:relative;width:100%}.joe_comment__respond-form .body .draw .line{display:flex;align-items:center;position:absolute;top:10px;left:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .line li{cursor:pointer;margin-right:10px;color:var(--main);transition:color 0.35s}.joe_comment__respond-form .body .draw .line li.active{color:var(--theme)}.joe_comment__respond-form .body .draw .color{display:flex;align-items:center;position:absolute;top:10px;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.joe_comment__respond-form .body .draw .color li{width:20px;height:20px;border-radius:50%;margin:0 5px;cursor:pointer;transition:box-shadow 0.35s}.joe_comment__respond-form .body .draw .color li.active{box-shadow:0 4px 10px rgba(0,0,0,0.35)}.joe_comment__respond-form .body .draw .color li:nth-child(1){background:#303133}.joe_comment__respond-form .body .draw .color li:nth-child(2){background:#67c23a}.joe_comment__respond-form .body .draw .color li:nth-child(3){background:#e6a23c}.joe_comment__respond-form .body .draw .color li:nth-child(4){background:#f56c6c}.joe_comment__respond-form .body .draw .icon{position:absolute;right:10px;cursor:pointer;fill:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .icon-undo{top:10px}.joe_comment__respond-form .body .draw .icon-animate{bottom:10px}.joe_comment__respond-form .body .draw canvas{background:var(--background);border-radius:var(--radius-inner)}.joe_comment__respond-form .foot{position:relative;display:flex;justify-content:space-between;padding:0 15px 15px}.joe_comment__respond-form .foot .submit{white-space:nowrap}.joe_comment__respond-form .foot .submit .cancle{display:none;color:var(--main);cursor:pointer;margin-right:10px;transition:color 0.35s}.joe_comment__respond-form .foot .submit .cancle:hover{color:var(--theme)}.joe_comment__respond-form .foot .submit button{border-radius:3px;height:32px;padding:0 15px;border:none;background:var(--theme);color:#fff;font-size:14px}.joe_comment__respond-form .foot .submit button:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shake;animation:5s ease-in-out 0s infinite normal none running shake}.joe_comment .comment-list{padding-top:15px}.joe_comment .comment-list__item-contain .term{display:flex;margin-bottom:15px}.joe_comment .comment-list__item-contain .term .avatar{width:48px;height:48px;border-radius:50%;margin-right:15px;padding:3px;border:1px solid var(--classD);-o-object-fit:cover;object-fit:cover}.joe_comment .comment-list__item-contain .term .content{min-width:0;flex:1;border-bottom:1px solid var(--classC);padding-bottom:15px}.joe_comment .comment-list__item-contain .term .content .user{display:flex;align-items:center;margin-bottom:8px;line-height:20px;color:var(--main)}.joe_comment .comment-list__item-contain .term .content .user .author{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .user .author a{color:#409eff}.joe_comment .comment-list__item-contain .term .content .user .owner{background:var(--theme);color:#fff;padding:0 5px;border-radius:2px;font-style:normal}.joe_comment .comment-list__item-contain .term .content .user .agent{margin-left:auto;font-size:12px;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .user .waiting{color:#e6a23c;font-style:normal}.joe_comment .comment-list__item-contain .term .content .substance{width:100%;background:var(--classD);padding:12px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 10px;color:var(--main);margin-bottom:8px;word-break:break-all;line-height:24px}.joe_comment .comment-list__item-contain .term .content .substance .parent{color:#388bff;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:500}.joe_comment .comment-list__item-contain .term .content .substance .owo_image{height:22px}.joe_comment .comment-list__item-contain .term .content .substance .draw_image{max-width:100%}.joe_comment .comment-list__item-contain .term .content .handle{display:flex;align-items:center;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .handle .date{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .handle .reply{display:flex;align-items:center;color:var(--main);font-size:13px;cursor:pointer;transition:color 0.35s}.joe_comment .comment-list__item-contain .term .content .handle .reply .icon{margin-right:5px;fill:var(--main);transition:fill 0.35s}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover{color:var(--theme)}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon{fill:var(--theme)}.joe_comment .comment-list__item-children{padding-left:63px}.joe_comment .comment-list__item-children .comment-list__item-children{padding-left:0}.joe_comment .comment-list__item .joe_comment__respond{margin-left:63px;margin-bottom:15px;-webkit-animation:showComment 0.5s;animation:showComment 0.5s}.joe_comment .comment-list .comment-list{padding-top:0}.joe_comment .joe_pagination{padding-top:0}.profile-color-modes-illu-frame{opacity:0}.profile-color-modes-illu-red{stroke:#da3633}.profile-color-modes-illu-orange{stroke:#f0883e}.profile-color-modes-illu-purple{stroke:#8957e5}.profile-color-modes-illu-green{stroke:#3fb950}.profile-color-modes-illu-blue{stroke:#388bfd}.profile-color-modes-illu-group{-webkit-animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards}.profile-color-modes-illu-frame{-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:first-child{opacity:1;-webkit-animation:profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards}.profile-color-modes-illu-red{-webkit-animation-delay:0.4s;animation-delay:0.4s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-orange{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-purple{-webkit-animation-delay:0.6s;animation-delay:0.6s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-blue{-webkit-animation-delay:0.7s;animation-delay:0.7s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-green{-webkit-animation-delay:0.8s;animation-delay:0.8s;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5);animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5)}.profile-color-modes-illu-frame:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s}.profile-color-modes-illu-frame:nth-child(2){-webkit-animation-delay:1.8s, 2.58s;animation-delay:1.8s, 2.58s}.profile-color-modes-illu-frame:nth-child(3){-webkit-animation-delay:2.58s, 2.66s;animation-delay:2.58s, 2.66s}.profile-color-modes-illu-frame:nth-child(4){-webkit-animation-delay:2.66s, 2.78s;animation-delay:2.66s, 2.78s}.profile-color-modes-illu-frame:nth-child(5){-webkit-animation-delay:2.78s, 2.84s;animation-delay:2.78s, 2.84s}.profile-color-modes-illu-frame:nth-child(6){-webkit-animation-delay:2.84s, 3.44s;animation-delay:2.84s, 3.44s}.profile-color-modes-illu-frame:nth-child(7){-webkit-animation-delay:3.44s, 3.56s;animation-delay:3.44s, 3.56s}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation-delay:3.56s;animation-delay:3.56s}.profile-color-modes-illu-frame:nth-child(9),.profile-color-modes-illu-frame:nth-child(10){-webkit-animation:none;animation:none}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@-webkit-keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@-webkit-keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes list_title_loading{0%{width:80%}100%{width:95%}}@keyframes list_title_loading{0%{width:80%}100%{width:95%}}@-webkit-keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@-webkit-keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@-webkit-keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@-webkit-keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@-webkit-keyframes shake{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}@keyframes shake{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}
+.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;transform-origin:top;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:0 0 var(--radius-inner) var(--radius-inner);padding:10px 0;opacity:0;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo svg{display:none}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .joe_dropdown__link a{height:60px;line-height:60px;font-size:15px;padding-left:8px;padding-right:3px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu a{display:block;line-height:34px;height:34px;transition:color 0.35s, background 0.35s;color:var(--minor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 15px}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__above-search .result{position:absolute;z-index:2;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:var(--radius-inner);visibility:hidden;opacity:0;transition:visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(0, 15px, 0);transform:translate3d(0, 15px, 0)}.joe_header__above-search .result.active{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;visibility:visible}.joe_header__above-search .result .item{height:40px;line-height:40px;border-bottom:1px solid var(--classD);display:flex;align-items:center;overflow:hidden;padding:0 8px;transition:background 0.35s}.joe_header__above-search .result .item:last-child{border-bottom:none}.joe_header__above-search .result .item:nth-child(1) .sort{background:#fe2d46}.joe_header__above-search .result .item:nth-child(2) .sort{background:#f60}.joe_header__above-search .result .item:nth-child(3) .sort{background:#faa90e}.joe_header__above-search .result .item:hover{background:var(--classD)}.joe_header__above-search .result .item .sort{color:#fff;background:#7f7f8c;width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center;margin-right:8px;font-weight:500}.joe_header__above-search .result .item .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--routine);font-size:12px}.joe_header__above-search .result .item .views{color:var(--seat);font-size:12px;margin-left:3px}.joe_header__below{position:relative;border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu a{display:block;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:color 0.35s, background 0.35s}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__below-progress{position:absolute;z-index:1;left:0;bottom:-3px;height:3px;border-radius:1.5px;background:linear-gradient(to right, #4cd964, #5ac8fa, #007aff);transition:width 0.35s}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item-title{display:flex;align-items:center;border-bottom:1px solid var(--classC);font-size:16px;font-weight:500;height:45px;line-height:45px;padding:0 15px;color:var(--main)}.joe_aside__item-title .icon{width:18px;height:18px;margin-right:8px;fill:var(--main)}.joe_aside__item-title .line{width:10px;height:1px;background:#54b5db;margin-left:12px}.joe_aside__item-contain{position:relative;padding:15px}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::before{content:'';position:absolute;top:90px;left:0;width:100%;height:30px;z-index:2;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--background))}.joe_aside__item.author::after{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:273px;background:url("https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif") no-repeat;background-size:cover;z-index:3;pointer-events:none}.joe_aside__item.author:hover::after{display:block}.joe_aside__item.author .image{position:absolute;top:0;left:0;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;z-index:1}.joe_aside__item.author .user{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding-bottom:15px}.joe_aside__item.author .user .avatar{width:75px;height:75px;border-radius:50%;overflow:hidden;margin-bottom:10px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s;background:var(--background);padding:5px}.joe_aside__item.author .user .avatar:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_aside__item.author .user .link{color:var(--theme);margin-bottom:10px;font-size:16px;font-weight:500}.joe_aside__item.author .user .link:hover{text-decoration:underline}.joe_aside__item.author .user .motto{color:var(--main);text-align:center}.joe_aside__item.author .count{width:100%;padding-bottom:15px;display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_aside__item.author .count .item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;color:var(--routine);font-size:12px}.joe_aside__item.author .count .item:first-child{border-right:1px solid var(--classC)}.joe_aside__item.author .count .item .num{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:22px;color:var(--main);margin-bottom:3px;text-shadow:var(--text_shadow)}.joe_aside__item.author .list{padding-top:15px}.joe_aside__item.author .list .item{display:flex;align-items:center;justify-content:space-between;line-height:30px}.joe_aside__item.author .list .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.author .list .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_aside__item.author .list .item .link:hover{color:var(--theme)}.joe_aside__item.author .list .item .link:hover::after{width:100%}.joe_aside__item.author .list .item .icon{fill:var(--routine)}.joe_aside__item.timelife{background:var(--background)}.joe_aside__item.timelife .item{margin-bottom:15px}.joe_aside__item.timelife .item:last-child{margin-bottom:0}.joe_aside__item.timelife .item .title{font-size:12px;color:var(--minor);margin-bottom:5px;display:flex;align-items:center}.joe_aside__item.timelife .item .title .text{color:var(--theme);font-weight:500;font-size:14px;margin:0 5px}.joe_aside__item.timelife .item .progress{display:flex;align-items:center}.joe_aside__item.timelife .item .progress-bar{height:10px;border-radius:5px;overflow:hidden;background:var(--classC);width:0;min-width:0;flex:1;margin-right:5px}.joe_aside__item.timelife .item .progress-bar-inner{width:0;height:100%;border-radius:5px;transition:width 0.35s;-webkit-animation:progress 750ms linear infinite;animation:progress 750ms linear infinite}.joe_aside__item.timelife .item .progress-bar-inner-0{background:#bde6ff;background-image:linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-1{background:#ffd980;background-image:linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-2{background:#ffa9a9;background-image:linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-3{background:#67c23a;background-image:linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-percentage{color:var(--minor)}.joe_aside__item.weather{background:var(--background)}.joe_aside__item.weather .joe_aside__item-contain{min-height:300px}.joe_aside__item.hot{background:var(--background)}.joe_aside__item.hot .empty{text-align:center;color:var(--routine)}.joe_aside__item.hot .item{margin-bottom:15px}.joe_aside__item.hot .item:last-child{margin-bottom:0}.joe_aside__item.hot .item:nth-child(1) .link .sort{background:#ff183e}.joe_aside__item.hot .item:nth-child(2) .link .sort{background:#ff5c38}.joe_aside__item.hot .item:nth-child(3) .link .sort{background:#ffb821}.joe_aside__item.hot .item .link{position:relative;display:block;border-radius:var(--radius-inner);overflow:hidden}.joe_aside__item.hot .item .link:hover .image{-webkit-transform:scale(1.2);transform:scale(1.2)}.joe_aside__item.hot .item .link .sort{position:absolute;top:5px;right:-20px;background:#7f7f8c;color:#fff;width:65px;text-align:center;font-size:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-weight:500;z-index:1;font-style:normal}.joe_aside__item.hot .item .link .image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_aside__item.hot .item .link .describe{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));font-size:12px;color:var(--seat)}.joe_aside__item.hot .item .link .describe h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:24px;font-size:14px}.joe_aside__item.ranking{background:var(--background)}.joe_aside__item.ranking .item{display:flex;align-items:center;line-height:32px;overflow:hidden}.joe_aside__item.ranking .item:nth-child(1) .sort{color:#fe2d46}.joe_aside__item.ranking .item:nth-child(2) .sort{color:#f60}.joe_aside__item.ranking .item:nth-child(3) .sort{color:#faa90e}.joe_aside__item.ranking .item .sort{color:var(--minor);font-weight:700;font-size:18px;width:18px;min-width:18px;max-width:18px}.joe_aside__item.ranking .item .link{position:relative;color:var(--routine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_aside__item.ranking .item .link::after{position:absolute;content:'';bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:width 0.5s}.joe_aside__item.ranking .item .link:hover{color:var(--theme)}.joe_aside__item.ranking .item .link:hover::after{width:100%}.joe_aside__item.ranking .error{text-align:center;color:var(--routine)}.joe_aside__item.newreply{background:var(--background)}.joe_aside__item.newreply .empty{text-align:center;color:var(--routine)}.joe_aside__item.newreply .item{margin-bottom:15px;border-bottom:1px dashed var(--classC);padding-bottom:15px}.joe_aside__item.newreply .item:last-child{margin-bottom:0;border-bottom-color:transparent;padding-bottom:0}.joe_aside__item.newreply .item .user{display:flex;margin-bottom:12px}.joe_aside__item.newreply .item .user .avatar{width:40px;height:40px;min-width:40px;min-height:40px;margin-right:12px;border-radius:50%;border:1px solid var(--classA);padding:3px}.joe_aside__item.newreply .item .user .info{display:flex;flex-direction:column;justify-content:space-between}.joe_aside__item.newreply .item .user .info .author{color:var(--main);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.newreply .item .user .info .date{font-size:12px;color:var(--minor)}.joe_aside__item.newreply .item .reply{position:relative;background:var(--classD);border-radius:6px;padding:5px 10px}.joe_aside__item.newreply .item .reply::before{content:'';width:0;height:0;border-bottom:6px solid var(--classD);border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;left:15px;bottom:100%}.joe_aside__item.newreply .item .reply .link{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);font-size:13px;font-weight:500;line-height:24px;transition:all 0.35s}.joe_aside__item.newreply .item .reply .link:hover{color:var(--theme)}.joe_aside__item.newreply .item .reply .link .owo_image{height:18px;vertical-align:-5px}.joe_list__item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__item:last-child{border-bottom:none}.joe_list__item:hover .line{-webkit-transform:scaleY(1);transform:scaleY(1)}.joe_list__item:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item .line{position:absolute;z-index:1;top:15px;left:-15px;width:4px;height:25px;border-radius:2px;background:var(--theme);-webkit-transform:scaleY(0);transform:scaleY(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_list__item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;overflow:hidden}.joe_list__item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_list__item .thumbnail img:hover{opacity:0.85}.joe_list__item .thumbnail time{position:absolute;z-index:1;top:5px;right:5px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item .thumbnail svg{position:absolute;z-index:1;top:5px;left:5px;width:20px;height:20px;fill:#fff}.joe_list__item .information{display:flex;flex-direction:column;flex:1;min-width:0}.joe_list__item .information .title{display:flex;align-items:center;margin-bottom:10px}.joe_list__item .information .title .badge{height:20px;line-height:20px;background-image:-webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);color:#fff;font-size:12px;margin-right:5px;border-radius:2px;padding:0 8px;white-space:nowrap}.joe_list__item .information .title h6{color:var(--main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px;line-height:24px;transition:color 0.35s}.joe_list__item .information .title h6:hover{color:var(--theme)}.joe_list__item .information .abstract{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:opacity 0.35s;word-break:break-all;line-height:24px}.joe_list__item .information .abstract:hover{opacity:0.8}.joe_list__item .information .meta{display:flex;align-items:center;margin-top:auto;color:var(--minor);font-size:13px}.joe_list__item .information .meta .items{display:flex;align-items:center}.joe_list__item .information .meta .items li::after{content:'/';color:#e1e1e1;padding:0 5px}.joe_list__item .information .meta .items li:last-child::after{display:none}.joe_list__item .information .meta .last{margin-left:auto;display:flex;align-items:center}.joe_list__item .information .meta .last .icon{margin-right:3px}.joe_list__item .information .meta .last .link{color:var(--minor)}.joe_list__item .information .meta .last .link:hover{color:var(--theme)}.joe_list__loading .item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__loading .item:last-child{border-bottom:none}.joe_list__loading .item .thumbnail{position:relative;width:210px;height:140px;min-width:210px;min-height:140px;margin-right:15px;background:var(--classD);-webkit-animation:list_thumbnail_loading 0.5s infinite alternate;animation:list_thumbnail_loading 0.5s infinite alternate;border-radius:var(--radius-inner)}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:var(--radius-inner);background:var(--classD);-webkit-animation:list_title_loading 0.75s infinite alternate;animation:list_title_loading 0.75s infinite alternate;margin-bottom:15px}.joe_list__loading .item .information .abstract p{height:18px;border-radius:var(--radius-inner);background:var(--classD);margin-bottom:5px;-webkit-animation:list_abstract_loading 0.8s infinite alternate;animation:list_abstract_loading 0.8s infinite alternate}.joe_load{margin:15px auto 0;width:120px;height:32px;line-height:32px;text-align:center;border-radius:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--background);color:var(--routine);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;box-shadow:var(--box-shadow)}.joe_load:active{-webkit-transform:scale(0.75);transform:scale(0.75)}.joe_detail{background:var(--background);border-radius:var(--radius-wrap);padding:15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_detail__category{display:flex;align-items:center;margin-bottom:15px}.joe_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__category .item:hover{opacity:0.85;-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__category .item:last-child{margin-right:0}.joe_detail__category .item-0{background:#0396ff}.joe_detail__category .item-1{background:#ea5455}.joe_detail__category .item-2{background:#7367f0}.joe_detail__category .item-3{background:#28c76f}.joe_detail__category .item-4{background:#9f44d3}.joe_detail__category .edit{color:var(--minor);margin-left:auto}.joe_detail__category .edit:hover{color:var(--theme)}.joe_detail__title{font-size:24px;color:var(--main);text-shadow:var(--text-shadow);text-align:center;margin-bottom:15px;word-break:break-all}.joe_detail__count{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--classC)}.joe_detail__count::after{content:'';position:absolute;bottom:-1.5px;left:0;width:80px;height:3px;border-radius:1.5px;background:var(--theme)}.joe_detail__count-information{display:flex;align-items:center}.joe_detail__count-information .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;border:1px solid var(--classA);padding:3px;-o-object-fit:cover;object-fit:cover}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between;font-size:12px}.joe_detail__count-information .meta .author .link{font-weight:500;color:var(--theme)}.joe_detail__count-information .meta .author .link:hover{text-decoration:underline}.joe_detail__count-information .meta .item{display:flex;align-items:center;color:var(--minor);line-height:16px}.joe_detail__count-information .meta .item .line{color:var(--seat);margin:0 7px;vertical-align:middle}.joe_detail__count-created{font-size:32px;line-height:42px;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:var(--text-shadow);font-family:consolas}.joe_detail__article{padding-top:15px;font-size:15px}.joe_detail__article h1,.joe_detail__article h2,.joe_detail__article h3,.joe_detail__article h4,.joe_detail__article h5,.joe_detail__article h6{color:var(--main);font-size:18px;line-height:24px;margin-bottom:15px;position:relative}.joe_detail__article h1{padding:0 15px 0 20px}.joe_detail__article h1::before{content:'#';color:var(--theme);font-weight:700;position:absolute;top:0;left:0;line-height:24px}.joe_detail__article h2{padding:0 15px}.joe_detail__article h2::before{content:'';position:absolute;top:10%;bottom:10%;left:0;width:4px;border-radius:2px;background:var(--theme)}.joe_detail__article h3{padding:0 15px}.joe_detail__article h3::before{content:'';position:absolute;top:8.5px;left:0;height:7px;width:7px;border-radius:50%;background:var(--theme)}.joe_detail__article h4::before{content:'「';color:var(--theme);font-weight:600;margin-right:5px}.joe_detail__article h4::after{content:'」';color:var(--theme);font-weight:600;margin-left:5px}.joe_detail__article h5{padding:0 15px 0 28px}.joe_detail__article h5::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");background-size:100% 100%}.joe_detail__article h6{padding:0 15px 0 28px}.joe_detail__article h6::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");background-size:100% 100%}.joe_detail__article hr{border:none;height:1px;background-color:var(--classB);margin-bottom:15px}.joe_detail__article p{color:var(--routine);line-height:26px;letter-spacing:1px;word-break:break-all;margin-bottom:15px}.joe_detail__article blockquote{color:var(--routine);line-height:26px;letter-spacing:1px;word-break:break-all;margin-bottom:15px;background:#ecf8ff;border-left:5px solid #50bfff;padding:10px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 0;font-size:14px}.joe_detail__article blockquote p{margin:0}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn){display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn):hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn)::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article code{display:inline-block;min-height:26px;line-height:26px;border-radius:var(--radius-inner);font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c;vertical-align:top}.joe_detail__article pre code{display:unset;vertical-align:unset;min-height:unset;line-height:unset;border-radius:unset;font-size:unset;background:unset;padding:unset;color:unset}.joe_detail__article pre[class*='language-']{position:relative;padding:15px;padding-top:35px;margin:0 0 15px;border-radius:var(--radius-inner)}.joe_detail__article pre[class*='language-']::after{content:'';position:absolute;top:0;left:0;width:100%;height:30px;background:#2d2d2d}.joe_detail__article pre[class*='language-']::before{content:'';position:absolute;top:9px;left:15px;width:12px;height:12px;border-radius:50%;background:#fc625d;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;z-index:1}.joe_detail__article img{display:block;max-width:100%;border-radius:var(--radius-inner);transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;cursor:zoom-in;margin:0 auto}.joe_detail__article img:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article ol,.joe_detail__article ul{color:var(--routine);margin-bottom:15px;padding:0 30px}.joe_detail__article ol li,.joe_detail__article ul li{line-height:26px}.joe_detail__article ol li{list-style:decimal}.joe_detail__article ul li{list-style:disc}.joe_detail__article ul li::marker{color:var(--routine)}.joe_detail__article table{width:100%;max-width:100%;table-layout:fixed;color:var(--minor);margin-bottom:15px;font-size:13px;border-top:1px solid var(--classC);border-left:1px solid var(--classC)}.joe_detail__article table td,.joe_detail__article table th{padding:8px;border-bottom:1px solid var(--classC);border-right:1px solid var(--classC)}.joe_detail__article table thead th{font-weight:500;background:var(--classC)}.joe_detail__article table tbody tr{transition:background 0.35s}.joe_detail__article table tbody tr:hover{background:var(--classD)}.joe_detail__article span.block{display:block}.joe_detail__article-hide{background:repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);padding:15px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-player{width:100%;height:500px}.joe_detail__article-protected{display:flex;justify-content:center;background:repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);padding:20px 0;margin-bottom:15px}.joe_detail__article-protected .contain{position:relative;box-shadow:var(--box-shadow)}.joe_detail__article-protected .contain .icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:15px}.joe_detail__article-protected .contain .password{width:300px;height:44px;border:none;border-radius:var(--radius-inner);color:var(--routine);padding-left:50px;background:var(--background)}.joe_detail__article-protected .contain .submit{position:absolute;top:0;right:0;height:44px;line-height:44px;width:44px;cursor:pointer;text-align:center;font-size:13px;color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-checkbox{-webkit-appearance:none;position:relative;border-radius:2px;width:15px;height:15px;border:2px solid var(--theme);vertical-align:-2px}.joe_detail__article-checkbox:disabled{cursor:not-allowed}.joe_detail__article-checkbox:checked{border:none;background:var(--theme)}.joe_detail__article-checkbox:checked::after{content:'';width:3px;height:7px;position:absolute;top:2px;left:5px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.joe_detail__article-card{margin:0 auto;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);border-radius:var(--radius-inner);border:1px solid var(--classC);background:var(--background)}.joe_detail__article-card .title{padding:8px 10px;border-bottom:1px solid var(--classC);color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-card .content{padding:10px;color:var(--routine)}.joe_detail__article-message{position:relative;border-left-width:4px;border-left-style:solid;padding:10px 15px;border-radius:0 4px 4px 0}.joe_detail__article-message:hover .icon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_detail__article-message .icon{position:absolute;top:-9px;left:-11px;width:18px;height:18px;border-radius:50%;transition:-webkit-transform 0.85s;transition:transform 0.85s;transition:transform 0.85s, -webkit-transform 0.85s}.joe_detail__article-message .icon::before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:10px;height:10px;fill:#fff;background-repeat:no-repeat;background-size:100% 100%}.joe_detail__article-message.success{border-left-color:#2bde3f;background:#2bde3f20;color:#2bde3f}.joe_detail__article-message.success .icon{background:#2bde3f}.joe_detail__article-message.success .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=)}.joe_detail__article-message.info{border-left-color:#1d72f3;background:#1d72f320;color:#1d72f3}.joe_detail__article-message.info .icon{background:#1d72f3}.joe_detail__article-message.info .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.warning{border-left-color:#ffc007;background:#ffc00720;color:#ffc007}.joe_detail__article-message.warning .icon{background:#ffc007}.joe_detail__article-message.warning .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.error{border-left-color:#f56c6c;background:#f56c6c20;color:#f56c6c}.joe_detail__article-message.error .icon{background:#f56c6c}.joe_detail__article-message.error .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+)}.joe_detail__article-mtitle{display:flex;justify-content:center}.joe_detail__article-mtitle .text{position:relative;color:var(--minor);padding:0 15px;transition:padding 0.35s}.joe_detail__article-mtitle .text:hover{padding:0}.joe_detail__article-mtitle .text::before,.joe_detail__article-mtitle .text::after{content:'';position:absolute;top:50%;width:20px;height:1px;background:var(--theme)}.joe_detail__article-mtitle .text::before{left:-35px}.joe_detail__article-mtitle .text::after{right:-35px}.joe_detail__article-anote{position:relative;display:inline-block;color:#fff;height:35px;line-height:35px;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_detail__article-anote:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px)}.joe_detail__article-anote .icon{display:inline-block;vertical-align:top;width:35px;height:35px;text-align:center;background:rgba(0,0,0,0.2)}.joe_detail__article-anote .icon .fa{color:#fff;font-size:15px}.joe_detail__article-anote .content{display:inline-block;vertical-align:top;padding:0 12px;max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__article-anote.secondary{background:#34495e}.joe_detail__article-anote.success{background:#27ae60}.joe_detail__article-anote.warning{background:#f39c12}.joe_detail__article-anote.error{background:#e74c3c}.joe_detail__article-anote.info{background:#3498db}.joe_detail__article-abtn{display:inline-block;color:#fff;height:35px;line-height:35px;padding:0 15px;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0)}.joe_detail__article-abtn:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.joe_detail__article-abtn .icon{display:inline-block;vertical-align:top;text-align:center}.joe_detail__article-abtn .icon .fa{color:#fff;font-size:14px}.joe_detail__article-abtn .icon [class^='fa-']{margin-right:8px}.joe_detail__article-abtn .content{display:inline-block;vertical-align:top;max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__agree{display:flex;align-items:center;justify-content:center;margin-bottom:15px}.joe_detail__agree .agree{text-align:center;font-size:12px;color:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__agree .agree .icon{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#f56c6c;cursor:pointer;margin-bottom:8px}.joe_detail__agree .agree .icon.active{-webkit-animation:box_shadow 1s;animation:box_shadow 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_detail__agree .agree .icon svg{position:absolute;width:28px;height:28px;-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_detail__agree .agree .icon svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_detail__copyright{padding-top:15px;border-top:1px solid var(--classC)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:var(--radius-inner)}.joe_detail__copyright .content .item{display:flex;align-items:center;color:var(--minor);white-space:nowrap;margin-bottom:10px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__copyright .content .item .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__friends{display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;margin-bottom:15px}.joe_detail__friends-item .contain{display:block;border-radius:var(--radius-inner);overflow:hidden;padding:15px;color:#fff;word-break:break-all;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s}.joe_detail__friends-item .contain:hover{-webkit-transform:translateY(-5px) scale(1.025);transform:translateY(-5px) scale(1.025);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__friends-item .contain .title{position:relative}.joe_detail__friends-item .contain .title::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#fff}.joe_detail__friends-item .contain .content{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.joe_detail__friends-item .contain .content .desc{margin-right:10px}.joe_detail__friends-item .contain .content .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.joe_footer{border-top:1px solid var(--classB);color:var(--minor)}.joe_footer .joe_container{display:flex;align-items:center;justify-content:space-between;min-height:65px}.joe_footer .joe_container a{color:var(--minor);transition:all 0.35s}.joe_footer .joe_container a:hover{color:var(--theme)}.joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_pagination li{margin-left:5px}.joe_pagination li.active a{background:var(--theme);color:#fff;font-weight:500}.joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;transition:background 0.35s, color 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_pagination li a:hover{background:var(--theme);color:#fff}.joe_pagination li a:hover .icon{fill:#fff}.joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine);transition:fill 0.35s}.joe_pagination li a .icon-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_action{position:fixed;bottom:90px;right:30px;z-index:333}.joe_action_item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}.joe_action_item svg{position:absolute;width:25px;height:25px;fill:var(--theme)}.joe_action_item.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, transform 0.35s;transition:visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_action_item.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.joe_action_item.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_action_item.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_comment{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px}.joe_comment__title{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classC);margin-bottom:15px;padding-bottom:15px}.joe_comment__close{display:flex;align-items:center;justify-content:center;color:var(--routine)}.joe_comment__close-icon{fill:var(--routine);margin-right:5px}.joe_comment__respond-type{display:flex;align-items:center;justify-content:flex-end}.joe_comment__respond-type .item{background:var(--classD);padding:0 15px;height:32px;color:var(--main);border:none;transition:color 0.35s, background 0.35s}.joe_comment__respond-type .item:first-child{border-top-left-radius:var(--radius-inner)}.joe_comment__respond-type .item:last-child{border-top-right-radius:var(--radius-inner)}.joe_comment__respond-type .item.active{color:#fff;background:var(--theme)}.joe_comment__respond-form{border-radius:6px 0 6px 6px;background:var(--classD)}.joe_comment__respond-form .head{display:flex;align-items:center;border-bottom:1px solid var(--classA)}.joe_comment__respond-form .head .list{flex:1}.joe_comment__respond-form .head .list input{width:100%;border:none;background:transparent;padding:0 15px;height:40px;color:var(--routine)}.joe_comment__respond-form .head .list:nth-child(2){position:relative}.joe_comment__respond-form .head .list:nth-child(2)::after,.joe_comment__respond-form .head .list:nth-child(2)::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}.joe_comment__respond-form .head .list:nth-child(2)::before{left:0}.joe_comment__respond-form .head .list:nth-child(2)::after{right:0}.joe_comment__respond-form .body{padding:15px}.joe_comment__respond-form .body .text{width:100%;height:200px;border:none;resize:none;vertical-align:middle;color:var(--routine);background:transparent;font-size:15px}.joe_comment__respond-form .body .draw{position:relative;width:100%}.joe_comment__respond-form .body .draw .line{display:flex;align-items:center;position:absolute;top:10px;left:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .line li{cursor:pointer;margin-right:10px;color:var(--main);transition:color 0.35s}.joe_comment__respond-form .body .draw .line li.active{color:var(--theme)}.joe_comment__respond-form .body .draw .color{display:flex;align-items:center;position:absolute;top:10px;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%)}.joe_comment__respond-form .body .draw .color li{width:20px;height:20px;border-radius:50%;margin:0 5px;cursor:pointer;transition:box-shadow 0.35s}.joe_comment__respond-form .body .draw .color li.active{box-shadow:0 4px 10px rgba(0,0,0,0.35)}.joe_comment__respond-form .body .draw .color li:nth-child(1){background:#303133}.joe_comment__respond-form .body .draw .color li:nth-child(2){background:#67c23a}.joe_comment__respond-form .body .draw .color li:nth-child(3){background:#e6a23c}.joe_comment__respond-form .body .draw .color li:nth-child(4){background:#f56c6c}.joe_comment__respond-form .body .draw .icon{position:absolute;right:10px;cursor:pointer;fill:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .icon-undo{top:10px}.joe_comment__respond-form .body .draw .icon-animate{bottom:10px}.joe_comment__respond-form .body .draw canvas{background:var(--background);border-radius:var(--radius-inner)}.joe_comment__respond-form .foot{position:relative;display:flex;justify-content:space-between;padding:0 15px 15px}.joe_comment__respond-form .foot .submit{white-space:nowrap}.joe_comment__respond-form .foot .submit .cancle{display:none;color:var(--main);cursor:pointer;margin-right:10px;transition:color 0.35s}.joe_comment__respond-form .foot .submit .cancle:hover{color:var(--theme)}.joe_comment__respond-form .foot .submit button{border-radius:3px;height:32px;padding:0 15px;border:none;background:var(--theme);color:#fff;font-size:14px}.joe_comment__respond-form .foot .submit button:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shake;animation:5s ease-in-out 0s infinite normal none running shake}.joe_comment .comment-list{padding-top:15px}.joe_comment .comment-list__item-contain .term{display:flex;margin-bottom:15px}.joe_comment .comment-list__item-contain .term .avatar{width:48px;height:48px;border-radius:50%;margin-right:15px;padding:3px;border:1px solid var(--classD);-o-object-fit:cover;object-fit:cover}.joe_comment .comment-list__item-contain .term .content{min-width:0;flex:1;border-bottom:1px solid var(--classC);padding-bottom:15px}.joe_comment .comment-list__item-contain .term .content .user{display:flex;align-items:center;margin-bottom:8px;line-height:20px;color:var(--main)}.joe_comment .comment-list__item-contain .term .content .user .author{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .user .author a{color:#409eff}.joe_comment .comment-list__item-contain .term .content .user .owner{background:var(--theme);color:#fff;padding:0 5px;border-radius:2px;font-style:normal}.joe_comment .comment-list__item-contain .term .content .user .agent{margin-left:auto;font-size:12px;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .user .waiting{color:#e6a23c;font-style:normal}.joe_comment .comment-list__item-contain .term .content .substance{width:100%;background:var(--classD);padding:12px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 10px;color:var(--main);margin-bottom:8px;word-break:break-all;line-height:24px}.joe_comment .comment-list__item-contain .term .content .substance .parent{color:#388bff;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:500}.joe_comment .comment-list__item-contain .term .content .substance .owo_image{height:22px}.joe_comment .comment-list__item-contain .term .content .substance .draw_image{max-width:100%}.joe_comment .comment-list__item-contain .term .content .handle{display:flex;align-items:center;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .handle .date{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .handle .reply{display:flex;align-items:center;color:var(--main);font-size:13px;cursor:pointer;transition:color 0.35s}.joe_comment .comment-list__item-contain .term .content .handle .reply .icon{margin-right:5px;fill:var(--main);transition:fill 0.35s}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover{color:var(--theme)}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon{fill:var(--theme)}.joe_comment .comment-list__item-children{padding-left:63px}.joe_comment .comment-list__item-children .comment-list__item-children{padding-left:0}.joe_comment .comment-list__item .joe_comment__respond{margin-left:63px;margin-bottom:15px;-webkit-animation:showComment 0.5s;animation:showComment 0.5s}.joe_comment .comment-list .comment-list{padding-top:0}.joe_comment .joe_pagination{padding-top:0}.profile-color-modes-illu-frame{opacity:0}.profile-color-modes-illu-red{stroke:#da3633}.profile-color-modes-illu-orange{stroke:#f0883e}.profile-color-modes-illu-purple{stroke:#8957e5}.profile-color-modes-illu-green{stroke:#3fb950}.profile-color-modes-illu-blue{stroke:#388bfd}.profile-color-modes-illu-group{-webkit-animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards}.profile-color-modes-illu-frame{-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:first-child{opacity:1;-webkit-animation:profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards}.profile-color-modes-illu-red{-webkit-animation-delay:0.4s;animation-delay:0.4s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-orange{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-purple{-webkit-animation-delay:0.6s;animation-delay:0.6s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-blue{-webkit-animation-delay:0.7s;animation-delay:0.7s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-green{-webkit-animation-delay:0.8s;animation-delay:0.8s;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5);animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5)}.profile-color-modes-illu-frame:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s}.profile-color-modes-illu-frame:nth-child(2){-webkit-animation-delay:1.8s, 2.58s;animation-delay:1.8s, 2.58s}.profile-color-modes-illu-frame:nth-child(3){-webkit-animation-delay:2.58s, 2.66s;animation-delay:2.58s, 2.66s}.profile-color-modes-illu-frame:nth-child(4){-webkit-animation-delay:2.66s, 2.78s;animation-delay:2.66s, 2.78s}.profile-color-modes-illu-frame:nth-child(5){-webkit-animation-delay:2.78s, 2.84s;animation-delay:2.78s, 2.84s}.profile-color-modes-illu-frame:nth-child(6){-webkit-animation-delay:2.84s, 3.44s;animation-delay:2.84s, 3.44s}.profile-color-modes-illu-frame:nth-child(7){-webkit-animation-delay:3.44s, 3.56s;animation-delay:3.44s, 3.56s}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation-delay:3.56s;animation-delay:3.56s}.profile-color-modes-illu-frame:nth-child(9),.profile-color-modes-illu-frame:nth-child(10){-webkit-animation:none;animation:none}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@-webkit-keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@-webkit-keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes list_title_loading{0%{width:80%}100%{width:95%}}@keyframes list_title_loading{0%{width:80%}100%{width:95%}}@-webkit-keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@-webkit-keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@-webkit-keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@-webkit-keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@-webkit-keyframes shake{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}@keyframes shake{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}
diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss
index 1e52000..54bf513 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -1,2636 +1,2587 @@
-/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
-html {
- --theme: #409eff;
- --background: #fff;
- --main: #303133;
- --routine: #606266;
- --minor: #909399;
- --seat: #c0c4cc;
- --classA: #dcdfe6;
- --classB: #e4e7ed;
- --classC: #ebeef5;
- --classD: #f2f6fc;
- --radius-wrap: 8px;
- --radius-inner: 4px;
- --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
- --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
-}
-
-/* 黑夜模式的配色方案是我随便写的一套，您可以修改配色成您的一套方案 */
-html[data-night='night'] {
- --background: #333;
- --theme: #54b5db;
- --main: #808080;
- --routine: #7b7b7b;
- --minor: #6d6d6d;
- --seat: #666;
- --classA: #444;
- --classB: #444;
- --classC: #444;
- --classD: #444;
- --text-shadow: none;
- --box-shadow: none;
-}
-
-/* 此处用于修改黑夜模式下没有覆盖到的小地方的样式 */
-html[data-night='night'] {
- body::before {
- background: #202122;
- z-index: -500;
- }
- .joe_header__above-logo img {
- display: none;
- }
- .joe_header__above-logo svg {
- display: block;
- }
-}
-
.joe_dropdown {
- position: relative;
- &__link {
- display: flex;
- align-items: center;
- &-icon {
- transition: transform 0.35s;
- }
- }
- &__menu {
- position: absolute;
- left: 50%;
- visibility: hidden;
- z-index: 999;
- border-top: 3px solid var(--theme);
- transform-origin: top;
- background: var(--background);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
- border-radius: 0 0 var(--radius-inner) var(--radius-inner);
- padding: 10px 0;
- opacity: 0;
- transform: translateX(-50%) perspective(600px) rotateX(-45deg);
- transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
- &::before {
- content: '';
- position: absolute;
- top: -10px;
- left: 50%;
- transform: translateX(-50%);
- width: 0;
- height: 0;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-bottom: 7px solid var(--theme);
- }
- }
- &.active {
- .joe_dropdown__link-icon {
- transform: rotate(-180deg);
- }
- .joe_dropdown__menu {
- visibility: visible;
- opacity: 1;
- transform: translateX(-50%) perspective(600px) rotateX(0);
- }
- }
+ position: relative;
+ &__link {
+ display: flex;
+ align-items: center;
+ &-icon {
+ transition: transform 0.35s;
+ }
+ }
+ &__menu {
+ position: absolute;
+ left: 50%;
+ visibility: hidden;
+ z-index: 999;
+ border-top: 3px solid var(--theme);
+ transform-origin: top;
+ background: var(--background);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ border-radius: 0 0 var(--radius-inner) var(--radius-inner);
+ padding: 10px 0;
+ opacity: 0;
+ transform: translateX(-50%) perspective(600px) rotateX(-45deg);
+ transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
+ &::before {
+ content: '';
+ position: absolute;
+ top: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid var(--theme);
+ }
+ }
+ &.active {
+ .joe_dropdown__link-icon {
+ transform: rotate(-180deg);
+ }
+ .joe_dropdown__menu {
+ visibility: visible;
+ opacity: 1;
+ transform: translateX(-50%) perspective(600px) rotateX(0);
+ }
+ }
}
.joe_header {
- position: sticky;
- top: 0;
- z-index: 1000;
- background: var(--background);
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
- &__above {
- &-logo {
- position: relative;
- display: flex;
- align-items: center;
- height: 60px;
- padding-right: 15px;
- margin-right: 15px;
- img {
- max-width: 150px;
- max-height: 50px;
- object-fit: cover;
- }
- svg {
- display: none;
- }
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- width: 1px;
- height: 20px;
- background: var(--classC);
- transform: translateY(-50%);
- }
- }
- &-nav {
- display: flex;
- align-items: center;
- .item {
- position: relative;
- height: 60px;
- line-height: 60px;
- font-size: 15px;
- padding: 0 8px;
- margin-right: 15px;
- transition: color 0.35s;
- white-space: nowrap;
- color: var(--main);
- &:last-child {
- margin-right: 0;
- }
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 3px;
- transition: opacity 0.5s, transform 0.5s;
- border-radius: 6px 6px 0 0;
- opacity: 0;
- transform: scaleX(0.25);
- background: var(--theme);
- }
- &.active,
- &:hover {
- color: var(--theme);
- &::after {
- opacity: 1;
- transform: scaleX(1);
- }
- }
- }
- .joe_dropdown {
- &__link {
- a {
- height: 60px;
- line-height: 60px;
- font-size: 15px;
- padding-left: 8px;
- padding-right: 3px;
- transition: color 0.35s;
- white-space: nowrap;
- color: var(--main);
- }
- }
- &__menu {
- width: 110px;
- text-align: center;
- a {
- display: block;
- line-height: 34px;
- height: 34px;
- transition: color 0.35s, background 0.35s;
- color: var(--minor);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 0 15px;
- &:hover,
- &.active {
- color: var(--theme);
- background: var(--classD);
- }
- }
- }
- }
- }
- &-search {
- position: relative;
- margin-left: auto;
- display: flex;
- align-items: center;
- .input {
- background: var(--classC);
- width: 170px;
- height: 34px;
- border: 1px solid transparent;
- padding: 0 18px;
- color: var(--routine);
- transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
- border-radius: 17px 0 0 17px;
- &:focus {
- background: var(--background);
- border-color: var(--theme);
- padding-right: 28px;
- ~ .icon {
- transform: translate3d(0, -50%, 0) rotateY(180deg);
- }
- }
- }
- .submit {
- position: relative;
- z-index: 1;
- height: 34px;
- border: none;
- background: var(--theme);
- color: #fff;
- border-radius: 0 17px 17px 0;
- padding: 0 10px;
- }
- .icon {
- position: absolute;
- top: 50%;
- left: 142px;
- width: 28px;
- height: 38px;
- background: url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);
- background-size: 100% 100%;
- transition: transform 0.35s;
- transform: translate3d(100%, -50%, 0) rotateY(180deg);
- }
- .result {
- position: absolute;
- z-index: 2;
- top: 60px;
- left: 0;
- right: 0;
- background: var(--background);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
- border-radius: var(--radius-inner);
- visibility: hidden;
- opacity: 0;
- transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
- transform: translate3d(0, 15px, 0);
- &.active {
- transform: translate3d(0, 0, 0);
- opacity: 1;
- visibility: visible;
- }
- .item {
- height: 40px;
- line-height: 40px;
- border-bottom: 1px solid var(--classD);
- display: flex;
- align-items: center;
- overflow: hidden;
- padding: 0 8px;
- transition: background 0.35s;
- &:last-child {
- border-bottom: none;
- }
- &:nth-child(1) .sort {
- background: #fe2d46;
- }
- &:nth-child(2) .sort {
- background: #f60;
- }
- &:nth-child(3) .sort {
- background: #faa90e;
- }
- &:hover {
- background: var(--classD);
- }
- .sort {
- color: #fff;
- background: #7f7f8c;
- width: 18px;
- height: 18px;
- line-height: 18px;
- border-radius: 50%;
- text-align: center;
- margin-right: 8px;
- font-weight: 500;
- }
- .text {
- flex: 1;
- min-width: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: var(--routine);
- font-size: 12px;
- }
- .views {
- color: var(--seat);
- font-size: 12px;
- margin-left: 3px;
- }
- }
- }
- }
- }
- &__below {
- position: relative;
- border-top: 1px solid var(--classC);
- height: 45px;
- &-class {
- display: flex;
- .item {
- margin-right: 15px;
- color: var(--minor);
- height: 45px;
- line-height: 45px;
- transition: color 0.35s;
- white-space: nowrap;
- &:hover,
- &.active {
- color: var(--theme);
- }
- }
- .joe_dropdown {
- margin-right: 15px;
- &__link {
- .item {
- margin-right: 3px;
- }
- }
- &__menu {
- width: 110px;
- text-align: center;
- a {
- display: block;
- height: 34px;
- line-height: 34px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: var(--minor);
- transition: color 0.35s, background 0.35s;
- &:hover,
- &.active {
- color: var(--theme);
- background: var(--classD);
- }
- }
- }
- }
- }
- &-progress {
- position: absolute;
- z-index: 1;
- left: 0;
- bottom: -3px;
- height: 3px;
- border-radius: 1.5px;
- background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
- transition: width 0.35s;
- }
- }
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ background: var(--background);
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+ &__above {
+ &-logo {
+ position: relative;
+ display: flex;
+ align-items: center;
+ height: 60px;
+ padding-right: 15px;
+ margin-right: 15px;
+ img {
+ max-width: 150px;
+ max-height: 50px;
+ object-fit: cover;
+ }
+ svg {
+ display: none;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ width: 1px;
+ height: 20px;
+ background: var(--classC);
+ transform: translateY(-50%);
+ }
+ }
+ &-nav {
+ display: flex;
+ align-items: center;
+ .item {
+ position: relative;
+ height: 60px;
+ line-height: 60px;
+ font-size: 15px;
+ padding: 0 8px;
+ margin-right: 15px;
+ transition: color 0.35s;
+ white-space: nowrap;
+ color: var(--main);
+ &:last-child {
+ margin-right: 0;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ transition: opacity 0.5s, transform 0.5s;
+ border-radius: 6px 6px 0 0;
+ opacity: 0;
+ transform: scaleX(0.25);
+ background: var(--theme);
+ }
+ &.active,
+ &:hover {
+ color: var(--theme);
+ &::after {
+ opacity: 1;
+ transform: scaleX(1);
+ }
+ }
+ }
+ .joe_dropdown {
+ &__link {
+ a {
+ height: 60px;
+ line-height: 60px;
+ font-size: 15px;
+ padding-left: 8px;
+ padding-right: 3px;
+ transition: color 0.35s;
+ white-space: nowrap;
+ color: var(--main);
+ }
+ }
+ &__menu {
+ width: 110px;
+ text-align: center;
+ a {
+ display: block;
+ line-height: 34px;
+ height: 34px;
+ transition: color 0.35s, background 0.35s;
+ color: var(--minor);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 0 15px;
+ &:hover,
+ &.active {
+ color: var(--theme);
+ background: var(--classD);
+ }
+ }
+ }
+ }
+ }
+ &-search {
+ position: relative;
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ .input {
+ background: var(--classC);
+ width: 170px;
+ height: 34px;
+ border: 1px solid transparent;
+ padding: 0 18px;
+ color: var(--routine);
+ transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
+ border-radius: 17px 0 0 17px;
+ &:focus {
+ background: var(--background);
+ border-color: var(--theme);
+ padding-right: 28px;
+ ~ .icon {
+ transform: translate3d(0, -50%, 0) rotateY(180deg);
+ }
+ }
+ }
+ .submit {
+ position: relative;
+ z-index: 1;
+ height: 34px;
+ border: none;
+ background: var(--theme);
+ color: #fff;
+ border-radius: 0 17px 17px 0;
+ padding: 0 10px;
+ }
+ .icon {
+ position: absolute;
+ top: 50%;
+ left: 142px;
+ width: 28px;
+ height: 38px;
+ background: url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);
+ background-size: 100% 100%;
+ transition: transform 0.35s;
+ transform: translate3d(100%, -50%, 0) rotateY(180deg);
+ }
+ .result {
+ position: absolute;
+ z-index: 2;
+ top: 60px;
+ left: 0;
+ right: 0;
+ background: var(--background);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ border-radius: var(--radius-inner);
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
+ transform: translate3d(0, 15px, 0);
+ &.active {
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ visibility: visible;
+ }
+ .item {
+ height: 40px;
+ line-height: 40px;
+ border-bottom: 1px solid var(--classD);
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ padding: 0 8px;
+ transition: background 0.35s;
+ &:last-child {
+ border-bottom: none;
+ }
+ &:nth-child(1) .sort {
+ background: #fe2d46;
+ }
+ &:nth-child(2) .sort {
+ background: #f60;
+ }
+ &:nth-child(3) .sort {
+ background: #faa90e;
+ }
+ &:hover {
+ background: var(--classD);
+ }
+ .sort {
+ color: #fff;
+ background: #7f7f8c;
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+ border-radius: 50%;
+ text-align: center;
+ margin-right: 8px;
+ font-weight: 500;
+ }
+ .text {
+ flex: 1;
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--routine);
+ font-size: 12px;
+ }
+ .views {
+ color: var(--seat);
+ font-size: 12px;
+ margin-left: 3px;
+ }
+ }
+ }
+ }
+ }
+ &__below {
+ position: relative;
+ border-top: 1px solid var(--classC);
+ height: 45px;
+ &-class {
+ display: flex;
+ .item {
+ margin-right: 15px;
+ color: var(--minor);
+ height: 45px;
+ line-height: 45px;
+ transition: color 0.35s;
+ white-space: nowrap;
+ &:hover,
+ &.active {
+ color: var(--theme);
+ }
+ }
+ .joe_dropdown {
+ margin-right: 15px;
+ &__link {
+ .item {
+ margin-right: 3px;
+ }
+ }
+ &__menu {
+ width: 110px;
+ text-align: center;
+ a {
+ display: block;
+ height: 34px;
+ line-height: 34px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--minor);
+ transition: color 0.35s, background 0.35s;
+ &:hover,
+ &.active {
+ color: var(--theme);
+ background: var(--classD);
+ }
+ }
+ }
+ }
+ }
+ &-progress {
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ bottom: -3px;
+ height: 3px;
+ border-radius: 1.5px;
+ background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
+ transition: width 0.35s;
+ }
+ }
}
.joe_aside {
- padding: 15px 0;
- margin-left: 15px;
- &__item {
- position: relative;
- width: 250px;
- margin-bottom: 15px;
- border-radius: var(--radius-wrap);
- box-shadow: var(--box-shadow);
- overflow: hidden;
- &:last-child {
- position: sticky;
- margin-bottom: 0;
- }
- &-title {
- display: flex;
- align-items: center;
- border-bottom: 1px solid var(--classC);
- font-size: 16px;
- font-weight: 500;
- height: 45px;
- line-height: 45px;
- padding: 0 15px;
- color: var(--main);
- .icon {
- width: 18px;
- height: 18px;
- margin-right: 8px;
- fill: var(--main);
- }
- .line {
- width: 10px;
- height: 1px;
- background: #54b5db;
- margin-left: 12px;
- }
- }
- &-contain {
- position: relative;
- padding: 15px;
- }
- &.author {
- background: var(--background);
- padding: 45px 15px 15px;
- &::before {
- content: '';
- position: absolute;
- top: 90px;
- left: 0;
- width: 100%;
- height: 30px;
- z-index: 2;
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
- }
- &::after {
- display: none;
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 273px;
- background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
- background-size: cover;
- z-index: 3;
- pointer-events: none;
- }
- &:hover::after {
- display: block;
- }
- .image {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 120px;
- object-fit: cover;
- z-index: 1;
- }
- .user {
- position: relative;
- z-index: 4;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-bottom: 15px;
- .avatar {
- width: 75px;
- height: 75px;
- border-radius: 50%;
- overflow: hidden;
- margin-bottom: 10px;
- object-fit: cover;
- transition: transform 0.75s;
- background: var(--background);
- padding: 5px;
- &:hover {
- transform: rotate(360deg);
- }
- }
- .link {
- color: var(--theme);
- margin-bottom: 10px;
- font-size: 16px;
- font-weight: 500;
- &:hover {
- text-decoration: underline;
- }
- }
- .motto {
- color: var(--main);
- text-align: center;
- }
- }
- .count {
- width: 100%;
- padding-bottom: 15px;
- display: flex;
- align-items: center;
- border-bottom: 1px solid var(--classC);
- .item {
- min-width: 0;
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- color: var(--routine);
- font-size: 12px;
- &:first-child {
- border-right: 1px solid var(--classC);
- }
- .num {
- max-width: 70px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 500;
- font-size: 22px;
- color: var(--main);
- margin-bottom: 3px;
- text-shadow: var(--text_shadow);
- }
- }
- }
- .list {
- padding-top: 15px;
- .item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- line-height: 30px;
- .link {
- position: relative;
- color: var(--routine);
- max-width: 85%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 0;
- height: 1px;
- background: var(--theme);
- transition: all 0.35s;
- }
- &:hover {
- color: var(--theme);
- &::after {
- width: 100%;
- }
- }
- }
- .icon {
- fill: var(--routine);
- }
- }
- }
- }
- &.timelife {
- background: var(--background);
- .item {
- margin-bottom: 15px;
- &:last-child {
- margin-bottom: 0;
- }
- .title {
- font-size: 12px;
- color: var(--minor);
- margin-bottom: 5px;
- display: flex;
- align-items: center;
- .text {
- color: var(--theme);
- font-weight: 500;
- font-size: 14px;
- margin: 0 5px;
- }
- }
- .progress {
- display: flex;
- align-items: center;
- &-bar {
- height: 10px;
- border-radius: 5px;
- overflow: hidden;
- background: var(--classC);
- width: 0;
- min-width: 0;
- flex: 1;
- margin-right: 5px;
- &-inner {
- width: 0;
- height: 100%;
- border-radius: 5px;
- transition: width 0.35s;
- animation: progress 750ms linear infinite;
- &-0 {
- background: #bde6ff;
- background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
- background-size: 30px 30px;
- }
- &-1 {
- background: #ffd980;
- background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
- background-size: 30px 30px;
- }
- &-2 {
- background: #ffa9a9;
- background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
- background-size: 30px 30px;
- }
- &-3 {
- background: #67c23a;
- background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
- background-size: 30px 30px;
- }
- }
- }
- &-percentage {
- color: var(--minor);
- }
- }
- }
- }
- &.weather {
- background: var(--background);
- .joe_aside__item-contain {
- min-height: 300px;
- }
- }
- &.hot {
- background: var(--background);
- .empty {
- text-align: center;
- color: var(--routine);
- }
- .item {
- margin-bottom: 15px;
- &:last-child {
- margin-bottom: 0;
- }
- &:nth-child(1) .link .sort {
- background: #ff183e;
- }
- &:nth-child(2) .link .sort {
- background: #ff5c38;
- }
- &:nth-child(3) .link .sort {
- background: #ffb821;
- }
- .link {
- position: relative;
- display: block;
- border-radius: var(--radius-inner);
- overflow: hidden;
- &:hover .image {
- transform: scale(1.2);
- }
- .sort {
- position: absolute;
- top: 5px;
- right: -20px;
- background: #7f7f8c;
- color: #fff;
- width: 65px;
- text-align: center;
- font-size: 12px;
- transform: rotate(45deg);
- font-weight: 500;
- z-index: 1;
- font-style: normal;
- }
- .image {
- width: 100%;
- height: 130px;
- object-fit: cover;
- transition: transform 0.35s;
- }
- .describe {
- position: absolute;
- z-index: 1;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 10px;
- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
- font-size: 12px;
- color: var(--seat);
- h6 {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: #fff;
- line-height: 24px;
- font-size: 14px;
- }
- }
- }
- }
- }
- &.ranking {
- background: var(--background);
- .item {
- display: flex;
- align-items: center;
- line-height: 32px;
- overflow: hidden;
- &:nth-child(1) .sort {
- color: #fe2d46;
- }
- &:nth-child(2) .sort {
- color: #f60;
- }
- &:nth-child(3) .sort {
- color: #faa90e;
- }
- .sort {
- color: var(--minor);
- font-weight: 700;
- font-size: 18px;
- width: 18px;
- min-width: 18px;
- max-width: 18px;
- }
- .link {
- position: relative;
- color: var(--routine);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- &::after {
- position: absolute;
- content: '';
- bottom: 0;
- left: 0;
- width: 0;
- height: 1px;
- background: var(--theme);
- transition: width 0.5s;
- }
- &:hover {
- color: var(--theme);
- &::after {
- width: 100%;
- }
- }
- }
- }
- .error {
- text-align: center;
- color: var(--routine);
- }
- }
- &.newreply {
- background: var(--background);
- .empty {
- text-align: center;
- color: var(--routine);
- }
- .item {
- margin-bottom: 15px;
- border-bottom: 1px dashed var(--classC);
- padding-bottom: 15px;
- &:last-child {
- margin-bottom: 0;
- border-bottom-color: transparent;
- padding-bottom: 0;
- }
- .user {
- display: flex;
- margin-bottom: 12px;
- .avatar {
- width: 40px;
- height: 40px;
- min-width: 40px;
- min-height: 40px;
- margin-right: 12px;
- border-radius: 50%;
- border: 1px solid var(--classA);
- padding: 3px;
- }
- .info {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .author {
- color: var(--main);
- font-weight: 600;
- max-width: 150px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .date {
- font-size: 12px;
- color: var(--minor);
- }
- }
- }
- .reply {
- position: relative;
- background: var(--classD);
- border-radius: 6px;
- padding: 5px 10px;
- &::before {
- content: '';
- width: 0;
- height: 0;
- border-bottom: 6px solid var(--classD);
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- position: absolute;
- left: 15px;
- bottom: 100%;
- }
- .link {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- /*! autoprefixer: off */
- -webkit-box-orient: vertical;
- /* autoprefixer: on */
- overflow: hidden;
- text-overflow: ellipsis;
+ padding: 15px 0;
+ margin-left: 15px;
+ &__item {
+ position: relative;
+ width: 250px;
+ margin-bottom: 15px;
+ border-radius: var(--radius-wrap);
+ box-shadow: var(--box-shadow);
+ overflow: hidden;
+ &:last-child {
+ position: sticky;
+ margin-bottom: 0;
+ }
+ &-title {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--classC);
+ font-size: 16px;
+ font-weight: 500;
+ height: 45px;
+ line-height: 45px;
+ padding: 0 15px;
+ color: var(--main);
+ .icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 8px;
+ fill: var(--main);
+ }
+ .line {
+ width: 10px;
+ height: 1px;
+ background: #54b5db;
+ margin-left: 12px;
+ }
+ }
+ &-contain {
+ position: relative;
+ padding: 15px;
+ }
+ &.author {
+ background: var(--background);
+ padding: 45px 15px 15px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 90px;
+ left: 0;
+ width: 100%;
+ height: 30px;
+ z-index: 2;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
+ }
+ &::after {
+ display: none;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 273px;
+ background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
+ background-size: cover;
+ z-index: 3;
+ pointer-events: none;
+ }
+ &:hover::after {
+ display: block;
+ }
+ .image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 120px;
+ object-fit: cover;
+ z-index: 1;
+ }
+ .user {
+ position: relative;
+ z-index: 4;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-bottom: 15px;
+ .avatar {
+ width: 75px;
+ height: 75px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-bottom: 10px;
+ object-fit: cover;
+ transition: transform 0.75s;
+ background: var(--background);
+ padding: 5px;
+ &:hover {
+ transform: rotate(360deg);
+ }
+ }
+ .link {
+ color: var(--theme);
+ margin-bottom: 10px;
+ font-size: 16px;
+ font-weight: 500;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ .motto {
+ color: var(--main);
+ text-align: center;
+ }
+ }
+ .count {
+ width: 100%;
+ padding-bottom: 15px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--classC);
+ .item {
+ min-width: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: var(--routine);
+ font-size: 12px;
+ &:first-child {
+ border-right: 1px solid var(--classC);
+ }
+ .num {
+ max-width: 70px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 500;
+ font-size: 22px;
+ color: var(--main);
+ margin-bottom: 3px;
+ text-shadow: var(--text_shadow);
+ }
+ }
+ }
+ .list {
+ padding-top: 15px;
+ .item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ line-height: 30px;
+ .link {
+ position: relative;
+ color: var(--routine);
+ max-width: 85%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 1px;
+ background: var(--theme);
+ transition: all 0.35s;
+ }
+ &:hover {
+ color: var(--theme);
+ &::after {
+ width: 100%;
+ }
+ }
+ }
+ .icon {
+ fill: var(--routine);
+ }
+ }
+ }
+ }
+ &.timelife {
+ background: var(--background);
+ .item {
+ margin-bottom: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .title {
+ font-size: 12px;
+ color: var(--minor);
+ margin-bottom: 5px;
+ display: flex;
+ align-items: center;
+ .text {
+ color: var(--theme);
+ font-weight: 500;
+ font-size: 14px;
+ margin: 0 5px;
+ }
+ }
+ .progress {
+ display: flex;
+ align-items: center;
+ &-bar {
+ height: 10px;
+ border-radius: 5px;
+ overflow: hidden;
+ background: var(--classC);
+ width: 0;
+ min-width: 0;
+ flex: 1;
+ margin-right: 5px;
+ &-inner {
+ width: 0;
+ height: 100%;
+ border-radius: 5px;
+ transition: width 0.35s;
+ animation: progress 750ms linear infinite;
+ &-0 {
+ background: #bde6ff;
+ background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
+ background-size: 30px 30px;
+ }
+ &-1 {
+ background: #ffd980;
+ background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
+ background-size: 30px 30px;
+ }
+ &-2 {
+ background: #ffa9a9;
+ background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
+ background-size: 30px 30px;
+ }
+ &-3 {
+ background: #67c23a;
+ background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
+ background-size: 30px 30px;
+ }
+ }
+ }
+ &-percentage {
+ color: var(--minor);
+ }
+ }
+ }
+ }
+ &.weather {
+ background: var(--background);
+ .joe_aside__item-contain {
+ min-height: 300px;
+ }
+ }
+ &.hot {
+ background: var(--background);
+ .empty {
+ text-align: center;
+ color: var(--routine);
+ }
+ .item {
+ margin-bottom: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ &:nth-child(1) .link .sort {
+ background: #ff183e;
+ }
+ &:nth-child(2) .link .sort {
+ background: #ff5c38;
+ }
+ &:nth-child(3) .link .sort {
+ background: #ffb821;
+ }
+ .link {
+ position: relative;
+ display: block;
+ border-radius: var(--radius-inner);
+ overflow: hidden;
+ &:hover .image {
+ transform: scale(1.2);
+ }
+ .sort {
+ position: absolute;
+ top: 5px;
+ right: -20px;
+ background: #7f7f8c;
+ color: #fff;
+ width: 65px;
+ text-align: center;
+ font-size: 12px;
+ transform: rotate(45deg);
+ font-weight: 500;
+ z-index: 1;
+ font-style: normal;
+ }
+ .image {
+ width: 100%;
+ height: 130px;
+ object-fit: cover;
+ transition: transform 0.35s;
+ }
+ .describe {
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 10px;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
+ font-size: 12px;
+ color: var(--seat);
+ h6 {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #fff;
+ line-height: 24px;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+ }
+ &.ranking {
+ background: var(--background);
+ .item {
+ display: flex;
+ align-items: center;
+ line-height: 32px;
+ overflow: hidden;
+ &:nth-child(1) .sort {
+ color: #fe2d46;
+ }
+ &:nth-child(2) .sort {
+ color: #f60;
+ }
+ &:nth-child(3) .sort {
+ color: #faa90e;
+ }
+ .sort {
+ color: var(--minor);
+ font-weight: 700;
+ font-size: 18px;
+ width: 18px;
+ min-width: 18px;
+ max-width: 18px;
+ }
+ .link {
+ position: relative;
+ color: var(--routine);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ &::after {
+ position: absolute;
+ content: '';
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 1px;
+ background: var(--theme);
+ transition: width 0.5s;
+ }
+ &:hover {
+ color: var(--theme);
+ &::after {
+ width: 100%;
+ }
+ }
+ }
+ }
+ .error {
+ text-align: center;
+ color: var(--routine);
+ }
+ }
+ &.newreply {
+ background: var(--background);
+ .empty {
+ text-align: center;
+ color: var(--routine);
+ }
+ .item {
+ margin-bottom: 15px;
+ border-bottom: 1px dashed var(--classC);
+ padding-bottom: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom-color: transparent;
+ padding-bottom: 0;
+ }
+ .user {
+ display: flex;
+ margin-bottom: 12px;
+ .avatar {
+ width: 40px;
+ height: 40px;
+ min-width: 40px;
+ min-height: 40px;
+ margin-right: 12px;
+ border-radius: 50%;
+ border: 1px solid var(--classA);
+ padding: 3px;
+ }
+ .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .author {
+ color: var(--main);
+ font-weight: 600;
+ max-width: 150px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .date {
+ font-size: 12px;
+ color: var(--minor);
+ }
+ }
+ }
+ .reply {
+ position: relative;
+ background: var(--classD);
+ border-radius: 6px;
+ padding: 5px 10px;
+ &::before {
+ content: '';
+ width: 0;
+ height: 0;
+ border-bottom: 6px solid var(--classD);
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ position: absolute;
+ left: 15px;
+ bottom: 100%;
+ }
+ .link {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ /*! autoprefixer: off */
+ -webkit-box-orient: vertical;
+ /* autoprefixer: on */
+ overflow: hidden;
+ text-overflow: ellipsis;
- color: var(--minor);
- font-size: 13px;
- font-weight: 500;
- line-height: 24px;
- transition: all 0.35s;
- &:hover {
- color: var(--theme);
- }
- .owo_image {
- height: 18px;
- vertical-align: -5px;
- }
- }
- }
- }
- }
- }
+ color: var(--minor);
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 24px;
+ transition: all 0.35s;
+ &:hover {
+ color: var(--theme);
+ }
+ .owo_image {
+ height: 18px;
+ vertical-align: -5px;
+ }
+ }
+ }
+ }
+ }
+ }
}
.joe_list {
- &__item {
- display: flex;
- position: relative;
- width: 100%;
- padding: 15px 0;
- border-bottom: 1px solid var(--classC);
- &:last-child {
- border-bottom: none;
- }
- &:hover {
- .line {
- transform: scaleY(1);
- }
- .thumbnail {
- time {
- transform: translate3d(0, 0, 0);
- }
- }
- }
- .line {
- position: absolute;
- z-index: 1;
- top: 15px;
- left: -15px;
- width: 4px;
- height: 25px;
- border-radius: 2px;
- background: var(--theme);
- transform: scaleY(0);
- transition: transform 0.35s;
- }
- .thumbnail {
- position: relative;
- width: 210px;
- height: 140px;
- min-width: 210px;
- min-height: 140px;
- margin-right: 15px;
- overflow: hidden;
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: var(--radius-inner);
- transition: opacity 0.35s;
- &:hover {
- opacity: 0.85;
- }
- }
- time {
- position: absolute;
- z-index: 1;
- top: 5px;
- right: 5px;
- background: var(--theme);
- height: 20px;
- line-height: 20px;
- padding: 0 8px;
- color: #fff;
- font-size: 12px;
- border-radius: 10px;
- transition: transform 0.35s;
- transform: translate3d(120%, 0, 0);
- }
- svg {
- position: absolute;
- z-index: 1;
- top: 5px;
- left: 5px;
- width: 20px;
- height: 20px;
- fill: #fff;
- }
- }
- .information {
- display: flex;
- flex-direction: column;
- flex: 1;
- min-width: 0;
- .title {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- .badge {
- height: 20px;
- line-height: 20px;
- background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
- color: #fff;
- font-size: 12px;
- margin-right: 5px;
- border-radius: 2px;
- padding: 0 8px;
- white-space: nowrap;
- }
- h6 {
- color: var(--main);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 18px;
- line-height: 24px;
- transition: color 0.35s;
- &:hover {
- color: var(--theme);
- }
- }
- }
- .abstract {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- /*! autoprefixer: off */
- -webkit-box-orient: vertical;
- /* autoprefixer: on */
- overflow: hidden;
- text-overflow: ellipsis;
- color: var(--minor);
- transition: opacity 0.35s;
- word-break: break-all;
- line-height: 24px;
- &:hover {
- opacity: 0.8;
- }
- }
- .meta {
- display: flex;
- align-items: center;
- margin-top: auto;
- color: var(--minor);
- font-size: 13px;
- .items {
- display: flex;
- align-items: center;
- li {
- &::after {
- content: '/';
- color: #e1e1e1;
- padding: 0 5px;
- }
- &:last-child::after {
- display: none;
- }
- }
- }
- .last {
- margin-left: auto;
- display: flex;
- align-items: center;
- .icon {
- margin-right: 3px;
- }
- .link {
- color: var(--minor);
- &:hover {
- color: var(--theme);
- }
- }
- }
- }
- }
- }
- &__loading {
- .item {
- display: flex;
- position: relative;
- width: 100%;
- padding: 15px 0;
- border-bottom: 1px solid var(--classC);
- &:last-child {
- border-bottom: none;
- }
- .thumbnail {
- position: relative;
- width: 210px;
- height: 140px;
- min-width: 210px;
- min-height: 140px;
- margin-right: 15px;
- background: var(--classD);
- animation: list_thumbnail_loading 0.5s infinite alternate;
- border-radius: var(--radius-inner);
- }
- .information {
- flex: 1;
- min-width: 0;
- .title {
- height: 24px;
- border-radius: var(--radius-inner);
- background: var(--classD);
- animation: list_title_loading 0.75s infinite alternate;
- margin-bottom: 15px;
- }
- .abstract {
- p {
- height: 18px;
- border-radius: var(--radius-inner);
- background: var(--classD);
- margin-bottom: 5px;
- animation: list_abstract_loading 0.8s infinite alternate;
- }
- }
- }
- }
- }
+ &__item {
+ display: flex;
+ position: relative;
+ width: 100%;
+ padding: 15px 0;
+ border-bottom: 1px solid var(--classC);
+ &:last-child {
+ border-bottom: none;
+ }
+ &:hover {
+ .line {
+ transform: scaleY(1);
+ }
+ .thumbnail {
+ time {
+ transform: translate3d(0, 0, 0);
+ }
+ }
+ }
+ .line {
+ position: absolute;
+ z-index: 1;
+ top: 15px;
+ left: -15px;
+ width: 4px;
+ height: 25px;
+ border-radius: 2px;
+ background: var(--theme);
+ transform: scaleY(0);
+ transition: transform 0.35s;
+ }
+ .thumbnail {
+ position: relative;
+ width: 210px;
+ height: 140px;
+ min-width: 210px;
+ min-height: 140px;
+ margin-right: 15px;
+ overflow: hidden;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: var(--radius-inner);
+ transition: opacity 0.35s;
+ &:hover {
+ opacity: 0.85;
+ }
+ }
+ time {
+ position: absolute;
+ z-index: 1;
+ top: 5px;
+ right: 5px;
+ background: var(--theme);
+ height: 20px;
+ line-height: 20px;
+ padding: 0 8px;
+ color: #fff;
+ font-size: 12px;
+ border-radius: 10px;
+ transition: transform 0.35s;
+ transform: translate3d(120%, 0, 0);
+ }
+ svg {
+ position: absolute;
+ z-index: 1;
+ top: 5px;
+ left: 5px;
+ width: 20px;
+ height: 20px;
+ fill: #fff;
+ }
+ }
+ .information {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-width: 0;
+ .title {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ .badge {
+ height: 20px;
+ line-height: 20px;
+ background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
+ color: #fff;
+ font-size: 12px;
+ margin-right: 5px;
+ border-radius: 2px;
+ padding: 0 8px;
+ white-space: nowrap;
+ }
+ h6 {
+ color: var(--main);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 18px;
+ line-height: 24px;
+ transition: color 0.35s;
+ &:hover {
+ color: var(--theme);
+ }
+ }
+ }
+ .abstract {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ /*! autoprefixer: off */
+ -webkit-box-orient: vertical;
+ /* autoprefixer: on */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--minor);
+ transition: opacity 0.35s;
+ word-break: break-all;
+ line-height: 24px;
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ .meta {
+ display: flex;
+ align-items: center;
+ margin-top: auto;
+ color: var(--minor);
+ font-size: 13px;
+ .items {
+ display: flex;
+ align-items: center;
+ li {
+ &::after {
+ content: '/';
+ color: #e1e1e1;
+ padding: 0 5px;
+ }
+ &:last-child::after {
+ display: none;
+ }
+ }
+ }
+ .last {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ .icon {
+ margin-right: 3px;
+ }
+ .link {
+ color: var(--minor);
+ &:hover {
+ color: var(--theme);
+ }
+ }
+ }
+ }
+ }
+ }
+ &__loading {
+ .item {
+ display: flex;
+ position: relative;
+ width: 100%;
+ padding: 15px 0;
+ border-bottom: 1px solid var(--classC);
+ &:last-child {
+ border-bottom: none;
+ }
+ .thumbnail {
+ position: relative;
+ width: 210px;
+ height: 140px;
+ min-width: 210px;
+ min-height: 140px;
+ margin-right: 15px;
+ background: var(--classD);
+ animation: list_thumbnail_loading 0.5s infinite alternate;
+ border-radius: var(--radius-inner);
+ }
+ .information {
+ flex: 1;
+ min-width: 0;
+ .title {
+ height: 24px;
+ border-radius: var(--radius-inner);
+ background: var(--classD);
+ animation: list_title_loading 0.75s infinite alternate;
+ margin-bottom: 15px;
+ }
+ .abstract {
+ p {
+ height: 18px;
+ border-radius: var(--radius-inner);
+ background: var(--classD);
+ margin-bottom: 5px;
+ animation: list_abstract_loading 0.8s infinite alternate;
+ }
+ }
+ }
+ }
+ }
}
.joe_load {
- margin: 15px auto 0;
- width: 120px;
- height: 32px;
- line-height: 32px;
- text-align: center;
- border-radius: 16px;
- cursor: pointer;
- user-select: none;
- background: var(--background);
- color: var(--routine);
- transition: transform 0.25s;
- box-shadow: var(--box-shadow);
- &:active {
- transform: scale(0.75);
- }
+ margin: 15px auto 0;
+ width: 120px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ border-radius: 16px;
+ cursor: pointer;
+ user-select: none;
+ background: var(--background);
+ color: var(--routine);
+ transition: transform 0.25s;
+ box-shadow: var(--box-shadow);
+ &:active {
+ transform: scale(0.75);
+ }
}
.joe_detail {
- background: var(--background);
- border-radius: var(--radius-wrap);
- padding: 15px;
- box-shadow: var(--box-shadow);
- margin-bottom: 15px;
- &__category {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- .item {
- color: #fff;
- font-size: 12px;
- padding: 3px 8px;
- margin-right: 5px;
- border-radius: 2px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 120px;
- transition: transform 0.35s, opacity 0.35s;
- &:hover {
- opacity: 0.85;
- transform: translate3d(0, -3px, 0);
- }
- &:last-child {
- margin-right: 0;
- }
- &-0 {
- background: #0396ff;
- }
- &-1 {
- background: #ea5455;
- }
- &-2 {
- background: #7367f0;
- }
- &-3 {
- background: #28c76f;
- }
- &-4 {
- background: #9f44d3;
- }
- }
- .edit {
- color: var(--minor);
- margin-left: auto;
- &:hover {
- color: var(--theme);
- }
- }
- }
- &__title {
- font-size: 24px;
- color: var(--main);
- text-shadow: var(--text-shadow);
- text-align: center;
- margin-bottom: 15px;
- word-break: break-all;
- }
- &__count {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-bottom: 15px;
- border-bottom: 1px solid var(--classC);
- &::after {
- content: '';
- position: absolute;
- bottom: -1.5px;
- left: 0;
- width: 80px;
- height: 3px;
- border-radius: 1.5px;
- background: var(--theme);
- }
- &-information {
- display: flex;
- align-items: center;
- .avatar {
- width: 35px;
- height: 35px;
- border-radius: 50%;
- margin-right: 10px;
- border: 1px solid var(--classA);
- padding: 3px;
- object-fit: cover;
- }
- .meta {
- display: flex;
- flex-direction: column;
- height: 35px;
- justify-content: space-between;
- font-size: 12px;
- .author {
- .link {
- font-weight: 500;
- color: var(--theme);
- &:hover {
- text-decoration: underline;
- }
- }
- }
- .item {
- display: flex;
- align-items: center;
- color: var(--minor);
- line-height: 16px;
- .line {
- color: var(--seat);
- margin: 0 7px;
- vertical-align: middle;
- }
- }
- }
- }
- &-created {
- font-size: 32px;
- line-height: 42px;
- color: var(--routine);
- user-select: none;
- text-shadow: var(--text-shadow);
- font-family: consolas;
- }
- }
- &__article {
- padding-top: 15px;
- font-size: 15px;
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- color: var(--main);
- font-size: 18px;
- line-height: 24px;
- margin-bottom: 15px;
+ background: var(--background);
+ border-radius: var(--radius-wrap);
+ padding: 15px;
+ box-shadow: var(--box-shadow);
+ margin-bottom: 15px;
+ &__category {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ .item {
+ color: #fff;
+ font-size: 12px;
+ padding: 3px 8px;
+ margin-right: 5px;
+ border-radius: 2px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 120px;
+ transition: transform 0.35s, opacity 0.35s;
+ &:hover {
+ opacity: 0.85;
+ transform: translate3d(0, -3px, 0);
+ }
+ &:last-child {
+ margin-right: 0;
+ }
+ &-0 {
+ background: #0396ff;
+ }
+ &-1 {
+ background: #ea5455;
+ }
+ &-2 {
+ background: #7367f0;
+ }
+ &-3 {
+ background: #28c76f;
+ }
+ &-4 {
+ background: #9f44d3;
+ }
+ }
+ .edit {
+ color: var(--minor);
+ margin-left: auto;
+ &:hover {
+ color: var(--theme);
+ }
+ }
+ }
+ &__title {
+ font-size: 24px;
+ color: var(--main);
+ text-shadow: var(--text-shadow);
+ text-align: center;
+ margin-bottom: 15px;
+ word-break: break-all;
+ }
+ &__count {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--classC);
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -1.5px;
+ left: 0;
+ width: 80px;
+ height: 3px;
+ border-radius: 1.5px;
+ background: var(--theme);
+ }
+ &-information {
+ display: flex;
+ align-items: center;
+ .avatar {
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ margin-right: 10px;
+ border: 1px solid var(--classA);
+ padding: 3px;
+ object-fit: cover;
+ }
+ .meta {
+ display: flex;
+ flex-direction: column;
+ height: 35px;
+ justify-content: space-between;
+ font-size: 12px;
+ .author {
+ .link {
+ font-weight: 500;
+ color: var(--theme);
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ .item {
+ display: flex;
+ align-items: center;
+ color: var(--minor);
+ line-height: 16px;
+ .line {
+ color: var(--seat);
+ margin: 0 7px;
+ vertical-align: middle;
+ }
+ }
+ }
+ }
+ &-created {
+ font-size: 32px;
+ line-height: 42px;
+ color: var(--routine);
+ user-select: none;
+ text-shadow: var(--text-shadow);
+ font-family: consolas;
+ }
+ }
+ &__article {
+ padding-top: 15px;
+ font-size: 15px;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: var(--main);
+ font-size: 18px;
+ line-height: 24px;
+ margin-bottom: 15px;
+ position: relative;
+ }
+ h1 {
+ padding: 0 15px 0 20px;
+ &::before {
+ content: '#';
+ color: var(--theme);
+ font-weight: 700;
+ position: absolute;
+ top: 0;
+ left: 0;
+ line-height: 24px;
+ }
+ }
+ h2 {
+ padding: 0 15px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 10%;
+ bottom: 10%;
+ left: 0;
+ width: 4px;
+ border-radius: 2px;
+ background: var(--theme);
+ }
+ }
+ h3 {
+ padding: 0 15px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 8.5px;
+ left: 0;
+ height: 7px;
+ width: 7px;
+ border-radius: 50%;
+ background: var(--theme);
+ }
+ }
+ h4 {
+ &::before {
+ content: '「';
+ color: var(--theme);
+ font-weight: 600;
+ margin-right: 5px;
+ }
+ &::after {
+ content: '」';
+ color: var(--theme);
+ font-weight: 600;
+ margin-left: 5px;
+ }
+ }
+ h5 {
+ padding: 0 15px 0 28px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 20px;
+ height: 20px;
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
+ background-size: 100% 100%;
+ }
+ }
+ h6 {
+ padding: 0 15px 0 28px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 0;
+ width: 20px;
+ height: 20px;
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
+ background-size: 100% 100%;
+ }
+ }
+ hr {
+ border: none;
+ height: 1px;
+ background-color: var(--classB);
+ margin-bottom: 15px;
+ }
+ p {
+ color: var(--routine);
+ line-height: 26px;
+ letter-spacing: 1px;
+ word-break: break-all;
+ margin-bottom: 15px;
+ }
+ blockquote {
+ color: var(--routine);
+ line-height: 26px;
+ letter-spacing: 1px;
+ word-break: break-all;
+ margin-bottom: 15px;
+ background: #ecf8ff;
+ border-left: 5px solid #50bfff;
+ padding: 10px 15px;
+ border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
+ font-size: 14px;
+ p {
+ margin: 0;
+ }
+ }
+ a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
+ display: inline-block;
+ line-height: 26px;
+ color: var(--theme);
+ position: relative;
+ &:hover::after {
+ opacity: 1;
+ transform: scaleX(1);
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 1px;
+ bottom: -1px;
+ left: 0;
+ background: var(--theme);
+ transform: scaleX(0.25);
+ opacity: 0;
+ transition: transform 0.35s, opacity 0.35s;
+ }
+ }
+ code {
+ display: inline-block;
+ min-height: 26px;
+ line-height: 26px;
+ border-radius: var(--radius-inner);
+ font-size: 12px;
+ background: #fdf6ec;
+ padding: 0 8px;
+ color: #e6a23c;
+ vertical-align: top;
+ }
+ pre code {
+ display: unset;
+ vertical-align: unset;
+ min-height: unset;
+ line-height: unset;
+ border-radius: unset;
+ font-size: unset;
+ background: unset;
+ padding: unset;
+ color: unset;
+ }
+ pre[class*='language-'] {
+ position: relative;
+ padding: 15px;
+ padding-top: 35px;
+ margin: 0 0 15px;
+ border-radius: var(--radius-inner);
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 30px;
+ background: #2d2d2d;
+ }
+ &::before {
+ content: '';
+ position: absolute;
+ top: 9px;
+ left: 15px;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: #fc625d;
+ box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+ z-index: 1;
+ }
+ }
+ img {
+ display: block;
+ max-width: 100%;
+ border-radius: var(--radius-inner);
+ transition: transform 0.35s, box-shadow 0.35s;
+ cursor: zoom-in;
+ margin: 0 auto;
+ &:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+ }
+ }
+ ol,
+ ul {
+ color: var(--routine);
+ margin-bottom: 15px;
+ padding: 0 30px;
+ li {
+ line-height: 26px;
+ }
+ }
+ ol li {
+ list-style: decimal;
+ }
+ ul li {
+ list-style: disc;
+ &::marker {
+ color: var(--routine);
+ }
+ }
+ table {
+ width: 100%;
+ max-width: 100%;
+ table-layout: fixed;
+ color: var(--minor);
+ margin-bottom: 15px;
+ font-size: 13px;
+ border-top: 1px solid var(--classC);
+ border-left: 1px solid var(--classC);
+ td,
+ th {
+ padding: 8px;
+ border-bottom: 1px solid var(--classC);
+ border-right: 1px solid var(--classC);
+ }
+ thead {
+ th {
+ font-weight: 500;
+ background: var(--classC);
+ }
+ }
+ tbody {
+ tr {
+ transition: background 0.35s;
+ &:hover {
+ background: var(--classD);
+ }
+ }
+ }
+ }
+ span.block {
+ display: block;
+ }
+ &-hide {
+ background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
+ padding: 15px 0;
+ text-align: center;
+ position: relative;
+ user-select: none;
+ line-height: normal;
+ i {
+ position: relative;
+ font-style: normal;
+ cursor: pointer;
+ color: var(--theme);
+ }
+ }
+ &-player {
+ width: 100%;
+ height: 500px;
+ }
+ &-protected {
+ display: flex;
+ justify-content: center;
+ background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
+ padding: 20px 0;
+ margin-bottom: 15px;
+ .contain {
+ position: relative;
+ box-shadow: var(--box-shadow);
+ .icon {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 15px;
+ }
+ .password {
+ width: 300px;
+ height: 44px;
+ border: none;
+ border-radius: var(--radius-inner);
+ color: var(--routine);
+ padding-left: 50px;
+ background: var(--background);
+ }
+ .submit {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 44px;
+ line-height: 44px;
+ width: 44px;
+ cursor: pointer;
+ text-align: center;
+ font-size: 13px;
+ color: var(--main);
+ user-select: none;
+ }
+ }
+ }
+ &-checkbox {
+ -webkit-appearance: none;
+ position: relative;
+ border-radius: 2px;
+ width: 15px;
+ height: 15px;
+ border: 2px solid var(--theme);
+ vertical-align: -2px;
+ &:disabled {
+ cursor: not-allowed;
+ }
+ &:checked {
+ border: none;
+ background: var(--theme);
+ &::after {
+ content: '';
+ width: 3px;
+ height: 7px;
+ position: absolute;
+ top: 2px;
+ left: 5px;
+ border: 2px solid #fff;
+ border-top: 0;
+ border-left: 0;
+ transform: rotate(45deg);
+ }
+ }
+ }
+ &-card {
+ margin: 0 auto;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ border-radius: var(--radius-inner);
+ border: 1px solid var(--classC);
+ background: var(--background);
+ .title {
+ padding: 8px 10px;
+ border-bottom: 1px solid var(--classC);
+ color: var(--main);
+ user-select: none;
+ }
+ .content {
+ padding: 10px;
+ color: var(--routine);
+ }
+ }
+ &-message {
+ position: relative;
+ border-left-width: 4px;
+ border-left-style: solid;
+ padding: 10px 15px;
+ border-radius: 0 4px 4px 0;
+ &:hover {
+ .icon {
+ transform: rotate(360deg);
+ }
+ }
+ .icon {
+ position: absolute;
+ top: -9px;
+ left: -11px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ transition: transform 0.85s;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 10px;
+ height: 10px;
+ fill: #fff;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+ &.success {
+ border-left-color: #2bde3f;
+ background: #2bde3f20;
+ color: #2bde3f;
+ .icon {
+ background: #2bde3f;
+ &::before {
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
+ }
+ }
+ }
+ &.info {
+ border-left-color: #1d72f3;
+ background: #1d72f320;
+ color: #1d72f3;
+ .icon {
+ background: #1d72f3;
+ &::before {
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
+ }
+ }
+ }
+ &.warning {
+ border-left-color: #ffc007;
+ background: #ffc00720;
+ color: #ffc007;
+ .icon {
+ background: #ffc007;
+ &::before {
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
+ }
+ }
+ }
+ &.error {
+ border-left-color: #f56c6c;
+ background: #f56c6c20;
+ color: #f56c6c;
+ .icon {
+ background: #f56c6c;
+ &::before {
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
+ }
+ }
+ }
+ }
+ &-mtitle {
+ display: flex;
+ justify-content: center;
+ .text {
+ position: relative;
+ color: var(--minor);
+ padding: 0 15px;
+ transition: padding 0.35s;
+ &:hover {
+ padding: 0;
+ }
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ width: 20px;
+ height: 1px;
+ background: var(--theme);
+ }
+ &::before {
+ left: -35px;
+ }
+ &::after {
+ right: -35px;
+ }
+ }
+ }
+ &-anote {
position: relative;
- }
- h1 {
- padding: 0 15px 0 20px;
- &::before {
- content: '#';
- color: var(--theme);
- font-weight: 700;
- position: absolute;
- top: 0;
- left: 0;
- line-height: 24px;
- }
- }
- h2 {
- padding: 0 15px;
- &::before {
- content: '';
- position: absolute;
- top: 10%;
- bottom: 10%;
- left: 0;
- width: 4px;
- border-radius: 2px;
- background: var(--theme);
- }
- }
- h3 {
- padding: 0 15px;
- &::before {
- content: '';
- position: absolute;
- top: 8.5px;
- left: 0;
- height: 7px;
- width: 7px;
- border-radius: 50%;
- background: var(--theme);
- }
- }
- h4 {
- &::before {
- content: '「';
- color: var(--theme);
- font-weight: 600;
- margin-right: 5px;
- }
- &::after {
- content: '」';
- color: var(--theme);
- font-weight: 600;
- margin-left: 5px;
- }
- }
- h5 {
- padding: 0 15px 0 28px;
- &::before {
- content: '';
- position: absolute;
- top: 2px;
- left: 0;
- width: 20px;
- height: 20px;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
- background-size: 100% 100%;
- }
- }
- h6 {
- padding: 0 15px 0 28px;
- &::before {
- content: '';
- position: absolute;
- top: 2px;
- left: 0;
- width: 20px;
- height: 20px;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
- background-size: 100% 100%;
- }
- }
- hr {
- border: none;
- height: 1px;
- background-color: var(--classB);
- margin-bottom: 15px;
- }
- p {
- color: var(--routine);
- line-height: 26px;
- letter-spacing: 1px;
- word-break: break-all;
- margin-bottom: 15px;
- }
- blockquote {
- color: var(--routine);
- line-height: 26px;
- letter-spacing: 1px;
- word-break: break-all;
- margin-bottom: 15px;
- background: #ecf8ff;
- border-left: 5px solid #50bfff;
- padding: 10px 15px;
- border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
- font-size: 14px;
- p {
- margin: 0;
- }
- }
- a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
- display: inline-block;
- line-height: 26px;
- color: var(--theme);
- position: relative;
- &:hover::after {
- opacity: 1;
- transform: scaleX(1);
- }
- &::after {
- content: '';
- position: absolute;
- width: 100%;
- height: 1px;
- bottom: -1px;
- left: 0;
- background: var(--theme);
- transform: scaleX(0.25);
- opacity: 0;
- transition: transform 0.35s, opacity 0.35s;
- }
- }
- code {
- display: inline-block;
- min-height: 26px;
- line-height: 26px;
- border-radius: var(--radius-inner);
- font-size: 12px;
- background: #fdf6ec;
- padding: 0 8px;
- color: #e6a23c;
- vertical-align: top;
- }
- pre code {
- display: unset;
- vertical-align: unset;
- min-height: unset;
- line-height: unset;
- border-radius: unset;
- font-size: unset;
- background: unset;
- padding: unset;
- color: unset;
- }
- pre[class*='language-'] {
- position: relative;
- padding: 15px;
- padding-top: 35px;
- margin: 0 0 15px;
- border-radius: var(--radius-inner);
- &::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 30px;
- background: #2d2d2d;
- }
- &::before {
- content: '';
- position: absolute;
- top: 9px;
- left: 15px;
- width: 12px;
- height: 12px;
- border-radius: 50%;
- background: #fc625d;
- box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
- z-index: 1;
- }
- }
- img {
- display: block;
- max-width: 100%;
- border-radius: var(--radius-inner);
- transition: transform 0.35s, box-shadow 0.35s;
- cursor: zoom-in;
- margin: 0 auto;
- &:hover {
- transform: translateY(-5px);
- box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
- }
- }
- ol,
- ul {
- color: var(--routine);
- margin-bottom: 15px;
- padding: 0 30px;
- li {
- line-height: 26px;
- }
- }
- ol li {
- list-style: decimal;
- }
- ul li {
- list-style: disc;
- &::marker {
- color: var(--routine);
- }
- }
- table {
- width: 100%;
- max-width: 100%;
- table-layout: fixed;
- color: var(--minor);
- margin-bottom: 15px;
- font-size: 13px;
- border-top: 1px solid var(--classC);
- border-left: 1px solid var(--classC);
- td,
- th {
- padding: 8px;
- border-bottom: 1px solid var(--classC);
- border-right: 1px solid var(--classC);
- }
- thead {
- th {
- font-weight: 500;
- background: var(--classC);
- }
- }
- tbody {
- tr {
- transition: background 0.35s;
- &:hover {
- background: var(--classD);
- }
- }
- }
- }
- span.block {
- display: block;
- }
- &-hide {
- background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
- padding: 15px 0;
- text-align: center;
- position: relative;
- user-select: none;
- line-height: normal;
- i {
- position: relative;
- font-style: normal;
- cursor: pointer;
- color: var(--theme);
- }
- }
- &-player {
- width: 100%;
- height: 500px;
- }
- &-protected {
- display: flex;
- justify-content: center;
- background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
- padding: 20px 0;
- margin-bottom: 15px;
- .contain {
- position: relative;
- box-shadow: var(--box-shadow);
- .icon {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: 15px;
- }
- .password {
- width: 300px;
- height: 44px;
- border: none;
- border-radius: var(--radius-inner);
- color: var(--routine);
- padding-left: 50px;
- background: var(--background);
- }
- .submit {
- position: absolute;
- top: 0;
- right: 0;
- height: 44px;
- line-height: 44px;
- width: 44px;
- cursor: pointer;
- text-align: center;
- font-size: 13px;
- color: var(--main);
- user-select: none;
- }
- }
- }
- &-checkbox {
- -webkit-appearance: none;
- position: relative;
- border-radius: 2px;
- width: 15px;
- height: 15px;
- border: 2px solid var(--theme);
- vertical-align: -2px;
- &:disabled {
- cursor: not-allowed;
- }
- &:checked {
- border: none;
- background: var(--theme);
- &::after {
- content: '';
- width: 3px;
- height: 7px;
- position: absolute;
- top: 2px;
- left: 5px;
- border: 2px solid #fff;
- border-top: 0;
- border-left: 0;
- transform: rotate(45deg);
- }
- }
- }
- &-card {
- margin: 0 auto;
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
- border-radius: var(--radius-inner);
- border: 1px solid var(--classC);
- background: var(--background);
- .title {
- padding: 8px 10px;
- border-bottom: 1px solid var(--classC);
- color: var(--main);
- user-select: none;
- }
- .content {
- padding: 10px;
- color: var(--routine);
- }
- }
- &-message {
- position: relative;
- border-left-width: 4px;
- border-left-style: solid;
- padding: 10px 15px;
- border-radius: 0 4px 4px 0;
- &:hover {
- .icon {
- transform: rotate(360deg);
- }
- }
- .icon {
- position: absolute;
- top: -9px;
- left: -11px;
- width: 18px;
- height: 18px;
- border-radius: 50%;
- transition: transform 0.85s;
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 10px;
- height: 10px;
- fill: #fff;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- }
- &.success {
- border-left-color: #2bde3f;
- background: #2bde3f20;
- color: #2bde3f;
- .icon {
- background: #2bde3f;
- &::before {
- background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
- }
- }
- }
- &.info {
- border-left-color: #1d72f3;
- background: #1d72f320;
- color: #1d72f3;
- .icon {
- background: #1d72f3;
- &::before {
- background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
- }
- }
- }
- &.warning {
- border-left-color: #ffc007;
- background: #ffc00720;
- color: #ffc007;
- .icon {
- background: #ffc007;
- &::before {
- background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
- }
- }
- }
- &.error {
- border-left-color: #f56c6c;
- background: #f56c6c20;
- color: #f56c6c;
- .icon {
- background: #f56c6c;
- &::before {
- background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
- }
- }
- }
- }
- &-mtitle {
- display: flex;
- justify-content: center;
- .text {
- position: relative;
- color: var(--minor);
- padding: 0 15px;
- transition: padding 0.35s;
- &:hover {
- padding: 0;
- }
- &::before,
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- width: 20px;
- height: 1px;
- background: var(--theme);
- }
- &::before {
- left: -35px;
- }
- &::after {
- right: -35px;
- }
- }
- }
- &-anote {
- display: inline-block;
- color: #fff;
- height: 35px;
- line-height: 35px;
- transition: transform 0.35s, box-shadow 0.35s;
- &:hover {
- transform: translateY(-3px);
- box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
- }
- .icon {
- display: inline-block;
- vertical-align: top;
- width: 35px;
- height: 35px;
- text-align: center;
- background: rgba(0, 0, 0, 0.2);
- .fa {
- color: #fff;
- font-size: 15px;
- }
- }
- .content {
- display: inline-block;
- vertical-align: top;
- padding: 0 12px;
- max-width: 500px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- &.secondary {
- background: #34495e;
- }
- &.success {
- background: #27ae60;
- }
- &.warning {
- background: #f39c12;
- }
- &.error {
- background: #e74c3c;
- }
- &.info {
- background: #3498db;
- }
- }
- &-abtn {
- display: inline-block;
- color: #fff;
- height: 35px;
- line-height: 35px;
- padding: 0 15px;
- transform-origin: 100% 0;
- transform: translateZ(0);
- &:hover {
- animation-name: wobble-bottom;
- animation-duration: 1s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: 1;
- }
- .icon {
- display: inline-block;
- vertical-align: top;
- text-align: center;
- .fa {
- color: #fff;
- font-size: 14px;
- }
- [class^='fa-'] {
- margin-right: 8px;
- }
- }
- .content {
- display: inline-block;
- vertical-align: top;
- max-width: 500px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- &__agree {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 15px;
- .agree {
- text-align: center;
- font-size: 12px;
- color: var(--minor);
- user-select: none;
- .icon {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 42px;
- height: 42px;
- border-radius: 50%;
- background: #f56c6c;
- cursor: pointer;
- margin-bottom: 8px;
- &.active {
- animation: box_shadow 1s;
- box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
- }
- svg {
- position: absolute;
- width: 28px;
- height: 28px;
- transform: scale(0);
- opacity: 0;
- transition: transform 0.85s, opacity 0.85s;
- &.active {
- transform: scale(1);
- opacity: 1;
- }
- }
- }
- }
- }
- &__copyright {
- padding-top: 15px;
- border-top: 1px solid var(--classC);
- .content {
- background: var(--classD);
- padding: 15px;
- border-radius: var(--radius-inner);
- .item {
- display: flex;
- align-items: center;
- color: var(--minor);
- white-space: nowrap;
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
- .icon {
- width: 20px;
- height: 20px;
- min-width: 20px;
- min-height: 20px;
- margin-right: 5px;
- }
- .link {
- color: var(--minor);
- &:hover {
- color: var(--theme);
- }
- }
- .text {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- }
- &__friends {
- display: flex;
- flex-wrap: wrap;
- margin: 0 -7.5px;
- margin-bottom: 15px;
- &-item {
- width: 25%;
- padding: 7.5px;
- .contain {
- display: block;
- border-radius: var(--radius-inner);
- overflow: hidden;
- padding: 15px;
- color: #fff;
- word-break: break-all;
- transition: transform 0.35s, box-shadow 0.35s;
- &:hover {
- transform: translateY(-5px) scale(1.025);
- box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
- }
- .title {
- position: relative;
- &::after {
- content: '';
- position: absolute;
- bottom: -5px;
- left: 0;
- width: 100%;
- height: 1px;
- background: #fff;
- }
- }
- .content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 15px;
- .desc {
- margin-right: 10px;
- }
- .avatar {
- width: 40px;
- height: 40px;
- min-width: 40px;
- min-height: 40px;
- border-radius: 50%;
- object-fit: cover;
- }
- }
- }
- }
- }
+ display: inline-block;
+ color: #fff;
+ height: 35px;
+ line-height: 35px;
+ transform: translateZ(0);
+ transition: transform 0.35s;
+ &:hover {
+ transform: translateY(-3px);
+ }
+ .icon {
+ display: inline-block;
+ vertical-align: top;
+ width: 35px;
+ height: 35px;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.2);
+ .fa {
+ color: #fff;
+ font-size: 15px;
+ }
+ }
+ .content {
+ display: inline-block;
+ vertical-align: top;
+ padding: 0 12px;
+ max-width: 500px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &.secondary {
+ background: #34495e;
+ }
+ &.success {
+ background: #27ae60;
+ }
+ &.warning {
+ background: #f39c12;
+ }
+ &.error {
+ background: #e74c3c;
+ }
+ &.info {
+ background: #3498db;
+ }
+ }
+ &-abtn {
+ display: inline-block;
+ color: #fff;
+ height: 35px;
+ line-height: 35px;
+ padding: 0 15px;
+ transform-origin: 100% 0;
+ transform: translateZ(0);
+ &:hover {
+ animation-name: wobble-bottom;
+ animation-duration: 1s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: 1;
+ }
+ .icon {
+ display: inline-block;
+ vertical-align: top;
+ text-align: center;
+ .fa {
+ color: #fff;
+ font-size: 14px;
+ }
+ [class^='fa-'] {
+ margin-right: 8px;
+ }
+ }
+ .content {
+ display: inline-block;
+ vertical-align: top;
+ max-width: 500px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ &__agree {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 15px;
+ .agree {
+ text-align: center;
+ font-size: 12px;
+ color: var(--minor);
+ user-select: none;
+ .icon {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ background: #f56c6c;
+ cursor: pointer;
+ margin-bottom: 8px;
+ &.active {
+ animation: box_shadow 1s;
+ box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+ }
+ svg {
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ transform: scale(0);
+ opacity: 0;
+ transition: transform 0.85s, opacity 0.85s;
+ &.active {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+ &__copyright {
+ padding-top: 15px;
+ border-top: 1px solid var(--classC);
+ .content {
+ background: var(--classD);
+ padding: 15px;
+ border-radius: var(--radius-inner);
+ .item {
+ display: flex;
+ align-items: center;
+ color: var(--minor);
+ white-space: nowrap;
+ margin-bottom: 10px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .icon {
+ width: 20px;
+ height: 20px;
+ min-width: 20px;
+ min-height: 20px;
+ margin-right: 5px;
+ }
+ .link {
+ color: var(--minor);
+ &:hover {
+ color: var(--theme);
+ }
+ }
+ .text {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ }
+ &__friends {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+ margin-bottom: 15px;
+ &-item {
+ .contain {
+ display: block;
+ border-radius: var(--radius-inner);
+ overflow: hidden;
+ padding: 15px;
+ color: #fff;
+ word-break: break-all;
+ transition: transform 0.35s, box-shadow 0.35s;
+ &:hover {
+ transform: translateY(-5px) scale(1.025);
+ box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+ }
+ .title {
+ position: relative;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: #fff;
+ }
+ }
+ .content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 15px;
+ .desc {
+ margin-right: 10px;
+ }
+ .avatar {
+ width: 40px;
+ height: 40px;
+ min-width: 40px;
+ min-height: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+ }
+ }
+ }
+ }
+ }
}
.joe_footer {
- border-top: 1px solid var(--classB);
- color: var(--minor);
- .joe_container {
- display: flex;
- align-items: center;
- justify-content: space-between;
- min-height: 65px;
- a {
- color: var(--minor);
- transition: all 0.35s;
- &:hover {
- color: var(--theme);
- }
- }
- }
+ border-top: 1px solid var(--classB);
+ color: var(--minor);
+ .joe_container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 65px;
+ a {
+ color: var(--minor);
+ transition: all 0.35s;
+ &:hover {
+ color: var(--theme);
+ }
+ }
+ }
}
.joe_pagination {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding-top: 15px;
- li {
- margin-left: 5px;
- &.active a {
- background: var(--theme);
- color: #fff;
- font-weight: 500;
- }
- a {
- display: flex;
- align-items: center;
- height: 32px;
- color: var(--main);
- padding: 0 15px;
- background: var(--background);
- border-radius: 2px;
- transition: background 0.35s, color 0.35s;
- user-select: none;
- &:hover {
- background: var(--theme);
- color: #fff;
- .icon {
- fill: #fff;
- }
- }
- .icon {
- width: 12px;
- height: 12px;
- fill: var(--routine);
- transition: fill 0.35s;
- &-next {
- transform: rotate(180deg);
- }
- }
- }
- }
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding-top: 15px;
+ li {
+ margin-left: 5px;
+ &.active a {
+ background: var(--theme);
+ color: #fff;
+ font-weight: 500;
+ }
+ a {
+ display: flex;
+ align-items: center;
+ height: 32px;
+ color: var(--main);
+ padding: 0 15px;
+ background: var(--background);
+ border-radius: 2px;
+ transition: background 0.35s, color 0.35s;
+ user-select: none;
+ &:hover {
+ background: var(--theme);
+ color: #fff;
+ .icon {
+ fill: #fff;
+ }
+ }
+ .icon {
+ width: 12px;
+ height: 12px;
+ fill: var(--routine);
+ transition: fill 0.35s;
+ &-next {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
}
.joe_action {
- position: fixed;
- bottom: 90px;
- right: 30px;
- z-index: 333;
- &_item {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- background: var(--background);
- border-radius: 50%;
- cursor: pointer;
- margin-top: 15px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
- svg {
- position: absolute;
- width: 25px;
- height: 25px;
- fill: var(--theme);
- }
- &.scroll {
- visibility: hidden;
- transform: scale(0);
- transition: visibility 0.35s, transform 0.35s;
- &.active {
- visibility: visible;
- transform: scale(1);
- }
- }
- &.mode {
- svg {
- transform: scale(0);
- opacity: 0;
- transition: transform 0.85s, opacity 0.85s;
- &.active {
- transform: scale(1);
- opacity: 1;
- }
- }
- }
- }
+ position: fixed;
+ bottom: 90px;
+ right: 30px;
+ z-index: 333;
+ &_item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ background: var(--background);
+ border-radius: 50%;
+ cursor: pointer;
+ margin-top: 15px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+ svg {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ fill: var(--theme);
+ }
+ &.scroll {
+ visibility: hidden;
+ transform: scale(0);
+ transition: visibility 0.35s, transform 0.35s;
+ &.active {
+ visibility: visible;
+ transform: scale(1);
+ }
+ }
+ &.mode {
+ svg {
+ transform: scale(0);
+ opacity: 0;
+ transition: transform 0.85s, opacity 0.85s;
+ &.active {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+ }
+ }
}
.joe_comment {
- background: var(--background);
- border-radius: var(--radius-wrap);
- box-shadow: var(--box-shadow);
- padding: 15px;
- &__title {
- font-weight: 500;
- text-align: center;
- font-size: 24px;
- color: var(--main);
- text-shadow: var(--text-shadow);
- border-bottom: 1px solid var(--classC);
- margin-bottom: 15px;
- padding-bottom: 15px;
- }
- &__close {
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--routine);
- &-icon {
- fill: var(--routine);
- margin-right: 5px;
- }
- }
- &__respond {
- &-type {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- .item {
- background: var(--classD);
- padding: 0 15px;
- height: 32px;
- color: var(--main);
- border: none;
- transition: color 0.35s, background 0.35s;
- &:first-child {
- border-top-left-radius: var(--radius-inner);
- }
- &:last-child {
- border-top-right-radius: var(--radius-inner);
- }
- &.active {
- color: #fff;
- background: var(--theme);
- }
- }
- }
- &-form {
- border-radius: 6px 0 6px 6px;
- background: var(--classD);
- .head {
- display: flex;
- align-items: center;
- border-bottom: 1px solid var(--classA);
- .list {
- flex: 1;
- input {
- width: 100%;
- border: none;
- background: transparent;
- padding: 0 15px;
- height: 40px;
- color: var(--routine);
- }
- &:nth-child(2) {
- position: relative;
- &::after,
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- width: 1px;
- height: 15px;
- background: var(--classA);
- }
- &::before {
- left: 0;
- }
- &::after {
- right: 0;
- }
- }
- }
- }
- .body {
- padding: 15px;
- .text {
- width: 100%;
- height: 200px;
- border: none;
- resize: none;
- vertical-align: middle;
- color: var(--routine);
- background: transparent;
- font-size: 15px;
- }
- .draw {
- position: relative;
- width: 100%;
- .line {
- display: flex;
- align-items: center;
- position: absolute;
- top: 10px;
- left: 10px;
- user-select: none;
- li {
- cursor: pointer;
- margin-right: 10px;
- color: var(--main);
- transition: color 0.35s;
- &.active {
- color: var(--theme);
- }
- }
- }
- .color {
- display: flex;
- align-items: center;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%);
- li {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- margin: 0 5px;
- cursor: pointer;
- transition: box-shadow 0.35s;
- &.active {
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
- }
- &:nth-child(1) {
- background: #303133;
- }
- &:nth-child(2) {
- background: #67c23a;
- }
- &:nth-child(3) {
- background: #e6a23c;
- }
- &:nth-child(4) {
- background: #f56c6c;
- }
- }
- }
- .icon {
- position: absolute;
- right: 10px;
- cursor: pointer;
- fill: var(--minor);
- user-select: none;
- &-undo {
- top: 10px;
- }
- &-animate {
- bottom: 10px;
- }
- }
- canvas {
- background: var(--background);
- border-radius: var(--radius-inner);
- }
- }
- }
- .foot {
- position: relative;
- display: flex;
- justify-content: space-between;
- padding: 0 15px 15px;
- .submit {
- white-space: nowrap;
- .cancle {
- display: none;
- color: var(--main);
- cursor: pointer;
- margin-right: 10px;
- transition: color 0.35s;
- &:hover {
- color: var(--theme);
- }
- }
- button {
- border-radius: 3px;
- height: 32px;
- padding: 0 15px;
- border: none;
- background: var(--theme);
- color: #fff;
- font-size: 14px;
- &:hover {
- animation: 5s ease-in-out 0s infinite normal none running shake;
- }
- }
- }
- }
- }
- }
- .comment-list {
- padding-top: 15px;
- &__item {
- &-contain {
- .term {
- display: flex;
- margin-bottom: 15px;
- .avatar {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- margin-right: 15px;
- padding: 3px;
- border: 1px solid var(--classD);
- object-fit: cover;
- }
- .content {
- min-width: 0;
- flex: 1;
- border-bottom: 1px solid var(--classC);
- padding-bottom: 15px;
- .user {
- display: flex;
- align-items: center;
- margin-bottom: 8px;
- line-height: 20px;
- color: var(--main);
- .author {
- margin-right: 10px;
- a {
- color: #409eff;
- }
- }
- .owner {
- background: var(--theme);
- color: #fff;
- padding: 0 5px;
- border-radius: 2px;
- font-style: normal;
- }
- .agent {
- margin-left: auto;
- font-size: 12px;
- color: var(--minor);
- }
- .waiting {
- color: #e6a23c;
- font-style: normal;
- }
- }
- .substance {
- width: 100%;
- background: var(--classD);
- padding: 12px 15px;
- border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
- color: var(--main);
- margin-bottom: 8px;
- word-break: break-all;
- line-height: 24px;
- .parent {
- color: #388bff;
- margin-bottom: 5px;
- user-select: none;
- font-weight: 500;
- }
- .owo_image {
- height: 22px;
- }
- .draw_image {
- max-width: 100%;
- }
- }
- .handle {
- display: flex;
- align-items: center;
- color: var(--minor);
- .date {
- margin-right: 10px;
- }
- .reply {
- display: flex;
- align-items: center;
- color: var(--main);
- font-size: 13px;
- cursor: pointer;
- transition: color 0.35s;
- .icon {
- margin-right: 5px;
- fill: var(--main);
- transition: fill 0.35s;
- }
- &:hover {
- color: var(--theme);
- .icon {
- fill: var(--theme);
- }
- }
- }
- }
- }
- }
- }
- &-children {
- padding-left: 63px;
- .comment-list__item-children {
- padding-left: 0;
- }
- }
- .joe_comment__respond {
- margin-left: 63px;
- margin-bottom: 15px;
- animation: showComment 0.5s;
- }
- }
- .comment-list {
- padding-top: 0;
- }
- }
- .joe_pagination {
- padding-top: 0;
- }
+ background: var(--background);
+ border-radius: var(--radius-wrap);
+ box-shadow: var(--box-shadow);
+ padding: 15px;
+ &__title {
+ font-weight: 500;
+ text-align: center;
+ font-size: 24px;
+ color: var(--main);
+ text-shadow: var(--text-shadow);
+ border-bottom: 1px solid var(--classC);
+ margin-bottom: 15px;
+ padding-bottom: 15px;
+ }
+ &__close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--routine);
+ &-icon {
+ fill: var(--routine);
+ margin-right: 5px;
+ }
+ }
+ &__respond {
+ &-type {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .item {
+ background: var(--classD);
+ padding: 0 15px;
+ height: 32px;
+ color: var(--main);
+ border: none;
+ transition: color 0.35s, background 0.35s;
+ &:first-child {
+ border-top-left-radius: var(--radius-inner);
+ }
+ &:last-child {
+ border-top-right-radius: var(--radius-inner);
+ }
+ &.active {
+ color: #fff;
+ background: var(--theme);
+ }
+ }
+ }
+ &-form {
+ border-radius: 6px 0 6px 6px;
+ background: var(--classD);
+ .head {
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid var(--classA);
+ .list {
+ flex: 1;
+ input {
+ width: 100%;
+ border: none;
+ background: transparent;
+ padding: 0 15px;
+ height: 40px;
+ color: var(--routine);
+ }
+ &:nth-child(2) {
+ position: relative;
+ &::after,
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 15px;
+ background: var(--classA);
+ }
+ &::before {
+ left: 0;
+ }
+ &::after {
+ right: 0;
+ }
+ }
+ }
+ }
+ .body {
+ padding: 15px;
+ .text {
+ width: 100%;
+ height: 200px;
+ border: none;
+ resize: none;
+ vertical-align: middle;
+ color: var(--routine);
+ background: transparent;
+ font-size: 15px;
+ }
+ .draw {
+ position: relative;
+ width: 100%;
+ .line {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ user-select: none;
+ li {
+ cursor: pointer;
+ margin-right: 10px;
+ color: var(--main);
+ transition: color 0.35s;
+ &.active {
+ color: var(--theme);
+ }
+ }
+ }
+ .color {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ transform: translate(-50%);
+ li {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ margin: 0 5px;
+ cursor: pointer;
+ transition: box-shadow 0.35s;
+ &.active {
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
+ }
+ &:nth-child(1) {
+ background: #303133;
+ }
+ &:nth-child(2) {
+ background: #67c23a;
+ }
+ &:nth-child(3) {
+ background: #e6a23c;
+ }
+ &:nth-child(4) {
+ background: #f56c6c;
+ }
+ }
+ }
+ .icon {
+ position: absolute;
+ right: 10px;
+ cursor: pointer;
+ fill: var(--minor);
+ user-select: none;
+ &-undo {
+ top: 10px;
+ }
+ &-animate {
+ bottom: 10px;
+ }
+ }
+ canvas {
+ background: var(--background);
+ border-radius: var(--radius-inner);
+ }
+ }
+ }
+ .foot {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 15px 15px;
+ .submit {
+ white-space: nowrap;
+ .cancle {
+ display: none;
+ color: var(--main);
+ cursor: pointer;
+ margin-right: 10px;
+ transition: color 0.35s;
+ &:hover {
+ color: var(--theme);
+ }
+ }
+ button {
+ border-radius: 3px;
+ height: 32px;
+ padding: 0 15px;
+ border: none;
+ background: var(--theme);
+ color: #fff;
+ font-size: 14px;
+ &:hover {
+ animation: 5s ease-in-out 0s infinite normal none running shake;
+ }
+ }
+ }
+ }
+ }
+ }
+ .comment-list {
+ padding-top: 15px;
+ &__item {
+ &-contain {
+ .term {
+ display: flex;
+ margin-bottom: 15px;
+ .avatar {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ margin-right: 15px;
+ padding: 3px;
+ border: 1px solid var(--classD);
+ object-fit: cover;
+ }
+ .content {
+ min-width: 0;
+ flex: 1;
+ border-bottom: 1px solid var(--classC);
+ padding-bottom: 15px;
+ .user {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ line-height: 20px;
+ color: var(--main);
+ .author {
+ margin-right: 10px;
+ a {
+ color: #409eff;
+ }
+ }
+ .owner {
+ background: var(--theme);
+ color: #fff;
+ padding: 0 5px;
+ border-radius: 2px;
+ font-style: normal;
+ }
+ .agent {
+ margin-left: auto;
+ font-size: 12px;
+ color: var(--minor);
+ }
+ .waiting {
+ color: #e6a23c;
+ font-style: normal;
+ }
+ }
+ .substance {
+ width: 100%;
+ background: var(--classD);
+ padding: 12px 15px;
+ border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
+ color: var(--main);
+ margin-bottom: 8px;
+ word-break: break-all;
+ line-height: 24px;
+ .parent {
+ color: #388bff;
+ margin-bottom: 5px;
+ user-select: none;
+ font-weight: 500;
+ }
+ .owo_image {
+ height: 22px;
+ }
+ .draw_image {
+ max-width: 100%;
+ }
+ }
+ .handle {
+ display: flex;
+ align-items: center;
+ color: var(--minor);
+ .date {
+ margin-right: 10px;
+ }
+ .reply {
+ display: flex;
+ align-items: center;
+ color: var(--main);
+ font-size: 13px;
+ cursor: pointer;
+ transition: color 0.35s;
+ .icon {
+ margin-right: 5px;
+ fill: var(--main);
+ transition: fill 0.35s;
+ }
+ &:hover {
+ color: var(--theme);
+ .icon {
+ fill: var(--theme);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &-children {
+ padding-left: 63px;
+ .comment-list__item-children {
+ padding-left: 0;
+ }
+ }
+ .joe_comment__respond {
+ margin-left: 63px;
+ margin-bottom: 15px;
+ animation: showComment 0.5s;
+ }
+ }
+ .comment-list {
+ padding-top: 0;
+ }
+ }
+ .joe_pagination {
+ padding-top: 0;
+ }
}
.profile-color-modes-illu-frame {
- opacity: 0;
+ opacity: 0;
}
.profile-color-modes-illu-red {
- stroke: #da3633;
+ stroke: #da3633;
}
.profile-color-modes-illu-orange {
- stroke: #f0883e;
+ stroke: #f0883e;
}
.profile-color-modes-illu-purple {
- stroke: #8957e5;
+ stroke: #8957e5;
}
.profile-color-modes-illu-green {
- stroke: #3fb950;
+ stroke: #3fb950;
}
.profile-color-modes-illu-blue {
- stroke: #388bfd;
+ stroke: #388bfd;
}
.profile-color-modes-illu-group {
- animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
+ animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
}
.profile-color-modes-illu-frame {
- animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
+ animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
}
.profile-color-modes-illu-frame:first-child {
- opacity: 1;
- animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
+ opacity: 1;
+ animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
}
.profile-color-modes-illu-frame:nth-child(8) {
- animation: profile-color-modes-illu-anim-frame-show 0s forwards;
+ animation: profile-color-modes-illu-anim-frame-show 0s forwards;
}
.profile-color-modes-illu-red {
- animation-delay: 0.4s;
- animation-duration: 0.1s;
+ animation-delay: 0.4s;
+ animation-duration: 0.1s;
}
.profile-color-modes-illu-orange {
- animation-delay: 0.5s;
- animation-duration: 0.1s;
+ animation-delay: 0.5s;
+ animation-duration: 0.1s;
}
.profile-color-modes-illu-purple {
- animation-delay: 0.6s;
- animation-duration: 0.1s;
+ animation-delay: 0.6s;
+ animation-duration: 0.1s;
}
.profile-color-modes-illu-blue {
- animation-delay: 0.7s;
- animation-duration: 0.1s;
+ animation-delay: 0.7s;
+ animation-duration: 0.1s;
}
.profile-color-modes-illu-green {
- animation-delay: 0.8s;
- animation-duration: 0.2s;
- animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
+ animation-delay: 0.8s;
+ animation-duration: 0.2s;
+ animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
}
.profile-color-modes-illu-frame:first-child {
- animation-delay: 1.8s;
+ animation-delay: 1.8s;
}
.profile-color-modes-illu-frame:nth-child(2) {
- animation-delay: 1.8s, 2.58s;
+ animation-delay: 1.8s, 2.58s;
}
.profile-color-modes-illu-frame:nth-child(3) {
- animation-delay: 2.58s, 2.66s;
+ animation-delay: 2.58s, 2.66s;
}
.profile-color-modes-illu-frame:nth-child(4) {
- animation-delay: 2.66s, 2.78s;
+ animation-delay: 2.66s, 2.78s;
}
.profile-color-modes-illu-frame:nth-child(5) {
- animation-delay: 2.78s, 2.84s;
+ animation-delay: 2.78s, 2.84s;
}
.profile-color-modes-illu-frame:nth-child(6) {
- animation-delay: 2.84s, 3.44s;
+ animation-delay: 2.84s, 3.44s;
}
.profile-color-modes-illu-frame:nth-child(7) {
- animation-delay: 3.44s, 3.56s;
+ animation-delay: 3.44s, 3.56s;
}
.profile-color-modes-illu-frame:nth-child(8) {
- animation-delay: 3.56s;
+ animation-delay: 3.56s;
}
.profile-color-modes-illu-frame:nth-child(9),
.profile-color-modes-illu-frame:nth-child(10) {
- animation: none;
+ animation: none;
}
@keyframes wobble-bottom {
- 16.65% {
- transform: skew(-12deg);
- }
+ 16.65% {
+ transform: skew(-12deg);
+ }
- 33.3% {
- transform: skew(10deg);
- }
+ 33.3% {
+ transform: skew(10deg);
+ }
- 49.95% {
- transform: skew(-6deg);
- }
+ 49.95% {
+ transform: skew(-6deg);
+ }
- 66.6% {
- transform: skew(4deg);
- }
+ 66.6% {
+ transform: skew(4deg);
+ }
- 83.25% {
- transform: skew(-2deg);
- }
+ 83.25% {
+ transform: skew(-2deg);
+ }
- 100% {
- transform: skew(0);
- }
+ 100% {
+ transform: skew(0);
+ }
}
@keyframes showComment {
- 0% {
- opacity: 0;
- transform: scale(0.3);
- }
- 50% {
- opacity: 1;
- transform: scale(1.05);
- }
- 70% {
- transform: scale(0.9);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
+ 0% {
+ opacity: 0;
+ transform: scale(0.3);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.05);
+ }
+ 70% {
+ transform: scale(0.9);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
}
@keyframes box_shadow {
- 0% {
- box-shadow: 0 0 0 0 #f56c6c;
- }
+ 0% {
+ box-shadow: 0 0 0 0 #f56c6c;
+ }
}
@keyframes progress {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: 30px 0;
- }
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: 30px 0;
+ }
}
@keyframes list_thumbnail_loading {
- 0% {
- transform: scale(0.85);
- }
- 100% {
- transform: scale(1);
- }
+ 0% {
+ transform: scale(0.85);
+ }
+ 100% {
+ transform: scale(1);
+ }
}
@keyframes list_title_loading {
- 0% {
- width: 80%;
- }
- 100% {
- width: 95%;
- }
+ 0% {
+ width: 80%;
+ }
+ 100% {
+ width: 95%;
+ }
}
@keyframes list_abstract_loading {
- 0% {
- width: 60%;
- }
- 100% {
- width: 80%;
- }
+ 0% {
+ width: 60%;
+ }
+ 100% {
+ width: 80%;
+ }
}
@keyframes profile-color-modes-illu-anim {
- 0% {
- stroke: #666;
- }
+ 0% {
+ stroke: #666;
+ }
}
@keyframes profile-color-modes-illu-anim-frame-show {
- 0% {
- opacity: 0;
- animation-timing-function: ease-out;
- }
- to {
- opacity: 1;
- }
+ 0% {
+ opacity: 0;
+ animation-timing-function: ease-out;
+ }
+ to {
+ opacity: 1;
+ }
}
@keyframes profile-color-modes-illu-anim-frame-hide {
- 0% {
- opacity: 1;
- animation-timing-function: ease-in;
- }
- to {
- opacity: 0;
- }
+ 0% {
+ opacity: 1;
+ animation-timing-function: ease-in;
+ }
+ to {
+ opacity: 0;
+ }
}
@keyframes shake {
- 2% {
- transform: translateY(1.5px) rotate(1.5deg);
- }
- 4% {
- transform: translateY(-1.5px) rotate(-0.5deg);
- }
- 6% {
- transform: translateY(1.5px) rotate(-1.5deg);
- }
- 8% {
- transform: translateY(-1.5px) rotate(-1.5deg);
- }
- 10% {
- transform: translateY(2.5px) rotate(1.5deg);
- }
- 12% {
- transform: translateY(-0.5px) rotate(1.5deg);
- }
- 14% {
- transform: translateY(-1.5px) rotate(1.5deg);
- }
- 16% {
- transform: translateY(-0.5px) rotate(-1.5deg);
- }
- 18% {
- transform: translateY(0.5px) rotate(-1.5deg);
- }
- 20% {
- transform: translateY(-1.5px) rotate(2.5deg);
- }
- 22% {
- transform: translateY(0.5px) rotate(-1.5deg);
- }
- 24% {
- transform: translateY(1.5px) rotate(1.5deg);
- }
- 26% {
- transform: translateY(0.5px) rotate(0.5deg);
- }
- 28% {
- transform: translateY(0.5px) rotate(1.5deg);
- }
- 30% {
- transform: translateY(-0.5px) rotate(2.5deg);
- }
- 32%,
- 34% {
- transform: translateY(1.5px) rotate(-0.5deg);
- }
- 36% {
- transform: translateY(-1.5px) rotate(2.5deg);
- }
- 38% {
- transform: translateY(1.5px) rotate(-1.5deg);
- }
- 40% {
- transform: translateY(-0.5px) rotate(2.5deg);
- }
- 42% {
- transform: translateY(2.5px) rotate(-1.5deg);
- }
- 44% {
- transform: translateY(1.5px) rotate(0.5deg);
- }
- 46% {
- transform: translateY(-1.5px) rotate(2.5deg);
- }
- 48% {
- transform: translateY(-0.5px) rotate(0.5deg);
- }
- 50% {
- transform: translateY(0.5px) rotate(0.5deg);
- }
- 52% {
- transform: translateY(2.5px) rotate(2.5deg);
- }
- 54% {
- transform: translateY(-1.5px) rotate(1.5deg);
- }
- 56% {
- transform: translateY(2.5px) rotate(2.5deg);
- }
- 58% {
- transform: translateY(0.5px) rotate(2.5deg);
- }
- 60% {
- transform: translateY(2.5px) rotate(2.5deg);
- }
- 62% {
- transform: translateY(-0.5px) rotate(2.5deg);
- }
- 64% {
- transform: translateY(-0.5px) rotate(1.5deg);
- }
- 66% {
- transform: translateY(1.5px) rotate(-0.5deg);
- }
- 68% {
- transform: translateY(-1.5px) rotate(-0.5deg);
- }
- 70% {
- transform: translateY(1.5px) rotate(0.5deg);
- }
- 72% {
- transform: translateY(2.5px) rotate(1.5deg);
- }
- 74% {
- transform: translateY(-0.5px) rotate(0.5deg);
- }
- 76% {
- transform: translateY(-0.5px) rotate(2.5deg);
- }
- 78% {
- transform: translateY(-0.5px) rotate(1.5deg);
- }
- 80% {
- transform: translateY(1.5px) rotate(1.5deg);
- }
- 82% {
- transform: translateY(-0.5px) rotate(0.5deg);
- }
- 84% {
- transform: translateY(1.5px) rotate(2.5deg);
- }
- 86% {
- transform: translateY(-1.5px) rotate(-1.5deg);
- }
- 88% {
- transform: translateY(-0.5px) rotate(2.5deg);
- }
- 90% {
- transform: translateY(2.5px) rotate(-0.5deg);
- }
- 92% {
- transform: translateY(0.5px) rotate(-0.5deg);
- }
- 94% {
- transform: translateY(2.5px) rotate(0.5deg);
- }
- 96% {
- transform: translateY(-0.5px) rotate(1.5deg);
- }
- 98% {
- transform: translateY(-1.5px) rotate(-0.5deg);
- }
- 0%,
- 100% {
- transform: translate(0px) rotate(0deg);
- }
+ 2% {
+ transform: translateY(1.5px) rotate(1.5deg);
+ }
+ 4% {
+ transform: translateY(-1.5px) rotate(-0.5deg);
+ }
+ 6% {
+ transform: translateY(1.5px) rotate(-1.5deg);
+ }
+ 8% {
+ transform: translateY(-1.5px) rotate(-1.5deg);
+ }
+ 10% {
+ transform: translateY(2.5px) rotate(1.5deg);
+ }
+ 12% {
+ transform: translateY(-0.5px) rotate(1.5deg);
+ }
+ 14% {
+ transform: translateY(-1.5px) rotate(1.5deg);
+ }
+ 16% {
+ transform: translateY(-0.5px) rotate(-1.5deg);
+ }
+ 18% {
+ transform: translateY(0.5px) rotate(-1.5deg);
+ }
+ 20% {
+ transform: translateY(-1.5px) rotate(2.5deg);
+ }
+ 22% {
+ transform: translateY(0.5px) rotate(-1.5deg);
+ }
+ 24% {
+ transform: translateY(1.5px) rotate(1.5deg);
+ }
+ 26% {
+ transform: translateY(0.5px) rotate(0.5deg);
+ }
+ 28% {
+ transform: translateY(0.5px) rotate(1.5deg);
+ }
+ 30% {
+ transform: translateY(-0.5px) rotate(2.5deg);
+ }
+ 32%,
+ 34% {
+ transform: translateY(1.5px) rotate(-0.5deg);
+ }
+ 36% {
+ transform: translateY(-1.5px) rotate(2.5deg);
+ }
+ 38% {
+ transform: translateY(1.5px) rotate(-1.5deg);
+ }
+ 40% {
+ transform: translateY(-0.5px) rotate(2.5deg);
+ }
+ 42% {
+ transform: translateY(2.5px) rotate(-1.5deg);
+ }
+ 44% {
+ transform: translateY(1.5px) rotate(0.5deg);
+ }
+ 46% {
+ transform: translateY(-1.5px) rotate(2.5deg);
+ }
+ 48% {
+ transform: translateY(-0.5px) rotate(0.5deg);
+ }
+ 50% {
+ transform: translateY(0.5px) rotate(0.5deg);
+ }
+ 52% {
+ transform: translateY(2.5px) rotate(2.5deg);
+ }
+ 54% {
+ transform: translateY(-1.5px) rotate(1.5deg);
+ }
+ 56% {
+ transform: translateY(2.5px) rotate(2.5deg);
+ }
+ 58% {
+ transform: translateY(0.5px) rotate(2.5deg);
+ }
+ 60% {
+ transform: translateY(2.5px) rotate(2.5deg);
+ }
+ 62% {
+ transform: translateY(-0.5px) rotate(2.5deg);
+ }
+ 64% {
+ transform: translateY(-0.5px) rotate(1.5deg);
+ }
+ 66% {
+ transform: translateY(1.5px) rotate(-0.5deg);
+ }
+ 68% {
+ transform: translateY(-1.5px) rotate(-0.5deg);
+ }
+ 70% {
+ transform: translateY(1.5px) rotate(0.5deg);
+ }
+ 72% {
+ transform: translateY(2.5px) rotate(1.5deg);
+ }
+ 74% {
+ transform: translateY(-0.5px) rotate(0.5deg);
+ }
+ 76% {
+ transform: translateY(-0.5px) rotate(2.5deg);
+ }
+ 78% {
+ transform: translateY(-0.5px) rotate(1.5deg);
+ }
+ 80% {
+ transform: translateY(1.5px) rotate(1.5deg);
+ }
+ 82% {
+ transform: translateY(-0.5px) rotate(0.5deg);
+ }
+ 84% {
+ transform: translateY(1.5px) rotate(2.5deg);
+ }
+ 86% {
+ transform: translateY(-1.5px) rotate(-1.5deg);
+ }
+ 88% {
+ transform: translateY(-0.5px) rotate(2.5deg);
+ }
+ 90% {
+ transform: translateY(2.5px) rotate(-0.5deg);
+ }
+ 92% {
+ transform: translateY(0.5px) rotate(-0.5deg);
+ }
+ 94% {
+ transform: translateY(2.5px) rotate(0.5deg);
+ }
+ 96% {
+ transform: translateY(-0.5px) rotate(1.5deg);
+ }
+ 98% {
+ transform: translateY(-1.5px) rotate(-0.5deg);
+ }
+ 0%,
+ 100% {
+ transform: translate(0px) rotate(0deg);
+ }
}
diff --git a/assets/css/joe.index.css b/assets/css/joe.index.css
index b806394..b0cecfa 100644
--- a/assets/css/joe.index.css
+++ b/assets/css/joe.index.css
@@ -1 +1 @@
-.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.joe_index__hot{padding-top:15px}.joe_index__hot-list{display:flex;margin:0 -5px}.joe_index__hot-list .item{width:25%;padding:0 5px}.joe_index__hot-list .item .link{display:block}.joe_index__hot-list .item .link .inner{position:relative}.joe_index__hot-list .item .link .inner:hover .image{opacity:0.85}.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}.joe_index__hot-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner) var(--radius-inner) 0 0;transition:opacity 0.35s}.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}.joe_index__ad{padding-top:15px}.joe_index__ad-link{display:block;position:relative}.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_index__ad-link .image:hover{opacity:0.85}.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color 0.35s}.joe_index__title-title .item.active{color:var(--theme)}.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left 0.35s, width 0.35s}.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.35s}.joe_index__title-notice a:hover{color:var(--theme)}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:var(--radius-inner)}.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}.swiper-container.swiper-container-vertical .swiper-button-next,.swiper-container.swiper-container-vertical .swiper-button-prev{display:none}.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{background:rgba(0,0,0,0.1);transition:background 0.35s, right 0.35s, left 0.35s;border-radius:2px}.swiper-container .swiper-button-next:hover,.swiper-container .swiper-button-prev:hover{background:rgba(0,0,0,0.25)}.swiper-container .swiper-button-next::after,.swiper-container .swiper-button-prev::after{font-size:20px}.swiper-container .swiper-button-next{right:-27px}.swiper-container .swiper-button-prev{left:-27px}.swiper-container:hover .swiper-button-next{right:10px}.swiper-container:hover .swiper-button-prev{left:10px}
+.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.joe_index__hot{padding-top:15px}.joe_index__hot-list{display:grid;grid-template-columns:repeat(4, 1fr);-webkit-column-gap:15px;column-gap:15px}.joe_index__hot-list .item .link{display:block}.joe_index__hot-list .item .link .inner{position:relative}.joe_index__hot-list .item .link .inner:hover .image{opacity:0.85}.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}.joe_index__hot-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner) var(--radius-inner) 0 0;transition:opacity 0.35s}.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}.joe_index__ad{padding-top:15px}.joe_index__ad-link{display:block;position:relative}.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_index__ad-link .image:hover{opacity:0.85}.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color 0.35s}.joe_index__title-title .item.active{color:var(--theme)}.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left 0.35s, width 0.35s}.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.35s}.joe_index__title-notice a:hover{color:var(--theme)}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:var(--radius-inner)}.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}.swiper-container.swiper-container-vertical .swiper-button-next,.swiper-container.swiper-container-vertical .swiper-button-prev{display:none}.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{background:rgba(0,0,0,0.1);transition:background 0.35s, right 0.35s, left 0.35s;border-radius:2px}.swiper-container .swiper-button-next:hover,.swiper-container .swiper-button-prev:hover{background:rgba(0,0,0,0.25)}.swiper-container .swiper-button-next::after,.swiper-container .swiper-button-prev::after{font-size:20px}.swiper-container .swiper-button-next{right:-27px}.swiper-container .swiper-button-prev{left:-27px}.swiper-container:hover .swiper-button-next{right:10px}.swiper-container:hover .swiper-button-prev{left:10px}
diff --git a/assets/css/joe.index.scss b/assets/css/joe.index.scss
index 1356565..e10375a 100644
--- a/assets/css/joe.index.scss
+++ b/assets/css/joe.index.scss
@@ -83,11 +83,10 @@
&__hot {
padding-top: 15px;
&-list {
- display: flex;
- margin: 0 -5px;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ column-gap: 15px;
.item {
- width: 25%;
- padding: 0 5px;
.link {
display: block;
.inner {
diff --git a/assets/css/joe.live.css b/assets/css/joe.live.css
index e4757ad..0b90b16 100644
--- a/assets/css/joe.live.css
+++ b/assets/css/joe.live.css
@@ -1 +1 @@
-.joe_live__contain{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px}.joe_live__contain-title{display:flex;align-items:center;position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_live__contain-title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_live__type{margin-bottom:15px}.joe_live__type-title{padding-right:8px}.joe_live__type-title .icon{width:15px;height:15px;fill:#fff;margin-left:5px;cursor:pointer}.joe_live__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_live__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_live__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_live__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_live__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_live__list{display:grid;grid-template-columns:repeat(4, 1fr);gap:15px}.joe_live__list-item{display:block;width:100%;overflow:hidden;border-radius:var(--radius-wrap)}.joe_live__list-item .thumb{position:relative;width:100%;height:140px}.joe_live__list-item .thumb .screenshot{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_live__list-item .thumb .recommendTagName{position:absolute;top:8px;right:8px;background:#f90;color:#fff;font-size:12px;padding:2px 8px;border-radius:2px;font-style:normal;z-index:4}.joe_live__list-item .thumb::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.3s ease-out;z-index:2}.joe_live__list-item .thumb::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;background:url(../img/play.png) no-repeat;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_live__list-item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_live__list-item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_live__list-item .description{position:relative;background:var(--background);padding:15px 10px 10px}.joe_live__list-item .description .avatar{position:absolute;top:-20px;left:0;z-index:9}.joe_live__list-item .description .avatar .icon{height:35px;fill:var(--background)}.joe_live__list-item .description .avatar img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:25px;height:25px;-o-object-fit:cover;object-fit:cover;border-radius:50%}.joe_live__list-item .description .nick{position:relative;color:var(--minor);font-size:12px;padding-left:13px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_live__list-item .description .nick::before{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);content:'';border:2px solid #0056ff;height:4px;width:4px;border-radius:50%}.joe_live__list-item .description .introduction{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main);border-bottom:1px solid var(--classD);padding-bottom:8px;margin-bottom:8px}.joe_live__list-item .description .meta{display:flex;align-items:center;font-size:12px;color:var(--minor)}.joe_live__list-item .description .meta .icon{width:13px;height:13px;margin-right:3px}.joe_live__list-item .description .meta .name{color:#f90;margin-left:auto}.joe_live__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_live__list:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_live__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_live__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_live__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_live__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_live__pagination-item.active,.joe_live__pagination-item:hover{color:#fff;background:var(--theme)}.joe_live__pagination-item.active svg,.joe_live__pagination-item:hover svg{fill:#fff}.joe_live__play-player{width:100%;height:580px;background:#000}
+.joe_live__contain{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px}.joe_live__contain-title{display:flex;align-items:center;position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_live__contain-title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_live__type{margin-bottom:15px}.joe_live__type-title{padding-right:8px}.joe_live__type-title .icon{width:15px;height:15px;fill:#fff;margin-left:5px;cursor:pointer}.joe_live__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_live__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_live__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_live__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_live__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_live__list{display:grid;grid-template-columns:repeat(3, 1fr);gap:15px}.joe_live__list-item{display:block;width:100%;overflow:hidden;border-radius:var(--radius-wrap)}.joe_live__list-item .thumb{position:relative;width:100%;height:140px}.joe_live__list-item .thumb .screenshot{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_live__list-item .thumb .recommendTagName{position:absolute;top:8px;right:8px;background:#f90;color:#fff;font-size:12px;padding:2px 8px;border-radius:2px;font-style:normal;z-index:4}.joe_live__list-item .thumb::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.3s ease-out;z-index:2}.joe_live__list-item .thumb::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;background:url(../img/play.png) no-repeat;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_live__list-item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_live__list-item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_live__list-item .description{position:relative;background:var(--background);padding:15px 10px 10px}.joe_live__list-item .description .avatar{position:absolute;top:-20px;left:0;z-index:9}.joe_live__list-item .description .avatar .icon{height:35px;fill:var(--background)}.joe_live__list-item .description .avatar img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:25px;height:25px;-o-object-fit:cover;object-fit:cover;border-radius:50%}.joe_live__list-item .description .nick{position:relative;color:var(--minor);font-size:12px;padding-left:13px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_live__list-item .description .nick::before{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);content:'';border:2px solid #0056ff;height:4px;width:4px;border-radius:50%}.joe_live__list-item .description .introduction{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main);border-bottom:1px solid var(--classD);padding-bottom:8px;margin-bottom:8px}.joe_live__list-item .description .meta{display:flex;align-items:center;font-size:12px;color:var(--minor)}.joe_live__list-item .description .meta .icon{width:13px;height:13px;margin-right:3px}.joe_live__list-item .description .meta .name{color:#f90;margin-left:auto}.joe_live__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_live__list:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_live__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_live__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_live__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_live__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_live__pagination-item.active,.joe_live__pagination-item:hover{color:#fff;background:var(--theme)}.joe_live__pagination-item.active svg,.joe_live__pagination-item:hover svg{fill:#fff}.joe_live__play-player{width:100%;height:580px;background:#000}
diff --git a/assets/css/joe.live.scss b/assets/css/joe.live.scss
index ad8d2a6..4e086b7 100644
--- a/assets/css/joe.live.scss
+++ b/assets/css/joe.live.scss
@@ -86,7 +86,7 @@
}
&__list {
display: grid;
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(3, 1fr);
gap: 15px;
&-item {
display: block;
diff --git a/assets/css/joe.mode.css b/assets/css/joe.mode.css
new file mode 100644
index 0000000..1efa03a
--- /dev/null
+++ b/assets/css/joe.mode.css
@@ -0,0 +1 @@
+html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--radius-wrap: 8px;--radius-inner: 4px;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #333;--theme: #54b5db;--main: #808080;--routine: #7b7b7b;--minor: #6d6d6d;--seat: #666;--classA: #444;--classB: #444;--classC: #444;--classD: #444;--text-shadow: none;--box-shadow: none}html[data-night='night'] body::before{background:#202122;z-index:-500}html[data-night='night'] .joe_header__above-logo img{display:none}html[data-night='night'] .joe_header__above-logo svg{display:block}
diff --git a/assets/css/joe.mode.scss b/assets/css/joe.mode.scss
new file mode 100644
index 0000000..9c5a28d
--- /dev/null
+++ b/assets/css/joe.mode.scss
@@ -0,0 +1,48 @@
+/* 昼夜模式专用css */
+/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
+html {
+ --theme: #409eff;
+ --background: #fff;
+ --main: #303133;
+ --routine: #606266;
+ --minor: #909399;
+ --seat: #c0c4cc;
+ --classA: #dcdfe6;
+ --classB: #e4e7ed;
+ --classC: #ebeef5;
+ --classD: #f2f6fc;
+ --radius-wrap: 8px;
+ --radius-inner: 4px;
+ --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
+}
+
+/* 黑夜模式的配色方案是我随便写的一套，您可以修改配色成您的一套方案 */
+html[data-night='night'] {
+ --background: #333;
+ --theme: #54b5db;
+ --main: #808080;
+ --routine: #7b7b7b;
+ --minor: #6d6d6d;
+ --seat: #666;
+ --classA: #444;
+ --classB: #444;
+ --classC: #444;
+ --classD: #444;
+ --text-shadow: none;
+ --box-shadow: none;
+}
+
+/* 此处用于修改黑夜模式下没有覆盖到的小地方的样式 */
+html[data-night='night'] {
+ body::before {
+ background: #202122;
+ z-index: -500;
+ }
+ .joe_header__above-logo img {
+ display: none;
+ }
+ .joe_header__above-logo svg {
+ display: block;
+ }
+}
diff --git a/assets/css/joe.responsive.css b/assets/css/joe.responsive.css
new file mode 100644
index 0000000..732c018
--- /dev/null
+++ b/assets/css/joe.responsive.css
@@ -0,0 +1 @@
+@media (max-width: 1760px){html #live2d-widget{visibility:hidden}}@media (max-width: 1400px){html .joe_live__play-player{height:520px}html .joe_detail__friends{grid-template-columns:repeat(3, 1fr)}html .joe_video__source-list{grid-template-columns:repeat(7, 1fr)}}@media (max-width: 1200px){html .joe_live__list-item .thumb{height:125px}}html .noaside .joe_live__list{grid-template-columns:repeat(4, 1fr)}html .noaside .joe_video__list-item{grid-template-columns:repeat(7, 1fr)}html .noaside .joe_wallpaper__list{grid-template-columns:repeat(5, 1fr)}@media (max-width: 1400px){html .noaside .joe_detail__friends{grid-template-columns:repeat(4, 1fr)}html .noaside .joe_video__list-item{grid-template-columns:repeat(6, 1fr)}}
diff --git a/assets/css/joe.responsive.scss b/assets/css/joe.responsive.scss
new file mode 100644
index 0000000..286c298
--- /dev/null
+++ b/assets/css/joe.responsive.scss
@@ -0,0 +1,61 @@
+/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */
+
+/* 有侧边栏时候的样式 */
+html {
+ @media (max-width: 1760px) {
+ #live2d-widget {
+ visibility: hidden;
+ }
+ }
+ @media (max-width: 1400px) {
+ .joe_live__play-player {
+ height: 520px;
+ }
+ .joe_detail__friends {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .joe_video__source-list {
+ grid-template-columns: repeat(7, 1fr);
+ }
+ }
+ @media (max-width: 1200px) {
+ .joe_live__list-item .thumb {
+ height: 125px;
+ }
+ }
+ @media (max-width: 992px) {
+ }
+ @media (max-width: 768px) {
+ }
+ @media (max-width: 576px) {
+ }
+}
+
+/* 没有侧边栏时候的样式 */
+html .noaside {
+ .joe_live__list {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .joe_video__list-item {
+ grid-template-columns: repeat(7, 1fr);
+ }
+ .joe_wallpaper__list {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ @media (max-width: 1400px) {
+ .joe_detail__friends {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .joe_video__list-item {
+ grid-template-columns: repeat(6, 1fr);
+ }
+ }
+ @media (max-width: 1200px) {
+ }
+ @media (max-width: 992px) {
+ }
+ @media (max-width: 768px) {
+ }
+ @media (max-width: 576px) {
+ }
+}
diff --git a/assets/css/joe.video.css b/assets/css/joe.video.css
index 990cb5a..e84fd85 100644
--- a/assets/css/joe.video.css
+++ b/assets/css/joe.video.css
@@ -1 +1 @@
-.joe_video__contain{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px}.joe_video__contain-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__contain-title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_video__type{margin-bottom:15px}.joe_video__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_video__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_video__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__list-item{display:grid;gap:15px;grid-template-columns:repeat(6, 1fr);border-top:1px solid var(--classC);padding-top:15px}.joe_video__list-item .item{position:relative;border-radius:var(--radius-inner);overflow:hidden}.joe_video__list-item .item .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__list-item .item .thumb{position:relative;height:220px}.joe_video__list-item .item .thumb .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__list-item .item .thumb::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.3s ease-out;z-index:2}.joe_video__list-item .item .thumb::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;background:url(../img/play.png) no-repeat;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_video__list-item .item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_video__list-item .item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_video__list-item .item .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;text-align:center;color:var(--routine);background:var(--classD);height:34px;line-height:34px;font-size:12px}.joe_video__list-item .error{text-align:center;color:var(--minor)}.joe_video__list-item:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_video__list-item:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_video__list-search{position:absolute;top:15px;right:15px;display:flex;align-items:center}.joe_video__list-search .input{width:180px;height:30px;padding:0 12px;color:var(--routine);background:var(--background);border:1px solid var(--theme);font-size:12px}.joe_video__list-search .button{height:30px;border:none;background:var(--theme);color:#fff;padding:0 12px;font-size:12px}.joe_video__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_video__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_video__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_video__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_video__pagination-item.active,.joe_video__pagination-item:hover{color:#fff;background:var(--theme)}.joe_video__pagination-item.active svg,.joe_video__pagination-item:hover svg{fill:#fff}.joe_video__detail{margin-bottom:15px}.joe_video__detail-info{display:flex;border-top:1px solid var(--classC);padding-top:15px}.joe_video__detail-info .thumbnail{position:relative;width:180px;height:250px;min-width:180px;min-height:180px;margin-right:15px}.joe_video__detail-info .thumbnail .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__detail-info .thumbnail .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__detail-info .description{overflow:hidden}.joe_video__detail-info .description dt{font-size:24px;color:var(--main);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.joe_video__detail-info .description dd{position:relative;padding-left:45px;line-height:24px;margin-bottom:5px}.joe_video__detail-info .description dd .muted{position:absolute;left:0;color:var(--minor)}.joe_video__detail-info .description dd .text{word-break:break-all;color:var(--routine);display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.joe_video__detail-info .error{color:var(--minor);margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__player{margin-bottom:15px}.joe_video__player-play{width:100%;height:480px;background:#000}.joe_video__source{margin-bottom:15px}.joe_video__source:last-child{margin-bottom:0}.joe_video__source-list{display:grid;grid-template-columns:repeat(8, 1fr);gap:15px;border-top:1px solid var(--classC);padding-top:15px}.joe_video__source-list .item{height:30px;line-height:30px;border-radius:14px;background:var(--classD);color:var(--routine);cursor:pointer;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;padding:0 10px}.joe_video__source-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__source-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}
+.joe_video__contain{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px}.joe_video__contain-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__contain-title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_video__type{margin-bottom:15px}.joe_video__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_video__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_video__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__list-item{display:grid;gap:15px;grid-template-columns:repeat(5, 1fr);border-top:1px solid var(--classC);padding-top:15px}.joe_video__list-item .item{position:relative;border-radius:var(--radius-inner);overflow:hidden}.joe_video__list-item .item .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__list-item .item .thumb{position:relative;height:220px}.joe_video__list-item .item .thumb .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__list-item .item .thumb::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.3s ease-out;z-index:2}.joe_video__list-item .item .thumb::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;background:url(../img/play.png) no-repeat;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out;transition:transform 0.25s ease-out, opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;z-index:3}.joe_video__list-item .item .thumb:hover::before{background:rgba(0,0,0,0.5)}.joe_video__list-item .item .thumb:hover::after{opacity:0.8;-webkit-transform:scale(1);transform:scale(1)}.joe_video__list-item .item .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;text-align:center;color:var(--routine);background:var(--classD);height:34px;line-height:34px;font-size:12px}.joe_video__list-item .error{text-align:center;color:var(--minor)}.joe_video__list-item:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_video__list-item:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_video__list-search{position:absolute;top:15px;right:15px;display:flex;align-items:center}.joe_video__list-search .input{width:180px;height:30px;padding:0 12px;color:var(--routine);background:var(--background);border:1px solid var(--theme);font-size:12px}.joe_video__list-search .button{height:30px;border:none;background:var(--theme);color:#fff;padding:0 12px;font-size:12px}.joe_video__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_video__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_video__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_video__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_video__pagination-item.active,.joe_video__pagination-item:hover{color:#fff;background:var(--theme)}.joe_video__pagination-item.active svg,.joe_video__pagination-item:hover svg{fill:#fff}.joe_video__detail{margin-bottom:15px}.joe_video__detail-info{display:flex;border-top:1px solid var(--classC);padding-top:15px}.joe_video__detail-info .thumbnail{position:relative;width:180px;height:250px;min-width:180px;min-height:180px;margin-right:15px}.joe_video__detail-info .thumbnail .pic{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_video__detail-info .thumbnail .year{position:absolute;top:8px;right:8px;padding:2px 5px;border-radius:2px;font-size:12px;font-style:normal;background:#ff6800;color:#fff;z-index:3}.joe_video__detail-info .description{overflow:hidden}.joe_video__detail-info .description dt{font-size:22px;color:var(--main);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.joe_video__detail-info .description dd{position:relative;padding-left:45px;line-height:24px;margin-bottom:5px}.joe_video__detail-info .description dd .muted{position:absolute;left:0;color:var(--minor)}.joe_video__detail-info .description dd .text{word-break:break-all;color:var(--routine);display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.joe_video__detail-info .error{color:var(--minor);margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_video__player{margin-bottom:15px}.joe_video__player-play{width:100%;height:480px;background:#000}.joe_video__source{margin-bottom:15px}.joe_video__source:last-child{margin-bottom:0}.joe_video__source-list{display:grid;grid-template-columns:repeat(8, 1fr);gap:15px;border-top:1px solid var(--classC);padding-top:15px}.joe_video__source-list .item{height:30px;line-height:30px;border-radius:14px;background:var(--classD);color:var(--routine);cursor:pointer;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;padding:0 10px}.joe_video__source-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_video__source-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}
diff --git a/assets/css/joe.video.scss b/assets/css/joe.video.scss
index 28eaac9..d67cf5e 100644
--- a/assets/css/joe.video.scss
+++ b/assets/css/joe.video.scss
@@ -75,7 +75,7 @@
&-item {
display: grid;
gap: 15px;
- grid-template-columns: repeat(6, 1fr);
+ grid-template-columns: repeat(5, 1fr);
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
@@ -263,7 +263,7 @@
.description {
overflow: hidden;
dt {
- font-size: 24px;
+ font-size: 22px;
color: var(--main);
max-width: 100%;
overflow: hidden;
diff --git a/assets/css/joe.wallpaper.css b/assets/css/joe.wallpaper.css
index 71e9028..eb177f6 100644
--- a/assets/css/joe.wallpaper.css
+++ b/assets/css/joe.wallpaper.css
@@ -1 +1 @@
-.joe_wallpaper__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_wallpaper__type-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__type-title::before{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_wallpaper__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_wallpaper__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_wallpaper__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__list{display:grid;grid-template-columns:repeat(5, 1fr)}.joe_wallpaper__list .item{position:relative;display:block}.joe_wallpaper__list .item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_wallpaper__list .item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.35s;z-index:2}.joe_wallpaper__list .item::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);background-repeat:no-repeat;background-size:100% 100%;z-index:3;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;opacity:0}.joe_wallpaper__list .item:hover::before{background:rgba(0,0,0,0.5)}.joe_wallpaper__list .item:hover::after{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_wallpaper__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_wallpaper__list:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_wallpaper__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_wallpaper__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_wallpaper__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_wallpaper__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_wallpaper__pagination-item.active,.joe_wallpaper__pagination-item:hover{color:#fff;background:var(--theme)}.joe_wallpaper__pagination-item.active svg,.joe_wallpaper__pagination-item:hover svg{fill:#fff}
+.joe_wallpaper__type{position:relative;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:60px 15px 15px;margin-bottom:15px}.joe_wallpaper__type-title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__type-title::before{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_wallpaper__type-list{display:grid;gap:15px;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));border-top:1px solid var(--classC);padding-top:15px}.joe_wallpaper__type-list .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:var(--classD);height:28px;line-height:28px;border-radius:14px;cursor:pointer;color:var(--routine);font-size:12px;padding:0 15px;text-align:center;transition:color 0.35s, background 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;transition:color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_wallpaper__type-list .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_wallpaper__type-list .error{text-align:center;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_wallpaper__list{display:grid;grid-template-columns:repeat(4, 1fr)}.joe_wallpaper__list .item{position:relative;display:block}.joe_wallpaper__list .item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_wallpaper__list .item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);transition:background 0.35s;z-index:2}.joe_wallpaper__list .item::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);background-repeat:no-repeat;background-size:100% 100%;z-index:3;-webkit-transform:scale(2);transform:scale(2);transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;opacity:0}.joe_wallpaper__list .item:hover::before{background:rgba(0,0,0,0.5)}.joe_wallpaper__list .item:hover::after{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_wallpaper__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_wallpaper__list:empty::after{content:'';display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%}.joe_wallpaper__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_wallpaper__pagination-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:5px;height:32px;line-height:32px;padding:0 15px;background:var(--background);color:var(--main);border-radius:2px;transition:background 0.35s, color 0.35s}.joe_wallpaper__pagination-item svg{fill:var(--routine);transition:fill 0.35s}.joe_wallpaper__pagination-item .next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_wallpaper__pagination-item.active,.joe_wallpaper__pagination-item:hover{color:#fff;background:var(--theme)}.joe_wallpaper__pagination-item.active svg,.joe_wallpaper__pagination-item:hover svg{fill:#fff}
diff --git a/assets/css/joe.wallpaper.scss b/assets/css/joe.wallpaper.scss
index 06e849d..59c381a 100644
--- a/assets/css/joe.wallpaper.scss
+++ b/assets/css/joe.wallpaper.scss
@@ -71,7 +71,7 @@
}
&__list {
display: grid;
- grid-template-columns: repeat(5, 1fr);
+ grid-template-columns: repeat(4, 1fr);
.item {
position: relative;
display: block;
diff --git a/assets/js/joe.global.js b/assets/js/joe.global.js
index e914cd7..6c11eda 100644
--- a/assets/js/joe.global.js
+++ b/assets/js/joe.global.js
@@ -207,6 +207,19 @@ document.addEventListener('DOMContentLoaded', () => {
$(window).on('scroll', () => calcProgress());
}
+ /* 判断页面上是否有侧边栏 */
+ {
+ const getAside = () => {
+ if ($('.joe_aside').length === 0) {
+ $('body').addClass('noaside');
+ } else {
+ $('body').removeClass('noaside');
+ }
+ };
+ getAside();
+ $(window).on('resize', () => getAside());
+ }
+
/* 评论框点击切换画图模式和文本模式 */
{
$('.joe_comment__respond-type .item').on('click', function () {
diff --git a/core/function.php b/core/function.php
index 9166061..891d317 100644
--- a/core/function.php
+++ b/core/function.php
@@ -3,7 +3,7 @@
/* 获取主题当前版本号 */
function _getVersion()
{
- return "1.0.0";
+ return "5.0.0";
};
/* 判断是否是手机 */
diff --git a/core/route.php b/core/route.php
index d01269f..3e29362 100644
--- a/core/route.php
+++ b/core/route.php
@@ -6,7 +6,7 @@ function _getRanking($self)
header("HTTP/1.1 200 OK");
$ranking_txt = Helper::options()->JAside_Ranking;
$ranking_arr = explode("$", $ranking_txt);
- $json = _curl("https://the.top/v1/{$ranking_arr[1]}/1/9");
+ $json = _curl("https://rank.the.top/v1/{$ranking_arr[1]}/1/9");
$res = json_decode($json, TRUE);
if ($res['code'] === 0) {
$self->response->throwJson([
diff --git a/functions.php b/functions.php
index 5e3d10e..51adb3b 100644
--- a/functions.php
+++ b/functions.php
@@ -237,7 +237,7 @@ function themeConfig($form)
'https://cdn.jsdelivr.net/npm/live2d-widget-model-hk_fos@1.0.0/assets/hk416.model.json' => 'hk416'
),
'off',
- '选择一款喜爱的Live2D动态人物模型',
+ '选择一款喜爱的Live2D动态人物模型（仅在屏幕分辨率大于1760px下显示）',
'介绍：开启后会在右下角显示一个小人'
);
$JLive2d->setAttribute('class', 'joe_content joe_global');
diff --git a/library/player.php b/library/player.php
index 37b94fa..f2facd4 100644
--- a/library/player.php
+++ b/library/player.php
@@ -1,5 +1,5 @@
-
+
diff --git a/public/include.php b/public/include.php
index 03981f9..6790ba6 100644
--- a/public/include.php
+++ b/public/include.php
@@ -60,13 +60,15 @@
header(); ?>
+
+
+
+
+
-
-
-