分享自用的论坛 css 扩展

自己用GPT改的，改善阅读体验

功能介绍：

1. 
   

   关闭右侧广告和新用户
   
   

   
   


2. 
   

   关闭页脚
   
   

   
   


3. 
   

   增大字体--帖子列表，帖子详情

   
   


4. 
   

   帖子详情页--增大翻页按钮间距（减少误点击），高亮当前页码

   
   


5. 
   

   帖子详情页--楼层 发帖时间直接显示时分秒

   
   


6. 
   

   帖子详情页 楼层卡片--缩小回复内容上下过多空白
   
   

   
   


7. 
   

   帖子列表页--增大翻页按钮间距（减少误点击），高亮当前页码

   
   


8. 
   

   帖子列表页--隐藏最后回帖人，最后回复时间等信息，减少信息干扰，避免信息过多导致手机端换行

   
   


9. 
   

   帖子列表页--增加卡片间距，避免帖子挤在一块，浏览更清爽
   
   

   
   


10. 
    

    夜间模式纯黑背景
    
    

    
    


11. 
    

    夜间模式下略微压暗帖子里的图片亮度

    
    


12. 
    

    左上角按钮背景颜色沉浸（白天为白色，夜间模式为纯黑），避免突兀颜色影响手机状态栏沉浸
    
    

    
    


13. 
    

    投喂鸡腿--确认窗口下移，方便手机用户点击
    
    

    
    

代码（复制代码，到设置-论坛扩展-自定义style 粘贴，点“确定”保存）：

