hexo-theme-shokax 0.0.1-alpha1

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

@@ -0,0 +1,200 @@
+$check {
+  &::before {
+    color: var(--color-green);
+  }
+
+  &::after {
+    @extend .i-check:before;
+    color: var(--color-green);
+    animation: fadeIn .5s;
+  }
+}
+
+$times {
+  &::before {
+    color: var(--color-red);
+  }
+
+  &::after {
+    @extend .i-times:before;
+    color: var(--color-red);
+    animation: fadeIn .5s;
+  }
+}
+
+.md ol>li.quiz {
+  margin: .625rem 0;
+
+  &::before{
+    counter-increment: counter;
+    content: counter(counter) ".";
+    position: absolute;
+    color: var(--primary-color);
+    text-align: right;
+    width: 2rem;
+    left: -2.2rem;
+    height: auto;
+    background: none !important;
+    border: none !important;
+    font-size: $font-size-base;
+  }
+
+  >p {
+    margin: 0;
+    cursor: pointer;
+
+    &:first-child::before {
+      content: "[" attr(data-type) "]";
+      font-size: $font-size-smallest;
+      color: var(--grey-4);
+      margin: auto .3125rem;
+    }
+  }
+
+  &.mistake >p {
+    &:first-child::before {
+      color: var(--primary-color);
+    }
+  }
+  .gap {
+    display: inline-block;
+    min-width: 2.5rem;
+    text-align: center;
+    padding: 0 .625rem;
+    text-indent: -624.9375rem;
+
+    &::after {
+      display: block;
+      content: "";
+      background: var(--text-color);
+      width: calc(100% + 1.25rem);
+      height: .0625rem;
+      margin-bottom: -.0625rem;
+      margin-left: -.625rem;
+    }
+  }
+
+  &.show.fill .gap{
+    text-indent: 0;
+  }
+
+  &::before, &::after {
+    the-transition();
+  }
+
+  blockquote {
+    display: none;
+
+    .mistake {
+      display: block;
+      border: .1875rem dashed var(--grey-4);
+      padding: .625rem 1.25rem;
+      background: var(--grey-3);
+      margin: .3125rem;
+
+      &::before {
+        display: block;
+        content: "[" attr(data-type) "]";
+        font-size: $font-size-smaller;
+        color: var(--grey-4);
+      }
+    }
+  }
+
+  .note {
+    display: none;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    border-radius: inherit;
+    color: unset;
+    font-size: inherit;
+    filter: unset;
+  }
+
+  &.show blockquote, &.show .note {
+    display: block;
+    @extend .slide;
+  }
+
+  ul.options {
+    padding-inline-start: .625rem;
+
+    li {
+
+      &::before {
+        color: var(--color-grey);
+        margin-right: .625rem;
+        the-transition();
+        li-nodot();
+      }
+
+      &:nth-child(1)::before {
+        content: "A."
+      }
+
+      &:nth-child(2)::before {
+        content: "B."
+      }
+
+      &:nth-child(3)::before {
+        content: "C."
+      }
+
+      &:nth-child(4)::before {
+        content: "D."
+      }
+
+      &:nth-child(5)::before {
+        content: "E."
+      }
+
+    }
+  }
+
+  >ul.options {
+    li {
+      cursor: pointer;
+
+      &::after {
+        font-family-icons();
+        position: absolute;
+        left: -1.5625rem;
+        top: 0;
+      }
+
+      &.right {
+        @extend $check;
+      }
+
+      &.wrong {
+        @extend $times;
+      }
+    }
+  }
+
+  &.show.false, &.show.true {
+    &::before {
+      visibility: hidden;
+    }
+
+    &::after {
+      font-family-icons();
+      position: absolute;
+      left: -1.2rem;
+      top: .25rem;
+    }
+  }
+
+  &.show.true {
+    @extend $check;
+  }
+
+  &.show.false {
+    @extend $times;
+  }
+}
+
+
+

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

