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

Version du 6 janvier 2015 à 21:06

/* ***************************************************** */
/* 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 **** */

.infobulle {
	border-bottom: thin dotted; 
	background: #FFF7E6;
	color: #000000; 
	outline: none;
	cursor: help; 
	text-decoration: none;
	position: relative;
}
.infobulle span {
	margin-left: -999em;
	position: absolute;
}
.infobulle:hover span {
	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);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	text-align:justify; 
	position: absolute; 
	left: 1em; 
	top: 2em; 
	z-index: 99;
	margin-left: 0; 
	width: 250px;
	padding: 5px;
	}
.infobulle:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: left; 
	position: absolute;
}
.infobulle:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; 
	font-size: 1.2em; 
	font-weight: bold;
	display: block; 
	padding: 0.2em 0 0.6em 0;
}
.basic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critic { background: #FFCCAA; border: 1px solid #FF3334;	}
.aide { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #FFF7E6; border: 1px solid #2BB0D7;	}
.avert { background: #FFFFAA; border: 1px solid #FFAD33; }


/* autre style pour les infobulles (en test) */
h1 {
  font-family:arial, verdana, sans-serif; 
  font-size:1.2em; 
  font-weight:bold;  
  color:#4B0082;  
}

a.bulle {
 position:relative;
 color:#000000; 
 text-decoration:none; 
 font-family:arial, verdana, sans-serif; 
 text-align:justify; 
 font-size:1.0em;
}

a.bulle:hover {
  background: none; 
  z-index: 50; 
}

a.bulle span { 
 display: none;
}

a.bulle:hover span {
  display: block; 
  position: absolute;
  top: -40px; 
  right: 20px;
  font-family:arial, verdana, sans-serif; 
  text-align:justify; 
  font-size:1.1em;
  font-weight:normal;
  width:250px;
  background: white;
  padding: 5px;
  border: 1px solid;
}