From f26a7f86b10197d011f0084765564d332e19e14f Mon Sep 17 00:00:00 2001 From: Shaun McCance Date: Fri, 16 Oct 2020 11:21:13 -0400 Subject: Put some CSS in separate tmpl files with simple substitutions This will make it a lot easier for people to work on the theming without digging into XSLT files. --- configure.ac | 1 + doc/yelp-xsl/C/db2html.page | 1 + doc/yelp-xsl/C/db2xhtml.page | 1 + doc/yelp-xsl/C/mal2html.page | 1 + doc/yelp-xsl/C/mal2xhtml.page | 1 + doc/yelp-xsl/C/tmpl.file.page | 59 +++ doc/yelp-xsl/C/tmpl.page | 53 ++ doc/yelp-xsl/C/tmpl.text.page | 56 +++ xslt/common/Makefile.am | 3 +- xslt/common/css/Makefile.am | 8 + xslt/common/css/core.css.tmpl | 241 +++++++++ xslt/common/css/elements.css.tmpl | 584 ++++++++++++++++++++++ xslt/common/css/syntax.css.tmpl | 51 ++ xslt/common/html.xsl | 994 +++----------------------------------- xslt/common/tmpl.xsl | 162 +++++++ xslt/dita/html/dita2xhtml.xsl | 1 + xslt/docbook/html/db2xhtml.xsl | 1 + xslt/mallard/html/mal2xhtml.xsl | 1 + 18 files changed, 1278 insertions(+), 941 deletions(-) create mode 100644 doc/yelp-xsl/C/tmpl.file.page create mode 100644 doc/yelp-xsl/C/tmpl.page create mode 100644 doc/yelp-xsl/C/tmpl.text.page create mode 100644 xslt/common/css/Makefile.am create mode 100644 xslt/common/css/core.css.tmpl create mode 100644 xslt/common/css/elements.css.tmpl create mode 100644 xslt/common/css/syntax.css.tmpl create mode 100644 xslt/common/tmpl.xsl diff --git a/configure.ac b/configure.ac index b4083651..5470bacc 100644 --- a/configure.ac +++ b/configure.ac @@ -63,6 +63,7 @@ doc/yelp-xsl/Makefile po/Makefile.in xslt/Makefile xslt/common/Makefile +xslt/common/css/Makefile xslt/common/domains/Makefile xslt/common/icons/Makefile xslt/docbook/Makefile diff --git a/doc/yelp-xsl/C/db2html.page b/doc/yelp-xsl/C/db2html.page index 947fd00e..6338afaf 100644 --- a/doc/yelp-xsl/C/db2html.page +++ b/doc/yelp-xsl/C/db2html.page @@ -6,6 +6,7 @@ + diff --git a/doc/yelp-xsl/C/db2xhtml.page b/doc/yelp-xsl/C/db2xhtml.page index 7966de28..6be5e007 100644 --- a/doc/yelp-xsl/C/db2xhtml.page +++ b/doc/yelp-xsl/C/db2xhtml.page @@ -6,6 +6,7 @@ + diff --git a/doc/yelp-xsl/C/mal2html.page b/doc/yelp-xsl/C/mal2html.page index 481f2699..ff738cb0 100644 --- a/doc/yelp-xsl/C/mal2html.page +++ b/doc/yelp-xsl/C/mal2html.page @@ -7,6 +7,7 @@ + diff --git a/doc/yelp-xsl/C/mal2xhtml.page b/doc/yelp-xsl/C/mal2xhtml.page index 4ae4d1bc..47b08cab 100644 --- a/doc/yelp-xsl/C/mal2xhtml.page +++ b/doc/yelp-xsl/C/mal2xhtml.page @@ -7,6 +7,7 @@ + diff --git a/doc/yelp-xsl/C/tmpl.file.page b/doc/yelp-xsl/C/tmpl.file.page new file mode 100644 index 00000000..5d4179b7 --- /dev/null +++ b/doc/yelp-xsl/C/tmpl.file.page @@ -0,0 +1,59 @@ + + + + + + Perform text substitutions on a file. + + + tmpl.file + + Parameters + + + <code>$file</code> +

The filename of the file to process for substitutions.

+ + + <code>$node</code> +

The node to create CSS for.

+ + + <code>$direction</code> +

The directionality of the text, either ltr or rtl.

+ + + <code>$left</code> +

The starting alignment, either left or right.

+ + + <code>$right</code> +

The ending alignment, either left or right.

+ + + +

This template reads the file specified by the $file parameter and performs + text substitutions. Due to XSLT limitations, the file must be a well-formed + XML document. However, this template simply takes the string value of the + document, so it is sufficient to wrap the text in a dummy element and ensure + any < and & characters are escaped.

+

See tmpl for information on the substitution syntax.

+ +

This template was added in version 40.

+ + + Calls Templates + +

+ + +

+ + +

+ + +

+ + + diff --git a/doc/yelp-xsl/C/tmpl.page b/doc/yelp-xsl/C/tmpl.page new file mode 100644 index 00000000..1715bc39 --- /dev/null +++ b/doc/yelp-xsl/C/tmpl.page @@ -0,0 +1,53 @@ + + + + + Perform simple substitutions in text files. + + + Text Templates +

This stylesheet contains templates to perform simple substitutions on text + and files containing text. The primary purpose of these templates is to allow + CSS and JavaScript to be maintained in separate files outside the XSLT, but + still allow those files to reference variables for things like color themes + and text directionality.

+

The substitution evaluates anything between {{ and }}. Usually, this will + be a reference to a parameter or variable, but it can be any XPath expression. + For example, {{$color.fg}} will be replaced with the primary text color.

+

This syntax is similar to XSLT attribute value templates, except that it uses + double curly braces to avoid conflicts with the many curly braces used in CSS + and JavaScript files.

+ +

This stylesheet was added in version 40.

+ + + Imports Stylesheets + + + Includes Stylesheets + + + Defines Parameters + + + Defines Keys + + + Defines Templates + + + Defines Modes + + + Calls Templates + +

+ + +

+ + +

+ + + diff --git a/doc/yelp-xsl/C/tmpl.text.page b/doc/yelp-xsl/C/tmpl.text.page new file mode 100644 index 00000000..4f4f5901 --- /dev/null +++ b/doc/yelp-xsl/C/tmpl.text.page @@ -0,0 +1,56 @@ + + + + + + Perform text substitutions on some text. + + + tmpl.text + + Parameters + + + <code>$text</code> +

The text to process for substitutions.

+ + + <code>$node</code> +

The node to create CSS for.

+ + + <code>$direction</code> +

The directionality of the text, either ltr or rtl.

+ + + <code>$left</code> +

The starting alignment, either left or right.

+ + + <code>$right</code> +

The ending alignment, either left or right.

+ + + +

This template performs text substitutions on the text in $text. It is called + by tmpl.file, and it calls itself recursively after each substitution.

+

See tmpl for information on the substitution syntax.

+ +

This template was added in version 40.

+ + + Calls Templates + +

+ + +

+ + +

+ + +

