1 @charset "UTF-8"; |
|
2 |
|
3 /* $Id$ */ |
|
4 |
|
5 @import url(publidoc.css); |
|
6 |
|
7 |
|
8 publiquiz { |
|
9 display: block; |
|
10 font-family: sans-serif; |
|
11 padding: 0; |
|
12 } |
|
13 |
|
14 |
|
15 /* Component level ========================================================= */ |
|
16 |
|
17 quiz:before { |
|
18 display: block; |
|
19 color: #7f7f7f; |
|
20 background-color: #ddddcc; |
|
21 border: 1px solid #aeaea0; |
|
22 font-weight: bold; |
|
23 padding: .5em 5px .5em 5px; |
|
24 content: collapser() " " insert-before-button() insert-after-button() |
|
25 " " add-attribute-button() " Quiz"; |
|
26 } |
|
27 |
|
28 quiz[id]:before { |
|
29 content: collapser() " " insert-before-button() insert-after-button() |
|
30 " " add-attribute-button() " Quiz" |
|
31 " – ID = " text-field(attribute, "id", columns, 15, color, black); |
|
32 } |
|
33 quiz[type]:before { |
|
34 content: collapser() " " insert-before-button() insert-after-button() |
|
35 " " add-attribute-button() " Quiz" |
|
36 " – Type = " text-field(attribute, type, columns, 10, color, black); |
|
37 } |
|
38 quiz[id][type]:before { |
|
39 content: collapser() " " insert-before-button() insert-after-button() |
|
40 " Quiz" |
|
41 " – ID = " text-field(attribute, "id", columns, 15, color, black) |
|
42 " – Type = " text-field(attribute, type, columns, 10, color, black); |
|
43 } |
|
44 |
|
45 quiz { |
|
46 display: block; |
|
47 border: 1px solid #aeaea0; |
|
48 margin-bottom: .5em; |
|
49 padding: 5px; |
|
50 collapsible: yes; |
|
51 } |
|
52 quiz:last-child { |
|
53 margin-bottom: 0; |
|
54 } |
|
55 |
|
56 quiz > head { |
|
57 background-color: #ffffee; |
|
58 padding: .3em .5em .3em .5em; |
|
59 border-radius: 0.5em; |
|
60 } |
|
61 |
|
62 |
|
63 /* Top level =============================================================== */ |
|
64 |
|
65 publiquiz > *:before { |
|
66 display: block; |
|
67 color: #bbbbbb; |
|
68 background: #993333 url('top.png') repeat-x top left; |
|
69 font-weight: bold; |
|
70 padding: 1.2em 5px 1em 5px; |
|
71 } |
|
72 publiquiz > document:before { |
|
73 content: add-attribute-button() " Document" |
|
74 " – ID = " text-field(attribute, "id", columns, 15, color, white); |
|
75 } |
|
76 publiquiz > document[id][xml|lang]:before { |
|
77 content: "Document" |
|
78 " – ID = " text-field(attribute, "id", columns, 15, color, white) |
|
79 " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%, |
|
80 values, "en\A fr\A es", color, white); |
|
81 } |
|
82 publiquiz > quiz[id]:before { |
|
83 content: add-attribute-button() " Quiz" |
|
84 " – ID = " text-field(attribute, "id", columns, 15, color, white); |
|
85 } |
|
86 publiquiz > quiz[id][type]:before { |
|
87 content: add-attribute-button() " Quiz" |
|
88 " – ID = " text-field(attribute, "id", columns, 15, color, white) |
|
89 " – Type = " text-field(attribute, type, columns, 10, color, white); |
|
90 } |
|
91 publiquiz > quiz[id][xml|lang]:before { |
|
92 content: add-attribute-button() " Quiz" |
|
93 " – ID = " text-field(attribute, "id", columns, 15, color, white) |
|
94 " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%, |
|
95 values, "en\A fr\A es", color, white); |
|
96 } |
|
97 publiquiz > quiz[id][type][xml|lang]:before { |
|
98 content: "Quiz" |
|
99 " – ID = " text-field(attribute, "id", columns, 15, color, white) |
|
100 " – Type = " text-field(attribute, type, columns, 10, color, white) |
|
101 " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%, |
|
102 values, "en\A fr\A es", color, white); |
|
103 } |
|
104 |
|
105 publiquiz > * { |
|
106 display: block; |
|
107 margin: 5px; |
|
108 padding: 0; |
|
109 border: 0; |
|
110 } |
|
111 |
|
112 publiquiz > * > head { |
|
113 background-color: #ffffee; |
|
114 padding: .3em .5em .3em .5em; |
|
115 border-radius: 0.5em; |
|
116 } |
|
117 |
|
118 publiquiz > * > head > title { |
|
119 font-size: 140%; |
|
120 } |
|
121 |
|
122 |
|
123 /* Section level =========================================================== */ |
|
124 |
|
125 quiz > *:before, quiz > composite > *:before { |
|
126 display: block; |
|
127 color: #7f7f7f; |
|
128 text-align: left; |
|
129 font-style: normal; |
|
130 font-size: 75%; |
|
131 padding-bottom: 3px; |
|
132 } |
|
133 |
|
134 quiz > *, quiz > composite > * { |
|
135 display: block; |
|
136 } |
|
137 |
|
138 quiz > *:after, quiz > composite > *:after { |
|
139 color: #7f7f7f; |
|
140 content: insert-after-button(); |
|
141 } |
|
142 |
|
143 quiz > head:after { |
|
144 display: none; |
|
145 } |
|
146 |
|
147 /* instructions ~~~~~~~~~~~~~~~~~~~~~ */ |
|
148 |
|
149 instructions:before { |
|
150 background-color: #e8f0f7; |
|
151 content: insert-before-button() " Consigne"; |
|
152 } |
|
153 |
|
154 instructions { |
|
155 display: block; |
|
156 background-color: #e8f0f7; |
|
157 } |
|
158 |
|
159 instructions section:before, instructions section, instructions section:after { |
|
160 margin-left: 1em; |
|
161 } |
|
162 |
|
163 /* choices ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
164 |
|
165 choices-radio:before { |
|
166 color: #7f7f7f; |
|
167 content: insert-before-button() |
|
168 command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box)) |
|
169 " QCM – radio"; |
|
170 } |
|
171 choices-radio[shuffle]:before { |
|
172 content: insert-before-button() |
|
173 " QCM – radio" |
|
174 " – shuffle = " label(attribute, shuffle, color, black) |
|
175 set-attribute-button(attribute, shuffle, unset-attribute, yes); |
|
176 } |
|
177 |
|
178 choices-check:before { |
|
179 color: #7f7f7f; |
|
180 content: insert-before-button() |
|
181 command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box)) |
|
182 " QCM – check"; |
|
183 } |
|
184 choices-check[shuffle]:before { |
|
185 content: insert-before-button() |
|
186 " QCM – check" |
|
187 " – shuffle = " label(attribute, shuffle, color, black) |
|
188 set-attribute-button(attribute, shuffle, unset-attribute, yes); |
|
189 } |
|
190 |
|
191 /* blanks ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
192 |
|
193 blanks-fill:before { |
|
194 content: insert-before-button() |
|
195 command-button(command, "putAttribute", parameter, "strict true", icon, icon(plus-box)) |
|
196 " Exercice à trous – saisie libre"; |
|
197 } |
|
198 blanks-fill[strict]:before { |
|
199 content: insert-before-button() |
|
200 " Exercice à trous – saisie libre" |
|
201 " – strict = " label(attribute, strict, color, black) |
|
202 set-attribute-button(attribute, strict, unset-attribute, yes); |
|
203 } |
|
204 |
|
205 blanks-select:before { |
|
206 content: insert-before-button() |
|
207 command-button(command, "putAttribute", parameter, "multiple true", icon, icon(plus-box)) |
|
208 " Exercice à trous – liste fermée"; |
|
209 } |
|
210 blanks-select[multiple]:before { |
|
211 content: insert-before-button() |
|
212 " Exercice à trous – liste fermée" |
|
213 " – multiple = " label(attribute, multiple, color, black) |
|
214 set-attribute-button(attribute, multiple, unset-attribute, yes); |
|
215 } |
|
216 |
|
217 /* point ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
218 |
|
219 point:before { |
|
220 content: insert-before-button() " " |
|
221 command-button(command, "putAttribute", parameter, "type radio", icon, icon(plus-box)) |
|
222 " Pointage"; |
|
223 } |
|
224 point[type]:before { |
|
225 content: insert-before-button() |
|
226 " Pointage – type = " label(attribute, type, color, black) |
|
227 set-attribute-button(attribute, type, unset-attribute, yes); |
|
228 } |
|
229 |
|
230 /* matching ~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
231 |
|
232 matching:before { |
|
233 content: insert-before-button() " " |
|
234 command-button(command, "putAttribute", parameter, "multiple true", icon, icon(plus-box)) |
|
235 " Appariement"; |
|
236 } |
|
237 matching[multiple]:before { |
|
238 content: insert-before-button() |
|
239 " Appariement – multiple = " label(attribute, multiple, color, black) |
|
240 set-attribute-button(attribute, multiple, unset-attribute, yes) |
|
241 } |
|
242 |
|
243 /* sort ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
244 |
|
245 sort:before { |
|
246 content: insert-before-button() |
|
247 command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box)) |
|
248 " Tri"; |
|
249 } |
|
250 sort[shuffle]:before { |
|
251 content: insert-before-button() |
|
252 " Tri – shuffle = " label(attribute, shuffle, color, black) |
|
253 set-attribute-button(attribute, shuffle, unset-attribute, yes); |
|
254 } |
|
255 |
|
256 /* categories ~~~~~~~~~~~~~~~~~~~~~~ */ |
|
257 |
|
258 categories:before { |
|
259 content: insert-before-button() " " |
|
260 command-button(command, "putAttribute", parameter, "multiple true", icon, icon(plus-box)) |
|
261 " Catégories"; |
|
262 } |
|
263 categories[multiple]:before { |
|
264 content: insert-before-button() |
|
265 " Catégories – multiple = " label(attribute, multiple, color, black) |
|
266 set-attribute-button(attribute, multiple, unset-attribute, yes) |
|
267 } |
|
268 |
|
269 /* production ~~~~~~~~~~~~~~~~~~~~~~ */ |
|
270 |
|
271 production:before { |
|
272 content: insert-before-button() " Production"; |
|
273 } |
|
274 |
|
275 /* composite ~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
276 |
|
277 composite:before { |
|
278 content: insert-before-button() |
|
279 command-button(command, "putAttribute", parameter, "multipage true", icon, icon(plus-box)) |
|
280 " Composite"; |
|
281 } |
|
282 composite[multipage]:before { |
|
283 content: insert-before-button() |
|
284 " Composite – multipage = " label(attribute, multipage, color, black) |
|
285 set-attribute-button(attribute, multipage, unset-attribute, yes) |
|
286 } |
|
287 |
|
288 subquiz { |
|
289 display: block; |
|
290 border-style: none; |
|
291 margin: 0 0 .6em 1em; |
|
292 padding: 0; |
|
293 } |
|
294 |
|
295 subquiz > *, subquiz > *:before { |
|
296 display: block; |
|
297 } |
|
298 |
|
299 subquiz > head { |
|
300 background-color: #ffffee; |
|
301 padding: .3em .5em .3em .5em; |
|
302 border-radius: 0.5em; |
|
303 } |
|
304 |
|
305 subquiz > instructions:before { |
|
306 content: "Consigne"; |
|
307 } |
|
308 |
|
309 /* help ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
310 |
|
311 help:before { |
|
312 margin-top: .5em; |
|
313 background-color: #ffffdd; |
|
314 content: insert-before-button() insert-button() " Aide "; |
|
315 } |
|
316 |
|
317 help, help > *:before, help > * { |
|
318 background-color: #ffffdd; |
|
319 } |
|
320 |
|
321 /* answer ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
322 |
|
323 answer:before { |
|
324 margin-top: .5em; |
|
325 background-color: #eaffe9; |
|
326 content: insert-before-button() insert-button() " Réponse"; |
|
327 } |
|
328 |
|
329 answer, answer > *:before, answer > * { |
|
330 background-color: #eaffe9; |
|
331 } |
|
332 |
|
333 answer:after { |
|
334 display: none; |
|
335 } |
|
336 |
|
337 |
|
338 /* Block level ============================================================= */ |
|
339 |
|
340 /* image ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
341 |
|
342 right image, wrong image, item image { |
|
343 content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)"); |
|
344 vertical-align: middle; |
|
345 } |
|
346 |
|
347 /* dropzone ~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
348 |
|
349 dropzone { |
|
350 display: block; |
|
351 padding: .4em; |
|
352 margin: 0 1em .1em 0; |
|
353 background-color: #ffefd8; |
|
354 border-radius: 1.5em; |
|
355 } |
|
356 |
|
357 dropzone image:before { |
|
358 content: ""; |
|
359 } |
|
360 dropzone > image { |
|
361 content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)"); |
|
362 } |
|
363 |
|
364 dropzone > blank { |
|
365 background-color: transparent; |
|
366 } |
|
367 |
|
368 dropzone:after { |
|
369 display: marker; |
|
370 padding-bottom: .7em; |
|
371 content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
|
372 } |
|
373 |
|
374 /* choices.right, choices.wrong ~~~~ */ |
|
375 |
|
376 choices-radio right:before, choices-radio wrong:before, |
|
377 choices-check right:before, choices-check wrong:before { |
|
378 display: marker; |
|
379 content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc)) |
|
380 insert-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
|
381 } |
|
382 |
|
383 choices-radio right, choices-radio wrong, |
|
384 choices-check right, choices-check wrong { |
|
385 display: block; |
|
386 margin-left: 24px; |
|
387 font-size: 115%; |
|
388 font-family: serif; |
|
389 } |
|
390 |
|
391 choices-radio > right:before { |
|
392 color: #7f7f7f; |
|
393 content: insert-before-button(icon, icon(left-half-disc)) |
|
394 insert-after-button(icon, icon(right-half-disc)) |
|
395 " " icon(radio-on) " "; |
|
396 |
|
397 } |
|
398 choices-radio > wrong:before { |
|
399 color: #7f7f7f; |
|
400 content: insert-before-button( icon, icon(left-half-disc)) |
|
401 insert-after-button(icon, icon(right-half-disc)) |
|
402 " " icon(radio-off) " "; |
|
403 |
|
404 } |
|
405 choices-check > right:before { |
|
406 color: #7f7f7f; |
|
407 content: insert-before-button(icon, icon(left-half-disc)) |
|
408 insert-after-button(icon, icon(right-half-disc)) |
|
409 command-button(command, "convert", parameter, "wrong", icon, icon(convert)) |
|
410 " " icon(check-on) " "; |
|
411 } |
|
412 choices-check > wrong:before { |
|
413 color: #7f7f7f; |
|
414 content: insert-before-button(icon, icon(left-half-disc)) |
|
415 insert-after-button(icon, icon(right-half-disc)) |
|
416 command-button(command, "convert", parameter, "right", icon, icon(convert)) |
|
417 " " icon(check-off) " "; |
|
418 } |
|
419 |
|
420 choices-radio > right, choices-radio > wrong { |
|
421 margin-left: 52px; |
|
422 } |
|
423 choices-check > right, choices-check > wrong { |
|
424 margin-left: 60px; |
|
425 } |
|
426 |
|
427 /* blanks.wrongs ~~~~~~~~~~~~~~~~~~~ */ |
|
428 |
|
429 blanks-select > wrongs:before { |
|
430 color: #7f7f7f; |
|
431 content: "Intrus : "; |
|
432 } |
|
433 |
|
434 blanks-select > wrongs { |
|
435 display: block; |
|
436 margin: .5em 0 .5em 0; |
|
437 } |
|
438 |
|
439 wrongs > wrong { |
|
440 display: inline; |
|
441 background-color: #c7e0f8; |
|
442 } |
|
443 |
|
444 wrongs > wrong:after { |
|
445 color: #7f7f7f; |
|
446 content: " – "; |
|
447 background-color: transparent; |
|
448 } |
|
449 wrongs > wrong:after:last-child { |
|
450 content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc)); |
|
451 } |
|
452 |
|
453 /* match ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
454 |
|
455 match:before { |
|
456 display: marker; |
|
457 color: #7f7f7f; |
|
458 content: insert-same-before-button(icon, icon(left-half-disc)) |
|
459 insert-same-after-button(icon, icon(right-half-disc)); |
|
460 } |
|
461 |
|
462 match { |
|
463 display: block; |
|
464 margin-left: 24px; |
|
465 margin-bottom: .8em; |
|
466 } |
|
467 |
|
468 match > item:before { |
|
469 display: none; |
|
470 } |
|
471 |
|
472 match item { |
|
473 display: inline; |
|
474 } |
|
475 |
|
476 match > item:first-child:after { |
|
477 color: #7f7f7f; |
|
478 content: " —> "; |
|
479 } |
|
480 match > item:last-child:after { |
|
481 display: none; |
|
482 } |
|
483 |
|
484 /* sort > comparison ~~~~~~~~~~~~~~~ */ |
|
485 |
|
486 comparison:before { |
|
487 color: #7f7f7f; |
|
488 content: "Logique de comparaison : " |
|
489 } |
|
490 |
|
491 comparison { |
|
492 display: block; |
|
493 margin: .2em 0 .5em 0; |
|
494 } |
|
495 |
|
496 /* sort > item ~~~~~~~~~~~~~~~~~~~~~ */ |
|
497 |
|
498 sort > item:before { |
|
499 color: #7f7f7f; |
|
500 content: insert-before-button(icon, icon(left-half-disc)) |
|
501 text-field(attribute, "shuffle", columns, 1, font-size, 75%, color, black) |
|
502 " "; |
|
503 } |
|
504 |
|
505 sort > item { |
|
506 display: inline; |
|
507 } |
|
508 |
|
509 sort > item:after { |
|
510 color: #7f7f7f; |
|
511 content: insert-same-after-button(icon, icon(right-half-disc)) |
|
512 " " xpath("../comparison") " "; |
|
513 } |
|
514 sort > item:last-child:after { |
|
515 content: insert-same-after-button(icon, icon(right-half-disc)) "\A"; |
|
516 } |
|
517 |
|
518 /* category ~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
519 |
|
520 category:before { |
|
521 color: #7f7f7f; |
|
522 content: " " insert-before-button(); |
|
523 } |
|
524 |
|
525 category { |
|
526 display: block; |
|
527 margin-bottom: .3em; |
|
528 } |
|
529 |
|
530 category > head { |
|
531 display: block; |
|
532 } |
|
533 |
|
534 category > head > title:after { |
|
535 content: ""; |
|
536 } |
|
537 |
|
538 category > item { |
|
539 margin-left: 1em; |
|
540 margin-bottom: 0.8em; |
|
541 } |
|
542 |
|
543 category:after { |
|
544 color: #7f7f7f; |
|
545 content: " " insert-same-after-button(); |
|
546 } |
|
547 |
|
548 |
|
549 /* Inline level ============================================================ */ |
|
550 |
|
551 /* blank ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
|
552 |
|
553 blank { |
|
554 background-color: #c0ffc0; |
|
555 } |
|
556 |
|
557 s:after { |
|
558 color: #7f7f7f; |
|
559 background-color: #c0ffc0; |
|
560 content: insert-same-after-button(icon, icon(right-half-disc)); |
|
561 } |
|
562 |
|
563 /* point.right & point.wrong ~~~~~~~ */ |
|
564 |
|
565 point right:before, point wrong:before { |
|
566 background: transparent; |
|
567 color: #7f7f7f; |
|
568 } |
|
569 point right:before { |
|
570 content: command-button(command, "convert", parameter, "wrong", icon, icon(convert)); |
|
571 } |
|
572 point wrong:before { |
|
573 content: command-button(command, "convert", parameter, "right", icon, icon(convert)); |
|
574 } |
|
575 |
|
576 point right { |
|
577 background-color: #c0ffc0; |
|
578 } |
|
579 |
|
580 point wrong { |
|
581 background-color: #c7e0f8; |
|
582 } |
|