Xxe/Css/publiquiz.css
author Patrick PIERRE <patrick.pierre@prismallia.fr>
dim., 29 avril 2012 08:39:33 +0200
changeset 101 3ec3b2eceeb8
parent 87 35606ecc54fc
child 108 f8bc5e00b17f
permissions -rw-r--r--
role obligatoire
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@87
    62
           " – ID = " text-field(attribute, "xml:id", columns, 15, color, white);
patrick@87
    63
}
patrick@87
    64
publiquiz > document[xml|id][xml|lang]:before {
patrick@87
    65
  content: "Document"
patrick@87
    66
           " – ID = " text-field(attribute, "xml:id", columns, 15, color, white)
patrick@87
    67
           " – Langue principale  = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@87
    68
             values, "en\A fr\A fr-FR\A es", color, white);
patrick@87
    69
}
patrick@87
    70
publiquiz > quiz[xml|id]:before {
patrick@87
    71
  content: add-attribute-button() " Quiz"
patrick@87
    72
           " – ID = " text-field(attribute, "xml:id", columns, 15, color, white);
patrick@87
    73
}
patrick@87
    74
publiquiz > quiz[xml|id][xml|lang]:before {
patrick@87
    75
  content: "Quiz"
patrick@87
    76
           " – ID = " text-field(attribute, "xml:id", columns, 15, color, white)
patrick@87
    77
           " – Langue principale  = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@87
    78
             values, "en\A fr\A fr-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@87
   142
  content: insert-before-button()
patrick@87
   143
           command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box))
patrick@87
   144
           " QCM – radio";
patrick@87
   145
}
patrick@87
   146
choices-radio[shuffle]:before {
patrick@87
   147
  content: insert-before-button()
patrick@87
   148
           " QCM – radio"
patrick@87
   149
           " – shuffle = " label(attribute, shuffle, color, black)
patrick@87
   150
           set-attribute-button(attribute, shuffle, unset-attribute, yes);
patrick@87
   151
}
patrick@87
   152
patrick@87
   153
choices-check:before {
patrick@87
   154
  content: insert-before-button()
patrick@87
   155
           command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box))
patrick@87
   156
           " QCM – check";
patrick@87
   157
}
patrick@87
   158
choices-check[shuffle]:before {
patrick@87
   159
  content: insert-before-button()
patrick@87
   160
           " QCM – check"
patrick@87
   161
           " – shuffle = " label(attribute, shuffle, color, black)
patrick@87
   162
           set-attribute-button(attribute, shuffle, unset-attribute, yes);
patrick@87
   163
}
patrick@87
   164
patrick@87
   165
