hexo-theme-shokax 0.4.6-dev5 → 0.4.6

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

@@ -1,222 +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); }
-}
+#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

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