Bilibili-Evolved/registry/lib/components/style/simplify/comments/comments.scss
2022-11-05 07:45:34 +08:00

523 lines
11 KiB
SCSS

@import 'common';
@mixin mdi($content) {
background: none !important;
color: #000;
body.dark & {
color: #eee;
}
&::before {
content: $content;
display: inline-block;
font: normal normal normal 24px/1 'Material Design Icons';
font-size: 16px;
line-height: 1;
width: 16px;
height: 16px;
}
}
@mixin orders {
display: flex;
align-items: center;
.floor {
opacity: 0.7;
order: 1;
}
.reply {
order: 2;
}
.reply-tags {
order: 3;
display: flex !important;
margin: 0 !important;
span {
margin: 0 4px 0 0 !important;
font-size: 12px !important;
line-height: normal !important;
display: flex !important;
height: auto !important;
padding: 2px 6px !important;
}
}
.operation {
order: 4;
flex-grow: 1;
display: flex !important;
justify-content: flex-end;
margin: 0 !important;
padding: 3px !important;
}
}
@mixin time {
position: absolute;
right: 8px;
top: 24px;
margin: 0 !important;
opacity: 0.5;
line-height: normal;
color: black;
}
@mixin reply-time {
position: absolute;
right: 8px;
top: 0px;
margin: 0;
opacity: 0.5;
line-height: normal;
color: black;
}
@mixin hide {
display: none !important;
}
@mixin transition {
transition: all 0.2s ease-out;
}
@mixin icon {
height: 16px !important;
width: 16px !important;
background-position: center !important;
opacity: 0.4;
display: inline-flex !important;
}
@mixin like-icon {
@include mdi('\F0514');
}
@mixin liked-icon {
@include mdi('\F0513');
&,
& + span,
body.dark & {
color: var(--theme-color) !important;
}
}
@mixin hate-icon {
@include mdi('\F0512');
}
@mixin hated-icon {
@include mdi('\F0511');
&,
& + span,
body.dark & {
color: var(--theme-color) !important;
}
}
@mixin spot-icon {
@include mdi('\F01D9');
}
@mixin face-icon {
@include mdi('\F01F5');
}
@mixin invert-on-dark {
body.dark & {
filter: brightness(0) invert(1) !important;
}
}
@mixin white-text-on-dark {
color: black;
body.dark & {
color: #eee !important;
}
}
@mixin emoji-position-fix {
.comment-send:not(.no-login) {
position: relative !important;
}
.comment-send-lite:not(.no-login),
.comment-send:not(.no-login) {
padding-top: 15px !important;
.dynamic-repost {
margin-left: 81px !important;
margin-top: 4px;
}
.comment-emoji {
position: absolute !important;
right: 0;
top: 51px;
width: 68px !important;
background: #fff;
box-sizing: content-box !important;
}
.comment-submit {
height: 34px !important;
font-size: 0;
body.dark {
color: var(--theme-color) !important;
}
&::after {
content: '发表';
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
body.dark & {
color: var(--foreground-color);
}
}
}
}
}
.bb-comment {
// 兼容 b 站的 lite 版发评论(2021-04-20全量), 细节做的是真烂
.comment-send-lite {
position: -webkit-sticky !important;
position: sticky !important;
bottom: 0 !important;
background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)) !important;
pointer-events: none;
width: calc(100% + 12px) !important;
margin: 0 0 0 -12px !important;
padding-left: 97px !important;
body.dark & {
background: linear-gradient(to top, #222, rgba(255, 255, 255, 0)) !important;
}
.comment-emoji-lite {
background-color: #fff;
}
.comment-submit {
height: 64px !important;
padding: 4px 15px !important;
position: relative !important;
right: 0 !important;
margin-left: 10px !important;
}
.textarea-container {
.baffle {
line-height: 65px !important;
}
.baffle,
.ipt-txt {
height: 65px !important;
width: calc(100% - 80px) !important;
}
}
> * {
pointer-events: initial;
}
}
.loading-state {
font-size: 14px !important;
height: 1.4em !important;
line-height: 1.4 !important;
margin: 12px 0 !important;
// #1789
// &:empty {
// margin: 0 !important;
// }
}
.loading-state + .bottom-page {
margin: 0 !important;
}
.nameplate,
.comment-header .tabs-order li.on::after,
.true-love,
.medal,
.medal-level,
.reply-notice,
.sailing,
.perfect-reply {
@include hide();
}
.comment-send-lite .comment-emoji,
.comment-send .comment-emoji {
box-shadow: none !important;
span {
opacity: 0.4;
color: black;
}
.face {
@include transition();
@include icon();
@include face-icon();
}
.text {
@include transition();
@include invert-on-dark();
}
&.open,
&:hover {
span,
.face {
opacity: 1;
}
}
}
.comment-list {
.list-item {
position: relative;
.info {
margin-top: 0 !important;
@include orders();
> * {
@include h-center();
}
.like,
.hate {
i {
@include transition();
@include icon();
// @include invert-on-dark();
}
span {
opacity: 0.4;
@include transition();
@include white-text-on-dark();
}
// &.liked,
// &.hated {
// > i {
// @include invert-on-dark();
// }
// }
&.liked,
&.hated,
&:hover {
> * {
opacity: 1;
}
}
}
.like {
i {
@include like-icon();
}
&.liked,
&.liked:hover {
i {
@include liked-icon();
}
}
}
.hate {
i {
@include hate-icon();
}
&.hated,
&.hated:hover {
i {
@include hated-icon();
}
}
}
.operation {
&:hover {
background: transparent !important;
}
.spot {
@include transition();
@include icon();
@include spot-icon();
@include invert-on-dark();
&:hover {
opacity: 1;
}
}
}
}
.text {
white-space: pre-wrap;
}
.user {
margin-right: 120px;
.level {
visibility: hidden;
width: 0;
margin: 0;
}
.text-con {
white-space: pre-wrap;
display: block;
margin: 0 !important;
}
}
.user-face .hot-follow,
.con .vote-container {
@include hide();
}
> .con {
.level-link {
@include hide();
}
> .reply-box {
transform: translateX(0%);
}
> .info {
margin-top: 4px;
> .time-location,
> .time {
@include time();
}
> .time-location,
> .time,
> .floor {
@include invert-on-dark();
}
> .plad {
@include hide();
}
}
}
}
.reply-con {
position: relative;
> .info {
> .time-location,
> .time {
@include reply-time();
@include invert-on-dark();
}
}
}
}
.reply-item {
position: relative;
> .info > .time {
// @include white-text-on-dark();
@include invert-on-dark();
}
}
.reply-notice .notice-item {
background-color: #0001 !important;
border: none !important;
display: flex !important;
align-items: center;
padding: 10px 14px !important;
body.dark & {
background-color: #333 !important;
}
.icon-notice {
order: 0;
position: static !important;
margin-right: 12px;
background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>') !important;
}
a {
order: 1;
flex-grow: 1;
color: black !important;
body.dark & {
color: #eee !important;
}
}
.icon-close-notice {
order: 2;
position: static !important;
background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 24 24"><path fill="black" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>') !important;
}
.icon-close-notice,
.icon-notice {
height: 18px;
width: 18px;
background-position: center !important;
opacity: 0.4;
}
}
@include emoji-position-fix();
}
body.dark .panel-area .bb-comment {
.comment-send-lite {
background: linear-gradient(to top, #444 30%, transparent) !important;
}
}
.dynamic-list-item-wrap {
.info .plat {
@include hide();
}
.reply-box {
.time-location,
.time {
@include reply-time();
top: 10px;
}
}
.reply-item {
> .info {
@include orders();
}
}
}
.reply-item > .info {
> .time-location,
> .time {
@include time();
@include invert-on-dark();
top: 12px;
}
}
.reply-box .item-user {
> a {
margin-right: 8px;
}
.text {
display: block;
}
}
.comment-area .dynamic-level {
@include hide();
}
.dynamic-like,
.dynamic-hate {
i {
@include transition();
// @include invert-on-dark();
}
}
.dynamic-like {
i {
@include like-icon();
}
&:hover i {
// @include invert-on-dark();
@include liked-icon();
}
}
.dynamic-liked {
&:hover i,
i {
// @include invert-on-dark();
@include liked-icon();
}
}
.dynamic-hate {
i {
@include hate-icon();
}
&:hover i {
// @include invert-on-dark();
@include hated-icon();
}
}
.dynamic-hated {
&:hover i,
i {
// @include invert-on-dark();
@include hated-icon();
}
}
.dynamic-spot {
@include spot-icon();
@include invert-on-dark();
}
.textarea-container .comm-tool .comm-emoji .icon-face {
@include face-icon();
@include invert-on-dark();
}
.dynamic-spot,
.textarea-container .comm-tool .comm-emoji .icon-face {
@include icon();
}
.comment-list .opera-list {
right: 20px !important;
top: -72px !important;
}
.v-wrap #comment {
z-index: 21 !important;
}
.l-con .tag-channel-pane {
z-index: 22 !important;
}