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

deeke

; g2 u! m" i7 _171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------

------------------------------------------
( o, a7 ]6 D4 ^7 p8 O我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
5 p5 p# s3 \8 S' y: D+ `使词典名称条更紧凑，在缩放页面时它几乎不会错位。

1. 选择风格：灵格斯。
. J% o+ M( J" K3 g+ k  m" O2. 隐藏 词典名称的蓝色背景、词典图标。
! L1 p) z2 c- j4 G4 U+ T3. 隐藏 右侧展开、折叠的箭头图片。
; ?9 K$ H5 ~+ g2 l2 {4. 调整 尺寸、间距、边框、颜色。
- r$ R( U$ F9 x. Z3 [# ~! O! w
修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   ) ]* Y8 M) d/ a5 K
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   
5. .gddictname {
   
6.   font-size: .625rem;
   
7.   margin: -.0625rem 0;
   
8.   padding-left: 0;
   1 R: B+ [. N4 c" a* x
9.   vertical-align: bottom;
   
10.   border-width: 0;
    
11.   background-color: transparent;
    4 U5 m/ ^8 r/ Z/ i- H  Z8 I& v
12. }
    
13. 
    # |) v% `9 [3 J
14. /* 加粗 词典名称 文字的下边框 */
    
15. .gddicttitle {
    
16.   position: relative;
    1 T1 g% L# n  _" t! U
17.   top: .01rem;
    9 @5 h( U2 l$ g' ?& m6 m& W" D, M
18.   padding-bottom: .0625rem;
    " |, {. m0 z, q5 g6 \! X
19.   color: gray;
    ! g: P  k, u2 D4 \* y9 m
20.   border-bottom: .23rem solid gray;
    
21. }
    8 p) b7 C8 U5 A7 x4 d
22. 
    , Q' j7 Z/ k( G: T# F
23. /* 隐藏 词典图标 和 “来自于……” */
    % @8 p; K# I- p
24. .gddicticon,.gdfromprefix { display: none; }
    7 V2 |& }: W, p  j; J* c% N$ V' C
25. 
    $ B; R# ?1 z. G( \: ^5 V
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    
27. .gdcollapseicon,.gdexpandicon {
    + U/ `3 ?/ R  Q* m2 T( b5 I
28.   position: relative;
    1 x. A% l' y- M6 k0 q' g
29.   top: .2745rem;
    % t$ |' n0 Z* s) c3 H
30.   /* w:h = 1:1 */
    
31.   width: .645rem;
    
32.   /* w:h = 2:1 */
    + J& O$ m1 L% ~( ^& I/ p' z
33.   /* width: 1.45rem; */
    
34.   height: .475rem;
    
35.   border: .08rem solid gray;
      t: \! P5 O  p# J3 ?5 l  R
36.   background-color: transparent;
    * B1 I/ a4 O9 |, Y7 p
37.   background-image: none;
    
38. }
    
39. 
    
40. /* 展开、鼠标悬停的展开、折叠、鼠标悬停的折叠，共四种样式 */
    
41. .gdexpandicon { background-color: gray; }
    
42. .gdexpandicon:hover { border-color: black; background-color: black; background-image: none; }
    
43. .gdcollapseicon { border-bottom-width: .25rem; }
    - _3 {( N# }( t( V& I9 s
44. .gdcollapseicon:hover { border-color: black; background-image: none; }
    2 [  i0 `# p# C: V7 ~
45. 
    ) A' U! Z" L, F3 A, o5 S
46. /* 分割线 */
    , I& h" R7 ^. x4 |- Q
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    5 W  L/ E* C! L* T/ A
48. 
    
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

# d* ^4 ~& g; S+ F! U------------------------------------------
, Y  S- w" S  {7 E: ]6 T) j- w, U5 I  I2 [通过 qt-style.css 调整 软件界面文字大小

7 c/ z4 g  v1 k/ A! ~+ j在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。

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

1. QToolTip, /* 按钮或链接的提示信息 */
   
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   
3. MainStatusBar #text, /* 右下角的提示信息 */
   4 m! V. K" L( S' m0 Q  R
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   * s' p1 |* x2 B2 i
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

) L+ J0 P/ N+ ?+ l3 l. u1 O+ ]# Z------------------------------------------
! ~' G% A2 T- ^5 B. u$ Y: e
5 V' T: I. E8 F; A+ i------------------------------------------

6 c% b6 j: n( Q' o) J7 O最后再来个图，别忘了帮我评分呦~~~

独行者

HMPT 发表于 2017-9-25 14:38
论坛为了防止复制,而加上的随机字符, 好烦人啊

按F12，在CSS中加入
7 X4 \* C1 L8 X

1. .jammer {
   , r6 T* Q8 ^2 p  ?; T' e
2.     display: none;
   
3. }

复制代码

deeke

+ i1 B. X0 }) m. j2 e" G
听说 评分 以后随机字符都不会消失 :p

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
9 }% T# B6 ]2 ^- F' V- M+ `4 A) W评分 以后随机字符就会消失，是真的。

& n. n- O" O" ^/ Q% D居然还有这种操作

learnfun

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

henices

! R7 a, [7 `( a! x: G5 t2 J
; ?8 N3 G4 D$ x; A' K% U! [效果非常不错, 感谢.

1 D6 H. @, n0 W4 p" ?" G; x  j! T
* n  X6 v* a: Y7 s/ Z: p* {
$ x0 i& {& N% z======================

arbzn

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

deeke

arbzn 发表于 2017-10-10 21:27
' \$ A) I$ E& ~( p( Z0 }7 d2 H5 S求教樓主，有些詞典中漢語標點的分號和逗號(；，)在goldendict中會顯示爲英文的分號和逗號(;,)，這個有辦法 ...

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

deeke

henices 发表于 2017-10-10 09:21
效果非常不错, 感谢.

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

8 U# R$ X8 ]# i7 c0 H; p

* h8 [6 f, W) N7 z$ X0 R$ ^

arbzn

% j# D" I; c4 V7 r8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
8 `: V3 I  T' G. g( r以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

' J; A$ Y% T5 q5 \7 e9 L2 Q
5 [* o! p' Y$ ]! [, B2 z  y4 S法鼓山做的 Stardict 格式的佛学词典
我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。
, e1 {* w3 V- h4 d1 W! u
3 h3 W5 g4 c2 e4 h2 ?8 o有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

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

) E5 x% v# e2 n" k谢谢deeke大的分享！

jerrybag

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