/* blanks ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   166
patrick@87
   167
blanks-fill:before {
patrick@87
   168
  content: insert-before-button()
patrick@87
   169
           command-button(command, "putAttribute", parameter, "strict true", icon, icon(plus-box))
patrick@87
   170
           " Exercice à trous – saisie libre";
patrick@87
   171
}
patrick@87
   172
blanks-fill[strict]:before {
patrick@87
   173
  content: insert-before-button()
patrick@87
   174
           " Exercice à trous – saisie libre"
patrick@87
   175
           " – strict = " label(attribute, strict, color, black)
patrick@87
   176
           set-attribute-button(attribute, strict, unset-attribute, yes);
patrick@87
   177
}
patrick@87
   178
patrick@87
   179
blanks-select:before {
patrick@87
   180
  content: insert-before-button()
patrick@87
   181
           command-button(command, "putAttribute", parameter, "multiple true", icon, icon(plus-box))
patrick@87
   182
           " Exercice à trous – liste fermée";
patrick@87
   183
}
patrick@87
   184
blanks-select[multiple]:before {
patrick@87
   185
  content: insert-before-button()
patrick@87
   186
           " Exercice à trous – liste fermée"
patrick@87
   187
           " – multiple = " label(attribute, multiple, color, black)
patrick@87
   188
           set-attribute-button(attribute, multiple, unset-attribute, yes);
patrick@87
   189
}
patrick@87
   190
patrick@87
   191
/* point ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   192
patrick@87
   193
point:before {
patrick@87
   194
  content: insert-before-button() " "
patrick@87
   195
           command-button(command, "putAttribute", parameter, "type radio", icon, icon(plus-box))
patrick@87
   196
           " Pointage";
patrick@87
   197
}
patrick@87
   198
point[type]:before {
patrick@87
   199
  content: insert-before-button()
patrick@87
   200
           " Pointage – type = " label(attribute, type, color, black)
patrick@87
   201
           set-attribute-button(attribute, type, unset-attribute, yes);
patrick@87
   202
}
patrick@87
   203
patrick@87
   204
/* matching ~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   205
patrick@87
   206
matching:before {
patrick@87
   207
  content: insert-before-button() " Appariement";
patrick@87
   208
}
patrick@87
   209
patrick@87
   210
/* sort ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   211
patrick@87
   212
sort:before {
patrick@87
   213
  content: insert-before-button() 
patrick@87
   214
           command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box))
patrick@87
   215
           " Tri";
patrick@87
   216
}
patrick@87
   217
sort[shuffle]:before {
patrick@87
   218
  content: insert-before-button()
patrick@87
   219
           " Tri – shuffle = " label(attribute, shuffle, color, black)
patrick@87
   220
           set-attribute-button(attribute, shuffle, unset-attribute, yes);
patrick@87
   221
}
patrick@87
   222
patrick@87
   223
/* production ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   224
patrick@87
   225
production:before {
patrick@87
   226
  content: insert-before-button() " Production";
patrick@87
   227
}
patrick@87
   228
patrick@87
   229
/* composite ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   230
patrick@87
   231
composite:before {
patrick@87
   232
  content: insert-before-button() " Composite";
patrick@87
   233
}
patrick@87
   234
patrick@87
   235
subquiz {
patrick@87
   236
  display: block;
patrick@87
   237
  border-style: none;
patrick@87
   238
  margin: 0 0 .6em 1em;
patrick@87
   239
  padding: 0;
patrick@87
   240
}
patrick@87
   241
patrick@87
   242
subquiz > *, subquiz > *:before  {
patrick@87
   243
  display: block;
patrick@87
   244
}
patrick@87
   245
patrick@87
   246
subquiz > head {
patrick@87
   247
  background-color: #ffffee;
patrick@87
   248
  padding: .3em .5em .3em .5em;
patrick@87
   249
  border-radius: 0.5em;
patrick@87
   250
}
patrick@87
   251
patrick@87
   252
subquiz > instructions:before {
patrick@87
   253
  content: "Consigne";
patrick@87
   254
}
patrick@87
   255
patrick@87
   256
/* help ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   257
patrick@87
   258
help:before {
patrick@87
   259
  margin-top: .5em;
patrick@87
   260
  background-color: #ffffdd;
patrick@87
   261
  content: insert-before-button() insert-button() " Aide 2";
patrick@87
   262
}
patrick@87
   263
patrick@87
   264
help, help > *:before, help > * {
patrick@87
   265
  background-color: #ffffdd;
patrick@87
   266
}
patrick@87
   267
patrick@87
   268
/* answer ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   269
patrick@87
   270
answer:before {
patrick@87
   271
  margin-top: .5em;
patrick@87
   272
  background-color: #eaffe9;
patrick@87
   273
  content: insert-before-button() insert-button() " Réponse";
patrick@87
   274
}
patrick@87
   275
patrick@87
   276
answer, answer > *:before, answer > * {
patrick@87
   277
  background-color: #eaffe9;
patrick@87
   278
}
patrick@87
   279
patrick@87
   280
answer:after {
patrick@87
   281
  display: none;   
patrick@87
   282
}
patrick@87
   283
patrick@87
   284
patrick@87
   285
/* Block level ============================================================= */
patrick@87
   286
patrick@87
   287
/* choices.right, choices.wrong ~~~~ */
patrick@87
   288
patrick@87
   289
choices-radio right:before, choices-radio wrong:before,
patrick@87
   290
choices-check right:before, choices-check wrong:before {
patrick@87
   291
  display: marker;
patrick@87
   292
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@87
   293
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@87
   294
}
patrick@87
   295
patrick@87
   296
choices-radio right, choices-radio wrong,
patrick@87
   297
choices-check right, choices-check wrong {
patrick@87
   298
  display: block;
patrick@87
   299
  margin-left: 24px;
patrick@87
   300
  font-size: 115%;
patrick@87
   301
  font-family: serif;
patrick@87
   302
}
patrick@87
   303
patrick@87
   304
choices-radio > right:before {
patrick@87
   305
  color: #7f7f7f;
patrick@87
   306
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   307
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   308
           "  " icon(radio-on) " ";
patrick@87
   309
    
patrick@87
   310
}
patrick@87
   311
choices-radio > wrong:before {
patrick@87
   312
  color: #7f7f7f;
patrick@87
   313
  content: insert-before-button( icon, icon(left-half-disc))
patrick@87
   314
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   315
           "  " icon(radio-off) " ";
patrick@87
   316
    
patrick@87
   317
}
patrick@87
   318
choices-check > right:before {
patrick@87
   319
  color: #7f7f7f;
patrick@87
   320
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   321
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   322
           command-button(command, "convert", parameter, "wrong", icon, icon(convert))
patrick@87
   323
           "  " icon(check-on) " ";
patrick@87
   324
}
patrick@87
   325
choices-check > wrong:before {
patrick@87
   326
  color: #7f7f7f;
patrick@87
   327
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   328
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   329
           command-button(command, "convert", parameter, "right", icon, icon(convert))
patrick@87
   330
           "  " icon(check-off) " ";
patrick@87
   331
}
patrick@87
   332
patrick@87
   333
choices-radio > right, choices-radio > wrong {
patrick@87
   334
  margin-left: 52px;
patrick@87
   335
}
patrick@87
   336
choices-check > right, choices-check > wrong {
patrick@87
   337
  margin-left: 56px;
patrick@87
   338
}
patrick@87
   339
patrick@87
   340
/* blanks.wrongs ~~~~~~~~~~~~~~~~~~~ */
patrick@87
   341
