alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Modify some Hugo syntax & use CSS style replace HTML DOM style.

Browse Source
This commit is contained in:
凡梦星尘
2022-06-05 21:35:40 +08:00
parent 3b81f46c4e
commit 531e65da7f
10 changed files with 121 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
assets/css/_common/scaffolding/comments.scss
View File

@@ -39,9 +39,10 @@
}
.post-comments {
@if $scheme != 'Gemini' {
@if $scheme !='Gemini' {
margin-top: 60px;
}
overflow: hidden;
.comment-head {
@@ -54,54 +55,101 @@
font-size: 1.4em;
}
.comment-switch {
display: inline-block;
float: right;
margin: 2px auto;
padding: 4px 16px;
width: max-content;
border-radius: 8px;
background: #eee;
.switch-btn {
position: relative;
@if $two_comments_enable {
.comment-switch {
display: inline-block;
margin: -4px 8px 0;
width: 42px;
height: 22px;
border-radius: 34px;
vertical-align: middle;
cursor: pointer;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s;
float: right;
margin: 2px auto;
padding: 4px 16px;
width: max-content;
border-radius: 8px;
background: #eee;
&:before {
position: absolute;
bottom: 4px;
left: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
content: '';
background-color: #fff;
.first-comment {
color: $first_comment_color;
@if $two_comments_actived==$first_comment_name {
font-weight: bold;
}
}
.second-comment {
color: $second_comment_color;
@if $two_comments_actived==$second_comment_name {
font-weight: bold;
}
}
$switch_btn_bg_color: $first_comment_color;
.switch-btn {
position: relative;
display: inline-block;
margin: -4px 8px 0;
width: 42px;
height: 22px;
border-radius: 34px;
vertical-align: middle;
cursor: pointer;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s
}
transition: .4s;
&.move:before {
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
@if $two_comments_actived==$second_comment_name {
$switch_btn_bg_color: $second_comment_color;
}
background-color: $switch_btn_bg_color;
&:before {
position: absolute;
bottom: 4px;
left: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
content: '';
background-color: #fff;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-ms-transition: .4s;
transition: .4s
}
&.move:before {
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
}
}
}
}
@if $two_comments_enable {
$first_comment_display: none;
$second_comment_display: none;
@if $two_comments_actived==$first_comment_name {
$first_comment_display: block;
}
@if $two_comments_actived==$second_comment_name {
$second_comment_display: block;
}
.comment-wrap>div:nth-child(1) {
display: $first_comment_display;
}
.comment-wrap>div:nth-child(2) {
display: $second_comment_display;
}
}
}