diff options
Diffstat (limited to 'xslt/mallard/html/mal2html-page.xsl')
| -rw-r--r-- | xslt/mallard/html/mal2html-page.xsl | 578 |
1 files changed, 25 insertions, 553 deletions
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 --> |