:root{--ns-link:#1677ff;--ns-time:#858585}



body.dark-layout header>ul.mobile-nav,

body.dark-layout #nsk-head,

body.dark-layout header #nsk-head>ul.nav-menu,

body.dark-layout #nsk-body,

body.dark-layout #nsk-left-panel-container>div{background:#000!important}

body.dark-layout{--ns-time:#b8b8b8}

body.dark-layout header>ul.mobile-nav a{color:var(--text-color)!important}



@media (min-width:769px){body.dark-layout header{background:#000!important}}



html,body{overflow-x:hidden}

#nsk-body-left,.post-list-content,.post-list .post-title,.post-list .post-info,.nsk-post-wrapper,.nsk-post .post-title,.comment-container,.post-content,.signature,.signature *{min-width:0;overflow-wrap:anywhere;word-break:break-word}

.post-content img,.post-content video,.post-content iframe,.post-content table{max-width:100%!important}

body.dark-layout .post-content img{filter:brightness(0.92)!important}

.post-content table{display:block;overflow-x:auto}



#nsk-body-left .post-list .post-list-item .post-title,.post-content p{font-size:15px!important}

#nsk-body-left .post-list .post-list-item+.post-list-item{margin-top:12px!important}



#nsk-body-left .nsk-pager.pager-top>div>a[href$="/page-100"],

#nsk-body-left .nsk-pager.pager-bottom>div>a[href$="/page-100"]{display:none!important}

.post-list .info-last-commenter,

.post-list .info-last-comment-time{display:none!important}



.nsk-content-meta-info .content-info .date-created time{display:inline-block!important;color:transparent!important;font-size:0!important;line-height:0!important;position:relative;white-space:nowrap!important}

.nsk-content-meta-info .content-info .date-created time::after{content:attr(title);display:inline-block;color:var(--ns-time)!important;font-size:11px;line-height:1.4;white-space:nowrap}



/* Pagers: list/detail/user-space */

#nsk-body-left .nsk-pager.pager-top>div,

#nsk-body-left .nsk-pager.pager-bottom>div,

#nsk-body-left .comment-container .post-top-pager>div,

#nsk-body-left .comment-container .post-bottom-pager>div,

#nsk-frame .selector .nsk-pager>div{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important}



#nsk-body-left .nsk-pager.pager-top>div>a,

#nsk-body-left .nsk-pager.pager-top>div>span,

#nsk-body-left .nsk-pager.pager-bottom>div>a,

#nsk-body-left .nsk-pager.pager-bottom>div>span,

#nsk-body-left .comment-container .post-top-pager>div>a,

#nsk-body-left .comment-container .post-top-pager>div>span,

#nsk-body-left .comment-container .post-bottom-pager>div>a,

#nsk-body-left .comment-container .post-bottom-pager>div>span,

#nsk-frame .selector .nsk-pager>div>a,

#nsk-frame .selector .nsk-pager>div>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;min-width:30px!important;height:30px!important;padding:0!important;margin:0!important;box-sizing:border-box!important;border-radius:4px!important;line-height:1!important;text-align:center!important;vertical-align:middle!important;flex:0 0 auto!important}



#nsk-body-left .comment-container .post-top-pager>div>a.pager-pos,

#nsk-body-left .comment-container .post-bottom-pager>div>a.pager-pos,

#nsk-frame .selector .nsk-pager>div>a.pager-pos{width:auto!important;min-width:30px!important;padding:0 8px!important;white-space:nowrap!important;flex-wrap:nowrap!important}

#nsk-body-left .comment-container .post-top-pager>div>a.pager-pos .ellipsis,

#nsk-body-left .comment-container .post-bottom-pager>div>a.pager-pos .ellipsis,

#nsk-frame .selector .nsk-pager>div>a.pager-pos .ellipsis{display:inline!important}



#nsk-body-left .nsk-pager.pager-top>div>.pager-prev,

#nsk-body-left .nsk-pager.pager-top>div>.pager-next,

#nsk-body-left .nsk-pager.pager-bottom>div>.pager-prev,

#nsk-body-left .nsk-pager.pager-bottom>div>.pager-next,

#nsk-body-left .comment-container .post-top-pager>div>.pager-prev,

#nsk-body-left .comment-container .post-top-pager>div>.pager-next,

#nsk-body-left .comment-container .post-bottom-pager>div>.pager-prev,

#nsk-body-left .comment-container .post-bottom-pager>div>.pager-next,

#nsk-frame .selector .nsk-pager>div>.pager-prev,

#nsk-frame .selector .nsk-pager>div>.pager-next{padding:0 8px!important;width:auto!important;min-width:30px!important;height:30px!important}



#nsk-body-left .nsk-pager .pager-pos.pager-cur,

#nsk-frame .selector .nsk-pager .pager-pos.pager-cur{background:var(--ns-link)!important;color:#fff!important;border-color:var(--ns-link)!important}

#nsk-body-left .nsk-pager a:hover,

#nsk-body-left .nsk-pager span:hover,

#nsk-frame .selector .nsk-pager a:hover,

#nsk-frame .selector .nsk-pager span:hover{background:rgba(22,119,255,.12)!important}



#nsk-body-left .comment-container .post-top-pager,

#nsk-body-left .comment-container .post-bottom-pager{margin-top:6px!important}

#nsk-body-left .comment-container .post-bottom-pager{margin-bottom:6px!important}

.nsk-post-wrapper .comments>.content-item>article.post-content{margin-top:7px!important;margin-bottom:8px!important}

.nsk-post-wrapper .comments>.content-item>article.post-content p{margin:5px 0!important}

.nsk-post-wrapper .comments>.content-item+.content-item{margin-top:16px!important}



#nsk-head .nav-menu #toggle-left-panel.meta-button{background:#fff!important}

#nsk-head .nav-menu #toggle-left-panel.meta-button .iconpark-icon{color:inherit!important;filter:invert(1)}

body.dark-layout #nsk-head .nav-menu #toggle-left-panel.meta-button{background:transparent!important;color:var(--text-color)!important}

body.dark-layout #nsk-head .nav-menu #toggle-left-panel.meta-button .iconpark-icon{filter:none}



.msc-confirm .msc-content{margin:36vh auto 0!important;max-width:min(480px,calc(100vw - 24px))!important;box-sizing:border-box!important}

.nsk-panel.category-list~div{display:none!important}

footer{display:none!important}



@media (max-width:768px){

  #nsk-body{padding-left:8px!important;padding-right:8px!important}

  #nsk-left-panel-container{display:none!important}

  #nsk-body-left{flex:1 1 auto!important}

  .nsk-content-meta-info .content-info .date-created time::after{font-size:10px}

  #nsk-body-left .nsk-pager>div{gap:2px!important}

  #nsk-frame .selector .nsk-pager>div{gap:0!important}



  #nsk-frame .selector>div[style*="justify-content: right"]{margin-left:calc(50% - 50vw + 3px)!important;margin-right:calc(50% - 50vw + 3px)!important}

  #nsk-frame .selector .nsk-pager,#nsk-frame .selector .nsk-pager>div{width:100%!important;justify-content:space-between!important}

  #nsk-body-left .nsk-pager>div>a,

  #nsk-body-left .nsk-pager>div>span,

  #nsk-frame .selector .nsk-pager>div>a,

  #nsk-frame .selector .nsk-pager>div>span{width:26px!important;min-width:24px!important;height:26px!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}



  #nsk-frame .selector .nsk-pager>div>a,

  #nsk-frame .selector .nsk-pager>div>span{font-size:15px!important}



  #nsk-body-left .nsk-pager>div>.pager-pos,

  #nsk-frame .selector .nsk-pager>div>.pager-pos{width:auto!important;min-width:24px!important;height:26px!important;padding:0 2px!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;flex-wrap:nowrap!important}



  #nsk-body-left .nsk-pager>div>.pager-prev,

  #nsk-body-left .nsk-pager>div>.pager-next,

  #nsk-frame .selector .nsk-pager>div>.pager-prev,

  #nsk-frame .selector .nsk-pager>div>.pager-next{width:auto!important;min-width:24px!important;height:26px!important;padding:0 2px!important}

  #nsk-body-left .post-list .post-list-item+.post-list-item{margin-top:8px!important}

  .nsk-post-wrapper .comments>.content-item+.content-item{margin-top:12px!important}

  .msc-confirm .msc-content{margin:56vh 12px 0!important;padding:16px 12px!important}

}