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

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

@@ -1,548 +1,548 @@
-.v {
-  &.wrap {
-    animation: none;
-    opacity: 0;
-  }
-
-  .lozaded {
-    animation: none;
-  }
-
-  input,
-  textarea {
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: $font-size-smallest;
-    transition: all .25s ease;
-  }
-
-  a {
-    color: var(--color-aqua);
-
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-
-  .text-center {
-    text-align: center;
-  }
-
-  .text-right {
-    text-align: right;
-  }
-
-  .float-right {
-    float: right !important;
-  }
-
-  .pd5 {
-    padding: 5px;
-  }
-
-  .pd10 {
-    padding: 10px;
-  }
-
-  .vemoji, .emoji, .tk-owo-emotion {
-    max-height: 1.5rem;
-    display: inline;
-    vertical-align: middle;
-  }
-
-  .submitting {
-    margin: 1em 0;
-  }
-
-  .form {
-    shadow-box();
-    margin-bottom: .625rem;
-    position: relative;
-    padding: .625rem;
-
-    >.inner {
-      .auth-section {
-        display: flex;
-        padding: .3em .6em;
-      }
-
-      +mobile-small() {
-        flex-wrap: wrap;
-      }
-
-      .input {
-        flex: 1 1 27%;
-        width: 27%;
-
-        +mobile-small() {
-          flex: 1 1 100%;
-          padding-right: 0;
-          width: 100%;
-        }
-
-        input {
-          padding: .625rem .3125rem;
-          width: 100%;
-          border-bottom: .0625rem dashed var(--grey-4);
-
-          &:focus {
-            border-bottom-color: var(--primary-color);
-          }
-        }
-      }
-
-      .textarea {
-        padding: .3em .6em;
-      }
-
-      .veditor {
-        width: 100%;
-        min-height: 8.75em;
-        font-size: $font-size-small;
-        line-height: 1.75;
-        resize: vertical;
-      }
-
-      .btn-group {
-        padding: .625rem 0;
-        display: flex;
-
-        .i-markdown {
-          font-size: $font-size-smallest;
-        }
-
-        .left {
-          width: 30%;
-        }
-
-        .right {
-          width: 70%;
-          text-align: right;
-        }
-      }
-
-      .vextra-area {
-        margin: .4em 0 .4em .5em;
-      }
-
-
-      .preview-box {
-        padding: .4375rem 1.25rem;
-        font-size: $font-size-smaller;
-        shadow-box();
-      }
-
-      .trigger-section {
-        display: none;
-      }
-    }
-
-    .smile-body {
-
-      img {
-        display: inline-block;
-        width: auto;
-        height: 3rem;
-        cursor: pointer;
-        padding: .5rem;
-        border-radius: .25rem;
-        transition: box-shadow .2s ease-out, background .2s ease-out;
-      }
-
-      li.active img, img:hover {
-        background: var(--grey-2);
-        box-shadow: 1px 1px 2px var(--grey-1), -1px -1px 2px var(--grey-4), inset 8px 8px 16px var(--grey-1), inset -8px -8px 16px var(--grey-3);
-      }
-
-      .smile-icons {
-        border-radius: .5rem;
-        margin: .3rem 0;
-        min-height: 10rem;
-        max-height: 10rem;
-        overflow: auto;
-        background: var(--grey-2);
-        padding: .5rem;
-      }
-
-      .smile-bar {
-        li {
-          display: inline-block;
-          margin-right: .25rem;
-        }
-
-        img {
-          width: 2.8rem;
-          height: 2.8rem;
-          background: var(--grey-2);
-          object-fit: contain;
-        }
-      }
-    }
-
-    .btn {
-      cursor: pointer;
-      display: inline-block;
-      margin: .5rem;
-      overflow: hidden;
-      vertical-align: middle;
-
-      &.actived .ic {
-        color: var(--primary-color);
-      }
-
-      .ic {
-        color: var(--grey-6);
-        transition: all .25s ease;
-
-        &:hover {
-          color: var(--color-blue);
-        }
-      }
-    }
-
-    .cancel-reply {
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
-    }
-
-    .vsubmit {
-      font-size: $font-size-small;
-    }
-  }
-
-  .msg {
-    position: absolute;
-    background: var(--grey-1-a5);
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-
-    .alert {
-      padding: 3em 0 0 0;
-
-      .text {
-        color: var(--grey-8);
-        padding: 15px;
-      }
-    }
-
-    +mobile() {
-      .alert {
-        padding: 8em 0;
-
-        .text {
-          padding: 10px;
-        }
-      }
-    }
-  }
-
-  .info {
-    padding: .3125rem;
-    font-weight: 600;
-    font-size: $font-size-larger;
-
-    .col {
-      display: inline-block;
-      padding: 0 20px;
-      position: relative;
-      background: transparent;
-      z-index: 2;
-
-      .count {
-        font-size: 1.375rem;
-        font-weight: inherit;
-      }
-    }
-  }
-
-
-
-  .next {
-    .more {
-      cursor: pointer;
-      margin: 1em 0;
-    }
-  }
-
-  .list {
-    width: 100%;
-  }
-  .item {
-    word-break: break-all;
-    padding-top: 1.25em;
-
-    .avatar {
-      width: 3.125em;
-      height: 3.125em;
-      float: left;
-      border-radius: 50%;
-      margin-right: .7525em;
-      border: .0625rem solid var(--grey-3);
-      padding: .125em
-    }
-
-    &:hover .avatar {
-      animation: .8s ease-out 0s 1 normal both running shake;
-    }
-
-    .main {
-      overflow: hidden;
-      padding-bottom: .5em;
-      border-bottom: .0625rem dashed var(--grey-3);
-    }
-
-    .head, .meta {
-      color: var(--grey-5);
-      line-height: 1.8;
-    }
-
-    .name {
-      margin-right: .875rem;
-    }
-
-    .tag, .system, .time {
-      display: inline-block;
-      font-size: $font-size-smallest;
-    }
-
-    +mobile-small() {
-      .system span {
-        display: none;
-      }
-    }
-    .tag {
-      border-radius: .125rem;
-      color: var(--grey-1);
-      padding: 0 .3125rem;
-      margin-right: .5rem;
-      background-color: var(--color-grey);
-
-      $tagcolor = hexo-config('valine.tagColor');
-
-      for type in $tagcolor {
-        &.{slice(type, 0, 1)} {
-          background-color: unquote(slice(type, 1));
-        }
-      }
-    }
-
-    .at {
-      color: var(--primary-color);
-
-      &:hover {
-        color: var(--color-aqua);
-      }
-    }
-
-    .meta {
-      line-height: 1;
-      .at {
-        float: right;
-      }
-    }
-
-    .content {
-      margin-bottom: .75em;
-      padding: .625em;
-
-      > .inner {
-        font-size: $font-size-small;
-        word-wrap: break-word;
-        word-break: break-all;
-        line-height: 2;
-        position: relative;
-
-        &.expand {
-          cursor: pointer;
-          max-height: 8em;
-
-          overflow: hidden;
-
-          &::before {
-            display: block;
-            content: "";
-            position: absolute;
-            width: 100%;
-            left: 0;
-            top: 0;
-            bottom: 3.15em;
-            background: linear-gradient(180deg, var(--grey-1-a0), var(--grey-1));
-            z-index: 999;
-          }
-
-          &::after {
-            display: block;
-            content: attr(data-expand);
-            text-align: center;
-            position: absolute;
-            width: 100%;
-            height: 3.15em;
-            line-height: 3.15em;
-            left: 0;
-            bottom: 0;
-            z-index: 999;
-            background: var(--grey-1);
-          }
-        }
-      }
-
-      .form {
-        margin-top: 1rem;
-      }
-    }
-
-    &:last-child .main {
-      border-bottom: none
-    }
-
-    .children {
-      padding-left: 1em;
-      border-left: .0625rem dashed var(--grey-3);
-
-      .avatar {
-        width: 2.225em;
-        height: 2.225em
-      }
-    }
-  }
-
-    .empty {
-      padding: 20px;
-      text-align: center;
-    }
-
-
-  /************ Loading ************/
-  .spinner {
-    margin: 10px auto;
-    width: 50px;
-    height: 30px;
-    text-align: center;
-    font-size: 10px;
-  }
-
-  .spinner>div {
-    background-color: var(--primary-color);
-    height: 100%;
-    width: 6px;
-    margin-right: 3px;
-    display: inline-block;
-    animation: sk-stretchdelay 1.2s infinite ease-in-out;
-  }
-
-  .spinner .r2 {
-    animation-delay: -1.1s;
-  }
-
-  .spinner .r3 {
-    animation-delay: -1s;
-  }
-
-  .spinner .r4 {
-    animation-delay: -0.9s;
-  }
-
-  .spinner .r5 {
-    animation-delay: -0.8s;
-  }
-
-  @keyframes sk-stretchdelay {
-
-    0%,
-    40%,
-    100% {
-      transform: scaleY(0.4);
-    }
-
-    20% {
-      transform: scaleY(1);
-    }
-  }
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: var(--grey-5);
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst,
-.hljs-meta {
-  color: var(--grey-7);
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: var(--color-green);
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: var(--color-red);
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: var(--color-pink);
-  font-weight: bold;
-}
-
-.hljs-subst {
-  font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: var(--color-grey);
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: var(--color-orange);
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
-  color: var(--color-green);
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: var(--color-purple);
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
-  color: var(--color-aqua);
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
+.v {
+  &.wrap {
+    animation: none;
+    opacity: 0;
+  }
+
+  .lozaded {
+    animation: none;
+  }
+
+  input,
+  textarea {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: $font-size-smallest;
+    transition: all .25s ease;
+  }
+
+  a {
+    color: var(--color-aqua);
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .float-right {
+    float: right !important;
+  }
+
+  .pd5 {
+    padding: 5px;
+  }
+
+  .pd10 {
+    padding: 10px;
+  }
+
+  .vemoji, .emoji, .tk-owo-emotion {
+    max-height: 1.5rem;
+    display: inline;
+    vertical-align: middle;
+  }
+
+  .submitting {
+    margin: 1em 0;
+  }
+
+  .form {
+    shadow-box();
+    margin-bottom: .625rem;
+    position: relative;
+    padding: .625rem;
+
+    >.inner {
+      .auth-section {
+        display: flex;
+        padding: .3em .6em;
+      }
+
+      +mobile-small() {
+        flex-wrap: wrap;
+      }
+
+      .input {
+        flex: 1 1 27%;
+        width: 27%;
+
+        +mobile-small() {
+          flex: 1 1 100%;
+          padding-right: 0;
+          width: 100%;
+        }
+
+        input {
+          padding: .625rem .3125rem;
+          width: 100%;
+          border-bottom: .0625rem dashed var(--grey-4);
+
+          &:focus {
+            border-bottom-color: var(--primary-color);
+          }
+        }
+      }
+
+      .textarea {
+        padding: .3em .6em;
+      }
+
+      .veditor {
+        width: 100%;
+        min-height: 8.75em;
+        font-size: $font-size-small;
+        line-height: 1.75;
+        resize: vertical;
+      }
+
+      .btn-group {
+        padding: .625rem 0;
+        display: flex;
+
+        .i-markdown {
+          font-size: $font-size-smallest;
+        }
+
+        .left {
+          width: 30%;
+        }
+
+        .right {
+          width: 70%;
+          text-align: right;
+        }
+      }
+
+      .vextra-area {
+        margin: .4em 0 .4em .5em;
+      }
+
+
+      .preview-box {
+        padding: .4375rem 1.25rem;
+        font-size: $font-size-smaller;
+        shadow-box();
+      }
+
+      .trigger-section {
+        display: none;
+      }
+    }
+
+    .smile-body {
+
+      img {
+        display: inline-block;
+        width: auto;
+        height: 3rem;
+        cursor: pointer;
+        padding: .5rem;
+        border-radius: .25rem;
+        transition: box-shadow .2s ease-out, background .2s ease-out;
+      }
+
+      li.active img, img:hover {
+        background: var(--grey-2);
+        box-shadow: 1px 1px 2px var(--grey-1), -1px -1px 2px var(--grey-4), inset 8px 8px 16px var(--grey-1), inset -8px -8px 16px var(--grey-3);
+      }
+
+      .smile-icons {
+        border-radius: .5rem;
+        margin: .3rem 0;
+        min-height: 10rem;
+        max-height: 10rem;
+        overflow: auto;
+        background: var(--grey-2);
+        padding: .5rem;
+      }
+
+      .smile-bar {
+        li {
+          display: inline-block;
+          margin-right: .25rem;
+        }
+
+        img {
+          width: 2.8rem;
+          height: 2.8rem;
+          background: var(--grey-2);
+          object-fit: contain;
+        }
+      }
+    }
+
+    .btn {
+      cursor: pointer;
+      display: inline-block;
+      margin: .5rem;
+      overflow: hidden;
+      vertical-align: middle;
+
+      &.actived .ic {
+        color: var(--primary-color);
+      }
+
+      .ic {
+        color: var(--grey-6);
+        transition: all .25s ease;
+
+        &:hover {
+          color: var(--color-blue);
+        }
+      }
+    }
+
+    .cancel-reply {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+
+    .vsubmit {
+      font-size: $font-size-small;
+    }
+  }
+
+  .msg {
+    position: absolute;
+    background: var(--grey-1-a5);
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    .alert {
+      padding: 3em 0 0 0;
+
+      .text {
+        color: var(--grey-8);
+        padding: 15px;
+      }
+    }
+
+    +mobile() {
+      .alert {
+        padding: 8em 0;
+
+        .text {
+          padding: 10px;
+        }
+      }
+    }
+  }
+
+  .info {
+    padding: .3125rem;
+    font-weight: 600;
+    font-size: $font-size-larger;
+
+    .col {
+      display: inline-block;
+      padding: 0 20px;
+      position: relative;
+      background: transparent;
+      z-index: 2;
+
+      .count {
+        font-size: 1.375rem;
+        font-weight: inherit;
+      }
+    }
+  }
+
+
+
+  .next {
+    .more {
+      cursor: pointer;
+      margin: 1em 0;
+    }
+  }
+
+  .list {
+    width: 100%;
+  }
+  .item {
+    word-break: break-all;
+    padding-top: 1.25em;
+
+    .avatar {
+      width: 3.125em;
+      height: 3.125em;
+      float: left;
+      border-radius: 50%;
+      margin-right: .7525em;
+      border: .0625rem solid var(--grey-3);
+      padding: .125em
+    }
+
+    &:hover .avatar {
+      animation: .8s ease-out 0s 1 normal both running shake;
+    }
+
+    .main {
+      overflow: hidden;
+      padding-bottom: .5em;
+      border-bottom: .0625rem dashed var(--grey-3);
+    }
+
+    .head, .meta {
+      color: var(--grey-5);
+      line-height: 1.8;
+    }
+
+    .name {
+      margin-right: .875rem;
+    }
+
+    .tag, .system, .time {
+      display: inline-block;
+      font-size: $font-size-smallest;
+    }
+
+    +mobile-small() {
+      .system span {
+        display: none;
+      }
+    }
+    .tag {
+      border-radius: .125rem;
+      color: var(--grey-1);
+      padding: 0 .3125rem;
+      margin-right: .5rem;
+      background-color: var(--color-grey);
+
+      $tagcolor = hexo-config('valine.tagColor');
+
+      for type in $tagcolor {
+        &.{slice(type, 0, 1)} {
+          background-color: unquote(slice(type, 1));
+        }
+      }
+    }
+
+    .at {
+      color: var(--primary-color);
+
+      &:hover {
+        color: var(--color-aqua);
+      }
+    }
+
+    .meta {
+      line-height: 1;
+      .at {
+        float: right;
+      }
+    }
+
+    .content {
+      margin-bottom: .75em;
+      padding: .625em;
+
+      > .inner {
+        font-size: $font-size-small;
+        word-wrap: break-word;
+        word-break: break-all;
+        line-height: 2;
+        position: relative;
+
+        &.expand {
+          cursor: pointer;
+          max-height: 8em;
+
+          overflow: hidden;
+
+          &::before {
+            display: block;
+            content: "";
+            position: absolute;
+            width: 100%;
+            left: 0;
+            top: 0;
+            bottom: 3.15em;
+            background: linear-gradient(180deg, var(--grey-1-a0), var(--grey-1));
+            z-index: 999;
+          }
+
+          &::after {
+            display: block;
+            content: attr(data-expand);
+            text-align: center;
+            position: absolute;
+            width: 100%;
+            height: 3.15em;
+            line-height: 3.15em;
+            left: 0;
+            bottom: 0;
+            z-index: 999;
+            background: var(--grey-1);
+          }
+        }
+      }
+
+      .form {
+        margin-top: 1rem;
+      }
+    }
+
+    &:last-child .main {
+      border-bottom: none
+    }
+
+    .children {
+      padding-left: 1em;
+      border-left: .0625rem dashed var(--grey-3);
+
+      .avatar {
+        width: 2.225em;
+        height: 2.225em
+      }
+    }
+  }
+
+    .empty {
+      padding: 20px;
+      text-align: center;
+    }
+
+
+  /************ Loading ************/
+  .spinner {
+    margin: 10px auto;
+    width: 50px;
+    height: 30px;
+    text-align: center;
+    font-size: 10px;
+  }
+
+  .spinner>div {
+    background-color: var(--primary-color);
+    height: 100%;
+    width: 6px;
+    margin-right: 3px;
+    display: inline-block;
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  }
+
+  .spinner .r2 {
+    animation-delay: -1.1s;
+  }
+
+  .spinner .r3 {
+    animation-delay: -1s;
+  }
+
+  .spinner .r4 {
+    animation-delay: -0.9s;
+  }
+
+  .spinner .r5 {
+    animation-delay: -0.8s;
+  }
+
+  @keyframes sk-stretchdelay {
+
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+    }
+
+    20% {
+      transform: scaleY(1);
+    }
+  }
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--grey-5);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst,
+.hljs-meta {
+  color: var(--grey-7);
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: var(--color-green);
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: var(--color-red);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: var(--color-pink);
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: var(--color-grey);
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: var(--color-orange);
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: var(--color-green);
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: var(--color-purple);
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: var(--color-aqua);
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}