Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"

 
(678 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
body{
 
body{
−
background-color: #FCFCD5;
+
line-height: normal;
 +
/*background-color: #FCFCD5;
 +
background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png");
 +
background-attachment: fixed;
 +
background-size: 100%;
 +
background-repeat: no-repeat;*/
 +
margin: 0 auto;
 
}
 
}
 +
 +
a:focus {outline: 0;}
 +
 +
#scrollUp{
 +
z-index:100;
 +
width:100px;
 +
position:fixed;
 +
left: calc(50% + 630px);
 +
bottom: 20px;
 +
transition: bottom 0.7s;
 +
opacity:0;
 +
transition-timing-function: linear;
 +
}
 +
h1{
 +
font-family: Lato_Bold, Arial, sans-serif;
 +
font-size:40px;
 +
margin: 0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h2{
 +
font-family: Lato_Bold_Italic, Arial, sans-serif;
 +
font-size: 25px;
 +
margin: 0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h3 {
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:26px;
 +
margin: 0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h4{
 +
font-family: Lato_Bold, Arial, sans-serif;
 +
font-size:26px;
 +
margin:0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h5 {
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
text-decoration: underline;
 +
margin: 0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h6{
 +
font-family: Lato_Bold, Arial, sans-serif;
 +
font-size:20px;
 +
margin:0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
h7 {
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
margin: 0;
 +
font-weight: normal;
 +
display: inline;
 +
}
 +
 +
 +
 +
.buttons{
 +
display:inline-block;
 +
}
 +
 +
.tekst1 {
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
font-size:20px;
 +
color:#000000;
 +
line-height:125%;
 +
}
 +
 +
.tekst2 {
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
font-size:16px;
 +
}
 +
 +
.tekst2i {
 +
font-family: Lato_Light_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
}
 +
 +
.tekst1B{
 +
font-family: Lato_Bold, Arial, sans-serif;
 +
font-size:20px;
 +
}
 +
 +
.tekst1BI{
 +
font-family: Lato_Bold_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
}
 +
 +
.tekst1I{
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:20px;
 +
}
 +
 +
.centreText{
 +
text-align:centre;
 +
}
 +
 +
.caption{
 +
font-family: Lato_Italic, Arial, sans-serif;
 +
font-size:16px;
 +
}
 +
 +
.spoilerbutton {
 +
display:inline;
 +
}
 +
 +
.spoiler {
 +
display:none;
 +
margin-top: 20px;
 +
margin-bottom:20px;
 +
overflow:hidden;
 +
background: #f5f5f5;
 +
margin-left:50px;
 +
}
 +
 +
.spoilerimage {
 +
float: right;
 +
margin: 5px 5px 0px 30px;
 +
text-align: justify;
 +
}
 +
 +
.spoilerimagec {
 +
display: block;
 +
margin-top:10px;
 +
margin-left: auto;
 +
margin-right: auto
 +
}
 +
 +
#background{
 +
height:100%;
 +
width:100%;
 +
position:fixed;
 +
/*background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png");
 +
background-size: cover;*/
 +
top:0;
 +
left:0;
 +
}
 +
 +
#body{
 +
z-index:1;
 +
position:absolute;
 +
top:60px;
 +
width:100%;
 +
min-width:1460px;
 +
line-height: normal;
 +
}
 +
 +
#container{
 +
margin:0 auto;
 +
margin-bottom: 110px;
 +
position:relative;
 +
/*border-radius:15px 30px 30px 15px; FB/Twitter komt er nog onder vandaan*/
 +
background-image: url("https://static.igem.org/mediawiki/2015/c/ca/TU_Eindhoven_grey_bf.png");
 +
background-color: white;
 +
box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
 +
min-height:1000px;
 +
width:1200px;
 +
padding-bottom: 50px;
 +
}
 +
  
 
#containercontent{
 
#containercontent{
Line 9: Line 190:
 
}
 
}
  
−
#igem_logo{
+
#menuigemlogo{
−
height:45px;
+
height:100%;
 +
width:76px;
 
float: left;
 
float: left;
 +
display:block;
 +
background-image: url('https://static.igem.org/mediawiki/2015/1/16/TU_Eindhoven_iGEM_Logo.png');
 +
background-size: cover;
 +
background-repeat: no-repeat;
 +
margin-left: 30px;
 
}
 
}
  
