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