hexo-theme-solitude 1.1.3 → 1.2.1

package/source/css/_post/postContent.styl

@@ -0,0 +1,957 @@
+#article-container figure.highlight .line.marked {
+  background-color: rgba(97, 97, 97, .314)
+}
+
+#article-container figure.highlight table {
+  display: inline-flex;
+  border: none;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+#article-container figure.highlight table td {
+  padding: 0;
+  border: none;
+  height: 100%
+}
+
+#article-container figure.highlight table td.code {
+  width: 100%;
+  display: flex;
+  position: relative
+}
+
+#article-container figure.highlight .code pre {
+  padding-right: .5rem;
+  padding-left: .5rem;
+  width: 100%
+}
+
+#article-container figure.highlight, #article-container pre {
+  overflow: auto;
+  margin: 0 0 1rem;
+  padding: 0;
+  line-height: 1.6
+}
+
+#article-container code, #article-container pre {
+  font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important
+}
+
+#article-container code {
+  padding: .1rem .2rem;
+  background: rgba(27, 31, 35, .05);
+  color: #f47466
+}
+
+#article-container pre code {
+  padding: 0;
+  background: 0 0;
+  color: var(--hl-color);
+  text-shadow: none
+}
+
+#article-container figure.highlight {
+  position: relative
+}
+
+#article-container figure.highlight pre {
+  margin: 0;
+  padding: 8px 0;
+  border: none
+}
+
+#article-container figure.highlight .caption, #article-container figure.highlight figcaption {
+  padding: .3rem 0 .1rem .7rem;
+  font-size: 16px;
+  line-height: 1em
+}
+
+#article-container figure.highlight .caption a, #article-container figure.highlight figcaption a {
+  float: right;
+  padding-right: 10px;
+  color: var(--hl-color)
+}
+
+#article-container figure.highlight .caption a:hover, #article-container figure.highlight figcaption a:hover {
+  border-bottom-color: var(--hl-color)
+}
+
+#article-container .highlight-tools {
+  position: relative;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow: hidden;
+  min-height: 1.2rem;
+  height: 2.15em;
+  background: var(--hltools-bg);
+  color: var(--hltools-color);
+  font-size: 16px
+}
+
+#article-container .highlight-tools.closed + table {
+  display: none
+}
+
+#article-container .highlight-tools .expand {
+  position: absolute;
+  padding: .4rem .3rem;
+  cursor: pointer;
+  transition: transform .3s ease 0s
+}
+
+#article-container .highlight-tools .expand + .code-lang {
+  left: 1.7rem
+}
+
+#article-container .highlight-tools .expand.closed {
+  transition: all .3s ease 0s;
+  transform: rotate(-90deg) !important
+}
+
+#article-container .highlight-tools .code-lang {
+  position: absolute;
+  left: .7rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 1.15em;
+  user-select: none
+}
+
+#article-container .highlight-tools .copy-notice {
+  position: absolute;
+  right: 1.7rem;
+  opacity: 0;
+  transition: opacity .4s ease 0s
+}
+
+#article-container .highlight-tools .copy-button {
+  position: absolute;
+  right: .7rem;
+  cursor: pointer;
+  transition: color .2s ease 0s
+}
+
+#article-container .highlight-tools .copy-button:hover {
+  color: #307af6
+}
+
+#article-container .gist table {
+  width: auto
+}
+
+#article-container .gist table td {
+  border: none
+}
+
+#article-container .code-expand-btn.expand-done {
+  display: none !important
+}
+
+#article-container .code-expand-btn:not(.expand-done) ~ pre, #article-container .code-expand-btn:not(.expand-done) ~ table {
+  overflow: hidden;
+  height: 400px
+}
+
+#article-container {
+  overflow-wrap: break-word
+}
+
+#article-container a {
+  color: #307af6
+}
+
+#article-container a:hover {
+  text-decoration: none;
+  background: var(--sco-main);
+  border: none;
+  color: var(--sco-white);
+  border-radius: 4px
+}
+
+#article-container img {
+  display: block;
+  margin: 0 auto .8rem;
+  max-width: 90%;
+  max-height: 450px
+}
+
+@media screen and (max-width: 768px) {
+  #article-container img {
+    max-width: 100%
+  }
+}
+
+#article-container p {
+  margin: 0 0 .8rem
+}
+
+#article-container iframe {
+  margin: 0 0 1rem
+}
+
+#article-container kbd {
+  margin: 0 3px;
+  padding: 3px 5px;
+  border: 1px solid #b4b4b4;
+  border-radius: 3px;
+  background-color: #f8f8f8;
+  box-shadow: rgba(0, 0, 0, .25) 0 1px 3px, rgba(255, 255, 255, .6) 0 2px 1px 0 inset;
+  color: #34495e;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: .9em;
+  font-family: Monaco, "Ubuntu Mono", monospace;
+  line-height: 1em
+}
+
+#article-container h1, #article-container h2, #article-container h3, #article-container h4, #article-container h5, #article-container h6 {
+  transition: all .2s ease-out 0s
+}
+
+#article-container h1::before, #article-container h2::before, #article-container h3::before, #article-container h4::before, #article-container h5::before, #article-container h6::before {
+  position: absolute;
+  top: calc(50% - .35rem);
+  color: #f2ba4b;
+  content: "";
+  line-height: 1;
+  transition: all .2s ease-out 0s
+}
+
+#article-container h1:hover::before, #article-container h2:hover::before, #article-container h3:hover::before, #article-container h4:hover::before, #article-container h5:hover::before, #article-container h6:hover::before {
+  color: #307af6
+}
+
+#article-container h1 {
+  padding-left: 1.4rem
+}
+
+#article-container h1 code {
+  font-size: 1rem
+}
+
+#article-container h1::before {
+  margin-left: -1.2rem;
+  font-size: 1rem
+}
+
+#article-container h1:hover {
+  padding-left: 1.6rem
+}
+
+#article-container h2 {
+  padding-left: 1.3rem
+}
+
+#article-container h2 code {
+  font-size: .9rem
+}
+
+#article-container h2::before {
+  margin-left: -1.1rem;
+  font-size: .9rem
+}
+
+#article-container h2:hover {
+  padding-left: 1.5rem
+}
+
+#article-container h3 {
+  padding-left: 1.2rem
+}
+
+#article-container h3 code {
+  font-size: .8rem
+}
+
+#article-container h3::before {
+  margin-left: -1rem;
+  font-size: .8rem
+}
+
+#article-container h3:hover {
+  padding-left: 1.4rem
+}
+
+#article-container h4 {
+  padding-left: 1.1rem
+}
+
+#article-container h4 code {
+  font-size: .7rem
+}
+
+#article-container h4::before {
+  margin-left: -.9rem;
+  font-size: .7rem
+}
+
+#article-container h4:hover {
+  padding-left: 1.3rem
+}
+
+#article-container h5 {
+  padding-left: 1rem
+}
+
+#article-container h5 code {
+  font-size: .6rem
+}
+
+#article-container h5::before {
+  margin-left: -.8rem;
+  font-size: .6rem
+}
+
+#article-container h5:hover {
+  padding-left: 1.2rem
+}
+
+#article-container h6 {
+  padding-left: 1rem
+}
+
+#article-container h6 code {
+  font-size: .6rem
+}
+
+#article-container h6::before {
+  margin-left: -.8rem;
+  font-size: .6rem
+}
+
+#article-container h6:hover {
+  padding-left: 1.2rem
+}
+
+#article-container ol, #article-container ul {
+  margin-top: .4rem;
+  padding: 0 0 0 .8rem;
+  list-style: none;
+  counter-reset: li 0
+}
+
+@media screen and (max-width: 768px) {
+  #article-container ol, #article-container ul {
+    padding: 0 0 0 .4rem
+  }
+}
+
+#article-container ol p, #article-container ul p {
+  margin: 0 0 .5rem
+}
+
+#article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
+  padding-left: .6rem
+}
+
+@media screen and (max-width: 768px) {
+  #article-container ol ol, #article-container ol ul, #article-container ul ol, #article-container ul ul {
+    padding-left: .2rem
+  }
+}
+
+#article-container ol li:not(.tab), #article-container ul li:not(.tab) {
+  position: relative;
+  margin: .2rem 0
+}
+
+#article-container ol li:hover::before, #article-container ul li:hover::before {
+  transform: rotate(360deg)
+}
+
+#article-container ol li::before, #article-container ul li::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #307af6;
+  color: #fff;
+  cursor: pointer;
+  transition: all .3s ease-out 0s
+}
+
+#article-container ol > li:not(.tab) {
+  padding: .2em .2em .2em 1.8em
+}
+
+#article-container ol > li::before {
+  margin-top: .65em;
+  width: 1.45em;
+  height: 1.45em;
+  border-radius: .725em;
+  content: counter(li);
+  counter-increment: li 1;
+  text-align: center;
+  font-size: .85em;
+  line-height: 1.45em
+}
+
+#article-container ul > li:not(.tab) {
+  padding: .2em .2em .2em 1.4em
+}
+
+#article-container ul > li:not(.tab):hover::before {
+  border-color: #ff7242
+}
+
+#article-container ul > li:not(.tab)::before {
+  top: .78em;
+  width: .42em;
+  height: .42em;
+  border: .21em solid #307af6;
+  border-radius: .42em;
+  background: 0 0;
+  content: "";
+  line-height: .42em
+}
+
+#article-container > :last-child {
+  margin-bottom: 0 !important
+}
+
+#article-container .btn-center {
+  margin: 0 0 1rem;
+  text-align: center
+}
+
+#article-container .btn-beautify {
+  display: inline-block;
+  margin: 0 .2rem .3rem;
+  padding: 0 1rem;
+  background-color: #777;
+  color: #fff;
+  line-height: 2
+}
+
+#article-container .btn-beautify i + span {
+  margin-left: .3rem
+}
+
+#article-container .btn-beautify:not(.block) + .btn-beautify:not(.block) {
+  margin: 0 .2rem 1rem
+}
+
+#article-container .btn-beautify.block {
+  display: block;
+  margin: 0 0 1rem;
+  width: fit-content
+}
+
+#article-container .btn-beautify.block.center {
+  margin: 0 auto 1rem
+}
+
+#article-container .btn-beautify.block.right {
+  margin: 0 0 1rem auto
+}
+
+#article-container .btn-beautify.larger {
+  padding: .3rem 1.3rem
+}
+
+#article-container .btn-beautify:hover {
+  text-decoration: none
+}
+
+#article-container .btn-beautify.blue {
+  background-color: #428bca
+}
+
+#article-container .btn-beautify.pink {
+  background-color: #ff69b4
+}
+
+#article-container .btn-beautify.red {
+  background-color: red
+}
+
+#article-container .btn-beautify.purple {
+  background-color: #6f42c1
+}
+
+#article-container .btn-beautify.orange {
+  background-color: #ff8c00
+}
+
+#article-container .btn-beautify.green {
+  background-color: #5cb85c
+}
+
+#article-container .btn-beautify.outline {
+  border: 1px solid #777;
+  background-color: transparent;
+  color: #777;
+  transition: all .3s ease 0s
+}
+
+#article-container .btn-beautify.outline.button--animated::before {
+  background: #777
+}
+
+#article-container .btn-beautify.outline:hover {
+  color: #fff !important
+}
+
+#article-container .btn-beautify.outline.blue {
+  border-color: #428bca;
+  color: #428bca
+}
+
+#article-container .btn-beautify.outline.blue.button--animated::before {
+  background: #428bca
+}
+
+#article-container .btn-beautify.outline.pink {
+  border-color: #ff69b4;
+  color: #ff69b4
+}
+
+#article-container .btn-beautify.outline.pink.button--animated::before {
+  background: #ff69b4
+}
+
+#article-container .btn-beautify.outline.red {
+  border-color: red;
+  color: red
+}
+
+#article-container .btn-beautify.outline.red.button--animated::before {
+  background: red
+}
+
+#article-container .btn-beautify.outline.purple {
+  border-color: #6f42c1;
+  color: #6f42c1
+}
+
+#article-container .btn-beautify.outline.purple.button--animated::before {
+  background: #6f42c1
+}
+
+#article-container .btn-beautify.outline.orange {
+  border-color: #ff8c00;
+  color: #ff8c00
+}
+
+#article-container .btn-beautify.outline.orange.button--animated::before {
+  background: #ff8c00
+}
+
+#article-container .btn-beautify.outline.green {
+  border-color: #5cb85c;
+  color: #5cb85c
+}
+
+#article-container .btn-beautify.outline.green.button--animated::before {
+  background: #5cb85c
+}
+
+#article-container .inline-img {
+  display: inline;
+  margin: 0 3px;
+  height: 1.1em;
+  vertical-align: text-bottom
+}
+
+#article-container.flink {
+  margin-top: 1rem
+}
+
+#article-container.flink h2 {
+  margin-top: .5rem;
+  margin-bottom: 0
+}
+
+.article-recent_post_categories {
+  font-size: 12px;
+  font-weight: 700;
+  opacity: .6;
+  line-height: 1
+}
+
+#article-container h1:before, #article-container h2:before, #article-container h3:before, #article-container h4:before, #article-container h5:before, #article-container h6:before {
+  top: calc(50% - .45rem);
+  content: ''
+}
+
+#article-container h1:hover:before, #article-container h2:hover:before, #article-container h3:hover:before, #article-container h4:hover:before, #article-container h5:hover:before, #article-container h6:hover:before {
+  color: var(--sco-lighttext)
+}
+
+#article-container h1:hover, #article-container h2:hover, #article-container h3:hover, #article-container h4:hover, #article-container h5:hover, #article-container h6:hover {
+  padding-left: 1.3rem
+}
+
+#article-container ul > li:not(.tab):before {
+  border: .21em solid var(--sco-lighttext);
+  background: var(--sco-lighttext)
+}
+
+#article-container ol, #article-container ul {
+  padding: 0
+}
+
+#article-container ul > li:not(.tab):hover:before {
+  border-color: var(--sco-none)
+}
+
+#article-container a {
+  text-decoration: none;
+  border-bottom: 2px solid var(--sco-lighttext);
+  color: var(--sco-fontcolor);
+  font-weight: 700;
+  padding: 0 4px;
+  border-radius: 4px 4px 0 0
+}
+
+#article-container .site-card:hover a:not(.fancybox) {
+  text-decoration: none;
+  border-bottom: 2px solid var(--sco-none);
+  color: var(--sco-white);
+  background: var(--sco-main);
+  box-shadow: var(--sco-shadow-main)
+}
+
+#article-container a.fancybox {
+  border-bottom: 0;
+  padding: 0;
+  margin: auto;
+  display: contents;
+  width: fit-content;
+  -webkit-user-select: none
+}
+
+#article-container a.fancybox img {
+  cursor: zoom-in
+}
+
+#article-container p {
+  margin: 1rem 0;
+  text-align: left;
+  letter-spacing: 1px
+}
+
+#article-container blockquote p {
+  line-height: 1.4;
+  font-size: 15px
+}
+
+#article-container code {
+  color: var(--sco-white);
+  padding: .2rem .4rem;
+  border-radius: 4px;
+  margin: 0 4px;
+  background: var(--sco-pink);
+  line-height: 2;
+  box-shadow: var(--sco-shadow-border)
+}
+
+#article-container code::selection {
+  background: var(--sco-main) !important
+}
+
+#article-container p {
+  font-size: .9rem;
+  line-height: 1.7;
+  font-weight: 400
+}
+
+#article-container.post-content h1, #article-container.post-content h2, #article-container.post-content h3, #article-container.post-content h4 {
+  border-top 1px dashed var(--sco-theme-op)
+  padding-top 1.5rem
+  margin-top 1.5rem
+}
+
+#article-container.post-content h1 {
+  font-size: 1.5rem;
+  line-height: 1.3
+}
+
+#article-container.post-content h2 {
+  font-size: 1.3rem;
+  line-height: 1.3;
+  border-top: 1px dashed var(--sco-theme-op);
+  padding-top: 1.5rem
+}
+
+#article-container.post-content h3 {
+  font-size: 1.1rem;
+  line-height: 1.3
+}
+
+#article-container.post-content h4 {
+  font-size: 1rem;
+  line-height: 1.3
+}
+
+@media screen and (max-width: 768px) {
+  #article-container p {
+    line-height: 1.5
+  }
+}
+
+#article-container > h1:nth-child(1), #article-container > h2:nth-child(1) {
+  margin: 0
+}
+
+#article-container .headerlink::before {
+  content: "\e082";
+  font-family: scoicon !important
+}
+
+#article-container .headerlink {
+  float: right;
+  opacity: .08;
+  position: relative;
+  padding: 0;
+  border-style: none;
+  border-radius: 8px !important;
+  line-height: 2;
+  font-size: 1rem
+}
+
+#article-container .headerlink:hover {
+  background: 0 0 !important;
+  opacity: 1;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  background: var(--sco-none);
+  color: var(--sco-lighttext) !important;
+  text-decoration: none
+}
+
+#article-container img {
+  border-radius: 12px;
+  margin-bottom: .5rem;
+  object-fit: cover
+}
+
+#article-container img.error {
+  content: url(error_img)
+}
+
+.doge-inner-player {
+  border-radius: 12px !important
+}
+
+#article-container ol li:before, #article-container ul li:before {
+  background: var(--sco-main);
+  cursor: default
+}
+
+#article-container ol li:hover:before, #article-container ul li:hover:before {
+  transform: rotate(0)
+}
+
+#article-container figure.highlight .highlight-tools {
+  background: var(--sco-secondbg);
+  border-bottom: var(--style-border-always);
+  color: var(--sco-fontcolor)
+}
+
+#article-container .gutter {
+  opacity: .6;
+  user-select: none
+}
+
+#article-container .code-lang {
+  margin-left: 6px
+}
+
+#article-container .highlight-tools .code-lang {
+  text-transform: capitalize;
+  left: 1.9rem
+}
+
+#article-container figure.highlight table::-webkit-scrollbar {
+  color: var(--sco-blue);
+  background: var(--sco-card-bg);
+  height: 8px
+}
+
+#article-container figure.highlight table::-webkit-scrollbar-thumb {
+  background: var(--sco-main-op)
+}
+
+#article-container figure.highlight table::-webkit-scrollbar-thumb:hover {
+  background: var(--sco-main)
+}
+
+#article-container .code-expand-btn i {
+  color: var(--sco-fontcolor);
+  font-size: 14px;
+  line-height: 1;
+  animation: 1.2s ease 0s infinite normal none running code-expand-key
+}
+
+#article-container .code-expand-btn {
+  background: var(--sco-secondbg);
+  transition: .3s;
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  transform: translateZ(0);
+  border-top: var(--style-border-always);
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px
+}
+
+#article-container .code-expand-btn:hover {
+  background: var(--sco-main)
+}
+
+#article-container .code-expand-btn:hover i {
+  color: var(--sco-white)
+}
+
+#readmore-talk {
+  text-align: center;
+  color: var(--sco-lighttext);
+  padding: 8px;
+  border-radius: 12px;
+  background: #f2b94b0c
+}
+
+#article-container iframe {
+  border-radius: 12px !important
+}
+
+#article-container figure.highlight {
+  border-radius: 8px 8px 4px 4px
+}
+
+#article-container figure.highlight .gutter pre {
+  color: var(--sco-secondtext);
+  background: var(--sco-secondbg);
+  border-right: var(--style-border-always);
+  padding-right: .5rem;
+  padding-left: .5rem;
+  text-align: right
+}
+
+#article-container figure.highlight figcaption a {
+  color: #a9a9a9 !important
+}
+
+#article-container .highlight:not(.js-file-line-container) {
+  background-color: var(--sco-card-bg) !important;
+  color: var(--sco-fontcolor);
+  border: var(--style-border-always);
+  overflow: hidden
+}
+
+#article-container figure.highlight pre span::selection {
+  background: var(--sco-main) !important;
+  color: var(--sco-white) !important
+}
+
+#article-container h1 {
+  padding-left: 0
+}
+
+#article-container h1:before {
+  display: none
+}
+
+#article-container h1:hover {
+  padding-left: 0
+}
+
+#article-container > div > figure > figcaption > p {
+  margin: 0
+}
+
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
+  padding: 8px 12px;
+  background: var(--sco-white);
+  border-radius: 12px;
+  color: var(--sco-black);
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  transition: .3s;
+  cursor: pointer;
+  border: none
+}
+
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover {
+  background: #d0b247;
+  color: var(--sco-white)
+}
+
+#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
+  margin-right: 8px;
+  font-size: 1rem
+}
+
+@media screen and (max-width: 768px) {
+  #article-container .author-content-item.single.like-movie .banner-button-group {
+    right: 1rem;
+    bottom: 1rem
+  }
+
+  #article-container .author-content-item.single.like-movie .banner-button-group .banner-button {
+    background: 0 0;
+    color: var(--sco-white);
+    padding: 0
+  }
+
+  #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i {
+    margin-right: 0;
+    font-size: 1.5rem
+  }
+
+  #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text {
+    display: none
+  }
+}
+
+.main-hero-waves-area
+  width 100%
+  position absolute
+  left 0
+  bottom -11px
+  z-index 5
+
+.waves-area .waves-svg
+  width 100%
+  height 60px
+
+.parallax > use
+  animation move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite
+
+.parallax > use:nth-child(1)
+  animation-delay -2s
+  animation-duration 7s
+  fill var(--sco-background)
+  opacity .5
+
+.parallax > use:nth-child(2)
+  animation-delay -3s
+  animation-duration 10s
+  fill var(--sco-background)
+  opacity .6
+
+.parallax > use:nth-child(3)
+  animation-delay -4s
+  animation-duration 13s
+  fill var(--sco-background)
+  opacity .7
+
+.parallax > use:nth-child(4)
+  animation-delay -5s
+  animation-duration 20s
+  fill var(--sco-background)
+
+@media (max-width: 768px)
+  .main-hero-waves-area
+    display none