@@ -0,0 +1,83 @@
+.tabs {
+  display: block;
+  position: relative;
+
+  .nav {
+    overflow: hidden;
+    border-bottom: .0625rem solid var(--grey-1-a7);
+    height: 2.6875rem;
+
+    ul {
+      display: flex;
+      padding: 0;
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+
+    li {
+      position: relative;
+      cursor: pointer;
+      border: none;
+      display: inline-block;
+      padding: .3125rem 1.25rem;
+      margin: 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 50%;
+        right: 50%;
+        top: auto;
+        bottom: 0;
+        transition: all .2s ease-in-out;
+        width: auto;
+        height: auto;
+        background: none;
+        border-radius: 0;
+        border-bottom: .125rem solid transparent;
+      }
+
+      &.active::before {
+        left: 0;
+        right: 0;
+        border-bottom-color: var(--note-hover, var(--primary-color));
+      }
+    }
+  }
+
+  .tab {
+    display: none;
+    @extend .fade-in;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  .show-btn {
+    position: absolute;
+    cursor: pointer;
+    right: 0;
+    bottom: 0;
+    width: 2.875rem;
+    height: 2.875rem;
+    text-align: center;
+    color: var(--grey-4);
+    z-index: $zindex-1;
+
+    &::before {
+      font-family-icons();
+      @extend .i-arrow-up:before;
+    }
+  }
+
+}
+
+.md .tabs {
+  margin: 0 0 2rem;
+  shadow-box();
+
+  .tab {
+    padding: 1.25rem;
+  }
+}

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

@@ -0,0 +1,9 @@
+@import 'list';
+@import 'quiz';
+@import 'links';
+@import 'note';
+@import 'collapse';
+@import 'label';
+@import 'tabs';
+@import 'container';
+@import 'player';

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

@@ -0,0 +1,222 @@
+#loading {
+  @extend $fix-fullscreen;
+  background-color: var(--grey-1);
+  if(!hexo-config('loader.start')) {
+    display: none;
+  }
+}
+
+$bgColor = var(--grey-1)
+$bodyColor = rgb(237, 166, 93)
+$tailColor = rgb(198, 130, 59)
+$tummyColor = rgb(242, 192, 137)
+$borderColor = rgb(56, 60, 75)
+$innerR = 8.125em
+$middleR = 12.8125em
+$outterR = 15em
+$tummyWidth = 1.5em
+$borderWidth = .375em
+$polygon-start = polygon(50% 50%, 0% 50%, 0% 100%, 100% 100%, 100% 20%)
+$polygon-a = polygon(50% 50%, 30% 120%, 50% 100%, 100% 100%, 100% 20%)
+$polygon-b = polygon(50% 50%, 100% 90%, 120% 90%, 100% 100%, 100% 20%)
+$polygon-middle = polygon(50% 50%, 100% 45%, 120% 45%, 120% 50%, 100% 20%)
+$polygon-c = polygon(50% 50%, 100% 65%, 120% 65%, 120% 50%, 100% 20%)
+$polygon-d = polygon(50% 50%, 75% 130%, 120% 65%, 120% 50%, 100% 20%)
+$polygon-e = polygon(50% 50%, -20% 110%, 50% 120%, 100% 100%, 100% 20%)
+
+center-center()
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  margin: auto
+tummy-style()
+  width: $tummyWidth
+  height: $tummyWidth
+  position: absolute
+  border-radius: 50%
+  background-color: $tummyColor
+body-color()
+  background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 46%, $tummyColor 46%, $tummyColor 60%, $bodyColor 60%, $bodyColor 67%, $borderColor 67%, $borderColor 100%)
+head-foot-color()
+  background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 67%, $borderColor 67%, $borderColor 100%)
+
+.cat
+  position: relative
+  display: block
+  width: $outterR
+  height: 100%
+  font-size: 10px
+  margin: auto
+
+  *
+    box-sizing: content-box;
+
+  .head, .foot, .body, .paw
+    center-center()
+    border-radius: 50%
+    width: $outterR
+    height: $outterR
+  .body
+    body-color()
+  .head:before, .foot:before
+    head-foot-color()
+  .head
+    &:before
+      content: ''
+      width: 100%
+      height: 100%
+      position: absolute
+      border-radius: 50%
+      clip-path: polygon(100% 20%, 50% 50%, 70% -10%)
+      -webkit-clip-path: polygon(100% 20%, 50% 50%, 70% -10%)
+    &:after
+      content: ''
+      width: 4.125em
+      height: 2.5em
+      position: absolute
+      top: 0.8125em
+      right: 3.9375em
+      background-image: linear-gradient($bgColor 65%, transparent 65%), radial-gradient($bgColor 51%, $borderColor 55%, $borderColor 68%, transparent 70%)
+      transform: rotate(-66deg)
+    .face
+      width: 5em
+      height: 3.75em
+      left: 9.0625em
+      top: 1.8125em
+      position: absolute
+      transform: rotate(-47deg)
+      background: radial-gradient(circle, $tummyColor 0%, $tummyColor 23%, transparent 23%) -0.1875em 1.0625em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) 0.75em -0.75em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) -0.75em -0.75em no-repeat, radial-gradient($bodyColor 0%, $bodyColor 15%, transparent 15%) 0 -0.6875em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) -0.1875em -0.3125em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) 0.1875em -0.3125em no-repeat, radial-gradient(circle, $bodyColor 45%, transparent 45%) 0 -0.1875em, linear-gradient(transparent 35%, $borderColor 35%, $borderColor 41%, transparent 41%, transparent 44%, $borderColor 44%, $borderColor 50%, transparent 50%, transparent 53%, $borderColor 53%, $borderColor 59%, transparent 59%)
+  .foot
+    &:before, &:after
+      content: ''
+      width: 100%
+      height: 100%
+      position: absolute
+    &:before
+      border-radius: 50%
+      clip-path: polygon(50% 50%, 0% 50%, 0% 25%)
+      -webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 25%)
+    .tummy-end
+      tummy-style()
+      left: 1.1875em
+      top: 6.5625em
+    .bottom
+      width: 2.1875em
+      height: 0.9375em
+      position: absolute
+      top: 4.875em
+      left: 0.75em
+      border: 0.375em solid $borderColor
+      border-bottom: 0
+      border-radius: 50%
+      transform: rotate(21deg)
+      background: $bodyColor
+  .hands, .legs, .foot:after
+    width: 0.625em
+    height: 1.5625em
+    position: absolute
+    border: $borderWidth solid $borderColor
+    background-color: $bodyColor
+  .hands
+    border-top: 0
+    border-radius: 0 0 0.75em 0.75em
+    &.left
+      top: 4.3em
+      left: 13.1875em
+      transform: rotate(-20deg)
+    &.right
+      top: 5.125em
+      left: 10.975em
+      transform: rotate(-25deg)
+  .legs
+    border-bottom: 0
+    border-radius: 0.75em 0.75em 0 0
+    &.left
+      top: 4.0625em
+      left: 3.125em
+      transform: rotate(25deg)
+    &.right
+      top: 3.3125em
+      left: 0.75em
+      transform: rotate(22deg)
+  .foot:after
+    width: .9em
+    height: 2.5em
+    top: 2.625em
+    left: 2.5em
+    z-index: -1
+    transform: rotate(25deg)
+    background-color: $tailColor
+    border-bottom: 0
+    border-radius: 0.75em 0.75em 0 0
+
+  animation: 2.74s linear infinite loading-cat
+
+  .body
+    animation: 2.74s linear infinite body
+  .foot
+    animation: 2.74s linear infinite foot
+
+
+  &:hover
+    animation-play-state: paused;
+    .body, .foot
+      animation-play-state: paused;
+
+  &:active
+    animation-play-state: running;
+    .body, .foot
+      animation-play-state: running;
+
+@keyframes body {
+  0% {
+    clip-path: $polygon-start;
+  }
+  10% {
+    clip-path: $polygon-a;
+  }
+  20% {
+    clip-path: $polygon-b;
+  }
+  40% {
+    clip-path: $polygon-middle;
+  }
+  50% {
+    clip-path: $polygon-middle;
+  }
+  65% {
+    clip-path: $polygon-c;
+  }
+  80% {
+    clip-path: $polygon-d;
+  }
+  90% {
+    clip-path: $polygon-e;
+  }
+  100% {
+    clip-path: $polygon-start;
+  }
+}
+
+@keyframes loading-cat {
+  0% { transform: rotate(0deg); }
+  10% { transform: rotate(-80deg); }
+  20% { transform: rotate(-180deg); }
+  40% { transform: rotate(-245deg); }
+  50% { transform: rotate(-250deg); }
+  68% { transform: rotate(-300deg); }
+  90% { transform: rotate(-560deg); }
+  100% { transform: rotate(-720deg); }
+}
+
+@keyframes foot {
+  0% { transform: rotate(-10deg); }
+  10% { transform: rotate(-100deg); }
+  20% { transform: rotate(-145deg); }
+  35% { transform: rotate(-190deg); }
+  50% { transform: rotate(-195deg); }
+  70% { transform: rotate(-165deg); }
+  100% { transform: rotate(-10deg); }
+}

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

