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

  • 相关阅读:
    VMware Workstation 11 安装MAC OS X 10.10 Yosemite(14B25)图解 2015-01-13 12:26:01|
    tensor搭建--windows 10 64bit下安装Tensorflow+Keras+VS2015+CUDA8.0 GPU加速
    vs2015终于配置完成了
    Visual Studio 2015 update 3各版本下载地址
    惊艳的cygwin——Windows下的Linux命令行环境的配置和使用
    TensorFlow从入门到实战资料汇总 2017-02-02 06:08 | 数据派
    官方Caffe-windows 配置与示例运行
    ipython notebook 如何打开.ipynb文件?
    Ubuntu16.04 +cuda8.0+cudnn+caffe+theano+tensorflow配置明细
    【CUDA】CUDA开发环境搭建
  • 原文地址:https://www.cnblogs.com/ferron/p/7507027.html
Copyright © 2011-2022 走看看