Commit 8acad7fc67f93b42817dfa22af1c494e36afc92f
1 parent
94ef5e4159
Exists in
master
Utilisation d'un fichier de variables css
Showing 6 changed files with 56 additions and 21 deletions Side-by-side Diff
templates/html/Default.html
... | ... | @@ -4,6 +4,8 @@ |
4 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
5 | 5 | <title>[% title %]</title> |
6 | 6 | <meta name='Generator' content='[% generator.name %]'> |
7 | + <link rel="stylesheet" | |
8 | + href="[% resource('common/zim-variables.css') %]" > | |
7 | 9 | <link rel="stylesheet" |
8 | 10 | href="[% resource('common/zim-style.css') %]" > |
9 | 11 | <link rel="stylesheet" |
templates/html/Default_with_index.html
... | ... | @@ -5,6 +5,8 @@ |
5 | 5 | <title>[% title %]</title> |
6 | 6 | <meta name='Generator' content='[% generator.name %]'> |
7 | 7 | <link rel="stylesheet" |
8 | + href="[% resource('common/zim-variables.css') %]" > | |
9 | + <link rel="stylesheet" | |
8 | 10 | href="[% resource('common/zim-style.css') %]" > |
9 | 11 | <link rel="stylesheet" |
10 | 12 | href="[% resource('common/zim-table-style.css') %]" > |
templates/html/Print.html
... | ... | @@ -7,6 +7,8 @@ |
7 | 7 | <!-- ATTENTION Le template Print ne supporte pas les ressources, |
8 | 8 | Il faut mettre des chemins absolus sur les fichiers :( --> |
9 | 9 | <link rel="stylesheet" |
10 | + href="file:////home/daniau/.local/share/zim/templates/html/common/zim-variables.css" > | |
11 | + <link rel="stylesheet" | |
10 | 12 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-style.css" > |
11 | 13 | <link rel="stylesheet" |
12 | 14 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-table-style.css" > |
templates/html/common/zim-style.css
1 | 1 | /* Common zim definitions */ |
2 | 2 | |
3 | 3 | a { text-decoration: none; |
4 | - color: blue;} | |
4 | + color: var(--main-link-color);} | |
5 | 5 | a:link { text-decoration: none; |
6 | - color: blue;} | |
6 | + color: var(--main-link-color);} | |
7 | 7 | a:hover { text-decoration: none; |
8 | - color: blue;} | |
8 | + color: var(--main-link-color);} | |
9 | 9 | a:active { text-decoration: none; |
10 | - color: blue;} | |
10 | + color: var(--main-link-color);} | |
11 | 11 | a:visited { text-decoration: none; |
12 | - color: blue;} | |
12 | + color: var(--main-link-color);} | |
13 | 13 | |
14 | - strike { color: grey } | |
14 | + strike { color: var(--main-strike-color);} | |
15 | 15 | |
16 | 16 | u { text-decoration: underline; |
17 | - background-color: white } | |
17 | + /*background-color: white*/ } | |
18 | 18 | |
19 | - tt { color: darkmagenta; | |
19 | + tt { color: var(--main-tt-color); | |
20 | 20 | font-family: monospace; |
21 | 21 | font-size: large} |
22 | 22 | |
23 | - pre { color: darkmagenta; | |
23 | + pre { color: var(--main-pre-color); | |
24 | 24 | margin-left: 20px; |
25 | 25 | margin-right: 5px; |
26 | 26 | margin-bottom: 5px; |
27 | 27 | |
28 | 28 | |
29 | 29 | |
30 | 30 | |
31 | 31 | |
... | ... | @@ -28,30 +28,30 @@ |
28 | 28 | font-family: monospace; |
29 | 29 | font-size: large } |
30 | 30 | |
31 | - code { font-size: large; font-family: monospace; color: saddlebrown} | |
31 | + code { font-size: large; font-family: monospace; color: var(--main-code-color)} | |
32 | 32 | |
33 | 33 | h1 { text-decoration: underline; |
34 | - color: #4e9a06; | |
34 | + color: var(--main-header-color); | |
35 | 35 | margin-bottom: 0; |
36 | 36 | margin-top: 1em; } |
37 | 37 | |
38 | - h2 { color: #4e9a06; | |
38 | + h2 { color: var(--main-header-color); | |
39 | 39 | margin-bottom: 0; |
40 | 40 | margin-left: 20px; |
41 | 41 | margin-top: 1em;} |
42 | 42 | |
43 | - h3 { color: #4e9a06; | |
43 | + h3 { color: var(--main-header-color); | |
44 | 44 | margin-bottom: 0; |
45 | 45 | margin-left: 40px; |
46 | 46 | margin-top: 1em; |
47 | 47 | font-style: italic; } |
48 | 48 | |
49 | - h4 { color: #4e9a06; | |
49 | + h4 { color: var(--main-header-color); | |
50 | 50 | margin-bottom: 0; |
51 | 51 | margin-left: 60px; |
52 | 52 | margin-top: 1em;} |
53 | 53 | |
54 | - h5 { color: #4e9a06; | |
54 | + h5 { color: var(--main-header-color); | |
55 | 55 | margin-bottom: 0; |
56 | 56 | margin-left: 80px; |
57 | 57 | margin-top: 1em;} |
templates/html/common/zim-table-style.css
... | ... | @@ -8,15 +8,16 @@ |
8 | 8 | } |
9 | 9 | |
10 | 10 | td,th { |
11 | - border: 1px solid #ddd; | |
11 | + border: 1px solid var(--main-td-th-border-color); | |
12 | 12 | padding: 4px; |
13 | 13 | } |
14 | 14 | |
15 | + tr:nth-child(odd){background-color: var(--main-tr-odd-background-color);} | |
16 | + | |
17 | + tr:nth-child(even){background-color: var(--main-tr-even-background-color);} | |
15 | 18 | |
16 | - tr:nth-child(even){background-color: #f2f2f2;} | |
19 | + tr:hover {background-color: var(--main-tr-hover-background-color);} | |
17 | 20 | |
18 | - tr:hover {background-color: #ddd;} | |
19 | - | |
20 | 21 | th { |
21 | 22 | padding-top: 6px; |
22 | 23 | padding-bottom: 6px; |
23 | 24 | |
... | ... | @@ -28,10 +29,11 @@ |
28 | 29 | /*color: white;*/ |
29 | 30 | |
30 | 31 | /*background-color: #d1e1c1;*/ |
31 | - background-color: #bbb; | |
32 | - color: black; | |
32 | + background-color: var(--main-th-background-color); | |
33 | + color: var(--main-th-color); | |
33 | 34 | } |
34 | 35 | |
36 | + /* Overriding for the navigation table in header */ | |
35 | 37 | table.navigation { |
36 | 38 | border-collapse: collapse; |
37 | 39 | width: auto; |
... | ... | @@ -42,6 +44,10 @@ |
42 | 44 | td.navigation, th.navigation { |
43 | 45 | border: 0; |
44 | 46 | padding: 0; |
47 | + } | |
48 | + | |
49 | + tr.navigation { | |
50 | + background-color: white; | |
45 | 51 | } |
46 | 52 | |
47 | 53 | tr.navigation:hover { |
templates/html/common/zim-variables.css
1 | + | |
2 | + /* Variables */ | |
3 | + | |
4 | + :root { | |
5 | + /* General */ | |
6 | + --main-header-color: #4e9a06; /* Headers color */ | |
7 | + --main-link-color: blue; /* Links color */ | |
8 | + --main-strike-color: grey; /* Strike color */ | |
9 | + --main-pre-color: darkmagenta; /* Verbatim bloc color */ | |
10 | + --main-tt-color: darkmagenta; /* Inline verbatim */ | |
11 | + --main-code-color: saddlebrown; /* Code color (if hljs not used) */ | |
12 | + --main-body-color: lightslategrey; /* Color of the background body */ | |
13 | + | |
14 | + /* Tables */ | |
15 | + /* Table headers */ | |
16 | + --main-th-color: black; /* Table header text color */ | |
17 | + --main-th-background-color: #bbb; /* Table header background */ | |
18 | + /* Table Row and Data */ | |
19 | + --main-tr-even-background-color: #f2f2f2; /* Even row background color */ | |
20 | + --main-tr-odd-background-color: white; /* Odd row background color */ | |
21 | + --main-tr-hover-background-color: #ddd; /* Row background color when hover */ | |
22 | + --main-td-th-border-color: #ddd; /* Cell's Border color */ | |
23 | + } |