hexo-theme-shokax 0.0.1-alpha1

package/source/css/_common/components/third-party/theme.styl

@@ -0,0 +1,151 @@
+#neko {
+  @extend $fix-fullscreen;
+  display: none;
+  background: linear-gradient(to top, #fddb92 0%, #d1fdff 80%);
+
+  .planet {
+    position: fixed;
+    left: -50%;
+    top: -50%;
+    width: 200%;
+    height: 200%;
+    animation: rotate 2s cubic-bezier(.7, 0, 0, 1);
+    transform-origin: center bottom;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+    background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+    transition: 2s ease all;
+  }
+
+  .sun, .moon {
+    position: absolute;
+    border-radius: 100%;
+    left: 55%;
+    top: 32%;
+  }
+
+  .sun {
+    height: 40px;
+    width: 40px;
+    background: #ffee94;
+    box-shadow: 0 0 40px #ffee94;
+    opacity: 1;
+  }
+
+  .moon {
+    height: 24px;
+    width: 24px;
+    background: #eee;
+    box-shadow: 0 0 20px #fff;
+    opacity: 0;
+  }
+
+  .body {
+    display: block;
+    position: absolute;
+    bottom: -20px;
+    height: 140px;
+    width: 135px;
+    left: 50%;
+    margin-left: -100px;
+    background: #777;
+    transition: all .25s ease-in-out;
+    animation: slideUpBigIn 1s;
+
+    &:before, &:after  {
+      position: absolute;
+      content: "";
+      width: 0;
+      height: 0;
+      border-bottom: 20px solid #777;
+      top: -20px;
+      transition: all .25s ease-in-out;
+    }
+    &:before {
+      border-left: 0 solid transparent;
+      border-right: 30px solid transparent;
+      left: 0;
+    }
+    &:after {
+      border-right: 0 solid transparent;
+      border-left: 30px solid transparent;
+      right: 0;
+    }
+
+    .eyes {
+      display: block;
+      position: absolute;
+      background: #ffee94;
+      height: 40px;
+      width: 40px;
+      border-radius: 100%;
+      bottom: 80px;
+    }
+
+    .eyes.left {
+      left: 12px;
+    }
+
+    .eyes.right {
+      right: 12px;
+    }
+
+    .eyes .pupil, .nose {
+      display: block;
+      position: relative;
+      background: #ffb399;
+      border-radius: 100%;
+      margin: 0 auto;
+    }
+
+    .eyes .pupil {
+      height: 100%;
+      width: 5px;
+      transition: width 1s .5s ease-in-out;
+    }
+
+    .nose {
+      top: 45px;
+      height: 10px;
+      width: 10px;
+    }
+  }
+
+  &.dark {
+    &:before {
+      opacity: 1;
+    }
+
+    .sun {
+      opacity: 0;
+    }
+
+    .moon {
+      opacity: 1;
+    }
+
+    .body {
+      background: #444;
+      &:before {
+        border-bottom: 20px solid #444;
+      }
+      &:after {
+        border-bottom: 20px solid #444;
+      }
+
+      .eyes .pupil {
+        height: 90%;
+        width: 34px;
+        margin: 5% auto;
+      }
+    }
+  }
+}

package/source/css/_common/components/third-party/third-party.styl

@@ -0,0 +1,22 @@
+@import 'pace';
+@import 'loading';
+@import 'search';
+@import 'theme';
+@import 'widgets';
+
+.katex,
+.katex-display {
+    user-select: all;
+}
+
+.medium-zoom-overlay {
+  z-index: $zindex-5 - 1;
+}
+
+.medium-zoom-image--opened {
+  z-index: $zindex-5;
+}
+
+.lozaded {
+  @extend .blur;
+}

package/source/css/_common/components/third-party/valine.styl

