Skip to content

知乎样式优化 by Dec27-Lee

Details

AuthorDec27-Lee

LicenseNo License

Categorywww.zhihu.com,zhuanlan.zhihu.com

Created

Updated

Size6.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

调整知乎的样式,删除不必要的元素,调整排版

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         知乎样式优化
@version      20230816.08.58
@namespace    userstyles.world/user/Dec27-Lee
@description  调整知乎的样式,删除不必要的元素,调整排版
@author       Dec27-Lee
@license      No License
==/UserStyle== */

@-moz-document domain("www.zhihu.com"), domain("zhuanlan.zhihu.com") {
/*1 删除多余元素*/
/*1.1 不显示右侧边栏的非关键内容*/
.Footer {
    display:none;
}

/*1.2 不显示问题页面的答案区域回答者右边的关注按钮*/
Button.FollowButton.css-upmq18.Button--secondary.Button--blue, .Post-Author Button.FollowButton.Button--primary.Button--blue {
    display: none;
}

/*1.3 删除问题页面问题详情侧边栏*/
.QuestionHeader-side {
    display: none;
}

/*1.4 不显示赞赏模块*/
.Reward {
    display: none;
}

/*1.5 不显示文章头图*/
.css-78p1r9, .css-1ntkiwo {
    display: none;
}

/*1.6 删除文章页面赞同和分享按钮*/
.Post-SideActions {
    display: none;
}

/*1.7 隐藏帮助中心*/
.css-1vacn7q {
    display: none;
}

/*1.8 删除推荐关注*/
.Card.css-173vipd {
    width: 400px;
    display: none;
}

/*2 排版调整*/
/*2.1 修改答案宽度*/
.Topstory-mainColumn, .Question-mainColumn, .QuestionAnswers-answers {
    width: 1000px;
}
/*2.2 修改用户资料页左边栏*/
.Profile-mainColumn {
    margin-right: -310px;
    width: 1000px;
}

/*2.3 修改用户资料页右边栏位置*/
.Profile-sideColumn {
    margin-right: -340px;
}

.css-1oy4rvw {
    width: 296px;
}

/*2.4 缩短问题页面问题详情部分宽度*/
.QuestionHeader {
    margin: auto;
    min-width: 600px;
    max-width: 1000px;
}

.QuestionHeader-content {
    padding-left: 0px;
}

.QuestionHeader-footer-inner {
    padding: 0px;
}

/*2.5 增加问题页面问题详情部分问题描述宽度*/
.QuestionHeader-main {
    width: 980px;
}

/*2.6 调整话题页面宽度*/
.css-fvdsnr {
    min-width: 1000px !important;
}

/*2.7 调整杂志文章页面宽度*/
.WebPage-root-g7WXc.WebPage-hasTopNavBar-2t4oi.WebPage-pc-6MFvC, .ColumnMagazineWeb-root-89owi, .ColumnMagazineHybrid-root-hTnMr, .App-root-RjVC1, .App-root-vBajQ {
    max-width: 1000px;
}

/*2.8 将问题页面回答的目录背景改为正确的颜色*/
.Catalog.isCatalogV2 {
    background: #FFFFFF;
}

html[data-theme=dark] .Catalog.isCatalogV2 {
    background: #22272E;
}

/*2.9 增加文章页面的宽度,调整排版*/
.Post-Header {
    width: 960px !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

.Post-NormalMain>div:not(.Post-RichTextntainer), .Post-NormalSub>div {
    width: 960px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.Post-NormalMain>div.Post-RichTextContainer {
    width: 1000px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.css-1yuhvjn {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-top: 0px;
}

.ContentItem-time {
    background: #FFFFFF;
}

html[data-theme=dark] .ContentItem-time {
    background: #22272E;
}

/*2.10 知乎专栏首页背景色设为透明以适配黑暗模式*/
.ColumnHomeTop:before, .ColumnHomeBottom {
    background: transparent;
}

/*2.11 增加专栏页面的宽度*/
.css-10l2ro8 {
    width: 1000px;
    margin: auto;
}

.css-1voxft1, .css-1f6hmyt, .Card.css-ny4o71 {
    width: 1000px;
}

.css-1xy3kyp {
    max-width: 1000px;
    margin-left: 5px;
}

.Column-EmptyCard {
    width: 1000px;
}

/*2.12 增加想法页面的宽度*/
.PinDetail {
    max-width: 1000px !important;
    margin-top: 0px;
    padding: 48px 20px 0px 20px;
}

/*2.13 改进暗黑模式下发布按钮的清晰度*/
html[data-theme=dark] .Button.css-18jswov, html[data-theme=dark] .Button.css-13zbq11 {
    color: #FFFFFF;
}

/*2.14 调整知乎文章编辑器的页面宽度和知乎预览文章页面宽度*/
.css-sdgtgb, .PreviewPost-Main {
    width: 1000px;
}

/*2.15 调整问题回复中相关问题宽度*/
.css-oyqdpg {
    width: 300px;
}

/*2.16 解除首页右边栏对代理样式的依赖性,自定义宽度*/
.css-19idom{
    margin: 0 !important;
    width: 296px;
}

/*3 增加背景图片*/
/*3.1 背景图片资源*/
body:not(:has(.PubIndex-book), .Pub-reader-body, .Pub-reader-clear-body, .Post-content), html[data-theme=dark] body {
    background-image: url("") !important;
}

/*3.2 知乎文章页面背景图片(需要单独设置)*/
.Post-content, html[data-theme=dark] .Post-content {
    background-image: url("") !important;
}

/*3.3 设置知乎文章页面背景颜色*/    
.Post-Header, .css-1yuhvjn, .ContentItem-time.xiu-time, .Post-topicsAndReviewer, div[data-za-detail-view-path-module="CommentList"], .PostIndex-Contributions {
    background: #FFFFFF;
}

html[data-theme=dark] .Post-Header, html[data-theme=dark] .css-1yuhvjn, html[data-theme=dark] .ContentItem-time.xiu-time, html[data-theme=dark] .Post-topicsAndReviewer, html[data-theme=dark] div[data-za-detail-view-path-module="CommentList"], html[data-theme=dark] .PostIndex-Contributions {
    background: #22272E;
}

/*3.4 设置知乎专栏首页背景颜色*/
body.LightGreyBg-body {
    background: #FFFFFF !important;
}

html[data-theme=dark] body.LightGreyBg-body {
    background: #22272E !important;
}

/*3.5 设置问题日志页面背景为白色*/
.zg-wrap.zu-main.clearfix {
    background: #FFFFFF;
    padding-left: 20px;
}

/*3.6 适配知乎搜索界面*/
.Search-container {
    background: #FFFFFF;
}

html[data-theme=dark] .Search-container {
    background: #22272E;
}

/*3.7 适配右侧边栏*/
.Profile-sideColumn {
    background: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
}

html[data-theme=dark] .Profile-sideColumn {
    background: #22272E;
}

/*3.8 适配文章页面*/
.css-pglgh5 .highlight, .css-pglgh5 figure {
    margin: 0px;
    margin-bottom: -1.4em;
    padding-bottom: 1.4em;
}

/*3.9 适配想法页面*/
.PinDetail {
    background: #FFFFFF;
}

html[data-theme=dark] .PinDetail {
    background: #22272E;
}

/*4 修改有活动广告时的首页顶部栏位*/
/*4.1 恢复选中和鼠标悬浮效果*/
.css-l2ygoj .AppHeader-TabsLink.is-active, .css-l2ygoj .AppHeader-TabsLink:hover {
    color: #121212 !important;
}

.Tabs-link.is-active {
    font-weight: 600;
}

.css-12n8klz.is-active::after {
    background-color: rgb(5, 109, 232) !important;
}

.Tabs-link.is-active:after {
    position: absolute !important;
    right: 0 !important;
    bottom: -1px !important;
    left: 0 !important;
    height: 3px !important;
    background: #056de8 !important;
    content: "" !important;
}

.css-1iyiq0j, .css-90wyh8 {
    color: #8590a6 !important;
}

html[data-theme="light"] header.AppHeader a[aria-label="知乎"] svg {
    filter: none !important;
}

}

Reviews

No reviews yet.