☰

Greasy Fork is available in English.

inject-bilibili-comment-style

Stylesheet for comments in bilibili.com

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greatest.deepsurf.us/scripts/512574/1464548/inject-bilibili-comment-style.js 

  1. (async function() {
  2.   // wait until document is ready
  3.   await new Promise(resolve => {
  4.     const timer = setInterval(() => {
  5.       if (document && document.createElement && document.head && document.head.appendChild) { clearInterval(timer); resolve(); }
  6.     }, 100);
  7.   });
  8.  
  9.   // inject stylesheet
  10.   const styleElement = document.createElement('style');
  11.   styleElement.textContent = `
  12. :root {
  13.   --v_xs: 5px;
  14.   --v_xsx: 4px;
  15.   --v_xxs: 6px;
  16.   --v_sm: 10px;
  17.   --v_smx: 8px;
  18.   --v_xsm: 12px;
  19.   --v_md: 15px;
  20.   --v_mdx: 14px;
  21.   --v_xmd: 16px;
  22.   --v_lg: 20px;
  23.   --v_lgx: 18px;
  24.   --v_xlg: 22px;
  25.   --v_xl: 25px;
  26.   --v_xlx: 24px;
  27.   --v_xxl: 26px;
  28.   --v_fs_1: 24px;
  29.   --v_fs_2: 18px;
  30.   --v_fs_3: 16px;
  31.   --v_fs_4: 14px;
  32.   --v_fs_5: 13px;
  33.   --v_fs_6: 12px;
  34.   --v_lh_xs: 1;
  35.   --v_lh_sm: 1.25;
  36.   --v_lh_md: 1.5;
  37.   --v_lh_lg: 1.75;
  38.   --v_lh_xl: 2;
  39.   --v_height_xs: 16px;
  40.   --v_height_sm: 24px;
  41.   --v_height_md: 32px;
  42.   --v_height_lg: 40px;
  43.   --v_height_xl: 48px;
  44.   --v_radius: 6px;
  45.   --v_radius_sm: 4px;
  46.   --v_radius_md: 8px;
  47.   --v_radius_lg: 10px;
  48.   --v_brand_pink: var(--brand_pink, #FF6699);
  49.   --v_brand_pink_thin: var(--brand_pink_thin, #FFECF1);
  50.   --v_brand_blue: var(--brand_blue, #00AEEC);
  51.   --v_brand_blue_thin: var(--brand_blue_thin, #DFF6FD);
  52.   --v_stress_red: var(--stress_red, #F85A54);
  53.   --v_stress_red_thin: var(--stress_red_thin, #FEECEA);
  54.   --v_success_green: var(--success_green, #2AC864);
  55.   --v_success_green_thin: var(--success_green_thin, #E4F8EA);
  56.   --v_operate_orange: var(--operate_orange, #FF7F24);
  57.   --v_operate_orange_thin: var(--operate_orange_thin, #FFF0E3);
  58.   --v_pay_yellow: var(--pay_yellow, #FFB027);
  59.   --v_pay_yellow_thin: var(--pay_yellow_thin, #FFF6E4);
  60.   --v_bg1: var(--bg1, #FFFFFF);
  61.   --v_bg2: var(--bg2, #F6F7F8);
  62.   --v_bg3: var(--bg3, #F1F2F3);
  63.   --v_bg1_float: var(--bg1_float, #FFFFFF);
  64.   --v_bg2_float: var(--bg2_float, #F1F2F3);
  65.   --v_text_white: var(--text_white, #FFFFFF);
  66.   --v_text1: var(--text1, #18191C);
  67.   --v_text2: var(--text2, #61666D);
  68.   --v_text3: var(--text3, #9499A0);
  69.   --v_text4: var(--text4, #C9CCD0);
  70.   --v_text_link: var(--text_link, #008AC5);
  71.   --v_text_notice: var(--text_notice, #E58900);
  72.   --v_line_light: var(--line_light, #F1F2F3);
  73.   --v_line_regular: var(--line_regular, #E3E5E7);
  74.   --v_line_bold: var(--line_bold, #C9CCD0);
  75.   --v_graph_white: var(--graph_white, #FFFFFF);
  76.   --v_graph_bg_thin: var(--graph_bg_thin, #F6F7F8);
  77.   --v_graph_bg_regular: var(--graph_bg_regular, #F1F2F3);
  78.   --v_graph_bg_thick: var(--graph_bg_thick, #E3E5E7);
  79.   --v_graph_weak: var(--graph_weak, #C9CCD0);
  80.   --v_graph_medium: var(--graph_medium, #9499A0);
  81.   --v_graph_icon: var(--graph_icon, #61666D);
  82.   --v_shadow: var(--shadow, #000000);
  83.   --v_brand_pink_hover: var(--brand_pink_hover, #FF8CB0);
  84.   --v_brand_pink_active: var(--brand_pink_active, #E84B85);
  85.   --v_brand_pink_disabled: var(--brand_pink_disabled, #FFB3CA);
  86.   --v_brand_blue_hover: var(--brand_blue_hover, #40C5F1);
  87.   --v_brand_blue_active: var(--brand_blue_active, #008AC5);
  88.   --v_brand_blue_disabled: var(--brand_blue_disabled, #80DAF6);
  89.   --v_stress_red_hover: var(--stress_red_hover, #FA857F);
  90.   --v_stress_red_active: var(--stress_red_active, #E23D3D);
  91.   --v_stress_red_disabled: var(--stress_red_disabled, #FCAFAA);
  92.   --v_text_hover: var(--text_hover, #797F87);
  93.   --v_text_active: var(--text_active, #61666D);
  94.   --v_text_disabled: var(--text_disabled, #C9CCD0);
  95.   --v_line_border: var(--line_border, #C9CCD0);
  96.   --v_line_bolder_hover: var(--line_bolder_hover, #E3E5E7);
  97.   --v_line_bolder_active: var(--line_bolder_active, #AEB3B9);
  98.   --v_line_bolder_disabled: var(--line_bolder_disabled, #F1F2F3)
  99. }
  100.  
  101. @font-face {
  102.   font-family: fanscard;
  103.   src: url(//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf)
  104. }
  105.  
  106. .svg-icon {
  107.   display: inline-flex;
  108.   justify-content: center;
  109.   align-items: center
  110. }
  111.  
  112. .svg-icon svg {
  113.   width: 100%;
  114.   height: 100%
  115. }
  116.  
  117. .svg-icon.use-color svg path {
  118.   fill: currentColor;
  119.   color: inherit
  120. }
  121.  
  122. .top-vote-card {
  123.   background-color: var(--graph_bg_thin);
  124.   display: flex;
  125.   justify-content: space-between;
  126.   align-items: center;
  127.   height: 80px;
  128.   width: 100%;
  129.   margin-bottom: 24px;
  130.   padding: 12px 16px 12px 10px;
  131.   border-radius: 6px
  132. }
  133.  
  134. .top-vote-card__multi {
  135.   cursor: pointer
  136. }
  137.  
  138. .top-vote-card__multi:hover .vote-result-text {
  139.   color: var(--brand_blue);
  140.   transition: .2s
  141. }
  142.  
  143. .top-vote-card-left {
  144.   width: 40%;
  145.   max-width: calc(40% - 30px);
  146.   margin-right: 20px;
  147.   word-wrap: break-word;
  148.   font-size: 13px;
  149.   line-height: 18px;
  150.   color: var(--text1)
  151. }
  152.  
  153. .top-vote-card-left__title {
  154.   display: flex;
  155.   align-items: center
  156. }
  157.  
  158. .top-vote-card-left__title svg {
  159.   margin-right: 2px;
  160.   flex: none
  161. }
  162.  
  163. .top-vote-card-left__title span {
  164.   display: -webkit-box;
  165.   float: none;
  166.   height: 18px;
  167.   overflow: hidden;
  168.   text-overflow: ellipsis;
  169.   word-break: break-word;
  170.   -webkit-box-orient: vertical;
  171.   -webkit-line-clamp: 1
  172. }
  173.  
  174. .top-vote-card-left__join {
  175.   height: 17px;
  176.   display: flex;
  177.   align-items: center;
  178.   margin-top: 4px;
  179.   font-size: 12px;
  180.   color: var(--text3)
  181. }
  182.  
  183. .top-vote-card-left__join .vote-icon {
  184.   height: 12px
  185. }
  186.  
  187. .top-vote-card-left__join span {
  188.   display: flex;
  189.   align-items: center
  190. }
  191.  
  192. .top-vote-card-right {
  193.   width: 60%;
  194.   font-size: var(--2fde2a28);
  195.   line-height: 17px;
  196.   display: flex;
  197.   --option-height: 40px;
  198.   --option-radius: 6px
  199. }
  200.  
  201. .top-vote-card-right .vote-text__not-vote {
  202.   opacity: .9
  203. }
  204.  
  205. .top-vote-card-right .vote-text__not-vote .vui_ellipsis {
  206.   font-weight: 400 !important
  207. }
  208.  
  209. .top-vote-card-right .vote-text :first-child {
  210.   font-weight: 500
  211. }
  212.  
  213. .top-vote-card-right .vote-icon {
  214.   flex: none
  215. }
  216.  
  217. .top-vote-card-right .left-vote-option {
  218.   position: relative;
  219.   display: flex;
  220.   min-width: 120px;
  221.   align-items: center;
  222.   justify-content: space-between;
  223.   background-color: rgba(255, 102, 153, var(--212267a6));
  224.   height: var(--option-height);
  225.   width: var(--38c5ebb3);
  226.   padding-left: 10px;
  227.   border-radius: var(--option-radius) 0 0 var(--option-radius);
  228.   cursor: pointer;
  229.   margin-right: 30px;
  230.   color: var(--332a347e);
  231.   transition: width ease-out .2s
  232. }
  233.  
  234. .top-vote-card-right .left-vote-option .skew-vote-option {
  235.   position: absolute;
  236.   right: -20px;
  237.   top: 0
  238. }
  239.  
  240. .top-vote-card-right .left-vote-option .skew-vote-option__fill {
  241.   left: -8px;
  242.   background-color: #f69;
  243.   transform: skew(21deg);
  244.   border-top-right-radius: calc(var(--option-radius) - 2px);
  245.   border-bottom-right-radius: var(--option-radius)
  246. }
  247.  
  248. .top-vote-card-right .skew-vote-option {
  249.   height: 40px;
  250.   width: 20px;
  251.   overflow: hidden;
  252.   opacity: var(--212267a6);
  253.   pointer-events: none
  254. }
  255.  
  256. .top-vote-card-right .skew-vote-option__fill {
  257.   pointer-events: all;
  258.   position: absolute;
  259.   top: 0;
  260.   width: 100%;
  261.   height: 100%
  262. }
  263.  
  264. .top-vote-card-right .right-vote-option {
  265.   position: relative;
  266.   display: flex;
  267.   min-width: 120px;
  268.   align-items: center;
  269.   flex-direction: row-reverse;
  270.   justify-content: space-between;
  271.   background-color: rgba(0, 174, 236, var(--212267a6));
  272.   height: var(--option-height);
  273.   width: var(--4b2970aa);
  274.   padding-right: 10px;
  275.   border-radius: 0 var(--option-radius) var(--option-radius) 0;
  276.   cursor: pointer;
  277.   color: var(--1e587827);
  278.   transition: width ease-out .2s
  279. }
  280.  
  281. .top-vote-card-right .right-vote-option .skew-vote-option {
  282.   position: absolute;
  283.   left: -20px;
  284.   top: 0
  285. }
  286.  
  287. .top-vote-card-right .right-vote-option .skew-vote-option__fill {
  288.   left: 8px;
  289.   background-color: #00aeec;
  290.   transform: skew(21deg);
  291.   border-top-left-radius: var(--option-radius);
  292.   border-bottom-left-radius: calc(var(--option-radius) - 2px)
  293. }
  294.  
  295. .top-vote-card-right .right-vote-option .vote-text {
  296.   text-align: right
  297. }
  298.  
  299. .top-vote-card-right .had_voted {
  300.   cursor: unset
  301. }
  302.  
  303. .reply-header .reply-notice {
  304.   display: flex;
  305.   align-items: center;
  306.   position: relative;
  307.   min-height: 40px;
  308.   padding: 4px 10px;
  309.   margin-bottom: 16px;
  310.   font-size: 13px;
  311.   border-radius: 2px;
  312.   color: var(--Ye5_u);
  313.   cursor: pointer
  314. }
  315.  
  316. .reply-header .reply-notice:after {
  317.   content: "";
  318.   position: absolute;
  319.   width: 100%;
  320.   height: 100%;
  321.   top: 0;
  322.   left: 0;
  323.   background-color: var(--Ye5_u);
  324.   opacity: .2
  325. }
  326.  
  327. .reply-header .reply-notice .notice-icon {
  328.   width: 16px;
  329.   height: 16px;
  330.   margin-right: 5px
  331. }
  332.  
  333. .reply-header .reply-notice .notice-content {
  334.   flex: 1;
  335.   padding: 0 5px;
  336.   vertical-align: top;
  337.   word-wrap: break-word;
  338.   word-break: break-all
  339. }
  340.  
  341. .reply-header .reply-notice .notice-close-icon {
  342.   position: relative;
  343.   z-index: 1;
  344.   width: 10px;
  345.   height: 10px;
  346.   margin-left: 5px
  347. }
  348.  
  349. .reply-header .reply-navigation {
  350.   margin-bottom: 22px
  351. }
  352.  
  353. .reply-header .reply-navigation .nav-bar {
  354.   display: flex;
  355.   align-items: center;
  356.   list-style: none;
  357.   margin: 0;
  358.   padding: 0
  359. }
  360.  
  361. .reply-header .reply-navigation .nav-bar .nav-title {
  362.   display: flex;
  363.   align-items: center
  364. }
  365.  
  366. @media screen and (max-width: 1681px) {
  367.   .reply-header .reply-navigation .nav-bar .nav-title {
  368.     font-size: 20px
  369.   }
  370. }
  371.  
  372. @media screen and (min-width: 1681px) {
  373.   .reply-header .reply-navigation .nav-bar .nav-title {
  374.     font-size: 24px
  375.   }
  376. }
  377.  
  378. .reply-header .reply-navigation .nav-bar .nav-title .nav-title-text {
  379.   color: var(--text1);
  380.   font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
  381.   font-weight: 500
  382. }
  383.  
  384. @media (-webkit-max-device-pixel-ratio: 1) {
  385.   .reply-header .reply-navigation .nav-bar .nav-title .nav-title-text {
  386.     font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  387.   }
  388. }
  389.  
  390. .reply-header .reply-navigation .nav-bar .nav-title .total-reply {
  391.   margin: 0 36px 0 6px;
  392.   font-weight: 400;
  393.   color: var(--text3)
  394. }
  395.  
  396. @media screen and (max-width: 1681px) {
  397.   .reply-header .reply-navigation .nav-bar .nav-title .total-reply {
  398.     font-size: 13px
  399.   }
  400. }
  401.  
  402. @media screen and (min-width: 1681px) {
  403.   .reply-header .reply-navigation .nav-bar .nav-title .total-reply {
  404.     font-size: 14px
  405.   }
  406. }
  407.  
  408. .reply-header .reply-navigation .nav-bar .nav-select-reply {
  409.   font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
  410.   font-weight: 500;
  411.   color: var(--text1)
  412. }
  413.  
  414. @media screen and (max-width: 1681px) {
  415.   .reply-header .reply-navigation .nav-bar .nav-select-reply {
  416.     font-size: 13px
  417.   }
  418. }
  419.  
  420. @media screen and (min-width: 1681px) {
  421.   .reply-header .reply-navigation .nav-bar .nav-select-reply {
  422.     font-size: 16px
  423.   }
  424. }
  425.  
  426. @media (-webkit-max-device-pixel-ratio: 1) {
  427.   .reply-header .reply-navigation .nav-bar .nav-select-reply {
  428.     font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  429.   }
  430. }
  431.  
  432. .reply-header .reply-navigation .nav-bar .nav-sort {
  433.   display: flex;
  434.   align-items: center;
  435.   color: var(--text3)
  436. }
  437.  
  438. @media screen and (max-width: 1681px) {
  439.   .reply-header .reply-navigation .nav-bar .nav-sort {
  440.     font-size: 13px
  441.   }
  442. }
  443.  
  444. @media screen and (min-width: 1681px) {
  445.   .reply-header .reply-navigation .nav-bar .nav-sort {
  446.     font-size: 16px
  447.   }
  448. }
  449.  
  450. .reply-header .reply-navigation .nav-bar .nav-sort .part-symbol {
  451.   height: 11px;
  452.   margin: 0 12px;
  453.   border-left: solid 1px
  454. }
  455.  
  456. .reply-header .reply-navigation .nav-bar .nav-sort .hot-sort {
  457.   cursor: pointer
  458. }
  459.  
  460. .reply-header .reply-navigation .nav-bar .nav-sort .hot-sort:hover {
  461.   color: var(--brand_blue)
  462. }
  463.  
  464. .reply-header .reply-navigation .nav-bar .nav-sort .time-sort {
  465.   cursor: pointer
  466. }
  467.  
  468. .reply-header .reply-navigation .nav-bar .nav-sort .time-sort:hover {
  469.   color: var(--brand_blue)
  470. }
  471.  
  472. .reply-header .reply-navigation .nav-bar .nav-sort.hot .hot-sort,
  473. .reply-header .reply-navigation .nav-bar .nav-sort.time .time-sort {
  474.   color: var(--text1)
  475. }
  476.  
  477. .reply-header .reply-navigation .nav-operation-warp {
  478.   position: absolute;
  479.   right: 0
  480. }
  481.  
  482. /*
  483.  * @bilibili/userAvatar
  484.  * version: 1.2.0-beta.2. Powered by main-frontend
  485.  * 用户头像公共组件.
  486.  * author: wuxiuran
  487.  */
  488. .bili-avatar {
  489.   display: block;
  490.   position: relative;
  491.   background-image: url(data:image/gif;base64,R0lGODlhtAC0AOYAALzEy+To7rG6wb/Hzd/k6rK7wsPK0bvDybO8w9/j6dDW3NHX3eHl6+Hm7LnByLa+xeDl6+Lm7M/V27vDyt7j6dHX3r/Gzb/HzsLJ0LS9xLW+xbe/xtLY3s/V3OPn7dne5NXb4eDk67jAx7S8w+Dk6rrCybW9xMXM08TL0sLK0Nrf5cXM0tjd48zS2bO7wsrR17W+xLfAx8fO1La/xsbN07K7wbzEytzh573FzNLX3uLn7cDHzsbN1NPZ377Gzb7FzNbc4sjP1dfd49bb4tvg5svR2LfAxsnQ1s7U293h6Nbb4dTa4MrQ19fc4t3i6L7GzMnP1s7U2tXa4M3T2sDIz97i6N7i6dje5MjO1dfc473Ey8HJz9vg57jBx8jP1tPY38PL0cfO1dne5dXa4ePn7sHIz8vS2Nrf5tDW3djd5M3T2cDIztTZ4L3Fy7rCyMTL0czT2bC5wOXp7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OTQ4QTFCMzg4NDAxMUU1OTA2NUJGQjgwNzVFMDQ2NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OTQ4QTFCNDg4NDAxMUU1OTA2NUJGQjgwNzVFMDQ2NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5NDhBMUIxODg0MDExRTU5MDY1QkZCODA3NUUwNDY1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5NDhBMUIyODg0MDExRTU5MDY1QkZCODA3NUUwNDY1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAALQAtAAAB/+AcoKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19sA6SCtTCakBCyuKOLmXKAGOOAhLiDkFoQzCOA9YEDyE5SHCBx9KhdhhMc6EBhMJeXDQMY6GjKIgXCgZR0jIQR4msDRxJRQBHyzjoHwpR0LODRI9keDI0kAAnoI8rMgJoyYnlTkBUEA6KMDSmTsxhTjIEsBAqlWvlowR9BIBCzmf9ANLyCrTrJP/SAzI+WMtW5EncmpIUwkCTpZaqtw9FIBGzgxlIRHgWvLH1MGIDLN8ACRSArQsfRCAnCgAj5wmsjwigbnkk80hA6hezbr1ajkeMoCu7Lq1HIM5C9yQU7v363EQFhxBMeGA8ePIkx+fMEFAzjgFmCtHPuHBcwEAik/fbnwCCiZfQHKzcoLk8/Po06tfr95BC7vWAkgQwb6+/fv4ETqocC2EgfwABihgRzToQM1ZJT0AwIIMNujggxBGKOGEFFYIgHkWYQCBNA0A0BEASOzmDAMS2NBRCh5AE4AMFiGAhIHSeIAEAhYdAQ0HFmkwxDVDmPBQAU2MiCECSiDiAQkhMBAC/wFMNunkk1ASkMCUUzJJAgQMMNDAllxyGUEEXTaQ5ZhjQmDmmRCEcOVRhyhBI0I2RNCMGRZ5cUgO5RWAQAYuCCBADYDW4OeghBZqqJ8FuLAnDBo84OijkDqqwaQwwGDCpRlkOsKmCHTaqQsjAIDFAocEYVEHzDCA4QMkFNIAGAgdcMEAtM5K6621XqDrrrz2uiuuFgQr7LDEFmsBrsjiWgJCYIg3CAnW6ZeiMgtYBEUhEfwQhwEqsFkMGSxw9IOchHjxIwjKBICBRS4R8pkZzHgWhwyFCGHRCcoQMIJFZxAyRBz4NhMADgIUOYgKFjnAQDJLOIeQboTQUAB8y3wgAP8PhHBRwEMCwEUMiw+Z8BhvJVChogMHeEuBbA+NkQysDxmxsCARbPBCNDs8QK4cDBhhUQvJrJHwtHJAAAMS0byQwYZJYRgHxsjM9VAJ3kJgAqrQoAFDCFUdYBEKyUiN0ASENCCCBNF0IIKzcpj4kAFhWwQAIRE4gDY0EjiwsxwePpRC3A+1Qbfd0eS9N2PbAo7QAIPf/YzhhBCFENxRW/T3IHU77gzkg6RgEeXHiB0HBmWfnXYMbK/7tuKjl72B5s10sMHMgqg+OeukD9LA62nPTojtiVf+0A+EMPAA7Mx08ADTgjxhOetzDwLBA1g/04EGzPP9vPBjEwKBBtU7o8D/1oS4jdDloVtE9iAhZBC+JVkg0YS3kQzhgAMoRBEkJgpk0OogMvEb61I2CH29LxJWWMIKROAcAUzACpIIgLYsIoITAGFvkVAAAlAjiADejnseIQQBEHDARlBAAT5gWUemIIkXPKcLGEhD9hyhABdwUA4eDF76HrI+QRCgAAqARADYYACHHUZEjvDAstAzAx54TBEKmBghcgg6Y4iuh3L4YRAbEQEFuGE96HoEA2awHgHIgAg0lCIAP8c6G4gQiIw4wwvIyJ5+QUIB9SkACpCYiCjCx3w6tKJFtCBCEnZmDGUwono20AP6OSIIG2NPAbAwskNo8IbOWx0I10AIEoyg/4RyIMJf2DMDNcwQEiowQCTXU4AjYHAQl/wdG0GIPjmQwH2HCIHT0jMCJtDOElWAwi7RgwNEKGAENwReFYshutz50JCGAJl6HuCFG2YiAl/oW3oQYMwNylKTO0SIM7MIzUL8Jz0bkIE1O8GCLfjoPA/oZjJnGc7WFdAFWyxEtZ4zAhpwwJGhSIAEnrDKjpDKkgWYJzgF+ZBxavEQHlhJRzSAAja80hQkmIIBNGCRGfySEH785gfrWcuHHuIDGajBBnBwAhb8DxYk+MAKLBCFdcJSjbWjJ0PPR4gEwBERViDCR4GhgBrAR5msq6JP8yk+AcDHcwtlpk6XGg0FOJUQUP8d6U4DmYAaMLUZVq3kObUq1YeAbRAJEMBXNUGCV3pgnR94YibCSoixBrKsCDmrINK6VkwoQQNlKAQRJpCBdgmCAQdAgFM6QddBoECneI2DXm+jVk98Jg5hFMRVCDkIF8YBeXMVQCUfG1ViiC5ggqBAZTvhhBhARAWCqMIq0QAbKDgHAVz4RGMFQVqymtYiNCCEavuKiRu41gUGKMIXNyCTAuxgiSOojG5FS4i8lHYYoqMXWn/qiSrkUABSaMASEaKF3ILCqvC5rG+xaxEsuA60mtABHKhQgi2EkQFH2IIBFABQTsiObWGA7G8fYiPMmQ4aamMbFATM3ofcDHOEw5v/3gjBBAYLQ3RFaFzhJjyIIlg4GBgmhA4i/DgOC8LD172wRZggYhJvzsRyqHCKQWyRFdDtwNZbGyHEctcBI8Rk0oMBKJOhABNwbRBUsAgYkiHR7klPA/AlMgyyl0PUGgN4VMOcEYAGDRTorCrjjUMQkmFdhMgMzFB7hhayfFifPYS2yEAxQhCQhB13gWipykBwB3GDNyFkf8cgQkFhO4h/9eAZLYiDwQSBsIfQORkNcJphBUGDDHxlGSoowJ4HYa+H7GAZnkWInegGAA0k5hhKGIEDYDQIUz2Ey8kQgwse8gBrRmBdFzDDAna9gBzkoALADrawh01sYP8a2LxOtrKX/83sZVfA19CuQAucN4E6i5CjCMlAJZGxBYuM2RALoEF1NDADGAigAHrylLo95YJ2o/vd8NbTCDLQqA1sIAYiEEEM9o3vfOvbCPYO+Axm8KhJaQABg0K3AEzwBgngWRAVESAzmrBKBGS2EAFIEwNIQAEKJOBJVAq5yBPQ8ZJ73EpYytKWyKSllbM8S2gKgcxJbnIKHNkQIPBzAQjNjN7GwQQXnwYI3omQazmjCl1oURRYXVU/xyFO0ACCCscmgUszowEc2IIiMSKNBSgSIRuwkNjHTvayN2iYIwj6MxZA9AG5/e3TVDs0WBBmuNv97k+3ozUIwARs4/3vAZpBC4ZaDf8CtMACdDzPuQvwdcBfx0/rEQEAWnBKbYRgCUsAgRSkMIYxLKAHIGjCFVRABC6ogAUg4IADII+QMHDg9bCHfQf29ZARKCD2uLdrHBDQgyawIK4fEAIQNL+EHoB+CJrvwReykAC2xaMHX/80Ij5QEmsbIgJ1j0MYJvFweARglLVfyCHk/JCDGuILLKmBXNkyhII+xOiGACRCrFwV8GeIMyKd6EsHsbKS4ACgQNB4D8NzSBEAZEAGqiEHNzBrOREFhrAELJEBFKMu57FMBcgmrpYTNsB0cpCBHQEXmXYeBYBGkNEAbvYcFxcAXsMSDlhd6WFjkNED6eEDGeN0FgFkguD/BO7HEo82GKKTE+o3CPvEEg7gLdKEHt/GFn2mHnpVZiXRgwQwdeehATYVEommHgIAQSNxHksgCKGmHiwEFgGQdOsRXCH4HPAyPfXRBRwYEiBQH9oWBeixAwEwBffBH1Thc+rxArqXIFZAH/bxA/1lDyFgg+mhARuAHgJgLvchAKdGED7xd9FyHxZ4D23gePmBAIIREkQggJioHmrwEl/4ifXBZvcQAMNEilj4iPOQBZ6oiuixfQRxhLBISs4nDx6QiLV4HxxwD1Kwi/gRWPbghMDIStYnD7tTjPcBa/KgBMp4HxPQfe7AY8+IhdIVDw3gWtVYH/TnDlmwjfaxAVWogg60CI7pkQPxQAbZZ47nUWDvcAWvyI7+N4jocIXyqB4FIH7tEADadI/p8WDtsIT+qB7R6A5IMJBltH7lkFUIiR7uqA7f05DqAQDSWA7/IpHpsXPsUI4YyRJhmA4S1JHpgYPo4AS0J5LPIQI3dw5v2BHnFo/+WAOTZg4yhpLnYX6xEAgAOw==);
  492.   -webkit-background-size: cover;
  493.   background-size: cover;
  494.   border-radius: 50%;
  495.   margin: 0;
  496.   padding: 0
  497. }
  498.  
  499. .bili-avatar * {
  500.   margin: 0;
  501.   padding: 0
  502. }
  503.  
  504. .bili-avatar-face {
  505.   position: absolute;
  506.   top: 50%;
  507.   left: 50%;
  508.   -webkit-transform: translate(-50%, -50%);
  509.   -moz-transform: translate(-50%, -50%);
  510.   -ms-transform: translate(-50%, -50%);
  511.   -o-transform: translate(-50%, -50%);
  512.   transform: translate(-50%, -50%);
  513.   width: 100%;
  514.   height: 100%
  515. }
  516.  
  517. .bili-avatar-pendent-dom {
  518.   height: 176.48%;
  519.   width: 176.48%;
  520.   position: absolute;
  521.   top: -38.33%;
  522.   left: -38.33%;
  523.   overflow: hidden
  524. }
  525.  
  526. .bili-avatar-pendent-dom img {
  527.   height: 100%;
  528.   min-width: 100%;
  529.   -webkit-user-select: none;
  530.   -moz-user-select: none;
  531.   -ms-user-select: none;
  532.   user-select: none
  533. }
  534.  
  535. .bili-avatar-img {
  536.   border: none;
  537.   display: block;
  538.   -o-object-fit: cover;
  539.   object-fit: cover;
  540.   image-rendering: -webkit-optimize-contrast
  541. }
  542.  
  543. .bili-avatar-img-radius {
  544.   border-radius: 50%
  545. }
  546.  
  547. .bili-avatar-img[src=""],
  548. .bili-avatar-img:not([src]) {
  549.   opacity: 0
  550. }
  551.  
  552. .bili-avatar-img.bili-avatar-img-error {
  553.   display: none
  554. }
  555.  
  556. .bili-avatar-right-icon {
  557.   width: 27.5%;
  558.   height: 27.5%;
  559.   position: absolute;
  560.   right: 0;
  561.   bottom: -1px;
  562.   -webkit-background-size: cover;
  563.   background-size: cover;
  564.   image-rendering: -webkit-optimize-contrast
  565. }
  566.  
  567. .bili-avatar-nft-icon {
  568.   position: absolute;
  569.   width: 27.5%;
  570.   height: 27.5%;
  571.   right: -webkit-calc(27.5% - 1px);
  572.   right: -moz-calc(27.5% - 1px);
  573.   right: calc(27.5% - 1px);
  574.   bottom: -1px;
  575.   -webkit-background-size: cover;
  576.   background-size: cover;
  577.   image-rendering: -webkit-optimize-contrast
  578. }
  579.  
  580. @-webkit-keyframes bili-avatar {
  581.   0% {
  582.     -webkit-transform: translate3d(0, 0, 0);
  583.     transform: translateZ(0)
  584.   }
  585.  
  586.   to {
  587.     -webkit-transform: translate3d(-97.5%, 0, 0);
  588.     transform: translate3d(-97.5%, 0, 0)
  589.   }
  590. }
  591.  
  592. @-moz-keyframes bili-avatar {
  593.   0% {
  594.     -moz-transform: translate3d(0, 0, 0);
  595.     transform: translateZ(0)
  596.   }
  597.  
  598.   to {
  599.     -moz-transform: translate3d(-97.5%, 0, 0);
  600.     transform: translate3d(-97.5%, 0, 0)
  601.   }
  602. }
  603.  
  604. @keyframes bili-avatar {
  605.   0% {
  606.     -webkit-transform: translate3d(0, 0, 0);
  607.     -moz-transform: translate3d(0, 0, 0);
  608.     transform: translateZ(0)
  609.   }
  610.  
  611.   to {
  612.     -webkit-transform: translate3d(-97.5%, 0, 0);
  613.     -moz-transform: translate3d(-97.5%, 0, 0);
  614.     transform: translate3d(-97.5%, 0, 0)
  615.   }
  616. }
  617.  
  618. .bili-avatar .bili-avatar-size-80 {
  619.   width: 22px;
  620.   height: 22px;
  621.   bottom: -1px
  622. }
  623.  
  624. .bili-avatar .bili-avatar-size-60,
  625. .bili-avatar .bili-avatar-size-50,
  626. .bili-avatar .bili-avatar-size-48 {
  627.   width: 18px;
  628.   height: 18px;
  629.   bottom: -1px
  630. }
  631.  
  632. .bili-avatar .bili-avatar-size-40,
  633. .bili-avatar .bili-avatar-size-36 {
  634.   width: 14px;
  635.   height: 14px;
  636.   bottom: -1px
  637. }
  638.  
  639. .bili-avatar .bili-avatar-size-30,
  640. .bili-avatar .bili-avatar-size-24 {
  641.   width: 12px;
  642.   height: 12px;
  643.   bottom: -1px
  644. }
  645.  
  646. .bili-avatar .bili-avatar-size-nft-80 {
  647.   width: 22px;
  648.   height: 22px;
  649.   bottom: -1px;
  650.   right: -webkit-calc(22px - 1px);
  651.   right: -moz-calc(22px - 1px);
  652.   right: 21px
  653. }
  654.  
  655. .bili-avatar .bili-avatar-size-nft-60,
  656. .bili-avatar .bili-avatar-size-nft-50,
  657. .bili-avatar .bili-avatar-size-nft-48 {
  658.   width: 18px;
  659.   height: 18px;
  660.   bottom: -1px;
  661.   right: -webkit-calc(18px - 1px);
  662.   right: -moz-calc(18px - 1px);
  663.   right: 17px
  664. }
  665.  
  666. .bili-avatar .bili-avatar-size-nft-40,
  667. .bili-avatar .bili-avatar-size-nft-36 {
  668.   width: 14px;
  669.   height: 14px;
  670.   bottom: -1px;
  671.   right: -webkit-calc(14px - 1px);
  672.   right: -moz-calc(14px - 1px);
  673.   right: 13px
  674. }
  675.  
  676. .bili-avatar .bili-avatar-size-nft-30,
  677. .bili-avatar .bili-avatar-size-nft-24 {
  678.   width: 12px;
  679.   height: 12px;
  680.   bottom: -1px;
  681.   right: -webkit-calc(12px - 1px);
  682.   right: -moz-calc(12px - 1px);
  683.   right: 11px
  684. }
  685.  
  686. .reply-image {
  687.   width: var(--3414c33c);
  688.   height: var(--822197ea)
  689. }
  690.  
  691. .reply-image.b-img {
  692.   background-color: inherit
  693. }
  694.  
  695. .reply-image.b-img img {
  696.   width: 100%;
  697.   height: 100%
  698. }
  699.  
  700. .opacity-enter-active,
  701. .opacity-leave-active {
  702.   transition: opacity .15s ease
  703. }
  704.  
  705. .opacity-enter-from,
  706. .opacity-leave-to {
  707.   opacity: 0
  708. }
  709.  
  710. .reply-box {
  711.   display: flex;
  712.   flex-direction: column
  713. }
  714.  
  715. .reply-box .box-normal {
  716.   display: flex;
  717.   z-index: 2
  718. }
  719.  
  720. .reply-box .box-normal .reply-box-avatar {
  721.   display: flex;
  722.   justify-content: center;
  723.   align-items: center;
  724.   width: 80px;
  725.   height: 48px
  726. }
  727.  
  728. .reply-box .box-normal .reply-box-warp {
  729.   position: relative;
  730.   flex: 1;
  731.   transition: .2s;
  732.   border: 1px solid var(--line_regular);
  733.   border-radius: 6px;
  734.   background-color: var(--bg3);
  735.   overflow-x: hidden
  736. }
  737.  
  738. .reply-box .box-normal .reply-box-warp.focus-within,
  739. .reply-box .box-normal .reply-box-warp:hover {
  740.   border-color: var(--line_regular);
  741.   background-color: var(--bg1)
  742. }
  743.  
  744. .reply-box .box-normal .reply-box-warp .textarea-wrap {
  745.   padding: 8px 0;
  746.   display: flex;
  747.   flex-direction: column;
  748.   width: 100%;
  749.   border-radius: 6px;
  750.   cursor: text;
  751.   overflow: hidden
  752. }
  753.  
  754. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info {
  755.   margin-left: 10px;
  756.   margin-bottom: 4px;
  757.   height: 20px;
  758.   font-size: 12px;
  759.   line-height: 17px;
  760.   display: flex;
  761.   align-items: center
  762. }
  763.  
  764. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag {
  765.   flex: none;
  766.   padding: 2px 6px;
  767.   border-radius: 2px;
  768.   margin-right: 4px
  769. }
  770.  
  771. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag--pink {
  772.   background-color: var(--Pi1);
  773.   color: var(--Pi5)
  774. }
  775.  
  776. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag--blue {
  777.   background-color: var(--brand_blue_thin);
  778.   color: var(--brand_blue)
  779. }
  780.  
  781. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__tag--gary {
  782.   background-color: var(--graph_bg_regular);
  783.   color: var(--text3)
  784. }
  785.  
  786. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__text {
  787.   max-width: calc(100% - 68px);
  788.   color: var(--text2)
  789. }
  790.  
  791. .reply-box .box-normal .reply-box-warp .textarea-wrap .vote-info__close {
  792.   flex: none;
  793.   margin-left: 4px;
  794.   cursor: pointer
  795. }
  796.  
  797. .reply-box .box-normal .reply-box-warp .reply-input {
  798.   padding: 0 8px;
  799.   width: 100%;
  800.   height: 100%;
  801.   border: 1px solid var(--Ga1);
  802.   border-radius: 6px;
  803.   background-color: var(--bg3);
  804.   font-family: inherit;
  805.   line-height: 20px;
  806.   color: var(--text1);
  807.   resize: none;
  808.   outline: none;
  809.   overflow-y: scroll;
  810.   overflow-x: hidden
  811. }
  812.  
  813. .reply-box .box-normal .reply-box-warp .reply-input.focus,
  814. .reply-box .box-normal .reply-box-warp .reply-input:hover {
  815.   background-color: var(--bg1);
  816.   border-color: var(--graph_weak)
  817. }
  818.  
  819. .reply-box .box-normal .reply-box-warp .reply-box-textarea {
  820.   padding: 0 8px;
  821.   width: 100%;
  822.   height: 32px;
  823.   border: none;
  824.   border-radius: 6px;
  825.   background-color: transparent;
  826.   font-family: inherit;
  827.   font-size: 14px;
  828.   line-height: 32px;
  829.   color: var(--text1);
  830.   resize: none;
  831.   outline: none
  832. }
  833.  
  834. .reply-box .box-normal .reply-box-warp .reply-box-textarea::placeholder {
  835.   color: var(--text3)
  836. }
  837.  
  838. .reply-box .box-normal .reply-box-warp .image-content-wrap {
  839.   background: transparent
  840. }
  841.  
  842. .reply-box .box-expand {
  843.   display: flex;
  844.   justify-content: space-between;
  845.   align-items: center;
  846.   margin-left: 80px;
  847.   margin-top: 10px;
  848.   z-index: 1;
  849.   height: 32px;
  850.   transition: all .2s ease-in-out
  851. }
  852.  
  853. .reply-box .box-expand.hide {
  854.   margin-top: 0;
  855.   height: 0;
  856.   overflow: hidden;
  857.   transition: all .2s ease-in-out
  858. }
  859.  
  860. .reply-box .box-expand .box-left {
  861.   display: flex;
  862.   align-items: center
  863. }
  864.  
  865. .reply-box .box-expand .reply-box-emoji {
  866.   width: 32px;
  867.   height: 26px;
  868.   margin-right: 6px;
  869.   position: relative
  870. }
  871.  
  872. .reply-box .box-expand .reply-box-emoji .emoji-btn {
  873.   display: flex;
  874.   justify-content: center;
  875.   align-items: center;
  876.   width: 100%;
  877.   height: 100%;
  878.   border: 1px solid var(--line_regular);
  879.   border-radius: 4px;
  880.   color: var(--text3);
  881.   cursor: pointer
  882. }
  883.  
  884. .reply-box .box-expand .at-btn {
  885.   display: flex;
  886.   justify-content: center;
  887.   align-items: center;
  888.   position: relative;
  889.   width: 32px;
  890.   height: 26px;
  891.   margin-right: 6px;
  892.   border: 1px solid var(--line_regular);
  893.   border-radius: 4px;
  894.   color: var(--text3);
  895.   cursor: pointer
  896. }
  897.  
  898. .reply-box .box-expand .image-btn {
  899.   display: flex;
  900.   justify-content: center;
  901.   align-items: center;
  902.   position: relative;
  903.   width: 32px;
  904.   height: 26px;
  905.   border: 1px solid var(--line_regular);
  906.   border-radius: 4px;
  907.   color: var(--text3);
  908.   cursor: pointer
  909. }
  910.  
  911. .reply-box .box-expand .image-btn.disabled {
  912.   opacity: .4
  913. }
  914.  
  915. .reply-box .box-expand .image-btn .image-upload-input {
  916.   appearance: none;
  917.   position: absolute;
  918.   top: 0;
  919.   left: 0;
  920.   width: 100%;
  921.   height: 100%;
  922.   opacity: 0;
  923.   font-size: 0;
  924.   user-select: auto;
  925.   cursor: pointer
  926. }
  927.  
  928. .reply-box .box-expand .forward-to-dynamic {
  929.   display: flex;
  930.   align-items: center;
  931.   margin-left: 16px;
  932.   font-size: 12px;
  933.   color: var(--text3)
  934. }
  935.  
  936. .reply-box .box-expand .forward-to-dynamic .forward-input,
  937. .reply-box .box-expand .forward-to-dynamic .forward-label {
  938.   cursor: pointer
  939. }
  940.  
  941. .reply-box .box-expand .reply-box-send {
  942.   float: right;
  943.   display: flex;
  944.   justify-content: center;
  945.   align-items: center;
  946.   position: relative;
  947.   width: 70px;
  948.   height: 32px;
  949.   border-radius: 6px;
  950.   cursor: pointer
  951. }
  952.  
  953. .reply-box .box-expand .reply-box-send .send-text {
  954.   position: absolute;
  955.   z-index: 1;
  956.   font-size: 16px;
  957.   color: var(--text_white)
  958. }
  959.  
  960. .reply-box .box-expand .reply-box-send:after {
  961.   content: "";
  962.   position: absolute;
  963.   opacity: .5;
  964.   width: 100%;
  965.   height: 100%;
  966.   border-radius: 4px;
  967.   background-color: var(--brand_blue)
  968. }
  969.  
  970. .reply-box .box-expand .reply-box-send:hover:after {
  971.   opacity: 1
  972. }
  973.  
  974. .reply-box.box-active .box-normal .reply-box-warp .reply-box-textarea.send-active {
  975.   line-height: normal
  976. }
  977.  
  978. .reply-box.box-active .reply-box-send.send-active:after {
  979.   opacity: 1
  980. }
  981.  
  982. .reply-box.disabled .box-normal .reply-box-warp .disable-mask {
  983.   display: flex;
  984.   justify-content: center;
  985.   align-items: center;
  986.   position: absolute;
  987.   top: 0;
  988.   left: 0;
  989.   z-index: 1;
  990.   width: 100%;
  991.   height: 100%;
  992.   border-radius: 6px;
  993.   font-size: 12px;
  994.   color: var(--text3);
  995.   background-color: var(--bg3)
  996. }
  997.  
  998. .reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask {
  999.   display: flex;
  1000.   align-items: center;
  1001.   justify-content: center;
  1002.   width: 100%;
  1003.   height: 100%;
  1004.   cursor: pointer
  1005. }
  1006.  
  1007. .reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask .login-btn {
  1008.   padding: 4px 9px;
  1009.   margin: 0 3px;
  1010.   border-radius: 4px;
  1011.   color: var(--text_white);
  1012.   background-color: var(--brand_blue)
  1013. }
  1014.  
  1015. .reply-box.disabled .box-normal .reply-box-warp .disable-mask .no-login-mask .login-btn:hover {
  1016.   background-color: var(--Lb4);
  1017.   cursor: pointer
  1018. }
  1019.  
  1020. .reply-box.disabled .reply-box-send .send-text {
  1021.   color: var(--text3)
  1022. }
  1023.  
  1024. .reply-box.disabled .reply-box-send:after {
  1025.   opacity: 1;
  1026.   background-color: var(--bg3)
  1027. }
  1028.  
  1029. .reply-box.fixed-box {
  1030.   position: relative;
  1031.   z-index: 2;
  1032.   padding: 15px 0;
  1033.   border-top: .5px solid var(--graph_bg_thick);
  1034.   background-color: var(--bg1)
  1035. }
  1036.  
  1037. .reply-content-container.fold .reply-content {
  1038.   display: -webkit-box;
  1039.   -webkit-box-orient: vertical;
  1040.   -webkit-line-clamp: 4
  1041. }
  1042.  
  1043. .reply-content-container .reply-content {
  1044.   color: var(--text1);
  1045.   overflow: hidden;
  1046.   word-wrap: break-word;
  1047.   word-break: break-word;
  1048.   white-space: pre-wrap;
  1049.   line-height: 24px;
  1050.   vertical-align: baseline
  1051. }
  1052.  
  1053. .reply-content-container .reply-content .note-prefix {
  1054.   display: inline-flex;
  1055.   align-items: center;
  1056.   justify-content: center;
  1057.   padding: 1px 4px;
  1058.   border-radius: 4px;
  1059.   margin-right: 8px;
  1060.   font-size: 12px;
  1061.   color: var(--text3);
  1062.   line-height: 20px;
  1063.   vertical-align: bottom;
  1064.   background-color: var(--bg2)
  1065. }
  1066.  
  1067. .reply-content-container .reply-content .note-prefix .note-icon {
  1068.   width: 16px;
  1069.   height: 16px
  1070. }
  1071.  
  1072. .reply-content-container .reply-content .top-icon {
  1073.   top: -2px;
  1074.   display: inline-flex;
  1075.   justify-content: center;
  1076.   align-items: center;
  1077.   position: relative;
  1078.   width: 30px;
  1079.   height: 18px;
  1080.   border: 1px solid var(--brand_pink);
  1081.   border-radius: 3px;
  1082.   margin-right: 5px;
  1083.   font-size: 12px;
  1084.   color: var(--brand_pink)
  1085. }
  1086.  
  1087. .reply-content-container .reply-content .emoji-small {
  1088.   vertical-align: text-bottom
  1089. }
  1090.  
  1091. @media screen and (max-width: 1681px) {
  1092.   .reply-content-container .reply-content .emoji-small {
  1093.     width: 20px;
  1094.     height: 20px
  1095.   }
  1096. }
  1097.  
  1098. @media screen and (min-width: 1681px) {
  1099.   .reply-content-container .reply-content .emoji-small {
  1100.     width: 22px;
  1101.     height: 22px
  1102.   }
  1103. }
  1104.  
  1105. .reply-content-container .reply-content .emoji-large {
  1106.   width: 50px;
  1107.   height: 50px;
  1108.   vertical-align: text-bottom
  1109. }
  1110.  
  1111. .reply-content-container .reply-content .icon {
  1112.   width: 20px;
  1113.   height: 20px;
  1114.   vertical-align: text-top
  1115. }
  1116.  
  1117. @media screen and (max-width: 1681px) {
  1118.   .reply-content-container .reply-content .icon {
  1119.     line-height: 24px
  1120.   }
  1121. }
  1122.  
  1123. @media screen and (min-width: 1681px) {
  1124.   .reply-content-container .reply-content .icon {
  1125.     line-height: 26px
  1126.   }
  1127. }
  1128.  
  1129. .reply-content-container .reply-content .icon.search-word {
  1130.   width: 12px;
  1131.   display: inline-block;
  1132.   background-size: contain;
  1133.   background-repeat: no-repeat
  1134. }
  1135.  
  1136. .reply-content-container .reply-content .jump-link {
  1137.   vertical-align: baseline
  1138. }
  1139.  
  1140. @media screen and (max-width: 1681px) {
  1141.   .reply-content-container .reply-content .jump-link {
  1142.     line-height: 24px
  1143.   }
  1144. }
  1145.  
  1146. @media screen and (min-width: 1681px) {
  1147.   .reply-content-container .reply-content .jump-link {
  1148.     line-height: 26px
  1149.   }
  1150. }
  1151.  
  1152. .reply-content-container .expand-content {
  1153.   color: var(--text_link);
  1154.   cursor: pointer;
  1155.   margin-left: 4px
  1156. }
  1157.  
  1158. .reply-content-container .expand-content:hover {
  1159.   color: var(--brand_blue)
  1160. }
  1161.  
  1162. .sub-reply-item {
  1163.   position: relative;
  1164.   padding: 8px 0 8px 42px;
  1165.   border-radius: 4px
  1166. }
  1167.  
  1168. @media screen and (max-width: 1681px) {
  1169.   .sub-reply-item {
  1170.     font-size: 15px;
  1171.     line-height: 24px
  1172.   }
  1173. }
  1174.  
  1175. @media screen and (min-width: 1681px) {
  1176.   .sub-reply-item {
  1177.     font-size: 16px;
  1178.     line-height: 26px
  1179.   }
  1180. }
  1181.  
  1182. .sub-reply-item.show-reply {
  1183.   background-color: #dff6fb;
  1184.   animation-name: enterAnimation-jumpReply-1f8a4018;
  1185.   animation-duration: 2s;
  1186.   animation-delay: 3s;
  1187.   animation-fill-mode: forwards
  1188. }
  1189.  
  1190. .sub-reply-item .sub-user-info {
  1191.   display: inline-flex;
  1192.   align-items: center;
  1193.   margin-right: 9px;
  1194.   line-height: 24px;
  1195.   vertical-align: baseline;
  1196.   white-space: nowrap
  1197. }
  1198.  
  1199. .sub-reply-item .sub-user-info .sub-reply-avatar {
  1200.   position: absolute;
  1201.   left: 8px;
  1202.   cursor: pointer
  1203. }
  1204.  
  1205. .sub-reply-item .sub-user-info .sub-user-name {
  1206.   font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
  1207.   font-weight: 500;
  1208.   margin-right: 5px;
  1209.   color: var(--3bab3096);
  1210.   cursor: pointer
  1211. }
  1212.  
  1213. @media screen and (max-width: 1681px) {
  1214.   .sub-reply-item .sub-user-info .sub-user-name {
  1215.     font-size: 13px;
  1216.     line-height: 24px
  1217.   }
  1218. }
  1219.  
  1220. @media screen and (min-width: 1681px) {
  1221.   .sub-reply-item .sub-user-info .sub-user-name {
  1222.     font-size: 14px;
  1223.     line-height: 26px
  1224.   }
  1225. }
  1226.  
  1227. @media (-webkit-max-device-pixel-ratio: 1) {
  1228.   .sub-reply-item .sub-user-info .sub-user-name {
  1229.     font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  1230.   }
  1231. }
  1232.  
  1233. .sub-reply-item .sub-user-info .sub-user-level {
  1234.   cursor: pointer
  1235. }
  1236.  
  1237. .sub-reply-item .sub-user-info .sub-up-icon {
  1238.   cursor: default
  1239. }
  1240.  
  1241. .sub-reply-item .sub-reply-info {
  1242.   display: flex;
  1243.   align-items: center;
  1244.   position: relative;
  1245.   margin-top: 2px;
  1246.   font-size: 13px;
  1247.   color: var(--text3)
  1248. }
  1249.  
  1250. .sub-reply-item .sub-reply-info .sub-reply-time {
  1251.   margin-right: var(--7530c1e4)
  1252. }
  1253.  
  1254. .sub-reply-item .sub-reply-info .sub-reply-location {
  1255.   margin-right: 20px
  1256. }
  1257.  
  1258. .sub-reply-item .sub-reply-info .sub-reply-like {
  1259.   display: flex;
  1260.   align-items: center;
  1261.   margin-right: 19px;
  1262.   cursor: pointer
  1263. }
  1264.  
  1265. .sub-reply-item .sub-reply-info .sub-reply-like .sub-like-icon {
  1266.   margin-right: 5px;
  1267.   color: #9499a0
  1268. }
  1269.  
  1270. .sub-reply-item .sub-reply-info .sub-reply-like .sub-like-icon:hover,
  1271. .sub-reply-item .sub-reply-info .sub-reply-like .sub-like-icon.liked {
  1272.   color: #00aeec
  1273. }
  1274.  
  1275. .sub-reply-item .sub-reply-info .sub-reply-dislike {
  1276.   display: flex;
  1277.   align-items: center;
  1278.   margin-right: 19px
  1279. }
  1280.  
  1281. .sub-reply-item .sub-reply-info .sub-reply-dislike .sub-dislike-icon {
  1282.   color: #9499a0;
  1283.   cursor: pointer
  1284. }
  1285.  
  1286. .sub-reply-item .sub-reply-info .sub-reply-dislike .sub-dislike-icon:hover,
  1287. .sub-reply-item .sub-reply-info .sub-reply-dislike .sub-dislike-icon.disliked {
  1288.   color: #00aeec
  1289. }
  1290.  
  1291. .sub-reply-item .sub-reply-info .sub-reply-btn {
  1292.   cursor: pointer
  1293. }
  1294.  
  1295. .sub-reply-item .sub-reply-info .sub-reply-btn:hover {
  1296.   color: var(--brand_blue)
  1297. }
  1298.  
  1299. .sub-reply-item .sub-reply-info .sub-reply-operation-warp {
  1300.   position: absolute;
  1301.   right: 40px;
  1302.   opacity: 0
  1303. }
  1304.  
  1305. .sub-reply-item:hover .sub-reply-info .sub-reply-operation-warp {
  1306.   opacity: 1
  1307. }
  1308.  
  1309. @keyframes enterAnimation-jumpReply-1f8a4018 {
  1310.   0% {
  1311.     background-color: #dff6fb
  1312.   }
  1313.  
  1314.   to {
  1315.     background-color: #dff6fb00
  1316.   }
  1317. }
  1318.  
  1319. .sub-reply-list .view-more {
  1320.   padding-left: 8px;
  1321.   font-size: 13px;
  1322.   color: var(--text3)
  1323. }
  1324.  
  1325. .sub-reply-list .view-more .view-more-default .view-more-btn {
  1326.   cursor: pointer
  1327. }
  1328.  
  1329. .sub-reply-list .view-more .view-more-default .view-more-btn:hover {
  1330.   color: var(--brand_blue)
  1331. }
  1332.  
  1333. .sub-reply-list .view-more .view-more-pagination {
  1334.   color: var(--text1)
  1335. }
  1336.  
  1337. .sub-reply-list .view-more .view-more-pagination .pagination-page-count {
  1338.   margin-right: 10px
  1339. }
  1340.  
  1341. .sub-reply-list .view-more .view-more-pagination .pagination-btn {
  1342.   margin: 0 4 0 14px;
  1343.   cursor: pointer
  1344. }
  1345.  
  1346. .sub-reply-list .view-more .view-more-pagination .pagination-btn:hover {
  1347.   color: var(--brand_blue)
  1348. }
  1349.  
  1350. .sub-reply-list .view-more .view-more-pagination .pagination-page-number {
  1351.   margin: 0 4px;
  1352.   cursor: pointer
  1353. }
  1354.  
  1355. .sub-reply-list .view-more .view-more-pagination .pagination-page-number:hover,
  1356. .sub-reply-list .view-more .view-more-pagination .pagination-page-number.current-page {
  1357.   color: var(--brand_blue)
  1358. }
  1359.  
  1360. .sub-reply-list .view-more .view-more-pagination .pagination-page-dot {
  1361.   margin: 0 4px;
  1362.   cursor: default
  1363. }
  1364.  
  1365. .image-exhibition {
  1366.   margin-top: 8px;
  1367.   user-select: none
  1368. }
  1369.  
  1370. .image-exhibition .preview-image-container {
  1371.   max-width: var(--dacbf126);
  1372.   display: flex;
  1373.   flex-wrap: wrap;
  1374.   row-gap: var(--77b1c8ee);
  1375.   column-gap: var(--0c349aa2)
  1376. }
  1377.  
  1378. .image-exhibition .preview-image-container .image-item-wrap {
  1379.   display: flex;
  1380.   justify-content: center;
  1381.   position: relative;
  1382.   border-radius: var(--7fefecd2);
  1383.   overflow: hidden;
  1384.   cursor: zoom-in
  1385. }
  1386.  
  1387. .image-exhibition .preview-image-container .image-item-wrap.vertical {
  1388.   flex-direction: column
  1389. }
  1390.  
  1391. .image-exhibition .preview-image-container .image-item-wrap.extra-long {
  1392.   justify-content: start
  1393. }
  1394.  
  1395. .image-exhibition .preview-image-container .image-item-wrap .more-image {
  1396.   display: flex;
  1397.   align-items: center;
  1398.   justify-content: center;
  1399.   position: absolute;
  1400.   right: 4px;
  1401.   bottom: 4px;
  1402.   height: 20px;
  1403.   padding: 0 6px;
  1404.   border-radius: 4px;
  1405.   font-size: 13px;
  1406.   color: var(--text_white);
  1407.   font-weight: 500;
  1408.   line-height: 18px;
  1409.   background: rgba(0, 0, 0, .7)
  1410. }
  1411.  
  1412. .image-exhibition .preview-image-container .client-image-item-warp:nth-child(3n+1) {
  1413.   border-bottom-right-radius: 0;
  1414.   border-top-right-radius: 0
  1415. }
  1416.  
  1417. .image-exhibition .preview-image-container .client-image-item-warp:nth-child(3n+2) {
  1418.   border-radius: 0
  1419. }
  1420.  
  1421. .image-exhibition .preview-image-container .client-image-item-warp:nth-child(3n+3) {
  1422.   border-bottom-left-radius: 0;
  1423.   border-top-left-radius: 0
  1424. }
  1425.  
  1426. .image-exhibition .preview-image-container .client-image-item-warp:nth-last-child(1) {
  1427.   border-bottom-right-radius: var(--7fefecd2);
  1428.   border-top-right-radius: var(--7fefecd2)
  1429. }
  1430.  
  1431. .image-exhibition .preview-image-container .expand-image-item-warp:nth-child(1) {
  1432.   border-radius: var(--7fefecd2) 0 0 0
  1433. }
  1434.  
  1435. .image-exhibition .preview-image-container .expand-image-item-warp:nth-child(3) {
  1436.   border-radius: 0 var(--7fefecd2) 0 0
  1437. }
  1438.  
  1439. .image-exhibition .preview-image-container .expand-image-item-warp:nth-child(7) {
  1440.   border-radius: 0 0 0 var(--7fefecd2)
  1441. }
  1442.  
  1443. .image-exhibition .preview-image-container .expand-image-item-warp:nth-child(9) {
  1444.   border-radius: 0 0 var(--7fefecd2) 0
  1445. }
  1446.  
  1447. .image-exhibition .preview-image-container .expand-image-item-warp:nth-child(3n+2) {
  1448.   border-radius: 0
  1449. }
  1450.  
  1451. .image-exhibition .preview-image-container .expand-image-item-warp.expand-image-two-rows:nth-child(4) {
  1452.   border-radius: 0 0 0 var(--7fefecd2)
  1453. }
  1454.  
  1455. .image-exhibition .preview-image-container .expand-image-item-warp.expand-image-two-rows:nth-child(6) {
  1456.   border-radius: 0 0 var(--7fefecd2) 0
  1457. }
  1458.  
  1459. .reply-user-sailing {
  1460.   height: 48px
  1461. }
  1462.  
  1463. .vote-warp {
  1464.   display: flex;
  1465.   width: 100%;
  1466.   height: 80px;
  1467.   border: .5px solid var(--graph_bg_thick);
  1468.   border-radius: 4px;
  1469.   margin: 10px 0
  1470. }
  1471.  
  1472. .vote-warp .vote-icon-warp {
  1473.   display: flex;
  1474.   justify-content: center;
  1475.   align-items: center;
  1476.   flex-basis: 80px;
  1477.   flex-shrink: 0;
  1478.   border-top-left-radius: 4px;
  1479.   border-bottom-left-radius: 4px;
  1480.   background-color: var(--brand_blue_thin)
  1481. }
  1482.  
  1483. .vote-warp .vote-icon-warp .vote-icon {
  1484.   width: 40px;
  1485.   height: 40px
  1486. }
  1487.  
  1488. .vote-warp .vote-container {
  1489.   display: flex;
  1490.   align-items: center;
  1491.   flex: 1;
  1492.   border-top-right-radius: 4px;
  1493.   border-bottom-right-radius: 4px;
  1494.   background-color: var(--bg1)
  1495. }
  1496.  
  1497. .vote-warp .vote-container .vote-text-warp {
  1498.   flex: 1;
  1499.   padding-left: 15px
  1500. }
  1501.  
  1502. .vote-warp .vote-container .vote-text-warp .vote-title {
  1503.   font-size: 14px;
  1504.   color: var(--text1)
  1505. }
  1506.  
  1507. .vote-warp .vote-container .vote-text-warp .vote-desc {
  1508.   margin-top: 10px;
  1509.   font-size: 12px;
  1510.   color: var(--text3)
  1511. }
  1512.  
  1513. .vote-warp .vote-container .vote-btn-warp {
  1514.   display: flex;
  1515.   justify-content: center;
  1516.   align-items: center;
  1517.   flex-basis: 90px;
  1518.   flex-shrink: 0
  1519. }
  1520.  
  1521. .vote-warp .vote-container .vote-btn-warp .vote-btn {
  1522.   width: 54px;
  1523.   height: 28px;
  1524.   border-radius: 4px;
  1525.   font-size: 13px;
  1526.   text-align: center;
  1527.   line-height: 28px;
  1528.   color: var(--text_white);
  1529.   background-color: var(--brand_blue);
  1530.   cursor: pointer
  1531. }
  1532.  
  1533. .vote-warp .vote-container .vote-btn-warp .vote-btn:hover {
  1534.   background-color: var(--Lb4)
  1535. }
  1536.  
  1537. .vote-dialog {
  1538.   max-height: 100vh;
  1539.   overflow-y: auto
  1540. }
  1541.  
  1542. .vote-dialog::-webkit-scrollbar {
  1543.   width: 4px;
  1544.   border-radius: 4px;
  1545.   background-color: transparent
  1546. }
  1547.  
  1548. .vote-dialog::-webkit-scrollbar-thumb {
  1549.   border-radius: 4px;
  1550.   background-color: var(--graph_bg_thick);
  1551.   transition: .3s ease-in-out
  1552. }
  1553.  
  1554. .vote-dialog::-webkit-scrollbar-track {
  1555.   border-radius: 4px;
  1556.   background-color: transparent
  1557. }
  1558.  
  1559. .vote-dialog .vote-iframe-warp {
  1560.   height: 600px;
  1561.   padding-top: 10px;
  1562.   border-top: .5px solid var(--graph_weak)
  1563. }
  1564.  
  1565. .vote-dialog .vote-iframe-warp .vote-iframe {
  1566.   width: 100%;
  1567.   height: 100%
  1568. }
  1569.  
  1570. .reply-item {
  1571.   position: relative
  1572. }
  1573.  
  1574. .reply-item .login-limit-mask {
  1575.   display: none;
  1576.   position: absolute;
  1577.   top: 0;
  1578.   right: 0;
  1579.   width: 100%;
  1580.   height: 100%;
  1581.   z-index: 10;
  1582.   pointer-events: none
  1583. }
  1584.  
  1585. .reply-item .login-limit-mask .mask-top {
  1586.   height: 80%;
  1587.   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg1) 100%)
  1588. }
  1589.  
  1590. .reply-item .login-limit-mask .mask-bottom {
  1591.   height: 20%;
  1592.   background: var(--bg1)
  1593. }
  1594.  
  1595. .reply-item.login-limit-reply-end .login-limit-mask {
  1596.   display: block
  1597. }
  1598.  
  1599. .reply-item .root-reply-container {
  1600.   padding: 22px 0 0 80px
  1601. }
  1602.  
  1603. .reply-item .root-reply-container.show-reply {
  1604.   animation-name: enterAnimation-jumpReply-7041f671;
  1605.   animation-duration: 5s;
  1606.   animation-fill-mode: forwards
  1607. }
  1608.  
  1609. .reply-item .root-reply-container .root-reply-avatar {
  1610.   display: flex;
  1611.   justify-content: center;
  1612.   position: absolute;
  1613.   left: 0;
  1614.   width: 80px;
  1615.   cursor: pointer
  1616. }
  1617.  
  1618. .reply-item .root-reply-container .content-warp {
  1619.   flex: 1;
  1620.   position: relative
  1621. }
  1622.  
  1623. .reply-item .root-reply-container .content-warp .reply-decorate {
  1624.   position: absolute;
  1625.   top: 0;
  1626.   right: 0;
  1627.   user-select: none;
  1628.   transform: translateY(-15px)
  1629. }
  1630.  
  1631. .reply-item .root-reply-container .content-warp .reply-decorate .easter-egg-label {
  1632.   width: 82px;
  1633.   height: 36px;
  1634.   transform: translateY(6px)
  1635. }
  1636.  
  1637. .reply-item .root-reply-container .content-warp .reply-decorate .easter-egg-label img {
  1638.   width: 100%;
  1639.   height: 100%
  1640. }
  1641.  
  1642. .reply-item .root-reply-container .content-warp .reply-decorate .selected-reply .selected-reply-icon {
  1643.   width: var(--213e47ca);
  1644.   height: var(--268890ba)
  1645. }
  1646.  
  1647. .reply-item .root-reply-container .content-warp .reply-decorate .user-sailing {
  1648.   display: flex;
  1649.   align-items: center
  1650. }
  1651.  
  1652. .reply-item .root-reply-container .content-warp .reply-decorate .user-sailing .user-sailing-img {
  1653.   height: 48px
  1654. }
  1655.  
  1656. .reply-item .root-reply-container .content-warp .reply-decorate .user-sailing .user-sailing-text {
  1657.   position: absolute;
  1658.   right: 0;
  1659.   font-size: 13px;
  1660.   color: var(--2bd55d12);
  1661.   line-height: 16px;
  1662.   word-break: keep-all;
  1663.   transform: scale(.7);
  1664.   transform-origin: center center
  1665. }
  1666.  
  1667. .reply-item .root-reply-container .content-warp .reply-decorate .user-sailing .user-sailing-text .sailing-text {
  1668.   font-family: fanscard
  1669. }
  1670.  
  1671. .reply-item .root-reply-container .content-warp .user-info {
  1672.   display: flex;
  1673.   align-items: center;
  1674.   margin-bottom: 4px
  1675. }
  1676.  
  1677. @media screen and (max-width: 1681px) {
  1678.   .reply-item .root-reply-container .content-warp .user-info {
  1679.     font-size: 13px
  1680.   }
  1681. }
  1682.  
  1683. @media screen and (min-width: 1681px) {
  1684.   .reply-item .root-reply-container .content-warp .user-info {
  1685.     font-size: 14px
  1686.   }
  1687. }
  1688.  
  1689. .reply-item .root-reply-container .content-warp .user-info .user-name {
  1690.   font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
  1691.   font-weight: 500;
  1692.   margin-right: 5px;
  1693.   color: var(--dc735352);
  1694.   cursor: pointer
  1695. }
  1696.  
  1697. @media (-webkit-max-device-pixel-ratio: 1) {
  1698.   .reply-item .root-reply-container .content-warp .user-info .user-name {
  1699.     font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  1700.   }
  1701. }
  1702.  
  1703. .reply-item .root-reply-container .content-warp .user-info .user-level {
  1704.   cursor: pointer
  1705. }
  1706.  
  1707. .reply-item .root-reply-container .content-warp .user-info .up-icon {
  1708.   cursor: default
  1709. }
  1710.  
  1711. .reply-item .root-reply-container .content-warp .user-info .contractor-box {
  1712.   display: flex;
  1713.   justify-content: center;
  1714.   align-items: center;
  1715.   position: relative;
  1716.   width: var(--697d5c46);
  1717.   height: 12px;
  1718.   padding: 2px;
  1719.   border-radius: 2px;
  1720.   background-color: var(--brand_pink_thin)
  1721. }
  1722.  
  1723. .reply-item .root-reply-container .content-warp .user-info .contractor-box.originalFan {
  1724.   border: .5px solid var(--brand_pink);
  1725.   background-color: transparent
  1726. }
  1727.  
  1728. .reply-item .root-reply-container .content-warp .user-info .contractor-box .contractor-text {
  1729.   display: flex;
  1730.   justify-content: center;
  1731.   align-items: center;
  1732.   font-size: 16px;
  1733.   transform-origin: center center;
  1734.   transform: scale(.5);
  1735.   position: absolute;
  1736.   color: var(--brand_pink);
  1737.   white-space: nowrap
  1738. }
  1739.  
  1740. .reply-item .root-reply-container .content-warp .user-info .fan-badge {
  1741.   display: flex;
  1742.   align-items: center;
  1743.   height: 14px;
  1744.   padding-left: 5px;
  1745.   border: .5px solid var(--3d3b5a1e);
  1746.   border-radius: 10px;
  1747.   margin-left: 5px;
  1748.   background-image: var(--35269ce2)
  1749. }
  1750.  
  1751. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-icon-wrap {
  1752.   display: flex;
  1753.   align-items: center;
  1754.   position: relative;
  1755.   width: var(--1f5204fd)
  1756. }
  1757.  
  1758. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-icon-wrap .badge-frist-icon {
  1759.   position: absolute;
  1760.   left: -8px;
  1761.   width: 20px;
  1762.   height: 20px
  1763. }
  1764.  
  1765. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-icon-wrap .badge-second-icon {
  1766.   position: absolute;
  1767.   right: 0;
  1768.   width: 8px;
  1769.   height: 11px
  1770. }
  1771.  
  1772. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-name-wrap {
  1773.   display: flex;
  1774.   justify-content: center;
  1775.   align-items: center;
  1776.   position: relative;
  1777.   width: var(--4f9eed68);
  1778.   height: 100%;
  1779.   margin-right: 4px
  1780. }
  1781.  
  1782. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-name-wrap .badge-name {
  1783.   display: flex;
  1784.   justify-content: center;
  1785.   align-items: center;
  1786.   font-size: 18px;
  1787.   transform-origin: center center;
  1788.   transform: scale(.5);
  1789.   position: absolute;
  1790.   top: 50%;
  1791.   left: 50%;
  1792.   color: var(--57e6be72);
  1793.   font-weight: 500;
  1794.   white-space: nowrap;
  1795.   transform: scale(.5) translate(-50%, -50%);
  1796.   transform-origin: 0 0
  1797. }
  1798.  
  1799. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-level-wrap {
  1800.   display: flex;
  1801.   align-items: center;
  1802.   justify-content: center;
  1803.   position: relative;
  1804.   width: 11.5px;
  1805.   height: 11.5px;
  1806.   border-radius: 50%;
  1807.   margin-right: .5px;
  1808.   background-color: var(--59f85baa)
  1809. }
  1810.  
  1811. .reply-item .root-reply-container .content-warp .user-info .fan-badge .badge-level-wrap .badge-level {
  1812.   display: flex;
  1813.   justify-content: center;
  1814.   align-items: center;
  1815.   font-size: 14px;
  1816.   transform-origin: center center;
  1817.   transform: scale(.5);
  1818.   position: absolute;
  1819.   top: 52%;
  1820.   left: 50%;
  1821.   font-family: Reeji-CloudHuPo-GBK;
  1822.   color: var(--103312b6);
  1823.   font-weight: 500;
  1824.   white-space: nowrap;
  1825.   line-height: 1;
  1826.   transform: scale(.5) translate(-50%, -43%);
  1827.   transform-origin: 0 0
  1828. }
  1829.  
  1830. .reply-item .root-reply-container .content-warp .vote-info {
  1831.   margin-bottom: 4px;
  1832.   height: 20px;
  1833.   font-size: 12px;
  1834.   line-height: 17px;
  1835.   display: flex;
  1836.   align-items: center
  1837. }
  1838.  
  1839. .reply-item .root-reply-container .content-warp .vote-info__tag {
  1840.   padding: 2px 6px;
  1841.   border-radius: 2px;
  1842.   margin-right: 4px;
  1843.   flex: none
  1844. }
  1845.  
  1846. .reply-item .root-reply-container .content-warp .vote-info__tag--pink {
  1847.   background-color: var(--Pi1);
  1848.   color: var(--Pi5)
  1849. }
  1850.  
  1851. .reply-item .root-reply-container .content-warp .vote-info__tag--blue {
  1852.   background-color: var(--brand_blue_thin);
  1853.   color: var(--brand_blue)
  1854. }
  1855.  
  1856. .reply-item .root-reply-container .content-warp .vote-info__tag--gray {
  1857.   background-color: var(--graph_bg_regular);
  1858.   color: var(--text3)
  1859. }
  1860.  
  1861. .reply-item .root-reply-container .content-warp .vote-info__text {
  1862.   color: var(--Ga7_u)
  1863. }
  1864.  
  1865. .reply-item .root-reply-container .content-warp .root-reply {
  1866.   position: relative;
  1867.   padding: 2px 0
  1868. }
  1869.  
  1870. @media screen and (max-width: 1681px) {
  1871.   .reply-item .root-reply-container .content-warp .root-reply {
  1872.     font-size: 15px;
  1873.     line-height: 24px
  1874.   }
  1875. }
  1876.  
  1877. @media screen and (min-width: 1681px) {
  1878.   .reply-item .root-reply-container .content-warp .root-reply {
  1879.     font-size: 16px;
  1880.     line-height: 26px
  1881.   }
  1882. }
  1883.  
  1884. .reply-item .root-reply-container .content-warp .root-reply .reply-content-container {
  1885.   display: block;
  1886.   overflow: hidden;
  1887.   width: 100%
  1888. }
  1889.  
  1890. .reply-item .root-reply-container .content-warp .root-reply .reply-info {
  1891.   display: flex;
  1892.   align-items: center;
  1893.   position: relative;
  1894.   margin-top: 2px;
  1895.   font-size: 13px;
  1896.   color: var(--text3)
  1897. }
  1898.  
  1899. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-time {
  1900.   margin-right: var(--472bae2d)
  1901. }
  1902.  
  1903. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-location {
  1904.   margin-right: 20px
  1905. }
  1906.  
  1907. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like {
  1908.   display: flex;
  1909.   align-items: center;
  1910.   margin-right: 19px;
  1911.   cursor: pointer
  1912. }
  1913.  
  1914. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like .like-icon {
  1915.   margin-right: 5px;
  1916.   color: #9499a0
  1917. }
  1918.  
  1919. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like .like-icon:hover,
  1920. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-like .like-icon.liked {
  1921.   color: #00aeec
  1922. }
  1923.  
  1924. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike {
  1925.   display: flex;
  1926.   align-items: center;
  1927.   margin-right: 19px
  1928. }
  1929.  
  1930. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike .dislike-icon {
  1931.   color: #9499a0;
  1932.   cursor: pointer
  1933. }
  1934.  
  1935. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike .dislike-icon:hover,
  1936. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-dislike .dislike-icon.disliked {
  1937.   color: #00aeec
  1938. }
  1939.  
  1940. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-btn {
  1941.   cursor: pointer
  1942. }
  1943.  
  1944. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-btn:hover {
  1945.   color: var(--brand_blue)
  1946. }
  1947.  
  1948. .reply-item .root-reply-container .content-warp .root-reply .reply-info .reply-operation-warp {
  1949.   position: absolute;
  1950.   right: 20px;
  1951.   display: none
  1952. }
  1953.  
  1954. .reply-item .root-reply-container .content-warp .root-reply .reply-tag-list {
  1955.   display: flex;
  1956.   align-items: center;
  1957.   margin-top: 6px;
  1958.   font-size: 12px;
  1959.   line-height: 17px
  1960. }
  1961.  
  1962. .reply-item .root-reply-container .content-warp .root-reply .reply-tag-list .reply-tag-item {
  1963.   padding: 2px 6px;
  1964.   border-radius: 2px;
  1965.   margin-right: 10px
  1966. }
  1967.  
  1968. .reply-item .root-reply-container:hover .content-warp .root-reply .reply-info .reply-operation-warp {
  1969.   display: block
  1970. }
  1971.  
  1972. .reply-item .sub-reply-container {
  1973.   padding-left: 72px
  1974. }
  1975.  
  1976. .reply-item .reply-box-container {
  1977.   padding: 25px 0 10px 80px
  1978. }
  1979.  
  1980. .reply-item .bottom-line {
  1981.   margin-left: 80px;
  1982.   border-bottom: 1px solid var(--graph_bg_thick);
  1983.   margin-top: 14px
  1984. }
  1985.  
  1986. .reply-item .reply-dynamic-card {
  1987.   position: absolute;
  1988.   z-index: 10;
  1989.   top: 30px;
  1990.   left: 400px
  1991. }
  1992.  
  1993. @keyframes enterAnimation-jumpReply-7041f671 {
  1994.   0% {
  1995.     background-color: #dff6fb
  1996.   }
  1997.  
  1998.   to {
  1999.     background-color: #dff6fb00
  2000.   }
  2001. }
  2002.  
  2003. .reply-list {
  2004.   margin-top: 14px;
  2005.   padding-bottom: 100px
  2006. }
  2007.  
  2008. .reply-list .reply-end-mark {
  2009.   height: 100px
  2010. }
  2011.  
  2012. .reply-list .reply-end,
  2013. .reply-list .reply-loading,
  2014. .reply-list .view-all-reply {
  2015.   margin-top: 20px;
  2016.   font-size: 13px;
  2017.   color: var(--text3);
  2018.   text-align: center
  2019. }
  2020.  
  2021. .reply-list .view-all-reply:hover {
  2022.   color: var(--brand_blue);
  2023.   cursor: pointer
  2024. }
  2025.  
  2026. .reply-list .login-prompt {
  2027.   display: flex;
  2028.   align-items: center;
  2029.   justify-content: center;
  2030.   width: calc(100% - 80px);
  2031.   height: 50px;
  2032.   margin: 16px 0 0 auto;
  2033.   border-radius: 6px;
  2034.   font-size: 14px;
  2035.   color: var(--brand_blue);
  2036.   background-color: var(--brand_blue_thin);
  2037.   transition: .2s;
  2038.   cursor: pointer
  2039. }
  2040.  
  2041. .reply-list .login-prompt:hover {
  2042.   background-color: var(--Lb2)
  2043. }
  2044.  
  2045. .user-card {
  2046.   position: absolute;
  2047.   top: var(--555c4a14);
  2048.   left: var(--8468e010);
  2049.   z-index: 10;
  2050.   width: 366px;
  2051.   border: .5px solid var(--graph_weak);
  2052.   border-radius: 8px;
  2053.   background-color: var(--bg1);
  2054.   box-shadow: 0 0 30px #0000001a
  2055. }
  2056.  
  2057. .user-card .card-bg {
  2058.   width: 100%;
  2059.   height: 85px;
  2060.   border-radius: 8px 8px 0 0;
  2061.   overflow: hidden;
  2062.   background-image: var(--71924242);
  2063.   background-size: cover;
  2064.   background-repeat: no-repeat;
  2065.   background-position: center
  2066. }
  2067.  
  2068. .user-card .user-card-avatar {
  2069.   display: flex;
  2070.   justify-content: center;
  2071.   position: absolute;
  2072.   width: 70px;
  2073.   margin-top: 10px;
  2074.   cursor: pointer
  2075. }
  2076.  
  2077. .user-card .card-content {
  2078.   display: flex;
  2079.   flex-direction: column;
  2080.   padding: 12px 20px 16px 70px
  2081. }
  2082.  
  2083. .user-card .card-content .card-user-info {
  2084.   display: flex;
  2085.   align-items: center;
  2086.   color: var(--text1);
  2087.   margin-bottom: 10px
  2088. }
  2089.  
  2090. .user-card .card-content .card-user-info .card-user-name {
  2091.   max-width: 160px;
  2092.   margin-right: 5px;
  2093.   font-size: 16px;
  2094.   font-weight: 600;
  2095.   overflow: hidden;
  2096.   white-space: nowrap;
  2097.   text-overflow: ellipsis;
  2098.   color: var(--text1);
  2099.   color: var(--7ba58c95);
  2100.   text-decoration: none
  2101. }
  2102.  
  2103. .user-card .card-content .card-user-info .card-user-sex {
  2104.   width: 16px;
  2105.   height: 16px;
  2106.   margin-right: 5px
  2107. }
  2108.  
  2109. .user-card .card-content .card-user-info .card-user-level {
  2110.   margin-right: 5px;
  2111.   cursor: pointer
  2112. }
  2113.  
  2114. .user-card .card-content .card-user-info .card-user-vip {
  2115.   display: flex;
  2116.   justify-content: center;
  2117.   align-items: center;
  2118.   width: var(--7a718880);
  2119.   height: 16px;
  2120.   padding: 1px 4px;
  2121.   border-radius: 2px;
  2122.   color: var(--612d8511);
  2123.   background-color: var(--29ab308e);
  2124.   cursor: default
  2125. }
  2126.  
  2127. .user-card .card-content .card-user-info .card-user-vip .card-vip-text {
  2128.   display: flex;
  2129.   justify-content: center;
  2130.   align-items: center;
  2131.   font-size: 20px;
  2132.   transform-origin: center center;
  2133.   transform: scale(.5);
  2134.   white-space: nowrap;
  2135.   font-style: normal
  2136. }
  2137.  
  2138. .user-card .card-content .card-social-info {
  2139.   display: flex;
  2140.   align-items: center;
  2141.   font-size: 12px;
  2142.   color: var(--text1)
  2143. }
  2144.  
  2145. .user-card .card-content .card-social-info .card-user-attention,
  2146. .user-card .card-content .card-social-info .card-user-fans,
  2147. .user-card .card-content .card-social-info .card-user-like {
  2148.   margin-right: 18px;
  2149.   color: inherit;
  2150.   text-decoration: none
  2151. }
  2152.  
  2153. .user-card .card-content .card-social-info .card-user-attention .social-info-title,
  2154. .user-card .card-content .card-social-info .card-user-fans .social-info-title,
  2155. .user-card .card-content .card-social-info .card-user-like .social-info-title {
  2156.   margin-left: 3px;
  2157.   color: var(--text3)
  2158. }
  2159.  
  2160. .user-card .card-content .card-verify-info {
  2161.   padding-top: 10px;
  2162.   font-size: 12px;
  2163.   color: var(--text3)
  2164. }
  2165.  
  2166. .user-card .card-content .card-verify-info .card-verify-icon {
  2167.   vertical-align: text-bottom;
  2168.   margin-right: 3px
  2169. }
  2170.  
  2171. .user-card .card-content .card-sign {
  2172.   padding-top: 8px;
  2173.   font-size: 12px;
  2174.   color: var(--text3);
  2175.   word-break: break-all
  2176. }
  2177.  
  2178. .user-card .card-content .card-btn-warp {
  2179.   display: flex;
  2180.   margin-top: 16px;
  2181.   font-size: 14px
  2182. }
  2183.  
  2184. .user-card .card-content .card-btn-warp .card-attention-btn {
  2185.   display: flex;
  2186.   justify-content: center;
  2187.   align-items: center;
  2188.   width: 100px;
  2189.   height: 30px;
  2190.   border-radius: 4px;
  2191.   margin-right: 8px;
  2192.   color: var(--text_white);
  2193.   background-color: var(--brand_blue);
  2194.   transition: .4s;
  2195.   cursor: pointer
  2196. }
  2197.  
  2198. .user-card .card-content .card-btn-warp .card-attention-btn .cancel-attention-text {
  2199.   display: none;
  2200.   position: absolute
  2201. }
  2202.  
  2203. .user-card .card-content .card-btn-warp .card-attention-btn.attention {
  2204.   color: var(--text2);
  2205.   background-color: var(--bg3)
  2206. }
  2207.  
  2208. .user-card .card-content .card-btn-warp .card-attention-btn.attention:hover .attention-text {
  2209.   display: none
  2210. }
  2211.  
  2212. .user-card .card-content .card-btn-warp .card-attention-btn.attention:hover .cancel-attention-text {
  2213.   display: inline
  2214. }
  2215.  
  2216. .user-card .card-content .card-btn-warp .card-message-btn {
  2217.   display: flex;
  2218.   justify-content: center;
  2219.   align-items: center;
  2220.   width: 100px;
  2221.   height: 30px;
  2222.   border: 1px solid var(--graph_weak);
  2223.   border-radius: 4px;
  2224.   color: var(--text2);
  2225.   cursor: pointer
  2226. }
  2227.  
  2228. .user-card .card-content .card-btn-warp .card-message-btn:hover {
  2229.   border-color: var(--brand_blue);
  2230.   color: var(--brand_blue)
  2231. }
  2232.  
  2233. .dynamic-card {
  2234.   display: flex;
  2235.   flex-direction: column;
  2236.   position: absolute;
  2237.   z-index: 10;
  2238.   top: var(--7b058890);
  2239.   left: 400px;
  2240.   width: 710px;
  2241.   height: 550px;
  2242.   border-radius: 6px;
  2243.   background-color: var(--bg1);
  2244.   box-shadow: 0 0 25px #00000026
  2245. }
  2246.  
  2247. .dynamic-card .card-header {
  2248.   display: flex;
  2249.   align-items: center;
  2250.   flex-basis: 50px;
  2251.   padding: 0 10px;
  2252.   border-bottom: .5px solid var(--line_light)
  2253. }
  2254.  
  2255. .dynamic-card .card-header .card-title {
  2256.   flex: 1;
  2257.   text-align: center;
  2258.   font-size: 16px;
  2259.   color: var(--text1)
  2260. }
  2261.  
  2262. .dynamic-card .card-header .close-card {
  2263.   display: flex;
  2264.   align-items: center;
  2265.   justify-content: center;
  2266.   width: 30px;
  2267.   height: 30px;
  2268.   border-radius: 6px;
  2269.   color: var(--text2);
  2270.   transition: .2s;
  2271.   cursor: pointer
  2272. }
  2273.  
  2274. .dynamic-card .card-header .close-card:hover {
  2275.   background-color: var(--bg3)
  2276. }
  2277.  
  2278. .dynamic-card .card-content {
  2279.   flex: 1
  2280. }
  2281.  
  2282. .dynamic-card .card-content::-webkit-scrollbar {
  2283.   width: 4px;
  2284.   border-radius: 4px;
  2285.   background-color: transparent
  2286. }
  2287.  
  2288. .dynamic-card .card-content::-webkit-scrollbar-thumb {
  2289.   border-radius: 4px;
  2290.   background-color: var(--graph_bg_thick);
  2291.   transition: .3s ease-in-out
  2292. }
  2293.  
  2294. .dynamic-card .card-content::-webkit-scrollbar-track {
  2295.   border-radius: 4px;
  2296.   background-color: transparent
  2297. }
  2298.  
  2299. .dynamic-card .card-content .dynamic-card-iframe {
  2300.   width: 100%;
  2301.   height: 100%
  2302. }
  2303.  
  2304. .reply-view-image {
  2305.   position: fixed;
  2306.   z-index: 999999;
  2307.   top: 0;
  2308.   left: 0;
  2309.   width: 100%;
  2310.   height: 100%;
  2311.   background: rgba(24, 25, 28, .85);
  2312.   transform: scale(1);
  2313.   user-select: none;
  2314.   cursor: default;
  2315.   -webkit-user-select: none;
  2316.   -moz-user-select: none;
  2317.   -ms-user-select: none;
  2318.   -webkit-user-drag: none
  2319. }
  2320.  
  2321. .reply-view-image,
  2322. .reply-view-image * {
  2323.   box-sizing: border-box
  2324. }
  2325.  
  2326. .reply-view-image .operation-btn .operation-btn-icon {
  2327.   display: flex;
  2328.   align-items: center;
  2329.   justify-content: center;
  2330.   position: absolute;
  2331.   z-index: 2;
  2332.   width: 42px;
  2333.   height: 42px;
  2334.   border-radius: 50%;
  2335.   color: var(--text_white);
  2336.   background: rgba(0, 0, 0, .58);
  2337.   transition: .2s;
  2338.   cursor: pointer
  2339. }
  2340.  
  2341. .reply-view-image .operation-btn .operation-btn-icon:hover {
  2342.   color: var(--brand_pink)
  2343. }
  2344.  
  2345. .reply-view-image .operation-btn .operation-btn-icon.close-container {
  2346.   top: 16px;
  2347.   right: 16px
  2348. }
  2349.  
  2350. .reply-view-image .operation-btn .operation-btn-icon.last-image {
  2351.   top: 50%;
  2352.   left: 16px;
  2353.   transform: translateY(-50%)
  2354. }
  2355.  
  2356. .reply-view-image .operation-btn .operation-btn-icon.next-image {
  2357.   top: 50%;
  2358.   right: 16px;
  2359.   transform: translateY(-50%)
  2360. }
  2361.  
  2362. .reply-view-image .show-image-wrap {
  2363.   display: flex;
  2364.   align-items: center;
  2365.   justify-content: center;
  2366.   position: absolute;
  2367.   width: 100%;
  2368.   height: 100%;
  2369.   max-height: 100%;
  2370.   padding: 0 100px;
  2371.   overflow: auto
  2372. }
  2373.  
  2374. .reply-view-image .show-image-wrap .loading-svga {
  2375.   position: absolute;
  2376.   top: 50%;
  2377.   left: 50%;
  2378.   transform: translate(-50%, -50%);
  2379.   width: 42px;
  2380.   height: 42px
  2381. }
  2382.  
  2383. .reply-view-image .show-image-wrap.vertical {
  2384.   flex-direction: column;
  2385.   justify-content: var(--c186e874)
  2386. }
  2387.  
  2388. .reply-view-image .show-image-wrap .image-content {
  2389.   width: calc(100vw - 200px);
  2390.   max-width: var(--34114ac9);
  2391.   -webkit-user-drag: none
  2392. }
  2393.  
  2394. .reply-view-image .preview-list {
  2395.   display: flex;
  2396.   align-items: center;
  2397.   position: absolute;
  2398.   left: 50%;
  2399.   bottom: 30px;
  2400.   z-index: 2;
  2401.   padding: 6px 10px;
  2402.   border-radius: 8px;
  2403.   background: rgba(24, 25, 28, .8);
  2404.   backdrop-filter: blur(20px);
  2405.   transform: translate(-50%)
  2406. }
  2407.  
  2408. .reply-view-image .preview-list .preview-item-box {
  2409.   padding: 1px;
  2410.   border: 2px solid transparent;
  2411.   border-radius: 8px;
  2412.   transition: .3s;
  2413.   cursor: pointer
  2414. }
  2415.  
  2416. .reply-view-image .preview-list .preview-item-box.active {
  2417.   border-color: var(--brand_pink)
  2418. }
  2419.  
  2420. .reply-view-image .preview-list .preview-item-box .preview-item-wrap {
  2421.   display: flex;
  2422.   justify-content: center;
  2423.   overflow: hidden;
  2424.   width: 100%;
  2425.   height: 100%;
  2426.   border-radius: 6px
  2427. }
  2428.  
  2429. .reply-view-image .preview-list .preview-item-box .preview-item-wrap.vertical {
  2430.   flex-direction: column
  2431. }
  2432.  
  2433. .reply-view-image .preview-list .preview-item-box .preview-item-wrap.extra-long {
  2434.   justify-content: start
  2435. }
  2436.  
  2437. .reply-view-image .preview-list .preview-item-box .preview-item-wrap .item-content {
  2438.   -webkit-user-drag: none
  2439. }
  2440.  
  2441. .reply-view-image--transition-enter-active,
  2442. .reply-view-image--transition-leave-active {
  2443.   transition: all .3s ease
  2444. }
  2445.  
  2446. .reply-view-image--transition-enter-from,
  2447. .reply-view-image--transition-leave-to {
  2448.   transform: scale(.4);
  2449.   opacity: 0
  2450. }
  2451.  
  2452. .reply-warp {
  2453.   position: relative
  2454. }
  2455.  
  2456. .reply-warp .fixed-reply-box {
  2457.   position: fixed;
  2458.   bottom: 0;
  2459.   left: var(--3e88ddc5);
  2460.   z-index: 10;
  2461.   width: var(--d9a0b070)
  2462. }
  2463.  
  2464. .reply-warp .fixed-reply-box .reply-box-shadow {
  2465.   position: absolute;
  2466.   top: -10px;
  2467.   z-index: 1;
  2468.   width: 100%;
  2469.   height: 36px;
  2470.   border-radius: 50%;
  2471.   background-color: #00000014;
  2472.   filter: blur(10px)
  2473. }
  2474.  
  2475. .reply-warp .fixed-reply-box--transition-enter-active,
  2476. .reply-warp .fixed-reply-box--transition-leave-active {
  2477.   transition: opacity .5s ease
  2478. }
  2479.  
  2480. .reply-warp .fixed-reply-box--transition-enter-from,
  2481. .reply-warp .fixed-reply-box--transition-leave-to {
  2482.   opacity: 0
  2483. }
  2484.  
  2485. .bili-comment.browser-pc {
  2486.   background-color: var(--bg1)
  2487. }
  2488.  
  2489. .bili-comment.browser-pc * {
  2490.   font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  2491.   font-weight: 400;
  2492.   box-sizing: border-box;
  2493.   -webkit-font-smoothing: antialiased
  2494. }
  2495.  
  2496. @media (-webkit-max-device-pixel-ratio: 1) {
  2497.   .bili-comment.browser-pc * {
  2498.     font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  2499.   }
  2500. }
  2501.  
  2502. .bili-comment.browser-pc * ul {
  2503.   padding: 0;
  2504.   margin: 0;
  2505.   list-style: none
  2506. }
  2507.  
  2508. .bili-comment.browser-pc * a {
  2509.   text-decoration: none;
  2510.   background-color: transparent;
  2511.   color: var(--text_link);
  2512.   cursor: pointer
  2513. }
  2514.  
  2515. .bili-comment.browser-pc * a:hover {
  2516.   color: var(--Lb4)
  2517. }
  2518.  
  2519. .bili-comment.browser-pc * i {
  2520.   font-style: normal
  2521. }
  2522.  
  2523. .bili-comment.browser-pc * p {
  2524.   margin: 0;
  2525.   padding: 0
  2526. }
  2527.  
  2528. .bili-comment.browser-pc .comment-container {
  2529.   animation-name: enterAnimation-commentContainer;
  2530.   animation-duration: 1s;
  2531.   animation-fill-mode: forwards
  2532. }
  2533.  
  2534. .reply-operation-client {
  2535.   display: inline-flex;
  2536.   position: relative
  2537. }
  2538.  
  2539. .reply-operation-client .operation-icon {
  2540.   border-radius: 4px;
  2541.   cursor: pointer
  2542. }
  2543.  
  2544. .reply-operation-client .operation-icon:hover {
  2545.   background-color: var(--graph_bg_thick)
  2546. }
  2547.  
  2548. .reply-operation-client .operation-list {
  2549.   display: flex;
  2550.   flex-direction: column;
  2551.   position: absolute;
  2552.   top: 10px;
  2553.   right: 0;
  2554.   z-index: 10;
  2555.   width: 180px;
  2556.   padding: 12px 0;
  2557.   border-radius: 6px;
  2558.   font-size: 14px;
  2559.   color: var(--text2);
  2560.   background-color: var(--bg1_float);
  2561.   box-shadow: 0 0 5px #0003
  2562. }
  2563.  
  2564. .reply-operation-client .operation-list .operation-option {
  2565.   display: flex;
  2566.   align-items: center;
  2567.   height: 40px;
  2568.   padding: 0 15px;
  2569.   cursor: pointer
  2570. }
  2571.  
  2572. .reply-operation-client .operation-list .operation-option:hover {
  2573.   background-color: var(--graph_bg_thick)
  2574. }
  2575.  
  2576. .reply-operation-client .operation-list .delete-reply-modal {
  2577.   position: absolute;
  2578.   top: 0;
  2579.   left: 50%;
  2580.   width: auto;
  2581.   padding: 10px 20px;
  2582.   border: 1px solid var(--graph_bg_thick);
  2583.   border-radius: 8px;
  2584.   margin-bottom: 100px;
  2585.   font-size: 12px;
  2586.   line-height: 12px;
  2587.   text-align: center;
  2588.   white-space: nowrap;
  2589.   background-color: var(--bg1);
  2590.   box-shadow: 0 0 5px #0003;
  2591.   transform: translate(-50%, -100%)
  2592. }
  2593.  
  2594. .reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn {
  2595.   display: flex;
  2596.   justify-content: center
  2597. }
  2598.  
  2599. .reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .comfirm-delete {
  2600.   display: flex;
  2601.   justify-content: center;
  2602.   align-items: center;
  2603.   width: 40px;
  2604.   height: 20px;
  2605.   border-radius: 4px;
  2606.   margin-right: 20px;
  2607.   color: var(--text_white);
  2608.   background-color: var(--brand_blue)
  2609. }
  2610.  
  2611. .reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .comfirm-delete:hover {
  2612.   background-color: var(--Lb4)
  2613. }
  2614.  
  2615. .reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .cancel-delete {
  2616.   display: flex;
  2617.   justify-content: center;
  2618.   align-items: center;
  2619.   width: 40px;
  2620.   height: 20px
  2621. }
  2622.  
  2623. .reply-operation-client .operation-list .delete-reply-modal .delete-reply-btn .cancel-delete:hover {
  2624.   color: var(--brand_blue)
  2625. }
  2626.  
  2627. .select-reply-dialog-client .select-dialog-content {
  2628.   text-align: left
  2629. }
  2630.  
  2631. .select-reply-dialog-client .cancel-select-reply {
  2632.   width: 130px;
  2633.   margin-right: 20px
  2634. }
  2635.  
  2636. .select-reply-dialog-client .comfirm-select-reply {
  2637.   width: 130px
  2638. }
  2639.  
  2640. .close-reply-dialog-client .close-reply-dialog-content {
  2641.   text-align: left
  2642. }
  2643.  
  2644. .close-reply-dialog-client .cancel-close-reply {
  2645.   width: 130px;
  2646.   margin-right: 20px
  2647. }
  2648.  
  2649. .close-reply-dialog-client .comfirm-close-reply {
  2650.   width: 130px
  2651. }
  2652.  
  2653. .close-danmaku-dialog-client .close-danmaku-dialog-content {
  2654.   text-align: left
  2655. }
  2656.  
  2657. .close-danmaku-dialog-client .cancel-close-danmaku {
  2658.   width: 130px;
  2659.   margin-right: 20px
  2660. }
  2661.  
  2662. .close-danmaku-dialog-client .comfirm-close-danmaku {
  2663.   width: 130px
  2664. }
  2665.  
  2666. .blacklist-dialog-client .blacklist-dialog-content {
  2667.   text-align: center
  2668. }
  2669.  
  2670. .blacklist-dialog-client .comfirm-pull-blacklist {
  2671.   margin-right: 20px
  2672. }
  2673.  
  2674. .reply-header-client .reply-notice {
  2675.   display: flex;
  2676.   align-items: center;
  2677.   position: relative;
  2678.   height: 40px;
  2679.   padding: 11px 14px;
  2680.   margin-bottom: 10px;
  2681.   font-size: 12px;
  2682.   border-radius: 2px;
  2683.   color: var(--text_notice);
  2684.   background-color: var(--Or0);
  2685.   cursor: pointer
  2686. }
  2687.  
  2688. .reply-header-client .reply-notice .notice-content {
  2689.   flex: 1;
  2690.   position: relative;
  2691.   padding: 0 5px;
  2692.   line-height: 18px;
  2693.   vertical-align: top;
  2694.   word-wrap: break-word;
  2695.   word-break: break-all;
  2696.   white-space: nowrap;
  2697.   overflow: hidden;
  2698.   text-overflow: ellipsis;
  2699.   transition: 2s
  2700. }
  2701.  
  2702. .reply-header-client .reply-navigation {
  2703.   margin: 12px 0
  2704. }
  2705.  
  2706. .reply-header-client .reply-navigation .nav-bar {
  2707.   display: flex;
  2708.   align-items: center;
  2709.   position: relative;
  2710.   list-style: none;
  2711.   margin: 0;
  2712.   padding: 0
  2713. }
  2714.  
  2715. .reply-header-client .reply-navigation .nav-bar .nav-select-reply {
  2716.   font-size: 12px;
  2717.   color: var(--text1)
  2718. }
  2719.  
  2720. .reply-header-client .reply-navigation .nav-bar .nav-sort {
  2721.   display: flex;
  2722.   align-items: center;
  2723.   font-size: 12px;
  2724.   color: var(--text3)
  2725. }
  2726.  
  2727. .reply-header-client .reply-navigation .nav-bar .nav-sort .part-symbol {
  2728.   height: 10px;
  2729.   margin: 0 8px;
  2730.   border-left: solid 1px
  2731. }
  2732.  
  2733. .reply-header-client .reply-navigation .nav-bar .nav-sort .hot-sort {
  2734.   cursor: pointer
  2735. }
  2736.  
  2737. .reply-header-client .reply-navigation .nav-bar .nav-sort .hot-sort:hover {
  2738.   color: var(--brand_blue)
  2739. }
  2740.  
  2741. .reply-header-client .reply-navigation .nav-bar .nav-sort .time-sort {
  2742.   cursor: pointer
  2743. }
  2744.  
  2745. .reply-header-client .reply-navigation .nav-bar .nav-sort .time-sort:hover {
  2746.   color: var(--brand_blue)
  2747. }
  2748.  
  2749. .reply-header-client .reply-navigation .nav-bar .nav-sort.hot .hot-sort,
  2750. .reply-header-client .reply-navigation .nav-bar .nav-sort.time .time-sort {
  2751.   color: var(--text1)
  2752. }
  2753.  
  2754. .reply-header-client .reply-navigation .nav-operation-warp {
  2755.   position: absolute;
  2756.   right: 0
  2757. }
  2758.  
  2759. .reply-box-client {
  2760.   display: flex;
  2761.   flex-direction: column
  2762. }
  2763.  
  2764. .reply-box-client .reply-box-warp {
  2765.   position: relative;
  2766.   flex: 1
  2767. }
  2768.  
  2769. .reply-box-client .reply-box-warp .reply-box-textarea {
  2770.   width: 100%;
  2771.   height: 32px;
  2772.   padding: 5px 12px;
  2773.   border: 1px solid transparent;
  2774.   border-radius: 6px;
  2775.   line-height: 20px;
  2776.   color: var(--text1);
  2777.   background-color: var(--bg2);
  2778.   resize: none;
  2779.   outline: none;
  2780.   transition: .2s
  2781. }
  2782.  
  2783. .reply-box-client .reply-box-warp .reply-box-textarea::placeholder {
  2784.   color: var(--text4)
  2785. }
  2786.  
  2787. .reply-box-client .reply-box-warp .reply-box-textarea.focus,
  2788. .reply-box-client .reply-box-warp .reply-box-textarea:hover {
  2789.   border-color: var(--brand_pink)
  2790. }
  2791.  
  2792. .reply-box-client .box-operation-warp {
  2793.   display: flex;
  2794.   align-items: center;
  2795.   margin-top: 10px;
  2796.   height: 32px
  2797. }
  2798.  
  2799. .reply-box-client .box-operation-warp .reply-box-emoji {
  2800.   position: relative;
  2801.   margin-right: auto
  2802. }
  2803.  
  2804. .reply-box-client .box-operation-warp .reply-box-emoji .box-emoji-icon {
  2805.   cursor: pointer
  2806. }
  2807.  
  2808. .reply-box-client .box-operation-warp .reply-box-send {
  2809.   display: flex;
  2810.   justify-content: center;
  2811.   align-items: center;
  2812.   position: relative;
  2813.   width: 70px;
  2814.   height: 100%;
  2815.   border-radius: 4px;
  2816.   cursor: pointer
  2817. }
  2818.  
  2819. .reply-box-client .box-operation-warp .reply-box-send .send-text {
  2820.   position: absolute;
  2821.   z-index: 1;
  2822.   color: var(--text_white)
  2823. }
  2824.  
  2825. .reply-box-client .box-operation-warp .reply-box-send:after {
  2826.   content: "";
  2827.   position: absolute;
  2828.   opacity: .5;
  2829.   width: 100%;
  2830.   height: 100%;
  2831.   border-radius: 4px;
  2832.   background-color: var(--brand_pink)
  2833. }
  2834.  
  2835. .reply-box-client .box-operation-warp .reply-box-send:hover:after {
  2836.   opacity: 1
  2837. }
  2838.  
  2839. .reply-box-client.box-active .reply-box-warp .reply-box-textarea {
  2840.   height: 60px
  2841. }
  2842.  
  2843. .reply-box-client.box-active .reply-box-send.send-active:after {
  2844.   opacity: 1
  2845. }
  2846.  
  2847. .reply-box-client.disabled .reply-box-warp .disable-mask {
  2848.   display: flex;
  2849.   justify-content: center;
  2850.   align-items: center;
  2851.   position: absolute;
  2852.   top: 0;
  2853.   left: 0;
  2854.   z-index: 1;
  2855.   width: 100%;
  2856.   height: 100%;
  2857.   border-radius: 6px;
  2858.   font-size: 12px;
  2859.   color: var(--text3);
  2860.   background-color: var(--bg3)
  2861. }
  2862.  
  2863. .reply-box-client.disabled .reply-box-warp .disable-mask .no-login-mask {
  2864.   cursor: pointer
  2865. }
  2866.  
  2867. .reply-box-client.disabled .box-operation-warp .reply-box-send {
  2868.   cursor: not-allowed
  2869. }
  2870.  
  2871. .reply-box-client.disabled .box-operation-warp .reply-box-send .send-text {
  2872.   color: var(--text3)
  2873. }
  2874.  
  2875. .reply-box-client.disabled .box-operation-warp .reply-box-send:after {
  2876.   opacity: 1;
  2877.   background-color: var(--bg3)
  2878. }
  2879.  
  2880. .note-prefix {
  2881.   vertical-align: -3px;
  2882.   display: inline-flex;
  2883.   align-items: center;
  2884.   justify-content: center;
  2885.   padding: 0 3px;
  2886.   line-height: 19px;
  2887.   border-radius: 4px;
  2888.   margin-right: 6px;
  2889.   font-size: 12px;
  2890.   color: var(--text3);
  2891.   background-color: var(--bg2)
  2892. }
  2893.  
  2894. .note-prefix .note-icon {
  2895.   width: 16px;
  2896.   height: 16px
  2897. }
  2898.  
  2899. .reply-content-client {
  2900.   color: var(--text1);
  2901.   overflow: hidden;
  2902.   word-wrap: break-word;
  2903.   word-break: break-word;
  2904.   white-space: pre-wrap;
  2905.   vertical-align: baseline;
  2906.   transition: .2s
  2907. }
  2908.  
  2909. .reply-content-client.root {
  2910.   line-height: 25px
  2911. }
  2912.  
  2913. .reply-content-client.need-view-more {
  2914.   display: -webkit-box;
  2915.   -webkit-box-orient: vertical;
  2916.   overflow: hidden
  2917. }
  2918.  
  2919. .reply-content-client.sub {
  2920.   line-height: 20px
  2921. }
  2922.  
  2923. .reply-content-client .top-icon {
  2924.   display: inline-flex;
  2925.   justify-content: center;
  2926.   align-items: center;
  2927.   position: relative;
  2928.   width: 30px;
  2929.   height: 18px;
  2930.   border: 1px solid var(--brand_pink);
  2931.   border-radius: 3px;
  2932.   margin-right: 5px;
  2933.   font-size: 12px;
  2934.   color: var(--brand_pink);
  2935.   vertical-align: 1px
  2936. }
  2937.  
  2938. .reply-content-client .emoji-small {
  2939.   width: 20px;
  2940.   height: 20px;
  2941.   vertical-align: text-bottom
  2942. }
  2943.  
  2944. .reply-content-client .emoji-large {
  2945.   width: 36px;
  2946.   height: 36px;
  2947.   vertical-align: text-bottom
  2948. }
  2949.  
  2950. .reply-content-client .jump-link {
  2951.   vertical-align: baseline
  2952. }
  2953.  
  2954. .reply-content-client .icon {
  2955.   width: 20px;
  2956.   height: 20px;
  2957.   vertical-align: text-top
  2958. }
  2959.  
  2960. .reply-content-client .icon.vote {
  2961.   width: 16px;
  2962.   height: 16px;
  2963.   margin-right: 3px;
  2964.   vertical-align: text-bottom
  2965. }
  2966.  
  2967. .reply-content-client .icon.search-word {
  2968.   width: 12px;
  2969.   display: inline-block;
  2970.   background-size: contain;
  2971.   background-repeat: no-repeat
  2972. }
  2973.  
  2974. .view-more-reply {
  2975.   font-size: 12px;
  2976.   color: var(--text_link);
  2977.   line-height: 17px;
  2978.   cursor: pointer
  2979. }
  2980.  
  2981. .view-more-reply:hover {
  2982.   color: var(--Lb4)
  2983. }
  2984.  
  2985. .sub-reply-item-client {
  2986.   display: -webkit-box;
  2987.   -webkit-box-orient: vertical;
  2988.   -webkit-line-clamp: 2;
  2989.   position: relative;
  2990.   max-height: 42px;
  2991.   padding: 3px 0;
  2992.   font-size: 14px;
  2993.   overflow: hidden
  2994. }
  2995.  
  2996. .sub-reply-item-client .sub-user-info {
  2997.   display: inline-flex;
  2998.   align-items: center;
  2999.   color: var(--text2);
  3000.   line-height: 20px;
  3001.   vertical-align: baseline;
  3002.   white-space: nowrap
  3003. }
  3004.  
  3005. .sub-reply-item-client .sub-user-info .sub-user-name {
  3006.   margin-right: 5px;
  3007.   font-size: 14px;
  3008.   cursor: pointer
  3009. }
  3010.  
  3011. .sub-reply-item-client .sub-user-info .sub-up-icon {
  3012.   margin-right: 4px;
  3013.   cursor: default
  3014. }
  3015.  
  3016. .sub-reply-list-client {
  3017.   border-radius: 4px;
  3018.   padding: 7px 10px;
  3019.   margin-top: 12px;
  3020.   background-color: var(--bg2_float)
  3021. }
  3022.  
  3023. .sub-reply-list-client .view-more {
  3024.   margin-top: 4px;
  3025.   cursor: pointer
  3026. }
  3027.  
  3028. .sub-reply-list-client .view-more .view-more-text {
  3029.   font-size: 12px;
  3030.   color: var(--text_link)
  3031. }
  3032.  
  3033. .sub-reply-list-client .view-more .view-more-text:hover {
  3034.   color: var(--Lb4)
  3035. }
  3036.  
  3037. .content-warp--blacklist .reply-content {
  3038.   display: inline-flex;
  3039.   align-items: center;
  3040.   padding: 4px;
  3041.   border-radius: 4px;
  3042.   color: var(--text1);
  3043.   background-color: var(--bg2_float)
  3044. }
  3045.  
  3046. .content-warp--blacklist .reply-content .ban-icon {
  3047.   margin-right: 4px
  3048. }
  3049.  
  3050. .content-warp--blacklist .reply-header {
  3051.   display: flex;
  3052.   align-items: center;
  3053.   margin-bottom: 8px
  3054. }
  3055.  
  3056. .content-warp--blacklist .reply-header .root-reply-avatar {
  3057.   display: flex;
  3058.   justify-content: center;
  3059.   position: absolute;
  3060.   left: 0;
  3061.   cursor: pointer
  3062. }
  3063.  
  3064. .content-warp--blacklist .reply-header .root-reply-avatar .blacklist-avatar {
  3065.   width: 30px;
  3066.   height: 30px
  3067. }
  3068.  
  3069. .content-warp--blacklist .reply-header .reply-info .balcklist-name {
  3070.   color: var(--text1)
  3071. }
  3072.  
  3073. .reply-item-client {
  3074.   position: relative;
  3075.   padding: 10px 0 14px 42px;
  3076.   border-bottom: 1px solid var(--line_light)
  3077. }
  3078.  
  3079. .reply-item-client .content-warp {
  3080.   flex: 1;
  3081.   position: relative
  3082. }
  3083.  
  3084. .reply-item-client .content-warp .reply-header {
  3085.   display: flex;
  3086.   align-items: center;
  3087.   margin-bottom: 8px
  3088. }
  3089.  
  3090. .reply-item-client .content-warp .reply-header .root-reply-avatar {
  3091.   display: flex;
  3092.   justify-content: center;
  3093.   position: absolute;
  3094.   left: -42px;
  3095.   cursor: pointer
  3096. }
  3097.  
  3098. .reply-item-client .content-warp .reply-header .reply-info {
  3099.   display: flex;
  3100.   flex-direction: column
  3101. }
  3102.  
  3103. .reply-item-client .content-warp .reply-header .reply-info .user-info {
  3104.   display: flex;
  3105.   align-items: center;
  3106.   font-size: 13px;
  3107.   color: var(--text2)
  3108. }
  3109.  
  3110. .reply-item-client .content-warp .reply-header .reply-info .user-info .user-name {
  3111.   margin-right: 5px;
  3112.   color: var(--be794234);
  3113.   cursor: pointer
  3114. }
  3115.  
  3116. .reply-item-client .content-warp .reply-header .reply-info .user-info .user-level {
  3117.   margin-right: 5px;
  3118.   cursor: pointer
  3119. }
  3120.  
  3121. .reply-item-client .content-warp .reply-header .reply-info .user-info .up-icon {
  3122.   cursor: default
  3123. }
  3124.  
  3125. .reply-item-client .content-warp .reply-header .reply-info .reply-time {
  3126.   font-size: 12px;
  3127.   color: var(--text3)
  3128. }
  3129.  
  3130. .reply-item-client .content-warp .root-reply {
  3131.   position: relative;
  3132.   font-size: 15px;
  3133.   line-height: 25px;
  3134.   transition: .2s
  3135. }
  3136.  
  3137. .reply-item-client .content-warp .root-reply .reply-operation-warp {
  3138.   display: flex;
  3139.   align-items: center;
  3140.   position: relative;
  3141.   margin-top: 12px;
  3142.   font-size: 13px;
  3143.   color: var(--text3);
  3144.   line-height: 16px
  3145. }
  3146.  
  3147. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like {
  3148.   display: flex;
  3149.   align-items: center;
  3150.   margin-right: 19px;
  3151.   cursor: pointer
  3152. }
  3153.  
  3154. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like .like-icon {
  3155.   margin-right: 5px;
  3156.   color: var(--text3)
  3157. }
  3158.  
  3159. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like .like-icon:hover,
  3160. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-like .like-icon.liked {
  3161.   color: var(--brand_pink)
  3162. }
  3163.  
  3164. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike {
  3165.   display: flex;
  3166.   align-items: center;
  3167.   margin-right: 19px
  3168. }
  3169.  
  3170. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike .dislike-icon {
  3171.   color: var(--text3);
  3172.   cursor: pointer
  3173. }
  3174.  
  3175. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike .dislike-icon:hover,
  3176. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-dislike .dislike-icon.disliked {
  3177.   color: var(--brand_pink)
  3178. }
  3179.  
  3180. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-icon {
  3181.   color: var(--text3);
  3182.   cursor: pointer
  3183. }
  3184.  
  3185. .reply-item-client .content-warp .root-reply .reply-operation-warp .reply-icon:hover {
  3186.   color: var(--brand_pink)
  3187. }
  3188.  
  3189. .reply-item-client .content-warp .root-reply .reply-operation-warp .more-operation {
  3190.   display: none;
  3191.   position: absolute;
  3192.   right: 20px
  3193. }
  3194.  
  3195. .reply-item-client .content-warp .reply-item-box {
  3196.   margin-top: 12px
  3197. }
  3198.  
  3199. .reply-item-client .content-warp .reply-tag-list {
  3200.   display: flex;
  3201.   align-items: center;
  3202.   margin-top: 12px;
  3203.   font-size: 12px;
  3204.   line-height: 14px
  3205. }
  3206.  
  3207. .reply-item-client .content-warp .reply-tag-list .reply-tag-item {
  3208.   padding: 5px 6px;
  3209.   border-radius: 2px;
  3210.   margin-right: 10px;
  3211.   color: var(--text2);
  3212.   background-color: var(--bg2_float)
  3213. }
  3214.  
  3215. .reply-item-client:hover .content-warp .root-reply .reply-operation-warp .more-operation {
  3216.   display: block
  3217. }
  3218.  
  3219. .reply-list {
  3220.   position: relative;
  3221.   margin-top: 14px;
  3222.   padding-bottom: 100px
  3223. }
  3224.  
  3225. .reply-list .reply-empty {
  3226.   margin-top: 100px;
  3227.   text-align: center;
  3228.   font-size: 14px;
  3229.   color: var(--text3)
  3230. }
  3231.  
  3232. .reply-list .reply-end-mark {
  3233.   height: 100px
  3234. }
  3235.  
  3236. .reply-list .reply-end,
  3237. .reply-list .reply-loading {
  3238.   margin-top: 20px;
  3239.   font-size: 13px;
  3240.   color: var(--text3);
  3241.   text-align: center
  3242. }
  3243.  
  3244. .fixed-reply-box {
  3245.   bottom: 0;
  3246.   z-index: 20;
  3247.   width: 100%
  3248. }
  3249.  
  3250. .fixed-reply-box .reply-box-wrap {
  3251.   background-color: var(--bg1);
  3252.   padding: 14px 0;
  3253.   border-top: 1px solid var(--line_light)
  3254. }
  3255.  
  3256. .fixed-reply-box .reply-box-shadow {
  3257.   position: absolute;
  3258.   top: -10px;
  3259.   z-index: -1;
  3260.   height: 36px;
  3261.   border-radius: 50%;
  3262.   background-color: #00000014;
  3263.   filter: blur(10px);
  3264.   width: calc(100% - 72px);
  3265.   left: 50%;
  3266.   transform: translate(-50%)
  3267. }
  3268.  
  3269. .reply-detail {
  3270.   flex: 1
  3271. }
  3272.  
  3273. .reply-detail .reply-header {
  3274.   display: flex;
  3275.   align-items: center;
  3276.   position: sticky;
  3277.   z-index: 9;
  3278.   top: 0;
  3279.   left: 0;
  3280.   height: 46px;
  3281.   border-bottom: 1px solid var(--line_light);
  3282.   margin-bottom: 14px;
  3283.   background-color: var(--bg1)
  3284. }
  3285.  
  3286. .reply-detail .reply-header .return-icon {
  3287.   display: flex;
  3288.   justify-content: center;
  3289.   align-items: center;
  3290.   width: 32px;
  3291.   height: 32px;
  3292.   border-radius: 4px;
  3293.   margin-right: 4px;
  3294.   color: var(--text1);
  3295.   cursor: pointer
  3296. }
  3297.  
  3298. .reply-detail .reply-header .return-icon:hover {
  3299.   background-color: var(--graph_bg_thick)
  3300. }
  3301.  
  3302. .reply-detail .reply-header .reply-title {
  3303.   font-size: 16px;
  3304.   font-weight: 600;
  3305.   color: var(--text1)
  3306. }
  3307.  
  3308. .dialog-reply {
  3309.   flex: 1
  3310. }
  3311.  
  3312. .dialog-reply .reply-header {
  3313.   display: flex;
  3314.   align-items: center;
  3315.   position: sticky;
  3316.   z-index: 9;
  3317.   top: 0;
  3318.   left: 0;
  3319.   height: 46px;
  3320.   border-bottom: 1px solid var(--line_light);
  3321.   margin-bottom: 14px;
  3322.   background-color: var(--bg1)
  3323. }
  3324.  
  3325. .dialog-reply .reply-header .return-icon {
  3326.   display: flex;
  3327.   justify-content: center;
  3328.   align-items: center;
  3329.   width: 32px;
  3330.   height: 32px;
  3331.   border-radius: 4px;
  3332.   margin-right: 4px;
  3333.   color: var(--text1);
  3334.   cursor: pointer
  3335. }
  3336.  
  3337. .dialog-reply .reply-header .return-icon:hover {
  3338.   background-color: var(--graph_bg_thick)
  3339. }
  3340.  
  3341. .dialog-reply .reply-header .reply-title {
  3342.   font-size: 16px;
  3343.   font-weight: 600;
  3344.   color: var(--text1)
  3345. }
  3346.  
  3347. .bili-comment.client {
  3348.   background-color: var(--bg1)
  3349. }
  3350.  
  3351. .bili-comment.client * {
  3352.   box-sizing: border-box;
  3353.   font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  3354.   -webkit-font-smoothing: antialiased
  3355. }
  3356.  
  3357. .bili-comment.client * ul {
  3358.   list-style: none
  3359. }
  3360.  
  3361. .bili-comment.client * a {
  3362.   text-decoration: none;
  3363.   background-color: transparent;
  3364.   color: var(--text_link);
  3365.   cursor: pointer
  3366. }
  3367.  
  3368. .bili-comment.client * a:hover {
  3369.   color: var(--Lb4)
  3370. }
  3371.  
  3372. .bili-comment.client * i {
  3373.   font-style: normal
  3374. }
  3375.   `;
  3376.   document.head.appendChild(styleElement);
  3377. })();