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