Xxe/Css/publidoc.css
author Patrick PIERRE
dim., 09 avril 2017 13:24:52 +0200
changeset 446 fb5511755683
parent 251 3483da1b39eb
permissions -rw-r--r--
Exemple de glossaire
patrick@67
     1
@charset "UTF-8";
patrick@67
     2
patrick@251
     3
@import url(xxe-config:common/css/cals_table.imp);
patrick@251
     4
patrick@59
     5
/* $Id$ */
patrick@59
     6
patrick@60
     7
*::comment { display: none; }
patrick@60
     8
patrick@61
     9
publidoc {
patrick@63
    10
  display: block;
patrick@61
    11
  font-family: sans-serif;
patrick@61
    12
  padding: 0;
patrick@61
    13
}
patrick@60
    14
patrick@60
    15
patrick@60
    16
/* Head level ============================================================== */
patrick@60
    17
patrick@61
    18
head {
patrick@63
    19
  display: block;
patrick@61
    20
  margin-bottom: .5em;
patrick@62
    21
  background-color: #fafafa;
patrick@111
    22
  padding: .2em .5em 0 .5em;
patrick@61
    23
  border: 1px solid #bbbbbb;
patrick@61
    24
  border-radius: 0.2em;
patrick@59
    25
}
patrick@59
    26
patrick@60
    27
head > *:before {
Patrick@139
    28
  display: marker;
Patrick@139
    29
  color:  #7f7f7f;
patrick@156
    30
  content: insert-before-button() element-label() " :";
patrick@60
    31
}
patrick@60
    32
head > title:before { display: none; }
patrick@127
    33
head > shorttitle:before { display: none; }
patrick@63
    34
head > subtitle:before { display: none; }
patrick@62
    35
head > identifier[type="uri"]:before { content: insert-before-button() " URI :"; }
patrick@62
    36
head > identifier[type="ean"]:before { content: insert-before-button() " EAN :"; }
patrick@61
    37
head > copyright:before { content: insert-before-button() " Copyright :"; }
patrick@156
    38
head > collection:before { content: insert-before-button() " Collection :"; }
patrick@67
    39
head > contributors:before { content: insert-before-button() " Contributeurs :"; }
patrick@60
    40
head > date:before { content: insert-before-button() " Date :"; }
patrick@60
    41
head > place:before { content: insert-before-button() " Lieu :"; }
patrick@60
    42
head > source:before { content: insert-before-button() " Source :"; }
patrick@60
    43
head > keywordset:before { content: insert-before-button() " Mots clés :"; }
patrick@61
    44
head > subjectset:before { content: insert-before-button() " Thèmes :"; }
patrick@61
    45
head > abstract:before { content: insert-before-button() " Résumé :"; }
patrick@61
    46
head > cover:before { content: insert-before-button() " Couverture :"; }
patrick@61
    47
head > annotation:before { content: insert-before-button() " Annotation :"; }
patrick@111
    48
head > audio:before { content: insert-before-button() " Audio :"; }
patrick@59
    49
patrick@60
    50
head > * {
Patrick@139
    51
  display: block;
Patrick@139
    52
  margin: 0 0 .8em 7.5em;
patrick@60
    53
}
patrick@67
    54
patrick@67
    55
head > *:after {
patrick@67
    56
  color:  #7f7f7f;
patrick@67
    57
  content: " " insert-after-button();
patrick@67
    58
}
patrick@67
    59
patrick@127
    60
/* title, shortitle & subtitle ~~~~~ */
patrick@127
    61
patrick@127
    62
head > title, head > shorttitle {
patrick@127
    63
  font-weight: bold;
patrick@127
    64
  font-size: 120%;
patrick@127
    65
  margin: 0 0 .2em 0;
patrick@127
    66
}
patrick@67
    67
patrick@60
    68
head > title {
patrick@60
    69
  color: #004080;
patrick@61
    70
}
patrick@127
    71
patrick@63
    72
