diff options
Diffstat (limited to 'xslt/common/css/mallard.css.tmpl')
| -rw-r--r-- | xslt/common/css/mallard.css.tmpl | 493 |
1 files changed, 493 insertions, 0 deletions
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> |