Information.png

Welcome to the Kingdom Hearts Database! 👑 Pardon the dust! We're rolling out new updates and improvements to the design of the Kingdom Hearts Database! Stay tuned for details this week! 👑 Our Spoiler policy is in effect! All articles related to Kingdom Hearts III must have the Unreleased template until checked and cleared by a member of the site staff! 👑 Be sure to join our Discord server and meet our growing community!

Difference between revisions of "Template:Card/style.css"

From Kingdom Hearts Database
Jump to: navigation, search
 
Line 58: Line 58:
 
  padding:0;
 
  padding:0;
 
  max-height: 12em;
 
  max-height: 12em;
 +
height:100%;
 
}
 
}
  

Latest revision as of 00:25, 11 January 2020

.card{
	transition:0.2s ease-in;
	display:flex;
} 

.card:hover {
	box-shadow:0px 0px 7px 0px rgba(0,0,0,.6);
	z-index:99;
	position:relative;
}

.card:hover .cardImg img{
	transform: scale(1.04);
	outline:none;
	opacity:1.0;
}

.card:hover .secondaryCard a{
	text-decoration:none;
	color:#282828;
}

.card.vertical{
	flex-direction:column;
	height:100%;
}

.card.horizontal{
	flex-direction:row;
}

@media (max-width:1000px) {
.cardImg{
 height:auto;
}

}

.card.horizontal .mainCard{
	flex:1;
	height:auto;
	max-height:none;
}

.card.horizontal .secondaryCard{
	flex:2;
}

.mainCard {
 width:auto;
}

.cardImg {
 display:flex;
 align-items: center;
 background:#282828;
 overflow:hidden;
 padding:0;
 max-height: 12em;
 height:100%;
}

.cardImg a{
 width:100%;
}

.cardImg img{
 width: 100%;
 height: auto;
 transition: 0.4s ease-out;
 opacity:0.85;
}

.secondaryCard {
 width:auto;
 padding:7px;
}

.secondaryCard a{
 color:#1A5793;
}

.secondaryCard .byline {
 font-size:.9em;
 color:#4171A0;
}

.secondaryCard h2 {
 margin-top:0;
}