Difference between revisions of "MediaWiki:Mobile.css"

Revision as of 07:05, 28 January 2020

/* CSS placed here will affect users of the mobile site */

/********/
/* Font */
/********/

@import url('https://fonts.googleapis.com/css?family=Podkova:400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');


/**************/
/* Restyling */
/**************/

body {
  font-family: Podkova, "Courier New", Courier, monospace;
}

header, .header-container.header-chrome,
footer, footer .last-modified-bar,
#mw-mf-page-left {
  background-color: #242d3c;
  color: #ffffff;
}

a:link, a:active,
.header .branding-box h1, .header .branding-box a,
#mw-mf-page-left ul.hlist li a,
footer .hlist li::after, .mw-ui-anchor.mw-ui-progressive {
  text-decoration: none;
  color: #ff8319;
}

a:visited, .last-modified-bar a, .last-modified-bar a:visited {
  text-decoration: none;
  color: #e77a1c;
}

a:hover {
  text-decoration: underline;
}


/*********************************/
/* Zero word effect by User:Nclm */
/*********************************/

@supports (background-clip: text) or (-webkit-background-clip: text) {
  @keyframes zero {
    from { background-position: -800px -83px; }
    to { background-position: 0% 0%; }
  }
  .zero {
    background-image: url(/~donald/zero/images/3/36/Zero_Fog.png);
    animation-name: zero;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-background-clip: text;  
    background-clip: text;
    color: rgba(0,0,0,0);
  }
  a .zero {
    background-image: url(/~donald/zero/images/e/e7/ZeroLink_Fog.png);
  }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  @keyframes zerowhite {
    from { background-position: -800px -83px; }
    to { background-position: 0% 0%; }
  }
  .zerowhite {
    background-image: url(/~donald/zero/images/7/73/ZeroWhite_Fog.png);
    animation-name: zerowhite;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-background-clip: text;  
    background-clip: text;
    color: rgba(0,0,0,0);
  }
  a .zerowhite {
    background-image: url(/~donald/zero/images/e/e7/ZeroLink_Fog.png);
  }
}


/*********************/
/* Custom tag styles */
/*********************/

.poem {
  width: 90%;
  border: 2px solid #d6d2c5;
  background-color: #f9f4e6;
  padding: 1em;
  font-family: monospace;
  font-size: 1.15em;
}

.inconsolata {
  font-family: 'Inconsolata', monospace;
}


/********************/
/* Template:Highway */
/********************/

.highway-box-top {
  background: #000 url("/~donald/zero/images/8/8f/0_notebook_top.png") no-repeat left top;
  border-top-right-radius: 10px;
  width: 350px;
  height: 9px;
  padding-left: 24px;
  margin-left: 10px;
  float: right; /* make sure to clear: both; after all of these */
}
.highway-box-bottom {
  background: #000 url("/~donald/zero/images/f/ff/0_notebook_bottom.png") no-repeat left bottom;
  border-bottom-right-radius: 10px;
  width: 350px;
  height: 20px;
  padding-left: 24px;
  margin-left: 10px;
  margin-bottom: 14px;
  float: right;
}
.highway-box-main {
  background: #000 url("/~donald/zero/images/9/94/0_notebook_spine.png") repeat-y left top;
  color: #fff;
  border-radius: 0;
  width: 350px;
  padding-left: 24px;
  margin-left: 10px;
  float: right;
}
.highway-title {
  font-family: 'Inconsolata', monospace;
  text-align: center;
  text-transform: uppercase;
  font-size: 24pt;
  position: relative;
  z-index: 1;
}
.highway-image {
  text-align: center;
  margin-top: -30px;
}
.highway-line1 {
  border: none;
  border-bottom: 1px solid #fff;
  color: transparent;
  background-color: transparent;
  margin: 17px auto 12px;
  width: 75%;
}
.highway-line2 {
  border: none;
  border-bottom: 1px dashed #fff;
  color: transparent;
  background-color: transparent;
  margin: 16px auto 12px;
  width: 75%;
}
.highway-routeno {
  text-align: center;
  font-size: 14pt;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #fff;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.highway-routebox {
  text-align: center;
  font-size: 12pt;
  width: 100%;
  white-space: nowrap;
}
.highway-neighbors {
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  width: 75px;
  white-space: pre-line;
  line-height: 1.1em;
  color: #fff;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.highway-arrow {
  display: inline-block;
  vertical-align: middle;
  margin: 0 15px;
}
.highway-truck {
  display: inline-block;
  vertical-align: middle;
}
.highway-routeno a:hover,
.highway-neighbors a:hover {
  text-decoration: underline;
  color: #fff;
}


/*****************/
/* Template:Acts */
/*****************/
.white,
.white a,
.white a:link,
.white a:hover,
.white a:visited {
  color: #fff;
}
.white a.mw-selflink.selflink {
  text-transform: uppercase;
}
.white a:hover {
  text-decoration: underline overline;
}
.white a.mw-selflink.selflink:hover {
  text-decoration: none;
}


/***********/
/* Cleanup */
/***********/

/* Hide unused buttons */
.language-selector.disabled {
  display: none;
}