GM_script icon indicating copy to clipboard operation
GM_script copied to clipboard

分享自己用的样式改进和暗黑模式css

Open GVD20 opened this issue 2 years ago • 3 comments

样式改进和暗黑模式css

在原脚本的基础上,分别搭配Stylus和DarkReader使用。 CSS是一个个硬替换的,而且比较乱,凑合用一下啦。 同时也包含了对油猴脚本SearchEngingJump的适配

改进版:

cg1

包含:

  • 首页和搜索页的搜索框圆角
  • 搜索结果的圆角
  • 各种阴影的微调
  • 搜索框和搜索结果hover动画
  • 原有样式一些问题的修复

CSS:

.wrapper_new .s_ipt_wr {
    border: 2px solid #fff0;
}
#head_wrapper .s_btn{
    transition-duration: 0.2s;
    border-radius: 0 20px 20px 0;
}
#head_wrapper .ipt_rec, #head_wrapper .soutu-btn{
    transition-duration: 0.2s;
}
body{
   background:#f7f7f7
}
#s_main{
    box-shadow: 0 1px 30px 0 rgb(0 0 0 / 8%);
}
.container_l.sam_newgrid .cr-content{
    width: 500px
}
.c-group-wrapper{
    width: 690px;
    background :rgb(253 253 253)
}
.container_l.sam_newgrid #content_right{
    width: 300px
}
#wrapper #rs, #wrapper #content_left .result, #wrapper #content_left>.c-container{
    border-radius: 15px;
    width: 750px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .07);
    transition-duration: 2s!important;
}
#wrapper #content_left>.c-container:hover{
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2)!important;
    transition-duration: 0.5s!important;
}
#s_menu_gurd.s-down{
    background:#fff;
}
.wrapper_new #form .bdsug-new {
    width: 559px;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN {
    background:#fff;
    left:18px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .07)!important;
    width:716px;
    border: 1px solid rgba(0,0,0,0.1);
}
.options_2Vntk{
    width:752px
}
.new-pmd .c-img-border{
    border:0px!important
}
#head_wrapper #kw{
    transition-duration: 0.2s;
    border-radius: 20px 0 0 20px !important;
}
#head_wrapper #kw:focus{
    transition-duration: 0.2s;
    border-radius: 10px 0 0 10px !important;
}
.soutu-env-new .soutu-layer #soutu-url-kw{
    transition-duration: 0.2s;
    border-radius: 20px 0 0 20px !important;
}
.soutu-env-new .soutu-layer .soutu-url-btn-new{
    transition-duration: 0.2s;
    border-radius: 0 20px 20px 0 !important;
}
#s_top_wrap .s-center-box{
    box-shadow: 0 1px 30px 0 rgb(0 0 0 / 2%);
}
#form{
    box-shadow: 0 1px 30px 0 rgba(0, 0, 0, .17);
    transition-duration: 1s;
}
#form:hover{
    box-shadow: 0 9px 25px 0 rgba(0, 0, 0, .23);
    transition-duration: 0.2s;
}
.fm{
    border-radius: 20px 20px 20px 20px !important;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN {
    background:#fff;
    left:18px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .07)!important;
    width:716px;
    border: 1px solid rgba(0,0,0,0.1);
}
.sp-separator {
    width:750px!important;
    margin: 10px -2px 8px!important;
}
#wrapper #content_left > .result h3, #wrapper #content_left > .c-container h3{
    border-radius: 15px 15px 0px 0px !important;
}

.new-pmd .c-border {
    width: 700px;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,0)!important;
}
.c-container h3#head_wrapper #kw{
    transition-duration: 0.2s;
    border-radius: 20px 20px 0 20px !important;
}

暗黑样式:

cg2

包含:

  • 首页和搜索页的暗黑色调
  • 百度logo降饱和度和提高亮度,增强其在黑色背景下的可读性

CSS:

/*背景*/
body{
    background:#1e1e1e!important
}   
/*顶栏*/
.s-top-wrap{
   background:#2b2b2b!important
}
/*顶栏字体*/
.c-color-t{
    color:#fff
}
/*搜索框背景*/
#head_wrapper #kw{
    background:#1e1e1e;
    border-color:#646464;
    color:#fff;
}
/*识图按钮背景*/
#head_wrapper .ipt_rec, #head_wrapper .soutu-btn{
    background:#1e1e1e url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png) no-repeat
}
/*底栏*/
#bottom_layer{
    background:#1a1a1a
}
/*底栏字体*/
#bottom_layer .text-color{
    color:#484848
}
/*提示框*/
.bdsug{
    background:#1e1e1e;
}
#head_wrapper #form .bdsug-new ul li{
    color:#97afd0
}
#head_wrapper #form .bdsug-new ul li b{
    color:#828282;
}

