Template:Sandbox3/styles.css: Difference between revisions

From Archon Arcana - The KeyForge Wiki

Template:Sandbox3/styles.css (view source)

Revision as of 20:25, 12 May 2020

800 bytes added ,  12 May 2020
no edit summary
No edit summary
No edit summary
 
(82 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Sets up the infobox */
 
div.infobox {
.noexcerpt img {
  font-size: .9em;
  position:relative;
}
  background-color: #ffffff;
 
  font-family: Arial, Sans-serif;
#pageOverlay {
  border-spacing: 0px;
font-size:0px;
  margin-bottom: 15px;
line-height:0px;
  margin-top: 10px;
height:0px;
  border-radius: 15px;
}
  box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
 
#pageOverlay img {
display:none;
}
 
#pageOverlay p {
height:0px;
}
 
 
.cropped {
    width: 203px;  
    height: 250px;  
    object-fit: contain;
    object-position: center top;  
}
}


@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: 20px;
  min-width: 310px;
   box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
  box-sizing: border-box;
  margin: 5px;
   /*  border-left:5px solid #1d6b11;
    border-top-left-radius:20px; */
 
}
}


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


/* header */
.archonSolo .variantName {
div.infobox .name {
/*   background-color: #1d6b11;
   position:absolute;
   background-image: linear-gradient(90deg, #12420a, #1d6b11);
   top:190px; left:0px;
*/
  width:100%;
background-color:#efefef;
  letter-spacing: .02em;
   border-bottom: 3px solid #909090;
   opacity:.9;
   font-size: 1.2em;
   font-size: 2em;
   font-weight: 600;
   font-weight: 700;
   border-top-left-radius: 20px;
   box-sizing:border-box;
   border-top-right-radius: 20px;
   height:48px;
    padding: 8px 8px 5px 15px;
      padding-top:4px; padding-bottom:6px;
  color: #000000;
  text-shadow: 1px 2px 1px #0e1b25;
  text-align: center;
}
}
div.infobox .margin {
 
   height:15px;
.archonAdaptive .variantName {
   /* background-color: #0b5866;
  background-image: linear-gradient(90deg, #073c45, #0b5866);
  color: white; */
  background-color:#efefef;
 
  border-bottom: 3px solid #909090;
    font-size: 1.2em;
  font-weight: 600;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 8px 8px 5px 15px;
}
}
div.infobox .smallmargin {
 
   height:5px;
.archonTriad .variantName {
   /* background-color: #2d0f63;
  background-image: linear-gradient(90deg, #1e0a43, #2d0f63);
  color:white; */
  background-color:#efefef;
 
  border-bottom: 3px solid #909090;
    font-size: 1.2em;
  font-weight: 600;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 8px 8px 5px 15px;
}
}


/* generic row */
.deckName {
div.infobox .row {
   font-size: 1em;
   display: flex;
   padding: 5px 5px 3px 8px;
   padding: 1px;
}
}


div.infobox .middlerow {
.deckSet {
   padding-top: 5px;
   font-size: 1em;
   padding-bottom: 5px;
   padding: 2px 5px 3px 8px;
  display: flex;
  font-weight: bold;
}
}


div.infobox .bottomrow {
.deckLink {
   display: flex;
   font-size: 1em;
   padding: 1px;
   padding: 2px 5px 8px 8px;
  border-bottom: 1px solid #bababa;
}
}


div.infobox .textleft {
.deckImage {
   flex: 32%;
   padding: 8px 5px 8px 8px;
  font-weight: bold;
   text-align: left;
   text-align: right;
   box-sizing: border-box;
   margin-right: 5px;
  margin-left: 2px;
}
}


div.infobox .textright {
.deckImage img {
   flex: 68%;
   border-radius: 15px;
   margin-right: 5px;
   filter: drop-shadow(0 0 0.2rem #909090);
  width: 270px;
  height: auto;
}
}


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


div.infoboxcota .topline {
.decklist {
background-image:linear-gradient(45deg,#df3a68,#f7cdd9,#fbe9ee,#ed91ab);
   flex: 1;
   height:5px;
   min-width:300px;
  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%;
/* toggle display */
 
.hide {
   display: none
}
}
div.topimagecota img {
 
   border:solid 3px #f1a7bc;
.accordion {
   list-style: none;
  padding: 0;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
}


div.infoboxcota .name {
.accordion li,
   color:#ffffff;
.accordion ul {
    background-image: linear-gradient(#420b1a, #6e122c);
   margin-left: 0px;
    opacity:.9;
}
}


div.infoboxcota .row  {
.deckpreview {
  width: 100%;
  display: block;
  height: auto;
  cursor: pointer;
  text-align: left;
  transition: background .3s ease;
  box-sizing: border-box;
  background-color: #ffffff;
  padding:12px 5px 12px 8px;
  border-bottom:1px solid #c0c0c0;
  line-height:1.8em;
}
}


div.infoboxcota .topimage {
.deckpreview:hover {
   background-image: linear-gradient(#ffffff, #fbe9ee, #ffffff);
   background: #eaeaea;
  box-sizing: border-box;
}
}


/* sets up the AoA coloring scheme */
.teamName {
div.infoboxaoa {
  width: 100%;
    border: 1px solid #a0a0a0;
  display: block;
  height: auto;
  cursor: pointer;
  text-align: left;
  transition: background .3s ease;
  box-sizing: border-box;
/* border-top-left-radius: 20px;
  border-top-right-radius: 20px; */
  border-radius:20px;
  padding: 6px 8px 6px 15px;
  border-left:5px solid #505050;
  background-color:#efefef;
  font-size: 1.3em;
  margin-top:10px;
  margin-bottom:5px;
  font-weight:600;
}
}


div.infoboxaoa .topline {
.teamName:hover {
   background-image: linear-gradient(45deg, #6b9ec7, #b3ddff, #e6f4ff, #b3ddff);
   background: #d0d0d0;
   height:5px;
   box-sizing: border-box;
  position:absolute;
  top:185px;
  width:100%;
}
}
div.infoboxaoa .bottomline {
 
   background-image: linear-gradient(45deg, #6b9ec7, #b3ddff, #e6f4ff, #b3ddff);
 
   height:5px;
ul.accordion .inner {
   position:absolute;
   text-align: left;
   top:238px;
   overflow: hidden;
  width:100%;
   max-height: 0;
   transition: max-height .6s ease;
}
}


div.infoboxaoa .name {
ul.accordion .inner2 {
   color:#ffffff;
   text-align: left;
    background-image: linear-gradient(#2a506f, #3f78a6);
  max-height: 3000px;
  transition: max-height .6s ease;
}
}


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


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