Xxe/Css/publiquiz.css
author Patrick PIERRE <patrick.pierre@prismallia.fr>
jeu., 26 juil. 2012 18:35:33 +0200
changeset 125 dd9b04a54839
parent 117 fb3173d57512
child 128 14dc149154f4
permissions -rw-r--r--
Ajout des exercices de catégorie
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@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@125
   223
/* categories ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@125
   224
patrick@125
   225
categories:before {
patrick@125
   226
  content: insert-before-button() " Catégories";
patrick@125
   227
}
patrick@125
   228
patrick@87
   229
/* production ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   230
patrick@87
   231
production:before {
patrick@87
   232
  content: insert-before-button() " Production";
patrick@87
   233
}
patrick@87
   234
patrick@87
   235
/* composite ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   236
patrick@87
   237
composite:before {
patrick@87
   238
  content: insert-before-button() " Composite";
patrick@87
   239
}
patrick@87
   240
patrick@87
   241
subquiz {
patrick@87
   242
  display: block;
patrick@87
   243
  border-style: none;
patrick@87
   244
  margin: 0 0 .6em 1em;
patrick@87
   245
  padding: 0;
patrick@87
   246
}
patrick@87
   247
patrick@87
   248
subquiz > *, subquiz > *:before  {
patrick@87
   249
  display: block;
patrick@87
   250
}
patrick@87
   251
patrick@87
   252
subquiz > head {
patrick@87
   253
  background-color: #ffffee;
patrick@87
   254
  padding: .3em .5em .3em .5em;
patrick@87
   255
  border-radius: 0.5em;
patrick@87
   256
}
patrick@87
   257
patrick@87
   258
subquiz > instructions:before {
patrick@87
   259
  content: "Consigne";
patrick@87
   260
}
patrick@87
   261
patrick@87
   262
/* help ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   263
patrick@87
   264
help:before {
patrick@87
   265
  margin-top: .5em;
patrick@87
   266
  background-color: #ffffdd;
patrick@125
   267
  content: insert-before-button() insert-button() " Aide ";
patrick@87
   268
}
patrick@87
   269
patrick@87
   270
help, help > *:before, help > * {
patrick@87
   271
  background-color: #ffffdd;
patrick@87
   272
}
patrick@87
   273
patrick@87
   274
/* answer ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   275
patrick@87
   276
answer:before {
patrick@87
   277
  margin-top: .5em;
patrick@87
   278
  background-color: #eaffe9;
patrick@87
   279
  content: insert-before-button() insert-button() " Réponse";
patrick@87
   280
}
patrick@87
   281
patrick@87
   282
answer, answer > *:before, answer > * {
patrick@87
   283
  background-color: #eaffe9;
patrick@87
   284
}
patrick@87
   285
patrick@87
   286
answer:after {
patrick@87
   287
  display: none;   
patrick@87
   288
}
patrick@87
   289
patrick@87
   290
patrick@87
   291
/* Block level ============================================================= */
patrick@87
   292
patrick@87
   293
/* choices.right, choices.wrong ~~~~ */
patrick@87
   294
patrick@87
   295
choices-radio right:before, choices-radio wrong:before,
patrick@87
   296
choices-check right:before, choices-check wrong:before {
patrick@87
   297
  display: marker;
patrick@87
   298
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@87
   299
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@87
   300
}
patrick@87
   301
patrick@87
   302
choices-radio right, choices-radio wrong,
patrick@87
   303
choices-check right, choices-check wrong {
patrick@87
   304
  display: block;
patrick@87
   305
  margin-left: 24px;
patrick@87
   306
  font-size: 115%;
patrick@87
   307
  font-family: serif;
patrick@87
   308
}
patrick@87
   309
patrick@87
   310
choices-radio > right:before {
patrick@87
   311
  color: #7f7f7f;
patrick@87
   312
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   313
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   314
           "  " icon(radio-on) " ";
patrick@87
   315
    
patrick@87
   316
}
patrick@87
   317
choices-radio > wrong:before {
patrick@87
   318
  color: #7f7f7f;
patrick@87
   319
  content: insert-before-button( icon, icon(left-half-disc))
patrick@87
   320
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   321
           "  " icon(radio-off) " ";
patrick@87
   322
    
patrick@87
   323
}
patrick@87
   324
choices-check > right:before {
patrick@87
   325
  color: #7f7f7f;
patrick@87
   326
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   327
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   328
           command-button(command, "convert", parameter, "wrong", icon, icon(convert))
patrick@87
   329
           "  " icon(check-on) " ";
patrick@87
   330
}
patrick@87
   331
choices-check > wrong:before {
patrick@87
   332
  color: #7f7f7f;
patrick@87
   333
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   334
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   335
           command-button(command, "convert", parameter, "right", icon, icon(convert))
patrick@87
   336
           "  " icon(check-off) " ";
patrick@87
   337
}
patrick@87
   338
patrick@87
   339
choices-radio > right, choices-radio > wrong {
patrick@87
   340
  margin-left: 52px;
patrick@87
   341
}
patrick@87
   342
choices-check > right, choices-check > wrong {
patrick@108
   343
  margin-left: 60px;
patrick@87
   344
}
patrick@87
   345
patrick@87
   346
/* blanks.wrongs ~~~~~~~~~~~~~~~~~~~ */
patrick@87
   347
patrick@87
   348
blanks-select > wrongs:before {
patrick@87
   349
  color: #7f7f7f;
patrick@87
   350
  content: "Intrus : ";
patrick@87
   351
}
patrick@87
   352
patrick@87
   353
