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 Inline Diff
templates/html/Default.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | 1 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<html> | 2 | 2 | <html> | |
<head> | 3 | 3 | <head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | 4 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<title>[% title %]</title> | 5 | 5 | <title>[% title %]</title> | |
<meta name='Generator' content='[% generator.name %]'> | 6 | 6 | <meta name='Generator' content='[% generator.name %]'> | |
7 | <link rel="stylesheet" | |||
8 | href="[% resource('common/zim-variables.css') %]" > | |||
<link rel="stylesheet" | 7 | 9 | <link rel="stylesheet" | |
href="[% resource('common/zim-style.css') %]" > | 8 | 10 | href="[% resource('common/zim-style.css') %]" > | |
<link rel="stylesheet" | 9 | 11 | <link rel="stylesheet" | |
href="[% resource('common/zim-table-style.css') %]" > | 10 | 12 | href="[% resource('common/zim-table-style.css') %]" > | |
<link rel="stylesheet" | 11 | 13 | <link rel="stylesheet" | |
href="[% resource('common/zim-special.css') %]" > | 12 | 14 | href="[% resource('common/zim-special.css') %]" > | |
<link rel="stylesheet" | 13 | 15 | <link rel="stylesheet" | |
href="[% resource('common/zim-hljs.css') %]" > | 14 | 16 | href="[% resource('common/zim-hljs.css') %]" > | |
15 | 17 | |||
<style type='text/css'> | 16 | 18 | <style type='text/css'> | |
* { font-family: sans-serif } | 17 | 19 | * { font-family: sans-serif } | |
18 | 20 | |||
a:hover { text-decoration: underline; } | 19 | 21 | a:hover { text-decoration: underline; } | |
20 | 22 | |||
/* Centre les images mais elles sont coupées aux sauts de page à l'impression */ | 21 | 23 | /* Centre les images mais elles sont coupées aux sauts de page à l'impression */ | |
img { | 22 | 24 | img { | |
display: block; | 23 | 25 | display: block; | |
margin-left: auto; | 24 | 26 | margin-left: auto; | |
margin-right: auto; | 25 | 27 | margin-right: auto; | |
} | 26 | 28 | } | |
27 | 29 | |||
28 | 30 | |||
</style> | 29 | 31 | </style> | |
30 | 32 | |||
<!-- Themes clair : | 31 | 33 | <!-- Themes clair : | |
atom-one-light.css, vs.css googlecode.css github.css | 32 | 34 | atom-one-light.css, vs.css googlecode.css github.css | |
qtcreator_light.css | 33 | 35 | qtcreator_light.css | |
Themes sombres : | 34 | 36 | Themes sombres : | |
agate.css vs2015.css atom-one-dark.css hybrid.css | 35 | 37 | agate.css vs2015.css atom-one-dark.css hybrid.css | |
ir-black.css sunburst.css tomorrow-night-bright.css | 36 | 38 | ir-black.css sunburst.css tomorrow-night-bright.css | |
qtcreator_dark.css | 37 | 39 | qtcreator_dark.css | |
Demo live : https://highlightjs.org/static/demo/ --> | 38 | 40 | Demo live : https://highlightjs.org/static/demo/ --> | |
<link rel="stylesheet" | 39 | 41 | <link rel="stylesheet" | |
href="[% resource('common/hljs/styles/sunburst.css') %]" > | 40 | 42 | href="[% resource('common/hljs/styles/sunburst.css') %]" > | |
41 | 43 | |||
<!-- hljs --> | 42 | 44 | <!-- hljs --> | |
<script src="[% resource('common/hljs/highlight.pack.js') %]"></script> | 43 | 45 | <script src="[% resource('common/hljs/highlight.pack.js') %]"></script> | |
44 | 46 | |||
</head> | 45 | 47 | </head> | |
<body> | 46 | 48 | <body> | |
47 | 49 | |||
[% options.empty_lines = "default" %] | 48 | 50 | [% options.empty_lines = "default" %] | |
49 | 51 | |||
<!-- Header --> | 50 | 52 | <!-- Header --> | |
<div class='header'> | 51 | 53 | <div class='header'> | |
<table class='navigation'> | 52 | 54 | <table class='navigation'> | |
<tr class='navigation'> | 53 | 55 | <tr class='navigation'> | |
<td class='navigation'> | 54 | 56 | <td class='navigation'> | |
[% IF navigation.prev %] | 55 | 57 | [% IF navigation.prev %] | |
<a href='[% uri(navigation.prev) %]'> | 56 | 58 | <a href='[% uri(navigation.prev) %]'> | |
<img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | 57 | 59 | <img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | |
</a> | 58 | 60 | </a> | |
[% ELSE %] | 59 | 61 | [% ELSE %] | |
<img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | 60 | 62 | <img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | |
[% END %] | 61 | 63 | [% END %] | |
</td> | 62 | 64 | </td> | |
<td class='navigation'> | 63 | 65 | <td class='navigation'> | |
[% IF links.get("index") %] | 64 | 66 | [% IF links.get("index") %] | |
<a href='[% uri(links.get("index")) %]'> | 65 | 67 | <a href='[% uri(links.get("index")) %]'> | |
<img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | 66 | 68 | <img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | |
</a> | 67 | 69 | </a> | |
[% ELSE %] | 68 | 70 | [% ELSE %] | |
<img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | 69 | 71 | <img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | |
[% END %] | 70 | 72 | [% END %] | |
</td> | 71 | 73 | </td> | |
<td class='navigation'> | 72 | 74 | <td class='navigation'> | |
[% IF navigation.next %] | 73 | 75 | [% IF navigation.next %] | |
<a href='[% uri(navigation.next) %]'> | 74 | 76 | <a href='[% uri(navigation.next) %]'> | |
<img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | 75 | 77 | <img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | |
</a> | 76 | 78 | </a> | |
[% ELSE %] | 77 | 79 | [% ELSE %] | |
<img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | 78 | 80 | <img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | |
[% END %] | 79 | 81 | [% END %] | |
</td> | 80 | 82 | </td> | |
</tr> | 81 | 83 | </tr> | |
</table> | 82 | 84 | </table> | |
</div> | 83 | 85 | </div> | |
84 | 86 | |||
<hr /> | 85 | 87 | <hr /> | |
86 | 88 | |||
<!-- Wiki content --> | 87 | 89 | <!-- Wiki content --> | |
88 | 90 | |||
<div class='pages'> | 89 | 91 | <div class='pages'> | |
<!--[% FOR page IN pages %]--> | 90 | 92 | <!--[% FOR page IN pages %]--> | |
<div class='heading'> | 91 | 93 | <div class='heading'> | |
<h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1> | 92 | 94 | <h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1> | |
</div> | 93 | 95 | </div> | |
94 | 96 | |||
<div class='content'> | 95 | 97 | <div class='content'> | |
[% page.body %] | 96 | 98 | [% page.body %] | |
</div> | 97 | 99 | </div> | |
98 | 100 | |||
<br /> | 99 | 101 | <br /> | |
100 | 102 | |||
<div class='page-footer'> | 101 | 103 | <div class='page-footer'> | |
<!--[% FOR link IN page.backlinks %]--> | 102 | 104 | <!--[% FOR link IN page.backlinks %]--> | |
[% IF loop.first %]<b>[% gettext("Backlinks:") %]</b>[% END %] | 103 | 105 | [% IF loop.first %]<b>[% gettext("Backlinks:") %]</b>[% END %] | |
104 | 106 | |||
<a href='[% uri(link) %]'>[% link.name %]</a> | 105 | 107 | <a href='[% uri(link) %]'>[% link.name %]</a> | |
106 | 108 | |||
[% IF loop.last %]<br /><br />[% END %] | 107 | 109 | [% IF loop.last %]<br /><br />[% END %] |
templates/html/Default_with_index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | 1 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<html> | 2 | 2 | <html> | |
<head> | 3 | 3 | <head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | 4 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<title>[% title %]</title> | 5 | 5 | <title>[% title %]</title> | |
<meta name='Generator' content='[% generator.name %]'> | 6 | 6 | <meta name='Generator' content='[% generator.name %]'> | |
<link rel="stylesheet" | 7 | 7 | <link rel="stylesheet" | |
8 | href="[% resource('common/zim-variables.css') %]" > | |||
9 | <link rel="stylesheet" | |||
href="[% resource('common/zim-style.css') %]" > | 8 | 10 | href="[% resource('common/zim-style.css') %]" > | |
<link rel="stylesheet" | 9 | 11 | <link rel="stylesheet" | |
href="[% resource('common/zim-table-style.css') %]" > | 10 | 12 | href="[% resource('common/zim-table-style.css') %]" > | |
<link rel="stylesheet" | 11 | 13 | <link rel="stylesheet" | |
href="[% resource('common/zim-special.css') %]" > | 12 | 14 | href="[% resource('common/zim-special.css') %]" > | |
<link rel="stylesheet" | 13 | 15 | <link rel="stylesheet" | |
href="[% resource('common/zim-hljs.css') %]" > | 14 | 16 | href="[% resource('common/zim-hljs.css') %]" > | |
15 | 17 | |||
<style type='text/css'> | 16 | 18 | <style type='text/css'> | |
* { font-family: sans-serif } | 17 | 19 | * { font-family: sans-serif } | |
18 | 20 | |||
a:hover { text-decoration: underline; } | 19 | 21 | a:hover { text-decoration: underline; } | |
20 | 22 | |||
/* Centre les images mais elles sont coupées aux sauts de page à l'impression */ | 21 | 23 | /* Centre les images mais elles sont coupées aux sauts de page à l'impression */ | |
img { | 22 | 24 | img { | |
display: block; | 23 | 25 | display: block; | |
margin-left: auto; | 24 | 26 | margin-left: auto; | |
margin-right: auto; | 25 | 27 | margin-right: auto; | |
} | 26 | 28 | } | |
27 | 29 | |||
/* Specifique au with index */ | 28 | 30 | /* Specifique au with index */ | |
span.insen { color: grey } | 29 | 31 | span.insen { color: grey } | |
30 | 32 | |||
.pages { | 31 | 33 | .pages { | |
/*max-width: 1000px;*/ | 32 | 34 | /*max-width: 1000px;*/ | |
/*padding-left: 320px;*/ | 33 | 35 | /*padding-left: 320px;*/ | |
width: inherit; | 34 | 36 | width: inherit; | |
transition: margin-left .3s; | 35 | 37 | transition: margin-left .3s; | |
background: white; | 36 | 38 | background: white; | |
padding-left: 10px; | 37 | 39 | padding-left: 10px; | |
padding-right: 10px; | 38 | 40 | padding-right: 10px; | |
padding-bottom: 20px; | 39 | 41 | padding-bottom: 20px; | |
padding-top: 10px; | 40 | 42 | padding-top: 10px; | |
} | 41 | 43 | } | |
42 | 44 | |||
.menu{ | 43 | 45 | .menu{ | |
/*float:left; */ | 44 | 46 | /*float:left; */ | |
width: 0; | 45 | 47 | width: 0; | |
color:#4e9a06; | 46 | 48 | color:#4e9a06; | |
overflow-x: hidden; | 47 | 49 | overflow-x: hidden; | |
position: absolute; | 48 | 50 | position: absolute; | |
transition:.3s; | 49 | 51 | transition:.3s; | |
background: #fafafa; | 50 | 52 | background: #fafafa; | |
border-style: solid; | 51 | 53 | border-style: solid; | |
border-width: 1px; | 52 | 54 | border-width: 1px; | |
margin-left:-20px; | 53 | 55 | margin-left:-20px; | |
} | 54 | 56 | } | |
55 | 57 | |||
.menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited { | 56 | 58 | .menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited { | |
color: #4e9a06; | 57 | 59 | color: #4e9a06; | |
} | 58 | 60 | } | |
59 | 61 | |||
.menuOpen { | 60 | 62 | .menuOpen { | |
/*display: block;*/ | 61 | 63 | /*display: block;*/ | |
} | 62 | 64 | } | |
63 | 65 | |||
.menuClosed { | 64 | 66 | .menuClosed { | |
border-style: unset; | 65 | 67 | border-style: unset; | |
} | 66 | 68 | } | |
67 | 69 | |||
.header{ | 68 | 70 | .header{ | |
max-width: 63em; | 69 | 71 | max-width: 63em; | |
position: fixed; | 70 | 72 | position: fixed; | |
width: 100%; | 71 | 73 | width: 100%; | |
top:0; | 72 | 74 | top:0; | |
background:white; | 73 | 75 | background:white; | |
z-index: 1; | 74 | 76 | z-index: 1; | |
} | 75 | 77 | } | |
76 | 78 | |||
hr{ | 77 | 79 | hr{ | |
clear:both; | 78 | 80 | clear:both; | |
border-style: solid; | 79 | 81 | border-style: solid; | |
border-width: 1px; | 80 | 82 | border-width: 1px; | |
border-color: #4e9a06; | 81 | 83 | border-color: #4e9a06; | |
} | 82 | 84 | } | |
83 | 85 | |||
body { | 84 | 86 | body { | |
max-width:63em; | 85 | 87 | max-width:63em; | |
display:block; | 86 | 88 | display:block; | |
margin-left:auto; | 87 | 89 | margin-left:auto; | |
margin-right:auto; | 88 | 90 | margin-right:auto; | |
background: lightslategrey; | 89 | 91 | background: lightslategrey; | |
} | 90 | 92 | } | |
91 | 93 | |||
.intercalaire { | 92 | 94 | .intercalaire { | |
background:white; | 93 | 95 | background:white; | |
margin-top: 48px; | 94 | 96 | margin-top: 48px; | |
padding: 10px; | 95 | 97 | padding: 10px; | |
} | 96 | 98 | } | |
97 | 99 | |||
.bold-footer { | 98 | 100 | .bold-footer { | |
color: #4e9a06; | 99 | 101 | color: #4e9a06; | |
} | 100 | 102 | } | |
101 | 103 | |||
</style> | 102 | 104 | </style> | |
103 | 105 | |||
<!-- Themes clair : | 104 | 106 | <!-- Themes clair : | |
atom-one-light.css, vs.css googlecode.css github.css | 105 | 107 | atom-one-light.css, vs.css googlecode.css github.css | |
qtcreator_light.css | 106 | 108 | qtcreator_light.css | |
Themes sombres : | 107 | 109 | Themes sombres : | |
agate.css vs2015.css atom-one-dark.css hybrid.css | 108 | 110 | agate.css vs2015.css atom-one-dark.css hybrid.css | |
ir-black.css sunburst.css tomorrow-night-bright.css | 109 | 111 | ir-black.css sunburst.css tomorrow-night-bright.css | |
qtcreator_dark.css | 110 | 112 | qtcreator_dark.css | |
Demo live : https://highlightjs.org/static/demo/ --> | 111 | 113 | Demo live : https://highlightjs.org/static/demo/ --> | |
<link rel="stylesheet" | 112 | 114 | <link rel="stylesheet" | |
href="[% resource('common/hljs/styles/sunburst.css') %]" > | 113 | 115 | href="[% resource('common/hljs/styles/sunburst.css') %]" > | |
114 | 116 | |||
<!-- hljs --> | 115 | 117 | <!-- hljs --> | |
<script src="[% resource('common/hljs/highlight.pack.js') %]"></script> | 116 | 118 | <script src="[% resource('common/hljs/highlight.pack.js') %]"></script> | |
117 | 119 | |||
<script> | 118 | 120 | <script> | |
function openNav() { | 119 | 121 | function openNav() { | |
if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") { | 120 | 122 | if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") { | |
document.getElementById("mySidenav").style.width = "300px"; | 121 | 123 | document.getElementById("mySidenav").style.width = "300px"; | |
/*document.getElementById("main").style.marginLeft = "300px";*/ | 122 | 124 | /*document.getElementById("main").style.marginLeft = "300px";*/ | |
document.getElementById("mySidenav").setAttribute("class","menu menuOpen"); | 123 | 125 | document.getElementById("mySidenav").setAttribute("class","menu menuOpen"); | |
/* Scroll to top when opening menu */ | 124 | 126 | /* Scroll to top when opening menu */ | |
document.body.scrollTop = 0 | 125 | 127 | document.body.scrollTop = 0 | |
document.documentElement.scrollTop = 0; | 126 | 128 | document.documentElement.scrollTop = 0; | |
} else { | 127 | 129 | } else { | |
document.getElementById("mySidenav").style.width = "0"; | 128 | 130 | document.getElementById("mySidenav").style.width = "0"; | |
/*document.getElementById("main").style.marginLeft = "0";*/ | 129 | 131 | /*document.getElementById("main").style.marginLeft = "0";*/ | |
document.getElementById("mySidenav").setAttribute("class","menu menuClosed"); | 130 | 132 | document.getElementById("mySidenav").setAttribute("class","menu menuClosed"); | |
} | 131 | 133 | } | |
} | 132 | 134 | } | |
</script> | 133 | 135 | </script> | |
</head> | 134 | 136 | </head> | |
<body> | 135 | 137 | <body> | |
136 | 138 | |||
<!-- Header --> | 137 | 139 | <!-- Header --> | |
<div class='header'> | 138 | 140 | <div class='header'> | |
<table class='navigation' style="float:left"> | 139 | 141 | <table class='navigation' style="float:left"> | |
<tr class='navigation'> | 140 | 142 | <tr class='navigation'> | |
<td class='navigation'> | 141 | 143 | <td class='navigation'> | |
<span style="font-size:30px;cursor:pointer;color: #4e9a06;" onclick="openNav()">☰</span> | 142 | 144 | <span style="font-size:30px;cursor:pointer;color: #4e9a06;" onclick="openNav()">☰</span> | |
</td> | 143 | 145 | </td> | |
<td class='navigation'> | 144 | 146 | <td class='navigation'> | |
[% IF navigation.prev %] | 145 | 147 | [% IF navigation.prev %] | |
<a href='[% uri(navigation.prev) %]'> | 146 | 148 | <a href='[% uri(navigation.prev) %]'> | |
<img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | 147 | 149 | <img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | |
</a> | 148 | 150 | </a> | |
[% ELSE %] | 149 | 151 | [% ELSE %] | |
<img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | 150 | 152 | <img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> | |
[% END %] | 151 | 153 | [% END %] | |
</td> | 152 | 154 | </td> | |
<td class='navigation'> | 153 | 155 | <td class='navigation'> | |
[% IF links.get("index") %] | 154 | 156 | [% IF links.get("index") %] | |
<a href='[% uri(links.get("index")) %]'> | 155 | 157 | <a href='[% uri(links.get("index")) %]'> | |
<img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | 156 | 158 | <img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | |
</a> | 157 | 159 | </a> | |
[% ELSE %] | 158 | 160 | [% ELSE %] | |
<img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | 159 | 161 | <img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> | |
[% END %] | 160 | 162 | [% END %] | |
</td> | 161 | 163 | </td> | |
<td class='navigation'> | 162 | 164 | <td class='navigation'> | |
[% IF navigation.next %] | 163 | 165 | [% IF navigation.next %] | |
<a href='[% uri(navigation.next) %]'> | 164 | 166 | <a href='[% uri(navigation.next) %]'> | |
<img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | 165 | 167 | <img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | |
</a> | 166 | 168 | </a> | |
[% ELSE %] | 167 | 169 | [% ELSE %] | |
<img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | 168 | 170 | <img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> | |
[% END %] | 169 | 171 | [% END %] | |
</td> | 170 | 172 | </td> | |
</tr> | 171 | 173 | </tr> | |
</table> | 172 | 174 | </table> | |
173 | 175 | |||
<span> | 174 | 176 | <span> | |
[% FOR page IN pages %] | 175 | 177 | [% FOR page IN pages %] | |
<a name='[% anchor(page) %]'></a> | 176 | 178 | <a name='[% anchor(page) %]'></a> | |
<h1 style="display:inline-block;margin-left:20px;margin-top:5px;"> | 177 | 179 | <h1 style="display:inline-block;margin-left:20px;margin-top:5px;"> | |
[% page.title %]</h1> | 178 | 180 | [% page.title %]</h1> | |
[% END %] | 179 | 181 | [% END %] | |
</span> | 180 | 182 | </span> | |
181 | 183 | |||
<table class='navigation' style="float:right;margin-right:10px;"> | 182 | 184 | <table class='navigation' style="float:right;margin-right:10px;"> | |
<tr class='navigation'> | 183 | 185 | <tr class='navigation'> | |
<td class='navigation'> | 184 | 186 | <td class='navigation'> | |
[% FOR page IN pages %] | 185 | 187 | [% FOR page IN pages %] | |
[% FOR link IN page.backlinks %] | 186 | 188 | [% FOR link IN page.backlinks %] | |
[% IF loop.first %]<a href="#backlinks"> | 187 | 189 | [% IF loop.first %]<a href="#backlinks"> | |
<img src='[% resource("common/backlink.png") %]' alt='[% gettext("Backlinks:") %]' title='[% gettext("Backlinks:") %]'> | 188 | 190 | <img src='[% resource("common/backlink.png") %]' alt='[% gettext("Backlinks:") %]' title='[% gettext("Backlinks:") %]'> | |
</a>[% END %] | 189 | 191 | </a>[% END %] | |
[% END %] | 190 | 192 | [% END %] | |
[% END %] | 191 | 193 | [% END %] | |
</td> | 192 | 194 | </td> | |
<td class='navigation'> | 193 | 195 | <td class='navigation'> | |
[% FOR page IN pages %] | 194 | 196 | [% FOR page IN pages %] | |
[% FOR file IN page.attachments %] | 195 | 197 | [% FOR file IN page.attachments %] | |
[% IF loop.first %]<a href="#attach"> | 196 | 198 | [% IF loop.first %]<a href="#attach"> | |
<img src='[% resource("common/attachment.png") %]' alt='[% gettext("Attachments:") %]' title='[% gettext("Attachments:") %]'> | 197 | 199 | <img src='[% resource("common/attachment.png") %]' alt='[% gettext("Attachments:") %]' title='[% gettext("Attachments:") %]'> | |
</a>[% END %] | 198 | 200 | </a>[% END %] | |
[% END %] | 199 | 201 | [% END %] | |
[% END %] | 200 | 202 | [% END %] | |
</td> | 201 | 203 | </td> | |
</tr> | 202 | 204 | </tr> | |
</table> | 203 | 205 | </table> | |
</div> | 204 | 206 | </div> | |
205 | 207 | |||
<div class="intercalaire"> | 206 | 208 | <div class="intercalaire"> | |
<hr /> | 207 | 209 | <hr /> | |
</div> | 208 | 210 | </div> | |
209 | 211 | |||
<div id="mySidenav" class="menu menuClosed"> | 210 | 212 | <div id="mySidenav" class="menu menuClosed"> | |
[% index() %] | 211 | 213 | [% index() %] | |
</div> | 212 | 214 | </div> | |
213 | 215 | |||
[% options.empty_lines = "default" %] | 214 | 216 | [% options.empty_lines = "default" %] | |
215 | 217 | |||
<!-- Wiki content --> | 216 | 218 | <!-- Wiki content --> | |
217 | 219 | |||
<div id="main" class='pages'> | 218 | 220 | <div id="main" class='pages'> | |
<!--[% FOR page IN pages %]--> | 219 | 221 | <!--[% FOR page IN pages %]--> | |
<!-- | 220 | 222 | <!-- | |
<div class='heading'> | 221 | 223 | <div class='heading'> | |
<h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1> | 222 | 224 | <h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1> | |
</div> | 223 | 225 | </div> | |
--> | 224 | 226 | --> | |
<div class='content'> | 225 | 227 | <div class='content'> | |
[% page.body %] | 226 | 228 | [% page.body %] | |
</div> | 227 | 229 | </div> | |
228 | 230 | |||
<br /> | 229 | 231 | <br /> | |
230 | 232 | |||
<div style="padding-bottom:10px;"> | 231 | 233 | <div style="padding-bottom:10px;"> | |
<hr /> | 232 | 234 | <hr /> |
templates/html/Print.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | 1 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<html> | 2 | 2 | <html> | |
<head> | 3 | 3 | <head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | 4 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<title>[% title %]</title> | 5 | 5 | <title>[% title %]</title> | |
<meta name='Generator' content='[% generator.name %]'> | 6 | 6 | <meta name='Generator' content='[% generator.name %]'> | |
<!-- ATTENTION Le template Print ne supporte pas les ressources, | 7 | 7 | <!-- ATTENTION Le template Print ne supporte pas les ressources, | |
Il faut mettre des chemins absolus sur les fichiers :( --> | 8 | 8 | Il faut mettre des chemins absolus sur les fichiers :( --> | |
<link rel="stylesheet" | 9 | 9 | <link rel="stylesheet" | |
10 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-variables.css" > | |||
11 | <link rel="stylesheet" | |||
href="file:////home/daniau/.local/share/zim/templates/html/common/zim-style.css" > | 10 | 12 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-style.css" > | |
<link rel="stylesheet" | 11 | 13 | <link rel="stylesheet" | |
href="file:////home/daniau/.local/share/zim/templates/html/common/zim-table-style.css" > | 12 | 14 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-table-style.css" > | |
<link rel="stylesheet" | 13 | 15 | <link rel="stylesheet" | |
href="file:////home/daniau/.local/share/zim/templates/html/common/zim-special.css" > | 14 | 16 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-special.css" > | |
<link rel="stylesheet" | 15 | 17 | <link rel="stylesheet" | |
href="file:////home/daniau/.local/share/zim/templates/html/common/zim-hljs.css" > | 16 | 18 | href="file:////home/daniau/.local/share/zim/templates/html/common/zim-hljs.css" > | |
<style type='text/css'> | 17 | 19 | <style type='text/css'> | |
18 | 20 | |||
* { font-family: serif } | 19 | 21 | * { font-family: serif } | |
20 | 22 | |||
/* Centre les images mais elles sont coupées aux sauts de page à l'impression */ | 21 | 23 | /* Centre les images mais elles sont coupées aux sauts de page à l'impression */ | |
/*img { | 22 | 24 | /*img { | |
display: block; | 23 | 25 | display: block; | |
margin-left: auto; | 24 | 26 | margin-left: auto; | |
margin-right: auto; | 25 | 27 | margin-right: auto; | |
}*/ | 26 | 28 | }*/ | |
27 | 29 | |||
</style> | 28 | 30 | </style> | |
29 | 31 | |||
<!-- Themes clair : | 30 | 32 | <!-- Themes clair : | |
atom-one-light.css, vs.css | 31 | 33 | atom-one-light.css, vs.css | |
Themes sombres : | 32 | 34 | Themes sombres : | |
agate.css, vs2015.css, atom-one-dark.css | 33 | 35 | agate.css, vs2015.css, atom-one-dark.css | |
Demo live : https://highlightjs.org/static/demo/ --> | 34 | 36 | Demo live : https://highlightjs.org/static/demo/ --> | |
<link rel="stylesheet" | 35 | 37 | <link rel="stylesheet" | |
href="file:////home/daniau/.local/share/zim/templates/html/common/hljs/styles/atom-one-light-wb.css" > | 36 | 38 | href="file:////home/daniau/.local/share/zim/templates/html/common/hljs/styles/atom-one-light-wb.css" > | |
37 | 39 | |||
<!-- hljs --> | 38 | 40 | <!-- hljs --> | |
<script src="file:////home/daniau/.local/share/zim/templates/html/common/hljs/highlight.pack.js"></script> | 39 | 41 | <script src="file:////home/daniau/.local/share/zim/templates/html/common/hljs/highlight.pack.js"></script> | |
40 | 42 | |||
</head> | 41 | 43 | </head> | |
<body> | 42 | 44 | <body> | |
43 | 45 | |||
[% options.empty_lines = "default" %] | 44 | 46 | [% options.empty_lines = "default" %] | |
45 | 47 |
templates/html/common/zim-style.css
/* Common zim definitions */ | 1 | 1 | /* Common zim definitions */ | |
2 | 2 | |||
a { text-decoration: none; | 3 | 3 | a { text-decoration: none; | |
color: blue;} | 4 | 4 | color: var(--main-link-color);} | |
a:link { text-decoration: none; | 5 | 5 | a:link { text-decoration: none; | |
color: blue;} | 6 | 6 | color: var(--main-link-color);} | |
a:hover { text-decoration: none; | 7 | 7 | a:hover { text-decoration: none; | |
color: blue;} | 8 | 8 | color: var(--main-link-color);} | |
a:active { text-decoration: none; | 9 | 9 | a:active { text-decoration: none; | |
color: blue;} | 10 | 10 | color: var(--main-link-color);} | |
a:visited { text-decoration: none; | 11 | 11 | a:visited { text-decoration: none; | |
color: blue;} | 12 | 12 | color: var(--main-link-color);} | |
13 | 13 | |||
strike { color: grey } | 14 | 14 | strike { color: var(--main-strike-color);} | |
15 | 15 | |||
u { text-decoration: underline; | 16 | 16 | u { text-decoration: underline; | |
background-color: white } | 17 | 17 | /*background-color: white*/ } | |
18 | 18 | |||
tt { color: darkmagenta; | 19 | 19 | tt { color: var(--main-tt-color); | |
font-family: monospace; | 20 | 20 | font-family: monospace; | |
font-size: large} | 21 | 21 | font-size: large} | |
22 | 22 | |||
pre { color: darkmagenta; | 23 | 23 | pre { color: var(--main-pre-color); | |
margin-left: 20px; | 24 | 24 | margin-left: 20px; | |
margin-right: 5px; | 25 | 25 | margin-right: 5px; | |
margin-bottom: 5px; | 26 | 26 | margin-bottom: 5px; | |
margin-top: 5px; | 27 | 27 | margin-top: 5px; | |
font-family: monospace; | 28 | 28 | font-family: monospace; | |
font-size: large } | 29 | 29 | font-size: large } | |
30 | 30 | |||
code { font-size: large; font-family: monospace; color: saddlebrown} | 31 | 31 | code { font-size: large; font-family: monospace; color: var(--main-code-color)} | |
32 | 32 | |||
h1 { text-decoration: underline; | 33 | 33 | h1 { text-decoration: underline; | |
color: #4e9a06; | 34 | 34 | color: var(--main-header-color); | |
margin-bottom: 0; | 35 | 35 | margin-bottom: 0; | |
margin-top: 1em; } | 36 | 36 | margin-top: 1em; } | |
37 | 37 | |||
h2 { color: #4e9a06; | 38 | 38 | h2 { color: var(--main-header-color); | |
margin-bottom: 0; | 39 | 39 | margin-bottom: 0; | |
margin-left: 20px; | 40 | 40 | margin-left: 20px; | |
margin-top: 1em;} | 41 | 41 | margin-top: 1em;} | |
42 | 42 | |||
h3 { color: #4e9a06; | 43 | 43 | h3 { color: var(--main-header-color); | |
margin-bottom: 0; | 44 | 44 | margin-bottom: 0; | |
margin-left: 40px; | 45 | 45 | margin-left: 40px; | |
margin-top: 1em; | 46 | 46 | margin-top: 1em; | |
font-style: italic; } | 47 | 47 | font-style: italic; } | |
48 | 48 | |||
h4 { color: #4e9a06; | 49 | 49 | h4 { color: var(--main-header-color); | |
margin-bottom: 0; | 50 | 50 | margin-bottom: 0; | |
margin-left: 60px; | 51 | 51 | margin-left: 60px; | |
margin-top: 1em;} | 52 | 52 | margin-top: 1em;} | |
53 | 53 | |||
h5 { color: #4e9a06; | 54 | 54 | h5 { color: var(--main-header-color); | |
margin-bottom: 0; | 55 | 55 | margin-bottom: 0; | |
margin-left: 80px; | 56 | 56 | margin-left: 80px; | |
margin-top: 1em;} | 57 | 57 | margin-top: 1em;} | |
58 | 58 | |||
p { margin-top: 0 } | 59 | 59 | p { margin-top: 0 } | |
60 | 60 | |||
61 | 61 | |||
62 | 62 |
templates/html/common/zim-table-style.css
/* Table definition */ | 1 | 1 | /* Table definition */ | |
2 | 2 | |||
table { | 3 | 3 | table { | |
border-collapse: collapse; | 4 | 4 | border-collapse: collapse; | |
width: 98%; | 5 | 5 | width: 98%; | |
margin-left: auto; | 6 | 6 | margin-left: auto; | |
margin-right: auto; | 7 | 7 | margin-right: auto; | |
} | 8 | 8 | } | |
9 | 9 | |||
td,th { | 10 | 10 | td,th { | |
border: 1px solid #ddd; | 11 | 11 | border: 1px solid var(--main-td-th-border-color); | |
padding: 4px; | 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 | |||
tr:nth-child(even){background-color: #f2f2f2;} | 16 | 19 | tr:hover {background-color: var(--main-tr-hover-background-color);} | |
17 | 20 | |||
tr:hover {background-color: #ddd;} | 18 | |||
19 | ||||
th { | 20 | 21 | th { | |
padding-top: 6px; | 21 | 22 | padding-top: 6px; | |
padding-bottom: 6px; | 22 | 23 | padding-bottom: 6px; | |
/*background-color: #4CAF50;*/ | 23 | 24 | /*background-color: #4CAF50;*/ | |
/*background-color: #3a853c;*/ | 24 | 25 | /*background-color: #3a853c;*/ | |
/*background-color: #85733a;*/ | 25 | 26 | /*background-color: #85733a;*/ | |
/*background-color: #3a7685;*/ | 26 | 27 | /*background-color: #3a7685;*/ | |
/*background-color: #295e2a;*/ | 27 | 28 | /*background-color: #295e2a;*/ | |
/*color: white;*/ | 28 | 29 | /*color: white;*/ | |
29 | 30 | |||
/*background-color: #d1e1c1;*/ | 30 | 31 | /*background-color: #d1e1c1;*/ | |
background-color: #bbb; | 31 | 32 | background-color: var(--main-th-background-color); | |
color: black; | 32 | 33 | color: var(--main-th-color); | |
} | 33 | 34 | } | |
34 | 35 | |||
36 | /* Overriding for the navigation table in header */ | |||
table.navigation { | 35 | 37 | table.navigation { | |
border-collapse: collapse; | 36 | 38 | border-collapse: collapse; | |
width: auto; | 37 | 39 | width: auto; | |
margin-left: 0; | 38 | 40 | margin-left: 0; | |
margin-right: auto; | 39 | 41 | margin-right: auto; | |
} | 40 | 42 | } | |
41 | 43 | |||
td.navigation, th.navigation { | 42 | 44 | td.navigation, th.navigation { | |
border: 0; | 43 | 45 | border: 0; | |
padding: 0; | 44 | 46 | padding: 0; | |
47 | } | |||
48 | ||||
49 | tr.navigation { |
templates/html/common/zim-variables.css
File was created | 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 */ |