karin-plugin-kkk/resources/template/bilibili/css/comment.css

Karin 的「抖音」「B 站」视频解析/动态推送插件

body.light-mode .container {
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
  width: 1440px;
  height: auto;
}

.comment-container {
  max-width: 100%;
  /* 宽度设置为百分之百，以适应不同屏幕大小 */
  margin: 0 0 70px 0;
  /* overflow: auto; */
}

.comment {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  /* border-bottom: 1px solid #e7d8d8; */
  padding: 0px 40px 0px 40px;
  position: relative;
}

.user-avatar {
  margin-top: 50px;
  width: 187.5px;
  height: 187.5px;
  border-radius: 50%;
  margin-right: 33.75px;
  -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 30%);
  box-shadow: 0 20px 50px 0 rgb(0 0 0 / 30%);
  background: url('https://i0.hdslb.com/bfs/face/member/noface.jpg');
  position: absolute;
}

.user-avatar-1 {
  width: 220px;
  height: 220px;
  margin-right: 33.75px;
  margin-top: 50px;
  -webkit-transform: translateY(-7%) translateX(-8%) scale(1.5);
  -moz-transform: translateY(-7%) translateX(-8%) scale(1.5);
  -ms-transform: translateY(-7%) translateX(-8%) scale(1.5);
  -o-transform: translateY(-7%) translateX(-8%) scale(1.5);
  transform: translateY(-7%) translateX(-8%) scale(1.5);
}

.user-avatar-2 {
  width: 145px;
  height: 145px;
  margin-right: -140px;
  -webkit-transform: translateY(97%) translateX(-116%) scale(0.5);
  -moz-transform: translateY(97%) translateX(-116%) scale(0.5);
  -ms-transform: translateY(97%) translateX(-116%) scale(0.5);
  -o-transform: translateY(97%) translateX(-116%) scale(0.5);
  transform: translateY(97%) translateX(-116%) scale(0.5);
}

/* 当img元素为空时，设置元素透明度为0，图裂图标将被隐藏 */
img[src=''],
img:not([src]) {
  opacity: 0;
}

.comment-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /* overflow: hidden; */
}

.user-info {
  margin-bottom: -50px;
  font-size: 50px;
  position: relative;
  /* 将容器设置为相对定位 */
}

.user-info svg {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(-5%) scale(0.5);
  -moz-transform: translateY(-5%) scale(0.5);
  -ms-transform: translateY(-5%) scale(0.5);
  -o-transform: translateY(-5%) scale(0.5);
  transform: translateY(-5%) scale(0.5);
}

.Z3o6vw6l {
  display: inline-block;
  /* 使元素在一行显示 */
  padding: 0px 20px 2px 20px;
  /* 调整内边距 */
  border-radius: 10px;
  /* 添加圆角 */
  margin-left: 10px;
  /* 调整左边距 */
  font-size: 45px;
}

.comment-imgbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0;
  overflow: hidden;
  -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  width: 95%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /* 让容器自动调整大小 */
}

.comment-imgbox_1 {
  border-radius: 25px;
  -o-object-fit: contain;
  object-fit: contain;
  /* 图片按原比例完整显示在容器内 */
  width: 100%;
  /* 让图片宽度充满父容器 */
  height: 100%;
  /* 让图片高度充满父容器 */
}

.comment-text {
  font-size: 60px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.6;
  white-space: pre-wrap;
}

.comment-text img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(-10%) scale(0.9);
  -moz-transform: translateY(-10%) scale(0.9);
  -ms-transform: translateY(-10%) scale(0.9);
  -o-transform: translateY(-10%) scale(0.9);
  transform: translateY(-10%) scale(0.9);
}

.like-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /* 将子元素分别靠左和靠右 */
  color: #888;
  margin-top: 37.5px;
  white-space: nowrap;
  /* 防止文本换行 */
}

.info-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.additional-info {
  font-size: 45px;
  letter-spacing: 2px;
  /* 调整字间距*/
}

.like_info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}

.like-icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}

.like-count {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 50px;
  /* 调整字体大小 */
  margin-left: auto;
}

.video_info_container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* 垂直居中 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #3a3a3a;
}

.svg_container {
  margin-top: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: -40px;
}

.svg_container img {
  width: 580px;
  height: auto;
  margin-bottom: 20px;
}

.top-info {
  /* margin-top: 50px; 添加顶部间距 */
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;

  letter-spacing: 6px;
  /* 调整字间距*/
  font-size: 45px;
  white-space: normal;
  /* 允许自动换行 */
  word-break: break-all;
  /* 如果单词过长,允许在任意位置换行 */
  text-align: left;
}

.qrcode_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: -40px;
}

.qrcode {
  margin-top: 80px;
}

.qrcode_text {
  font-size: 45px;
  margin-top: 20px;
  /* 调整垂直间距 */
}

/* 深色模式样式 */
body.dark-mode {
  background-color: #121212;
  color: #fff;
  /* 其他深色模式下的样式 */
}

/* 浅色模式样式 */
body.light-mode {
  background-color: #f4f4f4;
  color: #333;
  /* 其他浅色模式下的样式 */
}

body.dark-mode .container {
  background-color: #121212;
  color: #fff;
}

/* 针对特定元素的样式 */
body.dark-mode .comment-text {
  color: #f4f4f4;
}

body.dark-mode .video_info_container {
  color: #c3c3c3;
}

body.dark-mode .comment-text img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(-10%) scale(0.9);
  -moz-transform: translateY(-10%) scale(0.9);
  -ms-transform: translateY(-10%) scale(0.9);
  -o-transform: translateY(-10%) scale(0.9);
  transform: translateY(-10%) scale(0.9);
}

body.light-mode .comment-text {
  color: #333;
}

body.light-mode .comment-imgbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0;
  overflow: hidden;
  -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  width: 95%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.user-avatar .comment-imgbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0;
  overflow: hidden;
  -webkit-box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  width: 95%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

body.dark-mode .comment-imgbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 10px 100px 0px #96969642;
  box-shadow: 0px 10px 100px 0px #96969642;
  border-radius: 25px;
  width: 95%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.dark-mode .user-avatar {
  margin-bottom: 50px;
  width: 187.5px;
  height: 187.5px;
  border-radius: 50%;
  margin-right: 33.75px;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-box-shadow: 0px 10px 20px 0px #96969642;
  box-shadow: 0px 10px 20px 0px #96969642;
}