head > subtitle {
patrick@63
    73
  font-weight: bold;
patrick@63
    74
  color: #004080;
patrick@63
    75
  margin: 0 0 .2em 0;
patrick@60
    76
}
patrick@60
    77
patrick@67
    78
/* contributors ~~~~~~~~~~~~~~~~~~~~ */
patrick@67
    79
patrick@67
    80
contributor:before {
patrick@67
    81
  display: marker;
patrick@67
    82
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@67
    83
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@60
    84
}
patrick@67
    85
contributor {
patrick@67
    86
  display: block;
patrick@67
    87
  margin: 0 0 .2em 24px;
patrick@62
    88
}
patrick@60
    89
patrick@67
    90
firstname:after, secondname:after, lastname:after, label:after,
patrick@67
    91
address:after {
patrick@65
    92
  content: insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@65
    93
}
patrick@65
    94
patrick@67
    95
contributor > link[uri]:after {
patrick@67
    96
  content: " ‣ " text-field(attribute, uri, color, black, font-size, 80%) "]"
patrick@67
    97
           insert-after-button(icon, icon(right-half-disc));
patrick@67
    98
}
patrick@67
    99
contributor > link[idref]:after {
patrick@67
   100
  content: " ‣ " label(attribute, idref, color, black)
patrick@67
   101
           set-attribute-button(attribute, idref) "]"
patrick@67
   102
           insert-after-button(icon, icon(right-half-disc));
patrick@65
   103
}
patrick@65
   104
patrick@68
   105
contributor role {
patrick@67
   106
  color: #7f7f7f;
patrick@68
   107
  content: " rôle : " combo-box(element, role, font-size, 75%,
patrick@156
   108
             labels, "auteur\A illustrateur\A éditeur\A packager"
patrick@156
   109
             values, "author\A illustrator\A publisher\A packager", color, black)
patrick@68
   110
           insert-same-after-button(icon, icon(right-half-disc));
patrick@65
   111
}
patrick@65
   112
patrick@67
   113
/* source ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@67
   114
patrick@65
   115
head source[type="book"] {
patrick@65
   116
  display: none;
patrick@65
   117
}
patrick@65
   118
patrick@67
   119
/* keyword & subject ~~~~~~~~~~~~~~~ */
patrick@67
   120
patrick@65
   121
head keyword:after {
patrick@65
   122
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc))
patrick@65
   123
           " ";
patrick@65
   124
}
patrick@65
   125
patrick@65
   126
head subject:before {
patrick@65
   127
  color: #7F7f7f;
patrick@65
   128
  content: "ID = " text-field(attribute, id, columns, 10, color, black, font-size, 75%);
patrick@65
   129
}
patrick@65
   130
head subject:after {
patrick@65
   131
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@65
   132
}
patrick@65
   133
patrick@67
   134
patrick@60
   135
/* Division level ========================================================== */
patrick@60
   136
patrick@61
   137
division:before {
patrick@63
   138
  display: block;
patrick@61
   139
  color: #7f7f7f;
patrick@61
   140
  content: collapser() " " insert-before-button() insert-after-button()
patrick@61
   141
           " Division"
patrick@61
   142
}
patrick@61
   143
patrick@61
   144
division {
patrick@61
   145
  display: block;
patrick@61
   146
  border: 1px dotted #7f7f7f;
patrick@61
   147
  padding: 5px;
patrick@61
   148
  margin-bottom: .5em;
patrick@61
   149
  collapsible: yes;
patrick@61
   150
  not-collapsible-head: 1;
patrick@61
   151
}
patrick@61
   152
division:last-child {
patrick@61
   153
  margin-bottom: 0;
patrick@61
   154
}
patrick@61
   155
patrick@61
   156
division > head {
patrick@62
   157
  background-color: #ffffee;
patrick@61
   158
  padding: .3em .5em .3em .5em;
patrick@61
   159
  border-radius: 0.5em;
patrick@61
   160
}
patrick@61
   161
patrick@61
   162
patrick@60
   163
/* Component level ========================================================= */
patrick@60
   164
patrick@61
   165
