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

deeke

6 J( r& l" I) @: L& o9 e171010：更换图例一。稍微减少 词典名称 与 分割线 的距离（代码区 Line 17. 18.）。
9 Y* t% P4 e3 _4 K/ r: x170928：更换图例一、二。修改一处 宽高比例（代码区 Line 30. ~ 33.）。
------------------------------------------

9 x- O, X% L, G------------------------------------------
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

不给 mp3 加上 tag 就睡不着觉，不调整 GD 外观就不能查词典，这是“磨刀专误砍柴工”系列的第三集：
使词典名称条更紧凑，在缩放页面时它几乎不会错位。
( z. v1 a; z% A  D' |4 P% d# Y
1. 选择风格：灵格斯。
2. 隐藏 词典名称的蓝色背景、词典图标。
  A6 v# b- {2 ?3. 隐藏 右侧展开、折叠的箭头图片。
$ j/ V! W3 O3 V" o0 s0 r* ]& j4. 调整 尺寸、间距、边框、颜色。
, O/ m: t  d* @
修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。

1. /* 拉近 词典名称条 之间的距离。如果太近，就会重叠。 */
   
2. .gdarticle { margin-top: .3rem; margin-bottom: 0; }
   8 k9 Y+ t4 a2 n5 o( E8 N* t
3. 
   
4. /* 隐藏 词典名称 外部容器的蓝色背景和边框 */
   " R) E$ X# v& n1 u7 |
5. .gddictname {
   ) x6 b$ Z9 i" |. S4 T$ e
6.   font-size: .625rem;
   9 |! |7 Q" A) p3 e# T
7.   margin: -.0625rem 0;
   
8.   padding-left: 0;
   
9.   vertical-align: bottom;
   
10.   border-width: 0;
    
11.   background-color: transparent;
    : \1 n- d/ u  j; p3 O8 X
12. }
    * X& i& i8 f% {
13. 
    4 _6 s7 l3 d8 V3 v3 K
14. /* 加粗 词典名称 文字的下边框 */
    
15. .gddicttitle {
    
16.   position: relative;
    # d9 d0 S, ^- S
17.   top: .01rem;
    
18.   padding-bottom: .0625rem;
    3 `) I, S+ j) h; p
19.   color: gray;
    
20.   border-bottom: .23rem solid gray;
    & ~' h/ |9 q% @& s5 L# x
21. }
    
22. 
    
23. /* 隐藏 词典图标 和 “来自于……” */
    / m+ e5 l4 m0 ]7 w9 i
24. .gddicticon,.gdfromprefix { display: none; }
    : k; ^9 F, s( M. Y  K
25. 
    
26. /* 隐藏 右侧箭头，调整尺寸、边框 */
    
27. .gdcollapseicon,.gdexpandicon {
    ' D6 b. q8 B6 c7 R- R
28.   position: relative;
    
29.   top: .2745rem;
    
30.   /* w:h = 1:1 */
    8 h& G" O: \. r5 A
31.   width: .645rem;
    
32.   /* w:h = 2:1 */
    - r4 U% q* v2 g' `/ [
33.   /* width: 1.45rem; */
    ! e8 f3 A7 |, u0 x$ e) a
34.   height: .475rem;
    
35.   border: .08rem solid gray;
    - n) O9 F1 [! k3 O3 O$ ]* E2 D
36.   background-color: transparent;
    % T- R: y5 \0 q, X6 `- \
37.   background-image: none;
    . B5 j! x0 ]5 B( p6 x% L0 Q
38. }
    
39. 
    $ W4 J# \; K" T2 I: e( R
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. 
    
46. /* 分割线 */
    
47. .gddictnamebodyseparator { display: block; margin-bottom: -.0625rem; border-top: .08rem solid gray; }
    
48. 
    
49. /* 拉近 mdx 和 dsl 词典内容 与它们的 词典名称条 距离 */
    " ^8 ?0 b& E  D* Q! K9 g' Z0 H
50. .mdict,.dsl_article { margin-top: .625rem; }

复制代码

------------------------------------------
通过 qt-style.css 调整 软件界面文字大小
# {7 C2 o/ ~' w. F2 y3 w
  Q+ F9 _# q! o% ]1 E' ]3 g在我的机器上 20px 比较合适（注意 qt-style.css 中不要用单位 rem ，没有效果）。
: k/ _  |/ f) @& Y
修改 GD 的配置文件：“ c:\...\GoldenDict\portable\qt-style.css ” 。

1. QToolTip, /* 按钮或链接的提示信息 */
   " H0 w6 X3 ~& \2 N+ m  d$ ]. a+ F
2. ArticleView #searchText, /* 按 Ctrl+F 后的搜索框 */
   
3. MainStatusBar #text, /* 右下角的提示信息 */
   
4. ScanPopup #translateLine, /* 弹出窗口的搜索框 */
   1 f; B$ C- O6 l9 ?1 n5 p6 ]0 B
5. MainWindow #translateLine, /* 主窗口的搜索框 */
   % B* I8 `4 L- E/ ]4 s& f) u
6. MainWindow #wordList, /* 搜索框下方的单词列表 */
   $ `$ o" ^: N; U7 b  m0 x
7. MainWindow #dictsPane #dictsList, /* 查到单词的词典列表 */
   4 z9 j, v2 c5 h' z& V, g6 F. d
8. MainWindow #historyPane #historyList, /* 历史面板的单词列表 */
   2 P& h& |) _) b8 c. N! m, y
9. MainWindow #favoritesPane #favoritesTree /* 收藏面板的单词列表 */
   
10. { font-size: 20px; }

复制代码

2 c8 j. Y8 D4 n9 X------------------------------------------

; D: I. f. k; [# r------------------------------------------

$ A# s: J% z' e最后再来个图，别忘了帮我评分呦~~~

独行者

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

; ]" J  k) u; K: E0 J/ s7 E1 w) O按F12，在CSS中加入
9 v( V& b4 e3 x( e3 |6 ^

1. .jammer {
   
2.     display: none;
   * S; J" A+ j6 R) k
3. }

复制代码

deeke

  t* S0 P# N+ l  h$ x6 d, R听说 评分 以后随机字符都不会消失 :p
" g- j" Q/ J( H, F1 o

HMPT

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

neikice

deeke 发表于 2017-9-25 15:04
! ~: S; M/ d1 x! ^, Q评分 以后随机字符就会消失，是真的。

1 w7 r; s7 d, R- w. n9 c居然还有这种操作

learnfun

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

henices

# g. d8 o# n5 ^/ V效果非常不错, 感谢.
" ^; }1 {9 s& ?4 D, ]

9 o+ E% c* c% }* J. m* d" f
======================
, {: m/ L. t& ]  K. A% n/ t4 `5 d

arbzn

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

deeke

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

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

deeke

henices 发表于 2017-10-10 09:21
) ]" L" x& _) L% B效果非常不错, 感谢.

) x; g$ `' x) |" V) i
你的“朗文4”里，第二行 “7national se'curity”，那个 7 是因为用了特殊字体：Kingsoft Phonetic Plain，音标也是它。
7 S: |7 Q1 K: n# }5 C/ a
( O  @1 B& B% K# T

$ u9 `8 ?& u' s

arbzn

8楼的问题如上图，stardict词库的逗号显示不对。另外，该词库引用的外部图片也没法显示。(bgl文件是内置的图片。)
: d' R/ x# v$ {2 x" S以前都是用stardict词库的，一时无法割舍。。。。。

deeke

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

8 e/ j& p2 {* E4 c+ K
法鼓山做的 Stardict 格式的佛学词典
我在这下载了“丁福保佛學大辭典”，标点和图片显示都很正常。
. L: M  n' G. z- ~# O

arbzn

用stardict-editor导出这个**的词典为xml文件后，再用stardict-editor编译成stardict格式词典，就和我以前的一样了，在Goldendict中不能正常显示逗号(在stardict程序中也是一样显示不正常)。不只是上面那一个词条的问题。

有的Mdict的词库在Mdict中能正常显示逗号，在Goldendict中就不行了。

stcjap

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

helloit

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

谢谢deeke大的分享！

jerrybag

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