« 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 268 : Ligne 268 :


span.popup_article:hover {
span.popup_article:hover {
   background:url("http://wiki.the-west.fr/images/8/85/Info_bulle_objets2.png") no-repeat;
   background:url("  background:url("http://wiki.the-west.fr/images/e/e1/Invisible.png");") x-repeat;
   text-decoration: none;  
   text-decoration: none;  
   z-index: 6;
   z-index: 6;
}
span.popup_article span {
position: absolute;
z-index: 6;
}
}

Version du 24 avril 2015 à 08:26

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

/* Paramètres globaux de mise en page du Wiki => en cours de Test */

#wrapper {width: 1120px; } /* Largeur du wiki */
#container {width: 860px;} /* Largeur de la zone contenu */
#contentTop {width: 860px; background-size: 100% 77px;}  /* zone supérieure */
#p-search .pBody {width: 200px; background-size:200px 24px;}  /* Diminution en largeur du module de recherche */
#searchInput {width: 173px;}
#navigationTop {
  position: relative;
  background: url("http://wiki.the-west.fr/images/1/16/MenuTopNew.png") no-repeat;
  width: 260px;
  height: 130px;
}
#navigationBottom {
  position: absolute;
  background: url("http://wiki.the-west.fr/images/e/e2/MenuBottomNew.png") no-repeat;
  width: 260px;
  height: 95px;
  right: -15px;
  bottom: -51px;
}
#navigation {width: 225px; font-size: 11px;}
#west_pl_hints_container {width: 830px!important; background-size: 100%!important;}
#content {width: 830px; background-size: 100%;}
#contentFooter {background-size: 101%;}
#p-cactions {width: 810px;}
.portlet h5 {font-size: 120%; font-weight: bold; font-style: italic; font-family:georgia; color: #804000;}
textarea {width: 793px;}

#fondstd {
  background-image: url("http://wiki.the-west.fr/skins/thewest/images/content/contentBg.png");
  background-repeat: repeat;
}

table.prerequis {
  background-image:url('images/content/contentBg.png');
  background-repeat: repeat;
  border:0px;
  border-spacing:0;
  margin:0 auto;  
}

div.prerequis {
/*  background: url("http://wiki.the-west.fr/skins/thewest/images/content/contentBg.png") repeat-y; */
  border:1px solid #CCC; 
  border-radius:10px; 
  background:#FFF; 
  border-right:3px solid #ccc; 
  border-bottom:3px solid #ccc; 
  padding:5px; 
  line-height:1.3; 
  margin-left:2px; 
  margin-right:1px;
  text-align:center;
}


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

/* définit une fonction de zoom x 1.3 */
.zoom:hover {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
/* -webkit-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%; */
}
.zoom {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.zoom {
border: 0px solid #fff;
margin: 40px 0px;
padding: 10px;
}

/* pour une fonction qui dplie vers la droite */
.transition-X{
  position:relative; 
  width:200px;
  height:30px;
  line-height:30px;
  font-size:12px;
  text-align:center;
  border:solid 1px black;
  border-radius:10px;
  background-color:#F2D494;
  -webkit-transition:1s width linear;
  -moz-transition:1s width linear;
  -o-transition:1s width linear;
}
.transition-X:hover{
  width:600px;
}

/* 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;
}
.clignote {
  animation-name: pulse;
  -webkit-animation-name: pulse;	
  animation-duration: 1.5s;	
  -webkit-animation-duration: 1.5s;
  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, span.DDMbulle {
	position: relative;
	cursor: help; 
	outline: none;
	text-decoration: none;
}
span.infobulle {border-bottom: thin dotted; }
span.infobulle:hover, span.DDMbulle:hover {
	text-decoration: none; 
	z-index: 6; 
}
span.infobulle:hover {background: #FFEEDD; }
span.infobulle span, span.DDMbulle span {
	position: absolute; 
	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 span {width: 450px; left: 80px; top: -150px; }
span.DDMbulle span {width: 250px; right: -30px; top: -30px; }
span.infobulle:hover span, span.DDMbulle:hover span {
	left: 2%; 
	background: #FFF7E6; 
	z-index:6;
} 
span.infobulle span, span.DDMbulle span {
	position: absolute; 
	left: -9999px;
	margin: 4px 0 0 0px; 
	padding: 10px;
	border:solid 1px black;
}
span.infobulle:hover span { margin: 20px 0 0 125px; }
span.DDMbulle:hover span { margin: 30px 0 30px 30px; }
span.infobulle:hover em, span.DDMbulle:hover em {
	text-align:center; 
	font-family: Calibri, Tahoma, Geneva, sans-serif; 
	font-size: 1.4em; 
	font-weight: bold;
	line-height:30px;
	display: block; 
}

.button {
  background-color: #FE7E03;
  border: 1px solid #FE7E03;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 12px;
  height: 19px;
  line-height: 20px;
  margin: 0;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
}

#Fermer {
  float: right;
  text-align: right;
  width: 50px;
}
div#Fermer {
  border: 0;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

#contenu {
  background:url("http://wiki.the-west.fr/images/8/85/Info_bulle_objets2.png") no-repeat left top, 
  url("http://wiki.the-west.fr/images/3/36/Jeu_The_West.png") no-repeat right top; 
}

#article {
  background:url("http://wiki.the-west.fr/images/e/e1/Invisible.png");
  background-size: 285px 470px;
}

span.popup_article { 
  position: relative;	
  cursor: help; 
  outline: none;
  text-decoration: none;
}

span.popup_article:hover {
  background:url("  background:url("http://wiki.the-west.fr/images/e/e1/Invisible.png");") x-repeat;
  text-decoration: none; 
  z-index: 6;
}

span.popup_article span {
	position: absolute; 
	z-index: 6;
}