调整知乎的样式,删除不必要的元素,调整排版
知乎样式优化 by Dec27-Lee
Details
AuthorDec27-Lee
LicenseNo License
Categorywww.zhihu.com,zhuanlan.zhihu.com
Created
Updated
Code size6.8 kB
Code checksum3c88c48a
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;
}
}