@@ -0,0 +1,90 @@
+g.classGroup text {
+  fill: var(--text-color);
+  stroke: none;
+  font-family: var(--mermaid-font-family);
+  font-size: .625rem;
+
+  .title {
+    font-weight: bolder;
+  }
+}
+
+g.clickable {
+  cursor: pointer;
+}
+
+g.classGroup rect {
+  fill: var(--grey-1);
+  stroke: var(--text-color);
+}
+
+g.classGroup line {
+  stroke: var(--text-color);
+  stroke-width: 1;
+}
+
+.classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: var(--grey-1);
+  opacity: .5;
+}
+
+.classLabel .label {
+  fill: var(--text-color);
+  font-size: .625rem;
+}
+
+.relation {
+  stroke: var(--text-color);
+  stroke-width: 1;
+  fill: none;
+}
+
+.dashed-line{
+  stroke-dasharray: 3;
+}
+
+@mixin composition {
+  fill: var(--text-color);
+  stroke: var(--text-color);
+  stroke-width: 1;
+}
+
+#compositionStart {
+  @include composition;
+}
+
+#compositionEnd {
+  @include composition;
+}
+
+@mixin aggregation {
+  fill: var(--grey-1);
+  stroke: var(--text-color);
+  stroke-width: 1;
+}
+
+#aggregationStart {
+  @include aggregation;
+}
+
+#aggregationEnd {
+  @include aggregation;
+}
+
+#dependencyStart {
+  @include composition;
+}
+
+#dependencyEnd {
+  @include composition;
+}
+
+#extensionStart {
+  @include composition;
+}
+
+#extensionEnd {
+  @include composition;
+}

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

