调整知乎的样式,删除不必要的元素,调整排版
知乎样式优化 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;
}
}