170 lines
3.6 KiB
SCSS
170 lines
3.6 KiB
SCSS
.comments {
|
|
margin-top: 60px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.comment-button-group {
|
|
display: flex;
|
|
flex-wrap: wrap-reverse;
|
|
justify-content: center;
|
|
margin: 1em 0;
|
|
|
|
.comment-button {
|
|
margin: .1em .2em;
|
|
|
|
&.active {
|
|
background: var(--btn-default-hover-bg);
|
|
border-color: var(--btn-default-hover-border-color);
|
|
color: var(--btn-default-hover-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment-position {
|
|
display: none;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.tabs-comment {
|
|
margin-top: 4em;
|
|
padding-top: 0;
|
|
|
|
.comments {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.post-comments {
|
|
@if $scheme !='Gemini' {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
overflow: hidden;
|
|
|
|
.comment-head {
|
|
margin-bottom: 20px;
|
|
|
|
.comment-headline {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-weight: 700;
|
|
font-size: 1.4em;
|
|
@include mobile-small() {
|
|
font-size: $font-size-smaller;
|
|
}
|
|
}
|
|
|
|
@if $two_comments_enable {
|
|
.comment-switch {
|
|
display: inline-block;
|
|
float: right;
|
|
margin: 2px auto;
|
|
padding: 4px 16px;
|
|
@include mobile-small() {
|
|
font-size: $font-size-smaller;
|
|
padding: 4px;
|
|
}
|
|
width: max-content;
|
|
border-radius: 8px;
|
|
background: #eee;
|
|
|
|
.first-comment {
|
|
color: $first_comment_color;
|
|
}
|
|
|
|
.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_move_bc: $second_comment_color;
|
|
|
|
.switch-btn {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 5px;
|
|
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;
|
|
|
|
@if $two_comments_actived==$second_comment_name {
|
|
$switch_btn_bg_color: $second_comment_color;
|
|
$switch_btn_move_bc: $first_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 {
|
|
background-color: $switch_btn_move_bc;
|
|
}
|
|
|
|
&.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 .storage {
|
|
display: block;
|
|
animation: 0.5s ease 0s 1 normal none running tabshow;
|
|
}
|
|
|
|
.comment-wrap>div:nth-child(1) {
|
|
display: $first_comment_display;
|
|
}
|
|
|
|
.comment-wrap>div:nth-child(2) {
|
|
display: $second_comment_display;
|
|
}
|
|
}
|
|
} |