topic:before {
patrick@61
   166
  display: block;
patrick@61
   167
  color: #7f7f7f;
patrick@61
   168
  background-color: #ddddcc;
patrick@63
   169
  border: 1px solid #aeaea0;
patrick@61
   170
  font-weight: bold;
patrick@61
   171
  padding: .5em 5px .5em 5px;
patrick@61
   172
  content: collapser() " " insert-before-button() insert-after-button()
patrick@61
   173
           " " add-attribute-button() " Topic";
patrick@61
   174
}
Patrick@139
   175
topic[id]:before {
patrick@61
   176
  content: collapser() " " insert-before-button() insert-after-button()
patrick@62
   177
           " " add-attribute-button() " Topic"
Patrick@139
   178
           " – ID = " text-field(attribute, "id", columns, 15, color, black);
patrick@61
   179
}
patrick@61
   180
topic[type]:before {
patrick@61
   181
  content: collapser() " " insert-before-button() insert-after-button()
patrick@62
   182
           " " add-attribute-button() " Topic"
patrick@62
   183
           " – Type = " text-field(attribute, type, columns, 10, color, black);
patrick@61
   184
}
Patrick@139
   185
topic[id][type]:before {
patrick@61
   186
  content: collapser() " " insert-before-button() insert-after-button()
patrick@62
   187
           " Topic"
Patrick@139
   188
           " – ID = " text-field(attribute, "id", columns, 15, color, black)
patrick@62
   189
           " – Type = " text-field(attribute, type, columns, 10, color, black);
patrick@61
   190
}
patrick@61
   191
patrick@61
   192
topic {
patrick@63
   193
  display: block;
patrick@63
   194
  border: 1px solid #aeaea0;
patrick@61
   195
  margin-bottom: .5em;
patrick@61
   196
  padding: 5px;
patrick@61
   197
  collapsible: yes;
patrick@61
   198
}
patrick@61
   199
topic:last-child {
patrick@61
   200
  margin-bottom: 0;
patrick@61
   201
}
patrick@61
   202
patrick@61
   203
topic > head {
patrick@62
   204
  background-color: #ffffee;
patrick@61
   205
  padding: .3em .5em .3em .5em;
patrick@61
   206
  border-radius: 0.5em;
patrick@61
   207
}
patrick@61
   208
patrick@61
   209
patrick@61
   210
/* Top level =============================================================== */
patrick@61
   211
patrick@61
   212
publidoc > *:before {
patrick@61
   213
  display: block;
patrick@61
   214
  color: #bbbbbb;
patrick@62
   215
  background: #993333 url('top.png') repeat-x top left;
patrick@61
   216
  font-weight: bold;
patrick@62
   217
  padding: 1.2em 5px 1em 5px;
patrick@61
   218
}
patrick@61
   219
publidoc > document:before {
patrick@67
   220
  content: add-attribute-button() " Document"
patrick@117
   221
           " – ID = " text-field(attribute, "id", columns, 15, color, white);
patrick@67
   222
}
patrick@117
   223
publidoc > document[id][xml|lang]:before {
patrick@67
   224
  content: "Document"
patrick@117
   225
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@67
   226
           " – Langue principale  = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   227
             values, "en\A fr\A es", color, white);
patrick@61
   228
}
patrick@117
   229
publidoc > topic[id]:before {
patrick@67
   230
  content: add-attribute-button() " Topic"
patrick@117
   231
           " – ID = " text-field(attribute, "id", columns, 15, color, white);
patrick@61
   232
}
Patrick@139
   233
publidoc > topic[id][type]:before {
patrick@67
   234
  content: add-attribute-button() " Topic"
patrick@117
   235
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@62
   236
           " – Type = " text-field(attribute, type, columns, 10, color, white);
patrick@61
   237
}
patrick@117
   238
publidoc > topic[id][xml|lang]:before {
patrick@67
   239
  content: add-attribute-button() " Topic"
patrick@117
   240
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@70
   241
           " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   242
             values, "en\A fr\A es", color, white);
patrick@67
   243
}
patrick@117
   244
