diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css index 5d8d2b8..9e22946 100644 --- a/assets/css/joe.global.css +++ b/assets/css/joe.global.css @@ -1 +1 @@ -.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::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(../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__below{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_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/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)}.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 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:-2px;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{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 8px 10px -5px rgba(0,0,0,0.25)}.joe_detail__article ol,.joe_detail__article ul{color:var(--routine);margin-bottom:20px;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-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;margin-bottom:15px;-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:10px 15px;border-radius:4px}.joe_detail__copyright .content .item{display:flex;align-items:center;color:var(--minor);line-height:26px;white-space:nowrap}.joe_detail__copyright .content .item .icon{width:18px;height:18px;min-width:18px;min-height:18px;margin-right:8px}.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__related{padding-top:15px}.joe_detail__related-title{border-left:3px solid var(--theme);padding-left:15px;font-size:18px;margin-bottom:15px;color:var(--main)}.joe_detail__related-list{display:flex;margin:0 -7.5px}.joe_detail__related-list .item{width:25%;padding:0 7.5px}.joe_detail__related-list .item .link{display:block;transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s}.joe_detail__related-list .item .link:hover{-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__related-list .item .link .inner{position:relative}.joe_detail__related-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:4px 4px 0 0;transition:opacity 0.35s}.joe_detail__related-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}@-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%}} +.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::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/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__below{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_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/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 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:-2px;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 8px 10px -5px rgba(0,0,0,0.25)}.joe_detail__article ol,.joe_detail__article ul{color:var(--routine);margin-bottom:20px;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-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;margin-bottom:15px;-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:10px 15px;border-radius:4px}.joe_detail__copyright .content .item{display:flex;align-items:center;color:var(--minor);line-height:26px;white-space:nowrap}.joe_detail__copyright .content .item .icon{width:18px;height:18px;min-width:18px;min-height:18px;margin-right:8px}.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_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_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_time_count svg{-webkit-animation:rotateCount 3s infinite;animation:rotateCount 3s infinite;margin:0 3px}@-webkit-keyframes rotateCount{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateCount{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-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%}} diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss index 34061a5..05762e8 100644 --- a/assets/css/joe.global.scss +++ b/assets/css/joe.global.scss @@ -1,1496 +1,1517 @@ .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; - } - &::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(../img/search.png); - background-size: 100% 100%; - transition: transform 0.35s; - transform: translate3d(100%, -50%, 0) rotateY(180deg); - } - } - } - &__below { - 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); - } - } - } - } - } - } + 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; + } + &::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/assets/img/search.png); + background-size: 100% 100%; + transition: transform 0.35s; + transform: translate3d(100%, -50%, 0) rotateY(180deg); + } + } + } + &__below { + 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); + } + } + } + } + } + } } .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/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/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); - &__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%; - } - } - 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: -2px; - 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 { - 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 8px 10px -5px rgba(0, 0, 0, 0.25); - } - } - ol, - ul { - color: var(--routine); - margin-bottom: 20px; - 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); - } - } - } - } - &-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; - margin-bottom: 15px; - 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: 10px 15px; - border-radius: 4px; - .item { - display: flex; - align-items: center; - color: var(--minor); - line-height: 26px; - white-space: nowrap; - .icon { - width: 18px; - height: 18px; - min-width: 18px; - min-height: 18px; - margin-right: 8px; - } - .link { - color: var(--minor); - &:hover { - color: var(--theme); - } - } - .text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - &__related { - padding-top: 15px; - &-title { - border-left: 3px solid var(--theme); - padding-left: 15px; - font-size: 18px; - margin-bottom: 15px; - color: var(--main); - } - &-list { - display: flex; - margin: 0 -7.5px; - .item { - width: 25%; - padding: 0 7.5px; - .link { - display: block; - transition: transform 0.25s; - &:hover { - transform: translate3d(0, -3px, 0); - } - .inner { - position: relative; - .image { - width: 100%; - height: 125px; - object-fit: cover; - border-radius: 4px 4px 0 0; - transition: opacity 0.35s; - } - .title { - font-size: 13px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - padding: 0 8px; - line-height: 32px; - color: var(--minor); - background: var(--classD); - border-radius: 0 0 5px 5px; - transition: background 0.35s; - } - } - } - } - } - } + 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%; + } + } + 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: -2px; + 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 8px 10px -5px rgba(0, 0, 0, 0.25); + } + } + ol, + ul { + color: var(--routine); + margin-bottom: 20px; + 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); + } + } + } + } + &-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; + margin-bottom: 15px; + 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: 10px 15px; + border-radius: 4px; + .item { + display: flex; + align-items: center; + color: var(--minor); + line-height: 26px; + white-space: nowrap; + .icon { + width: 18px; + height: 18px; + min-width: 18px; + min-height: 18px; + margin-right: 8px; + } + .link { + color: var(--minor); + &:hover { + color: var(--theme); + } + } + .text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } +} + +.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); + } + } + } +} + +.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); + } + } + } +} + +.joe_time_count svg { + animation: rotateCount 3s infinite; + margin: 0 3px; +} + +@keyframes rotateCount { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } } @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%; + } } diff --git a/assets/css/joe.normalize.scss b/assets/css/joe.normalize.scss index cb4d8e6..42a3ee0 100644 --- a/assets/css/joe.normalize.scss +++ b/assets/css/joe.normalize.scss @@ -1,48 +1,48 @@ * { - 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; + width: 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; - background: #f5f5f5; - font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; + font-size: 14px; + background: #f5f5f5; + font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; } 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, @@ -51,91 +51,91 @@ 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_container { - display: flex; - max-width: 1140px; - margin: 0 auto; - padding: 0 15px; + display: flex; + max-width: 1140px; + margin: 0 auto; + padding: 0 15px; } .joe_main { - min-width: 0; - flex: 1; - padding: 15px 0; + min-width: 0; + flex: 1; + padding: 15px 0; } @media (max-width: 1200px) { - .joe_container { - max-width: 960px; - } + .joe_container { + max-width: 960px; + } } @media (max-width: 992px) { - .joe_container { - max-width: 720px; - } + .joe_container { + max-width: 720px; + } } @media (max-width: 768px) { - .joe_container { - max-width: 540px; - } + .joe_container { + max-width: 540px; + } } @media (max-width: 576px) { - .joe_container { - max-width: 100%; - } + .joe_container { + max-width: 100%; + } } html { - --background: #fff; + --background: #fff; - --theme: #f24e4e; + --theme: #f24e4e; - --main: #303133; - --routine: #606266; - --minor: #909399; - --seat: #c0c4cc; + --main: #303133; + --routine: #606266; + --minor: #909399; + --seat: #c0c4cc; - --classA: #dcdfe6; - --classB: #e4e7ed; - --classC: #ebeef5; - --classD: #f2f6fc; + --classA: #dcdfe6; + --classB: #e4e7ed; + --classC: #ebeef5; + --classD: #f2f6fc; - --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); + --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); - --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); + --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22); } html[dark='true'] { - --background: #303133; - --box-shadow: none; + --background: #303133; + --box-shadow: none; } diff --git a/assets/css/joe.post.css b/assets/css/joe.post.css index c469312..4fd6a3e 100644 --- a/assets/css/joe.post.css +++ b/assets/css/joe.post.css @@ -1 +1 @@ -.joe_bread{padding-top:15px}.joe_bread__bread{display:flex;align-items:center}.joe_bread__bread .line{color:var(--seat);padding:0 8px}.joe_bread__bread .item{color:var(--minor);white-space:nowrap}.joe_bread__bread .item .link{color:var(--routine);transition:color 0.35s}.joe_bread__bread .item .link:hover{color:var(--theme)}.joe_bread__bread .item .icon{width:15px;height:15px;min-width:15px;min-height:15px;fill:var(--routine);margin-right:2px}.joe_bread__bread .item:first-child{display:flex;align-items:center}.joe_post__page{display:flex;align-items:center} +.joe_bread{padding-top:15px}.joe_bread__bread{display:flex;align-items:center}.joe_bread__bread .line{color:var(--seat);padding:0 8px}.joe_bread__bread .item{color:var(--minor);white-space:nowrap}.joe_bread__bread .item .link{color:var(--routine);transition:color 0.35s}.joe_bread__bread .item .link:hover{color:var(--theme)}.joe_bread__bread .item .icon{width:15px;height:15px;min-width:15px;min-height:15px;fill:var(--routine);margin-right:2px}.joe_bread__bread .item:first-child{display:flex;align-items:center} diff --git a/assets/css/joe.post.scss b/assets/css/joe.post.scss index fda839d..494a16a 100644 --- a/assets/css/joe.post.scss +++ b/assets/css/joe.post.scss @@ -1,44 +1,34 @@ .joe_bread { - padding-top: 15px; - &__bread { - display: flex; - align-items: center; - .line { - color: var(--seat); - padding: 0 8px; - } - .item { - color: var(--minor); - white-space: nowrap; - .link { - color: var(--routine); - transition: color 0.35s; - &:hover { - color: var(--theme); - } - } - .icon { - width: 15px; - height: 15px; - min-width: 15px; - min-height: 15px; - fill: var(--routine); - margin-right: 2px; - } - &:first-child { - display: flex; - align-items: center; - } - } - } -} - -.joe_post { - &__page { - display: flex; - align-items: center; - &-item{ - - } - } + padding-top: 15px; + &__bread { + display: flex; + align-items: center; + .line { + color: var(--seat); + padding: 0 8px; + } + .item { + color: var(--minor); + white-space: nowrap; + .link { + color: var(--routine); + transition: color 0.35s; + &:hover { + color: var(--theme); + } + } + .icon { + width: 15px; + height: 15px; + min-width: 15px; + min-height: 15px; + fill: var(--routine); + margin-right: 2px; + } + &:first-child { + display: flex; + align-items: center; + } + } + } } diff --git a/assets/js/joe.config.js b/assets/js/joe.config.js index 58552e1..15e191b 100644 --- a/assets/js/joe.config.js +++ b/assets/js/joe.config.js @@ -1,74 +1 @@ -document.addEventListener("DOMContentLoaded", function () { - const TabItems = document.querySelectorAll(".joe_config__aside .item"); - const Notice = document.querySelector(".joe_config__notice"); - const Form = document.querySelector(".joe_config > form"); - const Content = document.querySelectorAll(".joe_content"); - TabItems.forEach(function (item) { - item.addEventListener("click", function () { - TabItems.forEach(function (_item) { - _item.classList.remove("active"); - }); - item.classList.add("active"); - let current = item.getAttribute("data-current"); - sessionStorage.setItem("joe_config_current", current); - if (current === "joe_notice") { - Notice.style.display = "block"; - Form.style.display = "none"; - } else { - Notice.style.display = "none"; - Form.style.display = "block"; - } - Content.forEach(function (_item) { - _item.style.display = "none"; - let flag = _item.classList.contains(current); - if (flag) { - _item.style.display = "block"; - } - }); - }); - }); - if (sessionStorage.getItem("joe_config_current")) { - let current = sessionStorage.getItem("joe_config_current"); - if (current === "joe_notice") { - Notice.style.display = "block"; - Form.style.display = "none"; - } else { - Form.style.display = "block"; - Notice.style.display = "none"; - } - TabItems.forEach(function (item) { - let _current = item.getAttribute("data-current"); - if (_current === current) item.classList.add("active"); - }); - Content.forEach(function (_item) { - if (_item.classList.contains(current)) { - _item.style.display = "block"; - } - }); - } else { - TabItems[0].classList.add("active"); - Notice.style.display = "block"; - Form.style.display = "none"; - } - const xhr = new XMLHttpRequest(); - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { - let res = JSON.parse(xhr.responseText); - if (res.success) { - Notice.innerHTML = res.content; - } else { - Notice.innerHTML = "请求失败！"; - } - } else { - Notice.innerHTML = "请求失败！"; - } - } - }; - xhr.open( - "get", - "https://ae.js.cn/qqshoucang.php?key=18e958d8c7fa5d435844f95c9f254fca", - true - ); - xhr.send(null); -}); +"use strict";document.addEventListener("DOMContentLoaded",function(){var a=document.querySelectorAll(".joe_config__aside .item"),b=document.querySelector(".joe_config__notice"),c=document.querySelector(".joe_config > form"),d=document.querySelectorAll(".joe_content");if(a.forEach(function(f){f.addEventListener("click",function(){a.forEach(function(h){h.classList.remove("active")}),f.classList.add("active");var g=f.getAttribute("data-current");sessionStorage.setItem("joe_config_current",g),"joe_notice"===g?(b.style.display="block",c.style.display="none"):(b.style.display="none",c.style.display="block"),d.forEach(function(h){h.style.display="none";var i=h.classList.contains(g);i&&(h.style.display="block")})})}),sessionStorage.getItem("joe_config_current")){var f=sessionStorage.getItem("joe_config_current");"joe_notice"===f?(b.style.display="block",c.style.display="none"):(c.style.display="block",b.style.display="none"),a.forEach(function(g){var h=g.getAttribute("data-current");h===f&&g.classList.add("active")}),d.forEach(function(g){g.classList.contains(f)&&(g.style.display="block")})}else a[0].classList.add("active"),b.style.display="block",c.style.display="none";var e=new XMLHttpRequest;e.onreadystatechange=function(){if(4===e.readyState)if(200<=e.status&&300>e.status||304===e.status){var f=JSON.parse(e.responseText);b.innerHTML=f.success?f.content:"\u8BF7\u6C42\u5931\u8D25\uFF01"}else b.innerHTML="\u8BF7\u6C42\u5931\u8D25\uFF01"},e.open("get","https://ae.js.cn/qqshoucang.php?key=18e958d8c7fa5d435844f95c9f254fca",!0),e.send(null)}); \ No newline at end of file diff --git a/assets/js/joe.global.js b/assets/js/joe.global.js index 2abc6e5..8fc98c3 100644 --- a/assets/js/joe.global.js +++ b/assets/js/joe.global.js @@ -1,349 +1,168 @@ window.Joe = function () { - /* 头部高度 */ - const Header_Height = $('.joe_header').height(); + /* 解决移动端Hover问题 */ + { + document.addEventListener('touchstart', () => {}) + } - /* 解决移动端Hover问题 */ - document.addEventListener('touchstart', () => {}); + /* 激活全局下拉框功能 */ + { + $('.joe_dropdown').each(function (index, item) { + const menu = $(this).find('.joe_dropdown__menu') + /* 弹出方式 */ + const trigger = $(item).attr('trigger') || 'click' + /* 弹出高度 */ + const placement = $(item).attr('placement') || $(this).height() || 0 + /* 设置弹出高度 */ + menu.css('top', placement) + /* 如果是hover，则绑定hover事件 */ + if (trigger === 'hover') { + $(this).hover( + () => $(this).addClass('active'), + () => $(this).removeClass('active') + ) + } else { + /* 否则绑定点击事件 */ + $(this).on('click', function (e) { + $(this).toggleClass('active') + $(document).one('click', () => $(this).removeClass('active')) + e.stopPropagation() + }) + menu.on('click', e => e.stopPropagation()) + } + }) + } - /* 设置侧边栏最后一个元素的高度 */ - $('.joe_aside .joe_aside__item:last-child').css('top', Header_Height + 15); + /* 激活全局返回顶部功能 */ + { + const handleScroll = () => { + let scrollTop = document.documentElement.scrollTop || document.body.scrollTop + scrollTop > 300 ? $('.joe_action .joe_action_item.scroll').addClass('active') : $('.joe_action .joe_action_item.scroll').removeClass('active') + } + handleScroll() + $(window).on('scroll', () => handleScroll()) + $('.joe_action .joe_action_item.scroll').on('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })) + } - /* Global Dropdown */ - $('.joe_dropdown').each(function (index, item) { - const menu = $(this).find('.joe_dropdown__menu'); - /* 弹出方式 */ - const trigger = $(item).attr('trigger') || 'click'; - /* 弹出高度 */ - const placement = $(item).attr('placement') || $(this).height() || 0; - /* 设置弹出高度 */ - menu.css('top', placement); - /* 如果是hover，则绑定hover事件 */ - if (trigger === 'hover') { - $(this).hover( - () => $(this).addClass('active'), - () => $(this).removeClass('active') - ); - } else { - /* 否则绑定点击事件 */ - $(this).on('click', function (e) { - $(this).toggleClass('active'); - $(document).one('click', () => $(this).removeClass('active')); - e.stopPropagation(); - }); - menu.on('click', e => e.stopPropagation()); - } - }); + /* 激活侧边栏人生倒计时功能 */ + { + if ($('.joe_aside__item.timelife').length !== 0) { + let timelife = [ + { title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' }, + { title: '这周已经过去', endTitle: '天', num: 0, percent: '0%' }, + { title: '本月已经过去', endTitle: '天', num: 0, percent: '0%' }, + { title: '今年已经过去', endTitle: '个月', num: 0, percent: '0%' } + ] + { + let nowDate = +new Date() + let todayStartDate = new Date(new Date().toLocaleDateString()).getTime() + let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60 + let todayPassHoursPercent = (todayPassHours / 24) * 100 + timelife[0].num = parseInt(todayPassHours) + timelife[0].percent = parseInt(todayPassHoursPercent) + '%' + } + { + let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 } + let weekDay = weeks[new Date().getDay()] + let weekDayPassPercent = (weekDay / 7) * 100 + timelife[1].num = parseInt(weekDay) + timelife[1].percent = parseInt(weekDayPassPercent) + '%' + } + { + let year = new Date().getFullYear() + let date = new Date().getDate() + let month = new Date().getMonth() + 1 + let monthAll = new Date(year, month, 0).getDate() + let monthPassPercent = (date / monthAll) * 100 + timelife[2].num = date + timelife[2].percent = parseInt(monthPassPercent) + '%' + } + { + let month = new Date().getMonth() + 1 + let yearPass = (month / 12) * 100 + timelife[3].num = month + timelife[3].percent = parseInt(yearPass) + '%' + } + let htmlStr = '' + timelife.forEach((item, index) => { + htmlStr += ` +
+
+ ${item.title} + ${item.num} + ${item.endTitle} +
+
+
+
+
+
${item.percent}
+
+
+ ` + }) + $('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr) + } + } - /* Aside Timelife */ - if ($('.joe_aside__item.timelife').length !== 0) { - let timelife = [ - { title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' }, - { title: '这周已经过去', endTitle: '天', num: 0, percent: '0%' }, - { title: '本月已经过去', endTitle: '天', num: 0, percent: '0%' }, - { title: '今年已经过去', endTitle: '个月', num: 0, percent: '0%' } - ]; - { - let nowDate = +new Date(); - let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); - let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; - let todayPassHoursPercent = (todayPassHours / 24) * 100; - timelife[0].num = parseInt(todayPassHours); - timelife[0].percent = parseInt(todayPassHoursPercent) + '%'; - } - { - let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }; - let weekDay = weeks[new Date().getDay()]; - let weekDayPassPercent = (weekDay / 7) * 100; - timelife[1].num = parseInt(weekDay); - timelife[1].percent = parseInt(weekDayPassPercent) + '%'; - } - { - let year = new Date().getFullYear(); - let date = new Date().getDate(); - let month = new Date().getMonth() + 1; - let monthAll = new Date(year, month, 0).getDate(); - let monthPassPercent = (date / monthAll) * 100; - timelife[2].num = date; - timelife[2].percent = parseInt(monthPassPercent) + '%'; - } - { - let month = new Date().getMonth() + 1; - let yearPass = (month / 12) * 100; - timelife[3].num = month; - timelife[3].percent = parseInt(yearPass) + '%'; - } - let htmlStr = ''; - timelife.forEach((item, index) => { - htmlStr += ` -
-
- ${item.title} - ${item.num} - ${item.endTitle} -
-
-
-
-
-
${item.percent}
-
-
- `; - }); - $('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr); - } + /* 激活侧边栏天气功能 */ + { + if ($('.joe_aside__item.weather').length !== 0) { + const key = $('.joe_aside__item.weather').attr('data-key') + const style = $('.joe_aside__item.weather').attr('data-style') + const aqiColor = { 1: 'FFFFFF', 2: '4A4A4A', 3: 'FFFFFF' } + window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } } + } + } - /* Aside Weather */ - if ($('.joe_aside__item.weather').length !== 0) { - const key = $('.joe_aside__item.weather').attr('data-key'); - const style = $('.joe_aside__item.weather').attr('data-style'); - const aqiColor = { 1: 'FFFFFF', 2: '4A4A4A', 3: 'FFFFFF' }; - window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } }; - } + /* 激活侧边栏排行榜功能 */ + { + if ($('.joe_aside__item.ranking').length !== 0) { + $.ajax({ + url: Joe.prototype.BASE_API, + type: 'POST', + data: { routeType: 'aside_ranking' }, + success(res) { + $('.joe_aside__item.ranking .joe_aside__item-title .text').html(res.title) + let htmlStr = '' + if (res.code === 1) { + res.data.forEach((item, index) => { + htmlStr += ` +
  • + ${index + 1} + ${item.title} +
    • + ` + }) + } else { + htmlStr += `
  • 数据抓取异常！
    • ` + } + $('.joe_aside__item.ranking .joe_aside__item-contain').html(htmlStr) + } + }) + } + } - /* Aside Ranking */ - if ($('.joe_aside__item.ranking').length !== 0) { - $.ajax({ - url: Joe.prototype.BASE_API, - type: 'POST', - data: { routeType: 'aside_ranking' }, - success(res) { - $('.joe_aside__item.ranking .joe_aside__item-title .text').html(res.title); - let htmlStr = ''; - if (res.code === 1) { - res.data.forEach((item, index) => { - htmlStr += ` -
  • - ${index + 1} - ${item.title} -
    • - `; - }); - } else { - htmlStr += `
  • 数据抓取异常！
    • `; - } - $('.joe_aside__item.ranking .joe_aside__item-contain').html(htmlStr); - } - }); - } + /* 设置侧边栏最后一个元素的高度 */ + { + $('.joe_aside__item:last-child').css('top', $('.joe_header').height() + 15) + } - /* Index Swiper */ - if ($('.joe_index__banner .swiper-container').length > 0) { - let direction = 'horizontal'; - if (!Joe.prototype.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical'; - new Swiper('.swiper-container', { direction, loop: true, autoplay: true, mousewheel: true, pagination: { el: '.swiper-pagination' } }); - } - - /* Index List */ - if ($('.joe_index__list').length > 0) { - let queryData = { page: 1, pageSize: 10, type: 'created' }; - const initDom = () => { - $('.joe_index__list .joe_list').html(''); - let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]'); - let activeLine = $('.joe_index__title-title .line'); - activeItem.addClass('active').siblings().removeClass('active'); - activeLine.css({ left: activeItem.position().left, width: activeItem.width() }); - }; - const pushDom = () => { - return new Promise((reslove, reject) => { - $('.joe_load').attr('loading', true); - $('.joe_load').html('加载中'); - $('.joe_index__list .joe_list__loading').show(); - $.ajax({ - url: Joe.prototype.BASE_API, - type: 'POST', - data: { routeType: 'publish_list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type }, - success(res) { - if (res.data.length === 0) { - $('.joe_load').remove(); - $('.joe_index__list .joe_list__loading').hide(); - return; - } - res.data.forEach(_ => { - $('.joe_index__list .joe_list').append(` -
  • -
    - - ${_.title} - - - - - - -
    - -
    ${_.title}
    -     - ${_.abstract} -
    -
      -
    • ${_.created}
      • -
    • ${_.views} 阅读
      • -
    • ${_.commentsNum} 评论
      • -
    • ${_.agree} 点赞
      • -
    -
    - - - - ${_.category.length && _.category[0].name} -
    -
    -
    -
    • - `); - }); - $('.joe_load').removeAttr('loading'); - $('.joe_load').html('查看更多'); - $('.joe_index__list .joe_list__loading').hide(); - new LazyLoad('.list_lazyload'); - reslove(res.data.length > 0 ? res.data.length - 1 : 0); - } - }); - }); - }; - initDom(); - 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') }; - initDom(); - pushDom(); - }); - $('.joe_load').on('click', async function () { - if ($(this).attr('loading')) return; - queryData.page++; - let length = await pushDom(); - length = $('.joe_index__list .joe_list .joe_list__item').length - length; - const queryElement = `.joe_index__list .joe_list .joe_list__item:nth-child(${length})`; - const offset = $(queryElement).offset().top - Header_Height; - window.scrollTo({ top: offset - 15, behavior: 'smooth' }); - }); - const wow = $('.joe_index__list').attr('data-wow'); - if (wow !== 'off' && wow) { - new WOW({ - boxClass: 'wow', - animateClass: `animated ${wow}`, - offset: 0, - mobile: true, - live: true, - scrollContainer: null - }).init(); - } - } - - /* Post & Page */ - if ($('.joe_detail').length > 0) { - /* Baidu Record */ - $.ajax({ - url: Joe.prototype.BASE_API, - type: 'POST', - data: { routeType: 'baidu_record', site: window.location.href }, - success(res) { - if (res.data && res.data === '已收录') { - $('#Joe_Baidu_Record').css('color', '#67C23A'); - $('#Joe_Baidu_Record').html('已收录'); - } else { - const url = `https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}`; - $('#Joe_Baidu_Record').html(`未收录，提交收录`); - } - } - }); - /* 初始化代码高亮 */ - Prism.highlightAll(); - /* 初始化图片预览 */ - $('.joe_detail__article img:not(img.owo_image)').each(function () { - $(this).wrap($(`
    `)); - }); - /* 初始化超链接为新窗口打开 */ - $('.joe_detail__article a').each(function () { - $(this).attr('target', '_blank'); - }); - /* 当前页的CID */ - const cid = $('.joe_detail').attr('data-cid'); - /* 浏览量功能 */ - { - let viewsArr = localStorage.getItem(Joe.prototype.encryption('views')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('views')))) : []; - const flag = viewsArr.includes(cid); - if (!flag) { - $.ajax({ - url: Joe.prototype.BASE_API, - type: 'POST', - data: { routeType: 'handle_views', cid }, - success(res) { - if (res.code !== 1) return; - $('#Joe_Article_Views').html(`${res.data.views} 阅读`); - viewsArr.push(cid); - const name = Joe.prototype.encryption('views'); - const val = Joe.prototype.encryption(JSON.stringify(viewsArr)); - localStorage.setItem(name, val); - } - }); - } - } - /* 点赞功能 */ - { - /* 页面首次进入，设置当前文章点赞状态 */ - let agreeArr = localStorage.getItem(Joe.prototype.encryption('agree')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('agree')))) : []; - if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active'); - else $('.joe_detail__agree .icon-2').addClass('active'); - /* 点击按钮，切换当前页面的点赞和取消点赞 */ - let _loading = false; // 设置节流 - $('.joe_detail__agree .icon').on('click', function () { - if (_loading) return; - _loading = true; // 开启节流 - agreeArr = localStorage.getItem(Joe.prototype.encryption('agree')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('agree')))) : []; - let flag = agreeArr.includes(cid); - $.ajax({ - url: Joe.prototype.BASE_API, - type: 'POST', - data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' }, - success(res) { - if (res.code !== 1) return; - $('.joe_detail__agree .text').html(res.data.agree); - if (flag) { - const index = agreeArr.findIndex(_ => _ === cid); - agreeArr.splice(index, 1); - /* 操作网页取消点赞样式 */ - $('.joe_detail__agree .icon-1').removeClass('active'); - $('.joe_detail__agree .icon-2').addClass('active'); - $('.joe_detail__agree .icon').removeClass('active'); - } else { - agreeArr.push(cid); - /* 操作网页点赞样式 */ - $('.joe_detail__agree .icon-2').removeClass('active'); - $('.joe_detail__agree .icon-1').addClass('active'); - $('.joe_detail__agree .icon').addClass('active'); - } - const name = Joe.prototype.encryption('agree'); - const val = Joe.prototype.encryption(JSON.stringify(agreeArr)); - localStorage.setItem(name, val); - }, - complete() { - _loading = false; // 关闭节流 - } - }); - }); - } - } - - new LazyLoad('.lazyload'); -}; + new LazyLoad('.lazyload') +} /* 加密 */ -Joe.prototype.encryption = str => window.btoa(unescape(encodeURIComponent(str))); +Joe.prototype.encryption = str => window.btoa(unescape(encodeURIComponent(str))) /* 解密 */ -Joe.prototype.decrypt = str => decodeURIComponent(escape(window.atob(str))); +Joe.prototype.decrypt = str => decodeURIComponent(escape(window.atob(str))) /* 请求URL */ -Joe.prototype.BASE_API = '/index.php/joe/api'; +Joe.prototype.BASE_API = '/index.php/joe/api' /* 是否是手机 */ -Joe.prototype.IS_MOBILE = /windows phone|iphone|android/gi.test(window.navigator.userAgent); +Joe.prototype.IS_MOBILE = /windows phone|iphone|android/gi.test(window.navigator.userAgent) /* 随机值 */ Joe.prototype.getRandomIntInclusive = (min, max) => { - min = Math.ceil(min); - max = Math.floor(max); - return Math.floor(Math.random() * (max - min + 1) + min); -}; + min = Math.ceil(min) + max = Math.floor(max) + return Math.floor(Math.random() * (max - min + 1) + min) +} -$(document).ready(() => Joe()); +document.addEventListener('DOMContentLoaded', () => Joe()) diff --git a/assets/js/joe.index.js b/assets/js/joe.index.js new file mode 100644 index 0000000..78481d2 --- /dev/null +++ b/assets/js/joe.index.js @@ -0,0 +1,113 @@ +window.onload = () => { + /* 激活轮播图功能 */ + { + if ($('.joe_index__banner .swiper-container').length !== 0) { + let direction = 'horizontal' + if (!Joe.prototype.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical' + new Swiper('.swiper-container', { direction, loop: true, autoplay: true, mousewheel: true, pagination: { el: '.swiper-pagination' } }) + } + } + + /* 初始化首页列表功能 */ + { + let queryData = { page: 1, pageSize: 10, type: 'created' } + const initDom = () => { + $('.joe_index__list .joe_list').html('') + let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]') + let activeLine = $('.joe_index__title-title .line') + activeItem.addClass('active').siblings().removeClass('active') + activeLine.css({ left: activeItem.position().left, width: activeItem.width() }) + } + const pushDom = () => { + return new Promise((reslove, reject) => { + $('.joe_load').attr('loading', true) + $('.joe_load').html('加载中') + $('.joe_index__list .joe_list__loading').show() + $.ajax({ + url: Joe.prototype.BASE_API, + type: 'POST', + data: { routeType: 'publish_list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type }, + success(res) { + if (res.data.length === 0) { + $('.joe_load').remove() + $('.joe_index__list .joe_list__loading').hide() + return + } + res.data.forEach(_ => { + $('.joe_index__list .joe_list').append(` +
  • +
    + + ${_.title} + + + + + + +
    + +
    ${_.title}
    +     + ${_.abstract} +
    +
      +
    • ${_.created}
      • +
    • ${_.views} 阅读
      • +
    • ${_.commentsNum} 评论
      • +
    • ${_.agree} 点赞
      • +
    +
    + + + + ${_.category.length && _.category[0].name} +
    +
    +
    +
    • + `) + }) + $('.joe_load').removeAttr('loading') + $('.joe_load').html('查看更多') + $('.joe_index__list .joe_list__loading').hide() + new LazyLoad('.list_lazyload') + reslove(res.data.length > 0 ? res.data.length - 1 : 0) + } + }) + }) + } + initDom() + 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') } + initDom() + pushDom() + }) + $('.joe_load').on('click', async function () { + if ($(this).attr('loading')) return + queryData.page++ + let length = await pushDom() + length = $('.joe_index__list .joe_list .joe_list__item').length - length + const queryElement = `.joe_index__list .joe_list .joe_list__item:nth-child(${length})` + const offset = $(queryElement).offset().top - $('.joe_header').height() + window.scrollTo({ top: offset - 15, behavior: 'smooth' }) + }) + } + + /* 激活列表特效 */ + { + const wow = $('.joe_index__list').attr('data-wow') + if (wow !== 'off' && wow) { + new WOW({ + boxClass: 'wow', + animateClass: `animated ${wow}`, + offset: 0, + mobile: true, + live: true, + scrollContainer: null + }).init() + } + } +} diff --git a/assets/js/joe.lazyload.js b/assets/js/joe.lazyload.js index db09e4d..d7ab10a 100644 --- a/assets/js/joe.lazyload.js +++ b/assets/js/joe.lazyload.js @@ -1 +1 @@ -class LazyLoad{constructor(t){this.imglist=Array.from($(t)),this.init()}canILoad(){let t=this.imglist;for(let i=t.length;i--;)this.getBound(t[i])&&this.loadImage(t[i],i)}getBound(t){let i=t.getBoundingClientRect(),n=window.innerHeight;return i.top<=n}loadImage(t,i){let n=t.getAttribute("data-original");t.src=n,this.imglist.splice(i,1)}bindEvent(){$(window).on("scroll",()=>this.imglist.length&&this.canILoad()),$(window).on("resize",()=>this.imglist.length&&this.canILoad())}init(){this.canILoad(),this.bindEvent()}} \ No newline at end of file +'use strict';var _createClass=function(){function a(b,c){for(var e,d=0;d { + /* 获取本篇文章百度收录情况 */ + { + $.ajax({ + url: Joe.prototype.BASE_API, + type: 'POST', + data: { routeType: 'baidu_record', site: window.location.href }, + success(res) { + if (res.data && res.data === '已收录') { + $('#Joe_Baidu_Record').css('color', '#67C23A') + $('#Joe_Baidu_Record').html('已收录') + } else { + const url = `https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}` + $('#Joe_Baidu_Record').html(`未收录，提交收录`) + } + } + }) + } + + /* 激活代码高亮 */ + { + Prism.highlightAll() + } + + /* 激活图片预览功能 */ + { + $('.joe_detail__article img:not(img.owo_image)').each(function () { + $(this).wrap($(`
    `)) + }) + } + + /* 设置文章内的链接为新窗口打开 */ + { + $('.joe_detail__article a').each(function () { + $(this).attr('target', '_blank') + }) + } + + /* 当前页的CID */ + const cid = $('.joe_detail').attr('data-cid') + + /* 激活浏览功能 */ + { + let viewsArr = localStorage.getItem(Joe.prototype.encryption('views')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('views')))) : [] + const flag = viewsArr.includes(cid) + if (!flag) { + $.ajax({ + url: Joe.prototype.BASE_API, + type: 'POST', + data: { routeType: 'handle_views', cid }, + success(res) { + if (res.code !== 1) return + $('#Joe_Article_Views').html(`${res.data.views} 阅读`) + viewsArr.push(cid) + const name = Joe.prototype.encryption('views') + const val = Joe.prototype.encryption(JSON.stringify(viewsArr)) + localStorage.setItem(name, val) + } + }) + } + } + + /* 激活文章点赞功能 */ + { + let agreeArr = localStorage.getItem(Joe.prototype.encryption('agree')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('agree')))) : [] + if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active') + else $('.joe_detail__agree .icon-2').addClass('active') + let _loading = false + $('.joe_detail__agree .icon').on('click', function () { + if (_loading) return + _loading = true + agreeArr = localStorage.getItem(Joe.prototype.encryption('agree')) ? JSON.parse(Joe.prototype.decrypt(localStorage.getItem(Joe.prototype.encryption('agree')))) : [] + let flag = agreeArr.includes(cid) + $.ajax({ + url: Joe.prototype.BASE_API, + type: 'POST', + data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' }, + success(res) { + if (res.code !== 1) return + $('.joe_detail__agree .text').html(res.data.agree) + if (flag) { + const index = agreeArr.findIndex(_ => _ === cid) + agreeArr.splice(index, 1) + $('.joe_detail__agree .icon-1').removeClass('active') + $('.joe_detail__agree .icon-2').addClass('active') + $('.joe_detail__agree .icon').removeClass('active') + } else { + agreeArr.push(cid) + $('.joe_detail__agree .icon-2').removeClass('active') + $('.joe_detail__agree .icon-1').addClass('active') + $('.joe_detail__agree .icon').addClass('active') + } + const name = Joe.prototype.encryption('agree') + const val = Joe.prototype.encryption(JSON.stringify(agreeArr)) + localStorage.setItem(name, val) + }, + complete() { + _loading = false + } + }) + }) + } +}) diff --git a/core/core.php b/core/core.php index 6fed19d..642fdd7 100644 --- a/core/core.php +++ b/core/core.php @@ -79,7 +79,7 @@ function timerStop($precision = 3) $mTime = explode(' ', microtime()); $timeEnd = $mTime[1] + $mTime[0]; $timeTotal = number_format($timeEnd - $timeStart, $precision); - echo $timeTotal < 1 ? $timeTotal * 1000 . "ms" : $timeTotal . "s"; + echo '' . ($timeTotal < 1 ? $timeTotal * 1000 . 'ms' : $timeTotal . 's') . ''; } function _getAvatarByMail($mail) diff --git a/functions.php b/functions.php index 5102a9b..c821d7f 100644 --- a/functions.php +++ b/functions.php @@ -162,6 +162,31 @@ function themeConfig($form) $JList_Animate->setAttribute('class', 'joe_content joe_global'); $form->addInput($JList_Animate->multiMode()); + $JFooter_Left = new Typecho_Widget_Helper_Form_Element_Textarea( + 'JFooter_Left', + NULL, + ' + 2019 - 2020 © Reach - Joe + ', + '自定义底部栏左侧内容（非必填）', + '介绍：用于修改全站底部左侧内容
    + 例如：2019 - 2020 © Reach - Joe ' + ); + $JFooter_Left->setAttribute('class', 'joe_content joe_global'); + $form->addInput($JFooter_Left); + + $JFooter_Right = new Typecho_Widget_Helper_Form_Element_Textarea( + 'JFooter_Right', + NULL, + 'RSS + MAP', + '自定义底部栏右侧内容（非必填）', + '介绍：用于修改全站底部右侧内容
    + 例如：<a href="/">首页</a> <a href="/">关于</a>' + ); + $JFooter_Right->setAttribute('class', 'joe_content joe_global'); + $form->addInput($JFooter_Right); + $JAside = new Typecho_Widget_Helper_Form_Element_Checkbox( 'JAside', array( diff --git a/index.php b/index.php index d07f6ac..6b09c40 100644 --- a/index.php +++ b/index.php @@ -15,6 +15,7 @@ need('public/include.php'); ?> + @@ -128,7 +129,7 @@
    - +
    - related(4)->to($item); ?> - have()) : ?> -
    -
    相关推荐
    - -
    - - \ No newline at end of file diff --git a/public/footer.php b/public/footer.php index 998890f..f273862 100644 --- a/public/footer.php +++ b/public/footer.php @@ -1 +1,19 @@ - +
    +
    + options->JFooter_Left() ?> + +
    +
    + options->JFooter_Right() ?> +
    +
    + + +
    +
    + + + +
    +
    \ No newline at end of file diff --git a/public/header.php b/public/header.php index 528be8f..00947f8 100644 --- a/public/header.php +++ b/public/header.php @@ -17,7 +17,7 @@
    - 更多 + 更多 diff --git a/public/include.php b/public/include.php index 3a76298..da330a7 100644 --- a/public/include.php +++ b/public/include.php @@ -5,8 +5,7 @@ header(); ?> -<?php $this->options->title(); ?> - +<?php $this->archiveTitle(array('category' => '分类 %s 下的文章', 'search' => '包含关键字 %s 的文章', 'tag' => '标签 %s 下的文章', 'author' => '%s 发布的文章'), '', ' - '); ?><?php $this->options->title(); ?> @@ -14,7 +13,6 @@ -