Team:INSA-Lyon/css global

From 2014.igem.org

(Difference between revisions)
 
(194 intermediate revisions not shown)
Line 1: Line 1:
-
/*--------------------- Wiki hack ---------------------------------------------*/
+
html, body {
 +
margin:0;
 +
padding:0;
 +
width: 100%;
 +
}
-
body {
+
* {
-
  background-color : #FFF;
+
    font-family: arial;
-
  margin:0px 0px 0px 0px;
+
-
  /*-webkit-hyphens: auto;
+
-
  -moz-hyphens: auto;
+
-
  -ms-hyphens: auto;
+
-
  -o-hyphens: auto;
+
-
  hyphens: auto;*/
+
}
}
 +
 +
/*--------------------- Wiki hack ---------------------------------------------*/
 +
/* la barre titre (banniere igem+ menu haut)*/
/* la barre titre (banniere igem+ menu haut)*/
#top-section
#top-section
{
{
-
  height: 5px;
+
    height: 10px;
-
  width: auto;
+
    width: auto;
-
  margin: 0;
+
    margin: 0;
-
  margin-bottom: -1.5em;
+
    margin-bottom: -1em;
-
  padding: 0;
+
    padding: 0;
-
  border: 0 /*none transport*/;
+
    border: 0 /*none transport*/;
}
}
 +
/*le conteneur de la banière igem avec un lien vers igem*/
/*le conteneur de la banière igem avec un lien vers igem*/
#p-logo
#p-logo
{
{
-
  display:none;
+
    display:none;
-
  border:none;
+
    border:none;
-
  margin:none;
+
    margin:none;
}
}
 +
/* la barre de menu du haut */
/* la barre de menu du haut */
#menubar
#menubar
{
{
-
  background: none repeat scroll 0 0 transparent !important;
+
    background: none repeat scroll 0 0 transparent !important;
-
  color: transparent !important;
+
    color: transparent !important;
-
  position: absolute;
+
    position: absolute;
-
  top: -6px;
+
    top: -6px;
-
  display: table-cell;
+
    display: table-cell;
}
}
 +
/*les lien de la barre de menu du haut */
/*les lien de la barre de menu du haut */
#menubar a
#menubar a
{
{
-
  text-decoration:none;
+
    text-decoration:none;
-
  color:#000000;
+
    color:#000000;
}
}
 +
/* le menu de haut gauche */
/* le menu de haut gauche */
-
#menubar .left-menu
+
.left-menu
{
{
-
  width: 100%;
+
    left: 40px;
-
  background-color:transparent;
+
    background-color:transparent;
-
  /*display:none;*/
+
  /*display:none;*/
}
}
-
/* le menu de login haut droite*/ .right-menu {
+
 
-
  color:transparent;
+
/* le menu de login haut droite*/
-
  text-decoration:none;
+
.right-menu
-
  text-align: right;
+
{
-
  background-color:none;
+
    color:transparent;
-
  right: 15px;
+
    text-decoration:none;
 +
    text-align: right;
 +
    background-color:none;
}
}
-
/* les lien du login */ .right-menu a {
+
 
-
  color:transparent;
+
/* les lien du login */
-
  text-decoration:transparent;
+
.right-menu a
-
  background-color:none;
+
{
 +
    color:transparent;
 +
    text-decoration:transparent;
 +
    background-color:none;
}
}
 +
#menubar *
#menubar *
-
{ color: transparent !important; background: transparent !important; }
+
{
 +
color: transparent !important;
 +
background: transparent !important;
 +
 
 +
}
 +
 
#top-section:hover #menubar *
#top-section:hover #menubar *
-
{ color: blue !important; }
+
{
 +
color: #ffffff !important;
 +
}
 +
 
 +
#top-section a:hover #menubar *
 +
{
 +
text-decoration: underline;
 +
}
 +
 
#top-section:hover #menubar
#top-section:hover #menubar
-
{ background: rgba(255, 255, 255, 0.75) !important; }
+
{
 +
/*background: rgba(255, 255, 255, 0.75) !important;*/
 +
margin-top: 5px;
 +
}
 +
 
/* la barre de recherche*/
/* la barre de recherche*/
#search-controls
#search-controls
{
{
-
  display:none;
+
    display:none;
}
}
 +
/* le body de la page*/
/* le body de la page*/
#content
#content
{
{
-
  width: 100%;
+
    background-color: transparent;
-
  background-color: transparent;
+
    border:none;
-
  border:none;
+
    padding:none;
-
  padding:none;
+
    margin:none;
-
  margin:none;
+
    line-height:1em;
-
  line-height:1em;
+
width: 99%;
}
}
 +
