slitaz-base-files rev 285
Change slitaz-doc CSS and JS.
Show link destination (while current SliTaz doc browser (TazWeb) can't do it by itself).
Show doc section title.
Show link destination (while current SliTaz doc browser (TazWeb) can't do it by itself).
Show doc section title.
author | Aleksej Bobylev <al.bobylev@gmail.com> |
---|---|
date | Thu Oct 08 00:22:16 2015 +0300 (2015-10-08) |
parents | 91266cae02cb |
children | af25e2951d08 |
files | rootfs/usr/share/doc/slitaz-doc.css rootfs/usr/share/doc/slitaz-doc.js |
line diff
1.1 --- a/rootfs/usr/share/doc/slitaz-doc.css Thu Aug 20 18:38:54 2015 +0200 1.2 +++ b/rootfs/usr/share/doc/slitaz-doc.css Thu Oct 08 00:22:16 2015 +0300 1.3 @@ -4,22 +4,41 @@ 1.4 font: 100% "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif; 1.5 margin: 0; 1.6 -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; 1.7 + background-color: #FFF; color: #000; 1.8 } 1.9 1.10 -h1 { font-size: 150%; font-weight: 400; margin: 0; padding: 0.3em; } 1.11 -h2 { font-size: 200%; font-weight: 300; margin: 1em 0 0 0; text-transform: uppercase; } 1.12 -h3 { font-size: 150%; font-weight: 400; margin: 1em 0 0 0; } 1.13 -p { margin: 0.5em 0; } 1.14 - 1.15 -a, a:link { text-decoration: none; } 1.16 -a:hover, a:focus { border-bottom: 1px solid; } 1.17 -a[href^="http"]::after { 1.18 - content: '\21b1'; 1.19 - position: relative; 1.20 - top: -2pt; 1.21 +h1 { 1.22 + font-size: 150%; 1.23 + font-weight: 400; 1.24 + margin: 0; 1.25 + padding: 0.3em; 1.26 +} 1.27 +h2, body section > header { 1.28 + font-size: 200%; 1.29 + font-weight: 300; 1.30 + margin: 1em 0 0 0; 1.31 + text-transform: uppercase; 1.32 +} 1.33 +h3, article > header { 1.34 + font-size: 150%; 1.35 + font-weight: 400; 1.36 + margin: 1em 0 0 0; 1.37 +} 1.38 +p { 1.39 + margin: 0.5em 0; 1.40 } 1.41 1.42 -img { border: none; vertical-align: middle; } 1.43 +a, a:link { 1.44 + text-decoration: none; 1.45 +} 1.46 +a:hover, a:focus { 1.47 + border-bottom: 1px solid; 1.48 +} 1.49 + 1.50 +img { 1.51 + border: none; 1.52 + vertical-align: middle; 1.53 +} 1.54 1.55 pre { 1.56 padding: 0.6em; 1.57 @@ -27,15 +46,18 @@ 1.58 overflow-x: auto; 1.59 } 1.60 1.61 -header, #header { border-bottom: 4px solid; } 1.62 +body > header, #header { 1.63 + border-bottom: 4px solid; 1.64 +} 1.65 1.66 -#content { 1.67 +#content, body > section { 1.68 margin: 2.5em auto; 1.69 - width:90%; max-width:72ex; 1.70 + width:90%; 1.71 + max-width:72ex; 1.72 text-align: justify; 1.73 } 1.74 1.75 -footer, #footer { 1.76 +body > footer, #footer { 1.77 text-align: center; 1.78 padding: 1.2em; 1.79 border-top: 1px solid #ddd; 1.80 @@ -50,14 +72,16 @@ 1.81 } 1.82 1.83 #lang a { 1.84 - text-decoration: none; border: none; 1.85 + /*text-decoration: none; border: none;*/ 1.86 padding: 0 0.2ex; 1.87 } 1.88 1.89 -td, th { vertical-align: top; } 1.90 +td, th { 1.91 + vertical-align: top; 1.92 +} 1.93 1.94 .year:after { 1.95 - /* content: "2007-2014"; */ 1.96 + /* content: "2007-2015"; */ 1.97 content: "2015"; 1.98 } 1.99 1.100 @@ -66,35 +90,143 @@ 1.101 border-radius: 0.3rem; 1.102 } 1.103 1.104 -pre, code, tt { font-size: 1.2rem; line-height: 1rem; } 1.105 +pre, code, tt { 1.106 + font-size: 1.2rem; 1.107 + line-height: 1rem; 1.108 +} 1.109 + 1.110 +h1, h2, body section > header, h3, article > header { 1.111 + text-align: left; 1.112 +} 1.113 1.114 /* colors */ 1.115 -h1 { color: hsl( 0, 0%, 75%); } 1.116 -h2 { color: hsl(210, 90%, 45%); } 1.117 -h3 { color: hsl( 30, 90%, 45%); } 1.118 -a:link { color: hsl(210, 40%, 45%); } 1.119 -a:visited { color: hsl(300, 40%, 45%); } 1.120 -a:hover, 1.121 -a:focus { color: hsl( 30, 40%, 45%); } 1.122 -pre, code { background-color: hsl(180, 15%, 90%); border-color: hsl(180, 15%, 60%); } 1.123 -header, 1.124 -#header { background-color: hsl( 0, 0%, 15%); } 1.125 -#footer, footer, #header, header 1.126 - { background-color: hsl( 0, 0%, 95%); border-color: hsl(0, 0%, 75%); } 1.127 -code, tt { color: hsl( 0, 0%, 30%); } 1.128 -pre tt { color: hsl( 30, 90%, 30%); } /* shell prompt */ 1.129 -pre em { color: hsl(180, 90%, 30%); } 1.130 +h1 { 1.131 + color: hsl(0, 0%, 75%); 1.132 +} 1.133 +h2, body section > header { 1.134 + color: hsl(210, 90%, 45%); 1.135 +} 1.136 +h3, article > header { 1.137 + color: hsl( 30, 90%, 45%); 1.138 +} 1.139 +a:link { 1.140 + color: hsl(210, 40%, 45%); 1.141 +} 1.142 +a:visited { 1.143 + color: hsl(300, 40%, 45%); 1.144 +} 1.145 +a:hover, a:focus { 1.146 + color: hsl( 30, 40%, 45%); 1.147 +} 1.148 +pre, code { 1.149 + background-color: hsl(180, 15%, 90%); 1.150 + border-color: hsl(180, 15%, 60%); 1.151 +} 1.152 +body > header, #header { 1.153 + background-color: hsl(0, 0%, 15%); } 1.154 +#footer, body > footer { 1.155 + background-color: hsl(0, 0%, 95%); 1.156 + border-color: hsl(0, 0%, 75%); 1.157 +} 1.158 +code, tt { 1.159 + color: hsl(0, 0%, 30%); 1.160 +} 1.161 +pre tt { 1.162 + /* shell prompt */ 1.163 + color: hsl(30, 90%, 30%); 1.164 +} 1.165 +pre em { 1.166 + color: hsl(180, 90%, 30%); 1.167 +} 1.168 1.169 1.170 x-details { 1.171 - display: inline; outline: 1px solid hsl(180, 15%, 80%); 1.172 - background-color: hsl(180, 15%, 96%); } 1.173 -x-details > label { cursor: pointer; color: hsl(180, 45%, 50%); } 1.174 -x-details > input { display: none; } 1.175 -x-details > input + label:before { content: '+'; } 1.176 -x-details > input:checked + label:before { content: '−'; } 1.177 + display: inline; 1.178 + outline: 1px solid hsl(180, 15%, 80%); 1.179 + outline-offset: 0; 1.180 + background-color: hsl(180, 15%, 96%); 1.181 +} 1.182 +/* 1.183 +details summary::-webkit-details-marker { 1.184 + display: none; } 1.185 +details summary::before { content: '+'; } 1.186 +details[open] summary::before { content: '−'; } 1.187 +*/ 1.188 +x-details > label { 1.189 + cursor: pointer; 1.190 + min-width: 7mm; 1.191 +} 1.192 +x-details > label:before, details summary { 1.193 + color: hsl(180, 45%, 50%); 1.194 +} 1.195 +x-details input { 1.196 + display: none; 1.197 +} 1.198 +x-details input + label:before { 1.199 + content: '+'; 1.200 +} 1.201 +x-details input:checked + label:before { 1.202 + content: '−'; 1.203 +} 1.204 +x-details label, x-details span { 1.205 + padding: 0.2rem; 1.206 +} 1.207 +x-details > input + label > span { 1.208 + display: none; 1.209 +} 1.210 +x-details > input:checked + label > span { 1.211 + display: inline; 1.212 +} 1.213 1.214 -x-details > label, x-details > span { padding: 0.2rem; } 1.215 1.216 -x-details > input + label ~ span { display: none; } 1.217 -x-details > input:checked + label ~ span { display: inline; } 1.218 +a:hover::before, section:hover::before { 1.219 + display: block; 1.220 + position: fixed; 1.221 + font: 0.8rem "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif; 1.222 + background: hsla(0, 0%, 80%, 0.95); 1.223 + color: #222; 1.224 + border: 1pt solid hsla(0, 0%, 30%, 0.9); 1.225 + border-radius: 4px; 1.226 + padding: 4px; 1.227 + margin: 4px; 1.228 +} 1.229 +a:hover::before { 1.230 + left: 0; 1.231 + bottom: 0; 1.232 + content: attr(href); 1.233 +} 1.234 +section:hover::before { 1.235 + right: 0; 1.236 + top: 0; 1.237 + content: attr(data-title); 1.238 +} 1.239 + 1.240 +section:hover { 1.241 + outline: 1px solid hsl(180, 30%, 90%); 1.242 + outline-offset: 1ex; 1.243 +} 1.244 +article:hover { 1.245 + outline: 1px solid hsl(0, 30%, 90%); 1.246 + outline-offset: 0.5ex; 1.247 +} 1.248 + 1.249 + 1.250 +:target { 1.251 + -webkit-animation: highlight 1s ease; 1.252 + -moz-animation: highlight 1s ease; 1.253 + animation: highlight 1s ease; 1.254 +} 1.255 +@-webkit-keyframes highlight { 1.256 + 0% { background-color: orange; } 1.257 + 100% { background-color: white; } 1.258 +} 1.259 + 1.260 +q:lang(de) { 1.261 + quotes: "\201E" "\201C"; 1.262 +} 1.263 +q:lang(en) { 1.264 + quotes: "\201C" "\201D"; 1.265 +} 1.266 +q:lang(fr), q:lang(ru) { 1.267 + quotes: "\00AB" "\00BB"; 1.268 +}
2.1 --- a/rootfs/usr/share/doc/slitaz-doc.js Thu Aug 20 18:38:54 2015 +0200 2.2 +++ b/rootfs/usr/share/doc/slitaz-doc.js Thu Oct 08 00:22:16 2015 +0300 2.3 @@ -13,7 +13,13 @@ 2.4 { 2.5 var element = detailsElements[i]; 2.6 element.innerHTML = '<input type="checkbox" id="details' + i + 2.7 - '"><label for="details' + i + '"></label><span>' + 2.8 - element.innerHTML + '</span>'; 2.9 + '"/><label for="details' + i + '"><span>' + 2.10 + element.innerHTML + '</span></label>'; 2.11 + } 2.12 + 2.13 + var sections = document.getElementsByTagName('section'); 2.14 + for(var i = 0; i < sections.length; ++ i) 2.15 + { 2.16 + sections[i].dataset.title = sections[i].firstElementChild.innerHTML; 2.17 } 2.18 }