社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103

全站通知:

Widget:评论区/css

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

<style>

  1. flowthread {

display: none !important; }

  1. NewWikiComment {

position: relative; }

  1. NewWikiComment .input {

height: 5em; display: flex; }

  1. NewWikiComment .input * {

height: 100%; margin: 0 0.5em; }

  1. NewWikiComment .input textarea {

padding: 0.5em; resize: none; flex: 1; }

  1. NewWikiComment .input .submit {

aspect-ratio: 1/1; border-radius: 1em; display: flex; justify-content: center; align-items: center; background: #00aeec; color: white; font-weight: bold; }

  1. NewWikiComment .option {

margin: 1em; }

  1. NewWikiComment .option .sort {

display: flex; flex-direction: column; align-items: flex-end; }

  1. NewWikiComment .option .sort > div {

display: flex; align-items: center; }

  1. NewWikiComment .option .sort [data-type="by"]:before {

content: "按"; }

  1. NewWikiComment .option .sort > div > div {

padding: 0 0.5em; border-radius: 0.5em; }

  1. NewWikiComment .option .sort > div > div.active {

background: dimgray; color: white; }

  1. NewWikiComment ol {

list-style-type: none; margin: 1em; border: 1px solid lightgray; }

  1. NewWikiComment ol:empty {

display: none; }

  1. NewWikiComment ol li {

margin: 1em 0; display: flex; flex-direction: column; }

  1. NewWikiComment ol li .body {

width: 100%; padding-top: 1em; border-top: 1px solid lightgray; display: flex; align-items: flex-start; }

  1. NewWikiComment ol li .body > div {

display: flex; flex-direction: column; }

  1. NewWikiComment ol li .left {

padding: 0.5em; }

  1. NewWikiComment ol li .right {

flex: 1; }

  1. NewWikiComment ol li .left .avatar img {

width: 48px; height: 48px; border-radius: 50%; }

  1. NewWikiComment ol li .right .text {

font-size: 1.2em; margin: 0.5em; word-break: break-all; white-space: break-spaces; }

  1. NewWikiComment ol li .right .foot {

font-size: 0.8em; color: gray; display: flex; flex-direction: column; }

  1. NewWikiComment ol li .right .foot > div {

display: flex; }

  1. NewWikiComment ol li .right .foot > div > div {

margin: 0.5em; }

  1. NewWikiComment ol li .right .foot .info .index:before {

content: "#"; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="like"]:before {

content: "👍"; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="dislike"]:before {

content: "🦶"; }

  1. NewWikiComment ol li .right .foot .funBox [data-action].checked {

font-weight: bold; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="like"].checked {

color: red; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="dislike"].checked {

color: black; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="like"].checked:before {

content: "❤️"; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="dislike"].checked:before {

content: "🖤"; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="reply"]:before {

content: "💬"; }

  1. NewWikiComment ol li .right .foot .funBox [data-action="delete"]:before {

content: "❌"; }

  1. NewWikiComment .mask {

position: absolute; width: 100%; height: 100%; background: black; top: 0; left: 0; opacity: 0.1; }

  1. NewWikiComment:not(.loading) .mask {

display: none; }

  1. NewWikiComment .input .submit,
  2. NewWikiComment .option .sort > div > div,
  3. NewWikiComment ol li .right .foot .funBox > div {

cursor: pointer; } </style>