Team:INSA-Lyon/css global
From 2014.igem.org
(4 intermediate revisions not shown) | |||
Line 222: | Line 222: | ||
right: 0; | right: 0; | ||
background: #248588; | background: #248588; | ||
+ | z-index: 100; | ||
} | } | ||
- | #menu a { | + | #menu a *{ |
color:#fff; | color:#fff; | ||
- | font-family: "Roboto", sans-serif; | + | font-family: "Roboto", sans-serif !important; |
} | } | ||
Line 341: | Line 342: | ||
.menuulli:hover .ssmenu {display:block !important;} | .menuulli:hover .ssmenu {display:block !important;} | ||
/*--------------------- FIN DU CSS DE MENU ---------------------------------------------*/ | /*--------------------- FIN DU CSS DE MENU ---------------------------------------------*/ | ||
+ | |||
+ | .rotate{ | ||
+ | -webkit-transition-duration: 0.8s; | ||
+ | -moz-transition-duration: 0.8s; | ||
+ | -o-transition-duration: 0.8s; | ||
+ | transition-duration: 0.8s; | ||
+ | |||
+ | -webkit-transition-property: -webkit-transform; | ||
+ | -moz-transition-property: -moz-transform; | ||
+ | -o-transition-property: -o-transform; | ||
+ | transition-property: transform; | ||
+ | |||
+ | overflow:hidden; | ||
+ | |||
+ | } | ||
+ | |||
+ | .rotate:hover | ||
+ | { | ||
+ | -webkit-transform:rotate(360deg); | ||
+ | -moz-transform:rotate(360deg); | ||
+ | -o-transform:rotate(360deg); | ||
+ | } |
Latest revision as of 01:45, 18 October 2014
html, body { margin:0; padding:0; width: 100%; }
- {
font-family: arial;
}
/*--------------------- Wiki hack ---------------------------------------------*/
/* la barre titre (banniere igem+ menu haut)*/
- top-section
{
height: 10px; width: auto; margin: 0; margin-bottom: -1em; padding: 0; border: 0 /*none transport*/;
}
/*le conteneur de la banière igem avec un lien vers igem*/
- p-logo
{
display:none; border:none; margin:none;
}
/* la barre de menu du haut */
- menubar
{
background: none repeat scroll 0 0 transparent !important; color: transparent !important; position: absolute; top: -6px; display: table-cell;
}
/*les lien de la barre de menu du haut */
- menubar a
{
text-decoration:none; color:#000000;
}
/* le menu de haut gauche */ .left-menu {
left: 40px; background-color:transparent; /*display:none;*/
}
/* le menu de login haut droite*/ .right-menu {
color:transparent; text-decoration:none; text-align: right; background-color:none;
}
/* les lien du login */ .right-menu a {
color:transparent; text-decoration:transparent; background-color:none;
}
- menubar *
{ color: transparent !important; background: transparent !important;
}
- top-section:hover #menubar *
{ color: #ffffff !important; }
- top-section a:hover #menubar *
{ text-decoration: underline; }
- top-section:hover #menubar
{ /*background: rgba(255, 255, 255, 0.75) !important;*/ margin-top: 5px; }
/* la barre de recherche*/
- search-controls
{
display:none;
}
/* le body de la page*/
- content
{
background-color: transparent; border:none; padding:none; margin:none; line-height:1em;
width: 99%; }
- globalWrapper
{
font-size: 150%;
}
/*titre de page */ .firstHeading {
display:none; border: none;
}
- footer-wrapper
{
position: relative; width: 100%; margin: auto; background-color: transparent;
}
- f-copyrightico
{
margin: 1% 0 1% 1%;
}
- f-poweredbyico
{
margin: 1% 1% 1% 0;
}
/* la boite en bas de page*/
- footer-box
{
display: none;
}
/* le cadre sous le body useless */
- catlinks
{
display: none;
}
ul {
list-style-image: none; line-height: 1.2em;
}
/* ----------------End of the wiki hack -------------------------------------*/ h1 { font-size: 2.5em; font-weight: normal;
border:none;
}
h2 { color: #fff; font-size: 6em; bottom-bottom: -10px; font-weight: normal; line-height: 20px;
border:none;
}
h4 { color: #fff; font-size: 3em; bottom: -10px; font-weight: normal; line-height: 20px; }
h5{
color: #000000;
line-height:1em;
font-size: 1.5em;
}
h6{
color: #000000; font-size: 1.2em;
line-height:1em; }
h3 { font-family: "Roboto", sans-serif; color: #fff; font-size: 1.3em; text-align: center; font-weight: normal; }
ul{ list-style-type: disc; }
a { text-decoration: none !important; }
/*--------------------- CSS DU MENU ---------------------------------------------*/
- menu {
position: fixed; width: 50px; top: 0; left: 0; bottom: 0; right: 0; background: #248588; z-index: 100;
}
- menu a *{
color:#fff; font-family: "Roboto", sans-serif !important; }
.hu-icon a:visited { color:#248588; }
- menu ul {
list-style-type: none !important;
}
- menuul{
text-align: center; padding-bottom: 10px; margin: 0; width: 100%; padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.menuulli{ margin: 0; display: block; height: 18%; position: relative; text-align: center; width: 100%; }
.menuullia {
display: block; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.menuullia span {
-webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); display: block; top: 50%; position: absolute; margin-top: -8px; width: 50px; color: #FFFFFF;
}
/* Sous menu */ .ssmenu { width: 250px; height: 350px; top: -10px; text-align: center; background-color: #248588; line-height: 32px; padding-top: 50px; padding-left: 0px; display: none; position: absolute; left: 26px; position: fixed; height: 100%;
text-decoration: none;
list-style-type: none color: #FFFFFF; }
.ssmenu a:visited { color: #FFFFFF; }
.iconmenu { background:#FFF;
width:130px; height:115px; text-align:center; border-radius:50%; margin: auto; padding-top: 15px; overflow: hidden; line-height: 20px; margin-bottom: 20px; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
color:#248588; } .hu-icon {color: #285459;}
.hu-icon li:hover {
box-shadow: 0 0 65px #285459; -moz-box-shadow: 0 0 65px #285459; -webkit-box-shadow: 0 0 65px #285459;
}
.hi-icon li:hover { background-color: #285459; }
.ssmenu:nth-child(odd) {background-color: #285459;}
.menuulli:nth-child(odd) { background:#46adb2; } .menuulli:first-child { height:6% !important; } .menuulli:hover .ssmenu {display:block !important;} /*--------------------- FIN DU CSS DE MENU ---------------------------------------------*/
.rotate{
-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; }
.rotate:hover {
-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg);
}