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
(Tags: Mobile edit, Mobile web edit)
 
Line 31: Line 31:
  
 
@media (max-width:1000px) {
 
@media (max-width:1000px) {
.cardImg{
+
.card.horizontal{
height:auto;
+
flex-direction:column;
 +
}
 
}
 
}
  
 +
@media (max-width:1000px) {
 +
.cardImg{
 +
height:auto;
 +
}
 
}
 
}
  
Line 48: Line 53:
  
 
.mainCard {
 
.mainCard {
width:auto;
+
width:auto;
 
}
 
}
  
 
.cardImg {
 
.cardImg {
display:flex;
+
display:flex;
align-items: center;
+
align-items: center;
background:#282828;
+
background:#282828;
overflow:hidden;
+
overflow:hidden;
padding:0;
+
padding:0;
max-height: 12em;
+
max-height: 12em;
height:100%;
+
height:100%;
 
}
 
}
  
 
.cardImg a{
 
.cardImg a{
width:100%;
+
width:100%;
 
}
 
}
  
 
.cardImg img{
 
.cardImg img{
width: 100%;
+
width: 100%;
height: auto;
+
height: auto;
transition: 0.4s ease-out;
+
transition: 0.4s ease-out;
opacity:0.85;
+
opacity:0.85;
 
}
 
}
  
 
.secondaryCard {
 
.secondaryCard {
width:auto;
+
width:auto;
padding:7px;
+
padding:7px;
 
}
 
}
  
 
.secondaryCard a{
 
.secondaryCard a{
color:#1A5793;
+
color:#1A5793;
 
}
 
}
  
 
.secondaryCard .byline {
 
.secondaryCard .byline {
font-size:.9em;
+
font-size:.9em;
color:#4171A0;
+
color:#4171A0;
 
}
 
}
  
 
.secondaryCard h2 {
 
.secondaryCard h2 {
margin-top:0;
+
margin-top:0;
 
}
 
}

Latest revision as of 18:38, 8 February 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) {
	.card.horizontal{
		flex-direction:column;
	}
}

@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;
}