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 | + } |