Commit 8acad7fc67f93b42817dfa22af1c494e36afc92f

Authored by William Daniau
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 + }