Skip to content

CSDN CSS by XiaoWoHan

Screenshot of CSDN CSS

Details

AuthorXiaoWoHan

LicenseNo License

Categoryblog.csdn.net

Created

Updated

Code size7.3 kB

Code checksum9e3a4578

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

CSDN简化,清理额外元素,暗黑模式兼容

Notes

沉浸式阅读CSDN博客

  • 清理干扰元素
  • 支持暗黑模式
  • 开放复制选择,需搭配Simple Allow Copy插件使用
    cp8hk8.jpg
    8hr7yj.jpg

Source code

/* ==UserStyle==
@name         CSDN CSS
@version      20250320.03.03
@namespace    https://userstyles.world/user/CrayonLSnail
@description  CSDN简化,清理额外元素,暗黑模式兼容
@author       CrayonLSnail
@license      No License
==/UserStyle== */

@-moz-document domain("csdn.net") {
/** 精简当前样式 **/
html,
body{
    background-image: none !important;
    background-size: auto !important;
    font-family: source-han-serif-tc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
    min-width: unset !important;
    min-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
}

main,
.main,
#app {
    float: inherit;
    margin: 40px auto;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
a,
abbr,
body,
cite,
dd,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
input,
li,
object,
ol,
p,
span,
ul {
    font-family: source-han-serif-tc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif!important;
}
code,
code span,
pre,
pre span {
    font-family: "Source Code Pro", Monaco, Menlo, Consolas, monospace!important;
}

h1 {
    font-size: 20px!important;
}
h2 {
    font-size: 18px!important;
}
h3,
h4,
h5,
h6 {
    font-size: 18px!important;
}

.main_father {
    border-radius: 10px!important;
    width: 70%;
    position: relative;
    left: 16%;
}
#mainBox,
.article-box {
    margin-left: auto;
    margin-right: auto;
}

#article_content,
#pf1,
.bg-white {
    border: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: auto !important;
}

.set-code-hide {
    height: unset !important;
    overflow-y: unset !important;
}
.recommend-item-box {
    width: 50%;
    max-width: 25rem;
}
.recommend-item-box .content,
.recommend-item-box h4 {
    width: 100%!important;
}
main div.blog-content-box,
.content-view{
    border-radius: 10px!important;
    background-image: none!important;
    background-color: #ffffff !important;
    color: #222226 !important;
    padding:80px;
}

#content_views a,
.follow-nickName {
    color: #42b983!important;
}
code {
    color: #e96900!important;
}
.markdown_views blockquote p {
    color: #6e6e6e!important;
}
blockquote {
    border-left: 6px solid #42b983!important;
}
div.article-title-box > h1 {
    font-size: 32px!important;
}
.csdn-side-toolbar {
    margin: 40px!important;
}
.imgViewDom {
    background-color: rgba(0, 0, 0, 0)!important;
}
.pre-numbering {
    font-size: 12px!important;
}
img {
    border-radius: 10px!important;
}
.detail-container {
    position: relative!important;
    left: 15%!important;
}
.ask-issue-content,
.article-box .cont{
    max-height: unset!important;
}
.detail_container{
    position: relative!important;
    left:10%!important;
}
}

@-moz-document domain("csdn.net") {
/** 颜色模式 **/
/** 深色模式 **/
@media (prefers-color-scheme: dark) {
    :root {
        --background: #292c2d;
        --content-background: #222425;
        --code-background: #26292a;
        --border-panel-background: #2B2B2B;
        --content-text: rgb(239, 234, 226);
    }
    html,
    body,
    .page-container,
    #chatgpt-article-detail,
    table,
    tbody,
    tr,
    td {
        background-color: var(--background) !important;
    }
    .main,
    main div.blog-content-box,
    .article-header-box,
    .title-article,
    .content-view,
    .markdown_views,
    .bg-white,
    #detail,
    .el-card,
    .csdn-tree,
    .bottom_hover,
    .el-card__body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    span,
    table tr td,
    ol li,
    .ai-abstract,
    .abstract-content,
    #userSkin {
        background-color: var(--content-background) !important;
        background-image: none !important;
        color: var(--content-text) !important;
    }

    pre,
    .prettyprint,
    .pre-numbering,
    code {
        background-color: var(--code-background) !important;
        color: var(--content-text) !important;
    }
    .imgViewDom .swiper,
    .bg_sql {
        background: var(--border-panel-background) !important;
    }
    table tr th {
        background-color: var(--border-panel-background) !important;
        color: var(--content-text) !important;
    }
}

/** 浅色模式 **/
@media (prefers-color-scheme: light) {
    :root {
        --background: #FAFAFA;
        --content-background: #FFFFFF;
        --code-background: #F8F8F8;
        --border-panel-background: #2B2B2B;
        --content-text: #222226;
    }
    body,
    #userSkin {
        background-color: var(--background) !important;
        background-image: none !important;
    }
    pre,
    .prettyprint,
    .pre-numbering,
    code {
        background-color: var(--code-background) !important;
    }
    .imgViewDom .swiper {
        background: var(--content-background) !important;
    }
    .article-header-box {
        background-color: var(--content-background) !important;
        background-image: none !important;
        color: var(--content-text) !important;
    }
    main div.blog-content-box,
    .content-view {
        background-color: var(--content-background) !important;
        color: var(--content-text) !important;
    }
}
}

@-moz-document domain("csdn.net") {
/** 解除Code禁止选中 **/
#content_views pre,
#content_views pre code,
.forbid{
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
}

@-moz-document domain("csdn.net") {
/** 清理无用元素 **/
#content_views pre .signin,
#csdn-toolbar,
.csdn-side-toolbar,
#blogColumnPayAdvert,
.passport-login-container,
.article-info-box,
.blog_container_aside,
.recommend-box,
#pcCommentBox,
#recommendNps,
.template-box,
.more-toolbox-new,
.blog-footer-bottom,
#toolBarBox,
aside,
.signin,
.hide-article-box,
.con-r-tag,
#csdn-toolbar,
#rightAside,
.operating,
.c-gray,
.un-collection,
.read-count,
.article-read-img,
.article-type-img,
.hide-article-box,
.blog-expert-recommend-box,
.recommend-item-box.type_hot_word,
.recommend-ad-box,
.isGreatIcon,
.tool-box,
.meau-gotop-box,
.recommend-end-box,
.login-mark,
.blog_title_box.oneline,
.recommend-item-box::before,
.pulllog-box,
#mainBox > aside,
.more-toolbox,
.right-message,
.main-login,
.identity-icon,
.show-txt,
.title .flag,
#passportbox,
.column-advert-box,
.article-plan-img,
.article-plan-text,
.up-time,
.article-vip-img,
.article-vip-text,
.hide-preCode-box,
a[data-type='cs'],
a[data-type='report'],
a[data-type='app'],
.passport-login-tip-container,
#treeSkill,
#blogHuaweiyunAdvert,
.bg_sql .bar,
.top-bar,
.box-wrap,
#copyright-box,
#content_bottom_fix_nav,
.open,
.relative,
.layout-right,
#page_bottom_fix_nav,
.space,
#recommend,
.nav-bottom-wrap,
.ccloud-tool-bar,
.cloud-breadcrumb,
.user-right-floor,
.recommendList,
.upDownPage,
.commentToolbar,
.rates-outer,
.ai-assistant-entrance,
.detail_right,
.question_operation_container,
.expandBtn,
.ask-questions-list,
.recommend-ask-box,
.ask_breadcrumb_box,
.reply_content_tool,
.user-profile-head-banner,
.blogStar-box,
.write-activity-box,
.vip{
    display: none !important;
}
}

Reviews

No reviews yet.