MediaWiki:Common.css : Différence entre versions

De Wiki @ Brest

Ligne 4 : Ligne 4 :
 
     background-position:top;
 
     background-position:top;
 
     background-repeat:repeat-x;
 
     background-repeat:repeat-x;
 +
}
 +
 +
/* Image cropping */
 +
.img-crop,
 +
.img-crop img{
 +
width: 150px; /* gotta be responsive these days */
 +
}
 +
.img-crop{
 +
border-color: 1px dotted #ededed; /* some background color for short images */
 +
overflow: hidden;
 +
width:160px;
 +
height:120px;
 +
margin:4px;
 +
padding:0;
 +
float:left;
 +
/* remove white-space for inline-block elements */
 +
letter-spacing: -0.31em; /* webkit */
 +
*letter-spacing: normal; /* reset IE < 8 */
 +
word-spacing: -0.43em; /* IE < 8 && gecko */
 +
}
 +
.img-crop:before,
 +
.img-crop img{
 +
/* vertically center the image */
 +
display: inline-block;
 +
vertical-align: middle;
 +
horizontal-align: middle;
 +
}
 +
.img-crop:before{
 +
/* pseudo element to vertically align image to */
 +
content: "";
 +
 +
/* Magic Number */
 +
/* Set this to your desired height(to width) ratio */
 +
padding-top: 75%; /* % of original image width */
 +
}
 +
.img-crop img{
 +
/* removes(sorta) image from the flow */
 +
padding-left: 100%;
 +
margin: -999em -100%;
 
}
 
}

Version du 11 juillet 2013 à 13:44

/* Le CSS placé ici sera appliqué à tous les habillages. */
.degrade{
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/f/fb/Gradient_43px.png);
    background-position:top;
    background-repeat:repeat-x;
}
 
/* Image cropping */
.img-crop,
.img-crop img{
	width: 150px; /* gotta be responsive these days */
}
.img-crop{
	border-color: 1px dotted #ededed; /* some background color for short images */
	overflow: hidden;
	width:160px;
	height:120px;
	margin:4px;
	padding:0;
	float:left;
	/* remove white-space for inline-block elements */
	letter-spacing: -0.31em; /* webkit */
	*letter-spacing: normal; /* reset IE < 8 */
	word-spacing: -0.43em; /* IE < 8 && gecko */
}
.img-crop:before,
.img-crop img{
	/* vertically center the image */
	display: inline-block;
	vertical-align: middle;
	horizontal-align: middle;
}
.img-crop:before{
	/* pseudo element to vertically align image to */
	content: "";
 
	/* Magic Number */
	/* Set this to your desired height(to width) ratio */
	padding-top: 75%; /* % of original image width */ 
}
.img-crop img{
	/* removes(sorta) image from the flow */
	padding-left: 100%;
	margin: -999em -100%;
}