summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorShaun McCance <shaunm@redhat.com>2020-10-17 10:19:11 -0400
committerShaun McCance <shaunm@redhat.com>2020-10-17 10:19:11 -0400
commit6f4a6a6e4a56a68d28bddbc2efaced14fba0e01e (patch)
tree4f50917f343cb8f395b14fe000022c6afe53bf17
parent17229810f917547b0f978488e7ee732a9668e2f3 (diff)
downloadyelp-xsl-6f4a6a6e4a56a68d28bddbc2efaced14fba0e01e.tar.gz
Use text templates for Mallard CSS
-rw-r--r--test/lipsum/index.page18
-rw-r--r--xslt/common/css/mallard-editor.css.tmpl19
-rw-r--r--xslt/common/css/mallard.css.tmpl493
-rw-r--r--xslt/mallard/html/mal2html-page.xsl578
4 files changed, 554 insertions, 554 deletions
diff --git a/test/lipsum/index.page b/test/lipsum/index.page
index 7a3b6f75..887faf39 100644
--- a/test/lipsum/index.page
+++ b/test/lipsum/index.page
@@ -9,6 +9,8 @@
</credit>
<desc>This is the index page, whence all other pages link.</desc>
+
+ <revision date="2020-10-16" status="review"/>
</info>
<title>Lorem ipsum</title>
@@ -22,6 +24,20 @@
Vestibulum in pretium ligula. Cras dignissim nisl ligula, non semper diam lobortis sit amet.
Donec cursus sollicitudin velit, at vulputate enim.</p>
- <links type="topic"/>
+ <links type="topic">
+ <title>Regular links</title>
+ </links>
+
+ <links type="topic" style="2column">
+ <title>Two-column links</title>
+ </links>
+
+ <links type="topic" style="linklist">
+ <title>Link list</title>
+ </links>
+
+ <links type="topic" style="button">
+ <title>Link buttons</title>
+ </links>
</page>
diff --git a/xslt/common/css/mallard-editor.css.tmpl b/xslt/common/css/mallard-editor.css.tmpl
new file mode 100644
index 00000000..91870036
--- /dev/null
+++ b/xslt/common/css/mallard-editor.css.tmpl
@@ -0,0 +1,19 @@
+<tmpl>
+div.note-version {
+ background-color: {{$color.bg.yellow}};
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+span.status {
+ font-size: 0.83em;
+ font-weight: normal;
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+ color: {{$color.fg.dark}};
+ border: solid 1px {{$color.red}};
+ background-color: {{$color.bg.yellow}};
+}
+span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated {
+ background-color: {{$color.bg.red}};
+}
+</tmpl>
diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl
new file mode 100644
index 00000000..97d94d23
--- /dev/null
+++ b/xslt/common/css/mallard.css.tmpl
@@ -0,0 +1,493 @@
+<tmpl>
+<!-- links -->
+div.links .desc a {
+ color: inherit;
+}
+div.links .desc a:hover {
+ color: {{$color.fg.blue}};
+}
+a.bold { font-weight: bold; }
+
+<!-- link/@style = 'button' -->
+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}};
+}
+
+<!-- @style = 'float*' -->
+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;
+}
+
+<!-- FIXME -->
+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;
+ }
+}
+
+<!-- uix:overlay -->
+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}};
+}
+
+<!-- links/@style = 'grid' -->
+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}};
+}
+
+<!-- FIXME -->
+<!-- links/@style = 'norwich' -->
+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;
+ }
+}
+
+<!-- links/@type = 'topic' and @style = '2column' -->
+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;
+}
+
+<!-- FIXME -->
+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;
+}
+
+<!-- FIXME -->
+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; }
+
+<!-- FIXME -->
+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}}; }
+
+<!-- experimental/gloss -->
+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; }
+}
+
+<!-- conditional processing -->
+.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; }
+}
+</tmpl>
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}.
</xsl:if>
</xsl:template>
+<!-- We need this in the CSS, but the text templates can't xsl:call-template -->
+<xsl:variable name="_color.link_button_hover">
+ <xsl:call-template name="color.blend">
+ <xsl:with-param name="bg" select="$color.blue"/>
+ <xsl:with-param name="fg" select="$color.bg"/>
+ <xsl:with-param name="mix" select="0.1"/>
+ </xsl:call-template>
+</xsl:variable>
+
<!--%# html.css.mode -->
<xsl:template mode="html.css.mode" match="mal:page">
<xsl:param name="direction">
@@ -998,559 +1007,22 @@ are processed in {mal2html.block.mode}.
<xsl:with-param name="direction" select="$direction"/>
</xsl:call-template>
</xsl:param>
-<xsl:text>
-<!-- links -->
-div.links .desc a {
- color: inherit;
-}
-div.links .desc a:hover {
- color: </xsl:text><xsl:value-of select="$color.fg.blue"/><xsl:text>;
-}
-a.bold { font-weight: bold; }
-
-<!-- link/@style = 'button' -->
-div.link-button {
- font-size: 1.2em;
- font-weight: bold;
-}
-.link-button a {
- display: inline-block;
- background-color: </xsl:text>
- <xsl:value-of select="$color.blue"/><xsl:text>;
- color: </xsl:text>
- <xsl:value-of select="$color.bg"/><xsl:text>;
- text-shadow: </xsl:text>
- <xsl:value-of select="$color.fg.blue"/><xsl:text> 1px 1px 0px;
- border: solid 1px </xsl:text>
- <xsl:value-of select="$color.fg.blue"/><xsl:text>;
- padding: 0.2em 0.83em 0.2em 0.83em;
- border-radius: 4px;
-}
-.link-button a:visited {
- color: </xsl:text>
- <xsl:value-of select="$color.bg"/><xsl:text>;
-}
-.link-button a:hover {
- text-decoration: none;
- color: </xsl:text>
- <xsl:value-of select="$color.bg"/><xsl:text>;
- background-color: </xsl:text>
-<xsl:call-template name="color.blend">
-<xsl:with-param name="bg" select="$color.blue"/>
-<xsl:with-param name="fg" select="$color.bg"/>
-<xsl:with-param name="mix" select="0.1"/>
-</xsl:call-template><xsl:text>
-}
-div.link-button a .desc {
- display: block;
- font-weight: normal;
- font-size: 0.83em;
- color: </xsl:text>
- <xsl:value-of select="$color.bg.gray"/><xsl:text>;
-}
-
-<!-- @style = 'float*' -->
-div.floatleft {
- float: left;
- margin-right: 1em;
-}
-div.floatright {
- float: right;
- margin-left: 1em;
-}
-div.floatstart {
- float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
- margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
-}
-div.floatend {
- float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
- margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-
-<!-- FIXME -->
-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: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-ul.links-uix-hover img {
- display: block;
- position: absolute;
- top: 0; </xsl:text><xsl:value-of select="$left"/><xsl:text>: 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;
- }
-}
-
-<!-- uix:overlay -->
-div.ui-overlay-screen {
- position: fixed;
- margin: 0;
- left: 0; top: 0;
- width: 100%; height: 100%;
- background: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
- 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: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
- border-radius: 4px;
- text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-}
-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: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
- width: 30px; height: 30px;
- font-size: 22px; line-height: 30px;
- font-weight: bold;
- margin-top: -28px;
- margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: -26px;
- padding: 1px 2px 3px 2px;
- text-align: center;
- border: none;
- border-radius: 50%;
- background-color: </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
- color: </xsl:text><xsl:value-of select="$color.bg"/><xsl:text>;
-}
-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: </xsl:text>
- <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-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: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-<!-- links/@style = 'grid' -->
-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: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-
-<!-- FIXME -->
-<!-- links/@style = 'norwich' -->
-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: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
- background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
- <xsl:value-of select="$color.bg.blue"/><xsl:text>, </xsl:text>
- <xsl:value-of select="$color.blue"/><xsl:text>);
- margin: 0 20px 20px 0;
-}
-div.links-norwich-big + div.links-norwich-big {
- background: </xsl:text><xsl:value-of select="$color.bg.yellow"/><xsl:text>;
- background: radial-gradient(ellipse 800px 1200px at 100% 20px, </xsl:text>
- <xsl:value-of select="$color.bg.yellow"/><xsl:text>, </xsl:text>
- <xsl:value-of select="$color.yellow"/><xsl:text>);
-}
-div.links-norwich-big a {
- display: block;
- width: 230px;
- height: 500px;
- height: 320px;
- padding: 9px;
- font-size: 1.2em;
- color: </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
- border: solid 1px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
- background-repeat: no-repeat;
- background-position: right -80px bottom -80px;
-}
-div.links-norwich-big a:hover {
- border: solid 1px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
- box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-}
-div.links-norwich-big a span.title {
- font-size: 1.2em;
- font-weight: bold;
-}
-div.links-norwich-big a .desc {
- color: </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
- 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: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
- margin: 0 20px 20px 0;
-}
-div.links-norwich-small a {
- display: block;
- width: 140px;
- height: 140px;
- padding: 9px;
- font-weight: bold;
- color: </xsl:text><xsl:value-of select="$color.fg"/><xsl:text>;
- border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
- background-repeat: no-repeat;
- background-position: right 4px bottom 4px;
-}
-div.links-norwich-small a:hover {
- border: solid 1px </xsl:text><xsl:value-of select="$color.gray"/><xsl:text>;
- box-shadow: 2px 2px 2px </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
-}
-@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;
- }
-}
-
-<!-- links/@type = 'topic' and @style = '2column' -->
-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: </xsl:text>
- <xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-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: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-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;
-}
-
-<!-- FIXME -->
-div.comment {
- padding: 0.5em;
- border: solid 2px </xsl:text>
- <xsl:value-of select="$color.red"/><xsl:text>;
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.red"/><xsl:text>;
-}
-div.comment div.comment {
- margin: 1em 1em 0 1em;
-}
-div.comment div.cite {
- margin: 0 0 0.5em 0;
- font-style: italic;
-}
-
-<!-- FIXME -->
-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-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em;
-}
-div.tree-lines ul.tree { margin-left: 0; }
-
-<!-- FIXME -->
-span.hi {
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-span.hi.hi-ins {
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.green"/><xsl:text>;
-}
-span.hi.hi-del {
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.red"/><xsl:text>;
- 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: </xsl:text>
- <xsl:value-of select="$color.bg.red"/><xsl:text>; }
-span.hi.hi-orange { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.orange"/><xsl:text>; }
-span.hi.hi-yellow { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.yellow"/><xsl:text>; }
-span.hi.hi-green { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.green"/><xsl:text>; }
-span.hi.hi-blue { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.blue"/><xsl:text>; }
-span.hi.hi-purple { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.purple"/><xsl:text>; }
-span.hi.hi-gray { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.gray"/><xsl:text>; }
-
-<!-- experimental/gloss -->
-dt.gloss-term {
- margin-top: 1.2em;
- font-weight: bold;
- color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
-}
-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-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
- <xsl:value-of select="$color.blue"/><xsl:text>;
- padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-dd.gloss-def {
- margin: 0 0.2em 1em 0.2em;
- border-</xsl:text><xsl:value-of select="$left"/><xsl:text>: solid 4px </xsl:text>
- <xsl:value-of select="$color.gray"/><xsl:text>;
- padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
-}
-a.gloss-term {
- position: relative;
- border-bottom: dashed 1px </xsl:text>
- <xsl:value-of select="$color.blue"/><xsl:text>;
-}
-a.gloss-term:hover {
- text-decoration: none;
- border-bottom-style: solid;
-}
-span.gloss-desc {
- display: none;
- position: absolute;
- z-index: 100;
- margin: 0;
- </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
- top: 1.2em;
- padding: 0.2em 0.5em 0.2em 0.5em;
- min-width: 12em;
- max-width: 24em;
- overflow: hidden;
- color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
- border: solid 1px </xsl:text>
- <xsl:value-of select="$color.yellow"/><xsl:text>;
- box-shadow: 2px 2px 4px </xsl:text>
- <xsl:value-of select="$color.gray"/><xsl:text>;
-}
-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; }
-}
-
-<!-- conditional processing -->
-.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; }
-}
-</xsl:text>
-<xsl:if test="$mal2html.editor_mode">
-<xsl:text>
-div.note-version {
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
- margin-top: 1em;
- margin-bottom: 1em;
-}
-span.status {
- font-size: 0.83em;
- font-weight: normal;
- padding-left: 0.2em;
- padding-right: 0.2em;
- color: </xsl:text>
- <xsl:value-of select="$color.fg.dark"/><xsl:text>;
- border: solid 1px </xsl:text>
- <xsl:value-of select="$color.red"/><xsl:text>;
- background-color: </xsl:text>
- <xsl:value-of select="$color.bg.yellow"/><xsl:text>;
-}
-span.status-stub, span.status-draft, span.status-incomplete, span.status-outdated { background-color: </xsl:text>
- <xsl:value-of select="$color.bg.red"/><xsl:text>; }
-</xsl:text>
-</xsl:if>
+ <xsl:call-template name="tmpl.file">
+ <xsl:with-param name="file" select="'css/mallard.css.tmpl'"/>
+ <xsl:with-param name="node" select="."/>
+ <xsl:with-param name="direction" select="$direction"/>
+ <xsl:with-param name="left" select="$left"/>
+ <xsl:with-param name="right" select="$right"/>
+ </xsl:call-template>
+ <xsl:if test="$mal2html.editor_mode">
+ <xsl:call-template name="tmpl.file">
+ <xsl:with-param name="file" select="'css/mallard-editor.css.tmpl'"/>
+ <xsl:with-param name="node" select="."/>
+ <xsl:with-param name="direction" select="$direction"/>
+ <xsl:with-param name="left" select="$left"/>
+ <xsl:with-param name="right" select="$right"/>
+ </xsl:call-template>
+ </xsl:if>
</xsl:template>
<!--%# html.js.mode -->