blanks-select > wrongs {
patrick@87
   354
  display: block;
patrick@87
   355
  margin: .5em 0 .5em 0;
patrick@87
   356
}
patrick@87
   357
patrick@87
   358
wrongs > wrong {
patrick@87
   359
  display: inline;
patrick@87
   360
  background-color: #c7e0f8;
patrick@87
   361
}
patrick@87
   362
patrick@87
   363
wrongs > wrong:after {
patrick@87
   364
  color: #7f7f7f;
patrick@87
   365
  content: "  –  ";
patrick@87
   366
  background-color: transparent;
patrick@87
   367
}
patrick@87
   368
wrongs > wrong:after:last-child {
patrick@87
   369
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@87
   370
}
patrick@87
   371
patrick@87
   372
/* match ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   373
patrick@87
   374
match:before {
patrick@87
   375
  display: marker;
patrick@87
   376
  color: #7f7f7f;
patrick@87
   377
  content: insert-same-before-button(icon, icon(left-half-disc))
patrick@87
   378
           insert-same-after-button(icon, icon(right-half-disc));
patrick@87
   379
}
patrick@87
   380
patrick@87
   381
match {
patrick@87
   382
  display: block;
patrick@87
   383
  margin-left: 24px;
patrick@87
   384
}
patrick@87
   385
patrick@87
   386
match > section:before, match > p:before {
patrick@87
   387
  display: none;
patrick@87
   388
}
patrick@87
   389
patrick@87
   390
match section, match p {
patrick@87
   391
  display: inline;
patrick@87
   392
}
patrick@87
   393
patrick@87
   394
match > section:first-child:after, match > p:first-child:after {
patrick@87
   395
  color: #7f7f7f;
patrick@87
   396
  content: " —>  ";
patrick@87
   397
}
patrick@87
   398
match > section:last-child:after, match > p:last-child:after {
patrick@87
   399
  display: none;
patrick@87
   400
}
patrick@87
   401
patrick@87
   402
/* sort > comparison ~~~~~~~~~~~~~~~ */
patrick@87
   403
patrick@87
   404
comparison:before {
patrick@87
   405
  color: #7f7f7f;
patrick@87
   406
  content: "Logique de comparaison : "
patrick@87
   407
}
patrick@87
   408
patrick@87
   409
comparison {
patrick@87
   410
  display: block;
patrick@87
   411
  margin: .2em 0 .5em 0;
patrick@87
   412
}
patrick@87
   413
patrick@87
   414
/* sort > item ~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   415
patrick@87
   416
sort > item:before {
patrick@87
   417
  color: #7f7f7f;
patrick@87
   418
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   419
           text-field(attribute, "shuffle", columns, 1, font-size, 75%, color, black)
patrick@87
   420
           " ";
patrick@87
   421
}
patrick@87
   422
patrick@87
   423
sort > item {
patrick@87
   424
  display: inline;
patrick@87
   425
}
patrick@87
   426
patrick@87
   427
sort > item:after {
patrick@87
   428
  color: #7f7f7f;
patrick@87
   429
  content: insert-same-after-button(icon, icon(right-half-disc))
patrick@87
   430
           " " xpath("../comparison") " ";
patrick@87
   431
}
patrick@87
   432
sort > item:last-child:after {
patrick@87
   433
  content: insert-same-after-button(icon, icon(right-half-disc)) "\A";
patrick@87
   434
}
patrick@87
   435
patrick@125
   436
/* category ~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@125
   437
patrick@125
   438
category {
patrick@125
   439
  display: block;
patrick@125
   440
  margin-bottom: .3em;
patrick@125
   441
}
patrick@125
   442
patrick@125
   443
category > head {
patrick@125
   444
  display: block;
patrick@125
   445
}
patrick@125
   446
patrick@125
   447
category > item {
patrick@125
   448
  margin-left: 1em;
patrick@125
   449
}
patrick@125
   450
patrick@125
   451
category:after {
patrick@125
   452
  color: #7f7f7f;
patrick@125
   453
  content: "  " insert-same-after-button();
patrick@125
   454
}
patrick@125
   455
patrick@87
   456
patrick@87
   457
/* Inline level ============================================================ */
patrick@87
   458
patrick@87
   459
/* blank ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   460
patrick@87
   461
blank {
patrick@87
   462
  background-color: #c0ffc0;
patrick@87
   463
}
patrick@87
   464
patrick@87
   465
s:after {
patrick@87
   466
  color:  #7f7f7f;
patrick@87
   467
  background-color: transparent;
patrick@87
   468
  content: insert-same-after-button(icon, icon(right-half-disc));
patrick@87
   469
}
patrick@87
   470
patrick@87
   471
/* point.right & point.wrong ~~~~~~~ */
patrick@87
   472
patrick@87
   473
point right:before, point wrong:before {
patrick@87
   474
  background: transparent;
patrick@87
   475
  color: #7f7f7f;
patrick@87
   476
}
patrick@87
   477
point right:before {
patrick@87
   478
  content: command-button(command, "convert", parameter, "wrong", icon, icon(convert));
patrick@87
   479
}
patrick@87
   480
point wrong:before {
patrick@87
   481
  content: command-button(command, "convert", parameter, "right", icon, icon(convert));
patrick@87
   482
}
patrick@87
   483
patrick@87
   484
point right {
patrick@87
   485
  background-color: #c0ffc0;
patrick@87
   486
}
patrick@87
   487
patrick@87
   488
point wrong {
patrick@87
   489
  background-color: #c7e0f8;
patrick@87
   490
}