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

1,442 bytes added ,  12 May 2020
no edit summary
No edit summary
No edit summary
 
(88 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;
}
 
.outer {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
}
 
.deckViewer {
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.archonSolo {
  flex: 1;
  min-width: 310px;
  box-sizing: border-box;
  margin: 5px;
  /* border-left:5px solid #1d6b11;
    border-top-left-radius:20px; */
 
}
 
.archonAdaptive {
   flex: 1;
  min-width: 310px;
  box-sizing: border-box;
  margin: 5px;
 
}
 
.archonTriad {
  flex: 3;
   min-width: 50%;
  box-sizing: border-box;
  margin: 5px;
}
 
.archonSolo .variantName {
/*   background-color: #1d6b11;
   background-image: linear-gradient(90deg, #12420a, #1d6b11);
*/
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;
}
}


@media screen and (min-width: 601px) {
.archonAdaptive .variantName {
   div.infobox {
  /* background-color: #0b5866;
     width: 325px;
  background-image: linear-gradient(90deg, #073c45, #0b5866);
    float: right;
  color: white; */
    margin-left: 10px;
  background-color:#efefef;
    margin-right: 10px;
 
   }
   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;
}
}


@media screen and (max-width: 600px) {
.archonTriad .variantName {
   div.infobox {
  /* background-color: #2d0f63;
     width: 95%;
  background-image: linear-gradient(90deg, #1e0a43, #2d0f63);
    max-width: 350px;
  color:white; */
    margin-left: auto;
  background-color:#efefef;
    margin-right: auto;
 
   }
   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;
}
}


/* Image at the top */
.deckName {
div.topimage img {
   font-size: 1em;
   border-radius: 20px;
   padding: 5px 5px 3px 8px;
   border: solid 3px #6b9ec7;
  box-shadow: 0 10px 20px #cccccc, 0 6px 6px #ababab;
}
}


div.infobox .topimage {
.deckSet {
   padding-top: 0px;
   font-size: 1em;
   padding-bottom: 10px;
   padding: 2px 5px 3px 8px;
  text-align: center;
}
}


/* header */
.deckLink {
div.infobox .name {
   font-size: 1em;
  position:absolute;
   padding: 2px 5px 8px 8px;
  top:190px; left:0px;
   border-bottom: 1px solid #bababa;
  width:100%;
  letter-spacing: .02em;
   font-size: 1.7em;
   font-weight: 700;
   box-sizing:border-box;
  height:42px;
      padding-top:6px; padding-bottom:6px;
  color: #000000;
  text-shadow: 1px 2px 1px #0e1b25;
  text-align: center;
}
}
div.infobox .margin {
 
   height:15px;
.deckImage {
   padding: 8px 5px 8px 8px;
  text-align: left;
  box-sizing: border-box;
}
}
div.infobox .smallmargin {
 
   height:5px;
.deckImage img {
  border-radius: 15px;
  filter: drop-shadow(0 0 0.2rem #909090);
  width: 270px;
   height: auto;
}
}


/* generic row */
.triadDecks {
div.infobox .row {
   display: flex;
   display: flex;
   padding: 1px;
   flex-wrap: wrap;
   background-color: #e6f4ff;
}
 
.decklist {
  flex: 1;
   min-width:300px;
}
}


div.infobox .middlerow {
 
  padding-top: 5px;
 
  padding-bottom: 5px;
 
  display: flex;
 
   font-weight: bold;
/* toggle display */
 
.hide {
   display: none
}
}


div.infobox .bottomrow {
.accordion {
   display: flex;
   list-style: none;
   padding: 1px;
   padding: 0;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
}


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


div.infobox .textright {
.deckpreview {
   flex: 68%;
   width: 100%;
   margin-right: 5px;
   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;
}
}


.deckpreview:hover {
  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:232px;
   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  {
 
   background-color:#ffffff;
.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/25151...33280"