简单美化了下沙拉查词

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 1868 days ago, the information mentioned may be changed or developed.

沙拉查词->查词面板->自定义查词面板样式

.menuBar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 8px;
}
.menuBar-Btn_Icon,.menuBar-Btn_Icon-fav {
    fill: #222;
}
.mtaBox-TextArea-Wrap,
.mtaBox-DrawerBtn,
.waveformBox.saladict-external,
.dictItemHead-Logo,
.menuBar-SearchBox_Wrap,
.menuBar-Btn[title="查单词"] {
    display: none;
}
.dictItem {
    padding: 0 10px;
}
.dictItem:first-child {
    padding-top: 10px;
}
.dictItem-Body {
    padding: 0 3px;
}
.dictItemHead {
    background: #eee;
    border-radius: 6px;
    padding: 6px;
    height: auto;
}
.dictPanel-Root {
    box-shadow: rgba(0,0,0,0.2) 0 7px 21px 2px;
}

Supplement 1 · Mar 25, 2021

这是我去年 10 月 08 日写的，今天才想着放 v2 来
原文 https://nexmoe.com/3990884387.html

Supplement 2 · Apr 8, 2021

Github： https://github.com/nexmoe/saladict-skin

padding

查词

dictitem

eee

29 replies • 2022-06-21 14:47:43 +08:00

zdb1115

Mar 25, 2021

楼主开发的吗？太棒了，谢谢分享。

Whalko

Mar 25, 2021

真漂亮啊❤

iyobucuo

Mar 25, 2021

漂亮！！

tousfun

Mar 26, 2021 via iPhone

多谢

mingff258

Mar 26, 2021

可以，已经用上了

saimax

Mar 26, 2021

多谢~ 漂亮

binaryify

Mar 26, 2021

可以可以，用上了，就是觉得高度有些低了

sgiyy

Mar 26, 2021

支持下，看着舒服多了

woolni

Mar 26, 2021

👍🏻可以可以，换了种风格

lecia

Mar 26, 2021

点插件图标，弹出窗口中无搜索栏，在窗口出无法查词。

leeggco

Mar 26, 2021

👍🏻可以可以

asca

Mar 26, 2021

感谢

asca

Mar 26, 2021

感谢！！

xuxu5112

Mar 26, 2021

TaiShang

Mar 26, 2021

好看

OysterQAQ

Mar 26, 2021

很赞

V2Bing

Mar 26, 2021

@lecia none 改成 true

lecia

Mar 26, 2021

@V2Bing 找到了，谢谢😄。还有一个，插件窗口的 css 与划词窗口的 css 可以分开设置吗？文档中没找到相关详细介绍，F12 后 css 有些多，现在还没尝试修改，筛选后依然不好看出这两个窗口是不是可以分开的。

zwxharry

Mar 26, 2021 via iPhone

点赞👍

greatghoul

Mar 26, 2021

太棒了。

sephinh

Mar 26, 2021 via iPhone

漂亮，支持

hei1000

Mar 26, 2021

之前没注意，原来还可以自定义

hei1000

Mar 26, 2021

@hei1000 #22 补帖，加了这个配置，工具栏点击图标查询窗口不见了

ThinkTwive

Mar 26, 2021

@hei1000 改了下楼主的配置保留下搜索框
`css
.menuBar-SearchBox_Wrap input{
color:black;
},
.menuBar-Btn[title="查单词"] {
display: true;
}
`

hei1000

Mar 27, 2021

@ThinkTwive #24 Thanks.

suibianzai

Mar 29, 2021

@ThinkTwive
请问如何保留搜索框？我加了这段还是没有搜索框，能否贴一下又搜索框的完整代码呀？感谢

ConteMan

Mar 29, 2021

@suibianzai #26

结合楼主和楼上的补个有搜索框的完整版：
```

.menuBar {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 8px;
}
.menuBar-Btn_Icon,.menuBar-Btn_Icon-fav {
fill: #222;
}
.mtaBox-TextArea-Wrap,
.mtaBox-DrawerBtn,
.waveformBox.saladict-external,
.dictItemHead-Logo {
display: none;
}
.menuBar-SearchBox_Wrap input{
color:black;
background: #eee;
},
.menuBar-Btn[title="查单词"] {
display: true;
}
.dictItem {
padding: 0 10px;
}
.dictItem:first-child {
padding-top: 10px;
}
.dictItem-Body {
padding: 0 3px;
}
.dictItemHead {
background: #eee;
border-radius: 6px;
padding: 6px;
height: auto;
}
.dictPanel-Root {
box-shadow: rgba(0,0,0,0.2) 0 7px 21px 2px;
}

```

suibianzai

Mar 29, 2021

@Conte 谢谢~

Seyee

Jun 21, 2022

楼上样式的历史记录按钮看不清，我也补充修改了一下，优化了一下输入框样式，不喜欢输入框宽度一直变，所以写死了，不想要的可以去掉最后一部分。

.menuBar {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 8px;
}
.menuBar-Btn_Icon,.menuBar-Btn_Icon-fav {
fill: #222;
}
.mtaBox-TextArea-Wrap,
.mtaBox-DrawerBtn,
.waveformBox.saladict-external,
.dictItemHead-Logo {
display: none;
}
.menuBar-SearchBox_Wrap input{
color:black;
background: #eee;
padding: 5px;
border-radius:6px;
},
.menuBar-Btn[title="查单词"] {
display: true;
}
.dictItem {
padding: 0 10px;
}
.dictItem:first-child {
padding-top: 10px;
}
.dictItem-Body {
padding: 0 3px;
}
.dictItemHead {
background: #eee;
border-radius: 6px;
padding: 6px;
height: auto;
}
.dictPanel-Root {
box-shadow: rgba(0,0,0,0.2) 0 7px 21px 2px;
}
.menuBar-Btn_Icon-history{
fill: #333;
}
.menuBar-Btn:hover{
background:transparent;
}
.menuBar-SearchBox_Wrap, .menuBar-SearchBox_Wrap.isExpand{
width: 100px;
flex: none;
}