#globalWrapper
#globalWrapper
{
{
-
font-size: 150%;
+
  font-size: 150%;
}
}
-
/*titre de page */ .firstHeading {
+
 
-
  display:none;
+
/*titre de page */
-
  border: none;
+
.firstHeading
 +
{
 +
    display:none;
 +
    border: none;
}
}
 +
#footer-wrapper
#footer-wrapper
{
{
-
  position: relative;
+
    position: relative;
-
  width: 70%;
+
    width: 100%;
-
  margin: auto;
+
    margin: auto;
-
  margin-top:15px;
+
    background-color: transparent;
-
  margin-bottom:5px;
+
-
  background-color: transparent;
+
-
/* -moz-border-radius:15px;
+
-
  -webkit-border-radius:15px;
+
-
  border-radius: 15px;
+
-
  box-shadow: 0px 4px 4px #1c1a19;*/
+
}
}
 +
#f-copyrightico
#f-copyrightico
{
{
-
  margin: 1% 0 1% 1%;
+
    margin: 1% 0 1% 1%;
}
}
 +
#f-poweredbyico
#f-poweredbyico
{
{
-
  margin: 1% 1% 1% 0;
+
    margin: 1% 1% 1% 0;
}
}
 +
/* la boite en bas de page*/
/* la boite en bas de page*/
#footer-box
#footer-box
{
{
-
  display: none;
+
    display: none;
-
  margin-bottom: 10px;
+
}
}
 +
/* le cadre sous le body useless */
/* le cadre sous le body useless */
#catlinks
#catlinks
{
{
-
  display: none;
+
    display: none;
-
}
+
-
ul {
+
-
list-style-image: none;
+
-
line-height: 1.2em;
+
}
}
-
/* ----------------End of the wiki hack -------------------------------------*/
 
-
@font-face {
+
ul
-
font-family: "Roboto";
+
{
-
    src: url('http://potopov.fr/igem/font/RobotoCondensed-Regular.ttf');
+
  list-style-image: none;
-
}
+
  line-height: 1.2em;
-
@font-face {
+
-
font-family: "LatoReg";
+
-
    src: url('http://potopov.fr/igem/font/Lato-Reg.ttf');
+
-
}
+
-
@font-face {
+
-
font-family: "LatoLig";
+
-
    src: url('http://potopov.fr/igem/font/Lato-Lig.ttf');
+
}
}
-
html, body {
+
/* ----------------End of the wiki hack -------------------------------------*/
-
padding:0;
+
h1 {
-
margin-top: -10px;
+
font-size: 2.5em;
-
}
+
font-weight: normal;
-
 
+
        border:none;
-
body {
+
-
width: 100%;
+
-
}
+
-
 
+
-
p {
+
-
font-family: "LatoReg", sans-serif;
+
}
}
h2 {
h2 {
-
font-family: "LatoReg", sans-serif;
 
color: #fff;
color: #fff;
font-size: 6em;
font-size: 6em;
Line 161: Line 173:
font-weight: normal;
font-weight: normal;
line-height: 20px;
line-height: 20px;
 +
        border:none;
}
}
h4 {
h4 {
-
font-family: "LatoLig", sans-serif;
 
color: #fff;
color: #fff;
font-size: 3em;
font-size: 3em;
-
bottom-bottom: -10px;
+
bottom: -10px;
font-weight: normal;
font-weight: normal;
line-height: 20px;
line-height: 20px;
}
}
 +
h5{
 +
    color: #000000;
 +
line-height:1em;
 +
    font-size: 1.5em;
 +
}
 +
 +
h6{
 +
    color: #000000;
 +
    font-size: 1.2em;
 +
line-height:1em;
 +
}
h3 {
h3 {
Line 181: Line 204:
}
}
-
ul {
+
ul{
-
list-style-type: none;
+
list-style-type: disc;
}
}
a {
a {
-
text-decoration: none;
+
text-decoration: none !important;
-
font-family: "Roboto", sans-serif;
+
-
color: #fff;
+
}
}
-
/* MENU */
+
/*--------------------- CSS DU MENU ---------------------------------------------*/
#menu {
#menu {
     position: fixed;
     position: fixed;
Line 201: Line 222:
     right: 0;
     right: 0;
     background: #248588;
     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;
}
}
Line 252: Line 286:
width: 250px;
width: 250px;
height: 350px;
height: 350px;
-
top: 0;
+
top: -10px;
text-align: center;
text-align: center;
background-color: #248588;
background-color: #248588;
Line 260: Line 294:
display: none;
display: none;
position: absolute;
position: absolute;
-
left: 20px;
+
left: 26px;
position: fixed;
position: fixed;
height: 100%;
height: 100%;
 +
        text-decoration: none;
 +
list-style-type: none
 +
color: #FFFFFF;
 +
}
 +
 +
.ssmenu a:visited {
 +
color: #FFFFFF;
}
}
Line 276: Line 317:
     line-height: 20px;
     line-height: 20px;
     margin-bottom: 20px;
     margin-bottom: 20px;
