hexo-theme-shokax 0.0.1-alpha1

package/source/css/_common/components/tags/links.styl

@@ -0,0 +1,77 @@
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: .9rem;
+
+
+  .item {
+    position: relative;
+    display: inline-flex;
+    justify-self: center;
+    align-items: center;
+    line-height: 1.5;
+    width: calc(50% - 2rem);
+    padding: .5rem 1rem;
+    margin: 1rem;
+    the-transition();
+    shadow-box();
+
+    --bg-color: var(--block-color, #666);
+
+    .image {
+      display: block;
+      width: 4rem;
+      height: 4rem;
+      border-radius: .9375rem;
+      background: var(--grey-1) center no-repeat;
+      background-size: contain;
+      flex-shrink: 0;
+      border: none;
+    }
+
+    .info {
+      padding-left: 1rem;
+    }
+
+    .title {
+      margin: .5rem 0;
+      font-family: $font-family-title;
+      font-weight: bold;
+      color: var(--bg-color);
+      border: none;
+      .ic {
+        display: none;
+      }
+    }
+
+    .desc {
+      font-size: $font-size-smallest;
+      margin: .5rem 0;
+    }
+
+
+    &:hover {
+      color: var(--header-text-color);
+      background-color: var(--bg-color);
+      box-shadow: 0 .125rem 1.25rem var(--bg-color);
+      border-color: var(--bg-color);
+
+      .image {
+        mix-blend-mode: normal;
+        background-color: var(--bg-color);
+      }
+
+      .title {
+        color: var(--header-text-color);
+      }
+    }
+  }
+
+
+  +mobile() {
+    font-size: $font-size-base;
+    .item {
+      width: calc(100% - 2rem);
+    }
+  }
+}

package/source/css/_common/components/tags/list.styl

