/* author : Hans Hagen, PRAGMA-ADE, Hasselt NL copyright : PRAGMA ADE / ConTeXt Development Team license : see context related readme files comment : companion to context.mkiv */ /* Because empty div elements are not seen we put a comment in them so that empty table cells etc work ok. We can style individual elements in several ways and we support in this css file meaningful elements as well as divs. If needed you can use the chain field as well as chain elements in the div class for styling groups. \definefloat[myfloata] \definefloat[myfloatb][myfloatbs][figure] div.float.myfloata { } float[detail='myfloata'] { } div.float.myfloatb { } float[detail='myfloatb'] { } div.float.figure { } float[detail='figure'] { } div.float.figure.myfloatb { } float[chain~='figure'][detail='myfloata'] { } div.myfloata { } *[detail='myfloata'] { } div.myfloatb { } *[detail='myfloatb'] { } div.figure { } *[chain~='figure'] { } div.figure.myfloatb { } *[chain~='figure'][detail='myfloatb'] { } Inheritance when using div seems to be stronger so we need to take more precautions. */ @namespace context url('http://www.pragma-ade.com/context/export') ; /* ignore : mixed */ /* metadata : display */ /* extradata: display */ ignore, div.ignore { display : none ; } ignore, div.private { display : none ; } xmetadata, div.xmetadata { display : none ; } xmetavariable, div.xmetavariable { display : none ; } extradata, div.extradata { display : none ; } /* document : display */ document:before, div.document:before { content : attr(title) ; font-size : 44pt ; font-weight : bold ; margin-bottom : 1em ; } document, div.document { font-family : "DejaVu Serif", "Lucida Bright", serif ; font-size : 12pt ; /* line-height : 14.4pt; */ line-height : 2.8ex; max-width : 50em ; padding : 1em ; /* text-align : justify ; */ text-align : justify ; /* hyphens : manual ; */ /* text-justify : inter-word ; */ } document>metadata, div.document div.metadata { font-family : "DejaVu Sans Mono", "Lucida Console", monospace ; margin-bottom : 3ex ; } /* document>metadata>metavariable[name="X"]:before, div.document div.metadata div.metavariable.metaname-X:before { content : "X\00A0\00A0\00A0:\00A0" ; } */ document>metadata, div.document div.metadata { display : flex ; flex-flow : column ; } document>metadata>metavariable:before, div.document div.metadata div.metavariable:before { display : inline ; content : attr(label); width : 8em ; float : left ; font-weight : bold ; } document>metadata>metavariable[name="title"], div.document div.metadata div.metavariable.metaname-title { order : -1 ; display : block ; width : 50em ; float : left ; font-family : "DejaVu Serif", "Lucida Bright", serif ; font-weight : bold ; font-size : 3em ; text-align : left ; margin-bottom : 2ex ; } document>metadata>metavariable[name="title"]:before, div.document div.metadata div.metavariable.metaname-title:before { content : none ; } /* paragraph : mixed */ /* p : mixed */ paragraph, p, div.paragraph, div.p { display : block ; margin-top : 0.5em ; margin-bottom : 0.5em ; } /* break : display */ break, div.break { display : block ; margin-bottom : 0.5em ; } /* construct : inline */ /* highlight : inline */ construct, div.construct { } construct[detail="important"], div.construct.important { font-weight : bold ; } highlight, div.highlight { /* todo: style and color */ display : inline ; } /* section : display */ /* sectiontitle : mixed */ /* sectionnumber : mixed */ /* sectioncontent : display */ section, div.section { display : block ; } sectioncaption, div.sectioncaption { display : block ; text-align : left ; page-break-after : avoid ; margin-top : 3ex ; margin-bottom : 2ex ; } sectioncontent, div.sectioncontent { display : block ; } sectionnumber, div.sectionnumber { display : inline ; margin-right : 1em ; } sectionnumber, div.sectiontitle { display : inline ; } /* we need to use level as selector because section is used twice */ /* chapter | title */ section[detail="chapter"]>sectioncaption, section[detail="title"]>sectioncaption, div.level-2.chapter div.sectioncaption , div.level-2.title div.sectioncaption { font-size : 2em ; font-weight : bold ; } section[detail="chapter"], section[detail="title"], div.level-2.chapter, div.level-2.title { page-break-before : always ; margin-top : 4ex ; } section[detail="chapter"]>sectioncaption>sectionnumber, div.level-2.chapter div.sectioncaption div.sectionnumber { /* nothing */ } section[detail="chapter"]>sectioncaption>sectiontitle, section[detail="title"]>sectioncaption>sectiontitle, div.level-2.chapter div.sectioncaption div.sectiontitle, div.level-2.title div.sectioncaption div.sectiontitle { /* nothing */ } /* section | subject */ section[detail="section"]>sectioncaption, section[detail="subject"]>sectioncaption, div.level-3.section div.sectioncaption, div.level-3.subject div.sectioncaption { font-size : 1.75em ; font-weight : bold ; } section[detail="section"], section[detail="subject"], div.level-3.section, div.level-3.subject { /* nothing */ } section[detail="section"]>sectioncaption>sectionnumber, div.level-3.section div.sectioncaption div.sectionnumber { /* nothing */ } section[detail="section"]>sectioncaption>sectiontitle, section[detail="subject"]>sectioncaption>sectiontitle, div.level-3.section div.sectioncaption div.sectiontitle, div.level-3.subject div.sectioncaption div.sectiontitle { /* nothing */ } /* subsection | subsubject */ section[detail="subsection"]>sectioncaption, section[detail="subsubject"]>sectioncaption, div.level-4.subsection div.sectioncaption, div.level-4.subsubject div.sectioncaption { font-size : 1.5em ; font-weight : bold ; } section[detail="subsection"], section[detail="subsubject"], div.level-4.subsection, div.level-4.subsubject { /* nothing */ } section[detail="subsection"]>sectioncaption>sectionnumber, div.level-4.subsection div.sectioncaption div.sectionnumber { /* nothing */ } section[detail="subsection"]>sectioncaption>sectiontitle, section[detail="subsubject"]>sectioncaption>sectiontitle, div.level-4.subsection div.sectioncaption div.sectiontitle, div.level-4.subsubject div.sectioncaption div.sectiontitle { /* nothing */ } /* subsubsection | subsubsubject */ section[detail="subsubsection"]>sectioncaption, section[detail="subsubsubject"]>sectioncaption, div.level-5.subsubsection div.sectioncaption, div.level-5.subsubsubject div.sectioncaption { font-size : 1.25em ; font-weight : bold ; } section[detail="subsubsection"], section[detail="subsubsubject"], div.level-5.subsubsection, div.level-5.subsubsubject { /* nothing */ } section[detail="subsubsection"]>sectioncaption>sectionnumber, div.level-5.subsubsection div.sectioncaption div.sectionnumber { /* nothing */ } section[detail="subsubsection"]>sectioncaption>sectiontitle, section[detail="subsubsubject"]>sectioncaption>sectiontitle, div.level-5.subsubsection div.sectioncaption div.sectiontitle, div.level-5.subsubsubject div.sectioncaption div.sectiontitle { /* nothing */ } /* summary | subsummary*/ section[detail="summary"], section[detail="subsummary"], div.section.summary, div.section.subsummary { margin-top : 1em ; margin-bottom : 1em ; } section[detail="summary"]>sectioncaption>sectiontitle, div.section.summary div.sectioncaption div.sectiontitle { display : block ; margin-top : 1em ; margin-bottom : 1em ; font-weight : bold ; border-bottom-style : solid ; border-color : rgb(50%,50%,100%) ; border-width : .15em; text-align : left ; } section[detail="subsummary"]>sectioncaption>sectiontitle, div.section.subsummary div.sectioncaption div.sectiontitle { display : block ; margin-top : 1em ; margin-bottom : 1em ; font-weight : bold ; border-color : rgb(50%,50%,100%) ; border-bottom-style : dotted ; border-width : .15em ; text-align : left ; } /* itemgroup : display */ /* item : display */ /* itemtag : mixed */ /* itemcontent : mixed */ /* type : alphabetic ; */ /* suffix : '.' ; */ @counter-style lower-greek { /* css 3 */ type : non-repeating ; glyphs : 'α' 'β' 'γ' 'δ' 'ε' 'ζ' 'η' 'θ' 'ι' 'κ' 'λ' 'μ' 'ν' 'ξ' 'ο' 'π' 'ρ' 'σ' 'τ' 'υ' 'φ' 'χ' 'ψ' 'ω' ; } @counter-style upper-greek { /* css 3 */ type : non-repeating ; glyphs : 'Α' 'B' 'Γ' 'Δ' 'Ε' 'Ζ' 'Η' 'Θ' 'Ι' 'Κ' 'Λ' 'Μ' 'Ν' 'Ξ' 'Ο' 'Π' 'Ρ' 'Σ' 'Τ' 'Υ' 'Φ' 'Χ' 'Ψ' 'Ω' ; } itemgroup, div.itemgroup { display : block ; margin-bottom : 0.5em ; margin-top : 0.5em ; } itemgroup[symbol="1"], div.itemgroup.symbol-1 { list-style-type : disc ; } itemgroup[symbol="2"], div.itemgroup.symbol-2 { list-style-type : square ; } itemgroup[symbol="3"], div.itemgroup.symbol-3 { list-style-type : square ; } itemgroup[symbol="4"], div.itemgroup.symbol-4 { list-style-type : square ; } itemgroup[symbol="5"], div.itemgroup.symbol-5 { list-style-type : circ ; } itemgroup[symbol="a"], div.itemgroup.symbol-a { list-style-type : lower-alpha ; } itemgroup[symbol="A"], div.itemgroup.symbol-A { list-style-type : alpha ; } itemgroup[symbol="r"], div.itemgroup.symbol-r { list-style-type : lower-roman ; } itemgroup[symbol="R"], div.itemgroup.symbol-R { list-style-type : upper-roman ; } itemgroup[symbol="n"], div.itemgroup.symbol-n { list-style-type : decimal ; } itemgroup[symbol="g"], div.itemgroup.symbol-g { list-style-type : lower-greek ; } itemgroup[symbol="G"], div.itemgroup.symbol-G { list-style-type : upper-greek ; } item, div.item { display : list-item ; margin-left : 1em ; margin-bottom : 0.5em ; margin-top : 0.5em ; } itemtag, div.itemtag { display: none ; } itemcontent, div.itemcontent { } /* description : display */ /* descriptiontag : mixed */ /* descriptioncontent : mixed */ /* descriptionsymbol : inline */ description, div.description { display : block ; margin-bottom : 1em ; margin-top : 1em ; } descriptiontag, div.descriptiontag { display : inline ; float : left ; clear : left ; margin-right : 1em ; text-align : left ; font-weight : bold ; } descriptioncontent, div.descriptioncontent { } descriptionsymbol, div.descriptionsymbol { display : inline ; } /* verbatimblock : display */ /* verbatimlines : display */ /* verbatimline : mixed */ /* verbatim : inline */ verbatimblock, div.verbatimblock { background-color : rgb(50%,50%,100%) ; display : block ; padding : 1em ; margin-bottom : 1em ; margin-top : 1em ; font-family : "DejaVu Sans Mono", "Lucida Console", monospace ; } verbatimlines+verbatimlines, div.verbatimlines+div.verbatimlines { display : block ; margin-top : 1em ; } verbatimline, div.verbatimline { display : block ; white-space : pre-wrap ; } verbatim, div.verbatim { display : inline ; white-space : pre-wrap ; color : rgb(60%,60%,0%) ; font-family : "DejaVu Sans Mono", "Lucida Console", monospace ; } /* lines : display */ /* line : mixed */ /* linenumber : inline */ lines, div.lines { display : block ; margin-bottom : 1em ; margin-top : 1em ; } lines+lines, div.lines+div.lines { display : block ; margin-top : 1em ; } line, div.line { display : block ; white-space : pre-wrap ; } linenumber, div.linenumber { display : inline-block ; margin-right : 1em ; width : 3em ; text-align : left ; font-family : "DejaVu Sans Mono", "Lucida Console", monospace ; } /* synonym : inline */ /* sorting : inline */ sorting, synonym, div.sorting, div.synonym { display : inline ; font-variant : small-caps ; } /* register : display */ /* registersection : display */ /* registertag : mixed */ /* registerentries : display */ /* registerentry : mixed */ /* registersee : mixed */ /* registerpages : mixed */ /* registerpage : inline */ /* registerpagerange : mixed */ register, div.register { display: none ; } registerlocation, div.registerlocation { display: inline ; } registerlocation:after, div.registerlocation:after { content : "\25B6\00A0\00A0" ; color : rgb(40%,40%,40%) ; font-size : x-small ; line-height : 0 ; padding-top : 0.5ex ; vertical-align : top ; } /* table : display */ /* tablerow : display */ /* tablecell : mixed */ /* we have a few bonus mappings here */ table, div.table { display : table ; } tablerow, tr div.tablerow, div.tr { display : table-row ; } tablecell[align="middle"], td[align="middle"], div.tablecell.align-middle { display : table-cell ; text-align : center ; padding : .1em ; } tablecell[align="flushleft"], td[align="flushleft"], div.tablecell.align-flushleft { display : table-cell ; text-align : left ; padding : .1em ; } tablecell[align="flushright"], td[align="flushright"], div.tablecell.align-flushright { display : table-cell ; text-align : right ; padding : .1em ; } tablecell, td div.tablecell, div.td { display : table-cell ; text-align : left ; padding : .1em ; } tablehead, div.thead, div.tableheader { display : table-header-group ; } tablefoot, div.tfoot, div.tablefooter { display : table-footer-group ; } tablebody, div.tbody, div.tablebody { display : table-body-group ; } /* tabulate : display */ /* tabulaterow : display */ /* tabulatecell : mixed */ tabulate, div.tabulate { display : table ; margin-top : 1em ; margin-bottom : 1em ; margin-left : 2.5em ; } floatcontent>tabulate, div.floatcontent div.tabulate { margin-left : 0em ; } tabulaterow, div.tabulaterow { display : table-row ; } tabulatecell[align="middle"], div.tabulatecell.align-middle { display : table-cell ; text-align : center ; padding-right : 1em ; } tabulatecell[align="flushleft"], div.tabulatecell.align-flushleft { display : table-cell ; text-align : left ; padding-right : 1em ; } tabulatecell[align="flushright"], div.tabulatecell.align-flushright { display : table-cell ; text-align : right ; padding-right : 1em ; } tabulatecell, div.tabulatecell { display : table-cell ; text-align : left ; padding-right : 1em ; } tabulatecell[kind="strong"], div.tabulatecell.kind-strong { font-weight : bold ; } tabulatecell[kind="equals"]:before, div.tabulatecell.kind-equals:before { display : inline-block ; clear : left ; margin-left : -.6em ; width : .6em ; content : ":" ; } /* A combination needs some processing because it is not a table yet. So, the next mapping is just one row! The tags are a bit confusing now. */ /* combination : display */ /* combinationpair : display */ /* combinationcontent : mixed */ /* combinationcaption : mixed */ combination, div.combination { display : table ; margin-top : 0em ; margin-bottom : 0em ; } combinationpair, combinationtext, div.combinationpair, div.combinationtext { display : table-cell ; padding-right : 1em ; } combinationcontent, div.combinationcontent { display : table-row ; text-align : center ; } combinationcaption, div.combinationcaption { display : table-row ; padding-top : 1ex ; text-align : center ; } /* list : display */ /* listitem : display */ /* listtag : mixed */ /* listcontent : mixed */ /* listdata : mixed */ /* listpage : mixed */ /* listtext : inline */ list, div.list { display : block ; text-align : left ; } listitem[detail="chapter"], div.listitem.chapter { display : block ; margin-top : 1em ; margin-left : 5em ; font-weight : bold ; } listitem[detail="section"], div.listitem.section { display : block ; margin-left : 5em ; } listitem[detail="subsection"], div.listitem.subsection { display : block ; margin-left : 5em ; } /* listitem[detail="subsection"], div.listitem.subsection { display : inline-block ; margin-left : -5em ; } listitem[detail="subsection"]>listtag, div.listitem.subsection div.listtag { margin-right : 1em ; } */ listitem[detail="chapter"]>listtag, div.listitem.chapter > div.listtag { display : inline-block ; margin-left : -5em ; float : left ; clear : left ; } listitem[detail="section"]>listtag, div.listitem.section > div.listtag { display : inline-block ; margin-left : -5em ; float : left ; clear : left ; } listitem[detail="subsection"]>listtag, div.listitem.subsection > div.listtag { display : inline-block ; margin-left : -5em ; float : left ; clear : left ; } listcontent, div.listcontent { display : inline ; } listdata, div.listdata { display : inline ; } listpage, div.listpage { display : none ; } listtext, div.listtext { display : inline ; } /* delimitedblock : display */ /* delimited : inline */ /* delimitedsymbol : inline */ /* delimitedcontent : inline */ /* subsentence : inline */ /* subsentencesymbol : inline */ /* subsentencecontent : inline */ /* :lang(en) */ delimited[detail="quotation"]:before, delimitedblock[detail="quotation"]:before, div.delimited.quotation:before, div.delimitedblock.quotation:before { /* content : "\201C" ; */ font-style : italic ; } delimited[detail="quotation"]:after, delimitedblock[detail="quotation"]:after, div.delimited.quotation:after, div.delimitedblock.quotation:after { /* content : "\201D" ; */ font-style : italic ; } delimited[detail="quote"]:before, delimitedblock[detail="quote"]:before, div.delimited.quote:before, div.delimitedblock.quote:before { /* content : "\2018" ; */ font-style : italic ; } delimited[detail="quote"]:after, delimitedblock[detail="quote"]:after, div.delimited.quote:after, div.delimitedblock.quote:after { /* content : "\2019" ; */ font-style : italic ; } delimited, div.delimited { display : inline } delimitedcontent, div.delimitedcontent { display : inline } delimitedsymbol, div.delimitedsymbol { display : inline } delimitedblock, div.delimitedblock { display : block } subsentence:before, subsentence:after, div.subsentence:before, div.subsentence:after { content : "\2014" ; } subsentence, div.subsentence { display : inline } subsentencecontent, div.subsentencecontent { display : inline } subsentencesymbol, div.subsentencesymbol { display : inline } /* label : mixed */ /* number : mixed */ /* float : display */ /* floatcaption : mixed */ /* floatlabel : inline */ /* floatnumber : inline */ /* floattext : mixed */ /* floatcontent : mixed */ float, div.float { display : block ; margin-top : 1em ; margin-bottom : 1em ; margin-left : 2.5em ; } floatcaption, div.floatcaption { display : block ; margin-top : 0.5em ; color : rgb(60%,60%,0%) ; } floatlabel, div.floatlabel { display : inline-block ; font-weight : bold ; margin-right : 0.25em ; } floatnumber, div.floatnumber { display : inline ; font-weight : bold ; margin-right : 0.25em ; } floattext, div.floattext { display : inline ; } floatcontent, div.floatcontent { } /* image : mixed */ /* mpgraphic : mixed */ /* image { display : block ; background : url(hacker.jpg) ; background-size : 100% auto ; width : 8.992cm ; height : 5.994cm ; } */ mpgraphic:before, div.mpgraphic:before { /* does not work with empty element */ content : "[runtime metapost graphic]" ; } mpgraphic, div.mpgraphic { display : inline ; } /* formula : display */ /* subformula : display */ /* formulaset : display */ /* formulacaption : mixed */ /* formulalabel : mixed */ /* formulanumber : mixed */ /* formulacontent : display */ formula, div.formula { xdisplay : block ; display : table ; margin-top : 1em ; margin-bottom : 1em ; margin-left : 2.5em ; } subformula, div.subformula { /* todo */ display : block ; margin-top : 1em ; margin-bottom : 1em ; margin-left : 2.5em ; } formulaset, div.formulaset { /* todo */ display : block ; margin-top : 1em ; margin-bottom : 1em ; margin-left : 2.5em ; } formulacaption, div.formulacaption { /* todo */ xdisplay : block ; display : table-cell ; margin-top : 0.5em ; padding-left : 2em ; color : rgb(60%,60%,0%) ; } formulalabel, div.formulalabel { display : inline ; font-weight : bold ; margin-right : .25em ; } formulanumber, div.formulanumber { display : inline ; font-weight : bold ; margin-left : 0em ; } formulacontent, div.formulacontent { xdisplay : block ; display : table-cell ; margin-left : 0em ; } link, div.link { display : inline ; } /* margintextblock : inline */ /* margintext : inline */ margintext, div.margintext { display : block ; font-weight : bold ; margin-top : 1em ; margin-bottom : 1em ; } margintext:before, div.margintext:before { content : "\25B6\00A0\00A0" ; color : rgb(40%,40%,40%) ; } /* math : inline | display */ /* mn : mixed */ /* mi : mixed */ /* mo : mixed */ /* ms : mixed */ /* mrow : display */ /* msubsup : display */ /* msub : display */ /* msup : display */ /* merror : mixed */ /* munderover : display */ /* munder : display */ /* mover : display */ /* mtext : mixed */ /* mfrac : display */ /* mroot : display */ /* msqrt : display */ /* mfenced : display */ /* maction : display */ /* mtable : display */ /* mtr : display */ /* mtd : display */ div.math-inline { display : inline ; vertical-align : 0 ; /* this will be set directly */ } div.math-display { display : block ; margin : 1ex 0ex 1em 3em ; } /* publication : inline */ /* pubfld : inline */ publication, div.publication { display : inline ; } pubfld[detail="title"], div.pubfld.title { display : inline ; font-weight : italic ; } /* quantity : inline */ /* unit : inline */ /* number : inline */ quantity, div.quantity { display : inline-block ; } quantity>unit, div.quantity>div.unit { display : inline ; } quantity>number, div.quantity>div.number { display : inline ; } /* sub : inline */ /* sup : inline */ /* subsup : inline */ sup, div.sup { display : inline-block ; font-size : xx-small ; vertical-align : super ; } sub, div.sub { display : inline-block ; font-size : xx-small ; vertical-align : sub ; } subsup>sup, div.subsup>div.sup { display : inline ; vertical-align : top ; } subsup>sub, div.subsup>div.sub { display : inline ; vertical-align : bottom ; } /* links */ div[href]:hover { color : rgb(50%,0%,0%) ; background-color : rgb(85%,85%,85%) ; } /* setups */ setup, div.setup { display : block ; } comment, div.comment { background-color : rgb(50%,75%,100%) ; display : block ; padding : 1em ; margin-bottom : 2ex ; margin-top : 2ex ; font-family : "DejaVu Sans Mono", "Lucida Console", monospace ; } /* blocks */ block, div.block { display : block ; } /* special */ c, div.c { display : inline ; } warning, div.warning { display : none ; }