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

deeke

171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
8 z( X" ^3 O6 x. Y8 a& s( j! V9 V, X170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
: L6 n7 y! W0 [, ]% P------------------------------------------
' V$ T2 H! g+ G- L/ Z4 [; F
------------------------------------------
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
2 g- J& Z, K, V6 G9 S7 T使词典名称条更紧凑，在缩放页面时它几乎不会错位。
0 J! O. |! q5 W7 D8 U) T4 v
1. 选择风格：灵格斯。
4 T: Y9 w* }7 ~$ W3 O  R. ~2. 隐藏 词典名称的蓝色背景、词典图标。
" z/ W& R* V, n6 ?% A7 h3. 隐藏 右侧展开、折叠的箭头图片。
4. 调整 尺寸、间距、边框、颜色。

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

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   ( L5 o4 X3 z8 c6 F  d9 o
3. 
   + F/ f2 J+ F. b, ~$ R- G( h
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   2 I2 F6 j! B& n" y/ x2 v5 w; }
5. .gddictname {
   
6.   font-size: .625rem;
   9 [7 y6 E9 ?+ N% D5 S0 M7 M0 p
7.   margin: -.0625rem 0;
   % a" c  b) c8 U1 `) u' S& n
8.   padding-left: 0;
   
9.   vertical-align: bottom;
   
10.   border-width: 0;
    5 F$ s2 f- Z. I- ~3 r' [
11.   background-color: transparent;
    8 U6 f- n6 y) J, U2 `* z- D) p5 f: l
12. }
    
13. 
    9 t/ P$ d- e8 v; }
14. /* 加粗 词典名称 文字的下边框 */
    : S7 v; m+ p( A0 t1 j
15. .gddicttitle {
    
16.   position: relative;
    , l. p% u' o+ l% i4 [$ B
17.   top: .01rem;
    ; z6 L) w4 Q$ A' i* z1 ~+ M) T
18.   padding-bottom: .0625rem;
    
19.   color: gray;
    ( V* v6 z  T8 y; X$ U
20.   border-bottom: .23rem solid gray;
    
21. }
    6 V/ \7 [6 E7 x+ f; V! B
22. 
    8 M" h8 a9 ?% G( _5 {8 J
23. /* 隐藏 词典图标 和 “来自于……” */
    
24. .gddicticon,.gdfromprefix { display: none; }
    / B' y* R& F& |
25. 
    1 Q% J9 R( U6 H/ S. Z
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    
27. .gdcollapseicon,.gdexpandicon {
    
28.   position: relative;
    6 L8 T' a+ s, e, x0 j
29.   top: .2745rem;
    4 Q. p0 b$ x% K
30.   /* w:h = 1:1 */
    ( t6 h  x3 `  A, I( A
31.   width: .645rem;
    ; Q1 U# Y  e. B5 M# k
32.   /* w:h = 2:1 */
    / U5 K: A; p, E/ W# L0 W2 U+ B
33.   /* width: 1.45rem; */
    
34.   height: .475rem;
    
35.   border: .08rem solid gray;
    
36.   background-color: transparent;
    9 a, T0 J$ `1 e& E/ S  p2 u
37.   background-image: none;
    % a- U) E( J! C, J. T! Y8 p9 M8 W
38. }
    
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    . K1 y+ T3 O* X( K3 [' @6 W
41. .gdexpandicon { background-color: gray; }
    4 Y8 p- v; f, F# i& O4 N( m; X
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    : u' {( I" I) [5 a. m
43. .gdcollapseicon { border-bottom-width: .25rem; }
    
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    
45. 
    
46. /* 分割线 */
    . X" |# X! n3 H( Y7 |& t
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

------------------------------------------
通过 qt-style.css 调整 软件界面文字大小
+ b+ Y. M: O4 u, ~5 N. t
在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。
" l; V9 r' t1 y' G7 _3 K

1. QToolTip, /* 按钮或链接的提示信息 */
   * k) d$ s1 c' W% ]7 D4 r7 o& L
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   9 G' |8 A) T; f& _8 Y, O" V* {
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   ( F, U7 s% J9 Z0 s- j
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   ; g' {: ~# b2 F3 `
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

------------------------------------------
! o/ Y& L3 h; H6 _' ^0 R" `5 X% X
------------------------------------------
: J8 H. Q9 }7 C7 ~, S
$ q' {: O) [. c3 h$ g: m! Q最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
9 y/ l/ Z$ p$ R& J7 z论坛为了防止复制,而加上的随机字符, 好烦人啊

按F12，在CSS中加入
5 i5 X/ H7 U$ @

1. .jammer {
   
2.     display: none;
   
3. }

复制代码

deeke

$ i9 q" u. H4 U/ {* L  {, M5 p
  {/ K3 Y0 L+ d, C' s0 o% z3 T听说 评分 以后随机字符都不会消失 :p

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
4 W0 b# `. c6 ]8 w. g3 v评分 以后随机字符就会消失，是真的。

居然还有这种操作

learnfun

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

henices

" H* n5 d5 R' W' u8 n7 _- ]  @3 T, G
效果非常不错, 感谢.
$ \2 t' E2 y& L& n9 w6 h  p" w
2 z+ Q9 E( O5 `+ C. P/ K$ w1 Q
( \+ V7 |& B; n9 B# S' F
9 f9 P6 M4 m6 j# ~======================
! a* D# ?& \# E7 U

arbzn

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

deeke

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

汉语分号的 Unicode 编码是 FF1B、逗号是 FF0C，英文是 3B、2C，应该是不会混淆。

deeke

henices 发表于 2017-10-10 09:21
* u& M4 z) T0 e8 [5 Z3 m& j4 F+ T效果非常不错, 感谢.

) {" G/ K% a+ [3 c你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。

6 {- f/ }8 d% _* s; z( L

arbzn

0 ?* k9 W7 _) }: t* Z, W7 \2 X8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
" a( o1 c' n& Y5 |( |以前都是用stardict词库的，一时无法割舍。。。。。

deeke

arbzn 发表于 2017-10-11 13:25
! L- l- O1 ~& w4 C# \( o( o8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置 ...

: @' t/ P3 A: E
法鼓山做的 Stardict 格式的佛学词典
我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。
- Z4 O8 _$ O  E
1 {9 O2 z2 j  c& u( ~有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

网上找到的相关分享
- z7 p2 X# ?) Y3 D. D% k* q作个留存，有时间再来研究~
3 N( L$ m3 \- X' j8 q. D
' V& L. A$ Q! R) ?! [谢谢deeke大的分享！

jerrybag

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