bf-static/libs/fixed_comment/fixed_comment.css

Bowen Young 和 Felix hen 的静态资源库

div#post-comment.fixedcomment {
    position: fixed;
    top: 0;
    width: 60%;
    right: 0;
    padding: 25px 30px 20px 20px;
    height: 100vh;
    overflow: scroll;
    z-index: 90;
    background: rgba(222, 222, 222, 0.95);
    box-shadow:3px 2px 14px #464340;
    animation: fixedright 0.5s linear;
}
div#post-comment.fixedcomment::-webkit-scrollbar {
width: 0;
}
div#quit-board{
  display: none;
}
div#quit-board.fixedcomment {
  position: fixed;
  display:block!important;
  left: 0;
  top: 0;
  width: 40%;
  height: 100vh;
  z-index: 89!important;
  background: rgba(25,25,25,0.3);
  filter: blur(4px) !important;
  animation: fixedleft 0.5s linear;
}
/*手机端样式适配*/
@media screen and (max-width: 768px) {
  div#post-comment.fixedcomment {
      width: 90%;
      right: 0;
  }
  div#quit-board.fixedcomment {
    width: 10%;
  }
}
/*动画效果*/
@keyframes fixedright {
  from {right:-50%;}
  to {right:0;}
}
@keyframes fixedleft {
  from {left:-50%;}
  to {left:0;}
}
/* 夜间模式匹配 */
[data-theme="dark"]
  div#post-comment.fixedcomment {
      background: rgba(35, 35, 35, 0.95);
      box-shadow:3px 2px 12px #90a1a4;
  }
[data-theme="dark"]
  div#quit-board.fixedcomment {
    background: rgba(147, 146, 128, 0.3);
  }