夜晚模式下的词典css改版

yunhailin123 · 发表于 2020-2-28 18:27:22

本来一开始只是把背景色去掉，改着改着又想将词典的风格统一，于是乎才会有费劲的两三天调试：
（改版的词典有  英语同义词辨析词典英语常用词疑难用法手册颜式美语词典牛津九）
我最先改版的是牛九，这个css有1042行，我从头至尾看了两三遍，我是先利用换色来找对应HTML的位置，这个过程很无聊，我用小本本记下了，其实呢，也没有多少，不过三四页，然后就剩下一些换色也不行的那种未知项，这个时候，我得出一个结论：此词条不行换个词条：牛九我查了以下词条：
go 词条数占优势，我改版优先选择它，通过这一个词条排查了百分之九十的对应项
(beat sb) black and blue 查beat词条，主要是为了：Alliteration in idioms

collection 这个是为了collection  （但是它在css里是colloc，坑死我了）

drag    忘了

establish 这个是查询单词下面的一个方框：AW，也不知道是干啥用的，于是乎，实线方框成虚点方框

get    基本没啥用

grammar    本来想查grammar的，结果发现不行
know ......

take ......

然后接下来就是无聊的调色，因为要改成夜晚模式下能用的颜色，还专门去看看网页颜色搭配，也试了不短时间，最终发现很多浅色的在夜晚模式下不能用，只能用重色的，但是也不能刺眼或看时间就花眼的那种，于是我就大概选了几种颜色（有一种是我最不想用的蓝色，发现居然在夜晚模式下有奇效，就忍了）
查询的单词 #0066cc
释义英文    #0066cc
释义中文    teal
~sb 的这种，在释义前边的和词组  orangered
方框里的单词  #cc9966

语料库里的例句和中文全弄成 #666666（#999比#666 #454545 #555 #333 都要浅，如果我弄了#999，说明我想直接忽略它）

像下面的一级标题：Movement 这种是 #cc6699

有的在方框里只要一个单词的话 brown  安排上

需要说一点的是字体最大也就14px，最小13px，如果忍受不了的话，可以将词典中的对应size调高些，一般普遍是1.2em，标题的话1.4em，再大就不好看了（切记，切记）

这种风格我把它统一化了，除了颜式美语词组多些就换了个颜色，其余一致，废话不多说，上图展示瞧瞧：
第一个牛津九

这是牛九的各个对应项在夜晚模式下的颜色

接下来的是颜式美语

这是颜式美语在夜晚模式下的颜色

接下来是英语同义词辨析

这是英语同义词辨析词典在夜晚模式下的颜色

接下来是英语常用词疑难用法手册

这是英语疑难在夜晚模式下的颜色

Attention：这些词典不要与葛传椝惯用法词典放到一起（有葛传椝先生的词典则无其他，有上面的则无葛传椝先生的词典，我也不明所以，只能忍痛割爱葛老先生）

我只放css，对应的mdx和mdd请去论坛自行搜索，本人只负责探讨交流css。

最后放上链接：https://www.lanzous.com/b0ce2s6ad 密码:bb8h

祝大家也能多多修改完善论坛的词典

武汉加油！

Lynvia · 发表于 2020-2-28 18:33:07

本帖最后由 Lynvia 于 2020-2-28 18:35 编辑

#DA3433的反色很好看哟。你这样改效率太低啦，为何不用工具？

yunhailin123 · 发表于 2020-2-28 18:58:18

本帖最后由 yunhailin123 于 2020-2-28 18:59 编辑

Lynvia 发表于 2020-2-28 18:33
#DA3433的反色很好看哟。你这样改效率太低啦，为何不用工具？

因为颜色很多，我也很难一个一个去试了，就只试了几种，对于我来说够了

我用的是atom+goldendict
goldendict保存出词条的HTML，再用atom+atom HTML previewer 实时预览修改
因为不知道词条的每一部分在HTML的位置，所以只能用笨办法了
为何不用工具，调色这事，毕竟是局外人，所以得摸石头过河了

Lynvia · 发表于 2020-2-28 19:05:41

yunhailin123 发表于 2020-2-28 18:58
因为颜色很多，我也很难一个一个去试了，就只试了几种，对于我来说够了

那我推荐一下GoldenDict＋VSCode＋Live Server插件＋Chrome。熟悉了之后其实都可以只用GoldenDict和txt

yunhailin123 · 发表于 2020-2-28 20:56:54

Lynvia 发表于 2020-2-28 19:05
那我推荐一下GoldenDict＋VSCode＋Live Server插件＋Chrome。熟悉了之后其实都可以只用GoldenDict和txt ...

其实原理都一样，实时看到自己修改的样子，
我是因为不熟悉要改的词典的css，所以只能自己摸索，大部头的词典css都是很长，所以费时间

tinglongwei · 发表于 2020-2-29 08:48:14

本帖最后由 tinglongwei 于 2020-2-29 08:55 编辑

製作夜間模式，顏色配色可參考https://material.io/design/color/dark-theme.html#ui-application
https://webaim.org/resources/contrastchecker/
符合AA標準，會來整體辨識效果佳
讓顏色單一化，在夜間模式會減少顏色多樣性，降低眼睛負擔

[改版] 夜晚模式下的词典css改版