hexo-theme-shokax 0.0.2-alpha2 → 0.0.2-alpha3

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

@@ -1,361 +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;
-    }
-  }
-}
+.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;
+    }
+  }
+}