知乎頁面顏色個性化修改
代碼:chrome
/** *知乎頁面顏色個性化修改 *知乎樣式太素,閱讀時,尋找功能按鈕須要付出一些精力成本。 *故試作修改,目的不在美觀, *而在於高亮顯示功能按鈕,放大正文字號便於使用閱讀。 *不喜歡樣式的能夠本身調一下配色和文字大小。 */ /*知乎頭部logo*/ div.AppHeader-inner svg g path { fill: #ff4444 ; } /*知乎頭部搜索框 有值後顏色糾正*/ div.AppHeader-inner div.Input-after button.SearchBar-hasValueSearchIcon svg g path { fill: #ffffff ; } /*知乎默認藍色按鈕 改爲紅色*/ .Button--primary.Button--blue, .Button--primary.Button--blue:disabled { background: #ff4444; border: 1px solid #ff0000; } /*關注問題及回答問題按鈕 單獨糾正*/ div.QuestionButtonGroup button.Button.Button--primary.Button--blue { color: #ffffff; border: 1px solid #ff0000; } /*關注問題及回答問題按鈕 單獨糾正*/ div.QuestionButtonGroup button.Button--blue { color: #ff4444; border: 1px solid #ff4444; } /*問題評論按鈕*/ div.QuestionHeader-Comment button.Button.Button--plain { color: #ff4444 ; } /*問題詳情 展開按鈕*/ div.QuestionHeader-detail button.Button.QuestionRichText-more.Button--plain { color: #ff4444 ; } /*問題詳情 展開按鈕 右側箭頭*/ div.QuestionHeader-detail button.Button.QuestionRichText-more.Button--plain svg g path { fill: #ff4444 ; } /*問題評論按鈕 左側箭頭*/ div.QuestionHeader-Comment button.Button.Button--plain svg g path { fill: #ff4444 ; } /*問題詳情 收起按鈕 佈局及文字顏色*/ div.QuestionHeader-actions button.Button.Button--plain { color: #ffffff; background: #ff4444; padding-left: 10px; padding-right: 10px; border-radius: 2px ; } /*問題詳情 收起按鈕 箭頭顏色*/ div.QuestionHeader-actions button.Button.Button--plain svg g path { fill: #ffffff ; } /*答案正文展開提示文字 */ div.RichContent.is-collapsed.RichContent--unescapable button.Button.ContentItem-rightButton.Button--plain { color: #ff4444; } /*答案正文展開提示文字 右側箭頭*/ div.RichContent.is-collapsed.RichContent--unescapable button.Button.ContentItem-rightButton.Button--plain svg.Icon.ContentItem-arrowIcon.Icon--arrow g path { fill: #ff4444; } /*答案收起按鈕 佈局及背景顏色*/ button.Button.ContentItem-action.ContentItem-rightButton.Button--plain { padding-left: 10px; padding-right: 10px; background-color: #ff4444; border-left-width: 0; border-radius: 1px; } /*答案收起按鈕 右側箭頭顏色*/ button.Button.ContentItem-rightButton.Button--plain { color: #ffffff; } /*答案評論按鈕 文字顏色*/ div.ContentItem-actions>:nth-child(2) { color: #ff4444; } /*答案評論按鈕 左側小圖標*/ svg.Icon.Icon--comment.Icon--left g path { fill: #ff4444; } /*答案評論收起按鈕 背景及文字顏色*/ div.Comments.Comments--withEditor.Comments-withPagination button.Comments-Packup-Button { background: #ff4444; color: #ffffff; } /*答案評論收起按鈕 右側小箭頭*/ svg.Icon.ContentItem-arrowIcon.is-active.Icon--arrow g path { fill: #ffffff; } div.Comments.Comments--withEditor.Comments-withPagination button.Comments-Packup-Button svg g path { fill: #ffffff; } /*答案 正文字號*/ div.RichContent-inner { font-size: 17px; } /*答案 正文字號 糾偏(這是縮略時字號,別動它)*/ div.RichContent.is-collapsed div.RichContent-inner { font-size: 15px; }
代碼使用方法:chrome插件Stylebotsvg