slitaz-base-files annotate rootfs/usr/share/doc/slitaz-doc.css @ 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 42d6df56a10f
children aba2d2cae702
rev   line source
al@217 1 /* CSS style for SliTaz Doc */
al@217 2
al@217 3 body {
al@217 4 font: 100% "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif;
al@217 5 margin: 0;
al@217 6 -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
al@285 7 background-color: #FFF; color: #000;
al@217 8 }
al@217 9
al@285 10 h1 {
al@285 11 font-size: 150%;
al@285 12 font-weight: 400;
al@285 13 margin: 0;
al@285 14 padding: 0.3em;
al@285 15 }
al@285 16 h2, body section > header {
al@285 17 font-size: 200%;
al@285 18 font-weight: 300;
al@285 19 margin: 1em 0 0 0;
al@285 20 text-transform: uppercase;
al@285 21 }
al@285 22 h3, article > header {
al@285 23 font-size: 150%;
al@285 24 font-weight: 400;
al@285 25 margin: 1em 0 0 0;
al@285 26 }
al@285 27 p {
al@285 28 margin: 0.5em 0;
al@217 29 }
al@217 30
al@285 31 a, a:link {
al@285 32 text-decoration: none;
al@285 33 }
al@285 34 a:hover, a:focus {
al@285 35 border-bottom: 1px solid;
al@285 36 }
al@285 37
al@285 38 img {
al@285 39 border: none;
al@285 40 vertical-align: middle;
al@285 41 }
al@217 42
al@217 43 pre {
al@273 44 padding: 0.6em;
al@273 45 border: 1px solid; border-radius: 0.3em;
al@273 46 overflow-x: auto;
al@217 47 }
al@217 48
al@285 49 body > header, #header {
al@285 50 border-bottom: 4px solid;
al@285 51 }
al@217 52
al@285 53 #content, body > section {
al@217 54 margin: 2.5em auto;
al@285 55 width:90%;
al@285 56 max-width:72ex;
al@217 57 text-align: justify;
al@217 58 }
al@217 59
al@285 60 body > footer, #footer {
al@217 61 text-align: center;
al@217 62 padding: 1.2em;
al@217 63 border-top: 1px solid #ddd;
al@217 64 }
al@217 65
al@217 66 /* Languages */
al@217 67
al@217 68 #lang {
al@217 69 float: right;
al@217 70 padding: 0.5em;
al@217 71 font-size: small;
al@217 72 }
al@217 73
al@217 74 #lang a {
al@285 75 /*text-decoration: none; border: none;*/
al@217 76 padding: 0 0.2ex;
al@217 77 }
al@217 78
al@285 79 td, th {
al@285 80 vertical-align: top;
al@285 81 }
pascal@226 82
pascal@226 83 .year:after {
al@285 84 /* content: "2007-2015"; */
al@273 85 content: "2015";
pascal@226 86 }
al@273 87
al@273 88 fieldset {
al@273 89 border: 1pt solid #888;
al@273 90 border-radius: 0.3rem;
al@273 91 }
al@273 92
al@285 93 pre, code, tt {
al@285 94 font-size: 1.2rem;
al@285 95 line-height: 1rem;
al@285 96 }
al@285 97
al@285 98 h1, h2, body section > header, h3, article > header {
al@285 99 text-align: left;
al@285 100 }
al@273 101
al@273 102 /* colors */
al@285 103 h1 {
al@285 104 color: hsl(0, 0%, 75%);
al@285 105 }
al@285 106 h2, body section > header {
al@285 107 color: hsl(210, 90%, 45%);
al@285 108 }
al@285 109 h3, article > header {
al@285 110 color: hsl( 30, 90%, 45%);
al@285 111 }
al@285 112 a:link {
al@285 113 color: hsl(210, 40%, 45%);
al@285 114 }
al@285 115 a:visited {
al@285 116 color: hsl(300, 40%, 45%);
al@285 117 }
al@285 118 a:hover, a:focus {
al@285 119 color: hsl( 30, 40%, 45%);
al@285 120 }
al@285 121 pre, code {
al@285 122 background-color: hsl(180, 15%, 90%);
al@285 123 border-color: hsl(180, 15%, 60%);
al@285 124 }
al@285 125 body > header, #header {
al@285 126 background-color: hsl(0, 0%, 15%); }
al@285 127 #footer, body > footer {
al@285 128 background-color: hsl(0, 0%, 95%);
al@285 129 border-color: hsl(0, 0%, 75%);
al@285 130 }
al@285 131 code, tt {
al@285 132 color: hsl(0, 0%, 30%);
al@285 133 }
al@285 134 pre tt {
al@285 135 /* shell prompt */
al@285 136 color: hsl(30, 90%, 30%);
al@285 137 }
al@285 138 pre em {
al@285 139 color: hsl(180, 90%, 30%);
al@285 140 }
al@274 141
al@274 142
al@274 143 x-details {
al@285 144 display: inline;
al@285 145 outline: 1px solid hsl(180, 15%, 80%);
al@285 146 outline-offset: 0;
al@285 147 background-color: hsl(180, 15%, 96%);
al@285 148 }
al@285 149 /*
al@285 150 details summary::-webkit-details-marker {
al@285 151 display: none; }
al@285 152 details summary::before { content: '+'; }
al@285 153 details[open] summary::before { content: '−'; }
al@285 154 */
al@285 155 x-details > label {
al@285 156 cursor: pointer;
al@285 157 min-width: 7mm;
al@285 158 }
al@285 159 x-details > label:before, details summary {
al@285 160 color: hsl(180, 45%, 50%);
al@285 161 }
al@285 162 x-details input {
al@285 163 display: none;
al@285 164 }
al@285 165 x-details input + label:before {
al@285 166 content: '+';
al@285 167 }
al@285 168 x-details input:checked + label:before {
al@285 169 content: '−';
al@285 170 }
al@285 171 x-details label, x-details span {
al@285 172 padding: 0.2rem;
al@285 173 }
al@285 174 x-details > input + label > span {
al@285 175 display: none;
al@285 176 }
al@285 177 x-details > input:checked + label > span {
al@285 178 display: inline;
al@285 179 }
al@274 180
al@274 181
al@285 182 a:hover::before, section:hover::before {
al@285 183 display: block;
al@285 184 position: fixed;
al@285 185 font: 0.8rem "DejaVu Sans", Ubuntu, "Droid Sans", "Liberation Sans", FreeSans, sans-serif;
al@285 186 background: hsla(0, 0%, 80%, 0.95);
al@285 187 color: #222;
al@285 188 border: 1pt solid hsla(0, 0%, 30%, 0.9);
al@285 189 border-radius: 4px;
al@285 190 padding: 4px;
al@285 191 margin: 4px;
al@285 192 }
al@285 193 a:hover::before {
al@285 194 left: 0;
al@285 195 bottom: 0;
al@285 196 content: attr(href);
al@285 197 }
al@285 198 section:hover::before {
al@285 199 right: 0;
al@285 200 top: 0;
al@285 201 content: attr(data-title);
al@285 202 }
al@285 203
al@285 204 section:hover {
al@285 205 outline: 1px solid hsl(180, 30%, 90%);
al@285 206 outline-offset: 1ex;
al@285 207 }
al@285 208 article:hover {
al@285 209 outline: 1px solid hsl(0, 30%, 90%);
al@285 210 outline-offset: 0.5ex;
al@285 211 }
al@285 212
al@285 213
al@285 214 :target {
al@285 215 -webkit-animation: highlight 1s ease;
al@285 216 -moz-animation: highlight 1s ease;
al@285 217 animation: highlight 1s ease;
al@285 218 }
al@285 219 @-webkit-keyframes highlight {
al@285 220 0% { background-color: orange; }
al@285 221 100% { background-color: white; }
al@285 222 }
al@285 223
al@285 224 q:lang(de) {
al@285 225 quotes: "\201E" "\201C";
al@285 226 }
al@285 227 q:lang(en) {
al@285 228 quotes: "\201C" "\201D";
al@285 229 }
al@285 230 q:lang(fr), q:lang(ru) {
al@285 231 quotes: "\00AB" "\00BB";
al@285 232 }