zoukankan      html  css  js  c++  java
  • 知乎页面颜色个性化修改

    知乎页面颜色个性化修改
    代码:

    /**
    *知乎页面颜色个性化修改
    *知乎样式太素,阅读时,寻找功能按钮需要付出一些精力成本。
    *故试做修改,目的不在美观,
    *而在于高亮显示功能按钮,放大正文字号便于使用阅读。
    *不喜欢样式的可以自己调一下配色和文字大小。
    */
    
    /*知乎头部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插件Stylebot

  • 相关阅读:
    Django目录介绍、路由系统、 ORM表的创建、XSS攻击、分页、 CBV & FBV
    正宗Django框架(Bootstrap 、Django母版、Cookie)
    索引快速查询
    前端学习之jquery
    关于vertical-align和line-height的真知灼见
    js BOM对象 DOM对象
    JS基础学习(一)
    html5实现尖角号
    装饰器
    Win8.1离线安装.Net Framework 3.5
  • 原文地址:https://www.cnblogs.com/ferron/p/7507027.html
Copyright © 2011-2022 走看看