Line 17: Line 204:
 
z-index:2;
 
z-index:2;
 
position:relative;
 
position:relative;
−
background: #ddeebb;
+
height:60px;
 
width:100%;
 
width:100%;
 +
min-width:1460px;
 +
background-color: rgba(255,255,255,0.3);
 
}
 
}
 +
 +
#menuTotal{
 +
width:1460px;
 +
height:60px;
 +
display:block;
 +
position:relative;
 +
margin: 0 auto;
 +
}
 +
 +
#FBTwit{
 +
margin-left: 20px;
 +
float:left;
 +
}
 +
 +
 
#menu{
 
#menu{
−
background: #ddeebb;
 
 
position:relative;
 
position:relative;
 +
float:left;
 
width:1200px;
 
width:1200px;
−
height:45px;
+
height:60px;
−
margin:0 auto;
+
display:block;
 +
margin-left:10px;
 
}
 
}
 +
 
#submenuwrapper{
 
#submenuwrapper{
 
position:relative;
 
position:relative;
 
z-index:2;
 
z-index:2;
−
background: #f6f0cc;
 
 
width:100%;
 
width:100%;
 +
min-width:1460px;
 +
background-color: rgba(255,255,255,0.5);
 
}
 
}
 +
 +
 
#submenu{
 
#submenu{
 +
overflow: hidden;
 
position:relative;
 
position:relative;
 +
z-index: 2;
 
width:1200px;
 
width:1200px;
 
height:0px;
 
height:0px;
 
margin:0 auto;
 
margin:0 auto;
−
overflow:hidden;
 
 
transition: height 0.2s;
 
transition: height 0.2s;
 
}
 
}
−
#menu1{
+
 
−
margin-left:calc(((100% - (4 * 12%)) / 2) - 56.8px);
+
 
−
}
+
 
#menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a {
 
#menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a {
 +
width:9%;
 +
padding-left: calc(13% / 8);
 
position:relative;
 
position:relative;
−
font-weight: bold;  
+
font-family: Lato_Bold, Arial, sans-serif;
 +
/*font-weight: bold;*/
 
text-align: center;
 
text-align: center;
−
line-height: 45px;
+
line-height: 60px;
−
width:12%;
+
height:60px;
 
display:block;
 
display:block;
 
text-decoration: none;
 
text-decoration: none;
Line 56: Line 268:
 
}
 
}
  
−
#sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{
+
 
 +
#menu1{
 +
padding-left:0 !important;
 +
}
 +
 
 +
#menu6, #menu7{
 +
width:12% !important;
 +
 
 +
}
 +
 
 +
#menutwitter, #menufacebook {
 +
padding-right: 0 !important;
 +
}
 +
 
 +
#sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover, #sub6 > a:hover, #sub7 > a:hover, #sub8, #sub9 > a:hover{
 
color: #9DC671;
 
color: #9DC671;
 
}
 
}
  
−
#sub2,#sub3,#sub4,#sub5{
+
#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{
 
width:100%;
 
width:100%;
 
height:100%;
 
height:100%;
Line 66: Line 292:
  
 
#sub2a{
 
#sub2a{
−
margin-left:calc(((100% - (6 * 12%)) / 2) - (0.5 * 12%));
+
padding-left:0 !important;
 
}
 
}
 
#sub3a{
 
#sub3a{
−
margin-left:calc(((100% - (6 * 12%)) / 2) + (1.5 * 12%));
+
padding-left:0 !important;
 
}
 
}
 
#sub4a{
 
#sub4a{
−
margin-left:calc(((100% - (6 * 12%)) / 2) + (2 * 12%));
+
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 1.5 ) !important;
 
}
 
}
 
#sub5a{
 
#sub5a{
−
margin-left:calc(((100% - (6 * 12%)) / 2) + (4 * 12%));
+
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 3) !important;
 +
}
 +
#sub6a{
 +
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 3.5) !important;
 +
}
 +
#sub7a{
 +
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 5.5 + 4.5%) !important;
 +
}
 +
#sub8a{
 +
padding-left:0 !important;
 +
margin-left:0 !important;
 +
}
 +
#sub9a{
 +
padding-left:0 !important;
 +
margin-left:calc((9% + 13% / 8) * 6.5) !important;
 
}
 
}
  
−
#sub2,#sub3,#sub4,#sub5{
+
#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{
 
