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