[3] 通过 article-style.css 调整 词典名称条

deeke

171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
% X6 t" f& F* S$ [% `9 i* E170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------
8 k9 f# v: p' F
------------------------------------------
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。
1 }9 l% V' z8 P4 N0 V% E) n4 B
不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
使词典名称条更紧凑，在缩放页面时它几乎不会错位。

% B$ u) Y! m1 [1. 选择风格：灵格斯。
2. 隐藏 词典名称的蓝色背景、词典图标。
2 t3 K: X' L$ I3. 隐藏 右侧展开、折叠的箭头图片。
4. 调整 尺寸、间距、边框、颜色。
- U% k& F) W  @' `6 n! O3 d9 G+ Q
修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
2 M) k- V8 g1 u: C1 w8 k1 m& J$ I/ ]

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   3 u* P8 `- Z% Q1 b( j0 W
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   ) u' T  v6 E! [- m2 v; F
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   
5. .gddictname {
   
6.   font-size: .625rem;
   6 w3 }& e. s+ i1 U! I. j
7.   margin: -.0625rem 0;
     |  l5 j' v; O3 _) y2 c) z- l
8.   padding-left: 0;
   
9.   vertical-align: bottom;
   
10.   border-width: 0;
    
11.   background-color: transparent;
    - n# @+ ^' V% y# y' J5 G0 ~3 K8 D! H1 p
12. }
    
13. 
    " o6 M1 m! \/ K+ b- ?6 b" \
14. /* 加粗 词典名称 文字的下边框 */
    
15. .gddicttitle {
    3 D3 L9 w8 S7 [  i( \
16.   position: relative;
    4 U+ J1 q1 F5 t, b+ z
17.   top: .01rem;
    5 J3 I3 e6 a2 z5 ^& L) t
18.   padding-bottom: .0625rem;
    6 n- c2 J6 ^  L# ], \' y! s
19.   color: gray;
    
20.   border-bottom: .23rem solid gray;
    ( M) x; |$ X" B+ Y" y
21. }
    4 F) L) v; Y$ s4 W
22. 
    . ?3 `5 L; g3 L8 K! O& @4 f
23. /* 隐藏 词典图标 和 “来自于……” */
    " r+ E6 E8 i/ h3 _: t% [
24. .gddicticon,.gdfromprefix { display: none; }
    7 {! ^/ g) B+ j% j
25. 
    4 Z' i5 F- J8 ?( [1 `3 g4 h
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    & [' p& f' E8 Q9 T5 \4 e* e
27. .gdcollapseicon,.gdexpandicon {
    7 b! M+ ?2 P1 x: C
28.   position: relative;
    : |% k, R" B& G9 o" l) m
29.   top: .2745rem;
    
30.   /* w:h = 1:1 */
    ! D8 k  z; A3 {+ Y  U
31.   width: .645rem;
    " D7 _/ J: G$ K1 R' A( l. A
32.   /* w:h = 2:1 */
    ' O, s; e# i5 n3 e
33.   /* width: 1.45rem; */
    1 H* X- {$ v/ ]/ ^* S
34.   height: .475rem;
    
35.   border: .08rem solid gray;
    : V& n$ m9 R5 }8 h" E. p. K
36.   background-color: transparent;
    / J' ~  \& ^2 |* T6 K. N" T/ i5 \+ a
37.   background-image: none;
    0 z& D6 z0 n; c8 J" t& L/ t" ~' g
38. }
    8 w# _) {. ?1 C5 S; S: E4 L. t
39. 
    & p0 F( R# z" f- G
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    
41. .gdexpandicon { background-color: gray; }
    
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    
43. .gdcollapseicon { border-bottom-width: .25rem; }
    
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    
45. 
    # e5 U5 Q; M) o. G, H
46. /* 分割线 */
    ( S- _) j% A3 l* p; ]- L
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    0 t6 j+ f$ s8 f# c3 J" Q- J) j
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

1 ~# c" S0 _; {6 a$ i7 i) w9 |9 J------------------------------------------
通过 qt-style.css 调整 软件界面文字大小

在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   : x; y4 C1 ?/ }4 f
3. MainStatusBar #text, /* 右下角的提示信息 */
   + @& I. U* W0 f$ k% E  b3 p/ Q
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   . X% F$ L* N. \9 x/ t! G
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   ; s8 O, {$ N% J: V1 X
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   1 T  @2 E" d0 D8 G" I) G
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

------------------------------------------
) f1 y- X9 J$ r  M6 f
------------------------------------------
4 g5 `# Y& X6 E5 {; A) D
最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
, H% y& C3 X4 Y" W9 Q论坛为了防止复制,而加上的随机字符, 好烦人啊

按F12，在CSS中加入

1. .jammer {
   ) m0 X9 [4 }2 |5 B- ]0 K- g
2.     display: none;
   
3. }

复制代码

deeke

1 b9 w" v0 `  Y! `7 ?! o1 p
听说 评分 以后随机字符都不会消失 :p
8 q9 M) Z+ R; H7 ~

HMPT

论坛为了防止复制,而加上的随机字符, 好烦人啊

neikice

deeke 发表于 2017-9-25 15:04
9 j( I- x* r' G1 U3 O2 ?评分 以后随机字符就会消失，是真的。

! e) O( y7 K5 ^; z居然还有这种操作

learnfun

牛！这个是css能定义全局js文件吗？大大

henices

效果非常不错, 感谢.



======================
2 M! `8 Q: O, F! V/ w2 @

arbzn

求教樓主，有些詞典中漢語標點的分號和逗號(；，)在goldendict中會顯示爲英文的分號和逗號(;,)，這個有辦法控制嗎？

deeke

arbzn 发表于 2017-10-10 21:27
求教樓主，有些詞典中漢語標點的分號和逗號(；，)在goldendict中會顯示爲英文的分號和逗號(;,)，這個有辦法 ...

7 o3 |! ~  P6 l, l汉语分号的 Unicode 编码是 FF1B、逗号是 FF0C，英文是 3B、2C，应该是不会混淆。

deeke

henices 发表于 2017-10-10 09:21
1 p/ J: p% J4 U* X" a效果非常不错, 感谢.

你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。

arbzn

; X6 r% h# R4 ?+ A1 T4 n$ s  A" _+ x8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
以前都是用stardict词库的，一时无法割舍。。。。。

deeke

arbzn 发表于 2017-10-11 13:25
8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置 ...

  c" a: M' [# m( z法鼓山做的 Stardict 格式的佛学词典
; s" }6 T' w2 h我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。
1 R& f7 w9 V4 G/ h) M6 N
有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

感謝分享，要慢慢學習才行！！

helloit

网上找到的相关分享
作个留存，有时间再来研究~

7 t8 D! c% l1 A4 S1 l谢谢deeke大的分享！

jerrybag

感谢楼主分享，非常感谢。