%PDF- %PDF- Mini Shell
Mini Shell

Direktori : /usr/share/yelp-xsl/xslt/common/css/
Current File : //usr/share/yelp-xsl/xslt/common/css/mallard.css.tmpl
<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}};
}
<!-- FIXME drop this in favor of tiles CSS in core.css -->
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 {
  flex: 1 0 {{$html.grid.size div 3 - 20}}px;
  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 = 'experimental-gnome-splash' -->
a.ex-gnome-top {
  display: block;
  border: solid 1px {{$color.gray}};
  border-radius: 4px;
  transition: box-shadow 0.5s linear;
}
a.ex-gnome-top:hover {
  box-shadow: 0px 2px 4px {{$color.gray}};
}
span.ex-gnome-top-banner {
  display: block;
  height: 10px;
  background: {{$color.green}};
  overflow: hidden;
}
span.ex-gnome-top-title {
  color: {{$color.fg}};
  display: block;
  margin: 10px 20px;
  font-size: 1.2em;
}
span.ex-gnome-top-desc {
  color: {{$color.fg.gray}};
  display: block;
  margin: 10px 20px;
}

<!-- links/@style = 'experimental-gnome-tiles' -->
a.ex-gnome-tile {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  border: solid 1px {{$color.gray}};
  border-radius: 4px;
  transition: box-shadow 0.5s linear;
}
a.ex-gnome-tile:hover {
  box-shadow: 0px 2px 4px {{$color.gray}};
}
span.ex-gnome-tiles-banner {
  display: block;
  flex: 0 0 64px;
  background: {{$color.fg.blue}};
  overflow: hidden;
}
span.ex-gnome-tiles-banner img {
  width: 64px; height: 64px;
  margin: 10px 0;
  transform: rotate(-10deg);
}
span.ex-gnome-tiles-text {
  display: block;
  margin: 10px;
}
span.ex-gnome-tiles-title {
  color: {{$color.fg}};
  display: block;
  margin: 0;
  font-size: 1.2em;
}
span.ex-gnome-tiles-desc {
  color: {{$color.fg.gray}};
  display: block;
  margin-top: 10px;
}

<!-- 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 {{$html.grid.size div 3 - 20}}px;
  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 {{$html.grid.size div 3}}px;
  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>
Zerion Mini Shell 1.0