« MediaWiki:Common.css » : différence entre les versions

De Wiki The-West FR
Aller à la navigation
mAucun résumé des modifications
mAucun résumé des modifications
Ligne 3 : Ligne 3 :
/* ***************************************************** */
/* ***************************************************** */


/* Test sur image de fond */
div.infoProd {
  position: absolute;
  left: 66px; width: 300px;
  z-index: 5;"
}
div.infoProd div {
  background-image: url("http://wiki.the-west.fr/images/f/f8/Fond_pop-up_item.png");
  background-contain;
  background-position: center center;
  background-repeat: no-repeat;
}


div.infoBulle {font-family: Arial,Verdana,Tahoma,sans-serif; font-size: 10px; position: absolute; margin: 0px; padding:0px; z-index: 1000; display:none;}
div.infoBulle div.pos_tr {width:50%; right:0; top:0; bottom:50%; background-position:top right;}
div.ib_contenu {z-index:2; padding:20px; max-width:430px;}
div.infoBulle div.ib_fond div.pos_tr {position:absolute; background-image:url("http://wiki.the-west.fr/images/f/f8/Fond_pop-up_item.png"); background-position: center center;
  background-repeat: no-repeat;} 


/* change l'opacité de l'image au survol de la souris */
/* change l'opacité de l'image au survol de la souris */

Version du 14 janvier 2015 à 16:37

/* ***************************************************** */
/* Le CSS placé ici sera appliqué à tous les habillages. */
/* ***************************************************** */



/* change l'opacité de l'image au survol de la souris */
div.survol:hover {
  opacity:0.75;
  filter:alpha(opacity=75);
}

/* Pour des effets de clignotements */
.tilt {
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  -ms-transition: all 3s ease;
  transition: all 3s ease;
}
.tilt:hover {
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.pulse:hover {
  animation-name: pulse;
  -webkit-animation-name: pulse;	
  animation-duration: 1s;	
  -webkit-animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
       transform: scale(0.95);
       opacity: 0.7;}
  50% {
       transform: scale(1);
       opacity: 1;}	
  100% {
       transform: scale(0.95);
       opacity: 0.7;}			
}

@-webkit-keyframes pulse {
  0% {
       -webkit-transform: scale(0.95);
       opacity: 0.7;}
  50% {
       -webkit-transform: scale(1);
       opacity: 1;}	
  100% {
       -webkit-transform: scale(0.95);
       opacity: 0.7;}			
}

/* ****  Propriétés de la classe infobulle **** */
span.infobulle {
	position: relative;
	border-bottom: thin dotted; 
	cursor: help; 
	outline: none;
	text-decoration: none;
}
span.infobulle:hover {
	text-decoration: none; 
	background: #FFEEDD; 
	z-index: 6; 
}
span.infobulle span {
	position: absolute; 
	left: 100px; 
	top: -150px; 
	width: 250px;
	margin: 20px 0 0 0px; 
	padding: 10px;
	background: #FFF7E6; 
	border: 1px solid #CD853F;
	border-radius: 5px 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	text-align:justify; 
	font-size: 0.9em;
	line-height:14px;
	z-index: 6;
}
span.infobulle:hover span {
	left: 2%; 
	background: #FFF7E6; 
	z-index:6;
} 
span.infobulle span {
	position: absolute; 
	left: -9999px;
	margin: 4px 0 0 0px; 
	padding: 10px;
	border:solid 1px black;
}
span.infobulle:hover span {
	margin: 20px 0 0 100px; 
	background: #FFF7E6; 
	z-index:6;
}
span.infobulle:hover em {
	text-align:center; 
	font-family: Calibri, Tahoma, Geneva, sans-serif; 
	font-size: 1.4em; 
	font-weight: bold;
	line-height:30px;
	display: block; 
}