hexo-theme-shokax 0.0.1-alpha1

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

@@ -0,0 +1,353 @@
+@import 'operation';
+
+// Placeholder: $code-block
+$code-block {
+  background: var(--grey-2);
+  color: var(--grey-7);
+  line-height: $line-height-code-block;
+  margin: 1.25rem auto;
+}
+
+pre,
+code,
+.code-container {
+  font-family: $font-family-monospace;
+  font-size: $font-size-medium;
+}
+
+
+:not(td)>pre {
+  background: var(--grey-1);
+  border: .0625rem solid var(--grey-3);
+  border-radius: .3125rem;
+  padding: 1rem;
+  margin-bottom: .8rem;
+  line-break: anywhere;
+  white-space: break-spaces;
+
+  code {
+    background: transparent;
+    color: currentColor;
+   }
+}
+
+
+// 代码样式
+:not(pre)>code {
+  color: var(--primary-color);
+  border-radius: .3rem;
+  border: .0625rem solid rgba(0, 0, 0, .1);
+  background-color: var(--grey-0);
+  padding: .2rem .3rem;
+  word-wrap();
+}
+
+.highlight {
+  position: relative;
+  overflow: hidden;
+  border-radius: .5rem;
+  box-shadow: 0 .3125rem .625rem -.125rem var(--grey-9-a1);
+
+  @extend $code-block;
+
+  *::selection {
+    background: var(--grey-4);
+  }
+
+  &::before {
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    background: #fc625d;
+    width: .75rem;
+    height: .75rem;
+    left: .75rem;
+    top: .8125rem;
+    box-shadow: 1.25rem 0 #fdbc40, 2.5rem 0 #35cd4b;
+  }
+
+  figcaption {
+    color: var(--grey-4);
+    display: inline-flex;
+    font-size: $font-size-small;
+    font-weight: 700;
+    padding: 0 6rem 0 5rem;
+    min-height: 2.5rem;
+    width: 100%;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+
+    background-color: var(--grey-3);
+    margin-bottom: .625rem;
+
+    &::before {
+      content: attr(data-lang);
+      text-transform: Capitalize;
+    }
+
+    span, a {
+      display: block;
+      margin-left: .625rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    a {
+      color: var(--grey-5);
+
+      &:hover {
+        color: var(--grey-6);
+      }
+    }
+  }
+
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    z-index: $zindex-5;
+    margin: 0;
+    border-radius: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    @extend .elastic;
+
+    .show-btn{
+      position: fixed;
+    }
+  }
+
+  &.breakline {
+    .code-container table {
+      line-break: anywhere;
+      white-space: break-spaces;
+
+      pre {
+        white-space: break-spaces;
+      }
+    }
+  }
+}
+
+
+.code-container {
+  overflow-x: scroll;
+  overflow-y: hidden;
+
+  &::after {
+    content: "";
+    display: block;
+    height: .625rem;
+    width: 100%;
+  }
+
+  table {
+    white-space: pre;
+    border-spacing: 0;
+    width: 100%;
+  }
+
+  tr {
+    background-color: inherit;
+    &:hover {
+      td {
+        background-color: var(--grey-3);
+      }
+    }
+  }
+
+  td {
+    position: relative;
+    padding: unset;
+    vertical-align: unset;
+    border: unset;
+    the-transition();
+    pre::before {
+      content: " ";
+    }
+  }
+
+  td:first-child {
+    position: absolute;
+    background: var(--grey-2);
+    text-align: right;
+    overflow-x: visible !important;
+    overflow-y: hidden;
+    left: 0;
+    width: 2.5rem;
+    padding-right: .9375rem;
+    color: var(--color-grey);
+    z-index: $zindex-1;
+  }
+
+  td:nth-child(2) {
+    padding-left: 3rem;
+  }
+
+  td:last-child {
+    padding-right: .9375rem;
+  }
+
+  td[data-num]::before {
+    content: attr(data-num);
+  }
+
+  td[data-command]::before {
+    content: attr(data-command) " ";
+    color: var(--grey-5);
+    display: block;
+    letter-spacing: -1px;
+    padding-right: .5rem;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  td[data-command] + td {
+    padding-left: .5rem;
+    border-left: 1px solid var(--grey-4);
+  }
+
+  .marked {
+    td {
+      background-color: var(--grey-3);
+    }
+    &:hover {
+      td:last-child {
+        background-color: var(--color-red-a1);
+      }
+    }
+  }
+
+  .show-btn {
+    position: absolute;
+    cursor: pointer;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2.875rem;
+    text-align: center;
+    color: var(--text-color);
+    background-image: linear-gradient(to bottom, var(--grey-2-a0) 0, var(--grey-2) 80%);
+    z-index: $zindex-1;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1rem;
+      background: var(--grey-2);
+    }
+
+    .ic {
+      margin-top: 1rem;
+      @extend .up-down;
+    }
+
+    &.open {
+      background: none;
+      bottom: .5rem;
+
+      &::after {
+        display: none;
+      }
+
+      .ic {
+        @extend .down-up;
+      }
+    }
+  }
+
+  // For diff highlight
+  .deletion {
+    background: var(--color-pink-light);
+  }
+
+  .addition {
+    background: var(--color-cyan-light);
+  }
+
+  .meta {
+    color: var(--color-yellow);
+    disable-user-select();
+  }
+
+  .comment,
+  .punctuation {
+    color: var(--grey-5);
+  }
+
+  .variable,
+  .function,
+  .attribute,
+  .tag,
+  .name,
+  .regexp,
+  .ruby .constant,
+  .xml .tag .title,
+  .xml .pi,
+  .xml .doctype,
+  .html .doctype,
+  .css .id,
+  .css .class,
+  .css .pseudo {
+    color: var(--color-red);
+  }
+
+  .number,
+  .preprocessor,
+  .built_in,
+  .builtin-name,
+  .literal,
+  .params,
+  .constant,
+  .command {
+    color: var(--color-orange);
+  }
+
+  .ruby .class .title,
+  .css .rules .attribute,
+  .string,
+  .symbol,
+  .value,
+  .inheritance,
+  .header,
+  .ruby .symbol,
+  .xml .cdata,
+  .special,
+  .formula {
+    color: var(--color-green);
+  }
+
+  .title,
+  .css .hexcolor,
+  .namespace {
+    color: var(--color-aqua);
+  }
+
+  .class-name,
+  .python .decorator,
+  .python .title,
+  .ruby .function .title,
+  .ruby .title .keyword,
+  .perl .sub,
+  .javascript .title,
+  .coffeescript .title {
+    color: var(--color-blue);
+  }
+
+  .keyword,
+  .javascript .function,
+  .typescript .function{
+    color: var(--color-orange);
+  }
+
+  .property {
+    color: var(--color-purple)
+  }
+
+}