display:none;
 
display:none;
 
}
 
}
  
−
#body{
+
/*Twitter
−
z-index:1;
+
#facebookandtwitter{
−
position:absolute;
+
width:calc((100% - (5 * 15%)) / 2);
−
top:45px;
+
height:100%;
−
width:100%;
+
float:right;
 +
background-color: red;
 
}
 
}
−
#container{
+
*/
−
margin:0 auto;
+
−
position:relative;
+
−
/*border-radius:15px 30px 30px 15px; FB/Twitter komt er nog onder vandaan*/
+
−
background-image: url("https://static.igem.org/mediawiki/2015/2/2a/TU_Eindhoven_grey_bg.png");
+
−
box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
+
−
height:1200px;
+
−
width:1200px;
+
−
}
+
−
 
+
−
/*Twitter*/
+
 
#twitter{
 
#twitter{
 
z-index:-1;
 
z-index:-1;
 
top:0;
 
top:0;
−
right:0;
+
display: none;
 +
right:-120px;
 
position:absolute;
 
position:absolute;
 +
height:500px;
 +
width:500px;
  
 
}
 
}
 
#twitter_logo{
 
#twitter_logo{
−
height:45px;
+
height:60px;
−
float:right;
+
float:left;
 +
 
 
}
 
}
 
/*FB*/
 
/*FB*/
Line 114: Line 353:
 
z-index:-1;
 
z-index:-1;
 
top:0;
 
top:0;
−
right:0;
+
display: none;
 +
right:-120px;
 
position:absolute;
 
position:absolute;
 
height:500px;
 
height:500px;
Line 120: Line 360:
 
}
 
}
 
#facebook_logo{
 
#facebook_logo{
−
height:45px;
+
height:100%;
 +
float:left;
 +
}
 +
/* Content Menu*/
 +
.contentLink, .contentLink:visited, .contentLink:hover, .contentLink:active{
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
color:black;
 +
}
 +
.contentKop{
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
font-size:15px;
 +
}
 +
.contentList{
 +
list-style: disc;
 +
list-syle-image: none;
 +
margin-left: 30px;
 +
margin-bottom: 0;
 +
margin-top: 0;
 +
}
 +
#infoTab{
 +
z-index:9;
 +
margin-left: 0;
 +
position: fixed;
 +
width:350px;
 +
transition: transform 1s;
 +
}
 +
#infoTabTitle{
 +
border-bottom: solid 1px black;
 
float:right;
 
float:right;
 +
width:80%;
 +
height:50px;
 +
background: rgba(255, 255, 255, 0.5);
 +
line-height:40px;
 +
text-align:center;
 +
font-size:20px;
 +
font-family: Lato_Bold, Arial, sans-serif;
 
}
 
}
−
#contentpanel{
+
#infoTabContent{
−
width:10%;
+
−
height:100%;
+
 
float:right;
 
float:right;
−
background-color:#222222;
+
width:80%;
 +
background: rgba(230, 230, 230, 0.5);
 +
text-align:left;
 
}
 
}
−
#contenttable{
+
.contentMenuImg{
−
float:left;
+
margin-right:2px;
−
width:90%;
+
transform: rotate(-180deg);
−
height:50%;
+
transform-origin: 50% 50%;
 +
height:20px;
 
}
 
}
−
#contentmenu {
+
#contentToggle{
−
z-index: 2;
+
box-sizing: border-box;
−
height:300px;
+
background: rgba(255, 255, 255, 0.5);
−
background-color:#909090;
+
width:20%;
−
position: fixed;
+
float:right;
−
width:300px;
+
border-left: solid 1px black;
−
left: 0;
+
−
top: calc(50% - 150px);
+
−
transform: translateX(0);  
+
 
}
 
}
−
#contentarrow{
+
#contentToggleImg{
−
margin-left:4px;
+
position:relative;
−
transform: rotate(180deg);
+
display:block;
 +
width:25px;
 +
height:38px;
 +
margin: 0 auto;
 +
transform: rotate(0deg);
 +
top: calc((100% - 38px) / 2);
 +
}
 +
 
 +
 
 +
.activiteit {
 +
font-family: Lato_Regular, Arial, sans-serif;
 +
font-size:20px;
 +
align:center;
 +
}
 +
 
 +
