build(deps): use stylelint to format styl code
This commit is contained in:
XPoet
parent
4188e481cf
commit
9bfeda06a2
|
|
@ -0,0 +1,9 @@
|
||||||
|
module.exports = {
|
||||||
|
extends: [
|
||||||
|
'stylelint-config-rational-order',
|
||||||
|
'stylelint-stylus/standard'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'stylus/pythonic': 'never'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="article-copyright-info-container">
|
<div class="article-copyright-info-container">
|
||||||
<ul>
|
<ul class="copyright-info-content">
|
||||||
<li><%- __('copyright.title') %>：<%= page.title %></li>
|
<li><%- __('copyright.title') %>：<%= page.title %></li>
|
||||||
<li><%- __('copyright.author') %>：<%= theme.base_info.author || config.author %></li>
|
<li><%- __('copyright.author') %>：<%= theme.base_info.author || config.author %></li>
|
||||||
<li><%- __('copyright.create_time') %>：<%= date(page.date, 'YYYY-MM-DD HH:mm:ss') %></li>
|
<li><%- __('copyright.create_time') %>：<%= date(page.date, 'YYYY-MM-DD HH:mm:ss') %></li>
|
||||||
|
|
|
||||||
|
|
@ -22,14 +22,10 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
|
||||||
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
||||||
<div class="website-count info-item">
|
<div class="website-count info-item">
|
||||||
<% if (bsz_site_uv) { %>
|
<% if (bsz_site_uv) { %>
|
||||||
<span id="busuanzi_container_site_uv">
|
|
||||||
<%- __('site_uv') %> <span id="busuanzi_value_site_uv"></span> 
|
<%- __('site_uv') %> <span id="busuanzi_value_site_uv"></span> 
|
||||||
</span>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (bsz_site_pv) { %>
|
<% if (bsz_site_pv) { %>
|
||||||
<span id="busuanzi_container_site_pv">
|
|
||||||
<%- __('site_pv') %> <span id="busuanzi_value_site_pv"></span>
|
<%- __('site_pv') %> <span id="busuanzi_value_site_pv"></span>
|
||||||
</span>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,7 @@
|
||||||
|
|
||||||
<% if (theme.pjax.enable === true) { %>
|
<% if (theme.pjax.enable === true) { %>
|
||||||
<span class="pjax-progress-bar"></span>
|
<span class="pjax-progress-bar"></span>
|
||||||
<span class="pjax-progress-icon">
|
<i class="pjax-progress-icon fas fa-circle-notch fa-spin"></i>
|
||||||
<i class="fas fa-circle-notch fa-spin"></i>
|
|
||||||
</span>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
13
package.json
13
package.json
|
|
@ -4,8 +4,10 @@
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "A simple and elegant theme for Hexo.",
|
"description": "A simple and elegant theme for Hexo.",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"release": "git push --tag && git push -u origin dev",
|
"npm:publish": "npm publish",
|
||||||
"publish": "npm publish"
|
"lint:style": "stylelint --fix source/css/**/**/**/*.styl",
|
||||||
|
"git:push": "git push --tag && git push -u origin dev",
|
||||||
|
"git:add": "npm run lint:style && git add ."
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
@ -25,5 +27,10 @@
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/XPoet/hexo-theme-keep/issues"
|
"url": "https://github.com/XPoet/hexo-theme-keep/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/XPoet/hexo-theme-keep#readme"
|
"homepage": "https://github.com/XPoet/hexo-theme-keep#readme",
|
||||||
|
"devDependencies": {
|
||||||
|
"stylelint": "^14.13.0",
|
||||||
|
"stylelint-config-rational-order": "^0.1.2",
|
||||||
|
"stylelint-stylus": "^0.17.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,107 @@
|
||||||
transition-g() {
|
transition-g() {
|
||||||
transition-property: color, background, box-shadow, border-color;
|
transition-delay 0s, 0s, 0s, 0s
|
||||||
transition-delay: 0s, 0s, 0s, 0s;
|
transition-timing-function ease, ease, ease, ease
|
||||||
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
|
transition-duration 0.2s, 0.2s, 0.2s, 0.2s
|
||||||
transition-timing-function: ease, ease, ease, ease;
|
transition-property color, background, box-shadow, border-color
|
||||||
}
|
}
|
||||||
|
|
||||||
transition-t(property, delay, duration, function) {
|
transition-t(property, delay, duration, function) {
|
||||||
$temp-property = "color, background, box-shadow, border-color";
|
$temp-property = "color, background, box-shadow, border-color"
|
||||||
$temp-delay = "0s, 0s, 0s, 0s";
|
$temp-delay = "0s, 0s, 0s, 0s"
|
||||||
$temp-duration = "0.2s, 0.2s, 0.2s, 0.2s";
|
$temp-duration = "0.2s, 0.2s, 0.2s, 0.2s"
|
||||||
$temp-function = "ease, ease, ease, ease";
|
$temp-function = "ease, ease, ease, ease"
|
||||||
|
|
||||||
for p in convert(property) {
|
for p in convert(property) {
|
||||||
$temp-property += ("," + p);
|
$temp-property += ("," + p)
|
||||||
}
|
}
|
||||||
|
|
||||||
for d in convert(delay) {
|
for d in convert(delay) {
|
||||||
$temp-delay += ("," + d + "s");
|
$temp-delay += ("," + d + "s")
|
||||||
}
|
}
|
||||||
|
|
||||||
for d in convert(duration) {
|
for d in convert(duration) {
|
||||||
$temp-duration += ("," + d + "s");
|
$temp-duration += ("," + d + "s")
|
||||||
}
|
}
|
||||||
|
|
||||||
for f in convert(function) {
|
for f in convert(function) {
|
||||||
$temp-function += ("," + f);
|
$temp-function += ("," + f)
|
||||||
}
|
}
|
||||||
|
transition-delay convert($temp-delay)
|
||||||
|
transition-timing-function convert($temp-function)
|
||||||
|
transition-duration convert($temp-duration)
|
||||||
|
|
||||||
transition-property: convert($temp-property);
|
transition-property convert($temp-property)
|
||||||
transition-delay: convert($temp-delay);
|
|
||||||
transition-duration: convert($temp-duration);
|
|
||||||
transition-timing-function: convert($temp-function);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fade-in-down-animation {
|
.fade-in-down-animation {
|
||||||
animation-fill-mode: both;
|
animation-name fade-in-down
|
||||||
animation-duration: 1s;
|
animation-duration 1s
|
||||||
animation-name: fade-in-down;
|
animation-fill-mode both
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes fade-in-down {
|
@keyframes fade-in-down {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
transform translateY(-50px)
|
||||||
transform: translateY(-50px);
|
opacity 0
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
transform translateY(0)
|
||||||
transform: translateY(0);
|
opacity 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes icon-animate {
|
@keyframes icon-animate {
|
||||||
0%, 100% {
|
0%
|
||||||
transform: scale(1);
|
100% {
|
||||||
|
transform scale(1)
|
||||||
}
|
}
|
||||||
|
|
||||||
10%, 30% {
|
10%
|
||||||
transform: scale(.88);
|
30% {
|
||||||
|
transform scale(0.88)
|
||||||
}
|
}
|
||||||
|
|
||||||
20%, 40%, 60%, 80% {
|
20%
|
||||||
transform: scale(1.08);
|
40%
|
||||||
|
60%
|
||||||
|
80% {
|
||||||
|
transform scale(1.08)
|
||||||
}
|
}
|
||||||
|
|
||||||
50%, 70% {
|
50%
|
||||||
transform: scale(1.08);
|
70% {
|
||||||
|
transform scale(1.08)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-hover-animation {
|
.title-hover-animation {
|
||||||
display: inline-block;
|
position relative
|
||||||
position: relative;
|
display inline-block
|
||||||
border-bottom: none;
|
color var(--second-text-color)
|
||||||
line-height: 1.3;
|
line-height 1.3
|
||||||
vertical-align: top;
|
vertical-align top
|
||||||
color: var(--second-text-color);
|
border-bottom none
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
position absolute
|
||||||
position: absolute;
|
bottom -4px
|
||||||
width: 100%;
|
left 0
|
||||||
height: 2px;
|
width 100%
|
||||||
bottom: -4px;
|
height 2px
|
||||||
left: 0;
|
background-color var(--second-text-color)
|
||||||
background-color: var(--second-text-color);
|
transform scaleX(0)
|
||||||
visibility: hidden;
|
visibility hidden
|
||||||
transform: scaleX(0);
|
content ""
|
||||||
transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out");
|
transition-t("visibility transform", "0, 0", "0.2, 0.2", "ease-in-out, ease-in-out")
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::before {
|
&:hover::before {
|
||||||
visibility: visible;
|
transform scaleX(1)
|
||||||
transform: scaleX(1);
|
visibility visible
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@require 'variables.styl'
|
@import 'variables.styl'
|
||||||
@require 'animated.styl'
|
@import 'animated.styl'
|
||||||
@require 'keep-theme.styl'
|
@import 'keep-theme.styl'
|
||||||
|
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
// all
|
// all
|
||||||
|
|
@ -17,14 +17,14 @@
|
||||||
// ====================================
|
// ====================================
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width 6px
|
width 0.4rem
|
||||||
height 6px
|
height 0.4rem
|
||||||
transition all 0.2s ease
|
transition all 0.2s ease
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background var(--scrollbar-color)
|
background var(--scrollbar-color)
|
||||||
border-radius 1px
|
border-radius 0.1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
|
|
@ -36,22 +36,23 @@
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
// html, body
|
// html, body
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
html, body {
|
html
|
||||||
|
body {
|
||||||
position relative
|
position relative
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
color var(--default-text-color)
|
color var(--default-text-color)
|
||||||
background var(--background-color)
|
|
||||||
font-family $default-font-family
|
|
||||||
font-weight $default-font-weight
|
font-weight $default-font-weight
|
||||||
font-size $default-font-size
|
font-size $default-font-size
|
||||||
|
font-family $default-font-family
|
||||||
line-height $default-font-line-height
|
line-height $default-font-line-height
|
||||||
|
background var(--background-color)
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width 8px
|
width 0.4rem
|
||||||
height 8px
|
height 0.4rem
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
|
|
@ -64,7 +65,6 @@ html, body {
|
||||||
font-size $default-font-size * 0.9
|
font-size $default-font-size * 0.9
|
||||||
line-height $default-font-line-height * 0.9
|
line-height $default-font-line-height * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -72,17 +72,19 @@ html, body {
|
||||||
// selection
|
// selection
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
::selection {
|
::selection {
|
||||||
background var(--selection-color)
|
|
||||||
color #fff
|
color #fff
|
||||||
|
background var(--selection-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
// ul, ol, li
|
// ul, ol, li
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
ul, ol, li {
|
ul
|
||||||
padding 0
|
ol
|
||||||
|
li {
|
||||||
margin 0
|
margin 0
|
||||||
|
padding 0
|
||||||
list-style none
|
list-style none
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -91,22 +93,24 @@ ul, ol, li {
|
||||||
// a
|
// a
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
a {
|
a {
|
||||||
|
color var(--default-text-color)
|
||||||
text-decoration none
|
text-decoration none
|
||||||
color var(--default-text-color)
|
|
||||||
|
|
||||||
i, span {
|
i
|
||||||
|
span {
|
||||||
color var(--default-text-color)
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover, &:active {
|
&:hover
|
||||||
|
&:active {
|
||||||
|
color var(--primary-color)
|
||||||
text-decoration none !important
|
text-decoration none !important
|
||||||
color var(--primary-color)
|
|
||||||
|
|
||||||
i, span {
|
i
|
||||||
|
span {
|
||||||
color var(--primary-color)
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -115,8 +119,8 @@ a {
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
img {
|
img {
|
||||||
&[lazyload] {
|
&[lazyload] {
|
||||||
padding 10px
|
margin 1.4rem auto !important
|
||||||
margin 20px auto !important
|
padding 0.8rem
|
||||||
cursor not-allowed
|
cursor not-allowed
|
||||||
pointer-events none
|
pointer-events none
|
||||||
}
|
}
|
||||||
|
|
@ -127,23 +131,23 @@ img {
|
||||||
// button
|
// button
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
button {
|
button {
|
||||||
padding 0
|
|
||||||
margin 0
|
margin 0
|
||||||
|
padding 0
|
||||||
|
background transparent
|
||||||
border 0
|
border 0
|
||||||
outline none
|
outline none
|
||||||
cursor pointer
|
cursor pointer
|
||||||
background transparent
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
display inline-block
|
|
||||||
position relative
|
position relative
|
||||||
text-align center
|
display inline-block
|
||||||
cursor pointer
|
padding 0.4rem 1rem
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
border-radius 5px
|
text-align center
|
||||||
padding 8px 16px
|
|
||||||
background var(--background-color)
|
background var(--background-color)
|
||||||
|
border-radius 5px
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
hover-style(true, 1.06, 1.06)
|
hover-style(true, 1.06, 1.06)
|
||||||
|
|
||||||
|
|
@ -159,8 +163,8 @@ button {
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
.flex-center {
|
.flex-center {
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
|
||||||
align-items center
|
align-items center
|
||||||
|
justify-content center
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -169,12 +173,12 @@ button {
|
||||||
// ======================================================================
|
// ======================================================================
|
||||||
.clear {
|
.clear {
|
||||||
&::after {
|
&::after {
|
||||||
content ''
|
|
||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
visibility hidden
|
|
||||||
overflow hidden
|
|
||||||
height 0
|
height 0
|
||||||
|
overflow hidden
|
||||||
|
visibility hidden
|
||||||
|
content ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -196,15 +200,15 @@ button {
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
left 50%
|
left 50%
|
||||||
transform translateX(-50%) translateY(-108%)
|
|
||||||
font-size 0.8rem
|
|
||||||
padding 0.2rem 0.6rem
|
|
||||||
background var(--first-text-color)
|
|
||||||
color var(--fourth-text-color)
|
|
||||||
border-radius 0.3rem
|
|
||||||
display none
|
|
||||||
z-index $z-index-9
|
z-index $z-index-9
|
||||||
|
display none
|
||||||
|
padding 0.2rem 0.6rem
|
||||||
|
color var(--fourth-text-color)
|
||||||
|
font-size 0.8rem
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
|
background var(--first-text-color)
|
||||||
|
border-radius 0.3rem
|
||||||
|
transform translateX(-50%) translateY(-108%)
|
||||||
transition-t("display", "0", "0.2", "ease")
|
transition-t("display", "0", "0.2", "ease")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,28 +11,28 @@ disable-user-select() {
|
||||||
margin 1.4rem 0
|
margin 1.4rem 0
|
||||||
|
|
||||||
.code-tools-box {
|
.code-tools-box {
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
justify-content space-between
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
width 100%
|
width 100%
|
||||||
|
padding 0.3rem 0.4rem
|
||||||
background var(--fourth-text-color)
|
background var(--fourth-text-color)
|
||||||
border-top-left-radius 0.3rem
|
border-top-left-radius 0.3rem
|
||||||
border-top-right-radius 0.3rem
|
border-top-right-radius 0.3rem
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
align-items center
|
|
||||||
padding 0.3rem 0.4rem
|
|
||||||
|
|
||||||
&.folded {
|
&.folded {
|
||||||
border-bottom-left-radius 0.3rem
|
|
||||||
border-bottom-right-radius 0.3rem
|
border-bottom-right-radius 0.3rem
|
||||||
|
border-bottom-left-radius 0.3rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-lang {
|
.code-lang {
|
||||||
margin-left 0.2rem
|
|
||||||
font-size 0.9rem
|
|
||||||
font-weight 600
|
|
||||||
font-family "Source Code Pro", consolas, Menlo
|
|
||||||
color var(--default-text-color)
|
|
||||||
justify-content flex-start
|
justify-content flex-start
|
||||||
|
margin-left 0.2rem
|
||||||
|
color var(--default-text-color)
|
||||||
|
font-weight 600
|
||||||
|
font-size 0.9rem
|
||||||
|
font-family "Source Code Pro", consolas, Menlo
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool {
|
.tool {
|
||||||
|
|
@ -49,7 +49,6 @@ disable-user-select() {
|
||||||
.fold {
|
.fold {
|
||||||
padding 0 0.4rem 0 0.2rem
|
padding 0 0.4rem 0 0.2rem
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -64,7 +63,7 @@ disable-user-select() {
|
||||||
|
|
||||||
if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
|
if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
|
||||||
margin 1.4rem 0 1.8rem 0
|
margin 1.4rem 0 1.8rem 0
|
||||||
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, .4)
|
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.code-tools-box .copy {
|
.code-tools-box .copy {
|
||||||
|
|
@ -74,23 +73,23 @@ disable-user-select() {
|
||||||
|
|
||||||
.code-tools-box {
|
.code-tools-box {
|
||||||
justify-content flex-end
|
justify-content flex-end
|
||||||
background #21252b
|
|
||||||
padding 0.4rem 0.6rem 0.7rem 0.4rem
|
padding 0.4rem 0.6rem 0.7rem 0.4rem
|
||||||
|
background #21252b
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position absolute
|
position absolute
|
||||||
content ''
|
|
||||||
width 0.8rem
|
|
||||||
height 0.8rem
|
|
||||||
left 0.8rem
|
left 0.8rem
|
||||||
|
width 0.76rem
|
||||||
|
height 0.76rem
|
||||||
background #fc625d
|
background #fc625d
|
||||||
border-radius 50%
|
border-radius 50%
|
||||||
box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b
|
box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
|
||||||
|
content ''
|
||||||
}
|
}
|
||||||
|
|
||||||
&.folded {
|
&.folded {
|
||||||
border-bottom-left-radius 0
|
|
||||||
border-bottom-right-radius 0
|
border-bottom-right-radius 0
|
||||||
|
border-bottom-left-radius 0
|
||||||
|
|
||||||
.copy {
|
.copy {
|
||||||
display none
|
display none
|
||||||
|
|
@ -113,8 +112,8 @@ disable-user-select() {
|
||||||
|
|
||||||
.copy {
|
.copy {
|
||||||
position absolute
|
position absolute
|
||||||
bottom 0.3rem
|
|
||||||
right 0.5rem
|
right 0.5rem
|
||||||
|
bottom 0.3rem
|
||||||
padding 0 0.1rem
|
padding 0 0.1rem
|
||||||
font-weight bold
|
font-weight bold
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
@ -123,11 +122,7 @@ disable-user-select() {
|
||||||
i {
|
i {
|
||||||
font-size 1rem
|
font-size 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,20 +35,20 @@ $night-highlight-deletion = #008000
|
||||||
$night-highlight-addition = #800000
|
$night-highlight-addition = #800000
|
||||||
|
|
||||||
code-theme(mode) {
|
code-theme(mode) {
|
||||||
--code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground
|
--code-foreground mode == 'light' ? $code-foreground : $night-code-foreground
|
||||||
--code-background: mode == 'light' ? $code-background : $night-code-background
|
--code-background mode == 'light' ? $code-background : $night-code-background
|
||||||
--highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background
|
--highlight-background mode == 'light' ? $highlight-background : $night-highlight-background
|
||||||
--highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground
|
--highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground
|
||||||
--highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment
|
--highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment
|
||||||
--highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red
|
--highlight-red mode == 'light' ? $highlight-red : $night-highlight-red
|
||||||
--highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange
|
--highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange
|
||||||
--highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow
|
--highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow
|
||||||
--highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green
|
--highlight-green mode == 'light' ? $highlight-green : $night-highlight-green
|
||||||
--highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua
|
--highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua
|
||||||
--highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue
|
--highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue
|
||||||
--highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple
|
--highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple
|
||||||
--highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
|
--highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
|
||||||
--highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
|
--highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -56,13 +56,13 @@ code-theme(mode) {
|
||||||
code-theme('light')
|
code-theme('light')
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme light) {
|
||||||
:root {
|
:root {
|
||||||
code-theme('light')
|
code-theme('light')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme dark) {
|
||||||
:root {
|
:root {
|
||||||
code-theme('dark')
|
code-theme('dark')
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,28 @@
|
||||||
@require "code-theme.styl"
|
@import "code-theme.styl"
|
||||||
|
|
||||||
$code-block {
|
$code-block {
|
||||||
overflow auto
|
|
||||||
margin 20px 0
|
margin 20px 0
|
||||||
padding 0
|
padding 0
|
||||||
|
overflow auto
|
||||||
|
color var(--highlight-foreground)
|
||||||
font-size 0.96rem
|
font-size 0.96rem
|
||||||
line-height 1.5rem
|
line-height 1.5rem
|
||||||
color var(--highlight-foreground)
|
|
||||||
background var(--highlight-background)
|
background var(--highlight-background)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
pre, code {
|
pre
|
||||||
|
code {
|
||||||
font-family "Source Code Pro", consolas, Menlo
|
font-family "Source Code Pro", consolas, Menlo
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding 5px
|
padding 5px
|
||||||
word-wrap break-word
|
|
||||||
border-radius 2px
|
|
||||||
font-size 0.96rem
|
|
||||||
color var(--code-foreground)
|
color var(--code-foreground)
|
||||||
|
font-size 0.96rem
|
||||||
|
word-wrap break-word
|
||||||
background var(--code-background)
|
background var(--code-background)
|
||||||
|
border-radius 2px
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
|
@ -31,8 +32,8 @@ pre {
|
||||||
code {
|
code {
|
||||||
padding 0
|
padding 0
|
||||||
color var(--highlight-foreground)
|
color var(--highlight-foreground)
|
||||||
background none
|
|
||||||
text-shadow none
|
text-shadow none
|
||||||
|
background none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -41,30 +42,30 @@ pre {
|
||||||
border-radius 1px
|
border-radius 1px
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
border none
|
|
||||||
margin 0
|
margin 0
|
||||||
padding 10px 0
|
padding 10px 0
|
||||||
|
border none
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin 0
|
|
||||||
width auto
|
width auto
|
||||||
|
margin 0
|
||||||
border none
|
border none
|
||||||
border-spacing unset
|
border-spacing unset
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
td {
|
td {
|
||||||
border none
|
|
||||||
padding 0
|
padding 0
|
||||||
|
border none
|
||||||
}
|
}
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
font-size 1rem
|
|
||||||
color var(--highlight-foreground)
|
|
||||||
line-height 1rem
|
|
||||||
margin-bottom 1rem
|
margin-bottom 1rem
|
||||||
|
color var(--highlight-foreground)
|
||||||
|
font-size 1rem
|
||||||
|
line-height 1rem
|
||||||
|
|
||||||
a {
|
a {
|
||||||
float right
|
float right
|
||||||
|
|
@ -77,8 +78,8 @@ pre {
|
||||||
}
|
}
|
||||||
|
|
||||||
.gutter pre {
|
.gutter pre {
|
||||||
padding-left 10px
|
|
||||||
padding-right 10px
|
padding-right 10px
|
||||||
|
padding-left 10px
|
||||||
color var(--highlight-gutter-color)
|
color var(--highlight-gutter-color)
|
||||||
text-align center
|
text-align center
|
||||||
background-color var(--highlight-gutter-bg-color)
|
background-color var(--highlight-gutter-bg-color)
|
||||||
|
|
@ -86,8 +87,8 @@ pre {
|
||||||
|
|
||||||
.code pre {
|
.code pre {
|
||||||
width 100%
|
width 100%
|
||||||
padding-left 10px
|
|
||||||
padding-right 10px
|
padding-right 10px
|
||||||
|
padding-left 10px
|
||||||
background-color var(--highlight-background)
|
background-color var(--highlight-background)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -102,7 +103,6 @@ pre {
|
||||||
.string {
|
.string {
|
||||||
color var(--default-text-color)
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -200,5 +200,4 @@ pre {
|
||||||
.javascript .function {
|
.javascript .function {
|
||||||
color var(--highlight-purple)
|
color var(--highlight-purple)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,53 @@
|
||||||
$keep-container-border-radius = 5px;
|
$keep-container-border-radius = 5px
|
||||||
|
|
||||||
hover-style(isTransform, scaleX, scaleY) {
|
hover-style(isTransform, scaleX, scaleY) {
|
||||||
box-shadow: 2px 2px 5px var(--shadow-color);
|
box-shadow 2px 2px 5px var(--shadow-color)
|
||||||
|
|
||||||
if (isTransform) {
|
if (isTransform) {
|
||||||
transition-t("transform", "0", "0.2", "linear");
|
transition-t("transform", "0", "0.2", "linear")
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
if (hexo-config('style.hover.scale') && isTransform) {
|
if (hexo-config('style.hover.scale') && isTransform) {
|
||||||
transform: scaleX(scaleX) scaleY(scaleX);
|
transform scaleX(scaleX) scaleY(scaleX)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hexo-config('style.hover.shadow')) {
|
if (hexo-config('style.hover.shadow')) {
|
||||||
box-shadow: 2px 2px 8px var(--shadow-hover-color);
|
box-shadow 2px 2px 8px var(--shadow-hover-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
|
keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
|
||||||
padding: padding;
|
box-sizing border-box
|
||||||
border-radius: $keep-container-border-radius;
|
padding padding
|
||||||
box-sizing: border-box;
|
background var(--background-color)
|
||||||
background: var(--background-color);
|
border-radius $keep-container-border-radius
|
||||||
|
|
||||||
if (marginBottomValue != 0) {
|
if (marginBottomValue != 0) {
|
||||||
margin-bottom: marginBottomValue;
|
margin-bottom marginBottomValue
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
margin-bottom: marginBottomValue * 0.8;
|
margin-bottom marginBottomValue * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
margin-bottom: marginBottomValue * 0.6;
|
margin-bottom marginBottomValue * 0.6
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
hover-style(isTransform, scaleX, scaleY);
|
hover-style(isTransform, scaleX, scaleY)
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding: padding * 0.8;
|
padding padding * 0.8
|
||||||
border-radius: $keep-container-border-radius * 0.8;
|
border-radius $keep-container-border-radius * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
padding: padding * 0.6;
|
padding padding * 0.6
|
||||||
border-radius: $keep-container-border-radius * 0.6;
|
border-radius $keep-container-border-radius * 0.6
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,90 @@
|
||||||
.markdown-body {
|
.markdown-body {
|
||||||
font-size: 1rem;
|
font-size 1rem
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
|
|
||||||
p,
|
p
|
||||||
ul,
|
ul
|
||||||
ol {
|
ol {
|
||||||
padding: 5px 5px 5px 10px;
|
padding 0.4rem 0.4rem 0.4rem 0.8rem
|
||||||
}
|
}
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing border-box
|
||||||
border-left: 5px solid var(--default-text-color);
|
margin 1.4rem 0
|
||||||
margin: 20px 0;
|
color var(--default-text-color)
|
||||||
color: var(--default-text-color);
|
background var(--second-background-color)
|
||||||
background: var(--second-background-color);
|
border-left 0.4rem solid var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
line-height: 2;
|
color var(--default-text-color)
|
||||||
color: var(--default-text-color);
|
line-height 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
position: relative;
|
position relative
|
||||||
outline: 0;
|
box-sizing border-box
|
||||||
text-decoration: none;
|
padding-bottom 0.2rem
|
||||||
overflow-wrap: break-word;
|
text-decoration none
|
||||||
cursor: pointer;
|
overflow-wrap break-word
|
||||||
border-bottom: 1px solid var(--third-text-color);
|
border-bottom 0.1rem solid var(--third-text-color)
|
||||||
box-sizing: border-box;
|
outline 0
|
||||||
padding-bottom: 2px;
|
cursor pointer
|
||||||
|
|
||||||
.fas, .far, fab {
|
.fas
|
||||||
margin: 0 2px 0 6px;
|
.far
|
||||||
position: relative;
|
.fab {
|
||||||
color: var(--third-text-color);
|
position relative
|
||||||
font-size: 0.88rem;
|
margin 0 0.2rem 0 0.4rem
|
||||||
|
color var(--third-text-color)
|
||||||
|
font-size 0.88rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration underline
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background: var(--primary-color);
|
background var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
em {
|
em {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ul > li,
|
ul
|
||||||
ol > li {
|
ol {
|
||||||
margin-left: 16px;
|
li {
|
||||||
line-height: 2rem;
|
margin-left 1rem
|
||||||
|
line-height 2rem
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style: disc;
|
list-style disc
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style: circle;
|
list-style circle
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
list-style: square;
|
list-style square
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -92,16 +96,16 @@
|
||||||
ol {
|
ol {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style: decimal;
|
list-style decimal
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style: upper-alpha;
|
list-style upper-alpha
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
li {
|
li {
|
||||||
list-style: upper-roman;
|
list-style upper-roman
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -111,133 +115,138 @@
|
||||||
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1
|
||||||
color: var(--second-text-color);
|
h2
|
||||||
line-height: 1.5;
|
h3
|
||||||
|
h4
|
||||||
|
h5
|
||||||
|
h6 {
|
||||||
|
color var(--second-text-color)
|
||||||
|
line-height 1.5
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
line-height: 1.25;
|
line-height 1.25
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1.8rem;
|
font-weight 600
|
||||||
font-weight: 600;
|
font-size 1.8rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.7rem;
|
font-size 1.7rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.7rem;
|
font-weight 600
|
||||||
font-weight: 600;
|
font-size 1.7rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.6rem;
|
font-size 1.6rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.6rem;
|
font-weight 550
|
||||||
font-weight: 550;
|
font-size 1.6rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.5rem;
|
font-size 1.5rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 1.5rem;
|
font-weight 550
|
||||||
font-weight: 550;
|
font-size 1.5rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.4rem;
|
font-size 1.4rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 1.28rem;
|
font-weight 500
|
||||||
font-weight: 500;
|
font-size 1.28rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.18rem;
|
font-size 1.18rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 1.2rem;
|
font-weight 500
|
||||||
font-weight: 500;
|
font-size 1.2rem
|
||||||
line-height: 1.2;
|
line-height 1.2
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.1rem;
|
font-size 1.1rem
|
||||||
line-height: 1.1;
|
line-height 1.1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
box-sizing: border-box;
|
display block
|
||||||
max-width: 100%;
|
box-sizing border-box
|
||||||
cursor: zoom-in;
|
max-width 100%
|
||||||
display: block;
|
box-shadow 0 0 0.2rem var(--shadow-color)
|
||||||
box-shadow: 0 0 2px var(--shadow-color);
|
cursor zoom-in
|
||||||
transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear");
|
transition-t("padding, margin", "0, 0", "0.2, 0.2", "linear, linear")
|
||||||
|
|
||||||
if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
|
if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
|
||||||
margin: 10px auto 2px;
|
margin 0.8rem auto 0.2rem
|
||||||
} else {
|
}
|
||||||
margin: 10px 0 2px;
|
else {
|
||||||
|
margin 0.8rem 0 0.2rem
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
& > table {
|
& > table {
|
||||||
border-spacing: 0;
|
width 100%
|
||||||
border-collapse: collapse;
|
overflow auto
|
||||||
width: 100%;
|
border-collapse collapse
|
||||||
overflow: auto;
|
border-spacing 0
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
& {
|
& {
|
||||||
table-layout: fixed;
|
table-layout fixed
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td
|
||||||
th {
|
th {
|
||||||
padding: 0;
|
padding 0
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: 600;
|
font-weight 600
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td
|
||||||
th {
|
th {
|
||||||
padding: 6px 13px;
|
padding 0.4rem 1rem
|
||||||
border: 1px solid var(--border-color);
|
border 0.1rem solid var(--border-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
background-color: var(--background-color);
|
background-color var(--background-color)
|
||||||
border: 1px solid var(--fourth-text-color);
|
border 0.1rem solid var(--fourth-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(2n) {
|
tr:nth-child(2n) {
|
||||||
background-color: var(--second-background-color);
|
background-color var(--second-background-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,163 +6,167 @@
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// layout
|
// layout
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$header-height = 70px; // header height
|
$header-height = 70px // header height
|
||||||
$header-shrink-height = $header-height * 0.72; // header shrink height
|
$header-shrink-height = $header-height * 0.72 // header shrink height
|
||||||
$scroll-progress-bar-height = 2px; // scroll progress bar height
|
$scroll-progress-bar-height = 2px // scroll progress bar height
|
||||||
$main-content-width = 80%; // main content width (PC)
|
$main-content-width = 80% // main content width (PC)
|
||||||
$main-content-width-tablet = 86%; // main content width (tablet)
|
$main-content-width-tablet = 86% // main content width (tablet)
|
||||||
$main-content-width-mobile = 90%; // main content width (mobile)
|
$main-content-width-mobile = 90% // main content width (mobile)
|
||||||
$post-tool-button-width = 38px; // post tool button width
|
$post-tool-button-width = 38px // post tool button width
|
||||||
$component-spacing-value = 38px; // component-spacing-value (PC)
|
$component-spacing-value = 38px // component-spacing-value (PC)
|
||||||
|
|
||||||
// main content max width
|
// main content max width
|
||||||
$temp-content-max-width = hexo-config('style.content_max_width');
|
$temp-content-max-width = hexo-config('style.content_max_width')
|
||||||
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px;
|
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// media query
|
// media query
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$media-max-width = 780px; // media query max width (tablet)
|
$media-max-width = 780px // media query max width (tablet)
|
||||||
$media-max-width-mobile = 500px; // media query max width (mobile)
|
$media-max-width-mobile = 500px // media query max width (mobile)
|
||||||
|
|
||||||
keep-tablet()
|
keep-tablet() {
|
||||||
@media (max-width: $media-max-width)
|
@media (max-width $media-max-width) {
|
||||||
{ block }
|
{ block }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
keep-mobile()
|
keep-mobile() {
|
||||||
@media (max-width: $media-max-width-mobile)
|
@media (max-width $media-max-width-mobile) {
|
||||||
{ block }
|
{ block }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// z-index
|
// z-index
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$z-index-1 = 1001;
|
$z-index-1 = 1001
|
||||||
$z-index-2 = 1002;
|
$z-index-2 = 1002
|
||||||
$z-index-3 = 1003;
|
$z-index-3 = 1003
|
||||||
$z-index-4 = 1004;
|
$z-index-4 = 1004
|
||||||
$z-index-5 = 1005;
|
$z-index-5 = 1005
|
||||||
$z-index-6 = 1006;
|
$z-index-6 = 1006
|
||||||
$z-index-7 = 1007;
|
$z-index-7 = 1007
|
||||||
$z-index-8 = 1008;
|
$z-index-8 = 1008
|
||||||
$z-index-9 = 1009;
|
$z-index-9 = 1009
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// theme primary color
|
// theme primary color
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$temp-color = hexo-config('style.primary_color');
|
$temp-color = hexo-config('style.primary_color')
|
||||||
$primary-color = $temp-color ? convert($temp-color) : #0066CC;
|
$primary-color = $temp-color ? convert($temp-color) : #0066cc
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// theme light mode color set
|
// theme light mode color set
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$background-color = #fff;
|
$background-color = #fff
|
||||||
$second-background-color = darken($background-color, 3%);
|
$second-background-color = darken($background-color, 3%)
|
||||||
$default-text-color = #50505c;
|
$default-text-color = #50505c
|
||||||
$first-text-color = darken($default-text-color, 10%);
|
$first-text-color = darken($default-text-color, 10%)
|
||||||
$second-text-color = darken($default-text-color, 5%);
|
$second-text-color = darken($default-text-color, 5%)
|
||||||
$third-text-color = lighten($default-text-color, 30%);
|
$third-text-color = lighten($default-text-color, 30%)
|
||||||
$fourth-text-color = lighten($default-text-color, 90%);
|
$fourth-text-color = lighten($default-text-color, 90%)
|
||||||
$border-color = darken($background-color, 30%);
|
$border-color = darken($background-color, 30%)
|
||||||
$selection-color = lighten($primary-color, 10%);
|
$selection-color = lighten($primary-color, 10%)
|
||||||
$shadow-color = rgba(0, 0, 0, 0.2);
|
$shadow-color = rgba(0, 0, 0, 0.2)
|
||||||
$shadow-hover-color = rgba(0, 0, 0, 0.28);
|
$shadow-hover-color = rgba(0, 0, 0, 0.28)
|
||||||
$scrollbar-color = lighten($default-text-color, 6%);
|
$scrollbar-color = lighten($default-text-color, 6%)
|
||||||
$scroll-bar-bg-color = darken($background-color, 10%);
|
$scroll-bar-bg-color = darken($background-color, 10%)
|
||||||
$link-color = darken($default-text-color, 10%);
|
$link-color = darken($default-text-color, 10%)
|
||||||
$copyright-info-color = #CC0033;
|
$copyright-info-color = #cc0033
|
||||||
$avatar-background-color = #0066CC;
|
$avatar-background-color = #0066cc
|
||||||
$header-transparent-background-1 = alpha($background-color, 0.28);
|
$header-transparent-background-1 = alpha($background-color, 0.28)
|
||||||
$header-transparent-background-2 = alpha($background-color, 0.58);
|
$header-transparent-background-2 = alpha($background-color, 0.58)
|
||||||
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// theme dark mode color set
|
// theme dark mode color set
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$dark-primary-color = $primary-color;
|
$dark-primary-color = $primary-color
|
||||||
$dark-background-color = #383940;
|
$dark-background-color = #383940
|
||||||
$dark-second-background-color = darken($dark-background-color, 10%);
|
$dark-second-background-color = darken($dark-background-color, 10%)
|
||||||
$dark-default-text-color = #bebec6;
|
$dark-default-text-color = #bebec6
|
||||||
$dark-first-text-color = lighten($dark-default-text-color, 30%);
|
$dark-first-text-color = lighten($dark-default-text-color, 30%)
|
||||||
$dark-second-text-color = lighten($dark-default-text-color, 20%);
|
$dark-second-text-color = lighten($dark-default-text-color, 20%)
|
||||||
$dark-third-text-color = darken($dark-default-text-color, 20%);
|
$dark-third-text-color = darken($dark-default-text-color, 20%)
|
||||||
$dark-fourth-text-color = darken($dark-default-text-color, 75%);
|
$dark-fourth-text-color = darken($dark-default-text-color, 75%)
|
||||||
$dark-border-color = lighten($dark-background-color, 20%);
|
$dark-border-color = lighten($dark-background-color, 20%)
|
||||||
$dark-selection-color = $selection-color;
|
$dark-selection-color = $selection-color
|
||||||
$dark-shadow-color = rgba(128, 128, 128, 0.2);
|
$dark-shadow-color = rgba(128, 128, 128, 0.2)
|
||||||
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
|
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
|
||||||
$dark-scrollbar-color = darken($dark-background-color, 10%);
|
$dark-scrollbar-color = darken($dark-background-color, 10%)
|
||||||
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%);
|
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%)
|
||||||
$dark-link-color = lighten($dark-default-text-color, 10%);
|
$dark-link-color = lighten($dark-default-text-color, 10%)
|
||||||
$dark-copyright-info-color = darken($copyright-info-color, 20%);
|
$dark-copyright-info-color = darken($copyright-info-color, 20%)
|
||||||
$dark-avatar-background-color = darken($avatar-background-color, 10%);
|
$dark-avatar-background-color = darken($avatar-background-color, 10%)
|
||||||
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28);
|
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28)
|
||||||
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58);
|
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58)
|
||||||
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// font
|
// font
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
|
$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial
|
||||||
$default-font-size = 15.2px;
|
$default-font-size = 15.2px
|
||||||
$default-font-line-height = 22px;
|
$default-font-line-height = 22px
|
||||||
$default-font-weight = 400;
|
$default-font-weight = 400
|
||||||
|
|
||||||
|
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
// light/dark mode color
|
// light/dark mode color
|
||||||
// ==============================================================================================
|
// ==============================================================================================
|
||||||
root-color(mode) {
|
root-color(mode) {
|
||||||
--background-color: mode == 'light' ? $background-color : $dark-background-color;
|
--background-color mode == 'light' ? $background-color : $dark-background-color
|
||||||
--second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
|
--second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
|
||||||
--primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
|
--primary-color mode == 'light' ? $primary-color : $dark-primary-color
|
||||||
--first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
|
--first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
|
||||||
--second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
|
--second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
|
||||||
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
|
--third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
|
||||||
--fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
|
--fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
|
||||||
--default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
|
--default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
|
||||||
--border-color: mode == 'light' ? $border-color : $dark-border-color;
|
--border-color mode == 'light' ? $border-color : $dark-border-color
|
||||||
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
|
--selection-color mode == 'light' ? $selection-color : $dark-selection-color
|
||||||
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
|
--shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
|
||||||
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
|
--shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
|
||||||
--scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color;
|
--scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
|
||||||
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
|
--scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
|
||||||
--link-color: mode == 'light' ? $link-color : $dark-link-color;
|
--link-color mode == 'light' ? $link-color : $dark-link-color
|
||||||
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
|
--copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
|
||||||
--avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
|
--avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
|
||||||
--header-transparent-background-1: mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1;
|
--header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
|
||||||
--header-transparent-background-2: mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2;
|
--header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
|
||||||
--pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color;
|
--pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
root-color('light');
|
root-color('light')
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme light) {
|
||||||
:root {
|
:root {
|
||||||
root-color('light');
|
root-color('light')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme dark) {
|
||||||
:root {
|
:root {
|
||||||
root-color('dark');
|
root-color('dark')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.light-mode {
|
.light-mode {
|
||||||
root-color('light');
|
root-color('light')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dark-mode {
|
.dark-mode {
|
||||||
root-color('dark');
|
root-color('dark')
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,80 +1,80 @@
|
||||||
$archive-year-font-size = 1.8rem;
|
$archive-year-font-size = 1.8rem
|
||||||
$archive-year-count-font-size = 1.2rem;
|
$archive-year-count-font-size = 1.2rem
|
||||||
$article-title-font-size = 1.2rem;
|
$article-title-font-size = 1.2rem
|
||||||
$article-date-font-size = 1rem;
|
$article-date-font-size = 1rem
|
||||||
|
|
||||||
.archive-list-container {
|
.archive-list-container {
|
||||||
|
|
||||||
.archive-item {
|
.archive-item {
|
||||||
margin-bottom: $component-spacing-value;
|
margin-bottom $component-spacing-value
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-item-header {
|
.archive-item-header {
|
||||||
margin-bottom: 10px;
|
margin-bottom 0.8rem
|
||||||
|
|
||||||
.archive-year {
|
.archive-year {
|
||||||
font-size: $archive-year-font-size;
|
margin-right 6px
|
||||||
|
color var(--second-text-color)
|
||||||
|
font-weight 600
|
||||||
|
font-size $archive-year-font-size
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $archive-year-font-size - 0.2rem;
|
font-size $archive-year-font-size - 0.2rem
|
||||||
}
|
}
|
||||||
|
|
||||||
color: var(--second-text-color);
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.archive-year-post-count {
|
.archive-year-post-count {
|
||||||
font-size: $archive-year-count-font-size;
|
color var(--second-text-color)
|
||||||
font-weight: 500;
|
font-weight 500
|
||||||
color: var(--second-text-color);
|
font-size $archive-year-count-font-size
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $archive-year-count-font-size * 0.9;
|
font-size $archive-year-count-font-size * 0.9
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-list {
|
.article-list {
|
||||||
|
|
||||||
padding-left: 10px;
|
padding-left 0.8rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding-left: 0;
|
padding-left 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-item {
|
.article-item {
|
||||||
font-size: 1rem;
|
margin-top 1.2rem
|
||||||
margin-top: 18px;
|
font-size 1rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
margin-top: 16px;
|
margin-top 1.1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
margin-top: 14px;
|
margin-top 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
a.article-title, .article-date {
|
a.article-title
|
||||||
color: var(--primary-color);
|
.article-date {
|
||||||
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
a.article-title {
|
a.article-title {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-date {
|
.article-date {
|
||||||
font-size: $article-date-font-size;
|
float right
|
||||||
float: right;
|
font-size $article-date-font-size
|
||||||
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,53 @@
|
||||||
.article-copyright-info-container {
|
.article-copyright-info-container {
|
||||||
position: relative;
|
position relative
|
||||||
width: 100%;
|
box-sizing border-box
|
||||||
box-sizing: border-box;
|
width 100%
|
||||||
padding: 10px 6px;
|
font-size 1rem
|
||||||
font-size: 1rem;
|
background var(--second-background-color)
|
||||||
background: var(--second-background-color);
|
overflow hidden
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0
|
||||||
left: 0;
|
left 0
|
||||||
content: '';
|
width 0.5rem
|
||||||
width: 6px;
|
height 100%
|
||||||
height: 100%;
|
background var(--copyright-info-color)
|
||||||
background: var(--copyright-info-color);
|
content ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ul {
|
.copyright-info-content {
|
||||||
|
position relative
|
||||||
|
box-sizing border-box
|
||||||
|
padding 0.8rem 0.8rem 0.8rem 1.3rem
|
||||||
|
overflow-x auto
|
||||||
|
|
||||||
margin-left: 10px;
|
&::-webkit-scrollbar {
|
||||||
|
width 0.4rem
|
||||||
|
height 0.4rem
|
||||||
|
transition all 0.2s ease
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background var(--third-text-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background transparent
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-bottom: 5px;
|
margin-bottom 0.4rem
|
||||||
overflow: hidden;
|
color var(--default-text-color)
|
||||||
text-overflow: ellipsis;
|
white-space nowrap
|
||||||
white-space: nowrap;
|
|
||||||
color: var(--default-text-color);
|
|
||||||
|
|
||||||
.license {
|
.license {
|
||||||
font-weight: bold;
|
font-weight bold
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,61 @@
|
||||||
.article-meta-info {
|
.article-meta-info {
|
||||||
font-size: 0.8rem;
|
font-size 0.8rem
|
||||||
|
|
||||||
.article-meta-item {
|
.article-meta-item {
|
||||||
margin-right: 10px;
|
margin-right 10px
|
||||||
color: var(--third-text-color);
|
color var(--third-text-color)
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-date {
|
.article-date {
|
||||||
|
|
||||||
.mobile {
|
.mobile {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
.pc {
|
.pc {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile {
|
.mobile {
|
||||||
display: inline;
|
display inline
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.article-tags
|
||||||
|
.article-categories {
|
||||||
|
display inline
|
||||||
|
|
||||||
.article-tags, .article-categories {
|
ul
|
||||||
display: inline;
|
li {
|
||||||
|
display inline
|
||||||
ul, li {
|
|
||||||
display: inline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--third-text-color);
|
color var(--third-text-color)
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary-color);
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-tags {
|
.article-tags {
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-min2read, .article-wordcount {
|
.article-min2read
|
||||||
|
.article-wordcount {
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,38 @@
|
||||||
if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
||||||
if (hexo-config('comment.use') == "valine") {
|
if (hexo-config('comment.use') == "valine") {
|
||||||
@require "./valine.styl";
|
@import "./valine.styl"
|
||||||
|
}
|
||||||
} else if (hexo-config('comment.use') == "gitalk") {
|
else if (hexo-config('comment.use') == "gitalk") {
|
||||||
@require "./gitalk.styl";
|
@import "./gitalk.styl"
|
||||||
|
}
|
||||||
} else if (hexo-config('comment.use') == "twikoo") {
|
else if (hexo-config('comment.use') == "twikoo") {
|
||||||
@require "./twikoo.styl";
|
@import "./twikoo.styl"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-container {
|
.comments-container {
|
||||||
display: inline-block;
|
display inline-block
|
||||||
margin-top: $component-spacing-value;
|
width 100%
|
||||||
width: 100%;
|
margin-top $component-spacing-value
|
||||||
|
|
||||||
#comment-anchor {
|
#comment-anchor {
|
||||||
width: 100%;
|
width 100%
|
||||||
height: 10px;
|
height 0.8rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-area-title {
|
.comment-area-title {
|
||||||
width: 100%;
|
width 100%
|
||||||
margin: 10px 0;
|
margin 0.8rem 0
|
||||||
font-size: 1.38rem;
|
color var(--default-text-color)
|
||||||
color: var(--default-text-color);
|
font-size 1.38rem
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
margin: 5px 0;
|
margin 0.4rem 0
|
||||||
font-size: 1.2rem;
|
font-size 1.2rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
/* variables */
|
// variables
|
||||||
$gt-color-main := #6190e8
|
$gt-color-main := #6190e8
|
||||||
$gt-color-sub := #a1a1a1
|
$gt-color-sub := #a1a1a1
|
||||||
$gt-color-loader := #999999
|
$gt-color-loader := #999999
|
||||||
$gt-color-error := #ff3860
|
$gt-color-error := #ff3860
|
||||||
$gt-color-hr := #E9E9E9
|
$gt-color-hr := #e9e9e9
|
||||||
$gt-color-comment-txt := #333333
|
$gt-color-comment-txt := #333333
|
||||||
$gt-color-link-active := #333333
|
$gt-color-link-active := #333333
|
||||||
$gt-color-btn := #ffffff
|
$gt-color-btn := #ffffff
|
||||||
|
|
@ -12,442 +12,551 @@ $gt-size-border-radius := 5px
|
||||||
$gt-breakpoint-mobile := 479px
|
$gt-breakpoint-mobile := 479px
|
||||||
$gt-mask-z-index := 9999
|
$gt-mask-z-index := 9999
|
||||||
|
|
||||||
/* functions & mixins */
|
// functions & mixins
|
||||||
clearfix() {
|
clearfix() {
|
||||||
&:before,
|
&:before
|
||||||
&:after {
|
&:after {
|
||||||
content: " ";
|
display table
|
||||||
display: table;
|
clear both
|
||||||
|
content ""
|
||||||
}
|
}
|
||||||
&:after { clear: both; }
|
|
||||||
}
|
}
|
||||||
em($px, $base-size = $gt-size-base)
|
em($px, $base-size = $gt-size-base) {
|
||||||
u = unit($px)
|
u = unit($px)
|
||||||
if (u is 'px')
|
if (u is 'px') {
|
||||||
unit($px / $base-size, 'em')
|
unit($px / $base-size, 'em')
|
||||||
else
|
}
|
||||||
|
else {
|
||||||
unit($px, u)
|
unit($px, u)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
mobile()
|
mobile() {
|
||||||
@media (max-width: $gt-breakpoint-mobile)
|
@media (max-width $gt-breakpoint-mobile) {
|
||||||
{block}
|
{block}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* variables - calculated */
|
// variables - calculated
|
||||||
$gt-size-loader-dot := em(6px)
|
$gt-size-loader-dot := em(6px)
|
||||||
$gt-size-loader := em(28px)
|
$gt-size-loader := em(28px)
|
||||||
$gt-size-avatar := em(50px)
|
$gt-size-avatar := em(50px)
|
||||||
$gt-size-avatar-mobi := em(32px)
|
$gt-size-avatar-mobi := em(32px)
|
||||||
|
|
||||||
/* styles */
|
// styles
|
||||||
// Put everything under container to avoid style conflicts
|
// Put everything under container to avoid style conflicts
|
||||||
.comments-container
|
.comments-container {
|
||||||
.gt-container
|
.gt-container {
|
||||||
box-sizing: border-box
|
box-sizing border-box
|
||||||
*
|
* {
|
||||||
box-sizing: border-box
|
box-sizing border-box
|
||||||
font-size: $gt-size-base
|
}
|
||||||
|
font-size $gt-size-base
|
||||||
// common
|
// common
|
||||||
a
|
a {
|
||||||
color: $gt-color-main
|
color $gt-color-main
|
||||||
&:hover
|
&:hover {
|
||||||
color: lighten($gt-color-main, 20%)
|
color lighten($gt-color-main, 20%)
|
||||||
border-color: lighten($gt-color-main, 20%)
|
border-color lighten($gt-color-main, 20%)
|
||||||
&.is--active
|
}
|
||||||
color: $gt-color-link-active
|
&.is--active {
|
||||||
cursor: default !important
|
color $gt-color-link-active
|
||||||
&:hover
|
cursor default !important
|
||||||
color: $gt-color-link-active
|
&:hover {
|
||||||
.hide
|
color $gt-color-link-active
|
||||||
display: none !important
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hide {
|
||||||
|
display none !important
|
||||||
|
}
|
||||||
// icons
|
// icons
|
||||||
.gt-svg
|
.gt-svg {
|
||||||
display: inline-block
|
display inline-block
|
||||||
width: em(16px)
|
width em(16px)
|
||||||
height: em(16px)
|
height em(16px)
|
||||||
vertical-align: sub
|
vertical-align sub
|
||||||
svg
|
svg {
|
||||||
width: 100%
|
width 100%
|
||||||
height: 100%
|
height 100%
|
||||||
fill: $gt-color-main
|
fill $gt-color-main
|
||||||
.gt-ico
|
}
|
||||||
display: inline-block
|
}
|
||||||
&-text
|
.gt-ico {
|
||||||
margin-left: em(5px)
|
display inline-block
|
||||||
&-github
|
&-text {
|
||||||
width: 100%
|
margin-left em(5px)
|
||||||
height: 100%
|
}
|
||||||
.gt-svg
|
&-github {
|
||||||
width: 100%
|
width 100%
|
||||||
height: 100%
|
height 100%
|
||||||
svg
|
.gt-svg {
|
||||||
fill: inherit
|
width 100%
|
||||||
/* loader */
|
height 100%
|
||||||
.gt-spinner
|
}
|
||||||
position: relative
|
svg {
|
||||||
&::before
|
fill inherit
|
||||||
content: ''
|
}
|
||||||
box-sizing: border-box
|
}
|
||||||
position: absolute
|
}
|
||||||
top: 3px
|
// loader
|
||||||
width: em(12px)
|
.gt-spinner {
|
||||||
height: em(12px)
|
position relative
|
||||||
margin-top: em(-3px)
|
&::before {
|
||||||
margin-left: em(-6px)
|
position absolute
|
||||||
border-radius: 50%
|
top 3px
|
||||||
border: 1px solid $gt-color-btn
|
box-sizing border-box
|
||||||
border-top-color: $gt-color-main
|
width em(12px)
|
||||||
animation: gt-kf-rotate .6s linear infinite
|
height em(12px)
|
||||||
|
margin-top em(-3px)
|
||||||
|
margin-left em(-6px)
|
||||||
|
border 1px solid $gt-color-btn
|
||||||
|
border-top-color $gt-color-main
|
||||||
|
border-radius 50%
|
||||||
|
animation gt-kf-rotate 0.6s linear infinite
|
||||||
|
content ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gt-loader
|
.gt-loader {
|
||||||
position: relative
|
position relative
|
||||||
border: 1px solid $gt-color-loader
|
display inline-block
|
||||||
animation: ease gt-kf-rotate 1.5s infinite
|
width $gt-size-loader
|
||||||
display: inline-block
|
height $gt-size-loader
|
||||||
font-style: normal
|
font-style normal
|
||||||
width: $gt-size-loader
|
// font-size: $gt-size-loader
|
||||||
height: $gt-size-loader
|
line-height $gt-size-loader
|
||||||
//font-size: $gt-size-loader
|
border 1px solid $gt-color-loader
|
||||||
line-height: $gt-size-loader
|
border-radius 50%
|
||||||
border-radius: 50%
|
animation ease gt-kf-rotate 1.5s infinite
|
||||||
&:before
|
&:before {
|
||||||
content: ''
|
position absolute
|
||||||
position: absolute
|
top 0
|
||||||
display: block
|
left 50%
|
||||||
top: 0
|
display block
|
||||||
left: 50%
|
width $gt-size-loader-dot
|
||||||
margin-top: -($gt-size-loader-dot / 2)
|
height $gt-size-loader-dot
|
||||||
margin-left: -($gt-size-loader-dot / 2)
|
margin-top -($gt-size-loader-dot / 2)
|
||||||
width: $gt-size-loader-dot
|
margin-left -($gt-size-loader-dot / 2)
|
||||||
height: $gt-size-loader-dot
|
background-color $gt-color-loader
|
||||||
background-color: $gt-color-loader
|
border-radius 50%
|
||||||
border-radius: 50%
|
content ''
|
||||||
|
}
|
||||||
|
}
|
||||||
// avatar
|
// avatar
|
||||||
.gt-avatar
|
.gt-avatar {
|
||||||
display: inline-block
|
display inline-block
|
||||||
width: $gt-size-avatar
|
width $gt-size-avatar
|
||||||
height: $gt-size-avatar
|
height $gt-size-avatar
|
||||||
+mobile()
|
+mobile() {
|
||||||
width: $gt-size-avatar-mobi
|
width $gt-size-avatar-mobi
|
||||||
height: $gt-size-avatar-mobi
|
height $gt-size-avatar-mobi
|
||||||
img
|
}
|
||||||
width: 100%
|
img {
|
||||||
height: auto
|
width 100%
|
||||||
border-radius: 3px
|
height auto
|
||||||
&-github
|
border-radius 3px
|
||||||
width: $gt-size-avatar - em(2px)
|
}
|
||||||
height: $gt-size-avatar - em(2px)
|
&-github {
|
||||||
cursor: pointer
|
width $gt-size-avatar - em(2px)
|
||||||
+mobile()
|
height $gt-size-avatar - em(2px)
|
||||||
width: $gt-size-avatar-mobi - em(2px)
|
cursor pointer
|
||||||
height: $gt-size-avatar-mobi - em(2px)
|
+mobile() {
|
||||||
|
width $gt-size-avatar-mobi - em(2px)
|
||||||
|
height $gt-size-avatar-mobi - em(2px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
// button
|
// button
|
||||||
.gt-btn
|
.gt-btn {
|
||||||
padding: em(12px) em(20px)
|
display inline-block
|
||||||
display: inline-block
|
padding em(12px) em(20px)
|
||||||
line-height: 1
|
color $gt-color-btn
|
||||||
text-decoration: none
|
font-size em(12px)
|
||||||
white-space: nowrap
|
line-height 1
|
||||||
cursor: pointer
|
white-space nowrap
|
||||||
border: 1px solid $gt-color-main
|
text-decoration none
|
||||||
border-radius: $gt-size-border-radius
|
background-color $gt-color-main
|
||||||
background-color: $gt-color-main
|
border 1px solid $gt-color-main
|
||||||
color: $gt-color-btn
|
border-radius $gt-size-border-radius
|
||||||
outline: none
|
outline none
|
||||||
font-size: em(12px)
|
cursor pointer
|
||||||
&-text
|
&-text {
|
||||||
font-weight: 400
|
font-weight 400
|
||||||
&-loading
|
}
|
||||||
position: relative
|
&-loading {
|
||||||
margin-left: em(8px)
|
position relative
|
||||||
display: inline-block
|
display inline-block
|
||||||
width: em(12px)
|
width em(12px)
|
||||||
height: em(16px)
|
height em(16px)
|
||||||
vertical-align: top
|
margin-left em(8px)
|
||||||
&.is--disable
|
vertical-align top
|
||||||
cursor: not-allowed
|
}
|
||||||
opacity: 0.5
|
&.is--disable {
|
||||||
&-login
|
cursor not-allowed
|
||||||
margin-right: 0
|
opacity 0.5
|
||||||
&-preview
|
}
|
||||||
background-color: var(--background-color)
|
&-login {
|
||||||
color: $gt-color-main
|
margin-right 0
|
||||||
&:hover
|
}
|
||||||
background-color: var(--second-background-color)
|
&-preview {
|
||||||
&-public
|
color $gt-color-main
|
||||||
&:hover
|
background-color var(--background-color)
|
||||||
background-color: lighten($gt-color-main, 20%)
|
&:hover {
|
||||||
border-color: lighten($gt-color-main, 20%)
|
background-color var(--second-background-color)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-public {
|
||||||
|
&:hover {
|
||||||
|
background-color lighten($gt-color-main, 20%)
|
||||||
|
border-color lighten($gt-color-main, 20%)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
&-loadmore
|
&-loadmore
|
||||||
// loadmore
|
// loadmore
|
||||||
|
|
||||||
/* error */
|
/* error */
|
||||||
.gt-error
|
.gt-error {
|
||||||
text-align: center
|
margin em(10px)
|
||||||
margin: em(10px)
|
color $gt-color-error
|
||||||
color: $gt-color-error
|
text-align center
|
||||||
|
}
|
||||||
|
|
||||||
/* initing */
|
// initing
|
||||||
.gt-initing
|
.gt-initing {
|
||||||
padding: em(20px) 0
|
padding em(20px) 0
|
||||||
text-align: center
|
text-align center
|
||||||
&-text
|
&-text {
|
||||||
margin: em(10px) auto
|
margin em(10px) auto
|
||||||
font-size: 92%
|
font-size 92%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* no int */
|
// no int
|
||||||
.gt-no-init
|
.gt-no-init {
|
||||||
padding: em(20px) 0
|
padding em(20px) 0
|
||||||
text-align: center
|
text-align center
|
||||||
|
}
|
||||||
|
|
||||||
/* link */
|
// link
|
||||||
.gt-link
|
.gt-link {
|
||||||
border-bottom: 1px dotted $gt-color-main
|
border-bottom 1px dotted $gt-color-main
|
||||||
&-counts, &-project
|
&-counts
|
||||||
text-decoration: none
|
&-project {
|
||||||
|
text-decoration none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* meta */
|
// meta
|
||||||
.gt-meta
|
.gt-meta {
|
||||||
margin: em(20px) 0
|
position relative
|
||||||
padding: em(16px) 0
|
z-index 10
|
||||||
position: relative
|
margin em(20px) 0
|
||||||
border-bottom: 1px solid $gt-color-hr
|
padding em(16px) 0
|
||||||
font-size: em(16px)
|
font-size em(16px)
|
||||||
z-index: 10
|
border-bottom 1px solid $gt-color-hr
|
||||||
clearfix()
|
clearfix()
|
||||||
|
}
|
||||||
|
|
||||||
.gt-counts
|
.gt-counts {
|
||||||
margin: 0 em(10px) 0 0
|
margin 0 em(10px) 0 0
|
||||||
color: var(--default-text-color)
|
color var(--default-text-color)
|
||||||
|
}
|
||||||
|
|
||||||
.gt-user
|
.gt-user {
|
||||||
float: right
|
float right
|
||||||
margin: 0
|
margin 0
|
||||||
font-size: 92%
|
font-size 92%
|
||||||
&-pic
|
&-pic {
|
||||||
width: 16px
|
width 16px
|
||||||
height: 16px
|
height 16px
|
||||||
vertical-align: top
|
margin-right em(8px)
|
||||||
margin-right: em(8px)
|
vertical-align top
|
||||||
&-inner
|
}
|
||||||
display: inline-block
|
&-inner {
|
||||||
cursor: pointer
|
display inline-block
|
||||||
.gt-user-name
|
cursor pointer
|
||||||
color: var(--default-text-color)
|
.gt-user-name {
|
||||||
|
color var(--default-text-color)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gt-ico
|
.gt-ico {
|
||||||
margin: 0 0 0 em(5px)
|
margin 0 0 0 em(5px)
|
||||||
svg
|
svg {
|
||||||
fill: var(--default-text-color)
|
fill var(--default-text-color)
|
||||||
.is--poping
|
}
|
||||||
.gt-ico
|
}
|
||||||
svg
|
.is--poping {
|
||||||
fill: $gt-color-main
|
.gt-ico {
|
||||||
|
svg {
|
||||||
|
fill $gt-color-main
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gt-version
|
.gt-version {
|
||||||
color: $gt-color-sub
|
margin-left em(6px)
|
||||||
margin-left: em(6px)
|
color $gt-color-sub
|
||||||
|
}
|
||||||
|
|
||||||
.gt-copyright
|
.gt-copyright {
|
||||||
margin: 0 em(15px) em(8px)
|
margin 0 em(15px) em(8px)
|
||||||
border-top: 1px solid var(--border-color)
|
padding-top em(8px)
|
||||||
padding-top: em(8px)
|
border-top 1px solid var(--border-color)
|
||||||
|
}
|
||||||
|
|
||||||
/* popup */
|
// popup
|
||||||
.gt-popup
|
.gt-popup {
|
||||||
position: absolute
|
position absolute
|
||||||
right: 0
|
top em(38px)
|
||||||
top: em(38px)
|
right 0
|
||||||
background: var(--background-color)
|
display inline-block
|
||||||
display: inline-block
|
padding em(10px) 0
|
||||||
border: 1px solid var(--border-color)
|
font-size em(14px)
|
||||||
padding: em(10px) 0
|
letter-spacing 0.5px
|
||||||
font-size: em(14px)
|
background var(--background-color)
|
||||||
letter-spacing: .5px
|
border 1px solid var(--border-color)
|
||||||
.gt-action
|
.gt-action {
|
||||||
cursor: pointer
|
position relative
|
||||||
display: block
|
display block
|
||||||
margin: em(8px) 0
|
margin em(8px) 0
|
||||||
padding: 0 em(18px)
|
padding 0 em(18px)
|
||||||
position: relative
|
text-decoration none
|
||||||
text-decoration: none
|
cursor pointer
|
||||||
&.is--active
|
&.is--active {
|
||||||
&:before
|
&:before {
|
||||||
content: ''
|
position absolute
|
||||||
width: em(4px)
|
top em(7px)
|
||||||
height: em(4px)
|
left em(8px)
|
||||||
background: $gt-color-main
|
width em(4px)
|
||||||
position: absolute
|
height em(4px)
|
||||||
left: em(8px)
|
background $gt-color-main
|
||||||
top: em(7px)
|
content ''
|
||||||
/* header */
|
}
|
||||||
.gt-header
|
}
|
||||||
position: relative
|
}
|
||||||
display: flex
|
}
|
||||||
&-comment
|
// header
|
||||||
flex: 1
|
.gt-header {
|
||||||
margin-left: em(20px)
|
position relative
|
||||||
+mobile()
|
display flex
|
||||||
margin-left: em(14px)
|
&-comment {
|
||||||
&-textarea
|
flex 1
|
||||||
padding: em(12px)
|
margin-left em(20px)
|
||||||
display: block
|
+mobile() {
|
||||||
box-sizing: border-box
|
margin-left em(14px)
|
||||||
width: 100%
|
}
|
||||||
min-height: em(82px)
|
}
|
||||||
max-height: em(240px)
|
&-textarea {
|
||||||
border-radius: $gt-size-border-radius
|
display block
|
||||||
border: 1px solid var(--border-color)
|
box-sizing border-box
|
||||||
font-size: em(14px)
|
width 100%
|
||||||
word-wrap: break-word
|
min-height em(82px)
|
||||||
resize: vertical
|
max-height em(240px)
|
||||||
color: var(--default-text-color)
|
padding em(12px)
|
||||||
background-color: var(--fourth-text-color)
|
color var(--default-text-color)
|
||||||
outline: none
|
font-size em(14px)
|
||||||
transition: all 0.25s ease
|
word-wrap break-word
|
||||||
&:hover
|
background-color var(--fourth-text-color)
|
||||||
background-color: var(--background-color)
|
border 1px solid var(--border-color)
|
||||||
&-preview
|
border-radius $gt-size-border-radius
|
||||||
padding: em(12px)
|
outline none
|
||||||
border-radius: $gt-size-border-radius
|
transition all 0.25s ease
|
||||||
border: 1px solid var(--border-color)
|
resize vertical
|
||||||
background-color: var(--background-color)
|
&:hover {
|
||||||
&-controls
|
background-color var(--background-color)
|
||||||
position: relative
|
}
|
||||||
margin: em(12px) 0 0
|
}
|
||||||
|
&-preview {
|
||||||
|
padding em(12px)
|
||||||
|
background-color var(--background-color)
|
||||||
|
border 1px solid var(--border-color)
|
||||||
|
border-radius $gt-size-border-radius
|
||||||
|
}
|
||||||
|
&-controls {
|
||||||
|
position relative
|
||||||
|
margin em(12px) 0 0
|
||||||
clearfix()
|
clearfix()
|
||||||
+mobile()
|
+mobile() {
|
||||||
margin: 0
|
margin 0
|
||||||
&-tip
|
}
|
||||||
font-size: em(14px)
|
&-tip {
|
||||||
color: $gt-color-main
|
color $gt-color-main
|
||||||
text-decoration: none
|
font-size em(14px)
|
||||||
vertical-align: sub
|
text-decoration none
|
||||||
+mobile()
|
vertical-align sub
|
||||||
display: none
|
+mobile() {
|
||||||
.gt-btn
|
display none
|
||||||
float: right
|
}
|
||||||
margin-left: em(20px)
|
}
|
||||||
+mobile()
|
.gt-btn {
|
||||||
float: none
|
float right
|
||||||
width: 100%
|
margin-left em(20px)
|
||||||
margin: em(12px) 0 0
|
+mobile() {
|
||||||
|
float none
|
||||||
|
width 100%
|
||||||
|
margin em(12px) 0 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:after
|
&:after {
|
||||||
content: ''
|
position fixed
|
||||||
position: fixed
|
top 0
|
||||||
bottom: 100%
|
right 0
|
||||||
left: 0
|
bottom 100%
|
||||||
right: 0
|
left 0
|
||||||
top: 0
|
opacity 0
|
||||||
opacity: 0
|
content ''
|
||||||
&.gt-input-focused
|
}
|
||||||
position: relative
|
&.gt-input-focused {
|
||||||
&:after
|
position relative
|
||||||
content: ''
|
&:after {
|
||||||
position: fixed
|
position fixed
|
||||||
bottom: 0
|
top 0
|
||||||
left: 0
|
right 0
|
||||||
right: 0
|
bottom 0
|
||||||
top: 0
|
left 0
|
||||||
background: #000
|
z-index $gt-mask-z-index
|
||||||
opacity: 0.6
|
background #000
|
||||||
transition: opacity .3s, bottom 0s
|
opacity 0.6
|
||||||
z-index: $gt-mask-z-index
|
transition opacity 0.3s, bottom 0s
|
||||||
.gt-header-comment
|
content ''
|
||||||
z-index: $gt-mask-z-index + 1
|
}
|
||||||
|
.gt-header-comment {
|
||||||
|
z-index $gt-mask-z-index + 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* comments */
|
// comments
|
||||||
.gt-comments
|
.gt-comments {
|
||||||
padding-top: em(20px)
|
padding-top em(20px)
|
||||||
&-null
|
&-null {
|
||||||
text-align: center
|
text-align center
|
||||||
&-controls
|
}
|
||||||
margin: em(20px) 0
|
&-controls {
|
||||||
text-align: center
|
margin em(20px) 0
|
||||||
|
text-align center
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* comment */
|
// comment
|
||||||
.gt-comment
|
.gt-comment {
|
||||||
position: relative
|
position relative
|
||||||
padding: em(10px) 0
|
display flex
|
||||||
display: flex
|
padding em(10px) 0
|
||||||
&-content
|
&-content {
|
||||||
flex: 1
|
flex 1
|
||||||
margin-left: em(20px)
|
margin-left em(20px)
|
||||||
padding: em(12px) em(16px)
|
padding em(12px) em(16px)
|
||||||
background-color: var(--second-background-color)
|
overflow auto
|
||||||
overflow: auto
|
background-color var(--second-background-color)
|
||||||
transition: all ease 0.25s
|
transition all ease 0.25s
|
||||||
+mobile()
|
+mobile() {
|
||||||
margin-left: em(14px)
|
margin-left em(14px)
|
||||||
padding: em(10px) em(12px)
|
padding em(10px) em(12px)
|
||||||
&-header
|
}
|
||||||
margin-bottom: em(8px)
|
}
|
||||||
font-size: em(14px)
|
&-header {
|
||||||
position: relative
|
position relative
|
||||||
&-block-1
|
margin-bottom em(8px)
|
||||||
float: right
|
font-size em(14px)
|
||||||
height: em(22px)
|
}
|
||||||
width: em(32px)
|
&-block-1 {
|
||||||
&-block-2
|
float right
|
||||||
float: right
|
width em(32px)
|
||||||
height: em(22px)
|
height em(22px)
|
||||||
width: em(64px)
|
}
|
||||||
&-username
|
&-block-2 {
|
||||||
font-weight: 500
|
float right
|
||||||
color: $gt-color-main
|
width em(64px)
|
||||||
text-decoration: none
|
height em(22px)
|
||||||
&:hover
|
}
|
||||||
text-decoration: underline
|
&-username {
|
||||||
&-text
|
color $gt-color-main
|
||||||
margin-left: em(8px)
|
font-weight 500
|
||||||
color: $gt-color-sub
|
text-decoration none
|
||||||
&-date
|
&:hover {
|
||||||
margin-left: em(8px)
|
text-decoration underline
|
||||||
color: $gt-color-sub
|
}
|
||||||
&-like, &-edit, &-reply
|
}
|
||||||
position: absolute
|
&-text {
|
||||||
height: em(22px)
|
margin-left em(8px)
|
||||||
&:hover
|
color $gt-color-sub
|
||||||
cursor: pointer
|
}
|
||||||
|
&-date {
|
||||||
|
margin-left em(8px)
|
||||||
|
color $gt-color-sub
|
||||||
|
}
|
||||||
&-like
|
&-like
|
||||||
top: 0
|
&-edit
|
||||||
right: em(32px)
|
&-reply {
|
||||||
&-edit, &-reply
|
position absolute
|
||||||
top: 0
|
height em(22px)
|
||||||
right: 0
|
&:hover {
|
||||||
&-body
|
cursor pointer
|
||||||
//color: $gt-color-comment-txt !important
|
}
|
||||||
color: var(--second-text-color) !important
|
}
|
||||||
.email-hidden-toggle a
|
&-like {
|
||||||
display: inline-block;
|
top 0
|
||||||
height: 12px;
|
right em(32px)
|
||||||
padding: 0 9px;
|
}
|
||||||
font-size: 12px;
|
&-edit
|
||||||
font-weight: 600;
|
&-reply {
|
||||||
line-height: 6px;
|
top 0
|
||||||
color: #444d56;
|
right 0
|
||||||
text-decoration: none;
|
}
|
||||||
vertical-align: middle;
|
&-body {
|
||||||
background: #dfe2e5;
|
// color: $gt-color-comment-txt !important
|
||||||
border-radius: 1px;
|
color var(--second-text-color) !important
|
||||||
&:hover
|
.email-hidden-toggle a {
|
||||||
background-color: #c6cbd1;
|
display inline-block
|
||||||
.email-hidden-reply
|
height 12px
|
||||||
display: none;
|
padding 0 9px
|
||||||
white-space: pre-wrap
|
color #444d56
|
||||||
.email-signature-reply
|
font-weight 600
|
||||||
padding: 0 15px;
|
font-size 12px
|
||||||
margin: 15px 0;
|
line-height 6px
|
||||||
color: #586069;
|
text-decoration none
|
||||||
border-left: 4px solid #dfe2e5;
|
vertical-align middle
|
||||||
.email-hidden-reply.expanded
|
background #dfe2e5
|
||||||
display: block
|
border-radius 1px
|
||||||
&-admin
|
&:hover {
|
||||||
.gt-comment-content
|
background-color #c6cbd1
|
||||||
background-color: var(--fourth-text-color)
|
}
|
||||||
|
}
|
||||||
|
.email-hidden-reply {
|
||||||
|
display none
|
||||||
|
white-space pre-wrap
|
||||||
|
.email-signature-reply {
|
||||||
|
margin 15px 0
|
||||||
|
padding 0 15px
|
||||||
|
color #586069
|
||||||
|
border-left 4px solid #dfe2e5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.email-hidden-reply.expanded {
|
||||||
|
display block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-admin {
|
||||||
|
.gt-comment-content {
|
||||||
|
background-color var(--fourth-text-color)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes gt-kf-rotate
|
@keyframes gt-kf-rotate {
|
||||||
0%
|
0% {
|
||||||
transform: rotate(0)
|
transform rotate(0)
|
||||||
100%
|
}
|
||||||
transform: rotate(360deg)
|
100% {
|
||||||
|
transform rotate(360deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,11 @@
|
||||||
.tk-meta-input {
|
.tk-meta-input {
|
||||||
.el-input {
|
.el-input {
|
||||||
.el-input-group__prepend {
|
.el-input-group__prepend {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
.tk-input {
|
.tk-input {
|
||||||
textarea {
|
textarea {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,83 +28,76 @@
|
||||||
.tk-action-icon {
|
.tk-action-icon {
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: var(--default-text-color);
|
fill var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
&.OwO {
|
&.OwO {
|
||||||
|
|
||||||
.OwO-body {
|
.OwO-body {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
background-color: var(--background-color);
|
background-color var(--background-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tk-preview {
|
.tk-preview {
|
||||||
span {
|
span {
|
||||||
background: var(--second-background-color);
|
color var(--default-text-color)
|
||||||
color: var(--default-text-color);
|
background var(--second-background-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tk-preview-container {
|
.tk-preview-container {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.tk-comments-container {
|
.tk-comments-container {
|
||||||
.tk-comments-count {
|
.tk-comments-count {
|
||||||
span {
|
span {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tk-main {
|
.tk-main {
|
||||||
margin-bottom: 20px;
|
margin-bottom 1.4rem
|
||||||
|
|
||||||
.tk-meta {
|
.tk-meta {
|
||||||
.tk-nick {
|
.tk-nick {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.tk-tag {
|
.tk-tag {
|
||||||
|
|
||||||
&.tk-tag-green {
|
&.tk-tag-green {
|
||||||
background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
|
color #fff
|
||||||
background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
|
background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
|
||||||
color: #fff;
|
background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
|
||||||
border none;
|
border none
|
||||||
border-radius: 5px;
|
border-radius 0.4rem
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tk-time {
|
.tk-time {
|
||||||
time {
|
time {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tk-content {
|
.tk-content {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.tk-expand {
|
.tk-expand {
|
||||||
color: var(--third-text-color);
|
color var(--third-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,17 @@
|
||||||
|
|
||||||
.vwrap {
|
.vwrap {
|
||||||
|
|
||||||
border: 1px solid var(--third-text-color);
|
border 0.1rem solid var(--third-text-color)
|
||||||
|
|
||||||
.vheader {
|
.vheader {
|
||||||
|
|
||||||
.vinput {
|
.vinput {
|
||||||
|
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
border-color: var(--third-text-color);
|
border-color var(--third-text-color)
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-bottom: 1px dashed var(--primary-color) !important;
|
border-bottom 0.1rem dashed var(--primary-color) !important
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -23,45 +23,41 @@
|
||||||
.vedit {
|
.vedit {
|
||||||
|
|
||||||
.veditor {
|
.veditor {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.vctrl {
|
.vctrl {
|
||||||
|
|
||||||
.vicon {
|
.vicon {
|
||||||
|
|
||||||
fill: var(--default-text-color);
|
fill var(--default-text-color)
|
||||||
|
|
||||||
&.actived {
|
&.actived {
|
||||||
fill: var(--primary-color);
|
fill var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
button.vsubmit {
|
button.vsubmit {
|
||||||
|
color var(--default-text-color) !important
|
||||||
background: transparent !important;
|
background transparent !important
|
||||||
color: var(--default-text-color) !important;
|
border 0.1rem solid var(--default-text-color) !important
|
||||||
border: 1px solid var(--default-text-color) !important;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary-color) !important;
|
color var(--primary-color) !important
|
||||||
border: 1px solid var(--primary-color) !important;
|
border 0.1rem solid var(--primary-color) !important
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.vcount {
|
.vcount {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
|
|
||||||
.vnum {
|
.vnum {
|
||||||
color: var(--second-text-color);
|
color var(--second-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -70,14 +66,14 @@
|
||||||
|
|
||||||
.vnick {
|
.vnick {
|
||||||
.author {
|
.author {
|
||||||
font-weight: 450;
|
margin-left 0.15rem
|
||||||
font-size: 12px;
|
padding 0.15rem
|
||||||
padding: 2px;
|
color #fff
|
||||||
background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
|
font-weight 450
|
||||||
background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
|
font-size 0.9rem
|
||||||
color: #fff;
|
background -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
|
||||||
margin-left: 2px;
|
background linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5)
|
||||||
border-radius: 2px;
|
border-radius 0.15rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -85,53 +81,49 @@
|
||||||
.vhead {
|
.vhead {
|
||||||
|
|
||||||
.vnick {
|
.vnick {
|
||||||
color: var(--primary-color);
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.vsys {
|
.vsys {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
background: var(--fourth-text-color) !important;
|
background var(--fourth-text-color) !important
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.vcontent {
|
.vcontent {
|
||||||
P {
|
P {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: var(--code-foreground);
|
color var(--code-foreground)
|
||||||
background: var(--code-background);
|
background var(--code-background)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.vh {
|
.vh {
|
||||||
border-bottom-color: var(--border-color);
|
border-bottom-color var(--border-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.vquote {
|
.vquote {
|
||||||
border-left-color: var(--border-color);
|
border-left-color var(--border-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.vcopy {
|
.vcopy {
|
||||||
color: var(--third-text-color);
|
color var(--third-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.vpage {
|
.vpage {
|
||||||
|
|
||||||
.vmore {
|
.vmore {
|
||||||
border: 1px solid var(--border-color);
|
color var(--second-text-color)
|
||||||
color: var(--second-text-color);
|
border 0.1rem solid var(--border-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,11 +34,11 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
|
||||||
padding-top 2rem
|
padding-top 2rem
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
|
color $first-screen-font-color
|
||||||
font-weight bold
|
font-weight bold
|
||||||
font-size $first-screen-font-size
|
font-size $first-screen-font-size
|
||||||
line-height 1.8
|
line-height 1.8
|
||||||
text-align center
|
text-align center
|
||||||
color $first-screen-font-color
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size $first-screen-font-size * 0.9
|
font-size $first-screen-font-size * 0.9
|
||||||
|
|
@ -48,10 +48,10 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
|
||||||
|
|
||||||
.s-icon-list {
|
.s-icon-list {
|
||||||
position absolute
|
position absolute
|
||||||
box-sizing border-box
|
|
||||||
bottom 0
|
bottom 0
|
||||||
font-size $first-screen-icon-size
|
|
||||||
display flex
|
display flex
|
||||||
|
box-sizing border-box
|
||||||
|
font-size $first-screen-icon-size
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size $first-screen-icon-size * 0.9
|
font-size $first-screen-icon-size * 0.9
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,37 @@
|
||||||
.footer {
|
.footer {
|
||||||
font-size: 1rem;
|
color var(--third-text-color)
|
||||||
color: var(--third-text-color);
|
font-size 1rem
|
||||||
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--third-text-color);
|
color var(--third-text-color)
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary-color);
|
color var(--primary-color)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container {
|
.info-container {
|
||||||
padding-bottom: 1rem;
|
padding-bottom 1rem
|
||||||
text-align: center;
|
text-align center
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
margin: 0.3rem 0;
|
margin 0.3rem 0
|
||||||
|
color var(--third-text-color)
|
||||||
|
|
||||||
&.ypyun-info a {
|
&.ypyun-info a {
|
||||||
display: flex;
|
display flex
|
||||||
align-items: center;
|
align-items center
|
||||||
justify-content: center;
|
justify-content center
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin: 0 0.3rem;
|
margin 0 0.3rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-animate {
|
.icon-animate {
|
||||||
animation: icon-animate 1.2s ease-in-out infinite;
|
animation icon-animate 1.2s ease-in-out infinite
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,94 @@
|
||||||
$logo-title-font-size = 2rem;
|
$logo-title-font-size = 2rem
|
||||||
$pc-search-icon-font-size = 1.5rem;
|
$pc-search-icon-font-size = 1.5rem
|
||||||
$menu-bar-line-height = 2.5px;
|
$menu-bar-line-height = 2.5px
|
||||||
$logo-image-box-width = 46px;
|
$logo-image-box-width = 46px
|
||||||
|
|
||||||
.header-wrapper {
|
.header-wrapper {
|
||||||
width: 100%;
|
display flex
|
||||||
height: 100%;
|
align-items center
|
||||||
box-sizing: border-box;
|
justify-content center
|
||||||
display: flex;
|
box-sizing border-box
|
||||||
align-items: center;
|
width 100%
|
||||||
justify-content: center;
|
height 100%
|
||||||
padding-top: $scroll-progress-bar-height;
|
padding-top $scroll-progress-bar-height
|
||||||
background: var(--background-color);
|
background var(--background-color)
|
||||||
|
|
||||||
hover-style(false, 0, 0);
|
hover-style(false, 0, 0)
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
position: relative;
|
position relative
|
||||||
height: 100%;
|
z-index $z-index-5
|
||||||
width: $main-content-width;
|
display flex
|
||||||
max-width: $content-max-width;
|
flex-direction row
|
||||||
display: flex;
|
align-items center
|
||||||
flex-direction: row;
|
justify-content space-between
|
||||||
justify-content: space-between;
|
width $main-content-width
|
||||||
align-items: center;
|
max-width $content-max-width
|
||||||
z-index: $z-index-5;
|
height 100%
|
||||||
|
|
||||||
|
|
||||||
&.has-first-screen {
|
&.has-first-screen {
|
||||||
max-width: $content-max-width * 1.2;
|
max-width $content-max-width * 1.2
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
width: $main-content-width-tablet;
|
width $main-content-width-tablet
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
width: $main-content-width-mobile;
|
width $main-content-width-mobile
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display flex
|
||||||
align-items: center;
|
align-items center
|
||||||
transition-t("transform", "0", "0.2", "linear");
|
transition-t("transform", "0", "0.2", "linear")
|
||||||
|
|
||||||
.header-shrink & {
|
.header-shrink & {
|
||||||
transform: scale(0.72);
|
transform scale(0.72)
|
||||||
transform-origin: left;
|
transform-origin left
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) {
|
if (hexo-config('base_info.logo_img') || hexo-config('style.logo')) {
|
||||||
.logo-image {
|
.logo-image {
|
||||||
width: $logo-image-box-width;
|
width $logo-image-box-width
|
||||||
height: $logo-image-box-width;
|
height $logo-image-box-width
|
||||||
margin-right: 8px;
|
margin-right 8px
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
width: $logo-image-box-width * 0.9;
|
width $logo-image-box-width * 0.9
|
||||||
height: $logo-image-box-width * 0.9;
|
height $logo-image-box-width * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
width: $logo-image-box-width * 0.8;
|
width $logo-image-box-width * 0.8
|
||||||
height: $logo-image-box-width * 0.8;
|
height $logo-image-box-width * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 6px;
|
width 100%
|
||||||
width: 100%;
|
border-radius 6px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-title {
|
.logo-title {
|
||||||
font-size: $logo-title-font-size;
|
color var(--first-text-color)
|
||||||
font-weight: bold;
|
font-weight bold
|
||||||
letter-spacing: 1px;
|
font-size $logo-title-font-size
|
||||||
line-height: 1;
|
line-height 1
|
||||||
color: var(--first-text-color);
|
letter-spacing 1px
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $logo-title-font-size * 0.9;
|
font-size $logo-title-font-size * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
font-size: $logo-title-font-size * 0.8;
|
font-size $logo-title-font-size * 0.8
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -99,131 +97,129 @@ $logo-image-box-width = 46px;
|
||||||
.pc {
|
.pc {
|
||||||
|
|
||||||
.menu-list {
|
.menu-list {
|
||||||
display: flex;
|
display flex
|
||||||
align-items: center;
|
align-items center
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.menu-item {
|
.menu-item {
|
||||||
float: left;
|
position relative
|
||||||
position: relative;
|
float left
|
||||||
margin-left: 30px;
|
margin-left 30px
|
||||||
font-size: 1rem;
|
color var(--default-text-color)
|
||||||
cursor: pointer;
|
font-size 1rem
|
||||||
color: var(--default-text-color);
|
cursor pointer
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
a:hover, .active {
|
a:hover
|
||||||
|
.active {
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
position absolute
|
||||||
position: absolute;
|
bottom -10px
|
||||||
bottom: -10px;
|
left 50%
|
||||||
left: 50%;
|
width 100%
|
||||||
width: 100%;
|
height 2px
|
||||||
height: 2px;
|
background var(--primary-color)
|
||||||
transform: translateX(-50%);
|
transform translateX(-50%)
|
||||||
background: var(--primary-color);
|
content ''
|
||||||
transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear");
|
transition-t("transform, bottom", "0, 0", "0.2, 0.2", "linear, linear")
|
||||||
|
|
||||||
.header-shrink & {
|
.header-shrink & {
|
||||||
bottom: -($header-shrink-height / 2 - 12);
|
bottom -($header-shrink-height / 2 - 12)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.search {
|
&.search {
|
||||||
font-size: $pc-search-icon-font-size;
|
margin-left 26px
|
||||||
margin-left: 26px;
|
font-size $pc-search-icon-font-size
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.mobile {
|
.mobile {
|
||||||
display: flex;
|
display flex
|
||||||
justify-content: space-between;
|
align-items center
|
||||||
align-items: center;
|
justify-content space-between
|
||||||
|
|
||||||
.icon-item {
|
.icon-item {
|
||||||
display: none;
|
position relative
|
||||||
position: relative;
|
display none
|
||||||
cursor: pointer;
|
width 20px
|
||||||
font-size: 18px;
|
height 20px
|
||||||
margin-left: 12px;
|
margin-left 12px
|
||||||
width: 20px;
|
color var(--default-text-color)
|
||||||
height: 20px;
|
font-size 18px
|
||||||
color: var(--default-text-color);
|
cursor pointer
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left 0
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: flex;
|
display flex
|
||||||
justify-content: center;
|
align-items center
|
||||||
align-items: center;
|
justify-content center
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-bar {
|
.menu-bar {
|
||||||
|
|
||||||
.menu-bar-middle {
|
.menu-bar-middle {
|
||||||
width: 18px;
|
position relative
|
||||||
height: $menu-bar-line-height;
|
width 18px
|
||||||
position: relative;
|
height $menu-bar-line-height
|
||||||
background: var(--default-text-color);
|
background var(--default-text-color)
|
||||||
|
|
||||||
.header-drawer-show & {
|
.header-drawer-show & {
|
||||||
background: transparent;
|
background transparent
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&::before, &::after {
|
&::before
|
||||||
content: '';
|
&::after {
|
||||||
position: absolute;
|
position absolute
|
||||||
left: 0;
|
left 0
|
||||||
width: 100%;
|
width 100%
|
||||||
height: $menu-bar-line-height;
|
height $menu-bar-line-height
|
||||||
background: var(--default-text-color);
|
background var(--default-text-color)
|
||||||
transition-t("transform", "0", "0.38", "ease");
|
content ''
|
||||||
|
transition-t("transform", "0", "0.38", "ease")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
top: -6px;
|
top -6px
|
||||||
|
|
||||||
.header-drawer-show & {
|
.header-drawer-show & {
|
||||||
transform: translateY(6px) rotate(45deg);
|
transform translateY(6px) rotate(45deg)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
bottom: -6px;
|
bottom -6px
|
||||||
|
|
||||||
.header-drawer-show & {
|
.header-drawer-show & {
|
||||||
transform: translateY(-6px) rotate(-45deg);
|
transform translateY(-6px) rotate(-45deg)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -234,74 +230,71 @@ $logo-image-box-width = 46px;
|
||||||
|
|
||||||
|
|
||||||
.header-drawer {
|
.header-drawer {
|
||||||
width: 100%;
|
position absolute
|
||||||
padding: $header-height 0 20px 0;
|
top 0
|
||||||
position: absolute;
|
left 0
|
||||||
top: 0;
|
z-index $z-index-2
|
||||||
left: 0;
|
width 100%
|
||||||
transform: scaleY(0);
|
padding $header-height 0 20px 0
|
||||||
transform-origin: top;
|
background var(--background-color)
|
||||||
z-index: $z-index-2;
|
transform scaleY(0)
|
||||||
background: var(--background-color);
|
transform-origin top
|
||||||
transition-t("transform", "0", "0.38", "ease");
|
transition-t("transform", "0", "0.38", "ease")
|
||||||
|
|
||||||
.header-drawer-show & {
|
.header-drawer-show & {
|
||||||
transform: scaleY(1);
|
transform scaleY(1)
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-menu-list {
|
.drawer-menu-list {
|
||||||
display: flex;
|
display flex
|
||||||
flex-direction: column;
|
flex-direction column
|
||||||
justify-content: flex-start;
|
align-items center
|
||||||
align-items: center;
|
justify-content flex-start
|
||||||
|
|
||||||
.drawer-menu-item {
|
.drawer-menu-item {
|
||||||
font-size: 1rem;
|
height 38px
|
||||||
margin: 6px 0;
|
margin 6px 0
|
||||||
height: 38px;
|
font-size 1rem
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: 6px 20px;
|
padding 6px 20px
|
||||||
border-radius: 20px;
|
color var(--default-text-color)
|
||||||
color: var(--default-text-color);
|
border-radius 20px
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--second-text-color);
|
color var(--second-text-color)
|
||||||
border: 1px solid var(--default-text-color);
|
border 1px solid var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border: 1px solid var(--default-text-color);
|
color var(--second-text-color)
|
||||||
color: var(--second-text-color);
|
border 1px solid var(--default-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.window-mask {
|
.window-mask {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0
|
||||||
width: 100%;
|
z-index $z-index-1
|
||||||
height: 100vh;
|
width 100%
|
||||||
background: rgba(0, 0, 0, 0.4);
|
height 100vh
|
||||||
z-index: $z-index-1;
|
background rgba(0, 0, 0, 0.4)
|
||||||
visibility: hidden;
|
visibility hidden
|
||||||
opacity: 0;
|
opacity 0
|
||||||
transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease");
|
transition-t("transform, opacity", "0, 0", "0.38, 0.38", "ease, ease")
|
||||||
|
|
||||||
.header-drawer-show & {
|
.header-drawer-show & {
|
||||||
visibility: visible;
|
visibility visible
|
||||||
opacity: 1;
|
opacity 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-drawer-show {
|
.header-drawer-show {
|
||||||
overflow: hidden;
|
overflow hidden
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,36 @@
|
||||||
.image-viewer-container {
|
.image-viewer-container {
|
||||||
position: fixed;
|
position fixed
|
||||||
left: 0;
|
top 0
|
||||||
top: 0;
|
left 0
|
||||||
width: 100%;
|
z-index $z-index-8
|
||||||
height: 100%;
|
display flex
|
||||||
display: flex;
|
align-items center
|
||||||
align-items: center;
|
justify-content center
|
||||||
justify-content: center;
|
box-sizing border-box
|
||||||
background: rgba(0, 0, 0, 0);
|
width 100%
|
||||||
visibility: hidden;
|
height 100%
|
||||||
z-index: $z-index-8;
|
padding 6%
|
||||||
padding: 6%;
|
background rgba(0, 0, 0, 0)
|
||||||
box-sizing: border-box;
|
visibility hidden
|
||||||
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease");
|
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background rgba(0, 0, 0, 0.5)
|
||||||
visibility: visible;
|
visibility visible
|
||||||
|
|
||||||
img {
|
img {
|
||||||
cursor: zoom-out;
|
padding 2px
|
||||||
transform: scale(1);
|
background var(--background-color)
|
||||||
padding: 2px;
|
transform scale(1)
|
||||||
background: var(--background-color);
|
cursor zoom-out
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width 100%
|
||||||
max-height: 100%;
|
max-height 100%
|
||||||
transform: scale(0);
|
transform scale(0)
|
||||||
transition-t("transform", "0", "0.3", "ease");
|
transition-t("transform", "0", "0.3", "ease")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,35 +3,34 @@ $search-header-height = 3rem
|
||||||
|
|
||||||
.search-pop-overlay {
|
.search-pop-overlay {
|
||||||
position fixed
|
position fixed
|
||||||
display flex
|
|
||||||
height 100%
|
|
||||||
width 100%
|
|
||||||
left 0
|
|
||||||
top 0
|
top 0
|
||||||
|
left 0
|
||||||
|
z-index $z-index-8
|
||||||
|
display flex
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
background rgba(0, 0, 0, 0)
|
background rgba(0, 0, 0, 0)
|
||||||
visibility hidden
|
visibility hidden
|
||||||
z-index $z-index-8
|
|
||||||
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
|
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
visibility visible
|
|
||||||
background rgba(0, 0, 0, 0.35)
|
background rgba(0, 0, 0, 0.35)
|
||||||
|
visibility visible
|
||||||
|
|
||||||
.search-popup {
|
.search-popup {
|
||||||
transform scale(1)
|
transform scale(1)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.search-popup {
|
.search-popup {
|
||||||
|
z-index $z-index-6
|
||||||
|
width 70%
|
||||||
|
height 80%
|
||||||
|
margin auto
|
||||||
background var(--background-color)
|
background var(--background-color)
|
||||||
border-radius 0.4rem
|
border-radius 0.4rem
|
||||||
height 80%
|
|
||||||
width 70%
|
|
||||||
margin auto
|
|
||||||
transform scale(0)
|
transform scale(0)
|
||||||
z-index $z-index-6
|
|
||||||
transition-t("transform", "0", "0.3", "ease")
|
transition-t("transform", "0", "0.3", "ease")
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
|
|
@ -43,18 +42,18 @@ $search-header-height = 3rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-header {
|
.search-header {
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
height $search-header-height
|
||||||
|
padding 0 1rem
|
||||||
background var(--fourth-text-color)
|
background var(--fourth-text-color)
|
||||||
border-top-left-radius 0.2rem
|
border-top-left-radius 0.2rem
|
||||||
border-top-right-radius 0.2rem
|
border-top-right-radius 0.2rem
|
||||||
display flex
|
|
||||||
height $search-header-height
|
|
||||||
align-items center
|
|
||||||
padding 0 1rem
|
|
||||||
|
|
||||||
.search-input-field-pre {
|
.search-input-field-pre {
|
||||||
cursor pointer
|
|
||||||
color var(--default-text-color)
|
|
||||||
margin-right 0.2rem
|
margin-right 0.2rem
|
||||||
|
color var(--default-text-color)
|
||||||
|
cursor pointer
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input-container {
|
.search-input-container {
|
||||||
|
|
@ -62,12 +61,12 @@ $search-header-height = 3rem
|
||||||
padding 0.2rem
|
padding 0.2rem
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
|
width 100%
|
||||||
|
color var(--default-text-color)
|
||||||
|
font-size 1.2rem
|
||||||
background transparent
|
background transparent
|
||||||
border 0
|
border 0
|
||||||
outline 0
|
outline 0
|
||||||
width 100%
|
|
||||||
font-size 1.2rem
|
|
||||||
color var(--default-text-color)
|
|
||||||
|
|
||||||
&::-webkit-search-cancel-button {
|
&::-webkit-search-cancel-button {
|
||||||
display none
|
display none
|
||||||
|
|
@ -86,21 +85,22 @@ $search-header-height = 3rem
|
||||||
font-size $icon-size
|
font-size $icon-size
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover .fas, far, fab {
|
&:hover .fas
|
||||||
|
far
|
||||||
|
fab {
|
||||||
color var(--first-text-color)
|
color var(--first-text-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#search-result {
|
#search-result {
|
||||||
position relative
|
position relative
|
||||||
box-sizing border-box
|
|
||||||
display flex
|
display flex
|
||||||
|
box-sizing border-box
|
||||||
height 'calc(100% - %s)' % $search-header-height
|
height 'calc(100% - %s)' % $search-header-height
|
||||||
overflow auto
|
|
||||||
padding 0.3rem 1.5rem
|
padding 0.3rem 1.5rem
|
||||||
|
overflow auto
|
||||||
|
|
||||||
.search-result-list {
|
.search-result-list {
|
||||||
width 100%
|
width 100%
|
||||||
|
|
@ -109,9 +109,9 @@ $search-header-height = 3rem
|
||||||
|
|
||||||
li {
|
li {
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
border-bottom 0.1rem dashed var(--border-color)
|
|
||||||
padding 0.8rem 0
|
|
||||||
margin 0.8rem 0
|
margin 0.8rem 0
|
||||||
|
padding 0.8rem 0
|
||||||
|
border-bottom 0.1rem dashed var(--border-color)
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
@ -120,30 +120,30 @@ $search-header-height = 3rem
|
||||||
|
|
||||||
.search-result-title {
|
.search-result-title {
|
||||||
position relative
|
position relative
|
||||||
font-weight bold
|
|
||||||
margin-bottom 0.8rem
|
|
||||||
padding-left 1rem
|
|
||||||
display flex
|
display flex
|
||||||
align-items center
|
align-items center
|
||||||
|
margin-bottom 0.8rem
|
||||||
|
padding-left 1rem
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content ''
|
|
||||||
position absolute
|
position absolute
|
||||||
|
top 50%
|
||||||
|
left 0
|
||||||
width 0.4rem
|
width 0.4rem
|
||||||
height 0.4rem
|
height 0.4rem
|
||||||
border-radius 50%
|
|
||||||
top 50%
|
|
||||||
transform translateY(-50%)
|
|
||||||
left 0
|
|
||||||
background var(--default-text-color)
|
background var(--default-text-color)
|
||||||
|
border-radius 50%
|
||||||
|
transform translateY(-50%)
|
||||||
|
content ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.search-result {
|
.search-result {
|
||||||
line-height 2rem
|
|
||||||
margin 0
|
margin 0
|
||||||
padding-left 1rem
|
padding-left 1rem
|
||||||
|
line-height 2rem
|
||||||
word-wrap break-word
|
word-wrap break-word
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,20 +154,18 @@ $search-header-height = 3rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-keyword {
|
.search-keyword {
|
||||||
border-bottom 0.1rem dashed var(--primary-color)
|
|
||||||
color var(--primary-color)
|
color var(--primary-color)
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
border-bottom 0.1rem dashed var(--primary-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#no-result {
|
#no-result {
|
||||||
color var(--third-text-color)
|
|
||||||
margin auto
|
margin auto
|
||||||
|
color var(--third-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
$friend-link-item-height = 82px;
|
$friend-link-item-height = 82px
|
||||||
$friend-link-item-height-tablet = 68px;
|
$friend-link-item-height-tablet = 68px
|
||||||
$friend-link-item-interval = 16px;
|
$friend-link-item-interval = 16px
|
||||||
$friend-link-item-border-radius = 6px;
|
$friend-link-item-border-radius = 6px
|
||||||
|
|
||||||
.page-template-container {
|
.page-template-container {
|
||||||
|
|
||||||
keep-container(false, 0, 0, 30px, 30px);
|
keep-container(false, 0, 0, 30px, 30px)
|
||||||
|
|
||||||
.page-template-content {
|
.page-template-content {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1
|
||||||
|
h2
|
||||||
|
h3
|
||||||
|
h4
|
||||||
|
h5
|
||||||
|
h6 {
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top 0
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -24,136 +28,130 @@ $friend-link-item-border-radius = 6px;
|
||||||
.friends-link-container {
|
.friends-link-container {
|
||||||
|
|
||||||
.friends-link-list {
|
.friends-link-list {
|
||||||
position: relative;
|
position relative
|
||||||
|
|
||||||
.friends-link-item {
|
.friends-link-item {
|
||||||
box-sizing: border-box;
|
position relative
|
||||||
position: relative;
|
float left
|
||||||
float: left;
|
box-sizing border-box
|
||||||
width: 50%;
|
width 50%
|
||||||
cursor: pointer;
|
height $friend-link-item-height
|
||||||
height: $friend-link-item-height;
|
padding-bottom $friend-link-item-interval
|
||||||
padding-bottom: $friend-link-item-interval;
|
cursor pointer
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
height: $friend-link-item-height-tablet;
|
height $friend-link-item-height-tablet
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(odd) {
|
&:nth-child(odd) {
|
||||||
padding-right: $friend-link-item-interval * 0.5;
|
padding-right $friend-link-item-interval * 0.5
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(even) {
|
&:nth-child(even) {
|
||||||
padding-left: $friend-link-item-interval * 0.5;
|
padding-left $friend-link-item-interval * 0.5
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position: relative;
|
position relative
|
||||||
width: 100%;
|
box-sizing border-box
|
||||||
height: 100%;
|
width 100%
|
||||||
box-shadow: 1px 1px 2px var(--shadow-color);
|
height 100%
|
||||||
border-radius: $friend-link-item-border-radius;
|
padding-left $friend-link-item-height - $friend-link-item-interval
|
||||||
padding-left: $friend-link-item-height - $friend-link-item-interval;
|
border-radius $friend-link-item-border-radius
|
||||||
box-sizing: border-box;
|
box-shadow 1px 1px 2px var(--shadow-color)
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding-left: $friend-link-item-height-tablet - $friend-link-item-interval;
|
padding-left $friend-link-item-height-tablet - $friend-link-item-interval
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 1px 1px 6px var(--shadow-color);
|
box-shadow 1px 1px 6px var(--shadow-color)
|
||||||
|
|
||||||
.info .name {
|
.info .name {
|
||||||
color: var(--primary-color);
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radius {
|
.radius {
|
||||||
border-top-left-radius: $friend-link-item-border-radius;
|
border-top-left-radius $friend-link-item-border-radius
|
||||||
border-bottom-left-radius: $friend-link-item-border-radius;
|
border-bottom-left-radius $friend-link-item-border-radius
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0
|
||||||
left: 0;
|
left 0
|
||||||
width: $friend-link-item-height - $friend-link-item-interval;
|
display flex
|
||||||
height: 100%;
|
align-items center
|
||||||
display: flex;
|
justify-content center
|
||||||
justify-content: center;
|
width $friend-link-item-height - $friend-link-item-interval
|
||||||
align-items: center;
|
height 100%
|
||||||
font-size: 2rem;
|
color var(--second-text-color)
|
||||||
background: var(--second-background-color);
|
font-size 2rem
|
||||||
color: var(--second-text-color);
|
background var(--second-background-color)
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
width: $friend-link-item-height-tablet - $friend-link-item-interval;
|
width $friend-link-item-height-tablet - $friend-link-item-interval
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
box-sizing: border-box;
|
position relative
|
||||||
position: relative;
|
box-sizing border-box
|
||||||
width: 100%;
|
width 100%
|
||||||
height: 100%;
|
height 100%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
position: relative;
|
position relative
|
||||||
width: 100%;
|
display flex
|
||||||
height: 100%;
|
flex-direction column
|
||||||
box-sizing: border-box;
|
align-items center
|
||||||
padding: 10px;
|
justify-items flex-start
|
||||||
display: flex;
|
box-sizing border-box
|
||||||
flex-direction: column;
|
width 100%
|
||||||
align-items: center;
|
height 100%
|
||||||
justify-items: flex-start;
|
padding 10px
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding: 6px;
|
padding 6px
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
width: 100%;
|
width 100%
|
||||||
height: 60%;
|
height 60%
|
||||||
font-size: 1.28rem;
|
color var(--second-text-color)
|
||||||
color: var(--second-text-color);
|
font-size 1.28rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.08rem;
|
font-size 1.08rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
width: 100%;
|
width 100%
|
||||||
height: 40%;
|
height 40%
|
||||||
font-size: 1rem;
|
color var(--third-text-color)
|
||||||
color: var(--third-text-color);
|
font-size 1rem
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 0.98rem;
|
font-size 0.98rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ellipsis {
|
.ellipsis {
|
||||||
overflow: hidden;
|
overflow hidden
|
||||||
text-overflow: ellipsis;
|
white-space nowrap
|
||||||
white-space: nowrap;
|
text-overflow ellipsis
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,12 @@
|
||||||
.paginator {
|
.paginator {
|
||||||
font-size: 1rem;
|
margin-top 30px
|
||||||
margin-top: 30px;
|
font-size 1rem
|
||||||
|
|
||||||
a.prev {
|
a.prev {
|
||||||
float: left;
|
float left
|
||||||
}
|
}
|
||||||
|
|
||||||
a.next {
|
a.next {
|
||||||
float: right;
|
float right
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,51 @@
|
||||||
$li-border-radius = 5px;
|
$li-border-radius = 5px
|
||||||
$li-margin-bottom = 12px;
|
$li-margin-bottom = 12px
|
||||||
|
|
||||||
.post-tools-container {
|
.post-tools-container {
|
||||||
|
|
||||||
.tools-list {
|
.tools-list {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
cursor: pointer;
|
display flex
|
||||||
width: $post-tool-button-width;
|
align-items center
|
||||||
height: $post-tool-button-width;
|
justify-content center
|
||||||
border-radius: 50%;
|
width $post-tool-button-width
|
||||||
font-size: 1.2rem;
|
height $post-tool-button-width
|
||||||
display: flex;
|
margin-bottom $li-margin-bottom
|
||||||
align-items: center;
|
color var(--default-text-color)
|
||||||
justify-content: center;
|
font-size 1.2rem
|
||||||
margin-bottom: $li-margin-bottom;
|
background var(--background-color)
|
||||||
background: var(--background-color);
|
border-radius 50%
|
||||||
color: var(--default-text-color);
|
cursor pointer
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--primary-color);
|
color var(--background-color)
|
||||||
color: var(--background-color);
|
background var(--primary-color)
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--background-color);
|
color var(--background-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
hover-style(true, 1.06, 1.06);
|
hover-style(true, 1.06, 1.06)
|
||||||
|
|
||||||
&.page-aside-toggle {
|
&.page-aside-toggle {
|
||||||
display: none;
|
display none
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: none !important;
|
display none !important
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,74 +1,69 @@
|
||||||
.progress-bar-container {
|
.progress-bar-container {
|
||||||
position: fixed;
|
position fixed
|
||||||
top: 0;
|
top 0
|
||||||
left: 0;
|
left 0
|
||||||
width: 100%;
|
z-index $z-index-9
|
||||||
z-index: $z-index-9;
|
width 100%
|
||||||
|
|
||||||
if (hexo-config('pjax.enable') == true) {
|
if (hexo-config('pjax.enable') == true) {
|
||||||
|
|
||||||
.pjax-progress-bar {
|
.pjax-progress-bar {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0
|
||||||
left: 0;
|
left 0
|
||||||
height: 2px;
|
z-index $z-index-8
|
||||||
width: 0;
|
width 0
|
||||||
background: var(--pjax-progress-bar-color);
|
height 2px
|
||||||
visibility: hidden;
|
background var(--pjax-progress-bar-color)
|
||||||
opacity: 0;
|
visibility hidden
|
||||||
z-index: $z-index-8;
|
opacity 0
|
||||||
transition-t("width", "0", "0.1", "linear");
|
transition-t("width, opacity", "0, 0", "0.1, 0.1", "linear")
|
||||||
|
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
opacity: 1;
|
visibility visible
|
||||||
visibility: visible;
|
opacity 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.pjax-progress-icon {
|
.pjax-progress-icon {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0.4rem
|
||||||
right: 0;
|
right 0.3rem
|
||||||
z-index: $z-index-8;
|
z-index $z-index-8
|
||||||
display: flex;
|
color var(--default-text-color)
|
||||||
align-items: center;
|
font-size 1.1rem
|
||||||
justify-content: center;
|
visibility hidden
|
||||||
padding: 7px 6px 0 0;
|
|
||||||
visibility: hidden;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--default-text-color);
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding: 6px 5px 0 0;
|
top 0.3rem
|
||||||
font-size: 1rem;
|
right 0.2rem
|
||||||
|
font-size 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
visibility: visible;
|
visibility visible
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hexo-config('style.scroll.progress_bar.enable') == true) {
|
if (hexo-config('style.scroll.progress_bar.enable') == true) {
|
||||||
|
|
||||||
.scroll-progress-bar {
|
.scroll-progress-bar {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0
|
||||||
left: 0;
|
left 0
|
||||||
width: 0;
|
z-index $z-index-7
|
||||||
height: $scroll-progress-bar-height;
|
width 0
|
||||||
visibility: hidden;
|
height $scroll-progress-bar-height
|
||||||
z-index: $z-index-7;
|
background var(--primary-color)
|
||||||
background: var(--primary-color);
|
visibility hidden
|
||||||
transition-t("width", "0", "0.1", "linear");
|
transition-t("width", "0", "0.1", "linear")
|
||||||
|
|
||||||
&.hide {
|
&.hide {
|
||||||
display: none !important;
|
display none !important
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,55 @@
|
||||||
$tools-item-width = 32px;
|
$tools-item-width = 32px
|
||||||
$tools-item-font-size = 1.1rem;
|
$tools-item-font-size = 1.1rem
|
||||||
$tools-item-border-radius = 1px;
|
$tools-item-border-radius = 1px
|
||||||
|
|
||||||
|
|
||||||
.side-tools-container {
|
.side-tools-container {
|
||||||
position: relative;
|
position relative
|
||||||
|
|
||||||
.tools-item {
|
.tools-item {
|
||||||
width: $tools-item-width;
|
width $tools-item-width
|
||||||
height: $tools-item-width;
|
height $tools-item-width
|
||||||
font-size: $tools-item-font-size;
|
margin-bottom 3px
|
||||||
margin-bottom: 3px;
|
color var(--default-text-color)
|
||||||
cursor: pointer;
|
font-size $tools-item-font-size
|
||||||
border-right: none;
|
background var(--background-color)
|
||||||
border-radius: $tools-item-border-radius;
|
border-right none
|
||||||
box-shadow: 1px 1px 3px var(--shadow-color);
|
border-radius $tools-item-border-radius
|
||||||
color: var(--default-text-color);
|
box-shadow 1px 1px 3px var(--shadow-color)
|
||||||
background: var(--background-color);
|
cursor pointer
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--background-color);
|
color var(--background-color)
|
||||||
background: var(--primary-color);
|
background var(--primary-color)
|
||||||
box-shadow: 2px 2px 6px var(--shadow-color);
|
box-shadow 2px 2px 6px var(--shadow-color)
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--background-color);
|
color var(--background-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
width: $tools-item-width * 0.9;
|
width $tools-item-width * 0.9
|
||||||
height: $tools-item-width * 0.9;
|
height $tools-item-width * 0.9
|
||||||
font-size: $tools-item-font-size * 0.9;
|
margin-bottom 2px
|
||||||
margin-bottom: 2px;
|
font-size $tools-item-font-size * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
&.rss {
|
&.rss {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
border-radius: $tools-item-border-radius;
|
width 100%
|
||||||
width: 100%;
|
height 100%
|
||||||
height: 100%;
|
border-radius $tools-item-border-radius
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--background-color);
|
color var(--background-color)
|
||||||
background: var(--primary-color);
|
background var(--primary-color)
|
||||||
box-shadow: 2px 2px 6px var(--shadow-color);
|
box-shadow 2px 2px 6px var(--shadow-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -57,20 +57,20 @@ $tools-item-border-radius = 1px;
|
||||||
|
|
||||||
|
|
||||||
.side-tools-list {
|
.side-tools-list {
|
||||||
opacity: 0;
|
transform translateX(100%)
|
||||||
transform: translateX(100%);
|
opacity 0
|
||||||
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear");
|
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
|
||||||
|
|
||||||
.tool-expand-width {
|
.tool-expand-width {
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
opacity: 1;
|
transform translateX(0)
|
||||||
transform: translateX(0);
|
opacity 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -79,35 +79,32 @@ $tools-item-border-radius = 1px;
|
||||||
|
|
||||||
if (hexo-config('style.scroll.percent.enable') == true) {
|
if (hexo-config('style.scroll.percent.enable') == true) {
|
||||||
.tool-scroll-to-top {
|
.tool-scroll-to-top {
|
||||||
display: none;
|
display none
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
display: flex;
|
display flex
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
||||||
.percent {
|
.percent {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-up {
|
.arrow-up {
|
||||||
display: flex;
|
display flex
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-up {
|
.arrow-up {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
|
|
||||||
.percent {
|
.percent {
|
||||||
display: flex;
|
display flex
|
||||||
font-size: 1rem;
|
font-size 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
.tagcloud-container {
|
.tagcloud-container {
|
||||||
|
|
||||||
keep-container(false, 0, 0, 20px, 0);
|
keep-container(false, 0, 0, 20px, 0)
|
||||||
|
|
||||||
.tagcloud-content {
|
.tagcloud-content {
|
||||||
|
|
||||||
text-align: justify;
|
text-align justify
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: 10px 8px;
|
display inline-block
|
||||||
display: inline-block;
|
box-sizing border-box
|
||||||
box-sizing: border-box;
|
padding 10px 8px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,73 @@
|
||||||
.post-toc-wrap {
|
.post-toc-wrap {
|
||||||
width: 100%;
|
box-sizing border-box
|
||||||
font-size: 0.92rem;
|
width 100%
|
||||||
box-sizing: border-box;
|
font-size 0.92rem
|
||||||
|
|
||||||
.post-toc {
|
.post-toc {
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
list-style: none;
|
margin 0
|
||||||
margin: 0;
|
padding 0 2px 12px 10px
|
||||||
padding: 0 2px 12px 10px;
|
text-align left
|
||||||
text-align: left;
|
list-style none
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-bottom: 0;
|
padding-bottom 0
|
||||||
}
|
}
|
||||||
|
|
||||||
> ol {
|
> ol {
|
||||||
padding-left: 0;
|
padding-left 0
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
transition-property: all;
|
transition-property all
|
||||||
transition();
|
transition()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
line-height: 1.8;
|
overflow hidden
|
||||||
overflow: hidden;
|
line-height 1.8
|
||||||
text-overflow: ellipsis;
|
white-space nowrap
|
||||||
white-space: nowrap;
|
text-overflow ellipsis
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
.nav-child {
|
.nav-child {
|
||||||
display: hexo-config('toc.expand_all') ? block : none;
|
display hexo-config('toc.expand_all') ? block : none
|
||||||
}
|
}
|
||||||
|
|
||||||
.active > .nav-child {
|
.active > .nav-child {
|
||||||
display: block;
|
display block
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-current > .nav-child {
|
.active-current > .nav-child {
|
||||||
display: block;
|
display block
|
||||||
|
|
||||||
> .nav-item {
|
> .nav-item {
|
||||||
display: block;
|
display block
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav-number, .nav-text {
|
.nav-number
|
||||||
color: var(--default-text-color);
|
.nav-text {
|
||||||
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.active > a {
|
.active > a {
|
||||||
.nav-number, .nav-text {
|
.nav-number
|
||||||
color: var(--primary-color);
|
.nav-text {
|
||||||
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-current > a {
|
.active-current > a {
|
||||||
.nav-number, .nav-text {
|
.nav-number
|
||||||
color: var(--primary-color);
|
.nav-text {
|
||||||
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.archive-container {
|
.archive-container {
|
||||||
keep-container(false, 0, 0, 30px, 30px);
|
keep-container(false, 0, 0, 30px, 30px)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,224 +1,218 @@
|
||||||
$avatarWidth = 46px;
|
$avatarWidth = 46px
|
||||||
$arrow-icon-width = 16px;
|
$arrow-icon-width = 16px
|
||||||
$post-nav-max-width = 220px;
|
$post-nav-max-width = 220px
|
||||||
$article-title-font-size = 1.6rem;
|
$article-title-font-size = 1.6rem
|
||||||
|
|
||||||
.article-content-container {
|
.article-content-container {
|
||||||
|
|
||||||
keep-container(false, 0, 0, 30px, 30px);
|
keep-container(false, 0, 0, 30px, 30px)
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
padding: 1.2rem 0.2rem;
|
padding 1.2rem 0.2rem
|
||||||
box-shadow: none;
|
box-shadow none
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
color: var(--second-text-color);
|
color var(--second-text-color)
|
||||||
font-weight: 600;
|
font-weight 600
|
||||||
font-size: $article-title-font-size;
|
font-size $article-title-font-size
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $article-title-font-size * 0.9;
|
font-size $article-title-font-size * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
font-size: $article-title-font-size * 0.8;
|
font-size $article-title-font-size * 0.8
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-header {
|
.article-header {
|
||||||
position: relative;
|
position relative
|
||||||
padding-left: $avatarWidth;
|
box-sizing border-box
|
||||||
width: 100%;
|
width 100%
|
||||||
height: $avatarWidth;
|
height $avatarWidth
|
||||||
box-sizing: border-box;
|
padding-left $avatarWidth
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0
|
top 0
|
||||||
left: 0;
|
left 0
|
||||||
width: $avatarWidth;
|
box-sizing border-box
|
||||||
height: $avatarWidth;
|
width $avatarWidth
|
||||||
padding: 1px;
|
height $avatarWidth
|
||||||
box-sizing: border-box;
|
padding 1px
|
||||||
border: 1px solid var(--border-color);
|
border 1px solid var(--border-color)
|
||||||
border-radius: 50%;
|
border-radius 50%
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 50%;
|
width 100%
|
||||||
width: 100%;
|
height 100%
|
||||||
height: 100%;
|
background var(--avatar-background-color)
|
||||||
background: var(--avatar-background-color);
|
border-radius 50%
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
padding: 2px 0;
|
display flex
|
||||||
margin-left: 10px;
|
flex-direction column
|
||||||
box-sizing: border-box;
|
justify-content space-between
|
||||||
display: flex;
|
box-sizing border-box
|
||||||
flex-direction: column;
|
width 100%
|
||||||
justify-content: space-between;
|
height 100%
|
||||||
width: 100%;
|
margin-left 10px
|
||||||
height: 100%;
|
padding 2px 0
|
||||||
|
|
||||||
.author {
|
.author {
|
||||||
font-weight: 600;
|
display flex
|
||||||
font-size: 1.18rem;
|
align-items center
|
||||||
display: flex;
|
font-weight 600
|
||||||
align-items: center;
|
font-size 1.18rem
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-label {
|
.author-label {
|
||||||
margin-left: 10px;
|
margin-left 10px
|
||||||
font-size: 0.8rem;
|
padding 0 5px
|
||||||
font-weight: 500;
|
color #fff
|
||||||
padding: 0 5px;
|
font-weight 500
|
||||||
border-radius: 5px;
|
font-size 0.8rem
|
||||||
color: #fff;
|
background var(--selection-color)
|
||||||
background: var(--selection-color);
|
border-radius 5px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.article-header
|
||||||
.article-header, .article-header-meta-info {
|
.article-header-meta-info {
|
||||||
margin-top: 16px;
|
margin-top 16px
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
transform: scale(0.9);
|
transform scale(0.9)
|
||||||
transform-origin: left top;
|
transform-origin left top
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-content {
|
.article-content {
|
||||||
margin-top: $component-spacing-value;
|
margin-top $component-spacing-value
|
||||||
padding-bottom: 10px;
|
padding-bottom 10px
|
||||||
word-wrap: break-word;
|
color var(--default-text-color)
|
||||||
border-bottom: 1px solid var(--border-color);
|
word-wrap break-word
|
||||||
color: var(--default-text-color);
|
border-bottom 1px solid var(--border-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.post-tags-box {
|
.post-tags-box {
|
||||||
display: none;
|
display none
|
||||||
margin-top: 1.6rem;
|
justify-content center
|
||||||
justify-content: center;
|
margin-top 1.6rem
|
||||||
font-size: 1.1rem;
|
font-size 1.1rem
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: flex;
|
display flex
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
margin-top: 1.2rem;
|
margin-top 1.2rem
|
||||||
font-size: 1rem;
|
font-size 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tag-item {
|
.tag-item {
|
||||||
margin: 0 0.25rem;
|
margin 0 0.25rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-copyright-info {
|
.post-copyright-info {
|
||||||
margin-top: $component-spacing-value;
|
width 100%
|
||||||
width: 100%;
|
margin-top $component-spacing-value
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
margin-top: $component-spacing-value * 0.8;
|
margin-top $component-spacing-value * 0.8
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-nav {
|
.article-nav {
|
||||||
height: 40px;
|
height 40px
|
||||||
margin-top: $component-spacing-value;
|
margin-top $component-spacing-value
|
||||||
|
|
||||||
.article-prev, .article-next {
|
.article-prev
|
||||||
max-width: $post-nav-max-width;
|
.article-next {
|
||||||
height: 100%;
|
box-sizing border-box
|
||||||
box-sizing: border-box;
|
max-width $post-nav-max-width
|
||||||
|
height 100%
|
||||||
|
|
||||||
keep-container(true, 1.03, 1.03, 10px, 0);
|
keep-container(true, 1.03, 1.03, 10px, 0)
|
||||||
|
|
||||||
a {
|
a {
|
||||||
position: relative;
|
position relative
|
||||||
display: block;
|
display block
|
||||||
width: 100%;
|
box-sizing border-box
|
||||||
height: 100%;
|
width 100%
|
||||||
box-sizing: border-box;
|
height 100%
|
||||||
|
|
||||||
&.prev {
|
&.prev {
|
||||||
padding-left: $arrow-icon-width;
|
padding-left $arrow-icon-width
|
||||||
}
|
}
|
||||||
|
|
||||||
&.next {
|
&.next {
|
||||||
padding-right: $arrow-icon-width;
|
padding-right $arrow-icon-width
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-icon {
|
.arrow-icon {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 0;
|
top 0
|
||||||
height: 100%;
|
width $arrow-icon-width
|
||||||
width: $arrow-icon-width;
|
height 100%
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
left: 0;
|
left 0
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
right: 0;
|
right 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width 100%
|
||||||
height: 100%;
|
height 100%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-prev {
|
.article-prev {
|
||||||
float: left;
|
float left
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-next {
|
.article-next {
|
||||||
float: right;
|
float right
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-nav-item {
|
.post-nav-item {
|
||||||
display: none;
|
display none
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: inline-block;
|
display inline-block
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.post-nav-title-item {
|
.post-nav-title-item {
|
||||||
overflow: hidden;
|
overflow hidden
|
||||||
text-overflow: ellipsis;
|
white-space nowrap
|
||||||
white-space: nowrap;
|
text-overflow ellipsis
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
$category-name-font-size = 1.6rem;
|
$category-name-font-size = 1.6rem
|
||||||
|
|
||||||
.category-container {
|
.category-container {
|
||||||
|
|
||||||
keep-container(false, 0, 0, 30px, 30px);
|
keep-container(false, 0, 0, 30px, 30px)
|
||||||
|
|
||||||
.category-name {
|
.category-name {
|
||||||
color: var(--second-text-color);
|
margin-bottom $component-spacing-value
|
||||||
font-size: $category-name-font-size;
|
padding-bottom 20px
|
||||||
|
color var(--second-text-color)
|
||||||
|
|
||||||
|
font-weight 600
|
||||||
|
font-size $category-name-font-size
|
||||||
|
border-bottom 1px solid var(--border-color)
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--second-text-color);
|
color var(--second-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $category-name-font-size * 0.9;
|
font-size $category-name-font-size * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
font-size: $category-name-font-size * 0.8;
|
font-size $category-name-font-size * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
font-weight: 600;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
margin-bottom: $component-spacing-value;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,53 @@
|
||||||
.category-list-container {
|
.category-list-container {
|
||||||
|
|
||||||
keep-container(false, 0, 0, 30px, 0);
|
keep-container(false, 0, 0, 30px, 0)
|
||||||
|
|
||||||
.category-list-content {
|
.category-list-content {
|
||||||
|
|
||||||
.all-category-list {
|
.all-category-list {
|
||||||
|
|
||||||
li.all-category-list-item {
|
li.all-category-list-item {
|
||||||
font-size: 1rem;
|
margin-bottom 15px
|
||||||
margin-bottom: 15px;
|
font-size 1rem
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom 0
|
||||||
}
|
}
|
||||||
|
|
||||||
span.all-category-list-count {
|
span.all-category-list-count {
|
||||||
float: right;
|
float right
|
||||||
color: var(--default-text-color);
|
color var(--default-text-color)
|
||||||
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '[';
|
content '['
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: ']';
|
content ']'
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ul.all-category-list-child {
|
ul.all-category-list-child {
|
||||||
|
margin-top 15px
|
||||||
|
|
||||||
margin-left: 10px;
|
margin-left 10px
|
||||||
margin-top: 15px;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '- ';
|
content '- '
|
||||||
}
|
}
|
||||||
|
|
||||||
margin-bottom: 10px;
|
margin-bottom 10px
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom 0
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,114 +1,111 @@
|
||||||
.home-content-container {
|
.home-content-container {
|
||||||
background: var(--background-color);
|
background var(--background-color)
|
||||||
|
|
||||||
|
|
||||||
.home-article-list {
|
.home-article-list {
|
||||||
|
|
||||||
.home-article-item {
|
.home-article-item {
|
||||||
position: relative;
|
position relative
|
||||||
|
|
||||||
keep-container(true, 1.015, 1.015, 28px, 38px);
|
keep-container(true, 1.015, 1.015, 28px, 38px)
|
||||||
|
|
||||||
.top-icon {
|
.top-icon {
|
||||||
position: absolute;
|
position absolute
|
||||||
top: 10px;
|
top 10px
|
||||||
right: 12px;
|
right 12px
|
||||||
font-size: 1.2rem;
|
color var(--third-text-color)
|
||||||
transform: rotate(45deg);
|
font-size 1.2rem
|
||||||
color: var(--third-text-color);
|
transform rotate(45deg)
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.16rem;
|
font-size 1.16rem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.home-article-title {
|
.home-article-title {
|
||||||
position: relative;
|
position relative
|
||||||
font-weight: 600;
|
margin 0
|
||||||
font-size: 1.4rem;
|
color var(--second-text-color)
|
||||||
line-height: 1.5;
|
font-weight 600
|
||||||
color: var(--second-text-color);
|
font-size 1.4rem
|
||||||
|
line-height 1.5
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: 1.3rem;
|
font-size 1.3rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
font-size: 1.2rem;
|
font-size 1.2rem
|
||||||
}
|
}
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.home-article-content {
|
.home-article-content {
|
||||||
word-wrap: break-word;
|
margin 20px 0
|
||||||
text-align: justify;
|
color var(--default-text-color)
|
||||||
margin: 20px 0;
|
text-align justify
|
||||||
color: var(--default-text-color);
|
word-wrap break-word
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.home-article-meta-info-container {
|
.home-article-meta-info-container {
|
||||||
display: flex;
|
display flex
|
||||||
justify-content: space-between;
|
align-items center
|
||||||
align-items: center;
|
justify-content space-between
|
||||||
font-size: 0.92rem;
|
color var(--third-text-color)
|
||||||
color: var(--third-text-color);
|
font-size 0.92rem
|
||||||
|
|
||||||
|
|
||||||
.home-article-meta-info {
|
.home-article-meta-info {
|
||||||
letter-spacing: 0.5px;
|
letter-spacing 0.5px
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-right: 10px;
|
margin-right 10px
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right 0
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, li {
|
ul
|
||||||
display: inline;
|
li {
|
||||||
|
display inline
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-article-category {
|
.home-article-category {
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-article-tag {
|
.home-article-tag {
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
display: none;
|
display none
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: none;
|
flex 1
|
||||||
flex: 1;
|
height 1px
|
||||||
height: 1px;
|
margin 0 10px
|
||||||
background: var(--border-color);
|
background var(--border-color)
|
||||||
margin: 0 10px;
|
border none
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--third-text-color);
|
color var(--third-text-color)
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary-color)
|
color var(--primary-color)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,200 +1,198 @@
|
||||||
$temp-width = hexo-config('style.left_side_width');
|
$temp-width = hexo-config('style.left_side_width')
|
||||||
$page-aside-width = $temp-width ? convert($temp-width) : 260px;
|
$page-aside-width = $temp-width ? convert($temp-width) : 260px
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
position: relative;
|
position relative
|
||||||
box-sizing: border-box;
|
box-sizing border-box
|
||||||
width: 100%;
|
width 100%
|
||||||
height: auto;
|
height auto
|
||||||
background: var(--background-color);
|
background var(--background-color)
|
||||||
transition-t("padding-left", "0", "0.3", "ease-out");
|
transition-t("padding-left", "0", "0.3", "ease-out")
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding-left: 0 !important;
|
padding-left 0 !important
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-main-content {
|
.page-main-content {
|
||||||
padding-top: $header-height;
|
position relative
|
||||||
position: relative;
|
padding-top $header-height
|
||||||
|
|
||||||
&.home {
|
&.home {
|
||||||
.transparent-1 {
|
.transparent-1 {
|
||||||
background: var(--header-transparent-background-1);
|
background var(--header-transparent-background-1)
|
||||||
}
|
}
|
||||||
|
|
||||||
.transparent-2 {
|
.transparent-2 {
|
||||||
background: var(--header-transparent-background-2);
|
background var(--header-transparent-background-2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-shrink & {
|
.header-shrink & {
|
||||||
padding-top: $header-shrink-height;
|
padding-top $header-shrink-height
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding-top: $header-shrink-height * 0.9;
|
padding-top $header-shrink-height * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
padding-top: $header-shrink-height * 0.8;
|
padding-top $header-shrink-height * 0.8
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding-top: $header-height * 0.9;
|
padding-top $header-height * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
padding-top: $header-height * 0.8;
|
padding-top $header-height * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-main-content-top {
|
.page-main-content-top {
|
||||||
position: fixed;
|
position fixed
|
||||||
top: 0;
|
top 0
|
||||||
right: 0;
|
right 0
|
||||||
width: 100%;
|
z-index $z-index-5
|
||||||
height: $header-height;
|
box-sizing border-box
|
||||||
z-index: $z-index-5;
|
width 100%
|
||||||
box-sizing: border-box;
|
height $header-height
|
||||||
transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease");
|
transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
|
||||||
|
|
||||||
&.hide {
|
&.hide {
|
||||||
transform: translateY(-105%);
|
transform translateY(-105%)
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-shrink & {
|
.header-shrink & {
|
||||||
height: $header-shrink-height;
|
height $header-shrink-height
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
height: $header-shrink-height * 0.9;
|
height $header-shrink-height * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
height: $header-shrink-height * 0.8;
|
height $header-shrink-height * 0.8
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
height: $header-height * 0.9;
|
height $header-height * 0.9
|
||||||
padding-left: 0 !important;
|
padding-left 0 !important
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
height: $header-height * 0.8;
|
height $header-height * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-main-content-middle {
|
.page-main-content-middle {
|
||||||
box-sizing: border-box;
|
display flex
|
||||||
width: 100%;
|
justify-content center
|
||||||
display: flex;
|
box-sizing border-box
|
||||||
justify-content: center;
|
width 100%
|
||||||
padding: $component-spacing-value 0;
|
padding $component-spacing-value 0
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
padding: $component-spacing-value * 0.8 0;
|
padding $component-spacing-value * 0.8 0
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
padding: $component-spacing-value * 0.6 0;
|
padding $component-spacing-value * 0.6 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
position: relative;
|
position relative
|
||||||
box-sizing: border-box;
|
box-sizing border-box
|
||||||
width: $main-content-width;
|
width $main-content-width
|
||||||
max-width: $content-max-width;
|
max-width $content-max-width
|
||||||
height: 100%;
|
height 100%
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
width: $main-content-width-tablet;
|
width $main-content-width-tablet
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
width: $main-content-width-mobile;
|
width $main-content-width-mobile
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-main-content-bottom {
|
.page-main-content-bottom {
|
||||||
width: 100%;
|
width 100%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-aside {
|
.page-aside {
|
||||||
position: fixed;
|
position fixed
|
||||||
top: 0;
|
top 0
|
||||||
bottom: 0;
|
bottom 0
|
||||||
left: - $page-aside-width;
|
left - $page-aside-width
|
||||||
width: $page-aside-width;
|
z-index $z-index-6
|
||||||
height: 100%;
|
box-sizing border-box
|
||||||
z-index: $z-index-6;
|
width $page-aside-width
|
||||||
overflow-y: auto;
|
height 100%
|
||||||
padding: 20px;
|
padding 20px
|
||||||
box-sizing: border-box;
|
overflow-y auto
|
||||||
background: var(--background-color);
|
background var(--background-color)
|
||||||
|
|
||||||
hover-style(false, 0, 0);
|
hover-style(false, 0, 0)
|
||||||
|
|
||||||
transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear");
|
transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear")
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
left: 0 !important;
|
left 0 !important
|
||||||
display: none !important;
|
display none !important
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.post-tools {
|
.post-tools {
|
||||||
position: fixed;
|
position fixed
|
||||||
top: $header-height + $component-spacing-value;
|
top $header-height + $component-spacing-value
|
||||||
right: $component-spacing-value;
|
right $component-spacing-value
|
||||||
transition-t("top", "0", "0.2", "ease");
|
transition-t("top", "0", "0.2", "ease")
|
||||||
|
|
||||||
.header-shrink & {
|
.header-shrink & {
|
||||||
top: $header-shrink-height + $component-spacing-value;
|
top $header-shrink-height + $component-spacing-value
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
top: $header-shrink-height * 0.9 + $component-spacing-value;
|
top $header-shrink-height * 0.9 + $component-spacing-value
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
top: $header-shrink-height * 0.8 + $component-spacing-value;
|
top $header-shrink-height * 0.8 + $component-spacing-value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
top: $header-height * 0.9 + $component-spacing-value;
|
top $header-height * 0.9 + $component-spacing-value
|
||||||
right: 10px;
|
right 10px
|
||||||
transform: scale(0.82);
|
transform scale(0.82)
|
||||||
transform-origin: right top;
|
transform-origin right top
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
top: $header-height * 0.8 + $component-spacing-value;
|
top $header-height * 0.8 + $component-spacing-value
|
||||||
right: 5px;
|
right 5px
|
||||||
transform: scale(0.72);
|
transform scale(0.72)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.right-bottom-side-tools {
|
.right-bottom-side-tools {
|
||||||
position: fixed;
|
position fixed
|
||||||
bottom: 5%;
|
right 0
|
||||||
right: 0;
|
bottom 5%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
$tag-name-font-size = 1.6rem;
|
$tag-name-font-size = 1.6rem
|
||||||
|
|
||||||
.tag-container {
|
.tag-container {
|
||||||
|
|
||||||
keep-container(false, 0, 0, 30px, 30px);
|
keep-container(false, 0, 0, 30px, 30px)
|
||||||
|
|
||||||
.tag-name {
|
.tag-name {
|
||||||
color: var(--second-text-color);
|
margin-bottom $component-spacing-value
|
||||||
font-size: $tag-name-font-size;
|
padding-bottom 20px
|
||||||
|
color var(--second-text-color)
|
||||||
|
|
||||||
|
font-weight 600
|
||||||
|
font-size $tag-name-font-size
|
||||||
|
border-bottom 1px solid var(--border-color)
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--second-text-color);
|
color var(--second-text-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-tablet() {
|
+keep-tablet() {
|
||||||
font-size: $tag-name-font-size * 0.9;
|
font-size $tag-name-font-size * 0.9
|
||||||
}
|
}
|
||||||
|
|
||||||
+keep-mobile() {
|
+keep-mobile() {
|
||||||
font-size: $tag-name-font-size * 0.8;
|
font-size $tag-name-font-size * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
font-weight: 600;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
margin-bottom: $component-spacing-value;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue