Team:Grenoble/Design/css

From 2012.igem.org

(Difference between revisions)
m
 
(258 intermediate revisions not shown)
Line 1: Line 1:
 +
/******************************************************************************************/
 +
/* Thanks to iGEM team DTU 2011 for their helpful tutorial, for any information see here :*/
 +
/***********https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki************/
 +
/******************************************************************************************/
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo  
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo  
{
{
Line 55: Line 60:
{
{
background: url('https://static.igem.org/mediawiki/2012/6/65/Safety_fond.png') fixed no-repeat;
background: url('https://static.igem.org/mediawiki/2012/6/65/Safety_fond.png') fixed no-repeat;
-
}
 
-
 
-
body[id="Parts"]
 
-
{
 
-
background: url('https://static.igem.org/mediawiki/2012/3/3a/Parts_fond.png') fixed no-repeat;
 
}
}
Line 152: Line 152:
ul.topnav li a {
ul.topnav li a {
padding: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
-
        /*margin-right: 70px;*/
 
display: block;
display: block;
text-decoration: none;
text-decoration: none;
-
/*float: left;*/
 
         margin-left: -10px;
         margin-left: -10px;
}
}
Line 164: Line 162:
}
}
-
#home_icon
+
#model_icon
{
{
-
margin-top: 19px;
+
margin-top: -1px;
}
}
#HP_icon
#HP_icon
{
{
-
margin-top: -9px;
+
margin-top: -7px;
}
}
#Gre_icon
#Gre_icon
{
{
-
margin-top: 23px;
+
margin-top: 0px;
-
}
+
-
 
+
-
#parts_icon
+
-
{
+
-
margin-top: -20px;
+
}
}
Line 204: Line 197:
/****************************************/
/****************************************/
-
ul.topnav ul li
+
/*ul.topnav ul li
{
{
opacity: 0.7;
opacity: 0.7;
Line 212: Line 205:
{
{
opacity: 1;
opacity: 1;
-
}
+
}*/
ul.topnav li[id="model_icon"] ul.subnav li:hover, .menu_gauche[id="model_icon"] ul li:hover
ul.topnav li[id="model_icon"] ul.subnav li:hover, .menu_gauche[id="model_icon"] ul li:hover
Line 221: Line 214:
ul.topnav li[id="project_icon"] ul.subnav li:hover, .menu_gauche[id="project_icon"] ul li:hover
ul.topnav li[id="project_icon"] ul.subnav li:hover, .menu_gauche[id="project_icon"] ul li:hover
{
{
-
background-color: #c00000;
+
background-color: #b80100;
}
}
Line 236: Line 229:
ul.topnav li[id="team_icon"] ul.subnav li:hover, .menu_gauche[id="team_icon"] ul li:hover
ul.topnav li[id="team_icon"] ul.subnav li:hover, .menu_gauche[id="team_icon"] ul li:hover
{
{
-
background-color: #77933c;
+
background-color: #007f00;
}
}
-
ul.topnav li[id="HP_icon"] ul.subnav li:hover, .menu_gauche[id="team_icon"] ul li:hover
+
ul.topnav li[id="HP_icon"] ul.subnav li:hover, .menu_gauche[id="HP_icon"] ul li:hover
{
{
background-color: #1c477b;
background-color: #1c477b;
 +
}
 +
 +
ul.topnav li[id="Gre_icon"] ul.subnav li:hover
 +
{
 +
background-color: white;
}
}
Line 254: Line 252:
}
}
-
ul.topnav li ul.subnav li a:hover
+
ul.topnav li[id="HP_icon"] ul.subnav li a:hover, ul.topnav li[id="bio_icon"] ul.subnav li a:hover,
 +
ul.topnav li[id="model_icon"] ul.subnav li a:hover, ul.topnav li[id="team_icon"] ul.subnav li a:hover,
 +
ul.topnav li[id="safety_icon"] ul.subnav li a:hover, ul.topnav li[id="project_icon"] ul.subnav li a:hover
{
{
font-weight: bold;
font-weight: bold;
color: white;
color: white;
 +
}
 +
 +
ul.topnav li[id="Gre_icon"] ul.subnav li a:hover
 +
{
 +
font-weight: bold;
}
}
Line 280: Line 285:
{
{
position: absolute;
position: absolute;
-
left: -10px;  
+
left: -19px;  
-
top: 105px;
+
top: 110px;
background: #e6e6e6;
background: #e6e6e6;
display: none;
display: none;
Line 288: Line 293:
}
}
-
ul.topnav li[id="Gre_icon"] ul.subnav
+
ul.topnav li[id="HP_icon"] ul.subnav
{
{
position: absolute;
position: absolute;
letf: -10px;
letf: -10px;
-
top: 90px;
+
top: 117px;
background: #e6e6e6;
background: #e6e6e6;
display: none;
display: none;
Line 326: Line 331:
{
{
list-style: none;
list-style: none;
-
width: 143px;
+
width: 145px;
height: 30px;
height: 30px;
margin-top: 10px;
margin-top: 10px;
Line 338: Line 343:
{
{
position: relative;
position: relative;
-
width: 90px;
+
width: 130px;
top: 21px;
top: 21px;
-
left: 10px;
+
left: 0px;
margin-top: 0px;
margin-top: 0px;
background: #e6e6e6;
background: #e6e6e6;
border-radius: 10px;
border-radius: 10px;
-
/*display: none;*/
 
}
}
ul.menu li ul.submenu li
ul.menu li ul.submenu li
{
{
-
width: 80px;
+
width: 120px;
height: 20px;
height: 20px;
margin-top: 0px;
margin-top: 0px;
Line 359: Line 363:
position: fixed;
position: fixed;
top: 210px;
top: 210px;
-
left: 32px;
+
left: 37px;
}
}
Line 398: Line 402:
.menu_gauche[id="model_icon"] ul a li:hover
.menu_gauche[id="model_icon"] ul a li:hover
 +
{
 +
font-weight: bold;
 +
color: white;
 +
}
 +
 +
.menu_gauche[id="model_icon"] ul li:hover  a
{
{
font-weight: bold;
font-weight: bold;
Line 437: Line 447:
color: white;
color: white;
}
}
-
 
-
 
-
/*.index
 
-
{
 
-
width: 143px;
 
-
position: fixed;
 
-
top: 490px;
 
-
left: 50px;
 
-
}*/
 
#cadre
#cadre
Line 458: Line 459:
{
{
position: fixed;
position: fixed;
-
left: 48px;
+
left: 55px;
top: 20px;
top: 20px;
}
}
 +
/*Flèche vers le haut de la page*/
 +
#up
 +
{
 +
position: fixed;
 +
right: 65px;
 +
bottom: 30px;
 +
}
-
#mail
+
/*Logo de l'équipe vers la page d'accueil*/
 +
#home_icon
{
{
-
position: absolute;
+
position: fixed;
-
right: -150px;
+
top: 20px;
-
top: 30px;
+
right: 60px;
 +
}
 +
 
 +
/*Lien vers la page officielle d'igem*/
 +
#igem
 +
{
 +
position: fixed;
 +
top: 140px;
 +
right: 50px;
}
}
Line 488: Line 505:
opacity: 0.4;
opacity: 0.4;
margin-bottom: 40px;*/
margin-bottom: 40px;*/
-
}
 
-
 
-
.presentation
 
-
{
 
-
font-size: 1.2em;
 
}
}
Line 513: Line 525:
.portrait
.portrait
{
{
-
/*margin-left: 130px;*/
 
margin-bottom: 40px;
margin-bottom: 40px;
}
}
Line 542: Line 553:
margin-right: auto;
margin-right: auto;
width: 300px;
width: 300px;
 +
text-align: left;
}
}
Line 579: Line 591:
}
}
-
table
+
table.tableau
{
{
border-collapse: collapse;
border-collapse: collapse;
Line 585: Line 597:
}
}
-
td, th
+
table.tableau td, table.tableau th
{
{
border: solid 1px black;
border: solid 1px black;
Line 594: Line 606:
{
{
font-weight: bold;
font-weight: bold;
 +
}
 +
 +
.schema
 +
{
 +
opacity: 0.6;
 +
}
 +
 +
.schema:hover
 +
{
 +
opacity: 1;
 +
}
 +
 +
/******************************************/
 +
/*Design des @!^&#_ tableaux de paramètres*/
 +
/******************************************/
 +
 +
table[id="param"], table[id="param_2"]
 +
{
 +
width: 840px;
 +
text-align: center;
 +
font-size: 1.3em;
 +
border: none;
 +
}
 +
 +
 +
table[id="param_3"]
 +
{
 +
width: 840px;
 +
text-align: center;
 +
font-size: 1.3em;
 +
border: none;
 +
}
 +
 +
table[id="param"] thead tr, table[id="param_2"] thead tr
 +
{
 +
height: 50px;
 +
color: white;
 +
background-color: #f79646;
 +
text-align: center;
 +
font-size: 1.1em;
 +
}
 +
 +
table[id="param_3"] thead tr
 +
{
 +
height: 50px;
 +
color: #595959;
 +
background-color: #ffdb69;
 +
text-align: center;
 +
font-size: 1.1em;
 +
}
 +
 +
table[id="param_3"] tbody tr td
 +
{
 +
padding: 10px 10px 10px 10px;
 +
}
 +
 +
table[id="param"] tbody tr, table[id="param_2"] tbody tr
 +
{
 +
height: 50px;
 +
}
 +
 +
table[id="param"] tbody tr td.colonne1, table[id="param_2"] tbody tr td.colonne1
 +
{
 +
width: 254px;
 +
}
 +
 +
table[id="param_3"] tbody tr td.column1
 +
{
 +
width: 10px;
 +
color: #595959;
 +
background-color: #ffdb69;
 +
font-weight: bold;
 +
}
 +
 +
table[id="param"] tbody tr td.colonne2, table[id="param_2"] tbody tr td.colonne2
 +
{
 +
width: 200px;
 +
}
 +
 +
table[id="param_3"] tbody tr td.column2
 +
{
 +
width: 150px;
 +
font-size: 0.8em;
 +
}
 +
 +
table[id="param"] tbody tr td.colonne3, table[id="param_2"] tbody tr td.colonne3
 +
{
 +
width: 178px;
 +
}
 +
 +
table[id="param_3"] tbody tr td.column3
 +
{
 +
width: 350px;
 +
font-size: 0.8em;
 +
}
 +
 +
table[id="param"] tbody tr td.colonne4, table[id="param_2"] tbody tr td.colonne4
 +
{
 +
width: 208px;
 +
}
 +
 +
table[id="param_3"] tbody tr
 +
{
 +
background: #ddd9c3;
 +
}
 +
 +
table tbody tr.impair
 +
{
 +
background: #fdefe9;
 +
}
 +
 +
table tbody tr.pair
 +
{
 +
background: #fcddcf;
}
}

Latest revision as of 21:23, 26 September 2012

/******************************************************************************************/ /* Thanks to iGEM team DTU 2011 for their helpful tutorial, for any information see here :*/ /***********https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki************/ /******************************************************************************************/

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo

{ 

   display:none;
   background-color: none;

}

body, html { 

margin: 0;
padding: 0; 
height: 100%;

}

  1. top-section

{ 

   border: none;
   height: 0px;

}

  1. content

{ 

   border: none;
   background: none;

}

  1. menubar

{ 

   width: auto;

}

body { 

   margin: 0 0 0 0;
   padding: 0;
   width: 100%;

}

body[id="Project"] { background: url('https://static.igem.org/mediawiki/2012/f/f2/Project_fond.png') fixed no-repeat; }

body[id="Team"] { background: url('https://static.igem.org/mediawiki/2012/5/5f/Team_fond.png') fixed no-repeat; }

body[id="Biology"] { background: url('https://static.igem.org/mediawiki/2012/a/ac/Biology_fond.png') fixed no-repeat; }

body[id="Safety"] { background: url('https://static.igem.org/mediawiki/2012/6/65/Safety_fond.png') fixed no-repeat; }

body[id="Parts"] { background: url('https://static.igem.org/mediawiki/2012/3/3a/Parts_fond.png') fixed no-repeat; }

body[id="Modeling"] { background: url('https://static.igem.org/mediawiki/2012/6/62/Modelling_fond.png') fixed no-repeat; }

body[id="HP"] { background: url('https://static.igem.org/mediawiki/2012/4/44/HP_fond.png') fixed no-repeat; }

body[id="Gre"] { background: url('https://static.igem.org/mediawiki/2012/0/05/Grenoble_fond.png') fixed no-repeat; }

  1. top-section

{ 

   width: 965px;
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;

}

  1. menubar

{ 

   font-size: 65%;
   top: 0px;

}

.left-menu:hover { 

   background-color: transparent;

}

  1. menubar li a

{ 

   background-color: transparent;

}

  1. menubar:hover

{ 

   color: white;

}

  1. menubar li a

{ 

   color: transparent;

}

  1. menubar:hover li a

{ 

   color: white;

}

.letf-menu: hover { background-color: transparent; }

.right-box { width: 0px; }

  1. page

{ position: absolute; left: -150px; width: 1280px; height: 1024px; }

nav { margin-left: 95px; }

ul.topnav li a { display: inline-block; }

ul.topnav li a { padding: 10px 10px 10px 10px; display: block; text-decoration: none; 

       margin-left: -10px;

}

ul.topnav li ul.subnav li a { margin-left: 5px; }

  1. model_icon

{ margin-top: -1px; }

  1. HP_icon

{ margin-top: -7px; }

  1. Gre_icon

{ margin-top: 0px; }

html ul.topnav li a: hover { /*opacity: 0.7;*/ }

ul.topnav ul, ul.topnav ul li { list-style: none; }

ul.topnav ul, ul.topnav ul li:visited { text-decoration: none; style-effect: none; }

/****************************************/ /* Barre de menu en haut de chaque page */ /****************************************/

/*ul.topnav ul li { opacity: 0.7; }

ul.topnav ul li:hover { opacity: 1; }*/

ul.topnav li[id="model_icon"] ul.subnav li:hover, .menu_gauche[id="model_icon"] ul li:hover { background-color: #ffc000; }

ul.topnav li[id="project_icon"] ul.subnav li:hover, .menu_gauche[id="project_icon"] ul li:hover { background-color: #b80100; }

ul.topnav li[id="bio_icon"] ul.subnav li:hover, .menu_gauche[id="bio_icon"] ul li:hover { background-color: #30849b; }

ul.topnav li[id="safety_icon"] ul.subnav li:hover, .menu_gauche[id="safety_icon"] ul li:hover { background-color: #e46c0a; }

ul.topnav li[id="team_icon"] ul.subnav li:hover, .menu_gauche[id="team_icon"] ul li:hover { background-color: #007f00; }

ul.topnav li[id="HP_icon"] ul.subnav li:hover, .menu_gauche[id="HP_icon"] ul li:hover { background-color: #1c477b; }

ul.topnav li[id="Gre_icon"] ul.subnav li:hover { background-color: white; }

.menu_gauche[id="gre_icon"] ul li:hover { background-color: white; }

.menu_gauche[id="HP_icon"] ul li:hover { background-color: #1c477b; }

ul.topnav li[id="HP_icon"] ul.subnav li a:hover, ul.topnav li[id="bio_icon"] ul.subnav li a:hover, ul.topnav li[id="model_icon"] ul.subnav li a:hover, ul.topnav li[id="team_icon"] ul.subnav li a:hover, ul.topnav li[id="safety_icon"] ul.subnav li a:hover, ul.topnav li[id="project_icon"] ul.subnav li a:hover { font-weight: bold; color: white; }

ul.topnav li[id="Gre_icon"] ul.subnav li a:hover { font-weight: bold; }

ul.topnav ul a:hover { text-decoration: none; }

ul.topnav li { float: left; position: relative; }

ul.topnav > li > a { height: 28px; overflow: hidden; }

ul.topnav li ul.subnav { position: absolute; left: -19px; top: 110px; background: #e6e6e6; display: none; float: left; border-radius: 10px; }

ul.topnav li[id="HP_icon"] ul.subnav { position: absolute; letf: -10px; top: 117px; background: #e6e6e6; display: none; float: left; border-radius: 10px; }

ul.topnav li ul.subnav li { border-radius: 10px; }

ul.topnav li ul.subnav li a { color: black; /*text-align: justify;*/ }

ul.topnav li ul.subnav li: hover { }

ul.topnav li ul.subnav, ul.topnav li ul.subnav li { width: 160px; }

/**********************/ /* Menu sur la gauche */ /**********************/

.menu_gauche ul.menu li { list-style: none; width: 145px; height: 30px; margin-top: 10px; margin-bottom: 10px; background: #e6e6e6; border-radius: 10px; padding: 15px 10px 10px 10px; }

ul.menu li ul.submenu { position: relative; width: 130px; top: 21px; left: 0px; margin-top: 0px; background: #e6e6e6; border-radius: 10px; }

ul.menu li ul.submenu li { width: 120px; height: 20px; margin-top: 0px; margin-bottom: 0px; }

.menu_gauche { position: fixed; top: 210px; left: 37px; }

.menu_gauche ul a li { color: black; font-size: 1.1em; }

.menu_gauche ul li a { color: black; font-size: 1.1em; }

.menu_gauche ul li { color: black; font-size: 1.1em; }

.menu_gauche ul a { text-decoration: none; }

.menu_gauche ul.menu li ul.submenu a li { font-size: 0.9em; padding: 5px 5px 5px 5px; }

.menu_gauche[id="project_icon"] ul a li:hover { font-weight: bold; color: white; }

.menu_gauche[id="model_icon"] ul a li:hover { font-weight: bold; color: white; }

.menu_gauche[id="model_icon"] ul li:hover a { font-weight: bold; color: white; }

.menu_gauche[id="safety_icon"] ul a li:hover { font-weight: bold; color: white; }

.menu_gauche[id="bio_icon"] ul a li:hover { font-weight: bold; color: white; }

.menu_gauche[id="bio_icon"] ul li:hover a { font-weight: bold; color: white; }

.menu_gauche[id="team_icon"] ul a li:hover { font-weight: bold; color: white; }

.menu_gauche[id="gre_icon"] ul a li:hover { font-weight: bold; }

.menu_gauche[id="HP_icon"] ul a li:hover { font-weight: bold; color: white; }

  1. cadre

{ position: absolute; top: 150px; left: 110px; width: 860px; }

  1. icon

{ position: fixed; left: 55px; top: 20px; }

/*Flèche vers le haut de la page*/

  1. up

{ position: fixed; right: 65px; bottom: 30px; }

/*Logo de l'équipe vers la page d'accueil*/

  1. home_icon

{ position: fixed; top: 20px; right: 60px; }

/*Lien vers la page officielle d'igem*/

  1. igem

{ position: fixed; top: 140px; right: 50px; }

section { font-size: 1.1em; background-color: white; text-align: justify; padding: 10px; border-radius: 10px; font-family: Verdana; margin-bottom: 40px; }

h4 { /*font-size: 2.5em; margin-left: 100px; text-shadow: 2px 2px 2px black; opacity: 0.4; margin-bottom: 40px;*/ }

.champ { margin-bottom: 20px; margin-left: 50px; }

.champ_title { font-size: 1.6em; color: #77933c; margin-right: 15px; position: relative; bottom: 15px; right: 50px; }

.portrait { margin-bottom: 40px; }

ul { list-style: circle; }

.exposant { font-size: 0.7em; position: relative; bottom: 5px; }

.indice { font-size: 0.7em; position: relative; top: 5px; }

.legend { font-size: 0.7em; margin-left: auto; margin-right: auto; width: 300px; text-align: left; }

.code { font-size: 0.7em; font-weight: bold; }

.petit { font-size: 0.8em; text-align: justify; }

.encadre { padding : 10px 10px 10px 10px; border-radius: 10px; }

.encadre[id="red"] { border: 2px red solid; }


.encadre[id="blue"] { border: 2px blue solid; }


.encadre[id="green"] { border: 2px green solid; }

table.tableau { border-collapse: collapse; padding: 7px; }

table.tableau td, table.tableau th { border: solid 1px black; padding: 7px; }

span.gras { font-weight: bold; }

.schema { opacity: 0.6; }

.schema:hover { opacity: 1; }

/******************************************/ /*Design des @!^&#_ tableaux de paramètres*/ /******************************************/

table[id="param"], table[id="param_2"] { width: 840px; text-align: center; font-size: 1.3em; border: none; }


table[id="param_3"] { width: 840px; text-align: center; font-size: 1.3em; border: none; }

table[id="param"] thead tr, table[id="param_2"] thead tr { height: 50px; color: white; background-color: #f79646; text-align: center; font-size: 1.1em; }

table[id="param_3"] thead tr { height: 50px; color: #595959; background-color: #ffdb69; text-align: center; font-size: 1.1em; }

table[id="param_3"] tbody tr td { padding: 10px 10px 10px 10px; }

table[id="param"] tbody tr, table[id="param_2"] tbody tr { height: 50px; }

table[id="param"] tbody tr td.colonne1, table[id="param_2"] tbody tr td.colonne1 { width: 254px; }

table[id="param_3"] tbody tr td.column1 { width: 10px; color: #595959; background-color: #ffdb69; font-weight: bold; }

table[id="param"] tbody tr td.colonne2, table[id="param_2"] tbody tr td.colonne2 { width: 200px; }

table[id="param_3"] tbody tr td.column2 { width: 150px; font-size: 0.8em; }

table[id="param"] tbody tr td.colonne3, table[id="param_2"] tbody tr td.colonne3 { width: 178px; }

table[id="param_3"] tbody tr td.column3 { width: 350px; font-size: 0.8em; }

table[id="param"] tbody tr td.colonne4, table[id="param_2"] tbody tr td.colonne4 { width: 208px; }

table[id="param_3"] tbody tr { background: #ddd9c3; }

table tbody tr.impair { background: #fdefe9; }

table tbody tr.pair { background: #fcddcf; }

Retrieved from "http://2012.igem.org/Team:Grenoble/Design/css"