publidoc > topic[id][type][xml|lang]:before {
patrick@67
   245
  content: "Topic"
patrick@117
   246
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@67
   247
           " – Type = " text-field(attribute, type, columns, 10, color, white)
patrick@70
   248
           " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   249
             values, "en\A fr\A es", color, white);
patrick@67
   250
}
patrick@61
   251
patrick@61
   252
publidoc > * {
patrick@63
   253
  display: block;
patrick@61
   254
  margin: 5px;
patrick@62
   255
  padding: 0;
patrick@61
   256
  border: 0;
patrick@61
   257
}
patrick@61
   258
patrick@61
   259
publidoc > * > head {
patrick@62
   260
  background-color: #ffffee;
patrick@61
   261
  padding: .3em .5em .3em .5em;
patrick@61
   262
  border-radius: 0.5em;
patrick@61
   263
}
patrick@61
   264
patrick@63
   265
publidoc > * > head > title {
patrick@63
   266
  font-size: 140%;
patrick@111
   267
  margin: .1em 0 .1em 0;
patrick@63
   268
}
patrick@63
   269
patrick@61
   270
patrick@60
   271
/* Section level =========================================================== */
patrick@60
   272
patrick@62
   273
section:before {
patrick@63
   274
  display: block;
patrick@62
   275
  color: #7f7f7f;
patrick@64
   276
  text-align: left;
patrick@64
   277
  font-style: normal;
patrick@64
   278
  font-size: 75%;
patrick@63
   279
  padding-bottom: 3px;
patrick@63
   280
  content: insert-before-button() add-attribute-button(icon, icon(plus-box));
patrick@62
   281
}
patrick@62
   282
section[type]:before {
patrick@64
   283
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@64
   284
           " Type = " text-field(attribute, type, columns, 5, color, black);
patrick@64
   285
}
patrick@166
   286
section[for]:before {
patrick@166
   287
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@166
   288
           " Pour = " text-field(attribute, for, columns, 5, color, black);
patrick@166
   289
}
patrick@64
   290
section[xml|lang]:before {
patrick@64
   291
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@64
   292
           " Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@64
   293
}
patrick@166
   294
section[type][for]:before {
patrick@166
   295
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@166
   296
           " Type = " text-field(attribute, type, columns, 5, color, black)
patrick@166
   297
           " – Pour = " text-field(attribute, for, columns, 5, color, black);
patrick@166
   298
}
patrick@64
   299
section[type][xml|lang]:before {
patrick@166
   300
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@64
   301
           " Type = " text-field(attribute, type, columns, 5, color, black)
patrick@64
   302
           " – Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@62
   303
}
patrick@166
   304
section[for][xml|lang]:before {
patrick@166
   305
  content: insert-before-button() add-attribute-button(icon, icon(plus-box))
patrick@166
   306
           " Pour = " text-field(attribute, for, columns, 5, color, black)
patrick@166
   307
           " – Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@166
   308
}
patrick@166
   309
section[type][for][xml|lang]:before {
patrick@166
   310
  content: insert-before-button()
patrick@166
   311
           " Type = " text-field(attribute, type, columns, 5, color, black)
patrick@166
   312
           " Pour = " text-field(attribute, for, columns, 5, color, black)
patrick@166
   313
           " – Langue = " text-field(attribute, "xml:lang", columns, 2, color, black);
patrick@166
   314
}
patrick@166
   315
patrick@63
   316
section section:before {
patrick@63
   317
  margin-left: 1em;
patrick@63
   318
}
patrick@62
   319
patrick@251
   320
header, front, section, footer {
patrick@61
   321
  display: block;
patrick@61
   322
}
patrick@251
   323
patrick@62
   324
section[type="box"] {
patrick@63
   325
  margin-bottom: .5em;
patrick@62
   326
  padding: 5px;
patrick@62
   327
  background-color: #e8f0f7;
patrick@62
   328
  border-radius: 0.2em;
patrick@62
   329
}
patrick@63
   330
section[type="ex"] { font-style: italic; }
patrick@62
   331