-
     -moz-transition: all 0.3s ease-out;
+
     -moz-transition: all 0.3s ease-out;
-
     -webkit-transition: all 0.3s ease-out;
+
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
 +
color:#248588;
}
}
.hu-icon {color: #285459;}
.hu-icon {color: #285459;}
-
.hu-icon li:hover {  
+
.hu-icon li:hover {
     box-shadow: 0 0 65px #285459;
     box-shadow: 0 0 65px #285459;
     -moz-box-shadow: 0 0 65px #285459;
     -moz-box-shadow: 0 0 65px #285459;
-
     -webkit-box-shadow: 0 0 65px #285459;
+
     -webkit-box-shadow: 0 0 65px #285459;
-
}
+
}
.hi-icon li:hover {
.hi-icon li:hover {
Line 299: Line 341:
}
}
.menuulli:hover .ssmenu {display:block !important;}
.menuulli:hover .ssmenu {display:block !important;}
 +
/*--------------------- FIN DU CSS DE MENU ---------------------------------------------*/
-
 
+
.rotate{
-
/*FOOTER*/
+
    -webkit-transition-duration: 0.8s;
-
 
+
    -moz-transition-duration: 0.8s;
-
#footer{
+
    -o-transition-duration: 0.8s;
-
margin-top: 100px;
+
    transition-duration: 0.8s;
-
width: 100%;
+
   
-
background-color: #285459;
+
    -webkit-transition-property: -webkit-transform;
-
bottom: 0;
+
    -moz-transition-property: -moz-transform;
-
}
+
    -o-transition-property: -o-transform;
-
 
+
    transition-property: transform;
-
#footer p{
+
   
-
color:#fff;
+
    overflow:hidden;
-
font-family: "Roboto", sans-serif;
+
-
font-size: 0.9em;
+
    }
-
overflow:hidden;
+
-
}
+
.rotate:hover 
-
 
+
{
-
#contact{
+
    -webkit-transform:rotate(360deg);
-
float:left;
+
    -moz-transform:rotate(360deg);
-
display: inline-block;
+
    -o-transform:rotate(360deg);
-
background-color: #285459;
+
-
padding-left: 30px;
+
-
margin-left: 50px;
+
-
width: 45%;
+
-
}
+
-
 
+
-
#address1{
+
-
float: left;
+
-
}
+
-
 
+
-
#address2{
+
-
float: left;
+
-
margin-left: 30px;
+
-
}
+
-
 
+
-
#sponsors{
+
-
width: 45%;
+
-
display: inline-block;
+
-
background-color: #285459;
+
-
padding-left: 30px;
+
-
}
+
-
 
+
-
#copyright {
+
-
text-align: center;
+
-
font-size: 0.8em;
+
-
background-color: #285459;
+
-
padding-bottom: 6px;
+
-
padding-top: 6px;
+
-
}
+
-
 
+
-
#fb {
+
-
float: right;
+
-
margin-right: 10px;
+
-
margin-top: 20px;
+
}
}

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

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

  1. p-logo

{ 

   display:none;
   border:none;
   margin:none;

}

/* la barre de menu du haut */

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

  1. 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;

}

  1. menubar *

{ color: transparent !important; background: transparent !important;

}

  1. top-section:hover #menubar *

{ color: #ffffff !important; }

  1. top-section a:hover #menubar *

{ text-decoration: underline; }

  1. top-section:hover #menubar

{ /*background: rgba(255, 255, 255, 0.75) !important;*/ margin-top: 5px; }

/* la barre de recherche*/

  1. search-controls

{ 

   display:none;

}

/* le body de la page*/

  1. content

{ 

   background-color: transparent;
   border:none;
   padding:none;
   margin:none;
   line-height:1em;

width: 99%; }

  1. globalWrapper

{ 

 font-size: 150%;

}

/*titre de page */ .firstHeading { 

   display:none;
   border: none;

}

  1. footer-wrapper

{ 

   position: relative;
   width: 100%;
   margin: auto;
   background-color: transparent;

}

  1. f-copyrightico

{ 

   margin: 1% 0 1% 1%;

}

  1. f-poweredbyico

{ 

   margin: 1% 1% 1% 0;

}

/* la boite en bas de page*/

  1. footer-box

{ 

   display: none;

}

/* le cadre sous le body useless */

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

  1. menu { 
   position: fixed;
   width: 50px;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background: #248588;
   z-index: 100;

}

  1. menu a *{

color:#fff; font-family: "Roboto", sans-serif !important; }

.hu-icon a:visited { color:#248588; }

  1. menu ul { 
   list-style-type: none !important;

}

  1. 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);

}

Retrieved from "http://2014.igem.org/Team:INSA-Lyon/css_global"