Template:Sandbox3/styles.css: Difference between revisions

Revision as of 01:18, 18 March 2020

/* Sets up the infobox */
div.infobox {
  font-size: .9em;
  position:relative;
  background-color: #ffffff;
  font-family: Arial, Sans-serif;
  border-spacing: 0px;
  margin-bottom: 15px;
  margin-top: 10px;
  border-radius: 15px;
  box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
}

@media screen and (min-width: 601px) {
  div.infobox {
    width: 325px;
    float: right;
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 600px) {
  div.infobox {
    width: 95%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Image at the top */
div.topimage img {
  border-radius: 20px;
  border: solid 3px #6b9ec7;
  box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
}

div.infobox .topimage {
  padding-top: 0px;
  padding-bottom: 10px;
  text-align: center;
}

/* header */
div.infobox .name {
  position:absolute;
  top:190px; left:0px;
  width:100%;
  letter-spacing: .02em;
  opacity:.9;
  font-size: 2em;
  font-weight: 700;
  box-sizing:border-box;
  height:48px;
      padding-top:4px; padding-bottom:6px;
  color: #000000;
  text-shadow: 1px 2px 1px #0e1b25;
  text-align: center;
}
div.infobox .margin {
  height:15px;
}
div.infobox .smallmargin {
  height:5px;
}

/* generic row */
div.infobox .row {
  display: flex;
  padding: 1px;
}

div.infobox .middlerow {
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  font-weight: bold;
}

div.infobox .bottomrow {
  display: flex;
  padding: 1px;
}

div.infobox .textleft {
  flex: 32%;
  font-weight: bold;
  text-align: right;
  margin-right: 5px;
  margin-left: 2px;
}

div.infobox .textright {
  flex: 68%;
  margin-right: 5px;
}

/* sets up the CotA coloring scheme */
div.infoboxcota {
    border: 1px solid #a0a0a0;
}

div.infoboxcota .topline {
	background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxcota .bottomline {
	background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
  height:5px;
  position:absolute;
  top:232px;
  width:100%;
}
div.topimagecota img {
  border:solid 3px #f1a7bc;
}

div.infoboxcota .name {
  color:#ffffff;
    background-image: linear-gradient(#420b1a, #6e122c);
    opacity:.9;
}

div.infoboxcota .row  {
}

div.infoboxcota .topimage {
  background-image: linear-gradient(#ffffff, #fbe9ee, #ffffff);
}

/* sets up the AoA coloring scheme */
div.infoboxaoa {
    border: 1px solid #a0a0a0;
}

div.infoboxaoa .topline {
  background-image: linear-gradient(45deg, #6b9ec7, #b3ddff, #e6f4ff, #b3ddff);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxaoa .bottomline {
  background-image: linear-gradient(45deg, #6b9ec7, #b3ddff, #e6f4ff, #b3ddff);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}

div.infoboxaoa .name {
  color:#ffffff;
    background-image: linear-gradient(#2a506f, #3f78a6);
}

div.infoboxaoa .row  {
}

div.infoboxaoa .topimage {
  background-image: linear-gradient(#ffffff, #e6f4ff, #ffffff);
}