section[type="sign"] { text-align: right; }
patrick@62
   332
Patrick@139
   333
header, footer {
Patrick@139
   334
  background-color: #fafafa;
Patrick@139
   335
}
Patrick@139
   336
patrick@251
   337
front {
patrick@251
   338
  margin: 1em 20px 1em 20px;
patrick@251
   339
  background-color: #fafafa;
patrick@251
   340
}
patrick@251
   341
front p {
patrick@251
   342
  font-family: sans-serif;
patrick@251
   343
}
patrick@251
   344
patrick@62
   345
section section {
patrick@63
   346
  margin-left: 1em;
patrick@62
   347
}
patrick@62
   348
patrick@62
   349
section:after {
patrick@62
   350
  color: #7f7f7f;
patrick@62
   351
  content: insert-after-button();
patrick@61
   352
}
patrick@64
   353
section section:after {
patrick@64
   354
  margin-left: 1em;
patrick@64
   355
}
patrick@61
   356
patrick@59
   357
patrick@60
   358
/* Block level ============================================================= */
patrick@59
   359
patrick@62
   360
p:before, speech:before, list:before,
patrick@62
   361
blockquote:before, table:before, media:before {
patrick@63
   362
  display: marker;
patrick@72
   363
  color: #7f7f7f;
patrick@72
   364
  content: insert-before-button(icon, icon(left-half-disc))
patrick@72
   365
           insert-after-button(icon, icon(right-half-disc));
patrick@62
   366
}
patrick@62
   367
patrick@62
   368
p, speech, list, blockquote, table, media {
patrick@61
   369
  display: block;
patrick@62
   370
  margin-left: 24px;
patrick@63
   371
  font-size: 115%;
patrick@62
   372
  font-family: serif;
patrick@61
   373
}
patrick@61
   374
patrick@67
   375