patrick@87
   342
blanks-select > wrongs:before {
patrick@87
   343
  color: #7f7f7f;
patrick@87
   344
  content: "Intrus : ";
patrick@87
   345
}
patrick@87
   346
patrick@87
   347
blanks-select > wrongs {
patrick@87
   348
  display: block;
patrick@87
   349
  margin: .5em 0 .5em 0;
patrick@87
   350
}
patrick@87
   351
patrick@87
   352
wrongs > wrong {
patrick@87
   353
  display: inline;
patrick@87
   354
  background-color: #c7e0f8;
patrick@87
   355
}
patrick@87
   356
patrick@87
   357
wrongs > wrong:after {
patrick@87
   358
  color: #7f7f7f;
patrick@87
   359
  content: "  –  ";
patrick@87
   360
  background-color: transparent;
patrick@87
   361
}
patrick@87
   362
wrongs > wrong:after:last-child {
patrick@87
   363
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@87
   364
}
patrick@87
   365
patrick@87
   366
/* match ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   367
patrick@87
   368
match:before {
patrick@87
   369
  display: marker;
patrick@87
   370
  color: #7f7f7f;
patrick@87
   371
  content: insert-same-before-button(icon, icon(left-half-disc))
patrick@87
   372
           insert-same-after-button(icon, icon(right-half-disc));
patrick@87
   373
}
patrick@87
   374
patrick@87
   375
match {
patrick@87
   376
  display: block;
patrick@87
   377
  margin-left: 24px;
patrick@87
   378
}
patrick@87
   379
patrick@87
   380
match > section:before, match > p:before {
patrick@87
   381
  display: none;
patrick@87
   382
}
patrick@87
   383
patrick@87
   384
match section, match p {
patrick@87
   385
  display: inline;
patrick@87
   386
}
patrick@87
   387
patrick@87
   388
match > section:first-child:after, match > p:first-child:after {
patrick@87
   389
  color: #7f7f7f;
patrick@87
   390
  content: " —>  ";
patrick@87
   391
}
patrick@87
   392
match > section:last-child:after, match > p:last-child:after {
patrick@87
   393
  display: none;
patrick@87
   394
}
patrick@87
   395
patrick@87
   396
/* sort > comparison ~~~~~~~~~~~~~~~ */
patrick@87
   397
patrick@87
   398
comparison:before {
patrick@87
   399
  color: #7f7f7f;
patrick@87
   400
  content: "Logique de comparaison : "
patrick@87
   401
}
patrick@87
   402
patrick@87
   403
comparison {
patrick@87
   404
  display: block;
patrick@87
   405
  margin: .2em 0 .5em 0;
patrick@87
   406
}
patrick@87
   407
patrick@87
   408
/* sort > item ~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   409
patrick@87
   410
sort > item:before {
patrick@87
   411
  color: #7f7f7f;
patrick@87
   412
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   413
           text-field(attribute, "shuffle", columns, 1, font-size, 75%, color, black)
patrick@87
   414
           " ";
patrick@87
   415
}
patrick@87
   416
patrick@87
   417
sort > item {
patrick@87
   418
  display: inline;
patrick@87
   419
}
patrick@87
   420
patrick@87
   421
sort > item:after {
patrick@87
   422
  color: #7f7f7f;
patrick@87
   423
  content: insert-same-after-button(icon, icon(right-half-disc))
patrick@87
   424
           " " xpath("../comparison") " ";
patrick@87
   425
}
patrick@87
   426
sort > item:last-child:after {
patrick@87
   427
  content: insert-same-after-button(icon, icon(right-half-disc)) "\A";
patrick@87
   428
}
patrick@87
   429
patrick@87
   430
patrick@87
   431
/* Inline level ============================================================ */
patrick@87
   432
patrick@87
   433
/* blank ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   434
patrick@87
   435
blank {
patrick@87
   436
  background-color: #c0ffc0;
patrick@87
   437
}
patrick@87
   438
patrick@87
   439
s:after {
patrick@87
   440
  color:  #7f7f7f;
patrick@87
   441
  background-color: transparent;
patrick@87
   442
  content: insert-same-after-button(icon, icon(right-half-disc));
patrick@87
   443
}
patrick@87
   444
patrick@87
   445
/* point.right & point.wrong ~~~~~~~ */
patrick@87
   446
patrick@87
   447
point right:before, point wrong:before {
patrick@87
   448
  background: transparent;
patrick@87
   449
  color: #7f7f7f;
patrick@87
   450
}
patrick@87
   451
point right:before {
patrick@87
   452
  content: command-button(command, "convert", parameter, "wrong", icon, icon(convert));
patrick@87
   453
}
patrick@87
   454
point wrong:before {
patrick@87
   455
  content: command-button(command, "convert", parameter, "right", icon, icon(convert));
patrick@87
   456
}
patrick@87
   457
patrick@87
   458
point right {
patrick@87
   459
  background-color: #c0ffc0;
patrick@87
   460
}
patrick@87
   461
patrick@87
   462
point wrong {
patrick@87
   463
  background-color: #c7e0f8;
patrick@87
   464
}