From 9ad9f179942ddeeab7c400f3c19538cfae7f343c Mon Sep 17 00:00:00 2001
From: haoouba <2323333339@qq.com>
Date: Mon, 25 Jan 2021 21:26:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/css/joe.global.css | 2 +-
assets/css/joe.global.scss | 3463 +++++++++++++++++----------------
assets/css/joe.normalize.css | 2 +-
assets/css/joe.normalize.scss | 139 +-
assets/js/joe.index.js | 4 +-
core/core.php | 2 +-
friends.php | 42 +-
functions.php | 2 +-
8 files changed, 1852 insertions(+), 1804 deletions(-)
diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index 5042db7..ac23e70 100644
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
@@ -1 +1 @@
-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 4px 4px;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;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:4px;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;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:8px;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:4px;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:4px;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:4px}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:4px;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:4px;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:8px;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__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(--classB)}.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}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between}.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);font-size:12px;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;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px}.joe_detail__article blockquote{color:var(--routine);line-height:26px;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px;background:#ecf8ff;border-left:5px solid #50bfff;padding:10px 15px;border-radius:0 4px 4px 0;font-size:14px}.joe_detail__article blockquote p{margin:0}.joe_detail__article a{display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a::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:4px;font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c}.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:4px}.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:4px;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{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:10px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-hide i::after{content:'';position:absolute;bottom:-2px;left:0;right:0;width:100%;height:1px;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-hide i:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.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(--classB)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:4px}.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}.joe_detail__friends-item{width:25%;padding:7.5px}.joe_detail__friends-item .contain{display:block;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:15px;color:#fff;word-break:break-all}.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 .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%}.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}.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 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}}
+html{--theme: #409eff;--background: #fff;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--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 4px 4px;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:4px;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:8px;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:4px;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:4px;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:4px}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:4px;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:4px;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:8px;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__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(--classB)}.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}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between}.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);font-size:12px;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;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px}.joe_detail__article blockquote{color:var(--routine);line-height:26px;white-space:pre-wrap;word-spacing:5px;letter-spacing:1px;word-break:break-all;margin-bottom:15px;background:#ecf8ff;border-left:5px solid #50bfff;padding:10px 15px;border-radius:0 4px 4px 0;font-size:14px}.joe_detail__article blockquote p{margin:0}.joe_detail__article a{display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a::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:4px;font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c}.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:4px}.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:4px;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:10px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-hide i::after{content:'';position:absolute;bottom:-2px;left:0;right:0;width:100%;height:1px;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-hide i:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.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(--classB)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:4px}.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:4px;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}.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 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}}
diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss
index 78d2ad2..24f7b8b 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -1,1806 +1,1849 @@
+/* 以下配色为全球公认的一套色彩值，如无必要，无需修改下方色彩值（主题色可以修改） */
+html {
+ --theme: #409eff;
+ --background: #fff;
+ --main: #303133;
+ --routine: #606266;
+ --minor: #909399;
+ --seat: #c0c4cc;
+ --classA: #dcdfe6;
+ --classB: #e4e7ed;
+ --classC: #ebeef5;
+ --classD: #f2f6fc;
+ --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'] {
- body::before {
- background: #202122;
- z-index: -500;
- }
- .joe_header__above-logo img {
- display: none;
- }
- .joe_header__above-logo svg {
- display: block;
- }
+ --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 4px 4px;
- 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 4px 4px;
+ 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;
- top: 60px;
- left: 0;
- right: 0;
- background: var(--background);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
- border-radius: 4px;
- 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;
- 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: 4px;
+ 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: 8px;
- 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: 4px;
- 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: 8px;
+ 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: 4px;
+ 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: 4px;
- 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: 4px;
- }
- .information {
- flex: 1;
- min-width: 0;
- .title {
- height: 24px;
- border-radius: 4px;
- background: var(--classD);
- animation: list_title_loading 0.75s infinite alternate;
- margin-bottom: 15px;
- }
- .abstract {
- p {
- height: 18px;
- border-radius: 4px;
- 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: 4px;
+ 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: 4px;
+ }
+ .information {
+ flex: 1;
+ min-width: 0;
+ .title {
+ height: 24px;
+ border-radius: 4px;
+ background: var(--classD);
+ animation: list_title_loading 0.75s infinite alternate;
+ margin-bottom: 15px;
+ }
+ .abstract {
+ p {
+ height: 18px;
+ border-radius: 4px;
+ 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: 8px;
- 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;
- }
- }
- }
- &__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(--classB);
- &::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;
- }
- .meta {
- display: flex;
- flex-direction: column;
- height: 35px;
- justify-content: space-between;
- .author {
- .link {
- font-weight: 500;
- color: var(--theme);
- &:hover {
- text-decoration: underline;
- }
- }
- }
- .item {
- display: flex;
- align-items: center;
- color: var(--minor);
- font-size: 12px;
- 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;
- white-space: pre-wrap;
- word-spacing: 5px;
- letter-spacing: 1px;
- word-break: break-all;
- margin-bottom: 15px;
- }
- blockquote {
- color: var(--routine);
- line-height: 26px;
- white-space: pre-wrap;
- word-spacing: 5px;
- letter-spacing: 1px;
- word-break: break-all;
- margin-bottom: 15px;
- background: #ecf8ff;
- border-left: 5px solid #50bfff;
- padding: 10px 15px;
- border-radius: 0 4px 4px 0;
- font-size: 14px;
- p {
- margin: 0;
- }
- }
- a {
- 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: 4px;
- font-size: 12px;
- background: #fdf6ec;
- padding: 0 8px;
- color: #e6a23c;
- }
- 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: 4px;
- &::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: 4px;
- 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: 10px 0;
- text-align: center;
- position: relative;
- user-select: none;
- i {
- position: relative;
- font-style: normal;
- cursor: pointer;
- color: var(--theme);
- &::after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 0;
- right: 0;
- width: 100%;
- height: 1px;
- background: var(--theme);
- transform: scaleX(0.25);
- opacity: 0;
- transition: transform 0.35s, opacity 0.35s;
- }
- &:hover::after {
- opacity: 1;
- transform: scaleX(1);
- }
- }
- }
- }
- &__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(--classB);
- .content {
- background: var(--classD);
- padding: 15px;
- border-radius: 4px;
- .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;
- &-item {
- width: 25%;
- padding: 7.5px;
- .contain {
- display: block;
- border-radius: 4px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 15px;
- color: #fff;
- word-break: break-all;
- .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;
- .avatar {
- width: 40px;
- height: 40px;
- min-width: 40px;
- min-height: 40px;
- border-radius: 50%;
- }
- }
- }
- }
- }
+ background: var(--background);
+ border-radius: 8px;
+ 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;
+ }
+ }
+ }
+ &__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(--classB);
+ &::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;
+ }
+ .meta {
+ display: flex;
+ flex-direction: column;
+ height: 35px;
+ justify-content: space-between;
+ .author {
+ .link {
+ font-weight: 500;
+ color: var(--theme);
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ .item {
+ display: flex;
+ align-items: center;
+ color: var(--minor);
+ font-size: 12px;
+ 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;
+ white-space: pre-wrap;
+ word-spacing: 5px;
+ letter-spacing: 1px;
+ word-break: break-all;
+ margin-bottom: 15px;
+ }
+ blockquote {
+ color: var(--routine);
+ line-height: 26px;
+ white-space: pre-wrap;
+ word-spacing: 5px;
+ letter-spacing: 1px;
+ word-break: break-all;
+ margin-bottom: 15px;
+ background: #ecf8ff;
+ border-left: 5px solid #50bfff;
+ padding: 10px 15px;
+ border-radius: 0 4px 4px 0;
+ font-size: 14px;
+ p {
+ margin: 0;
+ }
+ }
+ a {
+ 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: 4px;
+ font-size: 12px;
+ background: #fdf6ec;
+ padding: 0 8px;
+ color: #e6a23c;
+ }
+ 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: 4px;
+ &::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: 4px;
+ 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: 10px 0;
+ text-align: center;
+ position: relative;
+ user-select: none;
+ i {
+ position: relative;
+ font-style: normal;
+ cursor: pointer;
+ color: var(--theme);
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 1px;
+ background: var(--theme);
+ transform: scaleX(0.25);
+ opacity: 0;
+ transition: transform 0.35s, opacity 0.35s;
+ }
+ &:hover::after {
+ opacity: 1;
+ transform: scaleX(1);
+ }
+ }
+ }
+ }
+ &__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(--classB);
+ .content {
+ background: var(--classD);
+ padding: 15px;
+ border-radius: 4px;
+ .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: 4px;
+ 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;
+ }
+ }
+ }
+ }
}
.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 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;
+ }
}
diff --git a/assets/css/joe.normalize.css b/assets/css/joe.normalize.css
index bddf64d..c4f089c 100644
--- a/assets/css/joe.normalize.css
+++ b/assets/css/joe.normalize.css
@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--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: #303133;--box-shadow: none}
+*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}
diff --git a/assets/css/joe.normalize.scss b/assets/css/joe.normalize.scss
index 50bf144..fc2ad84 100644
--- a/assets/css/joe.normalize.scss
+++ b/assets/css/joe.normalize.scss
@@ -1,59 +1,60 @@
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- outline: none;
- -webkit-tap-highlight-color: transparent;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ outline: none;
+ -webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+ width: 8px;
+ height: 8px;
}
::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background: var(--seat);
+ border-radius: 4px;
+ background: var(--seat);
}
::-webkit-scrollbar-track {
- background: transparent;
+ background: transparent;
}
body {
- font-size: 14px;
- font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+ font-size: 14px;
+ /* 我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。 */
+ font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
body::before {
- content: '';
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
z-index: -520;
pointer-events: none;
}
input[type='text'] {
- -webkit-appearance: none;
- border-radius: 0;
- font-size: 13px;
- font-weight: 500;
+ -webkit-appearance: none;
+ border-radius: 0;
+ font-size: 13px;
+ font-weight: 500;
}
textarea {
- resize: none;
- -webkit-appearance: none;
+ resize: none;
+ -webkit-appearance: none;
}
li {
- list-style: none;
+ list-style: none;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
h1,
@@ -62,91 +63,71 @@ h3,
h4,
h5,
h6 {
- font-weight: 500;
+ font-weight: 500;
}
img {
- border: 0;
- vertical-align: middle;
+ border: 0;
+ vertical-align: middle;
}
img[src=''],
img:not([src]) {
- border: 0;
- opacity: 0;
+ border: 0;
+ opacity: 0;
}
svg,
canvas {
- vertical-align: middle;
+ vertical-align: middle;
}
button {
- cursor: pointer;
- -webkit-appearance: none;
- font-size: 13px;
+ cursor: pointer;
+ -webkit-appearance: none;
+ font-size: 13px;
}
table {
- border-collapse: collapse;
- border-spacing: 0;
+ border-collapse: collapse;
+ border-spacing: 0;
}
.joe_main {
- min-width: 0;
- flex: 1;
- padding: 15px 0;
+ min-width: 0;
+ flex: 1;
+ padding: 15px 0;
}
.joe_container {
- display: flex;
- width: 100%;
- margin: 0 auto;
- padding: 0 15px;
+ display: flex;
+ width: 100%;
+ margin: 0 auto;
+ padding: 0 15px;
}
@media (min-width: 576px) {
- .joe_container {
- max-width: 540px;
- }
+ .joe_container {
+ max-width: 540px;
+ }
}
@media (min-width: 768px) {
- .joe_container {
- max-width: 720px;
- }
+ .joe_container {
+ max-width: 720px;
+ }
}
@media (min-width: 992px) {
- .joe_container {
- max-width: 960px;
- }
+ .joe_container {
+ max-width: 960px;
+ }
}
@media (min-width: 1200px) {
- .joe_container {
- max-width: 1140px;
- }
+ .joe_container {
+ max-width: 1140px;
+ }
}
@media (min-width: 1400px) {
- .joe_container {
- max-width: 1320px;
- }
-}
-
-html {
- --background: #fff;
- --theme: #f24e4e;
- --main: #303133;
- --routine: #606266;
- --minor: #909399;
- --seat: #c0c4cc;
- --classA: #dcdfe6;
- --classB: #e4e7ed;
- --classC: #ebeef5;
- --classD: #f2f6fc;
- --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: #303133;
- --box-shadow: none;
+ .joe_container {
+ max-width: 1320px;
+ }
}
diff --git a/assets/js/joe.index.js b/assets/js/joe.index.js
index 60399fc..5a52091 100644
--- a/assets/js/joe.index.js
+++ b/assets/js/joe.index.js
@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
/* 初始化首页列表功能 */
{
- let queryData = { page: 1, pageSize: 10, type: 'created' }
+ let queryData = { page: 1, pageSize: 12, type: 'created' }
const initDom = () => {
$('.joe_index__list .joe_list').html('')
let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]')
@@ -82,7 +82,7 @@ document.addEventListener('DOMContentLoaded', () => {
pushDom()
$('.joe_index__title-title .item').on('click', async function () {
if ($(this).attr('data-type') === queryData.type) return
- queryData = { page: 1, pageSize: 10, type: $(this).attr('data-type') }
+ queryData = { page: 1, pageSize: 12, type: $(this).attr('data-type') }
initDom()
pushDom()
})
diff --git a/core/core.php b/core/core.php
index 06f6ce0..d4e0be5 100644
--- a/core/core.php
+++ b/core/core.php
@@ -11,7 +11,7 @@ function themeInit($self)
{
Helper::options()->commentsThreaded = true;
/* 强制显示一页15篇文章 */
- $self->parameter->pageSize = 15;
+ $self->parameter->pageSize = 12;
/* 主题开放API 路由规则 */
$path_info = $self->request->getPathinfo();
diff --git a/friends.php b/friends.php
index bc14080..f1e9cce 100644
--- a/friends.php
+++ b/friends.php
@@ -32,20 +32,44 @@
options->JFriends;
if ($friends_text) {
@@ -68,7 +92,7 @@
-
+
![<?php echo $item['name']; ?>](<?php echo $item['avatar']; ?>)
- 注意：您需要先增加友联链接页面，该项才会生效
+ 注意：您需要先增加友联链接页面（新增独立页面-右侧模板选择友联），该项才会生效
格式：博客名称 || 博客地址 || 博客头像 || 博客简介
其他：一行一个，一行代表一个友联'
);