/* speech ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@65
   376
patrick@65
   377
speaker {
patrick@65
   378
  font-weight: bold;
patrick@65
   379
}
patrick@65
   380
patrick@65
   381
stage:before, stage:after {
patrick@65
   382
  color: #7f7f7f;
patrick@65
   383
  content: "(";
patrick@65
   384
}
patrick@65
   385
stage:before {
patrick@65
   386
  content: " (";
patrick@65
   387
}
patrick@65
   388
stage {
patrick@65
   389
  font-style: italic;  
patrick@65
   390
}
patrick@65
   391
stage:after {
patrick@65
   392
  content: ")";
patrick@65
   393
}
patrick@65
   394
patrick@63
   395
/* list ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@61
   396
patrick@72
   397
list:before {
patrick@72
   398
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@72
   399
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc))
patrick@72
   400
           command-button(command, "putAttribute", parameter, "type ordered", icon, icon(convert));
patrick@72
   401
}
patrick@72
   402
list[type="ordered"]:before {
patrick@72
   403
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@72
   404
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc))
patrick@72
   405
           command-button(command, "removeAttribute", parameter, "type", icon, icon(convert));
patrick@72
   406
}
patrick@72
   407
list[type="glossary"]:before {
patrick@72
   408
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@72
   409
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@72
   410
}
patrick@72
   411
patrick@61
   412
list {
patrick@72
   413
  margin: .3em 0 .3em 36px;
patrick@72
   414
}
patrick@72
   415
list[type="glossary"] {
patrick@62
   416
  margin: .3em 0 .3em 24px;
patrick@61
   417
}
patrick@61
   418
patrick@63
   419
list > head {
patrick@63
   420
  font-size: 75%;
patrick@63
   421
}
patrick@63
   422
patrick@61
   423
item {
patrick@61
   424
  display: list-item;
patrick@61
   425
}
patrick@61
   426
list[type="ordered"] > item {
patrick@61
   427
  list-style-type: decimal;
patrick@72
   428
  list-style-position: inside;
patrick@61
   429
}
patrick@61
   430
patrick@63
   431
item:after {
patrick@63
   432
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@63
   433
}
patrick@63
   434
patrick@72
   435
list:not([type="glossary"]) > item > p:before {
patrick@72
   436
  color: #7f7f7f;
patrick@72
   437
  content: insert-same-before-button(icon, icon(left-half-disc))
patrick@72
   438
           insert-same-after-button(icon, icon(right-half-disc));
patrick@72
   439
}
patrick@72
   440
list:not([type="glossary"]) > item > p {
patrick@72
   441
  display: inline;
patrick@72
   442
}
patrick@72
   443
list:not([type="glossary"]) > item > p:after {
patrick@72
   444
  color: #7f7f7f;  
patrick@72
   445
  content: "\A";
patrick@72
   446
}
patrick@72
   447
patrick@61
   448
list[type="glossary"] > item > label {
patrick@61
   449
  font-weight: bold;
patrick@61
   450
}
patrick@61
   451
patrick@63
   452
/* blockquote ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@62
   453
patrick@72
   454
blockquote { color: #004080; }
patrick@72
   455
patrick@62
   456
attribution { font-style: italic; }
patrick@62
   457
patrick@251
   458
/* table ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@251
   459
patrick@251
   460
@extension "com.xmlmind.xmleditext.xhtml.table.TableSupport black rgb(238,238,224)";
patrick@251
   461
patrick@251
   462
table {
patrick@251
   463
  display: table;
patrick@251
   464
  border-style: solid;
patrick@251
   465
  border-width: 1px;
patrick@251
   466
  margin-top: 0;
patrick@251
   467
  margin-bottom: 1em;
patrick@251
   468
}
patrick@251
   469
patrick@251
   470
table > head {
patrick@251
   471
  display: table-caption;
patrick@251
   472
  margin-left: 24px;
patrick@251
   473
  margin-bottom: 0;
patrick@251
   474
}
patrick@251
   475
patrick@251
   476
table title {
patrick@251
   477
  font-size: 93%;
patrick@251
   478
  font-family: sans-serif;
patrick@251
   479
  color: black;
patrick@251
   480
}
patrick@251
   481
patrick@251
   482
thead, tbody { 
patrick@251
   483
  display: table-row-group;
patrick@251
   484
}
patrick@251
   485
patrick@251
   486
tr { 
patrick@251
   487
  display: table-row;
patrick@251
   488
}
patrick@251
   489
patrick@251
   490
td, th {
patrick@251
   491
  display: table-cell;
patrick@251
   492
  border-style: solid;
patrick@251
   493
  border-width: 1px;
patrick@251
   494
  padding: .2em;
patrick@251
   495
}
patrick@251
   496
th {
patrick@251
   497
  font-weight: bold;
patrick@251
   498
}
patrick@251
   499
patrick@251
   500
table > caption {
patrick@251
   501
  display: block;
patrick@251
   502
  font-family: sans-serif;
patrick@251
   503
  font-size: 93%;
patrick@251
   504
  color: #004080;
patrick@251
   505
}
patrick@251
   506
patrick@64
   507
/* media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@64
   508
patrick@68
   509
media {
patrick@108
   510
  margin-top: .5em;
patrick@108
   511
  margin-bottom: 1em;
patrick@108
   512
  padding: 10px;
patrick@108
   513
  border: 1px dashed #7f7f7f;
patrick@108
   514
}
patrick@108
   515
patrick@124
   516
media image, media audio, media video {
patrick@108
   517
  display: block;
patrick@108
   518
  font-family: sans-serif;
patrick@108
   519
}
patrick@111
   520
patrick@111
   521
media caption {
patrick@111
   522
  display: block;
patrick@156
   523
  font-family: sans-serif;
patrick@156
   524
  font-size: 93%;
patrick@156
   525
  color: #004080;
patrick@111
   526
}
patrick@111
   527
media caption:after {
patrick@111
   528
  content: insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@68
   529
}
patrick@68
   530
patrick@111
   531
/* image ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@111
   532
patrick@111
   533
cover image {
patrick@111
   534
  content: concatenate("image('Images/", attr(id), ".png', -480, -360, smooth)");
patrick@111
   535
}
patrick@111
   536
Patrick@187
   537
p image, entry image {
patrick@111
   538
  content: concatenate("image('Images/", attr(id), ".png', -64, -48, smooth)");
patrick@108
   539
  vertical-align: middle;
patrick@108
   540
}
patrick@111
   541
Patrick@187
   542
p image[type="thumbnail"], entry image[type="thumbnail"] {
Patrick@187
   543
  content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)");
Patrick@187
   544
  vertical-align: middle;
Patrick@187
   545
}
Patrick@187
   546
patrick@111
   547
media image:before {
patrick@111
   548
  display: block;
patrick@111
   549
  text-align: left;
patrick@111
   550
  content: concatenate("image('Images/", attr(id), ".png', -480, -360, smooth)")
patrick@111
   551
           insert-button(color, #7f7f7f, icon, icon(pop-down))
patrick@111
   552
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@111
   553
}
patrick@111
   554
media image[type="thumbnail"]:before {
patrick@111
   555
  content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)")
patrick@111
   556
           insert-button(color, #7f7f7f, icon, icon(pop-down))
patrick@111
   557
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@108
   558
}
patrick@108
   559
patrick@111
   560
media image {
patrick@156
   561
  margin-bottom: .3em;
patrick@111
   562
}
patrick@111
   563
patrick@111
   564
image > copyright {
patrick@111
   565
  display: block;
patrick@111
   566
  font-size: 75%;
patrick@68
   567
  font-style: italic;
patrick@68
   568
}
patrick@111
   569
Patrick@174
   570
/* hotspot ~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@122
   571
patrick@122
   572
hotspot {
patrick@122
   573
  display: block;
Patrick@183
   574
  padding: .4em;
Patrick@183
   575
  margin: 0 1em .1em 0; 
patrick@122
   576
  background-color: #ffefd8;
patrick@122
   577
  border-radius: 1.5em;
patrick@122
   578
}
patrick@122
   579
Patrick@176
   580
hotspot image:before {
patrick@122
   581
  content: "";
patrick@122
   582
}
Patrick@176
   583
hotspot > image {
patrick@122
   584
  content: concatenate("image('Images/", attr(id), ".png', -128, -96, smooth)");
patrick@122
   585
}
patrick@122
   586
Patrick@176
   587
hotspot p:before {
Patrick@176
   588
  content: "";
patrick@111
   589
}
Patrick@176
   590
hotspot > p {
patrick@111
   591
  font-family: sans-serif;
patrick@111
   592
  font-size: 85%;
Patrick@183
   593
  margin: 0 .5em 0 .5em;
patrick@111
   594
}
patrick@111
   595
Patrick@176
   596
hotspot:after {
Patrick@174
   597
  display: marker;
Patrick@174
   598
  padding-bottom: .7em;
Patrick@176
   599
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
Patrick@174
   600
}
Patrick@174
   601
patrick@111
   602
/* audio ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@111
   603
patrick@111
   604
audio {
patrick@111
   605
  content: text-field(attribute, id, color, black, font-size, 75%)
patrick@111
   606
           " type : " label(attribute, type, color, black) " "
patrick@111
   607
           set-attribute-button(attribute, type, icon, icon(pop-sw), color, black);
patrick@111
   608
}
patrick@111
   609
media audio {
patrick@111
   610
  content: "Audio : " text-field(attribute, id, color, black)
patrick@111
   611
           " type : " label(attribute, type, color, black) " "
patrick@111
   612
           set-attribute-button(attribute, type, icon, icon(pop-sw), color, black);
patrick@108
   613
}
patrick@68
   614
patrick@64
   615
patrick@124
   616
/* video ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@124
   617
patrick@124
   618
video {
patrick@124
   619
  content: text-field(attribute, id, color, black, font-size, 75%);
patrick@124
   620
}
patrick@124
   621
media video {
patrick@124
   622
  content: "Video : " text-field(attribute, id, color, black);
patrick@124
   623
}
patrick@124
   624
patrick@124
   625
patrick@60
   626
/* Inline level ============================================================ */
patrick@59
   627
