Template:Sandbox3/styles.css: Difference between revisions

From Archon Arcana - The KeyForge Wiki

Template:Sandbox3/styles.css (view source)

Revision as of 21:02, 5 May 2020

1,956 bytes removed ,  5 May 2020
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
/* Sets up the infobox */
body {
div.infobox {
  font-family: arial;
   font-size: .9em;
   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) {
.outer {
   div.infobox {
   position: relative;
    width: 325px;
  display: flex;
    float: right;
  flex-direction: row;
    margin-left: 10px;
  width: 100%;
    margin-right: 10px;
  }
}
}


@media screen and (max-width: 600px) {
.deckViewer {
   div.infobox {
   display: flex;
    width: 95%;
  width: 100%;
    max-width: 350px;
  margin-left: auto;
    margin-left: auto;
  margin-right: auto;
    margin-right: auto;
   flex-wrap: wrap;
   }
  justify-content: space-between;
}
}


/* Image at the top */
.archonSolo {
div.topimage img {
   flex: 1;
   border-radius: 25%;
  min-width: 310px;
   box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
   box-sizing: border-box;
  margin: 5px;
}
}


div.infobox .topimage {
.archonAdaptive {
   padding-top: 0px;
   flex: 1;
   padding-bottom: 10px;
  min-width: 310px;
   text-align: center;
   box-sizing: border-box;
   margin: 5px;
 
}
}


/* header */
.archonTriad {
div.infobox .name {
   flex: 3;
   position:absolute;
   min-width: 50%;
  top:190px; left:0px;
   box-sizing: border-box;
   width:100%;
   margin: 5px;
  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;
.archonSolo .header,
.archonAdaptive .header,
.archonTriad .header {
   font-size: 1.5em;
  padding: 8px 8px 5px 15px;
  font-weight: 600;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
}
div.infobox .smallmargin {
 
  height:5px;
.archonSolo .header {
}
   background-color: #1d6b11;
div.infobox .houses {
   border-bottom: 3px solid #bababa;
   position:absolute;
   background-image: linear-gradient(90deg, #12420a, #1d6b11)
   top:234px; width:100%;
   text-align:center;
}
}


/* generic row */
.archonAdaptive .header {
div.infobox .row {
   background-color: #0b5866;
   display: flex;
   border-bottom: 3px solid #bababa;
   padding: 1px;
  background-image: linear-gradient(90deg, #073c45, #0b5866)
}
}


div.infobox .middlerow {
.archonTriad .header {
   padding-top: 5px;
   background-color: #2d0f63;
   padding-bottom: 5px;
   border-bottom: 3px solid #bababa;
   display: flex;
   background-image: linear-gradient(90deg, #1e0a43, #2d0f63)
  font-weight: bold;
}
}


div.infobox .bottomrow {
.deckName {
   display: flex;
   font-size: 1em;
   padding: 1px;
   padding: 5px 5px 3px 8px;
  border-top: 1px solid #bababa;
}
}


div.infobox .textleft {
.deckSet {
  flex: 32%;
   font-size: 1em;
   font-weight: bold;
   padding: 2px 5px 3px 8px;
   text-align: right;
  margin-right: 5px;
  margin-left: 2px;
}
}


div.infobox .textright {
.deckLink {
   flex: 68%;
   font-size: 1em;
   margin-right: 5px;
  padding: 2px 5px 8px 8px;
   border-bottom: 1px solid #bababa;
}
}


/* sets up the CotA coloring scheme */
.deckImage {
div.infoboxcota {
  padding: 8px 5px 8px 5px;
    border: 1px solid #a0a0a0;
  text-align: center;
    background-image:linear-gradient(#f8d3de 2px,#fbe9ee 5px,#ffffff 10px,#ffffff 400px,#fbe9ee 600px, #f8d3de);
  box-sizing: border-box;
}
}


div.infoboxcota .topline {
.deckImage img {
background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
  border-radius: 15px;
  height:5px;
   filter: drop-shadow(0 0 0.2rem #505050);
  position:absolute;
   width: 270px;
   top:185px;
   height: auto;
  width:100%;
}
div.infoboxcota .bottomline {
background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
  height:5px;
  position:absolute;
  top:238px;
   width:100%;
}
div.topimagecota img {
   border:solid 3px #f1a7bc;
}
}


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


div.infoboxcota .row  {
.decklist {
  flex: 1;
}
}


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


/* sets up the AoA coloring scheme */
div.infoboxaoa {
    border: 1px solid #a0a0a0;
        background-image:linear-gradient(#cce9ff 2px,#e6f4ff 5px,#ffffff 10px,#ffffff 400px,#e6f4ff 600px, #cce9ff);
}


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(#152837, #2a506f);
}
div.topimageaoa img {
  border:solid 3px #b3deff;
}


div.infoboxaoa .row  {
/* toggle display */
}


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


/* sets up the WC coloring scheme */
.accordion {
div.infoboxwc {
  list-style: none;
    border: 1px solid #a0a0a0;
  padding: 0;
    background-image:linear-gradient(#e7ceed 2px,#f6ecf8 5px,#ffffff 10px,#ffffff 400px,#f6ecf8 600px, #e7ceed);
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
}


div.infoboxwc .topline {
.accordion li,
background-image:linear-gradient(45deg,#a345ba,#e7ceed,#f6ecf8,#c88fd6);
.accordion ul {
  height:5px;
  margin-left: 0px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxwc .bottomline {
background-image:linear-gradient(45deg,#a345ba,#e7ceed,#f6ecf8,#c88fd6);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}
div.topimagewc img {
  border:solid 3px #dab5e3;
}
}


div.infoboxwc .name {
.deckpreview {
   color:#ffffff;
   width: 100%;
    background-image: linear-gradient(#411c4a, #622970);
  display: block;
    opacity:.9;
  height: auto;
  cursor: pointer;
  text-align: left;
  transition: background .3s ease;
  box-sizing: border-box;
  background-color: #efefef;
}
}


div.infoboxwc .row  {
.deckpreview:hover {
  background: #dedcd3;
  box-sizing: border-box;
}
}


div.infoboxwc .topimage {
.teamName {
   background-image: linear-gradient(#ffffff, #f6ecf8, #ffffff);
  width: 100%;
  display: block;
  height: auto;
  cursor: pointer;
  text-align: left;
  transition: background .3s ease;
  box-sizing: border-box;
  background-color: #303030;
   background-image: linear-gradient(90deg,#303030,#505050);
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 12px 8px 8px 15px;
  border-bottom:5px solid #a0a0a0;
  font-size: 1.7em;
  margin-top:10px;
  margin-bottom:5px;
  font-weight:600;
}
}


/* sets up the MM coloring scheme */
.teamName:hover {
div.infoboxmm {
  background: #101010;
    border: 1px solid #a0a0a0;
  box-sizing: border-box;
        background-image:linear-gradient(#e0e4eb 2px,#eff2f5 5px,#ffffff 10px,#ffffff 400px,#eff2f5 600px, #e0e4eb);
}
}


div.infoboxmm .topline {
background-image:linear-gradient(45deg,#50607c,#a2aec3,#e0e4eb,#a2aec3);
  height:5px;
  position:absolute;
  top:185px;
  width:100%;
}
div.infoboxmm .bottomline {
background-image:linear-gradient(45deg,#50607c,#a2aec3,#e0e4eb,#a2aec3);
  height:5px;
  position:absolute;
  top:238px;
  width:100%;
}
div.topimagemm img {
  border:solid 3px #b1bccd;
}


div.infoboxmm .name {
ul.accordion .inner {
   color:#ffffff;
   text-align: left;
    background-image: linear-gradient(#1e242f, #3c485d);
  overflow: hidden;
    opacity:.9;
  max-height: 0;
  transition: max-height .6s ease;
}
}


div.infoboxmm .row  {
.accordion input[type="checkbox"]:checked+li>.inner {
  max-height: 3000px;
}
}


div.infoboxmm .topimage {
.spacer {
   background-image: linear-gradient(#ffffff, #e0e4eb, #ffffff);
   height: 0px;
  display: block;
}
}
Retrieved from "https://archonarcana.com/Special:MobileDiff/27245"