package/source/css/_common/components/highlight/operation.styl

@@ -0,0 +1,21 @@
+.operation {
+  color: var(--grey-5);
+  cursor: pointer;
+  position: absolute;
+  padding: .125rem .375rem;
+  right: .125rem;
+  top: .45rem;
+  font-size: $font-size-smaller;
+
+  span {
+    the-transition();
+    margin: 0 .3125rem;
+
+    &:hover {
+      color: var(--grey-7);
+    }
+  }
+
+}
+
+

package/source/css/_common/components/pages/collapse.styl

@@ -0,0 +1,119 @@
+.collapse {
+
+  small {
+    color: var(--grey-4);
+    margin: auto .3125rem;
+  }
+
+  .item {
+    position: relative;
+    padding: 1.25rem 1.875rem;
+    margin: 0;
+
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: $zindex-1;
+      the-transition();
+      box-sizing: unset;
+      top: 1.9rem;
+      left: 0;
+      width: .6rem;
+      height: .6rem;
+      border: .15rem solid var(--primary-color);
+      border-radius: 50%;
+      background: var(--grey-1);
+    }
+
+    &:not(:last-child):not(.title)::after {
+      content: "";
+      position: absolute;
+      top: 1.9rem;
+      bottom: -1.9rem;
+      left: .35rem;
+      border-left: .2rem solid var(--color-red-a3);
+    }
+
+    &:hover::before {
+      border-color: var(--color-blue);
+    }
+  }
+
+
+  .item.header {
+
+    &::after {
+      border-left-style: dashed !important;
+    }
+
+    .cheers {
+      display: block;
+    }
+  }
+
+  .item.section {
+    &::before {
+      width: .4rem;
+      height: .4rem;
+      margin-left: .1rem;
+    }
+  }
+
+  .item.title, .item.header, .item.section {
+    a {
+      border-bottom: .0625rem dashed var(--grey-4);
+    }
+    &:hover a {
+      border-bottom-color: var(--color-blue);
+    }
+  }
+
+  .item.normal {
+
+    &::before {
+      top: 1.4rem;
+      width: .2rem;
+      height: .2rem;
+      margin-left: .2rem;
+      background: var(--primary-color);
+    }
+
+    &:hover::before {
+      background: var(--color-blue);
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: .625rem 1.875rem;
+
+
+    .meta {
+      display: inline;
+      font-size: $font-size-smallest;
+      margin-right: .625rem;
+
+      time {
+        color: var(--grey-4);
+      }
+    }
+
+    .title {
+      display: inline;
+
+      a {
+        color: var(--primary-color);
+
+        &:hover {
+          color: var(--color-blue);
+        }
+      }
+
+      .i-link-alt {
+        font-size: $font-size-small;
+        margin-left: .3125rem;
+      }
+    }
+  }
+}