patrick@63
   628
/* sup, sub, var ~~~~~~~~~~~~~~~~~~~ */
patrick@62
   629
patrick@156
   630
sup { font-family: sans-serif; vertical-align: super; font-size: 75%; white-space: nowrap; }
patrick@156
   631
sub { font-family: sans-serif; vertical-align: sub;   font-size: 75%; white-space: nowrap; }
patrick@63
   632
var { font-family: sans-serif; font-style: italic; }
patrick@63
   633
patrick@65
   634
/* date ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@65
   635
patrick@65
   636
date[value]:after {
patrick@65
   637
  color: #7f7f7f;
patrick@65
   638
  content: " (" date-picker(attribute, value, columns, 7, color, black, font-size, 75%) ")";
patrick@65
   639
}
patrick@65
   640
head > date[value]:after {
patrick@65
   641
  color: #7f7f7f;
patrick@65
   642
  content: " (" date-picker(attribute, value, columns, 7, color, black, font-size, 75%)
patrick@65
   643
           ") " insert-after-button();
patrick@65
   644
}
patrick@65
   645
patrick@70
   646
/* name ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@70
   647
patrick@70
   648
name { font-family: sans-serif; color: #004080; }
patrick@70
   649
patrick@63
   650
/* note ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@63
   651
Patrick@186
   652
note:before { font-size: 80%; color: #7f7f7f; content: "(Note : "; }
Patrick@186
   653
note { font-family: sans-serif; color: #aeaea0; font-size: 80%; }
Patrick@186
   654
note:after { font-size: 80%; color: #7f7f7f; content: ")"; }
patrick@62
   655
note p { display:inline; }
patrick@62
   656
patrick@90
   657
/* foreign ~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@90
   658
patrick@90
   659
foreign { font-family: sans-serif; font-style: italic; }
patrick@90
   660
patrick@63
   661
/* highlight ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@63
   662
patrick@62
   663
highlight { font-weight: bold; }
patrick@63
   664
Patrick@239
   665
/* emphasis ~~~~~~~~~~~~~~~~~~~~~~~~ */
Patrick@239
   666