@@ -0,0 +1,72 @@
+.label {
+  font-family: var(--mermaid-font-family);
+  color: var(--grey-7);
+  font-size: $font-size-small;
+}
+
+.label text {
+  fill: var(--text-color);
+}
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon,
+.node path {
+  fill: var(--grey-1);
+  stroke: var(--text-color);
+  stroke-width: .0625rem;
+}
+
+.node .label {
+  text-align: center;
+}
+.node.clickable {
+  cursor: pointer;
+}
+
+.arrowheadPath {
+  fill: var(--text-color);
+}
+
+.edgePath .path {
+  stroke: var(--text-color);
+}
+
+.flowchart-link {
+  stroke: var(--text-color);
+  fill: none;
+}
+
+.edgeLabel {
+  background-color: var(--grey-2);
+  rect {
+    opacity: .8;
+    fill: var(--grey-2) !important;
+  }
+  text-align: center;
+}
+
+.cluster rect {
+  fill: var(--grey-2);
+  stroke: var(--text-color);
+  stroke-width: .0625rem;
+}
+
+.cluster text {
+  fill: var(--text-color);
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 12.5rem;
+  padding: .125rem;
+  font-family: var(--mermaid-font-family);
+  font-size: .75rem;
+  background: var(--grey-1);
+  border: .0625rem solid var(--text-color);
+  border-radius: .125rem;
+  pointer-events: none;
+  z-index: $zindex-3;
+}