@@ -0,0 +1,548 @@
+.v {
+  &.wrap {
+    animation: none;
+    opacity: 0;
+  }
+
+  .lozaded {
+    animation: none;
+  }
+
+  input,
+  textarea {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: $font-size-smallest;
+    transition: all .25s ease;
+  }
+
+  a {
+    color: var(--color-aqua);
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .float-right {
+    float: right !important;
+  }
+
+  .pd5 {
+    padding: 5px;
+  }
+
+  .pd10 {
+    padding: 10px;
+  }
+
+  .vemoji, .emoji, .tk-owo-emotion {
+    max-height: 1.5rem;
+    display: inline;
+    vertical-align: middle;
+  }
+
+  .submitting {
+    margin: 1em 0;
+  }
+
+  .form {
+    shadow-box();
+    margin-bottom: .625rem;
+    position: relative;
+    padding: .625rem;
+
+    >.inner {
+      .auth-section {
+        display: flex;
+        padding: .3em .6em;
+      }
+
+      +mobile-small() {
+        flex-wrap: wrap;
+      }
+
+      .input {
+        flex: 1 1 27%;
+        width: 27%;
+
+        +mobile-small() {
+          flex: 1 1 100%;
+          padding-right: 0;
+          width: 100%;
+        }
+
+        input {
+          padding: .625rem .3125rem;
+          width: 100%;
+          border-bottom: .0625rem dashed var(--grey-4);
+
+          &:focus {
+            border-bottom-color: var(--primary-color);
+          }
+        }
+      }
+
+      .textarea {
+        padding: .3em .6em;
+      }
+
+      .veditor {
+        width: 100%;
+        min-height: 8.75em;
+        font-size: $font-size-small;
+        line-height: 1.75;
+        resize: vertical;
+      }
+
+      .btn-group {
+        padding: .625rem 0;
+        display: flex;
+
+        .i-markdown {
+          font-size: $font-size-smallest;
+        }
+
+        .left {
+          width: 30%;
+        }
+
+        .right {
+          width: 70%;
+          text-align: right;
+        }
+      }
+
+      .vextra-area {
+        margin: .4em 0 .4em .5em;
+      }
+
+
+      .preview-box {
+        padding: .4375rem 1.25rem;
+        font-size: $font-size-smaller;
+        shadow-box();
+      }
+
+      .trigger-section {
+        display: none;
+      }
+    }
+
+    .smile-body {
+
+      img {
+        display: inline-block;
+        width: auto;
+        height: 3rem;
+        cursor: pointer;
+        padding: .5rem;
+        border-radius: .25rem;
+        transition: box-shadow .2s ease-out, background .2s ease-out;
+      }
+
+      li.active img, img:hover {
+        background: var(--grey-2);
+        box-shadow: 1px 1px 2px var(--grey-1), -1px -1px 2px var(--grey-4), inset 8px 8px 16px var(--grey-1), inset -8px -8px 16px var(--grey-3);
+      }
+
+      .smile-icons {
+        border-radius: .5rem;
+        margin: .3rem 0;
+        min-height: 10rem;
+        max-height: 10rem;
+        overflow: auto;
+        background: var(--grey-2);
+        padding: .5rem;
+      }
+
+      .smile-bar {
+        li {
+          display: inline-block;
+          margin-right: .25rem;
+        }
+
+        img {
+          width: 2.8rem;
+          height: 2.8rem;
+          background: var(--grey-2);
+          object-fit: contain;
+        }
+      }
+    }
+
+    .btn {
+      cursor: pointer;
+      display: inline-block;
+      margin: .5rem;
+      overflow: hidden;
+      vertical-align: middle;
+
+      &.actived .ic {
+        color: var(--primary-color);
+      }
+
+      .ic {
+        color: var(--grey-6);
+        transition: all .25s ease;
+
+        &:hover {
+          color: var(--color-blue);
+        }
+      }
+    }
+
+    .cancel-reply {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+
+    .vsubmit {
+      font-size: $font-size-small;
+    }
+  }
+
+  .msg {
+    position: absolute;
+    background: var(--grey-1-a5);
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    .alert {
+      padding: 3em 0 0 0;
+
+      .text {
+        color: var(--grey-8);
+        padding: 15px;
+      }
+    }
+
+    +mobile() {
+      .alert {
+        padding: 8em 0;
+
+        .text {
+          padding: 10px;
+        }
+      }
+    }
+  }
+
+  .info {
+    padding: .3125rem;
+    font-weight: 600;
+    font-size: $font-size-larger;
+
+    .col {
+      display: inline-block;
+      padding: 0 20px;
+      position: relative;
+      background: transparent;
+      z-index: 2;
+
+      .count {
+        font-size: 1.375rem;
+        font-weight: inherit;
+      }
+    }
+  }
+
+
+
+  .next {
+    .more {
+      cursor: pointer;
+      margin: 1em 0;
+    }
+  }
+
+  .list {
+    width: 100%;
+  }
+  .item {
+    word-break: break-all;
+    padding-top: 1.25em;
+
+    .avatar {
+      width: 3.125em;
+      height: 3.125em;
+      float: left;
+      border-radius: 50%;
+      margin-right: .7525em;
+      border: .0625rem solid var(--grey-3);
+      padding: .125em
+    }
+
+    &:hover .avatar {
+      animation: .8s ease-out 0s 1 normal both running shake;
+    }
+
+    .main {
+      overflow: hidden;
+      padding-bottom: .5em;
+      border-bottom: .0625rem dashed var(--grey-3);
+    }
+
+    .head, .meta {
+      color: var(--grey-5);
+      line-height: 1.8;
+    }
+
+    .name {
+      margin-right: .875rem;
+    }
+
+    .tag, .system, .time {
+      display: inline-block;
+      font-size: $font-size-smallest;
+    }
+
+    +mobile-small() {
+      .system span {
+        display: none;
+      }
+    }
+    .tag {
+      border-radius: .125rem;
+      color: var(--grey-1);
+      padding: 0 .3125rem;
+      margin-right: .5rem;
+      background-color: var(--color-grey);
+
+      $tagcolor = hexo-config('valine.tagColor');
+
+      for type in $tagcolor {
+        &.{slice(type, 0, 1)} {
+          background-color: unquote(slice(type, 1));
+        }
+      }
+    }
+
+    .at {
+      color: var(--primary-color);
+
+      &:hover {
+        color: var(--color-aqua);
+      }
+    }
+
+    .meta {
+      line-height: 1;
+      .at {
+        float: right;
+      }
+    }
+
+    .content {
+      margin-bottom: .75em;
+      padding: .625em;
+
+      > .inner {
+        font-size: $font-size-small;
+        word-wrap: break-word;
+        word-break: break-all;
+        line-height: 2;
+        position: relative;
+
+        &.expand {
+          cursor: pointer;
+          max-height: 8em;
+
+          overflow: hidden;
+
+          &::before {
+            display: block;
+            content: "";
+            position: absolute;
+            width: 100%;
+            left: 0;
+            top: 0;
+            bottom: 3.15em;
+            background: linear-gradient(180deg, var(--grey-1-a0), var(--grey-1));
+            z-index: 999;
+          }
+
+          &::after {
+            display: block;
+            content: attr(data-expand);
+            text-align: center;
+            position: absolute;
+            width: 100%;
+            height: 3.15em;
+            line-height: 3.15em;
+            left: 0;
+            bottom: 0;
+            z-index: 999;
+            background: var(--grey-1);
+          }
+        }
+      }
+
+      .form {
+        margin-top: 1rem;
+      }
+    }
+
+    &:last-child .main {
+      border-bottom: none
+    }
+
+    .children {
+      padding-left: 1em;
+      border-left: .0625rem dashed var(--grey-3);
+
+      .avatar {
+        width: 2.225em;
+        height: 2.225em
+      }
+    }
+  }
+
+    .empty {
+      padding: 20px;
+      text-align: center;
+    }
+
+
+  /************ Loading ************/
+  .spinner {
+    margin: 10px auto;
+    width: 50px;
+    height: 30px;
+    text-align: center;
+    font-size: 10px;
+  }
+
+  .spinner>div {
+    background-color: var(--primary-color);
+    height: 100%;
+    width: 6px;
+    margin-right: 3px;
+    display: inline-block;
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  }
+
+  .spinner .r2 {
+    animation-delay: -1.1s;
+  }
+
+  .spinner .r3 {
+    animation-delay: -1s;
+  }
+
+  .spinner .r4 {
+    animation-delay: -0.9s;
+  }
+
+  .spinner .r5 {
+    animation-delay: -0.8s;
+  }
+
+  @keyframes sk-stretchdelay {
+
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+    }
+
+    20% {
+      transform: scaleY(1);
+    }
+  }
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--grey-5);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst,
+.hljs-meta {
+  color: var(--grey-7);
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: var(--color-green);
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: var(--color-red);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: var(--color-pink);
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: var(--color-grey);
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: var(--color-orange);
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: var(--color-green);
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: var(--color-purple);
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: var(--color-aqua);
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}