Patrick@239
   667
emphasis { font-style: italic; }
Patrick@239
   668
patrick@89
   669
/* mentioned ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@89
   670
Patrick@239
   671
mentioned { font-style: oblique; }
patrick@89
   672
patrick@68
   673
/* term ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@68
   674
patrick@89
   675
term { font-family: sans-serif; }
patrick@68
   676
patrick@63
   677
/* link ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@63
   678
patrick@63
   679
link:before {
patrick@63
   680
  color: #7f7f7f;
patrick@63
   681
  font-family: sans-serif;
patrick@63
   682
  content: "["
patrick@63
   683
}
patrick@63
   684
patrick@63
   685
media link {
patrick@63
   686
  display: block;
patrick@63
   687
}
patrick@63
   688
patrick@63
   689
link:after {
patrick@63
   690
  color: #7f7f7f;
patrick@63
   691
  font-family: sans-serif;
patrick@63
   692
}
patrick@63
   693
link[uri]:after {
patrick@63
   694
  content: " ‣ " text-field(attribute, uri, color, black, font-size, 80%) "]";
patrick@63
   695
}
patrick@63
   696
link[idref]:after {
patrick@63
   697
  content: " ‣ " label(attribute, idref, color, black)
patrick@63
   698
           set-attribute-button(attribute, idref) "]";
patrick@63
   699
}
patrick@63
   700
patrick@106
   701
/* smil ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@106
   702
patrick@106
   703
smil {
patrick@106
   704
  background-color: #ffffc0;
patrick@106
   705
}
Patrick@206
   706
Patrick@206
   707
/* warning ~~~~~~~~~~~~~~~~~~~~~~~~~ */
Patrick@206
   708
Patrick@206
   709
warning {
Patrick@206
   710
  color: red;
Patrick@206
   711
  font-weight: bold;
Patrick@206
   712
}