summaryrefslogtreecommitdiff
path: root/xslt/common/css/mallard.css.tmpl
diff options
context:
space:
mode:
Diffstat (limited to 'xslt/common/css/mallard.css.tmpl')
-rw-r--r--xslt/common/css/mallard.css.tmpl493
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>