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