+ + + diff --git a/xslt/common/Makefile.am b/xslt/common/Makefile.am index 33ab76c9..60230754 100644 --- a/xslt/common/Makefile.am +++ b/xslt/common/Makefile.am @@ -1,4 +1,4 @@ -SUBDIRS = domains icons +SUBDIRS = css domains icons xsldir=$(datadir)/yelp-xsl/xslt/common @@ -8,6 +8,7 @@ xsl_DATA = \ l10n.xsl \ l10n-numbers.xsl \ html.xsl \ + tmpl.xsl \ ttml.xsl \ utils.xsl diff --git a/xslt/common/css/Makefile.am b/xslt/common/css/Makefile.am new file mode 100644 index 00000000..de375bd4 --- /dev/null +++ b/xslt/common/css/Makefile.am @@ -0,0 +1,8 @@ +cssdir=$(datadir)/yelp-xsl/xslt/common/css + +css_DATA = \ + core.css.tmpl \ + elements.css.tmpl \ + syntax.css.tmpl + +EXTRA_DIST=$(css_DATA) diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl new file mode 100644 index 00000000..daede214 --- /dev/null +++ b/xslt/common/css/core.css.tmpl @@ -0,0 +1,241 @@ + +html { height: 100%; } +body { + font-family: sans-serif; + margin: 0; padding: 0; + background-color: {{$color.bg}}; + color: {{$color.fg}}; + direction: {{$direction}}; +} +article, aside, nav, header, footer, section { + display: block; + margin: 0; + padding: 0; +} +main { + display: flex; + flex-flow: row; +} +main > * { + flex: 0 0 220px; +} +main > div.page { + flex-grow: 1; + margin: 0; + display: flex; + flex-flow: column; + align-items: stretch; + justify-content: flex-start; + min-height: 100vh; +} +div.page > article { flex: 1 0 auto; } +div.page > header, div.page > footer { flex: 0 1 auto; } +.pagewide { + max-width: 940px; + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; +} +aside.sidebar { + width: 300px; + padding: 20px 10px; + background: {{$color.bg.gray}} +} +aside.sidebar-right { order: 3; } +aside.sidebar section { margin-top: 0; } +aside.sidebar * { margin-bottom: 20px; } +aside.sidebar section > div.inner > div.hgroup { + border-bottom: none; +} +aside.sidebar section h2 { + font-size: 1em; + margin-bottom: 0; +} +article { + padding-top: 10px; + padding-bottom: 10px; + min-height: 20em; + background-color: {{$color.bg}}; +} +section { + margin-top: 2.4em; + clear: both; +} +section section { + margin-top: 1.44em; +} +.yelp-hash-highlight { + animation-name: yelp-hash-highlight; + animation-duration: 0.5s; + animation-fill-mode: forwards; +} +@keyframes yelp-hash-highlight { + from { transform: translateY(0px) } + 25% { transform: translateY(20px); } + 50% { transform: translateY(0); } + 75% { transform: translateY(10px); } + to { transform: translateY(0px); } +} +div.trails { + margin: 0 -10px 0 -10px; + padding: 0.2em 10px; + background-color: {{$color.bg.gray}}; +} +div.trail { + margin: 0.2em 0; + padding: 0 1em 0 1em; + text-indent: -1em; + color: {{$color.fg.dark}}; +} +a.trail { white-space: nowrap; } +div.hgroup { + margin-bottom: 0.5em; + color: {{$color.fg.dark}}; +} +section > div.inner > div.hgroup { + margin-top: 0; + border-bottom: solid 1px {{$color.gray}}; +} +section.links > div.inner > div.hgroup { + border-bottom: solid 2px {{$color.fg.blue}}; +} +section section.links > div.inner > div.hgroup { + border: none; +} +h1, h2, h3, h4, h5, h6, h7 { + margin: 0; padding: 0; + font-weight: normal; +} +h1 { font-size: 2.4em; } +h2 { font-size: 1.72em; } +h3.title, h4.title, h5.title, h6.title, h7.title { font-size: 1.44em; } +h3, h4, h5, h6, h7 { font-size: 1em; } +p { line-height: 1.44em; } +div, pre, p { margin: 0; padding: 0; } +div.contents > * + *, +th > * + *, td > * + *, +dt > * + *, dd > * + *, +li > * + * { margin-top: 1em; } +p img { vertical-align: middle; } +p.lead { font-size: 1.2em; } +div.clear { + margin: 0; padding: 0; + height: 0; line-height: 0; + clear: both; +} +.center { text-align: center; } + +footer.about { margin: 0; } +footer.about > div.inner > div.hgroup { + margin: 0; padding: 0; + text-align: center; + border: none; +} +footer.about > div.inner > div.hgroup > h2 { + margin: 0; padding: 0.2em; + font-size: inherit; +} +footer.about.ui-expander > div.inner > div.hgroup span.title:before { + content: ""; +} +div.copyrights { + max-width: 700px; + text-align: center; + padding: 10px; + margin: 0 auto; +} +div.copyright { margin: 0; } +div.credits { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + max-width: 720px; + margin: 0 auto; +} +div.credits > * { + vertical-align: top; + text-align: left; + flex: 1 0 220px; + margin: 0; + padding: 10px; +} +div.credits > *:empty { padding: 0 10px; height: 0; } +ul.credits, ul.credits li { + margin: 0; padding: 0; + list-style-type: none; +} +ul.credits li { + margin-{{$left}}: 1em; + text-indent: -1em; +} +div.license { + max-width: 700px; + margin: 0 auto; + padding: 10px; +} + +table { + border-collapse: collapse; + border-color: {{$color.gray}}; + border-width: 1px; +} +td, th { + padding: 0.5em; + vertical-align: top; + border-color: {{$color.gray}}; + border-width: 1px; +} +thead td, thead th, tfoot td, tfoot th { + font-weight: bold; + color: {{$color.fg.dark}}; + background-color: {{$color.bg.dark}}; +} +th { + text-align: {{$left}}; + font-weight: bold; + color: {{$color.fg.dark}}; +} + +ul, ol, dl { margin: 0; padding: 0; } +li { + margin: 1em 0 0 0; + margin-{{$left}}: 2.4em; + padding: 0; +} +li:first-child { margin-top: 0; } +@media (max-width: 480px) { + li { + margin-{{$left}}: 1.44em; + } +} +dt { margin-top: 1em; } +dt:first-child { margin-top: 0; } +dt + dt { margin-top: 0; } +dd { + margin: 0.2em 0 0 0; + margin-{{$left}}: 1.44em; +} +dd + dd { margin-top: 1em; } +ol.compact li { margin-top: 0.2em; } +ul.compact li { margin-top: 0.2em; } +ol.compact li:first-child { margin-top: 0; } +ul.compact li:first-child { margin-top: 0; } +dl.compact dt { margin-top: 0.2em; } +dl.compact dt:first-child { margin-top: 0; } +dl.compact dt + dt { margin-top: 0; } + +a { + text-decoration: none; + color: {{$color.fg.blue}}; +} +a:visited { color: {{$color.fg.purple}}; } +a:hover { + border-bottom: dotted 1px {{$color.fg.blue}}; +} +p a { + border-bottom: dotted 1px {{$color.fg.blue}}; +} +a img { border: none; } + diff --git a/xslt/common/css/elements.css.tmpl b/xslt/common/css/elements.css.tmpl new file mode 100644 index 00000000..0432f80d --- /dev/null +++ b/xslt/common/css/elements.css.tmpl @@ -0,0 +1,584 @@ + +.yelp-svg-fill { + fill: {{$color.fg.dark}}; +} +.yelp-svg-stroke { + stroke: {{$color.fg.dark}}; +} +div.title { + margin: 0 0 0.2em 0; + font-weight: bold; + color: {{$color.fg.dark}}; +} +div.title h1, div.title h2, div.title h3, div.title h4, div.title h5, div.title h6 { + margin: 0; + font-size: inherit; + font-weight: inherit; + color: inherit; +} +div.desc { margin: 0 0 0.2em 0; } +div.contents + div.desc { margin: 0.2em 0 0 0; } +pre.contents { + padding: 0.5em 1em 0.5em 1em; +} +div.links-center { text-align: center; } +div.links .desc { color: {{$color.fg.gray}}; } +div.links > div.inner > div.region > div.desc { font-style: italic; } +div.links ul { margin: 0; padding: 0; } +div.links ul ul { + margin-{{$left}}: 1em; +} +li.links { + margin: 0.5em 0 0.5em 0; + padding: 0; + list-style-type: none; +} +li.links-head { + margin-top: 1em; + color: {{$color.fg.gray}}; + border-bottom: solid 1px {{$color.gray}}; +} +div.sectionlinks { + display: inline-block; + padding: 0 1em 0 1em; + background-color: {{$color.bg.blue}}; + border: solid 1px {{$color.fg.blue}}; +} +div.sectionlinks ul { margin: 0; } +div.sectionlinks li { padding: 0; } +div.sectionlinks div.title { margin: 0.5em 0 0.5em 0; } +div.sectionlinks div.sectionlinks { + display: block; + margin: 0.5em 0 0 0; + padding: 0; + border: none; +} +div.sectionlinks div.sectionlinks li { + padding-{{$left}}: 1.44em; +} +nav.prevnext { clear: both; } +div.region > nav.prevnext, div.region + nav.prevnext { margin-top: 1em; } +nav.prevnext > div.inner { float: {{$right}}; } +nav.prevnext > div.inner > * { + background-color: {{$color.bg.gray}}; + display: inline-block; + position: relative; + height: 1.44em; + padding: 0.2em 0.83em 0 0.83em; + margin-bottom: 1em; + border: solid 1px {{$color.gray}}; +} +nav.prevnext > div.inner > span { visibility: hidden; } +nav.prevnext > div.inner > a + a { + border-{{$left}}: none; +} +nav.prevnext > div.inner > a:first-child { + border-top-{{$left}}-radius: 2px; + border-bottom-{{$left}}-radius: 2px; +} +nav.prevnext > div.inner > a:last-of-type { + border-top-{{$right}}-radius: 2px; + border-bottom-{{$right}}-radius: 2px; +} +div.serieslinks { + display: inline-block; + padding: 0 1em 0 1em; + background-color: {{$color.bg.blue}}; + border: solid 1px {{$color.fg.blue}}; +} +div.serieslinks ul { margin: 0; } +div.serieslinks li { padding: 0; } +div.serieslinks div.title { margin: 0.5em 0 0.5em 0; } +pre.numbered { + margin: 0; + padding: 0.5em; + float: {{$left}}; + margin-{{$right}}: 0.5em; + text-align: {{$right}}; + color: {{$color.fg.gray}}; + background-color: {{$color.bg.yellow}}; +} +div.code { + border: solid 1px {{$color.gray}}; +} +div.example { + border-{{$left}}: solid 4px {{$color.gray}}; + padding-{{$left}}: 1em; +} +div.example > div.inner > div.region > div.desc { font-style: italic; } +div.figure { + display: inline-block; + max-width: 100%; + margin-{{$left}}: 1.72em; +} +div.figure > div.inner { + padding: 4px; + color: {{$color.fg.dark}}; + border: solid 1px {{$color.gray}}; + background-color: {{$color.bg.gray}}; +} +@media (max-width: 960px) { + div.figure { + margin-{{$left}}: 0; + } +} +a.figure-zoom { + float: {{$right}}; +} +a.figure-zoom:hover { border-bottom: none; } +a.figure-zoom:hover .yelp-svg-fill { fill: {{$color.blue}}; } +a.figure-zoom:hover .yelp-svg-stroke { stroke: {{$color.blue}}; } +a.figure-zoom .figure-zoom-out { display: none; } +a.figure-zoom.figure-zoomed .figure-zoom-in { display: none; } +a.figure-zoom.figure-zoomed .figure-zoom-out { display: inline-block; } +div.figure > div.inner > div.region > div.contents { + margin: 0; + padding: 0.5em 1em 0.5em 1em; + clear: both; + text-align: center; + color: {{$color.fg}}; + border: solid 1px {{$color.gray}}; + background-color: {{$color.bg}}; +} +div.list > div.inner > div.title { margin-bottom: 0.5em; } +div.listing > div.inner { margin: 0; padding: 0; } +div.listing > div.inner > div.region > div.desc { font-style: italic; } +div.note { + padding: 6px; + border: solid 1px {{$color.bg.dark}}; + background-color: {{$color.bg.gray}}; + display: flex; + flex-flow: row; +} +div.note > * { margin: 0 6px; padding: 0; min-height: 24px; min-width: 24px; } +div.note-warning > svg .yelp-svg-fill { + fill: {{$color.red}}; +} +div.note-danger { + border-color: {{$color.red}}; +} +div.note-important > svg .yelp-svg-fill { + fill: {{$color.blue}}; +} +div.note-danger > svg .yelp-svg-fill { + fill: {{$color.red}}; + animation-name: yelp-note-danger; + animation-duration: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; +} +@keyframes yelp-note-danger { + from { fill: {{$color.red}} } + 50% { fill: {{$color.gray}} } + to { fill: {{$color.red}} } +} +div.note-sidebar { + float: {{$right}}; + max-width: 206px; + margin-{{$left}}: 20px; + padding: 6px; +} +div.quote { + padding: 0; + min-height: {{$icons.size.quote}}px; +} + +div.quote > div.inner > div.title { + margin: 0; + margin-{{$left}}: {{$icons.size.quote}}px; +} +blockquote { + margin: 0; padding: 0; + margin-{{$left}}: {{$icons.size.quote}}px; +} +blockquote > *:first-child { margin-top: 0; } +div.quote > div.inner > div.region > div.cite { + margin-top: 0.5em; + margin-{{$left}}: {{$icons.size.quote}}px; + color: {{$color.fg.gray}}; +} +div.quote > div.inner > div.region > div.cite::before { + + content: '― '; + color: {{$color.fg.gray}}; +} +div.screen { + background-color: {{$color.bg.gray}}; + border: solid 1px {{$color.gray}}; +} +ol.steps, ul.steps { + padding: 0.5em 1em 0.5em 1em; + border: solid 1px {{$color.bg.gray}}; + border-{{$left}}: solid 4px {{$color.yellow}}; +} +ol.steps .steps { + padding: 0; + border: none; + background-color: unset; +} +li.steps { margin-{{$left}}: 1.44em; } +li.steps li.steps { margin-{{$left}}: 2.4em; } +div.synopsis > div.inner > div.region > div.contents, +div.synopsis > div.contents, div.synopsis > pre.contents { + padding: 0.5em 1em 0.5em 1em; + border-top: solid 1px; + border-bottom: solid 1px; + border-color: {{$color.fg.blue}}; + background-color: {{$color.bg.gray}}; +} +div.synopsis > div.inner > div.region > div.desc { font-style: italic; } +div.synopsis div.code { + background: unset; + border: none; + padding: 0; +} +div.synopsis div.code > pre.contents { margin: 0; padding: 0; } +div.unknown > div.inner > div.region > div.desc { font-style: italic; } +div.table > div.desc { font-style: italic; } +tr.shade { + background-color: {{$color.bg.gray}}; +} +td.shade { + background-color: {{$color.bg.gray}}; +} +tr.shade td.shade { + background-color: {{$color.bg.dark}}; +} + +span.app { font-style: italic; } +span.cmd { + font-family: monospace,monospace; font-size: 0.83em; + background-color: {{$color.bg.gray}}; + padding: 0 0.2em 0 0.2em; +} +span.cmd span.cmd { background-color: unset; padding: 0; } +pre span.cmd { background-color: unset; padding: 0; } +span.code { + font-family: monospace,monospace; font-size: 0.83em; + border-bottom: solid 1px {{$color.bg.dark}}; +} +span.code span.code { border: none; } +pre span.code { border: none; } +span.em { font-style: italic; } +span.em-bold { + font-style: normal; font-weight: bold; + color: {{$color.fg.dark}}; +} +a span.em-bold { + color: {{$color.fg.blue}}; +} +pre span.error { + color: {{$color.fg.red}}; +} +span.file { font-family: monospace,monospace; font-size: 0.83em; } +span.gui, span.guiseq { color: {{$color.fg.dark}}; } +a span.gui, a span.guiseq { color: {{$color.fg.blue}}; } +span.input { font-family: monospace,monospace; font-size: 0.83em; } +pre span.input { + font-weight: bold; + color: {{$color.fg.dark}}; +} +kbd { + font-family: inherit; + font-size: inherit; + color: {{$color.fg.dark}}; + background-color: {{$color.bg.gray}}; + border: solid 1px {{$color.gray}}; + border-radius: 2px; + margin: 0 0.2em 0 0.2em; + padding: 0.2em 0.5em 0 0.5em; + white-space: nowrap; +} +kbd.key-Fn { + font-weight: bold; + color: {{$color.fg.blue}}; +} +span.key a { + border-bottom: none; +} +a kbd { + color: {{$color.fg.blue}}; + border-color: {{$color.fg.blue}}; +} +span.keyseq { + color: {{$color.fg.dark}}; + white-space: nowrap +} +a span.keyseq { color: {{$color.fg.blue}}; } +span.output { font-family: monospace,monospace; font-size: 0.83em; } +pre span.output { + color: {{$color.fg}}; +} +pre span.prompt { + color: {{$color.fg.dark}}; +} +span.sys { font-family: monospace,monospace; font-size: 0.83em; } +span.var { font-style: italic; } + +.ui-tile-img .media-controls { display: none; } +span.media-audio, span.media-video { display: inline-block; } +audio, video { display: block; margin: 0; } +div.media > div.inner { display: inline-block; text-align: center; } +.media-controls { + height: 30px; + margin: 0; padding: 0; + border-left: solid 1px {{$color.fg}}; + border-right: solid 1px {{$color.fg}}; + border-bottom: solid 1px {{$color.fg}}; + background-color: {{$color.fg.dark}}; + color: {{$color.bg}}; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + display: flex; + align-items: center; +} +.media-controls > * { + flex: 0 1 auto; +} +.media-controls > input.media-range { + flex: 1 0 auto; + background-color: {{$color.fg.dark}}; + margin: 0 10px; + -webkit-appearance: none; +} +input.media-range::-webkit-slider-runnable-track { + height: 4px; + background: {{$color.fg.gray}}; + border-radius: 2px; +} +input.media-range::-webkit-slider-thumb { + -webkit-appearance: none; + height: 16px; + width: 16px; + border-radius: 8px; + background: {{$color.bg.dark}}; + border: solid 1px {{$color.fg.dark}}; + margin-top: -6px; +} +input.media-range::-webkit-slider-thumb:hover, +input.media-range::-webkit-slider-thumb:focus { + background: {{$color.bg.gray}}; +} +input.media-range::-moz-range-track { + height: 4px; + background: {{$color.fg.gray}}; + border-radius: 2px; +} +input.media-range::-moz-range-thumb { + -webkit-appearance: none; + height: 16px; + width: 16px; + border-radius: 8px; + background: {{$color.bg.dark}}; + border: solid 1px {{$color.fg.dark}}; + margin-top: -6px; +} +.media-controls-audio { + border-top: solid 1px {{$color.fg}}; + border-radius: 4px; +} +button.media-play { + height: 30px; + padding: 0 6px 0 6px; line-height: 0; + background-color: {{$color.fg.dark}}; + border: none; + border-{{$right}}: solid 1px {{$color.fg}}; +} +button.media-play:hover, button.media-play:focus { + background-color: {{$color.fg.blue}}; +} +button.media-play .yelp-svg-fill { fill: {{$color.bg.gray}}; } +button.media-play .media-pause { display: none; } +button.media-play-playing .media-play { display: none; } +button.media-play-playing .media-pause { display: inline; } +.media-time { + margin: 0; + font-size: 16px; + height: 30px; + line-height: 30px; +} +.media-time > span { + padding-{{$right}}: 8px; +} +.media-duration { + font-size: 12px; + color: {{$color.bg.dark}}; + opacity: 0.8; +} +.media-controls-ttml { + min-width: 630px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +div.media-ttml { + margin: 0; padding: 6px 0; + background-color: {{$color.bg.gray}}; + border: solid 1px {{$color.fg}}; + min-height: 24px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.media-ttml-pre { white-space: pre; } +.media-ttml-nopre { white-space: normal; } +div.media-ttml-div { + text-align: {{$left}}; + display: none; + margin: 0; padding: 0; +} +div.media-ttml-p { + text-align: {{$left}}; + display: none; + margin: 0 auto; + max-width: 560px; + line-height: 1.44em; +} +div.media-ttml-div > * + * { margin-top: 1em; } +div.yelp-data { display: none; } +.ui-expander > div.inner > div.title span.title, +.ui-expander > div.inner > div.hgroup span.title { + cursor: default; +} +.ui-expander > div.inner > div.title span.title:before, +.ui-expander > div.inner > div.hgroup span.title:before { + font-weight: bold; + content: "⌃"; + display: inline-block; + margin: 0; + color: {{$color.fg.blue}}; + transform: translateY(0.2em) rotate(0deg); + -webkit-transform: translateY(0.2em) rotate(0deg); + transition: transform 0.2s linear; + transform-origin: 50% 30%; + -webkit-transform-origin: 50% 30%; + -webkit-transition: -webkit-transform 0.2s linear; + margin: 0 0.2em; +} +.ui-expander-c > div.inner > div.hgroup { border-bottom: none; } + +.ui-expander > div.inner > div.title:hover, +.ui-expander > div.inner > div.hgroup:hover * { + color: {{$color.fg.blue}}; +} +.ui-expander > div.inner > div.hgroup > .subtitle { + margin-{{$left}}: 2em; +} +.ui-expander-c > div.inner > div.region { + display: none; +} +.ui-expander-e > div.inner > div.region { + animation-name: yelp-ui-expander-e; + animation-duration: 0.2s; + animation-fill-mode: forwards; + transform-origin: 0 0; +} +@keyframes yelp-ui-expander-e { + from { transform: scaleY(0); } + to { transform: scaleY(1); } +} +div.ui-expander-preview > div.inner > div.region { + transform-origin: 0 0; + transition: transform 0.2s linear, background-color 0.2s linear; + animation-name: none; +} +div.ui-expander-preview.ui-expander-c > div.inner { + max-height: 100px; + overflow: hidden; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region { + display: block; + transform: scaleY(0.4); + background-color: {{$color.bg.gray}}; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover { + background-color: {{$color.bg.blue}}; + cursor: zoom-in; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover * { + cursor: zoom-in; +} +div.ui-expander-preview > div.inner > div.region > * { + transform-origin: 0 0; + transition: transform 0.2s linear; +} +div.ui-expander-preview.ui-expander-c > div.inner > div.region > * { + transform: scaleX(0.4); +} +section.ui-expander-preview > div.inner > div.region > div.contents{ + transform-origin: 0 0; + transition: transform 0.2s linear, background-color 0.2s linear; +} +section.ui-expander-preview.ui-expander-c > div.inner { + max-height: 140px; + overflow: hidden; +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region { + display: block; +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents { + transform: scaleY(0.6); + background-color: {{$color.bg.gray}}; +} +section.ui-expander-preview > div.inner > div.region > div.contents > * { + transform-origin: 0 0; + transition: transform 0.2s linear; +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents > * { + transform: scaleX(0.6); +} +section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents:hover { + background-color: {{$color.bg.blue}}; + cursor: zoom-in; +} +@media only screen and (max-width: 480px) { + article > div.region > div.contents > div.example, + article > div.region > section > div.inner > div.region > div.contents > div.example { + margin-left: -10px; + margin-right: -10px; + } + div.example { + padding-{{$left}}: 6px; + padding-{{$right}}: 10px; + } + article > div.region > div.contents > div.note, + article > div.region > section > div.inner > div.region > div.contents > div.note { + margin-left: -10px; + margin-right: -10px; + padding-left: 10px; + padding-right: 10px; + } + article > div.region > div.contents > div.note, + article > div.region > section > div.inner > div.region > div.contents > div.note { + border-left: none; + border-right: none; + } + div.note-sidebar { + float: none; + max-width: none; + margin-left: inherit; + margin-right: inherit; + padding-left: inherit; + padding-right: inherit; + } + div.note-sidebar > div.inner > div.title, + div.note-sidebar > div.inner > div.region > div.contents { + margin-left: 10px; + margin-right: 10px; + } + article > div.region > div.contents > div.steps, + article > div.region > section > div.inner > div.region > div.contents > div.steps { + margin-left: -10px; + margin-right: -10px; + } + div.steps > div.inner > div.title { + margin-left: 10px; + margin-right: 10px; + } + ol.steps, ul.steps { + padding: 0; + padding-{{$left}}: 6px; + padding-{{$right}}: 10px; + } +} + diff --git a/xslt/common/css/syntax.css.tmpl b/xslt/common/css/syntax.css.tmpl new file mode 100644 index 00000000..eac3f9d7 --- /dev/null +++ b/xslt/common/css/syntax.css.tmpl @@ -0,0 +1,51 @@ + +.hljs a { + color: inherit; + border-bottom: dotted 1px {{$color.fg.blue}}; +} +.hljs a:hover, .hljs a:hover * { color: {{$color.fg.blue}}; } +.hljs-addition { + color: {{$color.fg.green}}; + background-color: {{$color.bg.green}}; +} +.hljs-deletion { + color: {{$color.fg.red}}; + background-color: {{$color.bg.red}}; +} +.hljs-emphasis { font-style: italic; } +.hljs-strong { font-weight: bold; } +.hljs-attr { color: {{$color.fg.blue}}; } +.hljs-attribute { color: {{$color.fg.yellow}}; } +.hljs-built_in { color: {{$color.fg.orange}}; } +.hljs-bullet { color: {{$color.fg.green}}; } +.hljs-class { } +.hljs-code { color: {{$color.fg.dark}}; } +.hljs-comment { color: {{$color.fg.gray}}; } +.hljs-doctag { } +.hljs-formula { color: {{$color.fg.dark}}; } +.hljs-function { } +.hljs-keyword { color: {{$color.fg.purple}}; } +.hljs-link { color: {{$color.fg.orange}}; } +.hljs-literal { color: {{$color.fg.orange}}; } +.hljs-meta { color: {{$color.fg.orange}}; } +.hljs-name { color: {{$color.fg.red}}; } +.hljs-number { color: {{$color.fg.orange}}; } +.hljs-params { color: {{$color.fg.orange}}; } +.hljs-quote { color: {{$color.fg.gray}}; } +.hljs-regexp { color: {{$color.fg.red}}; } +.hljs-rest_arg { } +.hljs-section { color: {{$color.fg.blue}}; } +.hljs-string { color: {{$color.fg.green}}; } +.hljs-subst { } +.hljs-symbol { color: {{$color.fg.green}}; } +.hljs-tag { color: {{$color.fg.red}}; } +.hljs-title { color: {{$color.fg.blue}}; } +.hljs-type { } +.hljs-variable { } +.hljs-selector-attr { } +.hljs-selector-class { color: {{$color.fg.red}}; } +.hljs-selector-id { color: {{$color.fg.red}}; } +.hljs-selector-tag { color: {{$color.fg.purple}}; } +.hljs-template-tag { } +.hljs-template-variable { } + diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl index 2dc349b1..453d205c 100644 --- a/xslt/common/html.xsl +++ b/xslt/common/html.xsl @@ -1239,254 +1239,13 @@ All parameters can be automatically computed if not provided. - -html { height: 100%; } -body { - font-family: sans-serif; - margin: 0; padding: 0; - background-color: - ; - color: - ; - direction: ; -} -article, aside, nav, header, footer, section { - display: block; - margin: 0; - padding: 0; -} -main { - display: flex; - flex-flow: row; -} -main > * { - flex: 0 0 220px; -} -main > div.page { - flex-grow: 1; - margin: 0; - display: flex; - flex-flow: column; - align-items: stretch; - justify-content: flex-start; - min-height: 100vh; -} -div.page > article { flex: 1 0 auto; } -div.page > header, div.page > footer { flex: 0 1 auto; } -.pagewide { - max-width: 940px; - margin-left: auto; - margin-right: auto; - padding-left: 10px; - padding-right: 10px; -} -aside.sidebar { - width: 300px; - padding: 20px 10px; - background: -} -aside.sidebar-right { order: 3; } -aside.sidebar section { margin-top: 0; } -aside.sidebar * { margin-bottom: 20px; } -aside.sidebar section > div.inner > div.hgroup { - border-bottom: none; -} -aside.sidebar section h2 { - font-size: 1em; - margin-bottom: 0; -} -article { - padding-top: 10px; - padding-bottom: 10px; - min-height: 20em; - background-color: ; -} -section { - margin-top: 2.4em; - clear: both; -} -section section { - margin-top: 1.44em; -} -.yelp-hash-highlight { - animation-name: yelp-hash-highlight; - animation-duration: 0.5s; - animation-fill-mode: forwards; -} -@keyframes yelp-hash-highlight { - from { transform: translateY(0px) } - 25% { transform: translateY(20px); } - 50% { transform: translateY(0); } - 75% { transform: translateY(10px); } - to { transform: translateY(0px); } -} -div.trails { - margin: 0 -10px 0 -10px; - padding: 0.2em 10px; - background-color: ; -} -div.trail { - margin: 0.2em 0; - padding: 0 1em 0 1em; - text-indent: -1em; - color: ; -} -a.trail { white-space: nowrap; } -div.hgroup { - margin-bottom: 0.5em; - color: ; -} -section > div.inner > div.hgroup { - margin-top: 0; - border-bottom: solid 1px - ; -} -section.links > div.inner > div.hgroup { - border-bottom: solid 2px - ; -} -section section.links > div.inner > div.hgroup { - border: none; -} -h1, h2, h3, h4, h5, h6, h7 { - margin: 0; padding: 0; - font-weight: normal; -} -h1 { font-size: 2.4em; } -h2 { font-size: 1.72em; } -h3.title, h4.title, h5.title, h6.title, h7.title { font-size: 1.44em; } -h3, h4, h5, h6, h7 { font-size: 1em; } -p { line-height: 1.44em; } -div, pre, p { margin: 0; padding: 0; } -div.contents > * + *, -th > * + *, td > * + *, -dt > * + *, dd > * + *, -li > * + * { margin-top: 1em; } -p img { vertical-align: middle; } -p.lead { font-size: 1.2em; } -div.clear { - margin: 0; padding: 0; - height: 0; line-height: 0; - clear: both; -} -.center { text-align: center; } - -footer.about { margin: 0; } -footer.about > div.inner > div.hgroup { - margin: 0; padding: 0; - text-align: center; - border: none; -} -footer.about > div.inner > div.hgroup > h2 { - margin: 0; padding: 0.2em; - font-size: inherit; -} -footer.about.ui-expander > div.inner > div.hgroup span.title:before { - content: ""; -} -div.copyrights { - max-width: 700px; - text-align: center; - padding: 10px; - margin: 0 auto; -} -div.copyright { margin: 0; } -div.credits { - display: flex; - flex-flow: row wrap; - align-items: stretch; - justify-content: flex-start; - max-width: 720px; - margin: 0 auto; -} -div.credits > * { - vertical-align: top; - text-align: left; - flex: 1 0 220px; - margin: 0; - padding: 10px; -} -div.credits > *:empty { padding: 0 10px; height: 0; } -ul.credits, ul.credits li { - margin: 0; padding: 0; - list-style-type: none; -} -ul.credits li { - margin-: 1em; - text-indent: -1em; -} -div.license { - max-width: 700px; - margin: 0 auto; - padding: 10px; -} - -table { - border-collapse: collapse; - border-color: ; - border-width: 1px; -} -td, th { - padding: 0.5em; - vertical-align: top; - border-color: ; - border-width: 1px; -} -thead td, thead th, tfoot td, tfoot th { - font-weight: bold; - color: ; - background-color: ; -} -th { - text-align: ; - font-weight: bold; - color: ; -} - -ul, ol, dl { margin: 0; padding: 0; } -li { - margin: 1em 0 0 0; - margin-: 2.4em; - padding: 0; -} -li:first-child { margin-top: 0; } -@media (max-width: 480px) { - li { - margin-: 1.44em; - } -} -dt { margin-top: 1em; } -dt:first-child { margin-top: 0; } -dt + dt { margin-top: 0; } -dd { - margin: 0.2em 0 0 0; - margin-: 1.44em; -} -dd + dd { margin-top: 1em; } -ol.compact li { margin-top: 0.2em; } -ul.compact li { margin-top: 0.2em; } -ol.compact li:first-child { margin-top: 0; } -ul.compact li:first-child { margin-top: 0; } -dl.compact dt { margin-top: 0.2em; } -dl.compact dt:first-child { margin-top: 0; } -dl.compact dt + dt { margin-top: 0; } - -a { - text-decoration: none; - color: ; -} -a:visited { color: - ; } -a:hover { - border-bottom: dotted 1px - ; -} -p a { - border-bottom: dotted 1px - ; -} -a img { border: none; } - + + + + + + + @@ -1524,211 +1283,21 @@ All parameters can be automatically computed if not provided. - -.yelp-svg-fill { - fill: ; -} -.yelp-svg-stroke { - stroke: ; -} -div.title { - margin: 0 0 0.2em 0; - font-weight: bold; - color: ; -} -div.title h1, div.title h2, div.title h3, div.title h4, div.title h5, div.title h6 { - margin: 0; - font-size: inherit; - font-weight: inherit; - color: inherit; -} -div.desc { margin: 0 0 0.2em 0; } -div.contents + div.desc { margin: 0.2em 0 0 0; } -pre.contents { - padding: 0.5em 1em 0.5em 1em; -} -div.links-center { text-align: center; } -div.links .desc { color: ; } -div.links > div.inner > div.region > div.desc { font-style: italic; } -div.links ul { margin: 0; padding: 0; } -div.links ul ul { - margin-: 1em; -} -li.links { - margin: 0.5em 0 0.5em 0; - padding: 0; - list-style-type: none; -} -li.links-head { - margin-top: 1em; - color: ; - border-bottom: solid 1px ; -} -div.sectionlinks { - display: inline-block; - padding: 0 1em 0 1em; - background-color: - ; - border: solid 1px - ; -} -div.sectionlinks ul { margin: 0; } -div.sectionlinks li { padding: 0; } -div.sectionlinks div.title { margin: 0.5em 0 0.5em 0; } -div.sectionlinks div.sectionlinks { - display: block; - margin: 0.5em 0 0 0; - padding: 0; - border: none; -} -div.sectionlinks div.sectionlinks li { - padding-: 1.44em; -} -nav.prevnext { clear: both; } -div.region > nav.prevnext, div.region + nav.prevnext { margin-top: 1em; } -nav.prevnext > div.inner { float: ; } -nav.prevnext > div.inner > * { - background-color: ; - display: inline-block; - position: relative; - height: 1.44em; - padding: 0.2em 0.83em 0 0.83em; - margin-bottom: 1em; - border: solid 1px ; -} -nav.prevnext > div.inner > span { visibility: hidden; } -nav.prevnext > div.inner > a + a { - border-: none; -} -nav.prevnext > div.inner > a:first-child { - border-top--radius: 2px; - border-bottom--radius: 2px; -} -nav.prevnext > div.inner > a:last-of-type { - border-top--radius: 2px; - border-bottom--radius: 2px; -} -div.serieslinks { - display: inline-block; - padding: 0 1em 0 1em; - background-color: - ; - border: solid 1px - ; -} -div.serieslinks ul { margin: 0; } -div.serieslinks li { padding: 0; } -div.serieslinks div.title { margin: 0.5em 0 0.5em 0; } -pre.numbered { - margin: 0; - padding: 0.5em; - float: ; - margin-: 0.5em; - text-align: ; - color: ; - background-color: - ; -} -div.code { - border: solid 1px - ; -} -div.example { - border-: solid 4px - ; - padding-: 1em; -} -div.example > div.inner > div.region > div.desc { font-style: italic; } -div.figure { - display: inline-block; - max-width: 100%; - margin-: 1.72em; -} -div.figure > div.inner { - padding: 4px; - color: - ; - border: solid 1px - ; - background-color: - ; -} -@media (max-width: 960px) { - div.figure { - margin-: 0; - } -} -a.figure-zoom { - float: ; -} -a.figure-zoom:hover { border-bottom: none; } -a.figure-zoom:hover .yelp-svg-fill { fill: - ; } -a.figure-zoom:hover .yelp-svg-stroke { stroke: - ; } -a.figure-zoom .figure-zoom-out { display: none; } -a.figure-zoom.figure-zoomed .figure-zoom-in { display: none; } -a.figure-zoom.figure-zoomed .figure-zoom-out { display: inline-block; } -div.figure > div.inner > div.region > div.contents { - margin: 0; - padding: 0.5em 1em 0.5em 1em; - clear: both; - text-align: center; - color: - ; - border: solid 1px - ; - background-color: - ; -} -div.list > div.inner > div.title { margin-bottom: 0.5em; } -div.listing > div.inner { margin: 0; padding: 0; } -div.listing > div.inner > div.region > div.desc { font-style: italic; } -div.note { - padding: 6px; - border: solid 1px - ; - background-color: - ; - display: flex; - flex-flow: row; -} -div.note > * { margin: 0 6px; padding: 0; min-height: 24px; min-width: 24px; } -div.note-warning > svg .yelp-svg-fill { - fill: ; -} -div.note-danger { - border-color: ; -} -div.note-important > svg .yelp-svg-fill { - fill: ; -} -div.note-danger > svg .yelp-svg-fill { - fill: ; - animation-name: yelp-note-danger; - animation-duration: 2s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; -} -@keyframes yelp-note-danger { - from { fill: } - 50% { fill: } - to { fill: } -} -div.note-sidebar { - float: ; - max-width: 206px; - margin-: 20px; - padding: 6px; -} -div.quote { - padding: 0; - min-height: - px; -} -div.quote > div.inner:before { - float: ; - content: ' + + + + + + + + + @@ -1738,6 +1307,9 @@ div.quote > div.inner:before { + div.quote > div.inner:before { float: + + content: ' « @@ -1751,10 +1323,10 @@ div.quote > div.inner:before { “ - '; + + '; font-family: "Century Schoolbook L"; - font-size: - px; + font-size: {{$icons.size.quote}}px; font-weight: bold; line-height: @@ -1766,441 +1338,25 @@ div.quote > div.inner:before { em; margin: 0; padding: 0; - height: - px; - width: - px; + height: {{$icons.size.quote}}px; + width: {{$icons.size.quote}}px; text-align: center; - color: - ; -} -div.quote > div.inner > div.title { - margin: 0; - margin-: - px; -} -blockquote { - margin: 0; padding: 0; - margin-: - px; -} -blockquote > *:first-child { margin-top: 0; } -div.quote > div.inner > div.region > div.cite { - margin-top: 0.5em; - margin-: - px; - color: ; -} -div.quote > div.inner > div.region > div.cite::before { - - content: '― '; - color: ; -} -div.screen { - background-color: - ; - border: solid 1px - ; -} -ol.steps, ul.steps { - padding: 0.5em 1em 0.5em 1em; - border: solid 1px ; - border-: solid 4px - ; -} -ol.steps .steps { - padding: 0; - border: none; - background-color: unset; -} -li.steps { margin-: 1.44em; } -li.steps li.steps { margin-: 2.4em; } -div.synopsis > div.inner > div.region > div.contents, -div.synopsis > div.contents, div.synopsis > pre.contents { - padding: 0.5em 1em 0.5em 1em; - border-top: solid 1px; - border-bottom: solid 1px; - border-color: - ; - background-color: - ; -} -div.synopsis > div.inner > div.region > div.desc { font-style: italic; } -div.synopsis div.code { - background: unset; - border: none; - padding: 0; -} -div.synopsis div.code > pre.contents { margin: 0; padding: 0; } -div.unknown > div.inner > div.region > div.desc { font-style: italic; } -div.table > div.desc { font-style: italic; } -tr.shade { - background-color: ; -} -td.shade { - background-color: ; -} -tr.shade td.shade { - background-color: ; -} - -span.app { font-style: italic; } -span.cmd { - font-family: monospace,monospace; font-size: 0.83em; - background-color: - ; - padding: 0 0.2em 0 0.2em; -} -span.cmd span.cmd { background-color: unset; padding: 0; } -pre span.cmd { background-color: unset; padding: 0; } -span.code { - font-family: monospace,monospace; font-size: 0.83em; - border-bottom: solid 1px ; -} -span.code span.code { border: none; } -pre span.code { border: none; } -span.em { font-style: italic; } -span.em-bold { - font-style: normal; font-weight: bold; - color: ; -} -a span.em-bold { - color: ; -} -pre span.error { - color: ; -} -span.file { font-family: monospace,monospace; font-size: 0.83em; } -span.gui, span.guiseq { color: - ; } -a span.gui, a span.guiseq { color: - ; } -span.input { font-family: monospace,monospace; font-size: 0.83em; } -pre span.input { - font-weight: bold; - color: ; -} -kbd { - font-family: inherit; - font-size: inherit; - color: - ; - background-color: - ; - border: solid 1px - ; - border-radius: 2px; - margin: 0 0.2em 0 0.2em; - padding: 0.2em 0.5em 0 0.5em; - white-space: nowrap; -} -kbd.key-Fn { - font-weight: bold; - color: - ; -} -span.key a { - border-bottom: none; -} -a kbd { - color: ; - border-color: ; -} -span.keyseq { - color: - ; - white-space: nowrap -} -a span.keyseq { color: - ; } -span.output { font-family: monospace,monospace; font-size: 0.83em; } -pre span.output { - color: ; -} -pre span.prompt { - color: ; -} -span.sys { font-family: monospace,monospace; font-size: 0.83em; } -span.var { font-style: italic; } - -.ui-tile-img .media-controls { display: none; } -span.media-audio, span.media-video { display: inline-block; } -audio, video { display: block; margin: 0; } -div.media > div.inner { display: inline-block; text-align: center; } -.media-controls { - height: 30px; - margin: 0; padding: 0; - border-left: solid 1px ; - border-right: solid 1px ; - border-bottom: solid 1px ; - background-color: ; - color: ; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - display: flex; - align-items: center; -} -.media-controls > * { - flex: 0 1 auto; -} -.media-controls > input.media-range { - flex: 1 0 auto; - background-color: ; - margin: 0 10px; - -webkit-appearance: none; -} -input.media-range::-webkit-slider-runnable-track { - height: 4px; - background: ; - border-radius: 2px; -} -input.media-range::-webkit-slider-thumb { - -webkit-appearance: none; - height: 16px; - width: 16px; - border-radius: 8px; - background: ; - border: solid 1px ; - margin-top: -6px; -} -input.media-range::-webkit-slider-thumb:hover, -input.media-range::-webkit-slider-thumb:focus { - background: ; -} -input.media-range::-moz-range-track { - height: 4px; - background: ; - border-radius: 2px; -} -input.media-range::-moz-range-thumb { - -webkit-appearance: none; - height: 16px; - width: 16px; - border-radius: 8px; - background: ; - border: solid 1px ; - margin-top: -6px; -} -.media-controls-audio { - border-top: solid 1px ; - border-radius: 4px; -} -button.media-play { - height: 30px; - padding: 0 6px 0 6px; line-height: 0; - background-color: ; - border: none; - border-: solid 1px - ; -} -button.media-play:hover, button.media-play:focus { - background-color: ; -} -button.media-play .yelp-svg-fill { fill: - ; } -button.media-play .media-pause { display: none; } -button.media-play-playing .media-play { display: none; } -button.media-play-playing .media-pause { display: inline; } -.media-time { - margin: 0; - font-size: 16px; - height: 30px; - line-height: 30px; -} -.media-time > span { - padding-: 8px; -} -.media-duration { - font-size: 12px; - color: ; - opacity: 0.8; -} -.media-controls-ttml { - min-width: 630px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -div.media-ttml { - margin: 0; padding: 6px 0; - background-color: ; - border: solid 1px ; - min-height: 24px; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; -} -.media-ttml-pre { white-space: pre; } -.media-ttml-nopre { white-space: normal; } -div.media-ttml-div { - text-align: ; - display: none; - margin: 0; padding: 0; -} -div.media-ttml-p { - text-align: ; - display: none; - margin: 0 auto; - max-width: 560px; - line-height: 1.44em; -} -div.media-ttml-div > * + * { margin-top: 1em; } -div.yelp-data { display: none; } -.ui-expander > div.inner > div.title span.title, -.ui-expander > div.inner > div.hgroup span.title { - cursor: default; -} -.ui-expander > div.inner > div.title span.title:before, -.ui-expander > div.inner > div.hgroup span.title:before { - font-weight: bold; - content: "⌃"; - display: inline-block; - margin: 0; - color: ; - transform: translateY(0.2em) rotate(0deg); - -webkit-transform: translateY(0.2em) rotate(0deg); - transition: transform 0.2s linear; - transform-origin: 50% 30%; - -webkit-transform-origin: 50% 30%; - -webkit-transition: -webkit-transform 0.2s linear; - margin: 0 0.2em; -} -.ui-expander-c > div.inner > div.hgroup { border-bottom: none; } -.ui-expander-e > div.inner > div.title span.title:before, -.ui-expander-e > div.inner > div.hgroup span.title:before { - - - transform: translateY(0.2em) rotate(-180deg); - -webkit-transform: translateY(0.2em) rotate(-180deg); - - - transform: translateY(0.2em) rotate(180deg); - -webkit-transform: translateY(0.2em) rotate(180deg); - -} -.ui-expander > div.inner > div.title:hover, -.ui-expander > div.inner > div.hgroup:hover * { - color: ; -} -.ui-expander > div.inner > div.hgroup > .subtitle { - margin-: 2em; -} -.ui-expander-c > div.inner > div.region { - display: none; -} -.ui-expander-e > div.inner > div.region { - animation-name: yelp-ui-expander-e; - animation-duration: 0.2s; - animation-fill-mode: forwards; - transform-origin: 0 0; -} -@keyframes yelp-ui-expander-e { - from { transform: scaleY(0); } - to { transform: scaleY(1); } -} -div.ui-expander-preview > div.inner > div.region { - transform-origin: 0 0; - transition: transform 0.2s linear, background-color 0.2s linear; - animation-name: none; -} -div.ui-expander-preview.ui-expander-c > div.inner { - max-height: 100px; - overflow: hidden; -} -div.ui-expander-preview.ui-expander-c > div.inner > div.region { - display: block; - transform: scaleY(0.4); - background-color: ; -} -div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover { - background-color: ; - cursor: zoom-in; -} -div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover * { - cursor: zoom-in; -} -div.ui-expander-preview > div.inner > div.region > * { - transform-origin: 0 0; - transition: transform 0.2s linear; -} -div.ui-expander-preview.ui-expander-c > div.inner > div.region > * { - transform: scaleX(0.4); -} -section.ui-expander-preview > div.inner > div.region > div.contents{ - transform-origin: 0 0; - transition: transform 0.2s linear, background-color 0.2s linear; -} -section.ui-expander-preview.ui-expander-c > div.inner { - max-height: 140px; - overflow: hidden; -} -section.ui-expander-preview.ui-expander-c > div.inner > div.region { - display: block; -} -section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents { - transform: scaleY(0.6); - background-color: ; -} -section.ui-expander-preview > div.inner > div.region > div.contents > * { - transform-origin: 0 0; - transition: transform 0.2s linear; -} -section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents > * { - transform: scaleX(0.6); -} -section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents:hover { - background-color: ; - cursor: zoom-in; -} -@media only screen and (max-width: 480px) { - article > div.region > div.contents > div.example, - article > div.region > section > div.inner > div.region > div.contents > div.example { - margin-left: -10px; - margin-right: -10px; - } - div.example { - padding-: 6px; - padding-: 10px; - } - article > div.region > div.contents > div.note, - article > div.region > section > div.inner > div.region > div.contents > div.note { - margin-left: -10px; - margin-right: -10px; - padding-left: 10px; - padding-right: 10px; - } - article > div.region > div.contents > div.note, - article > div.region > section > div.inner > div.region > div.contents > div.note { - border-left: none; - border-right: none; - } - div.note-sidebar { - float: none; - max-width: none; - margin-left: inherit; - margin-right: inherit; - padding-left: inherit; - padding-right: inherit; - } - div.note-sidebar > div.inner > div.title, - div.note-sidebar > div.inner > div.region > div.contents { - margin-left: 10px; - margin-right: 10px; - } - article > div.region > div.contents > div.steps, - article > div.region > section > div.inner > div.region > div.contents > div.steps { - margin-left: -10px; - margin-right: -10px; - } - div.steps > div.inner > div.title { - margin-left: 10px; - margin-right: 10px; - } - ol.steps, ul.steps { - padding: 0; - padding-: 6px; - padding-: 10px; - } -} - + color: {{$color.bg.dark}}; +} + + .ui-expander-e > div.inner > div.title span.title:before, + .ui-expander-e > div.inner > div.hgroup span.title:before { + + + transform: translateY(0.2em) rotate(-180deg); + + + transform: translateY(0.2em) rotate(180deg); + + + } @@ -2239,56 +1395,14 @@ All parameters can be automatically computed if not provided. -.hljs a { - color: inherit; - border-bottom: dotted 1px ; -} -.hljs a:hover, .hljs a:hover * { color: ; } -.hljs-addition { - color: ; - background-color: ; -} -.hljs-deletion { - color: ; - background-color: ; -} -.hljs-emphasis { font-style: italic; } -.hljs-strong { font-weight: bold; } -.hljs-attr { color: ; } -.hljs-attribute { color: ; } -.hljs-built_in { color: ; } -.hljs-bullet { color: ; } -.hljs-class { } -.hljs-code { color: ; } -.hljs-comment { color: ; } -.hljs-doctag { } -.hljs-formula { color: ; } -.hljs-function { } -.hljs-keyword { color: ; } -.hljs-link { color: ; } -.hljs-literal { color: ; } -.hljs-meta { color: ; } -.hljs-name { color: ; } -.hljs-number { color: ; } -.hljs-params { color: ; } -.hljs-quote { color: ; } -.hljs-regexp { color: ; } -.hljs-rest_arg { } -.hljs-section { color: ; } -.hljs-string { color: ; } -.hljs-subst { } -.hljs-symbol { color: ; } -.hljs-tag { color: ; } -.hljs-title { color: ; } -.hljs-type { } -.hljs-variable { } -.hljs-selector-attr { } -.hljs-selector-class { color: ; } -.hljs-selector-id { color: ; } -.hljs-selector-tag { color: ; } -.hljs-template-tag { } -.hljs-template-variable { } - + + + + + + + + diff --git a/xslt/common/tmpl.xsl b/xslt/common/tmpl.xsl new file mode 100644 index 00000000..4df8e1ed --- /dev/null +++ b/xslt/common/tmpl.xsl @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/xslt/dita/html/dita2xhtml.xsl b/xslt/dita/html/dita2xhtml.xsl index 869b0010..e18c8cff 100644 --- a/xslt/dita/html/dita2xhtml.xsl +++ b/xslt/dita/html/dita2xhtml.xsl @@ -30,6 +30,7 @@ REMARK: Describe this module + diff --git a/xslt/docbook/html/db2xhtml.xsl b/xslt/docbook/html/db2xhtml.xsl index bc12a788..a6238984 100644 --- a/xslt/docbook/html/db2xhtml.xsl +++ b/xslt/docbook/html/db2xhtml.xsl @@ -32,6 +32,7 @@ DocBook documents into XHTML. This stylesheet sets the parameter + diff --git a/xslt/mallard/html/mal2xhtml.xsl b/xslt/mallard/html/mal2xhtml.xsl index 9f54a663..f84ca976 100644 --- a/xslt/mallard/html/mal2xhtml.xsl +++ b/xslt/mallard/html/mal2xhtml.xsl @@ -37,6 +37,7 @@ and {ttml.features}. + -- cgit v1.2.1 From 16a890af7de8fe55f7cafeb3200b47e6b41c3649 Mon Sep 17 00:00:00 2001 From: Shaun McCance Date: Fri, 16 Oct 2020 11:53:48 -0400 Subject: Some doc updates for text templates --- doc/yelp-xsl/C/html.css.core.page | 33 ++++---------------- doc/yelp-xsl/C/html.css.elements.page | 54 ++++----------------------------- doc/yelp-xsl/C/html.css.syntax.page | 36 ++++------------------ doc/yelp-xsl/C/html.page | 57 ++--------------------------------- doc/yelp-xsl/C/tmpl.file.page | 2 +- doc/yelp-xsl/C/tmpl.page | 2 +- doc/yelp-xsl/C/tmpl.text.page | 2 +- xslt/common/html.xsl | 12 ++++++++ xslt/common/tmpl.xsl | 6 ++-- 9 files changed, 39 insertions(+), 165 deletions(-) diff --git a/doc/yelp-xsl/C/html.css.core.page b/doc/yelp-xsl/C/html.css.core.page index 374ca1eb..fa25af26 100644 --- a/doc/yelp-xsl/C/html.css.core.page +++ b/doc/yelp-xsl/C/html.css.core.page @@ -33,34 +33,10 @@ common spacings for block-level elements like paragraphs and lists, defines styles for links, and defines four common wrapper divs: header, side, body, and footer.

+

This template uses text templates to keep the actual CSS content in a + separate file, css/core.css.tmpl, and do simple param substitutions. + This makes it easier to update the CSS without working with XSLT.

All parameters can be automatically computed if not provided.

- - Calls Parameters - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - Calls Templates @@ -72,5 +48,8 @@

+ +

+ diff --git a/doc/yelp-xsl/C/html.css.elements.page b/doc/yelp-xsl/C/html.css.elements.page index 8e2a48fd..4da538ff 100644 --- a/doc/yelp-xsl/C/html.css.elements.page +++ b/doc/yelp-xsl/C/html.css.elements.page @@ -33,55 +33,10 @@ the simpler element names from Mallard, although there some class names which are not taken from Mallard. Stylesheets which convert to HTML should use the appropriate common classes.

+

This template uses text templates to keep the actual CSS content in a + separate file, css/elements.css.tmpl, and do simple param substitutions. + This makes it easier to update the CSS without working with XSLT.

All parameters can be automatically computed if not provided.

- - Calls Parameters - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - Calls Templates @@ -96,5 +51,8 @@

+ +

+ diff --git a/doc/yelp-xsl/C/html.css.syntax.page b/doc/yelp-xsl/C/html.css.syntax.page index 1b95d85d..32cafba7 100644 --- a/doc/yelp-xsl/C/html.css.syntax.page +++ b/doc/yelp-xsl/C/html.css.syntax.page @@ -33,39 +33,12 @@ is broken up into chunks and wrapped in HTML elements with particular classes. This template outputs CSS to match those elements and style them with the built-in themeable colors from color.

+

This template uses text templates to keep the actual CSS content in a + separate file, css/syntax.css.tmpl, and do simple param substitutions. + This makes it easier to update the CSS without working with XSLT.

All parameters can be automatically computed if not provided.

Calls Parameters - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

- - -

-

@@ -81,5 +54,8 @@

+ +

+ diff --git a/doc/yelp-xsl/C/html.page b/doc/yelp-xsl/C/html.page index 5edd6d26..b148fca8 100644 --- a/doc/yelp-xsl/C/html.page +++ b/doc/yelp-xsl/C/html.page @@ -33,66 +33,15 @@ Calls Parameters - -

- - -

- - -

-

- -

- - -

- - -

- - -

- - -

- - -

-

- -

- - -

- - -

- - -

- - -

- - -

-

- -

- - -

-

@@ -111,9 +60,6 @@

- -

- Calls Templates @@ -135,6 +81,9 @@

+ +

+ Calls Modes diff --git a/doc/yelp-xsl/C/tmpl.file.page b/doc/yelp-xsl/C/tmpl.file.page index 5d4179b7..8cfb8206 100644 --- a/doc/yelp-xsl/C/tmpl.file.page +++ b/doc/yelp-xsl/C/tmpl.file.page @@ -4,7 +4,7 @@ Perform text substitutions on a file. - + tmpl.file diff --git a/doc/yelp-xsl/C/tmpl.page b/doc/yelp-xsl/C/tmpl.page index 1715bc39..f0419a63 100644 --- a/doc/yelp-xsl/C/tmpl.page +++ b/doc/yelp-xsl/C/tmpl.page @@ -3,7 +3,7 @@ Perform simple substitutions in text files. - + Text Templates

This stylesheet contains templates to perform simple substitutions on text diff --git a/doc/yelp-xsl/C/tmpl.text.page b/doc/yelp-xsl/C/tmpl.text.page index 4f4f5901..375e9ece 100644 --- a/doc/yelp-xsl/C/tmpl.text.page +++ b/doc/yelp-xsl/C/tmpl.text.page @@ -4,7 +4,7 @@ Perform text substitutions on some text. - + tmpl.text diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl index 453d205c..17778344 100644 --- a/xslt/common/html.xsl +++ b/xslt/common/html.xsl @@ -1222,6 +1222,10 @@ common spacings for block-level elements like paragraphs and lists, defines styles for links, and defines four common wrapper divs: `header`, `side`, `body`, and `footer`. +This template uses text templates to keep the actual CSS content in a +separate file, `css/core.css.tmpl`, and do simple param substitutions. +This makes it easier to update the CSS without working with XSLT. + All parameters can be automatically computed if not provided. --> @@ -1266,6 +1270,10 @@ the simpler element names from Mallard, although there some class names which are not taken from Mallard. Stylesheets which convert to HTML should use the appropriate common classes. +This template uses text templates to keep the actual CSS content in a +separate file, `css/elements.css.tmpl`, and do simple param substitutions. +This makes it easier to update the CSS without working with XSLT. + All parameters can be automatically computed if not provided. --> @@ -1377,6 +1385,10 @@ is broken up into chunks and wrapped in HTML elements with particular classes. This template outputs CSS to match those elements and style them with the built-in themeable colors from {color}. +This template uses text templates to keep the actual CSS content in a +separate file, `css/syntax.css.tmpl`, and do simple param substitutions. +This makes it easier to update the CSS without working with XSLT. + All parameters can be automatically computed if not provided. --> diff --git a/xslt/common/tmpl.xsl b/xslt/common/tmpl.xsl index 4df8e1ed..c52a95cf 100644 --- a/xslt/common/tmpl.xsl +++ b/xslt/common/tmpl.xsl @@ -24,7 +24,7 @@ along with this program; see the file COPYING.LGPL. If not, see +div.links .desc a { + color: inherit; +} +div.links .desc a:hover { + color: {{$color.fg.blue}}; +} +a.bold { font-weight: bold; } + + +div.link-button { + font-size: 1.2em; + font-weight: bold; +} +.link-button a { + display: inline-block; + background-color: {{$color.blue}}; + color: {{$color.bg}}; + text-shadow: {{$color.fg.blue}} 1px 1px 0px; + border: solid 1px {{$color.fg.blue}}; + padding: 0.2em 0.83em 0.2em 0.83em; + border-radius: 4px; +} +.link-button a:visited { + color: {{$color.bg}}; +} +.link-button a:hover { + text-decoration: none; + color: {{$color.bg}}; + background-color: {{$_color.link_button_hover}}; +} +div.link-button a .desc { + display: block; + font-weight: normal; + font-size: 0.83em; + color: {{$color.bg.gray}}; +} + + +div.floatleft { + float: left; + margin-right: 1em; +} +div.floatright { + float: right; + margin-left: 1em; +} +div.floatstart { + float: {{$left}}; + margin-{{$right}}: 1em; +} +div.floatend { + float: {{$right}}; + margin-{{$left}}: 1em; +} + + +div.title-heading h1, div.title-heading h2, div.title-heading h3, +div.title-heading h4, div.title-heading h5, div.title-heading h6 { + font-size: 1.72em; + font-weight: bold; +} +ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; } +div.links-heading > a { font-size: 1.72em; font-weight: bold; } +ul.links-heading > li > div.desc { margin-top: 0.5em; } + +div.links-uix-hover { + position: relative; + display: flex; + flex-flow: row nowrap; + align-items: stretch; + justify-content: flex-start; +} +ul.links-uix-hover { flex-grow: 1; } +ul.links-uix-hover li { margin: 0; padding: 0; } +ul.links-uix-hover a { + display: block; + padding: 8px 1.2em; + border-bottom: none; +} +ul.links-uix-hover a:hover, ul.links-uix-hover a:focus { + background: {{$color.bg.blue}}; +} +ul.links-uix-hover img { + display: block; + position: absolute; + top: 0; {{$left}}: 0; + visibility: hidden; + opacity: 0.0; + transition: opacity 0.6s, visibility 0.6s; +} +ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img { + visibility: visible; + opacity: 1.0; + transition: opacity 0.2s, visibility 0.2s; +} +@media only screen and (max-width: 480px) { + div.links-uix-hover-img { display: none; } + ul.links-uix-hover img { display: none; } + ul.links-uix-hover li { + margin-left: -10px; margin-right: -10px; + } + ul.links-uix-hover li a { + padding: 10px; + } +} + + +div.ui-overlay-screen { + position: fixed; + margin: 0; + left: 0; top: 0; + width: 100%; height: 100%; + background: {{$color.fg.dark}}; + animation-name: yelp-overlay-screen; + animation-duration: 0.8s; + animation-fill-mode: forwards; +} +@keyframes yelp-overlay-screen { + from { opacity: 0.0; } + to { opacity: 0.6; } +} +div.ui-overlay { + display: none; + position: fixed; + text-align: center; + top: 30px; + left: 50%; + transform: translateX(-50%); + z-index: 10; +} +div.ui-overlay-show { + animation-name: yelp-overlay-slide; + animation-duration: 0.8s; + animation-fill-mode: forwards; +} +@keyframes yelp-overlay-slide { + from { transform: translateY(-400px) translateX(-50%); } + to { transform: translateY(0) translateX(-50%); } +} +div.ui-overlay > div.inner { + display: inline-block; + padding: 8px; + background-color: {{$color.bg.gray}}; + border-radius: 4px; + text-align: {{$left}}; +} +div.ui-overlay img, div.ui-overlay video { + max-height: 80vh; + max-width: 90vw; +} +div.ui-overlay > div.inner > div.title { margin-top: -4px; } +a.ui-overlay-close { + display: block; + float: {{$right}}; + width: 30px; height: 30px; + font-size: 22px; line-height: 30px; + font-weight: bold; + margin-top: -28px; + margin-{{$right}}: -26px; + padding: 1px 2px 3px 2px; + text-align: center; + border: none; + border-radius: 50%; + background-color: {{$color.blue}}; + color: {{$color.bg}}; +} +div.links-tiles { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: stretch; + vertical-align: top; + clear: both; + margin: 0 -10px; +} +div.links-tile { + max-width: 300px; + flex: 1 0 300px; + vertical-align: top; + margin: 0; + padding: 10px; +} +div.links-tiles > div.links-tile { max-width: none; } +div.links-tile:empty { padding: 0 10px; height: 0; } +div.links-tile > a { + display: block; + vertical-align: top; + padding: 10px; + border-radius: 4px; + border: none; +} +div.links-tile > a:hover { + background-color: {{$color.bg.blue}}; +} +div.links-tile > a > span.links-tile-img { + display: block; + text-align: center; +} +div.links-tile > a > span.links-tile-img > img { + width: 100%; + border-radius: 3px; +} +div.links-tile > a > span.links-tile-text > span.title { + display: block; + font-weight: bold; +} +div.links-tile > a > span.links-tile-text > * + span.title { + margin-top: 0.5em; +} +div.links-tile > a > span.links-tile-text > span.desc { + display: block; + margin: 0.2em 0 0 0; + color: {{$color.fg.dark}}; +} + + +div.links-grid-container { + margin-left: -10px; + margin-right: -10px; + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + vertical-align: top; + clear: both; +} +div.links-grid { + flex: 1 0 300px; + padding: 10px; +} +div.links-grid:empty { padding: 0 10px; height: 0; } +div.links-grid-link { font-weight: bold; } +div.links-grid > div.desc { + margin: 0.2em 0 0 0; + color: {{$color.fg.dark}}; +} + + + +div.links-norwich { + width: 900px; +} +div.links-norwich-primary { + float: left; + vertical-align: top; + margin: 0; padding: 0; +} +div.links-norwich-big { + vertical-align: top; + display: inline-block; + background: {{$color.bg.blue}}; + background: radial-gradient(ellipse 800px 1200px at 100% 20px, {{$color.bg.blue}}, {{$color.blue}}); + margin: 0 20px 20px 0; +} +div.links-norwich-big + div.links-norwich-big { + background: {{$color.bg.yellow}}; + background: radial-gradient(ellipse 800px 1200px at 100% 20px, {{$color.bg.yellow}}, {{$color.yellow}}); +} +div.links-norwich-big a { + display: block; + width: 230px; + height: 500px; + height: 320px; + padding: 9px; + font-size: 1.2em; + color: {{$color.fg}}; + border: solid 1px {{$color.blue}}; + background-repeat: no-repeat; + background-position: right -80px bottom -80px; +} +div.links-norwich-big a:hover { + border: solid 1px {{$color.blue}}; + box-shadow: 2px 2px 2px {{$color.blue}}; +} +div.links-norwich-big a span.title { + font-size: 1.2em; + font-weight: bold; +} +div.links-norwich-big a .desc { + color: {{$color.fg}}; + font-weight: normal; +} +div.links-norwich-secondary { + vertical-align: top; + margin: 0; padding: 0; +} +div.links-norwich-small { + display: inline-block; + vertical-align: top; + background: {{$color.bg.gray}}; + margin: 0 20px 20px 0; +} +div.links-norwich-small a { + display: block; + width: 140px; + height: 140px; + padding: 9px; + font-weight: bold; + color: {{$color.fg}}; + border: solid 1px {{$color.gray}}; + background-repeat: no-repeat; + background-position: right 4px bottom 4px; +} +div.links-norwich-small a:hover { + border: solid 1px {{$color.gray}}; + box-shadow: 2px 2px 2px {{$color.blue}}; +} +@media only screen and (max-width: 900px) { + div.links-norwich { + width: 720px; + } +} +@media only screen and (max-width: 720px) { + div.links-norwich { + width: 540px; + } +} +@media only screen and (max-width: 540px) { + div.links-norwich { + width: 100%; + } + div.links-norwich-big { + width: 100%; + margin-right: 0; + } + div.links-norwich-big a { + width: auto; + } +} + + +div.links-divs { + margin-left: -10px; + margin-right: -10px; +} +a.linkdiv { + display: block; + margin: 0; + padding: 10px; + border-bottom: none; +} +a.linkdiv:hover { + text-decoration: none; + background-color: {{$color.bg.blue}}; +} +a.linkdiv > span.title { + display: block; + margin: 0; + font-size: 1em; + font-weight: bold; + color: inherit; +} +a.linkdiv > span.desc { + display: block; + margin: 0.2em 0 0 0; + color: {{$color.fg.dark}}; +} +span.linkdiv-dash { display: none; } +div.links-twocolumn { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: flex-start; + vertical-align: top; + margin-left: -10px; + margin-right: -10px; +} +div.links-twocolumn > div.links-divs { + flex: 1 0 320px; + vertical-align: top; + margin: 0; +} + + +div.comment { + padding: 0.5em; + border: solid 2px {{$color.red}}; + background-color: {{$color.bg.red}}; +} +div.comment div.comment { + margin: 1em 1em 0 1em; +} +div.comment div.cite { + margin: 0 0 0.5em 0; + font-style: italic; +} + + +div.tree > div.inner > div.title { margin-bottom: 0.5em; } +ul.tree { + margin: 0; padding: 0; + list-style-type: none; +} +li.tree { margin: -2px 0 0 0; padding: 0; } +li.tree div { margin: 0; padding: 0; } +ul.tree ul.tree { + margin-{{$left}}: 1.44em; +} +div.tree-lines ul.tree { margin-left: 0; } + + +span.hi { + background-color: {{$color.bg.yellow}}; +} +span.hi.hi-ins { + background-color: {{$color.bg.green}}; +} +span.hi.hi-del { + background-color: {{$color.bg.red}}; + text-decoration: line-through; +} +span.hi.hi-ins ins { text-decoration: none; } +span.hi.hi-del del { text-decoration: none; } +span.hi.hi-red { background-color: {{$color.bg.red}}; } +span.hi.hi-orange { background-color: {{$color.bg.orange}}; } +span.hi.hi-yellow { background-color: {{$color.bg.yellow}}; } +span.hi.hi-green { background-color: {{$color.bg.green}}; } +span.hi.hi-blue { background-color: {{$color.bg.blue}}; } +span.hi.hi-purple { background-color: {{$color.bg.purple}}; } +span.hi.hi-gray { background-color: {{$color.bg.gray}}; } + + +dt.gloss-term { + margin-top: 1.2em; + font-weight: bold; + color: {{$color.fg.dark}}; +} +dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; } +dt.gloss-term + dd { margin-top: 0.2em; } +dd.gloss-link { + margin: 0 0.2em 0 0.2em; + border-{{$left}}: solid 4px {{$color.blue}}; + padding-{{$left}}: 1em; +} +dd.gloss-def { + margin: 0 0.2em 1em 0.2em; + border-{{$left}}: solid 4px {{$color.gray}}; + padding-{{$left}}: 1em; +} +a.gloss-term { + position: relative; + border-bottom: dashed 1px {{$color.blue}}; +} +a.gloss-term:hover { + text-decoration: none; + border-bottom-style: solid; +} +span.gloss-desc { + display: none; + position: absolute; + z-index: 100; + margin: 0; + {{$left}}: 0; + top: 1.2em; + padding: 0.2em 0.5em 0.2em 0.5em; + min-width: 12em; + max-width: 24em; + overflow: hidden; + color: {{$color.fg.dark}}; + background-color: {{$color.bg.yellow}}; + border: solid 1px {{$color.yellow}}; + box-shadow: 2px 2px 4px {{$color.gray}}; +} +a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc { + display: inline-block; + animation-name: yelp-gloss-fade; + animation-duration: 1s; + animation-fill-mode: forwards; +} +@keyframes yelp-gloss-fade { + from { opacity: 0.0; } + to { opacity: 1.0; } +} + + +.if-if { display: none; } +.if-choose, .if-when, .if-else { margin: 0; padding: 0; } +.if-choose > .if-when { display: none; } +.if-choose > .if-else { display: block; } +.if-if.if__not-target-mobile { display: block; } +.if-choose.if__not-target-mobile > .if-when { display: block; } +.if-choose.if__not-target-mobile > .if-else { display: none; } +@media only screen and (max-width: 480px) { + .if-if.if__target-mobile { display: block; } + .if-if.if__not-target-mobile { display: none; } + .if-choose.if__target-mobile > .if-when { display: block; } + .if-choose.if__target-mobile > .if-else { display: none; } + .if-choose.if__not-target-mobile > .if-when { display: none; } + .if-choose.if__not-target-mobile > .if-else { display: block; } +} + diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl index f6f793b7..fe67287b 100644 --- a/xslt/mallard/html/mal2html-page.xsl +++ b/xslt/mallard/html/mal2html-page.xsl @@ -983,6 +983,15 @@ are processed in {mal2html.block.mode}. + + + + + + + + + @@ -998,559 +1007,22 @@ are processed in {mal2html.block.mode}. - - -div.links .desc a { - color: inherit; -} -div.links .desc a:hover { - color: ; -} -a.bold { font-weight: bold; } - - -div.link-button { - font-size: 1.2em; - font-weight: bold; -} -.link-button a { - display: inline-block; - background-color: - ; - color: - ; - text-shadow: - 1px 1px 0px; - border: solid 1px - ; - padding: 0.2em 0.83em 0.2em 0.83em; - border-radius: 4px; -} -.link-button a:visited { - color: - ; -} -.link-button a:hover { - text-decoration: none; - color: - ; - background-color: - - - - - -} -div.link-button a .desc { - display: block; - font-weight: normal; - font-size: 0.83em; - color: - ; -} - - -div.floatleft { - float: left; - margin-right: 1em; -} -div.floatright { - float: right; - margin-left: 1em; -} -div.floatstart { - float: ; - margin-: 1em; -} -div.floatend { - float: ; - margin-: 1em; -} - - -div.title-heading h1, div.title-heading h2, div.title-heading h3, -div.title-heading h4, div.title-heading h5, div.title-heading h6 { - font-size: 1.72em; - font-weight: bold; -} -ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; } -div.links-heading > a { font-size: 1.72em; font-weight: bold; } -ul.links-heading > li > div.desc { margin-top: 0.5em; } - -div.links-uix-hover { - position: relative; - display: flex; - flex-flow: row nowrap; - align-items: stretch; - justify-content: flex-start; -} -ul.links-uix-hover { flex-grow: 1; } -ul.links-uix-hover li { margin: 0; padding: 0; } -ul.links-uix-hover a { - display: block; - padding: 8px 1.2em; - border-bottom: none; -} -ul.links-uix-hover a:hover, ul.links-uix-hover a:focus { - background: ; -} -ul.links-uix-hover img { - display: block; - position: absolute; - top: 0; : 0; - visibility: hidden; - opacity: 0.0; - transition: opacity 0.6s, visibility 0.6s; -} -ul.links-uix-hover a:hover img, ul.links-uix-hover a:focus img { - visibility: visible; - opacity: 1.0; - transition: opacity 0.2s, visibility 0.2s; -} -@media only screen and (max-width: 480px) { - div.links-uix-hover-img { display: none; } - ul.links-uix-hover img { display: none; } - ul.links-uix-hover li { - margin-left: -10px; margin-right: -10px; - } - ul.links-uix-hover li a { - padding: 10px; - } -} - - -div.ui-overlay-screen { - position: fixed; - margin: 0; - left: 0; top: 0; - width: 100%; height: 100%; - background: ; - animation-name: yelp-overlay-screen; - animation-duration: 0.8s; - animation-fill-mode: forwards; -} -@keyframes yelp-overlay-screen { - from { opacity: 0.0; } - to { opacity: 0.6; } -} -div.ui-overlay { - display: none; - position: fixed; - text-align: center; - top: 30px; - left: 50%; - transform: translateX(-50%); - z-index: 10; -} -div.ui-overlay-show { - animation-name: yelp-overlay-slide; - animation-duration: 0.8s; - animation-fill-mode: forwards; -} -@keyframes yelp-overlay-slide { - from { transform: translateY(-400px) translateX(-50%); } - to { transform: translateY(0) translateX(-50%); } -} -div.ui-overlay > div.inner { - display: inline-block; - padding: 8px; - background-color: ; - border-radius: 4px; - text-align: ; -} -div.ui-overlay img, div.ui-overlay video { - max-height: 80vh; - max-width: 90vw; -} -div.ui-overlay > div.inner > div.title { margin-top: -4px; } -a.ui-overlay-close { - display: block; - float: ; - width: 30px; height: 30px; - font-size: 22px; line-height: 30px; - font-weight: bold; - margin-top: -28px; - margin-: -26px; - padding: 1px 2px 3px 2px; - text-align: center; - border: none; - border-radius: 50%; - background-color: ; - color: ; -} -div.links-tiles { - display: flex; - flex-flow: row wrap; - align-items: stretch; - justify-content: stretch; - vertical-align: top; - clear: both; - margin: 0 -10px; -} -div.links-tile { - max-width: 300px; - flex: 1 0 300px; - vertical-align: top; - margin: 0; - padding: 10px; -} -div.links-tiles > div.links-tile { max-width: none; } -div.links-tile:empty { padding: 0 10px; height: 0; } -div.links-tile > a { - display: block; - vertical-align: top; - padding: 10px; - border-radius: 4px; - border: none; -} -div.links-tile > a:hover { - background-color: - ; -} -div.links-tile > a > span.links-tile-img { - display: block; - text-align: center; -} -div.links-tile > a > span.links-tile-img > img { - width: 100%; - border-radius: 3px; -} -div.links-tile > a > span.links-tile-text > span.title { - display: block; - font-weight: bold; -} -div.links-tile > a > span.links-tile-text > * + span.title { - margin-top: 0.5em; -} -div.links-tile > a > span.links-tile-text > span.desc { - display: block; - margin: 0.2em 0 0 0; - color: ; -} - - -div.links-grid-container { - margin-left: -10px; - margin-right: -10px; - display: flex; - flex-flow: row wrap; - align-items: stretch; - justify-content: flex-start; - vertical-align: top; - clear: both; -} -div.links-grid { - flex: 1 0 300px; - padding: 10px; -} -div.links-grid:empty { padding: 0 10px; height: 0; } -div.links-grid-link { font-weight: bold; } -div.links-grid > div.desc { - margin: 0.2em 0 0 0; - color: ; -} - - - -div.links-norwich { - width: 900px; -} -div.links-norwich-primary { - float: left; - vertical-align: top; - margin: 0; padding: 0; -} -div.links-norwich-big { - vertical-align: top; - display: inline-block; - background: ; - background: radial-gradient(ellipse 800px 1200px at 100% 20px, - , - ); - margin: 0 20px 20px 0; -} -div.links-norwich-big + div.links-norwich-big { - background: ; - background: radial-gradient(ellipse 800px 1200px at 100% 20px, - , - ); -} -div.links-norwich-big a { - display: block; - width: 230px; - height: 500px; - height: 320px; - padding: 9px; - font-size: 1.2em; - color: ; - border: solid 1px ; - background-repeat: no-repeat; - background-position: right -80px bottom -80px; -} -div.links-norwich-big a:hover { - border: solid 1px ; - box-shadow: 2px 2px 2px ; -} -div.links-norwich-big a span.title { - font-size: 1.2em; - font-weight: bold; -} -div.links-norwich-big a .desc { - color: ; - font-weight: normal; -} -div.links-norwich-secondary { - vertical-align: top; - margin: 0; padding: 0; -} -div.links-norwich-small { - display: inline-block; - vertical-align: top; - background: ; - margin: 0 20px 20px 0; -} -div.links-norwich-small a { - display: block; - width: 140px; - height: 140px; - padding: 9px; - font-weight: bold; - color: ; - border: solid 1px ; - background-repeat: no-repeat; - background-position: right 4px bottom 4px; -} -div.links-norwich-small a:hover { - border: solid 1px ; - box-shadow: 2px 2px 2px ; -} -@media only screen and (max-width: 900px) { - div.links-norwich { - width: 720px; - } -} -@media only screen and (max-width: 720px) { - div.links-norwich { - width: 540px; - } -} -@media only screen and (max-width: 540px) { - div.links-norwich { - width: 100%; - } - div.links-norwich-big { - width: 100%; - margin-right: 0; - } - div.links-norwich-big a { - width: auto; - } -} - - -div.links-divs { - margin-left: -10px; - margin-right: -10px; -} -a.linkdiv { - display: block; - margin: 0; - padding: 10px; - border-bottom: none; -} -a.linkdiv:hover { - text-decoration: none; - background-color: - ; -} -a.linkdiv > span.title { - display: block; - margin: 0; - font-size: 1em; - font-weight: bold; - color: inherit; -} -a.linkdiv > span.desc { - display: block; - margin: 0.2em 0 0 0; - color: ; -} -span.linkdiv-dash { display: none; } -div.links-twocolumn { - display: flex; - flex-flow: row wrap; - align-items: stretch; - justify-content: flex-start; - vertical-align: top; - margin-left: -10px; - margin-right: -10px; -} -div.links-twocolumn > div.links-divs { - flex: 1 0 320px; - vertical-align: top; - margin: 0; -} - - -div.comment { - padding: 0.5em; - border: solid 2px - ; - background-color: - ; -} -div.comment div.comment { - margin: 1em 1em 0 1em; -} -div.comment div.cite { - margin: 0 0 0.5em 0; - font-style: italic; -} - - -div.tree > div.inner > div.title { margin-bottom: 0.5em; } -ul.tree { - margin: 0; padding: 0; - list-style-type: none; -} -li.tree { margin: -2px 0 0 0; padding: 0; } -li.tree div { margin: 0; padding: 0; } -ul.tree ul.tree { - margin-: 1.44em; -} -div.tree-lines ul.tree { margin-left: 0; } - - -span.hi { - background-color: - ; -} -span.hi.hi-ins { - background-color: - ; -} -span.hi.hi-del { - background-color: - ; - text-decoration: line-through; -} -span.hi.hi-ins ins { text-decoration: none; } -span.hi.hi-del del { text-decoration: none; } -span.hi.hi-red { background-color: - ; } -span.hi.hi-orange { background-color: - ; } -span.hi.hi-yellow { background-color: - ; } -span.hi.hi-green { background-color: - ; } -span.hi.hi-blue { background-color: - ; } -span.hi.hi-purple { background-color: - ; } -span.hi.hi-gray { background-color: - ; } - - -dt.gloss-term { - margin-top: 1.2em; - font-weight: bold; - color: ; -} -dt.gloss-term:first-child, dt.gloss-term + dt.gloss-term { margin-top: 0; } -dt.gloss-term + dd { margin-top: 0.2em; } -dd.gloss-link { - margin: 0 0.2em 0 0.2em; - border-: solid 4px - ; - padding-: 1em; -} -dd.gloss-def { - margin: 0 0.2em 1em 0.2em; - border-: solid 4px - ; - padding-: 1em; -} -a.gloss-term { - position: relative; - border-bottom: dashed 1px - ; -} -a.gloss-term:hover { - text-decoration: none; - border-bottom-style: solid; -} -span.gloss-desc { - display: none; - position: absolute; - z-index: 100; - margin: 0; - : 0; - top: 1.2em; - padding: 0.2em 0.5em 0.2em 0.5em; - min-width: 12em; - max-width: 24em; - overflow: hidden; - color: ; - background-color: - ; - border: solid 1px - ; - box-shadow: 2px 2px 4px - ; -} -a.gloss-term:hover span.gloss-desc, a.gloss-term:focus span.gloss-desc { - display: inline-block; - animation-name: yelp-gloss-fade; - animation-duration: 1s; - animation-fill-mode: forwards; -} -@keyframes yelp-gloss-fade { - from { opacity: 0.0; } - to { opacity: 1.0; } -} - - -.if-if { display: none; } -.if-choose, .if-when, .if-else { margin: 0; padding: 0; } -.if-choose > .if-when { display: none; } -.if-choose > .if-else { display: block; } -.if-if.if__not-target-mobile { display: block; } -.if-choose.if__not-target-mobile > .if-when { display: block; } -.if-choose.if__not-target-mobile > .if-else { display: none; } -@media only screen and (max-width: 480px) { - .if-if.if__target-mobile { display: block; } - .if-if.if__not-target-mobile { display: none; } - .if-choose.if__target-mobile > .if-when { display: block; } - .if-choose.if__target-mobile > .if-else { display: none; } - .if-choose.if__not-target-mobile > .if-when { display: none; } - .if-choose.if__not-target-mobile > .if-else { display: block; } -} - - - -div.note-version { - background-color: - ; - margin-top: 1em; - margin-bottom: 1em; -} -span.status { - font-size: 0.83em; - font-weight: normal; - padding-left: 0.2em; - padding-right: 0.2em; - color: - ; - border: solid 1px - ; - background-color: - ; -} -span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated { background-color: - ; } - - + + + + + + + + + + + + + + + + -- cgit v1.2.1 From c31954f842688bba4bc13932cd31e33c759e342e Mon Sep 17 00:00:00 2001 From: Shaun McCance Date: Sat, 17 Oct 2020 10:24:27 -0400 Subject: Use text templates for DocBook CSS --- xslt/common/css/docbook.css.tmpl | 175 ++++++++++++++++++++++++++ xslt/docbook/html/Makefile.am | 1 - xslt/docbook/html/db2html-css.xsl | 224 --------------------------------- xslt/docbook/html/db2html-division.xsl | 25 +++- xslt/docbook/html/db2xhtml.xsl | 1 - 5 files changed, 199 insertions(+), 227 deletions(-) create mode 100644 xslt/common/css/docbook.css.tmpl delete mode 100644 xslt/docbook/html/db2html-css.xsl diff --git a/xslt/common/css/docbook.css.tmpl b/xslt/common/css/docbook.css.tmpl new file mode 100644 index 00000000..047492ad --- /dev/null +++ b/xslt/common/css/docbook.css.tmpl @@ -0,0 +1,175 @@ + +div.hgroup.bridgehead { margin-top: 1em; } + + +sub { font-size: 0.83em; } +sub sub { font-size: 1em; } +sup { font-size: 0.83em; } +sup sup { font-size: 1em; } +table.table-pgwide { width: 100%; } +table.table-rules-groups thead + *, table.table-rules-rows thead + *, +table.table-rules-groups tfoot + *, table.table-rules-rows tfoot + *, +table.table-rules-groups tbody + *, table.table-rules-rows tbody + *, +table.table-rules-rows tr + * { border-top: solid 1px; } +table.table-rules-cols td + *, table.table-rules-cols th + * { + border-{{$left}}: solid 1px; +} + +td.td-colsep { border-{{$right}}: solid 1px; } +td.td-rowsep { border-bottom: solid 1px; } + + +span.bibliolabel { + font-weight: bold; + color: {{$color.fg.dark}}; +} +div.biblioentry span.title { + font-weight: normal; + font-style: italic; +} +span.citetitle { + font-style: italic; +} + + +div.epigraph { + text-align: {{$right}}; + margin-{{$left}}: 20%; + margin-{{$right}}: 0; + color: {{$color.fg.dark}}; +} +div.programlisting .userinput { + font-weight: bold; + color: {{$color.fg.dark}}; +} +div.address, div.literallayout { white-space: pre; } + + + +div.footnotes { + border-top: solid 2px {{$color.gray}}; +} +div.footnote { margin-top: 1.44em; } +sup.footnote { font-size: 0.83em; } +a.footnote { + font-weight: bold; + text-decoration: none; + border-bottom: none; + padding: 0.2em 0.5em 0.2em 0.5em; + border-radius: 2px; +} +div.footnote > a.footnote { + margin-{{$right}}: 0.83em; + background-color: {{$color.bg.gray}}; +} +div.footnote > a.footnote + p { display: inline-block; margin: 0; } +a.footnote:hover, div.footnote > a.footnote:hover { + background-color: {{$color.bg.blue}}; + box-shadow: 0 0 2px {{$color.blue}}; +} + + +dt.ixprimary { + font-weight: bold; + color: {{$color.fg.dark}}; +} +dt.ixprimary * { font-style: normal; } +dt.ixprimary + dt.ixprimary { margin-top: 1em; } +dd.ixsecondary { + color: {{$color.fg.gray}}; +} +dt.ixsecondary, dt.ixtertiary { margin-top: 0.2em; } +dd.ixlink, dd.ixsee, dd.ixseealso { + color: {{$color.fg.gray}}; +} +dd.ixlink + dd, dd.ixsee + dd, dd.ixseealso + dd { + margin-top: 0.2em; +} +dt.ixsecondary:before, dt.ixtertiary:before { + content: "⏺"; + color: {{$color.fg.gray}}; +} +dd.ixlink:before { + content: "⏺"; + color: {{$color.blue}}; +} +dd.ixsee:before, dd.ixseealso:before { + content: "⏺"; + color: {{$color.gray}}; +} + + +dl.index dt { margin-top: 0; } +dl.index dd { margin-top: 0; margin-bottom: 0; } +dl.indexdiv dt { margin-top: 0; } +dl.indexdiv dd { margin-top: 0; margin-bottom: 0; } +dl.setindex dt { margin-top: 0; } +dl.setindex dd { margin-top: 0; margin-bottom: 0; } +div.simplelist { margin-{{$left}}: 1.72em; } +div.simplelist table { margin-left: 0; border: none; } +div.simplelist td { + padding: 0.5em; + border-{{$left}}: solid 1px {{$color.gray}}; +} +div.simplelist td:first-child { + padding-{{$left}}: 0; + border-{{$left}}: 0; +} + +span.accel { text-decoration: underline; } +span.email { font-family: monospace,monospace; font-size: 0.83em; } +span.firstterm { font-style: italic; } +span.foreignphrase { font-style: italic; } + +dt.glossterm span.glossterm { font-style: normal; } + + +span.glossterm { font-style: italic; } + +span.lineannotation { font-style: italic; } +span.medialabel { font-style: italic; } +.methodparam span.parameter { font-style: italic; } +span.paramdef span.parameter { font-style: italic; } +span.prompt { font-family: monospace,monospace; font-size: 0.83em; } +span.wordasword { font-style: italic; } + + +dt.question { + margin-left: 0; + margin-right: 0; + font-weight: bold; + color: {{$color.fg.dark}}; +} +dd + dt.question { margin-top: 1em; } +dd.answer { + margin-top: 1em; + margin-left: 2em; + margin-right: 2em; +} +div.qanda-label { + line-height: 1.44em; + float: {{$left}}; + margin-{{$right}}: 1em; + font-weight: bold; + color: {{$color.fg.dark}}; +} +dl.qandaset ol, dl.qandaset ul, dl.qandaset table { clear: both; } + +div.synopfragment { padding-top: 0.5em; } +span.co { + border-radius: 4px; + background-color: {{$color.bg.yellow}}; + outline: solid 1px {{$color.yellow}}; +} +span.co a { text-decoration: none; } +span.co a:hover { text-decoration: none; } +div.co { + margin: 0; + float: {{$left}}; + clear: both; +} + diff --git a/xslt/docbook/html/Makefile.am b/xslt/docbook/html/Makefile.am index a25394a8..8a3afa3b 100644 --- a/xslt/docbook/html/Makefile.am +++ b/xslt/docbook/html/Makefile.am @@ -6,7 +6,6 @@ xsl_DATA = \ db2html-callout.xsl \ db2html-classsynopsis.xsl \ db2html-cmdsynopsis.xsl \ - db2html-css.xsl \ db2html-division.xsl \ db2html-ebnf.xsl \ db2html-footnote.xsl \ diff --git a/xslt/docbook/html/db2html-css.xsl b/xslt/docbook/html/db2html-css.xsl deleted file mode 100644 index 496a3718..00000000 --- a/xslt/docbook/html/db2html-css.xsl +++ /dev/null @@ -1,224 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - -div.hgroup.bridgehead { margin-top: 1em; } - - -sub { font-size: 0.83em; } -sub sub { font-size: 1em; } -sup { font-size: 0.83em; } -sup sup { font-size: 1em; } -table.table-pgwide { width: 100%; } -table.table-rules-groups thead + *, table.table-rules-rows thead + *, -table.table-rules-groups tfoot + *, table.table-rules-rows tfoot + *, -table.table-rules-groups tbody + *, table.table-rules-rows tbody + *, -table.table-rules-rows tr + * { border-top: solid 1px; } -table.table-rules-cols td + *, table.table-rules-cols th + * { - border-: solid 1px; -} - -td.td-colsep { border-: solid 1px; } -td.td-rowsep { border-bottom: solid 1px; } - - -span.bibliolabel { - font-weight: bold; - color: ; -} -div.biblioentry span.title { - font-weight: normal; - font-style: italic; -} -span.citetitle { - font-style: italic; -} - - -div.epigraph { - text-align: ; - margin-: 20%; - margin-: 0; - color: ; -} -div.programlisting .userinput { - font-weight: bold; - color: ; -} -div.address, div.literallayout { white-space: pre; } - - - -div.footnotes { - border-top: solid 2px - ; -} -div.footnote { margin-top: 1.44em; } -sup.footnote { font-size: 0.83em; } -a.footnote { - font-weight: bold; - text-decoration: none; - border-bottom: none; - padding: 0.2em 0.5em 0.2em 0.5em; - border-radius: 2px; -} -div.footnote > a.footnote { - margin-: 0.83em; - background-color: ; -} -div.footnote > a.footnote + p { display: inline-block; margin: 0; } -a.footnote:hover, div.footnote > a.footnote:hover { - background-color: ; - box-shadow: 0 0 2px - ; -} - - -dt.ixprimary { - font-weight: bold; - color: ; -} -dt.ixprimary * { font-style: normal; } -dt.ixprimary + dt.ixprimary { margin-top: 1em; } -dd.ixsecondary { - color: ; -} -dt.ixsecondary, dt.ixtertiary { margin-top: 0.2em; } -dd.ixlink, dd.ixsee, dd.ixseealso { - color: ; -} -dd.ixlink + dd, dd.ixsee + dd, dd.ixseealso + dd { - margin-top: 0.2em; -} -dt.ixsecondary:before, dt.ixtertiary:before { - content: "⏺"; - color: ; -} -dd.ixlink:before { - content: "⏺"; - color: ; -} -dd.ixsee:before, dd.ixseealso:before { - content: "⏺"; - color: ; -} - - -dl.index dt { margin-top: 0; } -dl.index dd { margin-top: 0; margin-bottom: 0; } -dl.indexdiv dt { margin-top: 0; } -dl.indexdiv dd { margin-top: 0; margin-bottom: 0; } -dl.setindex dt { margin-top: 0; } -dl.setindex dd { margin-top: 0; margin-bottom: 0; } -div.simplelist { margin-: 1.72em; } -div.simplelist table { margin-left: 0; border: none; } -div.simplelist td { - padding: 0.5em; - border-: solid 1px - ; -} -div.simplelist td:first-child { - padding-: 0; - border-: 0; -} - -span.accel { text-decoration: underline; } -span.email { font-family: monospace,monospace; font-size: 0.83em; } -span.firstterm { font-style: italic; } -span.foreignphrase { font-style: italic; } - -dt.glossterm span.glossterm { font-style: normal; } - - -span.glossterm { font-style: italic; } - -span.lineannotation { font-style: italic; } -span.medialabel { font-style: italic; } -.methodparam span.parameter { font-style: italic; } -span.paramdef span.parameter { font-style: italic; } -span.prompt { font-family: monospace,monospace; font-size: 0.83em; } -span.wordasword { font-style: italic; } - - -dt.question { - margin-left: 0; - margin-right: 0; - font-weight: bold; - color: ; -} -dd + dt.question { margin-top: 1em; } -dd.answer { - margin-top: 1em; - margin-left: 2em; - margin-right: 2em; -} -div.qanda-label { - line-height: 1.44em; - float: ; - margin-: 1em; - font-weight: bold; - color: ; -} -dl.qandaset ol, dl.qandaset ul, dl.qandaset table { clear: both; } - -div.synopfragment { padding-top: 0.5em; } -span.co { - border-radius: 4px; - background-color: - ; - outline: solid 1px - ; -} -span.co a { text-decoration: none; } -span.co a:hover { text-decoration: none; } -div.co { - margin: 0; - float: ; - clear: both; -} - - - - diff --git a/xslt/docbook/html/db2html-division.xsl b/xslt/docbook/html/db2html-division.xsl index 1679d712..a40c32e2 100644 --- a/xslt/docbook/html/db2html-division.xsl +++ b/xslt/docbook/html/db2html-division.xsl @@ -58,7 +58,6 @@ common {html} stylesheet. -

@@ -152,6 +151,30 @@ common {html} stylesheet. + + + + + + + + + + + + + + + + + + + + + + + +