.activiteitlijst{
 +
list-style-type: disc;
 +
list-style-image: initial;
 +
}
 +
 
 +
.tourButton{
 +
display:inline-block;
 
position:absolute;
 
position:absolute;
−
top:calc(50% - 20px);
+
top:10px;
−
width:20px;
+
right:10px;
−
height:40px;
+
}
 +
 
 +
#wikiTourList {
 +
list-style-type:disc;
 +
margin-left:10px;
 +
}
 +
 
 +
#wikiTour {
 +
position:fixed;
 +
left: calc(50% + 640px);
 +
top: 200px;
 +
width:230px;
 +
opacity:0.4;
 +
}
 +
 
 +
#nextChapter, #previousChapter, #moreDepth {
 +
border-radius: 15px;
 +
position:relative;
 +
padding:12px;
 +
background-color: #b0c4de;
 +
margin: 5px 0px;
 
}
 
}
  
 
</html>
 
</html>

Latest revision as of 01:16, 21 November 2015

body{ line-height: normal; /*background-color: #FCFCD5; background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png"); background-attachment: fixed; background-size: 100%; background-repeat: no-repeat;*/ margin: 0 auto; } a:focus {outline: 0;} #scrollUp{ z-index:100; width:100px; position:fixed; left: calc(50% + 630px); bottom: 20px; transition: bottom 0.7s; opacity:0; transition-timing-function: linear; } h1{ font-family: Lato_Bold, Arial, sans-serif; font-size:40px; margin: 0; font-weight: normal; display: inline; } h2{ font-family: Lato_Bold_Italic, Arial, sans-serif; font-size: 25px; margin: 0; font-weight: normal; display: inline; } h3 { font-family: Lato_Italic, Arial, sans-serif; font-size:26px; margin: 0; font-weight: normal; display: inline; } h4{ font-family: Lato_Bold, Arial, sans-serif; font-size:26px; margin:0; font-weight: normal; display: inline; } h5 { font-family: Lato_Italic, Arial, sans-serif; font-size:20px; text-decoration: underline; margin: 0; font-weight: normal; display: inline; } h6{ font-family: Lato_Bold, Arial, sans-serif; font-size:20px; margin:0; font-weight: normal; display: inline; } h7 { font-family: Lato_Italic, Arial, sans-serif; font-size:20px; margin: 0; font-weight: normal; display: inline; } .buttons{ display:inline-block; } .tekst1 { font-family: Lato_Regular, Arial, sans-serif; font-size:20px; color:#000000; line-height:125%; } .tekst2 { font-family: Lato_Regular, Arial, sans-serif; font-size:16px; } .tekst2i { font-family: Lato_Light_Italic, Arial, sans-serif; font-size:20px; } .tekst1B{ font-family: Lato_Bold, Arial, sans-serif; font-size:20px; } .tekst1BI{ font-family: Lato_Bold_Italic, Arial, sans-serif; font-size:20px; } .tekst1I{ font-family: Lato_Italic, Arial, sans-serif; font-size:20px; } .centreText{ text-align:centre; } .caption{ font-family: Lato_Italic, Arial, sans-serif; font-size:16px; } .spoilerbutton { display:inline; } .spoiler { display:none; margin-top: 20px; margin-bottom:20px; overflow:hidden; background: #f5f5f5; margin-left:50px; } .spoilerimage { float: right; margin: 5px 5px 0px 30px; text-align: justify; } .spoilerimagec { display: block; margin-top:10px; margin-left: auto; margin-right: auto } #background{ height:100%; width:100%; position:fixed; /*background-image:url("https://static.igem.org/mediawiki/2015/f/ff/TU_Eindhoven_Main_Background.png"); background-size: cover;*/ top:0; left:0; } #body{ z-index:1; position:absolute; top:60px; width:100%; min-width:1460px; line-height: normal; } #container{ margin:0 auto; margin-bottom: 110px; position:relative; /*border-radius:15px 30px 30px 15px; FB/Twitter komt er nog onder vandaan*/ background-image: url("https://static.igem.org/mediawiki/2015/c/ca/TU_Eindhoven_grey_bf.png"); background-color: white; box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); min-height:1000px; width:1200px; padding-bottom: 50px; } #containercontent{ width:80%; margin-left: 10%; } #menuigemlogo{ height:100%; width:76px; float: left; display:block; background-image: url('https://static.igem.org/mediawiki/2015/1/16/TU_Eindhoven_iGEM_Logo.png'); background-size: cover; background-repeat: no-repeat; margin-left: 30px; } #menuwrapper{ z-index:2; position:relative; height:60px; width:100%; min-width:1460px; background-color: rgba(255,255,255,0.3); } #menuTotal{ width:1460px; height:60px; display:block; position:relative; margin: 0 auto; } #FBTwit{ margin-left: 20px; float:left; } #menu{ position:relative; float:left; width:1200px; height:60px; display:block; margin-left:10px; } #submenuwrapper{ position:relative; z-index:2; width:100%; min-width:1460px; background-color: rgba(255,255,255,0.5); } #submenu{ overflow: hidden; position:relative; z-index: 2; width:1200px; height:0px; margin:0 auto; transition: height 0.2s; } #menu a:not(#menutwitter):not(#menufacebook):not(#menuigemlogo), #submenu a { width:9%; padding-left: calc(13% / 8); position:relative; font-family: Lato_Bold, Arial, sans-serif; /*font-weight: bold;*/ text-align: center; line-height: 60px; height:60px; display:block; text-decoration: none; float: left; color: #004415; } #menu1{ padding-left:0 !important; } #menu6, #menu7{ width:12% !important; } #menutwitter, #menufacebook { padding-right: 0 !important; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover, #sub6 > a:hover, #sub7 > a:hover, #sub8, #sub9 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{ width:100%; height:100%; } #sub2a{ padding-left:0 !important; } #sub3a{ padding-left:0 !important; } #sub4a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 1.5 ) !important; } #sub5a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 3) !important; } #sub6a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 3.5) !important; } #sub7a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 5.5 + 4.5%) !important; } #sub8a{ padding-left:0 !important; margin-left:0 !important; } #sub9a{ padding-left:0 !important; margin-left:calc((9% + 13% / 8) * 6.5) !important; } #sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9{ display:none; } /*Twitter #facebookandtwitter{ width:calc((100% - (5 * 15%)) / 2); height:100%; float:right; background-color: red; } */ #twitter{ z-index:-1; top:0; display: none; right:-120px; position:absolute; height:500px; width:500px; } #twitter_logo{ height:60px; float:left; } /*FB*/ #facebook{ z-index:-1; top:0; display: none; right:-120px; position:absolute; height:500px; width:500px; } #facebook_logo{ height:100%; float:left; } /* Content Menu*/ .contentLink, .contentLink:visited, .contentLink:hover, .contentLink:active{ font-family: Lato_Regular, Arial, sans-serif; color:black; } .contentKop{ font-family: Lato_Regular, Arial, sans-serif; font-size:15px; } .contentList{ list-style: disc; list-syle-image: none; margin-left: 30px; margin-bottom: 0; margin-top: 0; } #infoTab{ z-index:9; margin-left: 0; position: fixed; width:350px; transition: transform 1s; } #infoTabTitle{ border-bottom: solid 1px black; float:right; width:80%; height:50px; background: rgba(255, 255, 255, 0.5); line-height:40px; text-align:center; font-size:20px; font-family: Lato_Bold, Arial, sans-serif; } #infoTabContent{ float:right; width:80%; background: rgba(230, 230, 230, 0.5); text-align:left; } .contentMenuImg{ margin-right:2px; transform: rotate(-180deg); transform-origin: 50% 50%; height:20px; } #contentToggle{ box-sizing: border-box; background: rgba(255, 255, 255, 0.5); width:20%; float:right; border-left: solid 1px black; } #contentToggleImg{ position:relative; display:block; width:25px; height:38px; margin: 0 auto; transform: rotate(0deg); top: calc((100% - 38px) / 2); } .activiteit { font-family: Lato_Regular, Arial, sans-serif; font-size:20px; align:center; } .activiteitlijst{ list-style-type: disc; list-style-image: initial; } .tourButton{ display:inline-block; position:absolute; top:10px; right:10px; } #wikiTourList { list-style-type:disc; margin-left:10px; } #wikiTour { position:fixed; left: calc(50% + 640px); top: 200px; width:230px; opacity:0.4; } #nextChapter, #previousChapter, #moreDepth { border-radius: 15px; position:relative; padding:12px; background-color: #b0c4de; margin: 5px 0px; }