Template:Artist Previews/styles.css: Difference between revisions

From Archon Arcana - The KeyForge Wiki

Template:Artist Previews/styles.css (view source)

Revision as of 20:03, 3 December 2020

257 bytes removed ,  3 December 2020
no edit summary
No edit summary
No edit summary
 
(45 intermediate revisions by the same user not shown)
Line 1: Line 1:
.pageOverlay {
    font-size:0px;
    line-height:0px;
    height:0px;
    float:left;
}
.pageOverlay img {
    display:none;
}
.pageOverlay p {
    height:0px;
}


.artGallery a:link,
.artGallery a:link,
Line 11: Line 25:
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     justify-content: flex-start;
     justify-content: center;
     margin-top: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
     margin-bottom: 20px;
Line 42: Line 56:
     transform: scale(1.5);
     transform: scale(1.5);
     object-fit: cover;
     object-fit: cover;
     object-position: -9px 6px;
     object-position: -9px 10px;
     margin: 0px;
     margin: 0px;
     opacity: .6;
     opacity: .6;
Line 54: Line 68:
     transform: scale(1.5);
     transform: scale(1.5);
     object-fit: cover;
     object-fit: cover;
     object-position: -5px -20px;
     object-position: -5px -15px;
     margin: 0px;
     margin: 0px;
     opacity: .6;
     opacity: .6;
Line 66: Line 80:
     transform: scale(1.5);
     transform: scale(1.5);
     object-fit: cover;
     object-fit: cover;
     object-position: 0px -100px;
     object-position: 0px -90px;
     margin: 0px;
     margin: 0px;
     opacity: .6;
     opacity: .6;
Line 93: Line 107:


   .artistCards:hover img {
   .artistCards:hover img {
     opacity: .9;
     opacity: 1;
   }
   }


Line 100: Line 114:


/* average sized phones */
/* average sized phones */
@media screen and (min-width:361px) and (max-width:450px) {
@media screen and (min-width:360px) and (max-width:450px) {
   .artGallery {
   .artGallery {
     display: flex;
     display: flex;
Line 129: Line 143:


   .artistCards .cardFull {
   .artistCards .cardFull {
     max-width: 200px;
     width: 300px;
    width: 100%;
     height: 420px;
     height: 100%;
    transform: scale(1);
     object-fit: cover;
     object-fit: cover;
     object-position: -60px -50px;
     object-position: -100px -60px;
     margin: 0px;
     margin: 0px;
     opacity:1;
     opacity:1;
Line 140: Line 152:


   .artistCards .cardArtifact {
   .artistCards .cardArtifact {
     max-width: 200px;
     width: 300px;
    width: 100%;
     height: 420px;
     height: 100%;
    transform: scale(1);
     object-fit: cover;
     object-fit: cover;
     object-position: -5px -20px;
     object-position: -60px -70px;
     margin: 0px;
     margin: 0px;
     opacity: 1;
     opacity: 1;
Line 151: Line 161:


   .artistCards .cardUpgrade {
   .artistCards .cardUpgrade {
     max-width: 200px;
     width: 300px;
    width: 100%;
     height: 420px;
     height: 100%;
    transform: scale(1);
     object-fit: cover;
     object-fit: cover;
     object-position: 0px -100px;
     object-position: -40px -190px;
     margin: 0px;
     margin: 0px;
     opacity: 1;
     opacity: 1;
   }
   }




Line 181: Line 190:


/* very small phones */
/* very small phones */
@media screen and (max-width:360px) {
@media screen and (max-width:359px) {
   .artGallery {
   .artGallery {
     display: flex;
     display: flex;
Line 192: Line 201:


   .artistCards {
   .artistCards {
    background-color: #c0c0c0;
     width: 100%;
     width: 100%;
     height: 30px;
     flex: 1;
     display: block;
     display: block;
    position: relative;
     overflow: hidden;
     overflow: hidden;
    border:1px solid black;
   }
   }
    
 
    .artistCards .cardFull {
   div.artistCards:nth-child(even) {
     width: 100%;
     background-color: #e0e0e0;
    height: 100%;
  }
    transform: scale(1.2);
 
     object-fit: cover;
  div.artistCards:nth-child(odd) {
     object-position: 0px 25%;
     background-color: #ffffff;
    margin: 0px;
  }
     opacity: .5;
 
  .artistCards .cardFull {
     display: none;
  }
 
  .artistCards .cardArtifact {
     display: none;
   }
   }
    
 
      .artistCards .cardArtifact {
   .artistCards .cardUpgrade {
     width: 100%;
     display: none;
    height: 100%;
    transform: scale(1.2);
    object-fit: cover;
    object-position: 0px 25%;
    margin: 0px;
    opacity: .5;
   }
   }
    
 
        .artistCards .cardUpgrade {
   .artistCards .hiddenMobile {
     width: 100%;
     display: none;
    height: 100%;
    transform: scale(1.2);
    object-fit: cover;
    object-position: 0px 60%;
    margin: 0px;
    opacity: .5;
   }
   }


    
 
    .artistCards .artistName {
   .artistCards .artistName {
     width:50%;
     width: 100%;
    min-width:170px;
     text-align: left;
    max-width:200px;
     opacity: 1;
     text-align: center;
     color: black;
     background-color: #202020;
     padding-left:20px;
     opacity:1;
     color: white;
     font-size: 1.1em;
     font-size: 1.1em;
    position: absolute;
     padding-top: 8px;
    bottom: 0px;
     padding-bottom: 8px;
    left: 0px;
     padding-top: 6px;
     padding-bottom: 6px;
     box-sizing: border-box;
     box-sizing: border-box;
    border-top-right-radius:20px;
   }
   }
    
 
   .artGallery a:link,
  .artGallery a:hover,
  .artGallery a:visited {
    color: black;
    text-decoration: none;
    border-bottom:1px dotted black;
  }
}
}
Retrieved from "https://archonarcana.com/Special:MobileDiff/33621...50765"