diff --git a/assets/css/joe.owo.css b/assets/css/joe.owo.css index b1c55cc..dcd6c25 100644 --- a/assets/css/joe.owo.css +++ b/assets/css/joe.owo.css @@ -1 +1 @@ -.OwO{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.OwO:hover .OwO-logo{color:#444}.OwO.OwO-open .OwO-logo{border-bottom:none;color:#444;margin-bottom:10px}.OwO.OwO-open .OwO-logo span{-webkit-animation:5s ease-in-out 0s infinite normal none running a;animation:5s ease-in-out 0s infinite normal none running a}.OwO.OwO-open .OwO-body{display:block}.OwO.OwO-up .OwO-body{top:inherit;bottom:21px;border-radius:4px 4px 4px 0px}.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0px}.OwO.OwO-up.OwO-open .OwO-logo{border-right:1px solid #ddd;border-bottom:1px solid #ddd;border-left:1px solid #ddd;-o-border-image:initial;border-image:initial;border-top:none}.OwO .OwO-logo{position:relative;display:inline-block;color:#888;cursor:pointer;z-index:2}.OwO .OwO-logo span{display:flex;align-items:center;height:32px;line-height:32px}.OwO .OwO-logo span svg{width:20px;height:20px;margin-right:5px}.OwO .OwO-body{display:none;background:#fff;z-index:1;border-radius:4px}.OwO .OwO-body .OwO-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;padding:10px;margin:0px;overflow-y:auto;font-size:0px;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-overflow-scrolling:touch}.OwO .OwO-body .OwO-items .OwO-item{width:calc(100% / 12);list-style-type:none;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;cursor:pointer;transition:all 0.3s ease 0s}.OwO .OwO-body .OwO-items .OwO-item:hover{background:#eee;box-shadow:rgba(0,0,0,0.14) 0px 2px 2px 0px,rgba(0,0,0,0.2) 0px 3px 1px -2px,rgba(0,0,0,0.12) 0px 1px 5px 0px;-webkit-animation:5s ease-in-out 0s infinite normal none running a;animation:5s ease-in-out 0s infinite normal none running a}.OwO .OwO-body .OwO-items-emoji .OwO-item{font-size:20px;line-height:19px}.OwO .OwO-body .OwO-items-image .OwO-item img{max-width:100%}.OwO .OwO-body .OwO-items-emoticon .OwO-item{width:25%;text-align:center}.OwO .OwO-body .OwO-items-show{display:block}.OwO .OwO-body .OwO-bar{width:100%;height:30px;border-top:1px solid #ddd;background:#fff;border-radius:0px 0px 4px 4px;color:#444}.OwO .OwO-body .OwO-bar .OwO-packages{margin:0px;padding:0px;font-size:0px}.OwO .OwO-body .OwO-bar .OwO-packages li{list-style-type:none;display:inline-block;line-height:29px;font-size:14px;padding:0px 10px;cursor:pointer}.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0px 0px 0px 3px}.OwO .OwO-body .OwO-bar .OwO-packages li:hover{background:#eee}.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{background:#eee;transition:all 0.3s ease 0s}@-webkit-keyframes a{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 a{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)}} +.OwO{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.OwO:hover .OwO-logo{color:#444}.OwO.OwO-open .OwO-logo{border-radius:4px 4px 0 0;border-bottom:none;color:#444}.OwO.OwO-open .OwO-body{display:block}.OwO.OwO-up .OwO-body{top:inherit;bottom:21px;border-radius:4px 4px 4px 0}.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0}.OwO.OwO-up.OwO-open .OwO-logo{border:1px solid #ddd;border-radius:0 0 4px 4px;border-top:none}.OwO .OwO-logo{position:relative;display:inline-block;color:#888;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:13px;padding:2px 5px;cursor:pointer;height:22px;box-sizing:border-box;z-index:2;line-height:16px}.OwO .OwO-logo:hover span{display:inline-block;-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body{display:none;position:absolute;width:400px;background:#fff;border:1px solid #ddd;z-index:1;top:21px;border-radius:0 4px 4px 4px}.OwO .OwO-body .OwO-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;padding:10px;margin:0;overflow:scroll;font-size:0}.OwO .OwO-body .OwO-items .OwO-item{list-style-type:none;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.OwO .OwO-body .OwO-items .OwO-item:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body .OwO-items-emoji .OwO-item{font-size:20px;line-height:19px}.OwO .OwO-body .OwO-items-image .OwO-item{max-width:calc(25% - 10px);box-sizing:border-box}.OwO .OwO-body .OwO-items-image .OwO-item img{max-width:100%}.OwO .OwO-body .OwO-items-show{display:block}.OwO .OwO-body .OwO-bar{width:100%;height:30px;border-top:1px solid #ddd;background:#fff;border-radius:0 0 4px 4px;color:#444}.OwO .OwO-body .OwO-bar .OwO-packages{margin:0;padding:0;font-size:0}.OwO .OwO-body .OwO-bar .OwO-packages li{list-style-type:none;display:inline-block;line-height:30px;font-size:14px;padding:0 10px;cursor:pointer;margin-right:3px}.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0 0 0 3px}.OwO .OwO-body .OwO-bar .OwO-packages li:hover{background:#eee}.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{background:#eee;-webkit-transition:.3s;transition:.3s}@-webkit-keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.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(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.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(-.5px) rotate(2.5deg);transform:translateY(-.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(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.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(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.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(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.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(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.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(-.5px) rotate(2.5deg);transform:translateY(-.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(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.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(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.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(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}} diff --git a/assets/css/joe.owo.scss b/assets/css/joe.owo.scss deleted file mode 100644 index 2879b11..0000000 --- a/assets/css/joe.owo.scss +++ /dev/null @@ -1,430 +0,0 @@ -.OwO { - position: relative; - user-select: none; -} -.OwO:hover .OwO-logo { - color: rgb(68, 68, 68); -} -.OwO.OwO-open .OwO-logo { - border-bottom: none; - color: rgb(68, 68, 68); - margin-bottom: 10px; - span { - animation: 5s ease-in-out 0s infinite normal none running a; - } -} -.OwO.OwO-open .OwO-body { - display: block; -} -.OwO.OwO-up .OwO-body { - top: inherit; - bottom: 21px; - border-radius: 4px 4px 4px 0px; -} -.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1) { - border-radius: 0px; -} -.OwO.OwO-up.OwO-open .OwO-logo { - border-right: 1px solid rgb(221, 221, 221); - border-bottom: 1px solid rgb(221, 221, 221); - border-left: 1px solid rgb(221, 221, 221); - border-image: initial; - border-top: none; -} -.OwO .OwO-logo { - position: relative; - display: inline-block; - color: rgb(136, 136, 136); - cursor: pointer; - z-index: 2; - span { - display: flex; - align-items: center; - height: 32px; - line-height: 32px; - svg { - width: 20px; - height: 20px; - margin-right: 5px; - } - } -} -.OwO .OwO-body { - display: none; - background: #fff; - z-index: 1; - border-radius: 4px; -} -.OwO .OwO-body .OwO-items { - user-select: none; - display: none; - padding: 10px; - margin: 0px; - overflow-y: auto; - font-size: 0px; - overscroll-behavior: none; - -webkit-overflow-scrolling: touch; -} -.OwO .OwO-body .OwO-items .OwO-item { - width: calc(100% / 12); - list-style-type: none; - padding: 5px 10px; - border-radius: 5px; - display: inline-block; - font-size: 12px; - line-height: 14px; - cursor: pointer; - transition: all 0.3s ease 0s; -} -.OwO .OwO-body .OwO-items .OwO-item:hover { - background: rgb(238, 238, 238); - box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; - animation: 5s ease-in-out 0s infinite normal none running a; -} -.OwO .OwO-body .OwO-items-emoji .OwO-item { - font-size: 20px; - line-height: 19px; -} -.OwO .OwO-body .OwO-items-image .OwO-item img { - max-width: 100%; -} -.OwO .OwO-body .OwO-items-emoticon .OwO-item { - width: 25%; - text-align: center; -} -.OwO .OwO-body .OwO-items-show { - display: block; -} -.OwO .OwO-body .OwO-bar { - width: 100%; - height: 30px; - border-top: 1px solid rgb(221, 221, 221); - background: rgb(255, 255, 255); - border-radius: 0px 0px 4px 4px; - color: rgb(68, 68, 68); -} -.OwO .OwO-body .OwO-bar .OwO-packages { - margin: 0px; - padding: 0px; - font-size: 0px; -} -.OwO .OwO-body .OwO-bar .OwO-packages li { - list-style-type: none; - display: inline-block; - line-height: 29px; - font-size: 14px; - padding: 0px 10px; - cursor: pointer; -} -.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1) { - border-radius: 0px 0px 0px 3px; -} -.OwO .OwO-body .OwO-bar .OwO-packages li:hover { - background: rgb(238, 238, 238); -} -.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active { - background: rgb(238, 238, 238); - transition: all 0.3s ease 0s; -} -@-webkit-keyframes a { - 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); - } -} -@keyframes a { - 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/js/joe.global.js b/assets/js/joe.global.js index 42a7755..a7a29a9 100644 --- a/assets/js/joe.global.js +++ b/assets/js/joe.global.js @@ -331,6 +331,19 @@ document.addEventListener('DOMContentLoaded', () => { } } + /* 激活OωO表情 */ + { + new OwO({ + logo: 'OωO表情', + container: document.querySelector('.joe_owo__container'), + target: document.querySelector('.joe_owo__target'), + api: 'https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/json/owo.json', + position: 'down', + width: '100%', + maxHeight: '250px' + }); + } + /* 懒加载 */ new LazyLoad('.lazyload'); diff --git a/assets/js/joe.owo.js b/assets/js/joe.owo.js index 84cfbc8..129a3d3 100644 --- a/assets/js/joe.owo.js +++ b/assets/js/joe.owo.js @@ -1,145 +1 @@ -(() => { - class OwO { - constructor(option) { - const defaultOption = { - container: document.getElementsByClassName('OwO')[0], - target: document.getElementsByTagName('textarea')[0], - position: 'down', - width: '100%', - maxHeight: '250px', - api: 'https://api.anotherhome.net/OwO/OwO.json' - }; - for (let defaultKey in defaultOption) { - if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { - option[defaultKey] = defaultOption[defaultKey]; - } - } - this.container = option.container; - this.target = option.target; - if (option.position === 'up') { - this.container.classList.add('OwO-up'); - } - const xhr = new XMLHttpRequest(); - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { - this.odata = JSON.parse(xhr.responseText); - this.init(option); - } else { - console.log('OwO data request was unsuccessful: ' + xhr.status); - } - } - }; - xhr.open('get', option.api, true); - xhr.send(null); - } - - init(option) { - this.area = option.target; - this.packages = Object.keys(this.odata); - - // fill in HTML - let html = ` -