Ce script ne devrait pas être installé directement. C'est une librairie créée pour d'autres scripts. Elle doit être inclus avec la commande // @require https://update.greasyfork.org/scripts/512574/1464548/inject-bilibili-comment-style.js
(async function() {
// wait until document is ready
await new Promise(resolve => {
const timer = setInterval(() => {
if (document && document.createElement && document.head && document.head.appendChild) { clearInterval(timer); resolve(); }
}, 100);
});
// inject stylesheet
const styleElement = document.createElement('style');
styleElement.textContent = `
:root {
--v_xs: 5px;
--v_xsx: 4px;
--v_xxs: 6px;
--v_sm: 10px;
--v_smx: 8px;
--v_xsm: 12px;
--v_md: 15px;
--v_mdx: 14px;
--v_xmd: 16px;
--v_lg: 20px;
--v_lgx: 18px;
--v_xlg: 22px;
--v_xl: 25px;
--v_xlx: 24px;
--v_xxl: 26px;
--v_fs_1: 24px;
--v_fs_2: 18px;
--v_fs_3: 16px;
--v_fs_4: 14px;
--v_fs_5: 13px;
--v_fs_6: 12px;
--v_lh_xs: 1;
--v_lh_sm: 1.25;
--v_lh_md: 1.5;
--v_lh_lg: 1.75;
--v_lh_xl: 2;
--v_height_xs: 16px;
--v_height_sm: 24px;
--v_height_md: 32px;
--v_height_lg: 40px;
--v_height_xl: 48px;
--v_radius: 6px;
--v_radius_sm: 4px;
--v_radius_md: 8px;
--v_radius_lg: 10px;
--v_brand_pink: var(--brand_pink, #FF6699);
--v_brand_pink_thin: var(--brand_pink_thin, #FFECF1);
--v_brand_blue: var(--brand_blue, #00AEEC);
--v_brand_blue_thin: var(--brand_blue_thin, #DFF6FD);
--v_stress_red: var(--stress_red, #F85A54);
--v_stress_red_thin: var(--stress_red_thin, #FEECEA);
--v_success_green: var(--success_green, #2AC864);
--v_success_green_thin: var(--success_green_thin, #E4F8EA);
--v_operate_orange: var(--operate_orange, #FF7F24);
--v_operate_orange_thin: var(--operate_orange_thin, #FFF0E3);
--v_pay_yellow: var(--pay_yellow, #FFB027);
--v_pay_yellow_thin: var(--pay_yellow_thin, #FFF6E4);
--v_bg1: var(--bg1, #FFFFFF);
--v_bg2: var(--bg2, #F6F7F8);
--v_bg3: var(--bg3, #F1F2F3);
--v_bg1_float: var(--bg1_float, #FFFFFF);
--v_bg2_float: var(--bg2_float, #F1F2F3);
--v_text_white: var(--text_white, #FFFFFF);
--v_text1: var(--text1, #18191C);
--v_text2: var(--text2, #61666D);
--v_text3: var(--text3, #9499A0);
--v_text4: var(--text4, #C9CCD0);
--v_text_link: var(--text_link, #008AC5);
--v_text_notice: var(--text_notice, #E58900);
--v_line_light: var(--line_light, #F1F2F3);
--v_line_regular: var(--line_regular, #E3E5E7);
--v_line_bold: var(--line_bold, #C9CCD0);
--v_graph_white: var(--graph_white, #FFFFFF);
--v_graph_bg_thin: var(--graph_bg_thin, #F6F7F8);
--v_graph_bg_regular: var(--graph_bg_regular, #F1F2F3);
--v_graph_bg_thick: var(--graph_bg_thick, #E3E5E7);
--v_graph_weak: var(--graph_weak, #C9CCD0);
--v_graph_medium: var(--graph_medium, #9499A0);
--v_graph_icon: var(--graph_icon, #61666D);
--v_shadow: var(--shadow, #000000);
--v_brand_pink_hover: var(--brand_pink_hover, #FF8CB0);
--v_brand_pink_active: var(--brand_pink_active, #E84B85);
--v_brand_pink_disabled: var(--brand_pink_disabled, #FFB3CA);
--v_brand_blue_hover: var(--brand_blue_hover, #40C5F1);
--v_brand_blue_active: var(--brand_blue_active, #008AC5);
--v_brand_blue_disabled: var(--brand_blue_disabled, #80DAF6);
--v_stress_red_hover: var(--stress_red_hover, #FA857F);
--v_stress_red_active: var(--stress_red_active, #E23D3D);
--v_stress_red_disabled: var(--stress_red_disabled, #FCAFAA);
--v_text_hover: var(--text_hover, #797F87);
--v_text_active: var(--text_active, #61666D);
--v_text_disabled: var(--text_disabled, #C9CCD0);
--v_line_border: var(--line_border, #C9CCD0);
--v_line_bolder_hover: var(--line_bolder_hover, #E3E5E7);
--v_line_bolder_active: var(--line_bolder_active, #AEB3B9);
--v_line_bolder_disabled: var(--line_bolder_disabled, #F1F2F3)
}
@font-face {
font-family: fanscard;
src: url(//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf)
}
.svg-icon {
display: inline-flex;
justify-content: center;
align-items: center
}
.svg-icon svg {
width: 100%;
height: 100%
}
.svg-icon.use-color svg path {
fill: currentColor;
color: inherit
}
.top-vote-card {
background-color: var(--graph_bg_thin);
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
width: 100%;
margin-bottom: 24px;
padding: 12px 16px 12px 10px;
border-radius: 6px
}
.top-vote-card__multi {
cursor: pointer
}
.top-vote-card__multi:hover .vote-result-text {
color: var(--brand_blue);
transition: .2s
}
.top-vote-card-left {
width: 40%;
max-width: calc(40% - 30px);
margin-right: 20px;
word-wrap: break-word;
font-size: 13px;
line-height: 18px;
color: var(--text1)
}
.top-vote-card-left__title {
display: flex;
align-items: center
}
.top-vote-card-left__title svg {
margin-right: 2px;
flex: none
}
.top-vote-card-left__title span {
display: -webkit-box;
float: none;
height: 18px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
.top-vote-card-left__join {
height: 17px;
display: flex;
align-items: center;
margin-top: 4px;
font-size: 12px;
color: var(--text3)
}
.top-vote-card-left__join .vote-icon {
height: 12px
}
.top-vote-card-left__join span {
display: flex;
align-items: center
}
.top-vote-card-right {
width: 60%;
font-size: var(--2fde2a28);
line-height: 17px;
display: flex;
--option-height: 40px;
--option-radius: 6px
}
.top-vote-card-right .vote-text__not-vote {
opacity: .9
}
.top-vote-card-right .vote-text__not-vote .vui_ellipsis {
font-weight: 400 !important
}
.top-vote-card-right .vote-text :first-child {
font-weight: 500
}
.top-vote-card-right .vote-icon {
flex: none
}
.top-vote-card-right .left-vote-option {
position: relative;
display: flex;
min-width: 120px;
align-items: center;
justify-content: space-between;
background-color: rgba(255, 102, 153, var(--212267a6));
height: var(--option-height);
width: var(--38c5ebb3);
padding-left: 10px;
border-radius: var(--option-radius) 0 0 var(--option-radius);
cursor: pointer;
margin-right: 30px;
color: var(--332a347e);
transition: width ease-out .2s
}
.top-vote-card-right .left-vote-option .skew-vote-option {
position: absolute;
right: -20px;
top: 0
}
.top-vote-card-right .left-vote-option .skew-vote-option__fill {
left: -8px;
background-color: #f69;
transform: skew(21deg);
border-top-right-radius: calc(var(--option-radius) - 2px);
border-bottom-right-radius: var(--option-radius)
}
.top-vote-card-right .skew-vote-option {
height: 40px;
width: 20px;
overflow: hidden;
opacity: var(--212267a6);
pointer-events: none
}
.top-vote-card-right .skew-vote-option__fill {
pointer-events: all;
position: absolute;
top: 0;
width: 100%;
height: 100%
}
.top-vote-card-right .right-vote-option {
position: relative;
display: flex;
min-width: 120px;
align-items: center;
flex-direction: row-reverse;
justify-content: space-between;
background-color: rgba(0, 174, 236, var(--212267a6));
height: var(--option-height);
width: var(--4b2970aa);
padding-right: 10px;
border-radius: 0 var(--option-radius) var(--option-radius) 0;
cursor: pointer;
color: var(--1e587827);
transition: width ease-out .2s
}
.top-vote-card-right .right-vote-option .skew-vote-option {
position: absolute;
left: -20px;
top: 0
}
.top-vote-card-right .right-vote-option .skew-vote-option__fill {
left: 8px;
background-color: #00aeec;
transform: skew(21deg);
border-top-left-radius: var(--option-radius);
border-bottom-left-radius: calc(var(--option-radius) - 2px)
}
.top-vote-card-right .right-vote-option .vote-text {
text-align: right
}
.top-vote-card-right .had_voted {
cursor: unset
}
.reply-header .reply-notice {
display: flex;
align-items: center;
position: relative;
min-height: 40px;
padding: 4px 10px;
margin-bottom: 16px;
font-size: 13px;
border-radius: 2px;
color: var(--Ye5_u);
cursor: pointer
}
.reply-header .reply-notice:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--Ye5_u);
opacity: .2
}
.reply-header .reply-notice .notice-icon {
width: 16px;
height: 16px;
margin-right: 5px
}
.reply-header .reply-notice .notice-content {
flex: 1;
padding: 0 5px;
vertical-align: top;
word-wrap: break-word;
word-break: break-all
}
.reply-header .reply-notice .notice-close-icon {
position: relative;
z-index: 1;
width: 10px;
height: 10px;
margin-left: 5px
}
.reply-header .reply-navigation {
margin-bottom: 22px
}
.reply-header .reply-navigation .nav-bar {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0
}
.reply-header .reply-navigation .nav-bar .nav-title {
display: flex;
align-items: center
}
@media screen and (max-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-title {
font-size: 20px
}
}
@media screen and (min-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-title {
font-size: 24px
}
}
.reply-header .reply-navigation .nav-bar .nav-title .nav-title-text {
color: var(--text1);
font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
font-weight: 500
}
@media (-webkit-max-device-pixel-ratio: 1) {
.reply-header .reply-navigation .nav-bar .nav-title .nav-title-text {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
}
}
.reply-header .reply-navigation .nav-bar .nav-title .total-reply {
margin: 0 36px 0 6px;
font-weight: 400;
color: var(--text3)
}
@media screen and (max-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-title .total-reply {
font-size: 13px
}
}
@media screen and (min-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-title .total-reply {
font-size: 14px
}
}
.reply-header .reply-navigation .nav-bar .nav-select-reply {
font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
font-weight: 500;
color: var(--text1)
}
@media screen and (max-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-select-reply {
font-size: 13px
}
}
@media screen and (min-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-select-reply {
font-size: 16px
}
}
@media (-webkit-max-device-pixel-ratio: 1) {
.reply-header .reply-navigation .nav-bar .nav-select-reply {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
}
}
.reply-header .reply-navigation .nav-bar .nav-sort {
display: flex;
align-items: center;
color: var(--text3)
}
@media screen and (max-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-sort {
font-size: 13px
}
}
@media screen and (min-width: 1681px) {
.reply-header .reply-navigation .nav-bar .nav-sort {
font-size: 16px
}
}
.reply-header .reply-navigation .nav-bar .nav-sort .part-symbol {
height: 11px;
margin: 0 12px;
border-left: solid 1px
}
.reply-header .reply-navigation .nav-bar .nav-sort .hot-sort {
cursor: pointer
}
.reply-header .reply-navigation .nav-bar .nav-sort .hot-sort:hover {
color: var(--brand_blue)
}
.reply-header .reply-navigation .nav-bar .nav-sort .time-sort {
cursor: pointer
}
.reply-header .reply-navigation .nav-bar .nav-sort .time-sort:hover {
color: var(--brand_blue)
}
.reply-header .reply-navigation .nav-bar .nav-sort.hot .hot-sort,
.reply-header .reply-navigation .nav-bar .nav-sort.time .time-sort {
color: var(--text1)
}
.reply-header .reply-navigation .nav-operation-warp {
position: absolute;
right: 0
}
/*
* @bilibili/userAvatar
* version: 1.2.0-beta.2. Powered by main-frontend
* 用户头像公共组件.
* author: wuxiuran
*/
.bili-avatar {
display: block;
position: relative;
background-image: url(data:image/gif;base64,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);
-webkit-background-size: cover;
background-size: cover;
border-radius: 50%;
margin: 0;
padding: 0
}
.bili-avatar * {
margin: 0;
padding: 0
}
.bili-avatar-face {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%
}
.bili-avatar-pendent-dom {
height: 176.48%;
width: 176.48%;
position: absolute;
top: -38.33%;
left: -38.33%;
overflow: hidden
}
.bili-avatar-pendent-dom img {
height: 100%;
min-width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.bili-avatar-img {
border: none;
display: block;
-o-object-fit: cover;
object-fit: cover;
image-rendering: -webkit-optimize-contrast
}
.bili-avatar-img-radius {
border-radius: 50%
}
.bili-avatar-img[src=""],
.bili-avatar-img:not([src]) {
opacity: 0
}
.bili-avatar-img.bili-avatar-img-error {
display: none
}
.bili-avatar-right-icon {
width: 27.5%;
height: 27.5%;
position: absolute;
right: 0;
bottom: -1px;
-webkit-background-size: cover;
background-size: cover;
image-rendering: -webkit-optimize-contrast
}
.bili-avatar-nft-icon {
position: absolute;
width: 27.5%;
height: 27.5%;
right: -webkit-calc(27.5% - 1px);
right: -moz-calc(27.5% - 1px);
right: calc(27.5% - 1px);
bottom: -1px;
-webkit-background-size: cover;
background-size: cover;
image-rendering: -webkit-optimize-contrast
}
@-webkit-keyframes bili-avatar {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translateZ(0)
}
to {
-webkit-transform: translate3d(-97.5%, 0, 0);
transform: translate3d(-97.5%, 0, 0)
}
}
@-moz-keyframes bili-avatar {
0% {
-moz-transform: translate3d(0, 0, 0);
transform: translateZ(0)
}
to {
-moz-transform: translate3d(-97.5%, 0, 0);
transform: translate3d(-97.5%, 0, 0)
}
}
@keyframes bili-avatar {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translateZ(0)
}
to {
-webkit-transform: translate3d(-97.5%, 0, 0);
-moz-transform: translate3d(-97.5%, 0, 0);
transform: translate3d(-97.5%, 0, 0)
}
}
.bili-avatar .bili-avatar-size-80 {
width: 22px;
height: 22px;
bottom: -1px
}
.bili-avatar .bili-avatar-size-60,
.bili-avatar .bili-avatar-size-50,
.bili-avatar .bili-avatar-size-48 {
width: 18px;
height: 18px;
bottom: -1px
}
.bili-avatar .bili-avatar-size-40,
.bili-avatar .bili-avatar-size-36 {
width: 14px;
height: 14px;
bottom: -1px
}
.bili-avatar .bili-avatar-size-30,
.bili-avatar .bili-avatar-size-24 {
width: 12px;
height: 12px;
bottom: -1px
}
.bili-avatar .bili-avatar-size-nft-80 {
width: 22px;
height: 22px;
bottom: -1px;
right: -webkit-calc(22px - 1px);
right: -moz-calc(22px - 1px);
right: 21px
}
.bili-avatar .bili-avatar-size-nft-60,
.bili-avatar .bili-avatar-size-nft-50,
.bili-avatar .bili-avatar-size-nft-48 {
width: 18px;
height: 18px;
bottom: -1px;
right: -webkit-calc(18px - 1px);
right: -moz-calc(18px - 1px);
right: 17px
}
.bili-avatar .bili-avatar-size-nft-40,
.bili-avatar .bili-avatar-size-nft-36 {
width: 14px;
height: 14px;
bottom: -1px;
right: -webkit-calc(14px - 1px);
right: -moz-calc(14px - 1px);
right: 13px
}
.bili-avatar .bili-avatar-size-nft-30,
.bili-avatar .bili-avatar-size-nft-24 {
width: 12px;
height: 12px;
bottom: -1px;
right: -webkit-calc(12px - 1px);
right: -moz-calc(12px - 1px);
right: 11px
}
.reply-image {
width: var(--3414c33c);
height: var(--822197ea)
}
.reply-image.b-img {
background-color: inherit
}
.reply-image.b-img img {
width: 100%;
height: 100%
}
.opacity-enter-active,
.opacity-leave-active {
transition: opacity .15s ease
}
.opacity-enter-from,
.opacity-leave-to {
opacity: 0
}
.reply-box {
display: flex;
flex-direction: column
}
.reply-box .box-normal {
display: flex;
z-index: 2
}
.reply-box .box-normal .reply-box-avatar {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 48px
}
.reply-box .box-normal .reply-box-warp {
position: relative;
flex: 1;
transition: .2s;
border: 1px solid var(--line_regular);
border-radius: 6px;
background-color: var(--bg3);
overflow-x: hidden
}
.reply-box .box-normal .reply-box-warp.focus-within,
.reply-box .box-normal .reply-box-warp:hover {
border-color: var(--line_regular);
background-color: var(--bg1)
}
.reply-box .box-normal .reply-box-warp .textarea-wrap {
padding: 8px 0;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 6px;
cursor: text;
overflow: hidden
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info {
margin-left: 10px;
margin-bottom: 4px;
height: 20px;
font-size: 12px;
line-height: 17px;
display: flex;
align-items: center
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag {
flex: none;
padding: 2px 6px;
border-radius: 2px;
margin-right: 4px
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag--pink {
background-color: var(--Pi1);
color: var(--Pi5)
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag--blue {
background-color: var(--brand_blue_thin);
color: var(--brand_blue)
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag--gary {
background-color: var(--graph_bg_regular);
color: var(--text3)
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__text {
max-width: calc(100% - 68px);
color: var(--text2)
}
.reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__close {
flex: none;
margin-left: 4px;
cursor: pointer
}
.reply-box .box-normal .reply-box-warp .reply-input {
padding: 0 8px;
width: 100%;
height: 100%;
border: 1px solid var(--Ga1);
border-radius: 6px;
background-color: var(--bg3);
font-family: inherit;
line-height: 20px;
color: var(--text1);
resize: none;
outline: none;
overflow-y: scroll;
overflow-x: hidden
}
.reply-box .box-normal .reply-box-warp .reply-input.focus,
.reply-box .box-normal .reply-box-warp .reply-input:hover {
background-color: var(--bg1);
border-color: var(--graph_weak)
}
.reply-box .box-normal .reply-box-warp .reply-box-textarea {
padding: 0 8px;
width: 100%;
height: 32px;
border: none;
border-radius: 6px;
background-color: transparent;
font-family: inherit;
font-size: 14px;
line-height: 32px;
color: var(--text1);
resize: none;
outline: none
}
.reply-box .box-normal .reply-box-warp .reply-box-textarea::placeholder {
color: var(--text3)
}
.reply-box .box-normal .reply-box-warp .image-content-wrap {
background: transparent
}
.reply-box .box-expand {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 80px;
margin-top: 10px;
z-index: 1;
height: 32px;
transition: all .2s ease-in-out
}
.reply-box .box-expand.hide {
margin-top: 0;
height: 0;
overflow: hidden;
transition: all .2s ease-in-out
}
.reply-box .box-expand .box-left {
display: flex;
align-items: center
}
.reply-box .box-expand .reply-box-emoji {
width: 32px;
height: 26px;
margin-right: 6px;
position: relative
}
.reply-box .box-expand .reply-box-emoji .emoji-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border: 1px solid var(--line_regular);
border-radius: 4px;
color: var(--text3);
cursor: pointer
}
.reply-box .box-expand .at-btn {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 32px;
height: 26px;
margin-right: 6px;
border: 1px solid var(--line_regular);
border-radius: 4px;
color: var(--text3);
cursor: pointer
}
.reply-box .box-expand .image-btn {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 32px;
height: 26px;
border: 1px solid var(--line_regular);
border-radius: 4px;
color: var(--text3);
cursor: pointer
}
.reply-box .box-expand .image-btn.disabled {
opacity: .4
}
.reply-box .box-expand .image-btn .image-upload-input {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 0;
user-select: auto;
cursor: pointer
}
.reply-box .box-expand .forward-to-dynamic {
display: flex;
align-items: center;
margin-left: 16px;
font-size: 12px;
color: var(--text3)
}
.reply-box .box-expand .forward-to-dynamic .forward-input,
.reply-box .box-expand .forward-to-dynamic .forward-label {
cursor: pointer
}
.reply-box .box-expand .reply-box-send {
float: right;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 70px;
height: 32px;
border-radius: 6px;
cursor: pointer
}
.reply-box .box-expand .reply-box-send .send-text {
position: absolute;
z-index: 1;
font-size: 16px;
color: var(--text_white)
}
.reply-box .box-expand .reply-box-send:after {
content: "";
position: absolute;
opacity: .5;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: var(--brand_blue)
}
.reply-box .box-expand .reply-box-send:hover:after {
opacity: 1
}
.reply-box.box-active .box-normal .reply-box-warp .reply-box-textarea.send-active {
line-height: normal
}
.reply-box.box-active .reply-box-send.send-active:after {
opacity: 1
}
.reply-box.disabled .box-normal .reply-box-warp .disable-mask {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 6px;
font-size: 12px;
color: var(--text3);
background-color: var(--bg3)
}
.reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer
}
.reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask .login-btn {
padding: 4px 9px;
margin: 0 3px;
border-radius: 4px;
color: var(--text_white);
background-color: var(--brand_blue)
}
.reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask .login-btn:hover {
background-color: var(--Lb4);
cursor: pointer
}
.reply-box.disabled .reply-box-send .send-text {
color: var(--text3)
}
.reply-box.disabled .reply-box-send:after {
opacity: 1;
background-color: var(--bg3)
}
.reply-box.fixed-box {
position: relative;
z-index: 2;
padding: 15px 0;
border-top: .5px solid var(--graph_bg_thick);
background-color: var(--bg1)
}
.reply-content-container.fold .reply-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4
}
.reply-content-container .reply-content {
color: var(--text1);
overflow: hidden;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
line-height: 24px;
vertical-align: baseline
}
.reply-content-container .reply-content .note-prefix {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px 4px;
border-radius: 4px;
margin-right: 8px;
font-size: 12px;
color: var(--text3);
line-height: 20px;
vertical-align: bottom;
background-color: var(--bg2)
}
.reply-content-container .reply-content .note-prefix .note-icon {
width: 16px;
height: 16px
}
.reply-content-container .reply-content .top-icon {
top: -2px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
width: 30px;
height: 18px;
border: 1px solid var(--brand_pink);
border-radius: 3px;
margin-right: 5px;
font-size: 12px;
color: var(--brand_pink)
}
.reply-content-container .reply-content .emoji-small {
vertical-align: text-bottom
}
@media screen and (max-width: 1681px) {
.reply-content-container .reply-content .emoji-small {
width: 20px;
height: 20px
}
}
@media screen and (min-width: 1681px) {
.reply-content-container .reply-content .emoji-small {
width: 22px;
height: 22px
}
}
.reply-content-container .reply-content .emoji-large {
width: 50px;
height: 50px;
vertical-align: text-bottom
}
.reply-content-container .reply-content .icon {
width: 20px;
height: 20px;
vertical-align: text-top
}
@media screen and (max-width: 1681px) {
.reply-content-container .reply-content .icon {
line-height: 24px
}
}
@media screen and (min-width: 1681px) {
.reply-content-container .reply-content .icon {
line-height: 26px
}
}
.reply-content-container .reply-content .icon.search-word {
width: 12px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat
}
.reply-content-container .reply-content .jump-link {
vertical-align: baseline
}
@media screen and (max-width: 1681px) {
.reply-content-container .reply-content .jump-link {
line-height: 24px
}
}
@media screen and (min-width: 1681px) {
.reply-content-container .reply-content .jump-link {
line-height: 26px
}
}
.reply-content-container .expand-content {
color: var(--text_link);
cursor: pointer;
margin-left: 4px
}
.reply-content-container .expand-content:hover {
color: var(--brand_blue)
}
.sub-reply-item {
position: relative;
padding: 8px 0 8px 42px;
border-radius: 4px
}
@media screen and (max-width: 1681px) {
.sub-reply-item {
font-size: 15px;
line-height: 24px
}
}
@media screen and (min-width: 1681px) {
.sub-reply-item {
font-size: 16px;
line-height: 26px
}
}
.sub-reply-item.show-reply {
background-color: #dff6fb;
animation-name: enterAnimation-jumpReply-1f8a4018;
animation-duration: 2s;
animation-delay: 3s;
animation-fill-mode: forwards
}
.sub-reply-item .sub-user-info {
display: inline-flex;
align-items: center;
margin-right: 9px;
line-height: 24px;
vertical-align: baseline;
white-space: nowrap
}
.sub-reply-item .sub-user-info .sub-reply-avatar {
position: absolute;
left: 8px;
cursor: pointer
}
.sub-reply-item .sub-user-info .sub-user-name {
font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
font-weight: 500;
margin-right: 5px;
color: var(--3bab3096);
cursor: pointer
}
@media screen and (max-width: 1681px) {
.sub-reply-item .sub-user-info .sub-user-name {
font-size: 13px;
line-height: 24px
}
}
@media screen and (min-width: 1681px) {
.sub-reply-item .sub-user-info .sub-user-name {
font-size: 14px;
line-height: 26px
}
}
@media (-webkit-max-device-pixel-ratio: 1) {
.sub-reply-item .sub-user-info .sub-user-name {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
}
}
.sub-reply-item .sub-user-info .sub-user-level {
cursor: pointer
}
.sub-reply-item .sub-user-info .sub-up-icon {
cursor: default
}
.sub-reply-item .sub-reply-info {
display: flex;
align-items: center;
position: relative;
margin-top: 2px;
font-size: 13px;
color: var(--text3)
}
.sub-reply-item .sub-reply-info .sub-reply-time {
margin-right: var(--7530c1e4)
}
.sub-reply-item .sub-reply-info .sub-reply-location {
margin-right: 20px
}
.sub-reply-item .sub-reply-info .sub-reply-like {
display: flex;
align-items: center;
margin-right: 19px;
cursor: pointer
}
.sub-reply-item .sub-reply-info .sub-reply-like .sub-like-icon {
margin-right: 5px;
color: #9499a0
}
.sub-reply-item .sub-reply-info .sub-reply-like .sub-like-icon:hover,
.sub-reply-item .sub-reply-info .sub-reply-like .sub-like-icon.liked {
color: #00aeec
}
.sub-reply-item .sub-reply-info .sub-reply-dislike {
display: flex;
align-items: center;
margin-right: 19px
}
.sub-reply-item .sub-reply-info .sub-reply-dislike .sub-dislike-icon {
color: #9499a0;
cursor: pointer
}
.sub-reply-item .sub-reply-info .sub-reply-dislike .sub-dislike-icon:hover,
.sub-reply-item .sub-reply-info .sub-reply-dislike .sub-dislike-icon.disliked {
color: #00aeec
}
.sub-reply-item .sub-reply-info .sub-reply-btn {
cursor: pointer
}
.sub-reply-item .sub-reply-info .sub-reply-btn:hover {
color: var(--brand_blue)
}
.sub-reply-item .sub-reply-info .sub-reply-operation-warp {
position: absolute;
right: 40px;
opacity: 0
}
.sub-reply-item:hover .sub-reply-info .sub-reply-operation-warp {
opacity: 1
}
@keyframes enterAnimation-jumpReply-1f8a4018 {
0% {
background-color: #dff6fb
}
to {
background-color: #dff6fb00
}
}
.sub-reply-list .view-more {
padding-left: 8px;
font-size: 13px;
color: var(--text3)
}
.sub-reply-list .view-more .view-more-default .view-more-btn {
cursor: pointer
}
.sub-reply-list .view-more .view-more-default .view-more-btn:hover {
color: var(--brand_blue)
}
.sub-reply-list .view-more .view-more-pagination {
color: var(--text1)
}
.sub-reply-list .view-more .view-more-pagination .pagination-page-count {
margin-right: 10px
}
.sub-reply-list .view-more .view-more-pagination .pagination-btn {
margin: 0 4 0 14px;
cursor: pointer
}
.sub-reply-list .view-more .view-more-pagination .pagination-btn:hover {
color: var(--brand_blue)
}
.sub-reply-list .view-more .view-more-pagination .pagination-page-number {
margin: 0 4px;
cursor: pointer
}
.sub-reply-list .view-more .view-more-pagination .pagination-page-number:hover,
.sub-reply-list .view-more .view-more-pagination .pagination-page-number.current-page {
color: var(--brand_blue)
}
.sub-reply-list .view-more .view-more-pagination .pagination-page-dot {
margin: 0 4px;
cursor: default
}
.image-exhibition {
margin-top: 8px;
user-select: none
}
.image-exhibition .preview-image-container {
max-width: var(--dacbf126);
display: flex;
flex-wrap: wrap;
row-gap: var(--77b1c8ee);
column-gap: var(--0c349aa2)
}
.image-exhibition .preview-image-container .image-item-wrap {
display: flex;
justify-content: center;
position: relative;
border-radius: var(--7fefecd2);
overflow: hidden;
cursor: zoom-in
}
.image-exhibition .preview-image-container .image-item-wrap.vertical {
flex-direction: column
}
.image-exhibition .preview-image-container .image-item-wrap.extra-long {
justify-content: start
}
.image-exhibition .preview-image-container .image-item-wrap .more-image {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 4px;
bottom: 4px;
height: 20px;
padding: 0 6px;
border-radius: 4px;
font-size: 13px;
color: var(--text_white);
font-weight: 500;
line-height: 18px;
background: rgba(0, 0, 0, .7)
}
.image-exhibition .preview-image-container .client-image-item-warp:nth-child(3n+1) {
border-bottom-right-radius: 0;
border-top-right-radius: 0
}
.image-exhibition .preview-image-container .client-image-item-warp:nth-child(3n+2) {
border-radius: 0
}
.image-exhibition .preview-image-container .client-image-item-warp:nth-child(3n+3) {
border-bottom-left-radius: 0;
border-top-left-radius: 0
}
.image-exhibition .preview-image-container .client-image-item-warp:nth-last-child(1) {
border-bottom-right-radius: var(--7fefecd2);
border-top-right-radius: var(--7fefecd2)
}
.image-exhibition .preview-image-container .expand-image-item-warp:nth-child(1) {
border-radius: var(--7fefecd2) 0 0 0
}
.image-exhibition .preview-image-container .expand-image-item-warp:nth-child(3) {
border-radius: 0 var(--7fefecd2) 0 0
}
.image-exhibition .preview-image-container .expand-image-item-warp:nth-child(7) {
border-radius: 0 0 0 var(--7fefecd2)
}
.image-exhibition .preview-image-container .expand-image-item-warp:nth-child(9) {
border-radius: 0 0 var(--7fefecd2) 0
}
.image-exhibition .preview-image-container .expand-image-item-warp:nth-child(3n+2) {
border-radius: 0
}
.image-exhibition .preview-image-container .expand-image-item-warp.expand-image-two-rows:nth-child(4) {
border-radius: 0 0 0 var(--7fefecd2)
}
.image-exhibition .preview-image-container .expand-image-item-warp.expand-image-two-rows:nth-child(6) {
border-radius: 0 0 var(--7fefecd2) 0
}
.reply-user-sailing {
height: 48px
}
.vote-warp {
display: flex;
width: 100%;
height: 80px;
border: .5px solid var(--graph_bg_thick);
border-radius: 4px;
margin: 10px 0
}
.vote-warp .vote-icon-warp {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 80px;
flex-shrink: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: var(--brand_blue_thin)
}
.vote-warp .vote-icon-warp .vote-icon {
width: 40px;
height: 40px
}
.vote-warp .vote-container {
display: flex;
align-items: center;
flex: 1;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: var(--bg1)
}
.vote-warp .vote-container .vote-text-warp {
flex: 1;
padding-left: 15px
}
.vote-warp .vote-container .vote-text-warp .vote-title {
font-size: 14px;
color: var(--text1)
}
.vote-warp .vote-container .vote-text-warp .vote-desc {
margin-top: 10px;
font-size: 12px;
color: var(--text3)
}
.vote-warp .vote-container .vote-btn-warp {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 90px;
flex-shrink: 0
}
.vote-warp .vote-container .vote-btn-warp .vote-btn {
width: 54px;
height: 28px;
border-radius: 4px;
font-size: 13px;
text-align: center;
line-height: 28px;
color: var(--text_white);
background-color: var(--brand_blue);
cursor: pointer
}
.vote-warp .vote-container .vote-btn-warp .vote-btn:hover {
background-color: var(--Lb4)
}
.vote-dialog {
max-height: 100vh;
overflow-y: auto
}
.vote-dialog::-webkit-scrollbar {
width: 4px;
border-radius: 4px;
background-color: transparent
}
.vote-dialog::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: var(--graph_bg_thick);
transition: .3s ease-in-out
}
.vote-dialog::-webkit-scrollbar-track {
border-radius: 4px;
background-color: transparent
}
.vote-dialog .vote-iframe-warp {
height: 600px;
padding-top: 10px;
border-top: .5px solid var(--graph_weak)
}
.vote-dialog .vote-iframe-warp .vote-iframe {
width: 100%;
height: 100%
}
.reply-item {
position: relative
}
.reply-item .login-limit-mask {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none
}
.reply-item .login-limit-mask .mask-top {
height: 80%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg1) 100%)
}
.reply-item .login-limit-mask .mask-bottom {
height: 20%;
background: var(--bg1)
}
.reply-item.login-limit-reply-end .login-limit-mask {
display: block
}
.reply-item .root-reply-container {
padding: 22px 0 0 80px
}
.reply-item .root-reply-container.show-reply {
animation-name: enterAnimation-jumpReply-7041f671;
animation-duration: 5s;
animation-fill-mode: forwards
}
.reply-item .root-reply-container .root-reply-avatar {
display: flex;
justify-content: center;
position: absolute;
left: 0;
width: 80px;
cursor: pointer
}
.reply-item .root-reply-container .content-warp {
flex: 1;
position: relative
}
.reply-item .root-reply-container .content-warp .reply-decorate {
position: absolute;
top: 0;
right: 0;
user-select: none;
transform: translateY(-15px)
}
.reply-item .root-reply-container .content-warp .reply-decorate .easter-egg-label {
width: 82px;
height: 36px;
transform: translateY(6px)
}
.reply-item .root-reply-container .content-warp .reply-decorate .easter-egg-label img {
width: 100%;
height: 100%
}
.reply-item .root-reply-container .content-warp .reply-decorate .selected-reply .selected-reply-icon {
width: var(--213e47ca);
height: var(--268890ba)
}
.reply-item .root-reply-container .content-warp .reply-decorate .user-sailing {
display: flex;
align-items: center
}
.reply-item .root-reply-container .content-warp .reply-decorate .user-sailing .user-sailing-img {
height: 48px
}
.reply-item .root-reply-container .content-warp .reply-decorate .user-sailing .user-sailing-text {
position: absolute;
right: 0;
font-size: 13px;
color: var(--2bd55d12);
line-height: 16px;
word-break: keep-all;
transform: scale(.7);
transform-origin: center center
}
.reply-item .root-reply-container .content-warp .reply-decorate .user-sailing .user-sailing-text .sailing-text {
font-family: fanscard
}
.reply-item .root-reply-container .content-warp .user-info {
display: flex;
align-items: center;
margin-bottom: 4px
}
@media screen and (max-width: 1681px) {
.reply-item .root-reply-container .content-warp .user-info {
font-size: 13px
}
}
@media screen and (min-width: 1681px) {
.reply-item .root-reply-container .content-warp .user-info {
font-size: 14px
}
}
.reply-item .root-reply-container .content-warp .user-info .user-name {
font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
font-weight: 500;
margin-right: 5px;
color: var(--dc735352);
cursor: pointer
}
@media (-webkit-max-device-pixel-ratio: 1) {
.reply-item .root-reply-container .content-warp .user-info .user-name {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
}
}
.reply-item .root-reply-container .content-warp .user-info .user-level {
cursor: pointer
}
.reply-item .root-reply-container .content-warp .user-info .up-icon {
cursor: default
}
.reply-item .root-reply-container .content-warp .user-info .contractor-box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: var(--697d5c46);
height: 12px;
padding: 2px;
border-radius: 2px;
background-color: var(--brand_pink_thin)
}
.reply-item .root-reply-container .content-warp .user-info .contractor-box.originalFan {
border: .5px solid var(--brand_pink);
background-color: transparent
}
.reply-item .root-reply-container .content-warp .user-info .contractor-box .contractor-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
transform-origin: center center;
transform: scale(.5);
position: absolute;
color: var(--brand_pink);
white-space: nowrap
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge {
display: flex;
align-items: center;
height: 14px;
padding-left: 5px;
border: .5px solid var(--3d3b5a1e);
border-radius: 10px;
margin-left: 5px;
background-image: var(--35269ce2)
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-icon-wrap {
display: flex;
align-items: center;
position: relative;
width: var(--1f5204fd)
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-icon-wrap .badge-frist-icon {
position: absolute;
left: -8px;
width: 20px;
height: 20px
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-icon-wrap .badge-second-icon {
position: absolute;
right: 0;
width: 8px;
height: 11px
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-name-wrap {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: var(--4f9eed68);
height: 100%;
margin-right: 4px
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-name-wrap .badge-name {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
transform-origin: center center;
transform: scale(.5);
position: absolute;
top: 50%;
left: 50%;
color: var(--57e6be72);
font-weight: 500;
white-space: nowrap;
transform: scale(.5) translate(-50%, -50%);
transform-origin: 0 0
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-level-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 11.5px;
height: 11.5px;
border-radius: 50%;
margin-right: .5px;
background-color: var(--59f85baa)
}
.reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-level-wrap .badge-level {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
transform-origin: center center;
transform: scale(.5);
position: absolute;
top: 52%;
left: 50%;
font-family: Reeji-CloudHuPo-GBK;
color: var(--103312b6);
font-weight: 500;
white-space: nowrap;
line-height: 1;
transform: scale(.5) translate(-50%, -43%);
transform-origin: 0 0
}
.reply-item .root-reply-container .content-warp .vote-info {
margin-bottom: 4px;
height: 20px;
font-size: 12px;
line-height: 17px;
display: flex;
align-items: center
}
.reply-item .root-reply-container .content-warp .vote-info__tag {
padding: 2px 6px;
border-radius: 2px;
margin-right: 4px;
flex: none
}
.reply-item .root-reply-container .content-warp .vote-info__tag--pink {
background-color: var(--Pi1);
color: var(--Pi5)
}
.reply-item .root-reply-container .content-warp .vote-info__tag--blue {
background-color: var(--brand_blue_thin);
color: var(--brand_blue)
}
.reply-item .root-reply-container .content-warp .vote-info__tag--gray {
background-color: var(--graph_bg_regular);
color: var(--text3)
}
.reply-item .root-reply-container .content-warp .vote-info__text {
color: var(--Ga7_u)
}
.reply-item .root-reply-container .content-warp .root-reply {
position: relative;
padding: 2px 0
}
@media screen and (max-width: 1681px) {
.reply-item .root-reply-container .content-warp .root-reply {
font-size: 15px;
line-height: 24px
}
}
@media screen and (min-width: 1681px) {
.reply-item .root-reply-container .content-warp .root-reply {
font-size: 16px;
line-height: 26px
}
}
.reply-item .root-reply-container .content-warp .root-reply .reply-content-container {
display: block;
overflow: hidden;
width: 100%
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info {
display: flex;
align-items: center;
position: relative;
margin-top: 2px;
font-size: 13px;
color: var(--text3)
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-time {
margin-right: var(--472bae2d)
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-location {
margin-right: 20px
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like {
display: flex;
align-items: center;
margin-right: 19px;
cursor: pointer
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like .like-icon {
margin-right: 5px;
color: #9499a0
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like .like-icon:hover,
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like .like-icon.liked {
color: #00aeec
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike {
display: flex;
align-items: center;
margin-right: 19px
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike .dislike-icon {
color: #9499a0;
cursor: pointer
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike .dislike-icon:hover,
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike .dislike-icon.disliked {
color: #00aeec
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-btn {
cursor: pointer
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-btn:hover {
color: var(--brand_blue)
}
.reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-operation-warp {
position: absolute;
right: 20px;
display: none
}
.reply-item .root-reply-container .content-warp .root-reply .reply-tag-list {
display: flex;
align-items: center;
margin-top: 6px;
font-size: 12px;
line-height: 17px
}
.reply-item .root-reply-container .content-warp .root-reply .reply-tag-list .reply-tag-item {
padding: 2px 6px;
border-radius: 2px;
margin-right: 10px
}
.reply-item .root-reply-container:hover .content-warp .root-reply .reply-info .reply-operation-warp {
display: block
}
.reply-item .sub-reply-container {
padding-left: 72px
}
.reply-item .reply-box-container {
padding: 25px 0 10px 80px
}
.reply-item .bottom-line {
margin-left: 80px;
border-bottom: 1px solid var(--graph_bg_thick);
margin-top: 14px
}
.reply-item .reply-dynamic-card {
position: absolute;
z-index: 10;
top: 30px;
left: 400px
}
@keyframes enterAnimation-jumpReply-7041f671 {
0% {
background-color: #dff6fb
}
to {
background-color: #dff6fb00
}
}
.reply-list {
margin-top: 14px;
padding-bottom: 100px
}
.reply-list .reply-end-mark {
height: 100px
}
.reply-list .reply-end,
.reply-list .reply-loading,
.reply-list .view-all-reply {
margin-top: 20px;
font-size: 13px;
color: var(--text3);
text-align: center
}
.reply-list .view-all-reply:hover {
color: var(--brand_blue);
cursor: pointer
}
.reply-list .login-prompt {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 80px);
height: 50px;
margin: 16px 0 0 auto;
border-radius: 6px;
font-size: 14px;
color: var(--brand_blue);
background-color: var(--brand_blue_thin);
transition: .2s;
cursor: pointer
}
.reply-list .login-prompt:hover {
background-color: var(--Lb2)
}
.user-card {
position: absolute;
top: var(--555c4a14);
left: var(--8468e010);
z-index: 10;
width: 366px;
border: .5px solid var(--graph_weak);
border-radius: 8px;
background-color: var(--bg1);
box-shadow: 0 0 30px #0000001a
}
.user-card .card-bg {
width: 100%;
height: 85px;
border-radius: 8px 8px 0 0;
overflow: hidden;
background-image: var(--71924242);
background-size: cover;
background-repeat: no-repeat;
background-position: center
}
.user-card .user-card-avatar {
display: flex;
justify-content: center;
position: absolute;
width: 70px;
margin-top: 10px;
cursor: pointer
}
.user-card .card-content {
display: flex;
flex-direction: column;
padding: 12px 20px 16px 70px
}
.user-card .card-content .card-user-info {
display: flex;
align-items: center;
color: var(--text1);
margin-bottom: 10px
}
.user-card .card-content .card-user-info .card-user-name {
max-width: 160px;
margin-right: 5px;
font-size: 16px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--text1);
color: var(--7ba58c95);
text-decoration: none
}
.user-card .card-content .card-user-info .card-user-sex {
width: 16px;
height: 16px;
margin-right: 5px
}
.user-card .card-content .card-user-info .card-user-level {
margin-right: 5px;
cursor: pointer
}
.user-card .card-content .card-user-info .card-user-vip {
display: flex;
justify-content: center;
align-items: center;
width: var(--7a718880);
height: 16px;
padding: 1px 4px;
border-radius: 2px;
color: var(--612d8511);
background-color: var(--29ab308e);
cursor: default
}
.user-card .card-content .card-user-info .card-user-vip .card-vip-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transform-origin: center center;
transform: scale(.5);
white-space: nowrap;
font-style: normal
}
.user-card .card-content .card-social-info {
display: flex;
align-items: center;
font-size: 12px;
color: var(--text1)
}
.user-card .card-content .card-social-info .card-user-attention,
.user-card .card-content .card-social-info .card-user-fans,
.user-card .card-content .card-social-info .card-user-like {
margin-right: 18px;
color: inherit;
text-decoration: none
}
.user-card .card-content .card-social-info .card-user-attention .social-info-title,
.user-card .card-content .card-social-info .card-user-fans .social-info-title,
.user-card .card-content .card-social-info .card-user-like .social-info-title {
margin-left: 3px;
color: var(--text3)
}
.user-card .card-content .card-verify-info {
padding-top: 10px;
font-size: 12px;
color: var(--text3)
}
.user-card .card-content .card-verify-info .card-verify-icon {
vertical-align: text-bottom;
margin-right: 3px
}
.user-card .card-content .card-sign {
padding-top: 8px;
font-size: 12px;
color: var(--text3);
word-break: break-all
}
.user-card .card-content .card-btn-warp {
display: flex;
margin-top: 16px;
font-size: 14px
}
.user-card .card-content .card-btn-warp .card-attention-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 30px;
border-radius: 4px;
margin-right: 8px;
color: var(--text_white);
background-color: var(--brand_blue);
transition: .4s;
cursor: pointer
}
.user-card .card-content .card-btn-warp .card-attention-btn .cancel-attention-text {
display: none;
position: absolute
}
.user-card .card-content .card-btn-warp .card-attention-btn.attention {
color: var(--text2);
background-color: var(--bg3)
}
.user-card .card-content .card-btn-warp .card-attention-btn.attention:hover .attention-text {
display: none
}
.user-card .card-content .card-btn-warp .card-attention-btn.attention:hover .cancel-attention-text {
display: inline
}
.user-card .card-content .card-btn-warp .card-message-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 30px;
border: 1px solid var(--graph_weak);
border-radius: 4px;
color: var(--text2);
cursor: pointer
}
.user-card .card-content .card-btn-warp .card-message-btn:hover {
border-color: var(--brand_blue);
color: var(--brand_blue)
}
.dynamic-card {
display: flex;
flex-direction: column;
position: absolute;
z-index: 10;
top: var(--7b058890);
left: 400px;
width: 710px;
height: 550px;
border-radius: 6px;
background-color: var(--bg1);
box-shadow: 0 0 25px #00000026
}
.dynamic-card .card-header {
display: flex;
align-items: center;
flex-basis: 50px;
padding: 0 10px;
border-bottom: .5px solid var(--line_light)
}
.dynamic-card .card-header .card-title {
flex: 1;
text-align: center;
font-size: 16px;
color: var(--text1)
}
.dynamic-card .card-header .close-card {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
color: var(--text2);
transition: .2s;
cursor: pointer
}
.dynamic-card .card-header .close-card:hover {
background-color: var(--bg3)
}
.dynamic-card .card-content {
flex: 1
}
.dynamic-card .card-content::-webkit-scrollbar {
width: 4px;
border-radius: 4px;
background-color: transparent
}
.dynamic-card .card-content::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: var(--graph_bg_thick);
transition: .3s ease-in-out
}
.dynamic-card .card-content::-webkit-scrollbar-track {
border-radius: 4px;
background-color: transparent
}
.dynamic-card .card-content .dynamic-card-iframe {
width: 100%;
height: 100%
}
.reply-view-image {
position: fixed;
z-index: 999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(24, 25, 28, .85);
transform: scale(1);
user-select: none;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none
}
.reply-view-image,
.reply-view-image * {
box-sizing: border-box
}
.reply-view-image .operation-btn .operation-btn-icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 2;
width: 42px;
height: 42px;
border-radius: 50%;
color: var(--text_white);
background: rgba(0, 0, 0, .58);
transition: .2s;
cursor: pointer
}
.reply-view-image .operation-btn .operation-btn-icon:hover {
color: var(--brand_pink)
}
.reply-view-image .operation-btn .operation-btn-icon.close-container {
top: 16px;
right: 16px
}
.reply-view-image .operation-btn .operation-btn-icon.last-image {
top: 50%;
left: 16px;
transform: translateY(-50%)
}
.reply-view-image .operation-btn .operation-btn-icon.next-image {
top: 50%;
right: 16px;
transform: translateY(-50%)
}
.reply-view-image .show-image-wrap {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
max-height: 100%;
padding: 0 100px;
overflow: auto
}
.reply-view-image .show-image-wrap .loading-svga {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px
}
.reply-view-image .show-image-wrap.vertical {
flex-direction: column;
justify-content: var(--c186e874)
}
.reply-view-image .show-image-wrap .image-content {
width: calc(100vw - 200px);
max-width: var(--34114ac9);
-webkit-user-drag: none
}
.reply-view-image .preview-list {
display: flex;
align-items: center;
position: absolute;
left: 50%;
bottom: 30px;
z-index: 2;
padding: 6px 10px;
border-radius: 8px;
background: rgba(24, 25, 28, .8);
backdrop-filter: blur(20px);
transform: translate(-50%)
}
.reply-view-image .preview-list .preview-item-box {
padding: 1px;
border: 2px solid transparent;
border-radius: 8px;
transition: .3s;
cursor: pointer
}
.reply-view-image .preview-list .preview-item-box.active {
border-color: var(--brand_pink)
}
.reply-view-image .preview-list .preview-item-box .preview-item-wrap {
display: flex;
justify-content: center;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 6px
}
.reply-view-image .preview-list .preview-item-box .preview-item-wrap.vertical {
flex-direction: column
}
.reply-view-image .preview-list .preview-item-box .preview-item-wrap.extra-long {
justify-content: start
}
.reply-view-image .preview-list .preview-item-box .preview-item-wrap .item-content {
-webkit-user-drag: none
}
.reply-view-image--transition-enter-active,
.reply-view-image--transition-leave-active {
transition: all .3s ease
}
.reply-view-image--transition-enter-from,
.reply-view-image--transition-leave-to {
transform: scale(.4);
opacity: 0
}
.reply-warp {
position: relative
}
.reply-warp .fixed-reply-box {
position: fixed;
bottom: 0;
left: var(--3e88ddc5);
z-index: 10;
width: var(--d9a0b070)
}
.reply-warp .fixed-reply-box .reply-box-shadow {
position: absolute;
top: -10px;
z-index: 1;
width: 100%;
height: 36px;
border-radius: 50%;
background-color: #00000014;
filter: blur(10px)
}
.reply-warp .fixed-reply-box--transition-enter-active,
.reply-warp .fixed-reply-box--transition-leave-active {
transition: opacity .5s ease
}
.reply-warp .fixed-reply-box--transition-enter-from,
.reply-warp .fixed-reply-box--transition-leave-to {
opacity: 0
}
.bili-comment.browser-pc {
background-color: var(--bg1)
}
.bili-comment.browser-pc * {
font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
font-weight: 400;
box-sizing: border-box;
-webkit-font-smoothing: antialiased
}
@media (-webkit-max-device-pixel-ratio: 1) {
.bili-comment.browser-pc * {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
}
}
.bili-comment.browser-pc * ul {
padding: 0;
margin: 0;
list-style: none
}
.bili-comment.browser-pc * a {
text-decoration: none;
background-color: transparent;
color: var(--text_link);
cursor: pointer
}
.bili-comment.browser-pc * a:hover {
color: var(--Lb4)
}
.bili-comment.browser-pc * i {
font-style: normal
}
.bili-comment.browser-pc * p {
margin: 0;
padding: 0
}
.bili-comment.browser-pc .comment-container {
animation-name: enterAnimation-commentContainer;
animation-duration: 1s;
animation-fill-mode: forwards
}
.reply-operation-client {
display: inline-flex;
position: relative
}
.reply-operation-client .operation-icon {
border-radius: 4px;
cursor: pointer
}
.reply-operation-client .operation-icon:hover {
background-color: var(--graph_bg_thick)
}
.reply-operation-client .operation-list {
display: flex;
flex-direction: column;
position: absolute;
top: 10px;
right: 0;
z-index: 10;
width: 180px;
padding: 12px 0;
border-radius: 6px;
font-size: 14px;
color: var(--text2);
background-color: var(--bg1_float);
box-shadow: 0 0 5px #0003
}
.reply-operation-client .operation-list .operation-option {
display: flex;
align-items: center;
height: 40px;
padding: 0 15px;
cursor: pointer
}
.reply-operation-client .operation-list .operation-option:hover {
background-color: var(--graph_bg_thick)
}
.reply-operation-client .operation-list .delete-reply-modal {
position: absolute;
top: 0;
left: 50%;
width: auto;
padding: 10px 20px;
border: 1px solid var(--graph_bg_thick);
border-radius: 8px;
margin-bottom: 100px;
font-size: 12px;
line-height: 12px;
text-align: center;
white-space: nowrap;
background-color: var(--bg1);
box-shadow: 0 0 5px #0003;
transform: translate(-50%, -100%)
}
.reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn {
display: flex;
justify-content: center
}
.reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .comfirm-delete {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 20px;
border-radius: 4px;
margin-right: 20px;
color: var(--text_white);
background-color: var(--brand_blue)
}
.reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .comfirm-delete:hover {
background-color: var(--Lb4)
}
.reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .cancel-delete {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 20px
}
.reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .cancel-delete:hover {
color: var(--brand_blue)
}
.select-reply-dialog-client .select-dialog-content {
text-align: left
}
.select-reply-dialog-client .cancel-select-reply {
width: 130px;
margin-right: 20px
}
.select-reply-dialog-client .comfirm-select-reply {
width: 130px
}
.close-reply-dialog-client .close-reply-dialog-content {
text-align: left
}
.close-reply-dialog-client .cancel-close-reply {
width: 130px;
margin-right: 20px
}
.close-reply-dialog-client .comfirm-close-reply {
width: 130px
}
.close-danmaku-dialog-client .close-danmaku-dialog-content {
text-align: left
}
.close-danmaku-dialog-client .cancel-close-danmaku {
width: 130px;
margin-right: 20px
}
.close-danmaku-dialog-client .comfirm-close-danmaku {
width: 130px
}
.blacklist-dialog-client .blacklist-dialog-content {
text-align: center
}
.blacklist-dialog-client .comfirm-pull-blacklist {
margin-right: 20px
}
.reply-header-client .reply-notice {
display: flex;
align-items: center;
position: relative;
height: 40px;
padding: 11px 14px;
margin-bottom: 10px;
font-size: 12px;
border-radius: 2px;
color: var(--text_notice);
background-color: var(--Or0);
cursor: pointer
}
.reply-header-client .reply-notice .notice-content {
flex: 1;
position: relative;
padding: 0 5px;
line-height: 18px;
vertical-align: top;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: 2s
}
.reply-header-client .reply-navigation {
margin: 12px 0
}
.reply-header-client .reply-navigation .nav-bar {
display: flex;
align-items: center;
position: relative;
list-style: none;
margin: 0;
padding: 0
}
.reply-header-client .reply-navigation .nav-bar .nav-select-reply {
font-size: 12px;
color: var(--text1)
}
.reply-header-client .reply-navigation .nav-bar .nav-sort {
display: flex;
align-items: center;
font-size: 12px;
color: var(--text3)
}
.reply-header-client .reply-navigation .nav-bar .nav-sort .part-symbol {
height: 10px;
margin: 0 8px;
border-left: solid 1px
}
.reply-header-client .reply-navigation .nav-bar .nav-sort .hot-sort {
cursor: pointer
}
.reply-header-client .reply-navigation .nav-bar .nav-sort .hot-sort:hover {
color: var(--brand_blue)
}
.reply-header-client .reply-navigation .nav-bar .nav-sort .time-sort {
cursor: pointer
}
.reply-header-client .reply-navigation .nav-bar .nav-sort .time-sort:hover {
color: var(--brand_blue)
}
.reply-header-client .reply-navigation .nav-bar .nav-sort.hot .hot-sort,
.reply-header-client .reply-navigation .nav-bar .nav-sort.time .time-sort {
color: var(--text1)
}
.reply-header-client .reply-navigation .nav-operation-warp {
position: absolute;
right: 0
}
.reply-box-client {
display: flex;
flex-direction: column
}
.reply-box-client .reply-box-warp {
position: relative;
flex: 1
}
.reply-box-client .reply-box-warp .reply-box-textarea {
width: 100%;
height: 32px;
padding: 5px 12px;
border: 1px solid transparent;
border-radius: 6px;
line-height: 20px;
color: var(--text1);
background-color: var(--bg2);
resize: none;
outline: none;
transition: .2s
}
.reply-box-client .reply-box-warp .reply-box-textarea::placeholder {
color: var(--text4)
}
.reply-box-client .reply-box-warp .reply-box-textarea.focus,
.reply-box-client .reply-box-warp .reply-box-textarea:hover {
border-color: var(--brand_pink)
}
.reply-box-client .box-operation-warp {
display: flex;
align-items: center;
margin-top: 10px;
height: 32px
}
.reply-box-client .box-operation-warp .reply-box-emoji {
position: relative;
margin-right: auto
}
.reply-box-client .box-operation-warp .reply-box-emoji .box-emoji-icon {
cursor: pointer
}
.reply-box-client .box-operation-warp .reply-box-send {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 70px;
height: 100%;
border-radius: 4px;
cursor: pointer
}
.reply-box-client .box-operation-warp .reply-box-send .send-text {
position: absolute;
z-index: 1;
color: var(--text_white)
}
.reply-box-client .box-operation-warp .reply-box-send:after {
content: "";
position: absolute;
opacity: .5;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: var(--brand_pink)
}
.reply-box-client .box-operation-warp .reply-box-send:hover:after {
opacity: 1
}
.reply-box-client.box-active .reply-box-warp .reply-box-textarea {
height: 60px
}
.reply-box-client.box-active .reply-box-send.send-active:after {
opacity: 1
}
.reply-box-client.disabled .reply-box-warp .disable-mask {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 6px;
font-size: 12px;
color: var(--text3);
background-color: var(--bg3)
}
.reply-box-client.disabled .reply-box-warp .disable-mask .no-login-mask {
cursor: pointer
}
.reply-box-client.disabled .box-operation-warp .reply-box-send {
cursor: not-allowed
}
.reply-box-client.disabled .box-operation-warp .reply-box-send .send-text {
color: var(--text3)
}
.reply-box-client.disabled .box-operation-warp .reply-box-send:after {
opacity: 1;
background-color: var(--bg3)
}
.note-prefix {
vertical-align: -3px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 3px;
line-height: 19px;
border-radius: 4px;
margin-right: 6px;
font-size: 12px;
color: var(--text3);
background-color: var(--bg2)
}
.note-prefix .note-icon {
width: 16px;
height: 16px
}
.reply-content-client {
color: var(--text1);
overflow: hidden;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
vertical-align: baseline;
transition: .2s
}
.reply-content-client.root {
line-height: 25px
}
.reply-content-client.need-view-more {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden
}
.reply-content-client.sub {
line-height: 20px
}
.reply-content-client .top-icon {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
width: 30px;
height: 18px;
border: 1px solid var(--brand_pink);
border-radius: 3px;
margin-right: 5px;
font-size: 12px;
color: var(--brand_pink);
vertical-align: 1px
}
.reply-content-client .emoji-small {
width: 20px;
height: 20px;
vertical-align: text-bottom
}
.reply-content-client .emoji-large {
width: 36px;
height: 36px;
vertical-align: text-bottom
}
.reply-content-client .jump-link {
vertical-align: baseline
}
.reply-content-client .icon {
width: 20px;
height: 20px;
vertical-align: text-top
}
.reply-content-client .icon.vote {
width: 16px;
height: 16px;
margin-right: 3px;
vertical-align: text-bottom
}
.reply-content-client .icon.search-word {
width: 12px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat
}
.view-more-reply {
font-size: 12px;
color: var(--text_link);
line-height: 17px;
cursor: pointer
}
.view-more-reply:hover {
color: var(--Lb4)
}
.sub-reply-item-client {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
position: relative;
max-height: 42px;
padding: 3px 0;
font-size: 14px;
overflow: hidden
}
.sub-reply-item-client .sub-user-info {
display: inline-flex;
align-items: center;
color: var(--text2);
line-height: 20px;
vertical-align: baseline;
white-space: nowrap
}
.sub-reply-item-client .sub-user-info .sub-user-name {
margin-right: 5px;
font-size: 14px;
cursor: pointer
}
.sub-reply-item-client .sub-user-info .sub-up-icon {
margin-right: 4px;
cursor: default
}
.sub-reply-list-client {
border-radius: 4px;
padding: 7px 10px;
margin-top: 12px;
background-color: var(--bg2_float)
}
.sub-reply-list-client .view-more {
margin-top: 4px;
cursor: pointer
}
.sub-reply-list-client .view-more .view-more-text {
font-size: 12px;
color: var(--text_link)
}
.sub-reply-list-client .view-more .view-more-text:hover {
color: var(--Lb4)
}
.content-warp--blacklist .reply-content {
display: inline-flex;
align-items: center;
padding: 4px;
border-radius: 4px;
color: var(--text1);
background-color: var(--bg2_float)
}
.content-warp--blacklist .reply-content .ban-icon {
margin-right: 4px
}
.content-warp--blacklist .reply-header {
display: flex;
align-items: center;
margin-bottom: 8px
}
.content-warp--blacklist .reply-header .root-reply-avatar {
display: flex;
justify-content: center;
position: absolute;
left: 0;
cursor: pointer
}
.content-warp--blacklist .reply-header .root-reply-avatar .blacklist-avatar {
width: 30px;
height: 30px
}
.content-warp--blacklist .reply-header .reply-info .balcklist-name {
color: var(--text1)
}
.reply-item-client {
position: relative;
padding: 10px 0 14px 42px;
border-bottom: 1px solid var(--line_light)
}
.reply-item-client .content-warp {
flex: 1;
position: relative
}
.reply-item-client .content-warp .reply-header {
display: flex;
align-items: center;
margin-bottom: 8px
}
.reply-item-client .content-warp .reply-header .root-reply-avatar {
display: flex;
justify-content: center;
position: absolute;
left: -42px;
cursor: pointer
}
.reply-item-client .content-warp .reply-header .reply-info {
display: flex;
flex-direction: column
}
.reply-item-client .content-warp .reply-header .reply-info .user-info {
display: flex;
align-items: center;
font-size: 13px;
color: var(--text2)
}
.reply-item-client .content-warp .reply-header .reply-info .user-info .user-name {
margin-right: 5px;
color: var(--be794234);
cursor: pointer
}
.reply-item-client .content-warp .reply-header .reply-info .user-info .user-level {
margin-right: 5px;
cursor: pointer
}
.reply-item-client .content-warp .reply-header .reply-info .user-info .up-icon {
cursor: default
}
.reply-item-client .content-warp .reply-header .reply-info .reply-time {
font-size: 12px;
color: var(--text3)
}
.reply-item-client .content-warp .root-reply {
position: relative;
font-size: 15px;
line-height: 25px;
transition: .2s
}
.reply-item-client .content-warp .root-reply .reply-operation-warp {
display: flex;
align-items: center;
position: relative;
margin-top: 12px;
font-size: 13px;
color: var(--text3);
line-height: 16px
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like {
display: flex;
align-items: center;
margin-right: 19px;
cursor: pointer
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like .like-icon {
margin-right: 5px;
color: var(--text3)
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like .like-icon:hover,
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like .like-icon.liked {
color: var(--brand_pink)
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike {
display: flex;
align-items: center;
margin-right: 19px
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike .dislike-icon {
color: var(--text3);
cursor: pointer
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike .dislike-icon:hover,
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike .dislike-icon.disliked {
color: var(--brand_pink)
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-icon {
color: var(--text3);
cursor: pointer
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .reply-icon:hover {
color: var(--brand_pink)
}
.reply-item-client .content-warp .root-reply .reply-operation-warp .more-operation {
display: none;
position: absolute;
right: 20px
}
.reply-item-client .content-warp .reply-item-box {
margin-top: 12px
}
.reply-item-client .content-warp .reply-tag-list {
display: flex;
align-items: center;
margin-top: 12px;
font-size: 12px;
line-height: 14px
}
.reply-item-client .content-warp .reply-tag-list .reply-tag-item {
padding: 5px 6px;
border-radius: 2px;
margin-right: 10px;
color: var(--text2);
background-color: var(--bg2_float)
}
.reply-item-client:hover .content-warp .root-reply .reply-operation-warp .more-operation {
display: block
}
.reply-list {
position: relative;
margin-top: 14px;
padding-bottom: 100px
}
.reply-list .reply-empty {
margin-top: 100px;
text-align: center;
font-size: 14px;
color: var(--text3)
}
.reply-list .reply-end-mark {
height: 100px
}
.reply-list .reply-end,
.reply-list .reply-loading {
margin-top: 20px;
font-size: 13px;
color: var(--text3);
text-align: center
}
.fixed-reply-box {
bottom: 0;
z-index: 20;
width: 100%
}
.fixed-reply-box .reply-box-wrap {
background-color: var(--bg1);
padding: 14px 0;
border-top: 1px solid var(--line_light)
}
.fixed-reply-box .reply-box-shadow {
position: absolute;
top: -10px;
z-index: -1;
height: 36px;
border-radius: 50%;
background-color: #00000014;
filter: blur(10px);
width: calc(100% - 72px);
left: 50%;
transform: translate(-50%)
}
.reply-detail {
flex: 1
}
.reply-detail .reply-header {
display: flex;
align-items: center;
position: sticky;
z-index: 9;
top: 0;
left: 0;
height: 46px;
border-bottom: 1px solid var(--line_light);
margin-bottom: 14px;
background-color: var(--bg1)
}
.reply-detail .reply-header .return-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 4px;
margin-right: 4px;
color: var(--text1);
cursor: pointer
}
.reply-detail .reply-header .return-icon:hover {
background-color: var(--graph_bg_thick)
}
.reply-detail .reply-header .reply-title {
font-size: 16px;
font-weight: 600;
color: var(--text1)
}
.dialog-reply {
flex: 1
}
.dialog-reply .reply-header {
display: flex;
align-items: center;
position: sticky;
z-index: 9;
top: 0;
left: 0;
height: 46px;
border-bottom: 1px solid var(--line_light);
margin-bottom: 14px;
background-color: var(--bg1)
}
.dialog-reply .reply-header .return-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 4px;
margin-right: 4px;
color: var(--text1);
cursor: pointer
}
.dialog-reply .reply-header .return-icon:hover {
background-color: var(--graph_bg_thick)
}
.dialog-reply .reply-header .reply-title {
font-size: 16px;
font-weight: 600;
color: var(--text1)
}
.bili-comment.client {
background-color: var(--bg1)
}
.bili-comment.client * {
box-sizing: border-box;
font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
-webkit-font-smoothing: antialiased
}
.bili-comment.client * ul {
list-style: none
}
.bili-comment.client * a {
text-decoration: none;
background-color: transparent;
color: var(--text_link);
cursor: pointer
}
.bili-comment.client * a:hover {
color: var(--Lb4)
}
.bili-comment.client * i {
font-style: normal
}
`;
document.head.appendChild(styleElement);
})();