#wrapper #rs, #wrapper #content_left .result, #wrapper #content_left>.c-container{
    background:#2f2f2f!important 
}
.new-pmd .c-abstract{
    color:#fff
}
#sej-container{
    background:#e1e1e1
}
#wrapper #content_left>.result[tpl='soft'] .op-soft-title, #wrapper #content_left>.result h3, #wrapper #content_left>.c-container h3{
    background:#444!important
}
#wrapper #content_left>.c-container[tpl='soft'] .op-soft-title a, #wrapper #content_left>.c-container[tpl='soft'] .op-soft-title a em, #wrapper #content_left>.c-container h3 a, #wrapper #content_left .result h3 a em, #wrapper #content_left .result-op h3 a em{
    color:#fff
}
em{
    color:#ff7a7a
}
#wrapper #content_left .f13 a{
    color:#28a25c!important
}
#container.sam_newgrid .result .c-tools .c-icon, #container.sam_newgrid .result-op .c-tools .c-icon{
    color:#ffffff4f
}
a{
    color:#fff!important
}
.new-pmd .c-color-gray{
    color:#9f9f9f
}
a em{
    color:#ff7a7a
}
.new-pmd .c-color-t{
    color:#9f9f9f
}
#page{
    background:#1e1e1e!important;
}
.rs-link_2DE3Q{
    background:#2e2e2e!important;
}
.rs-link_2DE3Q:hover {
    color: #bfcdff;
    background: #383838
}
.new-pmd .c-color-link {
    color: #b9b9b9!important;
    transition-duration: 0.2s;
}
.page_2muyV strong, .page_2muyV a {
    background-color: #282828!important;
}
#wrapper #page .n:hover, #wrapper #page a:hover .pc {
    border: 1px solid transparent;
    background: #3e3e3e!important;
    color: #72aaff!important;
}
.foot-container_2X1Nt {
    background: #181818!important;
}
body #head {
    background-color: rgba(0, 0, 0, 0)!important;
}
#wrapper #s_tab {
    border-bottom: #e0e0e0 0px solid!important;
    background-color: #2e2e2e!important;
}
form.fm .s_ipt_wr.bg {
    background: #1e1e1e!important;
}
#kw {
    color:#fff;
}
.opr-toplist1-link_2YUtD a:link {
    color: #c3c3c3;
}
.new-pmd.c-container {
    color: #fff;
}
.a-se-st-single-video-zhanzhang-capsule {
    color: #CDD4FF!;
}
.wrapper_new #form .bdsug-new ul li b {
    font-weight: 400;
    color: #9b9b9b;
}
.wrapper_new #form .bdsug-new ul li {
    color: #d0d0d0;
}
.wrapper_new #form .bdsug-new {
    width: 559px;
}
.wrapper_new #u>a {
    color: #fff;
}
/*.wrapper_new .s_ipt_wr {
border: 2px solid #5e5e5e;}*/
.wrapper_new #s_tab a {
    color: #b9b9b9;
}
#result_logo img{
    filter:brightness(300%)contrast(90%)
}
.new-pmd .c-color-text {
    color: #fff!important;
}
.opr-toplist1-link_2YUtD a:link {
    color: #adadad;
}
.pc-tabs-content_2Ga6e {
    background: #303030;
}
.pc-tabs-nav_3QAFE {
    color: #9195A3!important;
    background: #404040;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN {
    background: #2F2F2F;
}
.vmp-zxenterprise-new_qayMC .vmp-zxenterprise-border_11NYN .vmp-describe_3zafc{
color:#fff
}
#head_wrapper .s-p-top{
    filter:brightness(300%)contrast(90%)
}
#wrapper #content_left>.c-container:hover{
    box-shadow: 0 0 15px 0 rgba(255, 255, 255, .5);
    background:#383838
}
.op_dict3_inlineblock{
color:#b1d0ff
}
.op_dict3_else_items a{
color:#b1d0ff
}
.op_dict3_else_items a:hover{
color:#b1d0ff
}
.c-container .c-result-content:hover{
background:#404040!important;
}
#wrapper #content_left .c-container{
border:0px!important;
background-color:#383838!important;
}
}
.c-container:hover{
background-color:#383838!important;
}
#bottom_layer .lh{
color:#222222
}
.c-floating-box {
    background: #343434;
}.s-top-left-new .s-top-more {
    background: #282828;
}

#sej-container {
    background: #121212;
}
#wrapper #content_left .result-op:hover, #wrapper #content_left .result:hover, #wrapper #content_left .result-op:hover article{
background-color: #383838 !important;
}
body{
color:white
}
#wrapper.wrapper_new .bdpfmenu, #wrapper.wrapper_new .usermenu {
    background: #383838;
}
.wrapper_new #u .bdpfmenu a:hover, .wrapper_new #u .usermenu a:hover{
    background: #505050;
}
.wrapper_new #u .bdpfmenu a, .wrapper_new #u .usermenu a{

    background: #505050;
}
.item_3WKCf {
    background: #525252 !important;
}
.wenda-abstract-new_YM2dW em {
    color: #d9dbff !important;
}
.selected-search-box {
    background: #5a5a5a !important;
}
.render-item_GS8wb .group-content_3jCZd .group-sub-abs_N-I8P {
    color: #fff !important;
}

GVD20 avatar Sep 30 '22 07:09 GVD20

大佬有没有必应的。

Jyuan-Ip avatar Oct 23 '22 03:10 Jyuan-Ip

暗黑色调

error

image

tkp206093 avatar Oct 29 '22 17:10 tkp206093

暗黑色调

error

image

用DarkReader静态模式试一下

GVD20 avatar Oct 30 '22 01:10 GVD20