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

Version du 7 janvier 2015 à 20:42

/* ***************************************************** */
/* 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: 100px; 
	top: -60px; 
	z-index: 99;
	margin-left: 0; 
	width: 250px;
	padding: 5px;
	}
.infobulle:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: right; 
	position: absolute;
}
.infobulle:hover em {
	text-align:center; 
	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 #CD853F;	}
.info { background: #FFF7E6; border: 1px solid #CD853F;	}
.avert { background: #FFFFAA; border: 1px solid #FFAD33; }

/* Autre utilisation d'infobulle */
a.bulle {outline:none;}
a.bulle strong {line-height:50px;}
a.bulle:hover {text-decoration:none;} 
a.bulle span {
    z-index:10;
	display:none; 
	padding:14px 20px;
    margin-top:-30px; 
	margin-left:28px;
    width:300px; 
	line-height:16px;
	border-radius:4px;
    box-shadow: 5px 5px 8px #CCCCCC;
	text-align:justify;
}
a.bulle:hover span {
    display:inline; 
	position:absolute; 
	color:#111;
    border:1px solid #DDCCAA; 
	background:#FFFAF0;
}
.icone {
	z-index:20;
	position:absolute;
	top:5px;
	left:5px;	
	border:0;
}