@@ -0,0 +1,131 @@
+.md {
+  li {
+    position: relative;
+    margin: .2rem 0;
+
+    &:before {
+      the-transition();
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ul, ol, dl {
+    margin: .5em 0 .5em;
+    padding: .1em .2em .1em 1.4em;
+  }
+
+  ul > li,
+  dl dt {
+    &::before {
+      content: "";
+      position: absolute;
+      width: .4em;
+      height: .4em;
+      background: var(--primary-color);
+      border-radius: 50%;
+      top: .85em;
+      left: -1em;
+    }
+
+    &:hover::before {
+      background: var(--color-pink);
+    }
+  }
+
+  ol {
+    &:not([start]) {
+      counter-reset: counter;
+    }
+
+    >li {
+
+      &::before {
+        counter-increment: counter;
+        content: counter(counter);
+        position: absolute;
+        width: 1.4em;
+        height: 1.4em;
+        border-radius: 50%;
+        text-align: center;
+        font-size: .8em;
+        line-height: 1.4;
+        top: .5em;
+        left: -1.8em;
+        background: var(--primary-color);
+        color: var(--grey-1);
+        cursor: pointer;
+      }
+
+      &:hover::before {
+        color: var(--grey-1);
+        background: var(--color-pink);
+      }
+    }
+  }
+
+  dl {
+    dt {
+      position: relative;
+    }
+    dd {
+      padding-left: .9375em;
+    }
+  }
+
+  ul {
+    li.nodot {
+      &::before {
+        li-nodot();
+      }
+    }
+
+    li.task-list-item {
+      &::before {
+        li-nodot();
+      }
+
+      input[type='checkbox'] {
+        display: none;
+      }
+
+      input[type='checkbox']+label::before {
+        @extend .i-times-circle:before;
+        font-family-icons();
+        color: var(--grey-4);
+        display: inline-block;
+        margin-right: .625em;
+      }
+
+      input[type='checkbox']:checked+label::before {
+        @extend .i-check-circle:before;
+        color: var(--note-text, var(--primary-color));
+      }
+    }
+  }
+
+  li ul > li {
+    &::before {
+      background: var(--grey-1);
+      border: 1px solid var(--primary-color);
+    }
+  }
+
+  li ol > li, dd ol > li{
+    &::before {
+      content: counter(counter) ".";
+      background: none;
+      color: var(--primary-color);
+      font-size: 1em;
+      line-height: 1;
+      width: auto;
+    }
+
+    &:hover::before {
+      background: none;
+      color: var(--color-pink);
+    }
+  }
+}

package/source/css/_common/components/tags/note.styl

@@ -0,0 +1,70 @@
+.md .note {
+  border-radius: .1875rem;
+  margin: 1rem 0;
+  padding: 1rem;
+  position: relative;
+
+  background: var(--note-bg, var(--grey-2));
+  color: var(--grey-6);
+  border-left: .25rem solid var(--note-border, var(--grey-4));
+
+  font-size: $font-size-small;
+
+  padding-left: 2.5rem;
+
+  --primary-color: var(--note-text);
+
+  &::before {
+    position: absolute;
+    left: .5rem;
+    top: calc(50% - 1.5rem);
+    font-family-icons();
+    font-size: 1.5rem;
+    color: var(--note-text, var(--grey-6));
+  }
+
+  &.default {
+    &::before {
+      @extend .i-arrow-circle-right:before;
+    }
+  }
+
+  &.primary {
+    &::before {
+      @extend .i-plus-circle:before;
+    }
+  }
+
+  &.info {
+    &::before {
+      @extend .i-info-circle:before;
+    }
+  }
+
+  &.success {
+    &::before {
+      @extend .i-check-circle:before;
+    }
+
+  }
+
+  &.warning {
+    &::before {
+      @extend .i-exclamation-circle:before;
+    }
+  }
+
+  &.danger {
+    &::before {
+      @extend .i-minus-circle:before;
+    }
+  }
+
+  &.no-icon {
+    &::before {
+      content: none;
+    }
+
+    padding-left: 1rem;
+  }
+}

package/source/css/_common/components/tags/player.styl

@@ -0,0 +1,361 @@
+.media-container {
+  position: relative;
+  shadow-box();
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
+
+
+.player-info {
+  color: var(--text-color);
+  font-size: $font-size-base;
+  min-width: 16.25rem;
+
+  .tabs {
+    border: none;
+    box-shadow: none;
+
+    .show-btn {
+      display: none;
+    }
+
+    .tab {
+      padding: 0;
+    }
+  }
+
+  .controller {
+    font-family-icons();
+    cursor: pointer;
+    font-size: $font-size-larger;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    text-align: center;
+
+    .btn {
+      color: var(--grey-6);
+      width: 18%;
+
+      &:hover {
+        color: var(--color-pink);
+      }
+    }
+  }
+
+  .play-pause {
+    font-size: 130%;
+    &::before {
+      @extend .i-circle-play:before;
+    }
+  }
+
+  .backward {
+    &::before {
+      @extend .i-backward:before;
+    }
+  }
+
+  .forward {
+    &::before {
+      @extend .i-forward:before;
+    }
+  }
+
+  .volume {
+    position: relative;
+
+    &.off::before {
+      @extend .i-volume-off:before;
+    }
+    &.on::before {
+      @extend .i-volume-on:before;
+    }
+
+    .bar {
+      position: absolute;
+      height: .25rem;
+      background: var(--color-pink-a3);
+      bottom: 0;
+      left: 0;
+      the-transition(.2s, ease-out);
+    }
+
+    &.off .bar {
+      height: 0;
+    }
+  }
+
+  .mode {
+    &.random::before {
+      @extend .i-random:before;
+    }
+    &.loop::before {
+      @extend .i-loop:before;
+    }
+    &.order::before {
+      @extend .i-order:before;
+    }
+  }
+
+  .playlist {
+    border-top: .125rem solid var(--grey-9-a1);
+  }
+
+  ol {
+    font-size: $font-size-smaller;
+    padding: .3125rem 0;
+    margin: .625rem 0 0;
+    height: 12.5rem;
+    overflow-x: scroll;
+    counter-reset: counter;
+    position: relative;
+
+    &::-webkit-scrollbar {
+      width: .1875rem;
+      height: .1875rem;
+    }
+
+    >li {
+      display: flex;
+      padding: .3125rem .9375rem .3125rem 1.5625rem;
+      cursor: pointer;
+      the-transition();
+      height: 2rem;
+      overflow: hidden;
+
+      &.error {
+        opacity: .5;
+        text-decoration-line: line-through;
+      }
+
+      &::before {
+        height: auto;
+        background: 0 0!important;
+        border: none!important;
+        position: relative;
+        top: 0!important;
+        left: 0!important;
+        font-size: inherit;
+        line-height: inherit;
+        margin-left: -1.25rem;
+        width: 1.875rem;
+        counter-increment: counter;
+        content: counter(counter);
+        text-align: right;
+        padding-right: .3125rem;
+        color: var(--grey-5);
+      }
+
+      .info {
+        display: block;
+        width: 100%;
+
+        span {
+          &:nth-child(2) {
+            float: right;
+            margin-left: .625rem;
+            color: var(--grey-5);
+          }
+        }
+      }
+
+      &.current {
+        color: var(--primary-color);
+        position: relative;
+
+        &::before {
+          font-family-icons();
+          @extend .i-play:before;
+          color: currentColor;
+        }
+
+        .progress {
+          .bar {
+            position: absolute;
+            height: 100%;
+            background: var(--color-pink-a3);
+            top: 0;
+            left: 0;
+            the-transition(.2s, ease-out);
+          }
+
+          &::before {
+            content: attr(data-ptime) " / " attr(data-dtime);
+            color: var(--grey-5);
+            position: absolute;
+            right: 0;
+            padding: 0 .3rem;
+          }
+
+          &.seeking {
+            &::before {
+              color: currentColor;
+            }
+          }
+        }
+
+        .info {
+          padding-right: 5rem;
+          user-select: none;
+
+          span {
+            &:nth-child(2) {
+              display: none;
+            }
+          }
+        }
+      }
+
+      &:hover {
+        background-color: var(--grey-1-a7);
+        &::before {
+          color: var(--primary-color);
+        }
+      }
+    }
+  }
+}
+
+
+.video {
+  border-radius: 0 0 .5rem .5rem;
+}
+
+.audio {
+
+  .preview {
+    display: flex;
+    align-items: center;
+    padding: 1.25rem 1.25rem 0;
+
+    +mobile() {
+      padding: 1.25rem .625rem 0;
+      flex-direction: column;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      margin-left: .625rem;
+      padding: .625rem;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+
+      +mobile() {
+        margin-left: 0;
+      }
+
+      h4 {
+        margin: 0;
+        text-overflow: ellipsis;
+        max-height: 3rem;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      span {
+        font-size: $font-size-smallest;
+      }
+    }
+
+    .lrc {
+      max-height: 4rem;
+      margin-top: .3125rem;
+      font-size: $font-size-smallest;
+      position: relative;
+      text-align: center;
+      overflow: hidden;
+
+      .inner {
+        width: 100%;
+        transition: all .5s ease-out;
+      }
+
+      p {
+        font-size: .75rem;
+        color: var(--grey-6);
+        line-height: 1rem!important;
+        height: 1rem!important;
+        padding: 0!important;
+        margin: 0!important;
+        transition: all .5s ease-out;
+        opacity: .3;
+        overflow: hidden;
+
+        &.current {
+          opacity: 1;
+          overflow: visible;
+          height: auto!important;
+          min-height: 1rem;
+        }
+      }
+    }
+  }
+
+  .cover{
+    position: relative;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      background: url("../images/play_needle.png") no-repeat center/contain;
+      width: 3.4375rem;
+      height: 5.1875rem;
+      top: -1.5625rem;
+      left: -1.5625rem;
+      transform: rotateZ(-60deg);
+      animation: rotate-needle-pause .5s 1 normal linear forwards;
+      transform-origin: .625rem .625rem;
+    }
+
+    .disc {
+      animation: rotate 20s linear infinite;
+      animation-play-state: paused;
+      padding: 1.5rem;
+      max-height: 144px;
+
+      &::after {
+        content: "";
+        position: absolute;
+        background: url("../images/play_disc.png") no-repeat center/contain;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    img {
+      object-fit: contain;
+      width: 6rem;
+      height: 6rem;
+      border-radius: 50%;
+    }
+  }
+
+  &.playing {
+    .cover {
+      &::before {
+        animation: rotate-needle-resume .5s 1 normal linear forwards;
+      }
+
+      .disc {
+        animation-play-state: running;
+      }
+    }
+  }
+}
+
+.playing {
+  .player-info .play-pause {
+    &::before {
+      @extend .i-circle-pause:before;
+    }
+  }
+}