知乎頁面顏色個性化修改

知乎頁面顏色個性化修改
代碼: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

相關文章
相關標籤/搜索