Difference between revisions of "Team:Aachen/Template:Team:Aachen/CSS/InteractiveTour"

(Created page with "/* TOUR MENU */ .tourBoundingBox { text-align:center; width: 100vw; height: 73px; z-index: 9999; margin-left:-15px; } →‎Left and right end of the tour + color control: ....")
 
Line 20: Line 20:
 
background-position: center -14px;  
 
background-position: center -14px;  
 
background-size: auto 80px;  
 
background-size: auto 80px;  
−
background-image: url(http://igem.rwth-aachen.de/2015/images/2/26/Background.png);  
+
background-image: url(https://static.igem.org/mediawiki/2015/6/65/Aachen_bg.png);  
 
}
 
}
  
 
.tourBorderLeft.itemselected1 {
 
.tourBorderLeft.itemselected1 {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/c/cd/Background_selected_blue_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/a/a9/Aachen_bg_selected_red.png);
 
}
 
}
 
.tourBorderLeft.itemselected2 {
 
.tourBorderLeft.itemselected2 {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/9/94/Background_selected_green_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/0/03/Aachen_bg_selected_purple.png);
 
}
 
}
 
.tourBorderLeft.itemselected3 {
 
.tourBorderLeft.itemselected3 {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/7/71/Background_selected_red_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/e/e0/Aachen_bg_selected_green.png);
 
}
 
}
 
.tourBorderLeft.itemselected4 {
 
.tourBorderLeft.itemselected4 {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/9/9a/Background_selected_purple_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/2/29/Aachen_bg_selected_blue.png);
 
}
 
}
 
.tourBorderLeft.itemselected5 {
 
.tourBorderLeft.itemselected5 {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/5/58/Background_selected_orange_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/a/a0/Aachen_bg_selected_orange.png);
 
}
 
}
 
.tourBorderLeft.itemselected6, .tourBorderRight.itemselected6 {
 
.tourBorderLeft.itemselected6, .tourBorderRight.itemselected6 {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/e/ef/Background_selected_yellow_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/3/34/Aachen_bg_selected_yellow_v3.png);
 
}
 
}
  
Line 48: Line 48:
  
 
/*control of expanded submenus*/
 
/*control of expanded submenus*/
−
 
−
.tourItemLabel.tourItemLabelExpanded1{
 
−
background-color: #7595df;
 
−
}
 
−
.childTourItem.expanded1:first-child{
 
−
background-image: url(http://igem.rwth-aachen.de/2015/images/4/41/Branch_extended_blue_v3.png);
 
−
}
 
−
.childTourItem.expanded1:nth-last-child(2){
 
−
background-image: url(http://igem.rwth-aachen.de/2015/images/9/9e/End_extended_blue_v3.png);
 
−
}
 
−
 
−
 
−
.tourItemLabel.tourItemLabelExpanded2{
 
−
background-color: #05ff69;
 
−
}
 
−
.childTourItem.expanded2{
 
−
background-image: url(http://igem.rwth-aachen.de/2015/images/a/a8/Default_c_expanded_green_v3.png);
 
−
}
 
−
.childTourItem.expanded2:first-child{
 
−
background-image: url(http://igem.rwth-aachen.de/2015/images/9/9e/Branch_extended_green_v3.png);
 
−
}
 
−
.childTourItem.expanded2:nth-last-child(2){
 
−
background-image: url(http://igem.rwth-aachen.de/2015/images/0/03/End_expanded_green_v3.png);
 
−
}
 
  
 
.tourItemLabel.tourItemLabelExpanded3{
 
.tourItemLabel.tourItemLabelExpanded3{
Line 77: Line 53:
 
}
 
}
 
.childTourItem.expanded3{
 
.childTourItem.expanded3{
−
background-image: url(http://igem.rwth-aachen.de/2015/images/e/ef/Default_c_expanded_red_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/76/Aachen_child_expanded_green.png);
 
}
 
}
 
.childTourItem.expanded3:first-child{
 
.childTourItem.expanded3:first-child{
−
background-image: url(http://igem.rwth-aachen.de/2015/images/b/b8/Branch_extended_red_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/4/44/Aachen_branch_extended_green.png);
 
}
 
}
 
.childTourItem.expanded3:nth-last-child(2){
 
.childTourItem.expanded3:nth-last-child(2){
−
background-image: url(http://igem.rwth-aachen.de/2015/images/9/9e/End_expanded_red_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/7b/Aachen_end_expanded_green.png);
 
}
 
}
 +
  
 
.tourItemLabel.tourItemLabelExpanded4{
 
.tourItemLabel.tourItemLabelExpanded4{
Line 90: Line 67:
 
}
 
}
 
.childTourItem.expanded4{
 
.childTourItem.expanded4{
−
background-image: url(http://igem.rwth-aachen.de/2015/images/1/1b/Default_c_expanded_purple_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/72/Aachen_child_expanded_blue.png);
 
}
 
}
 
.childTourItem.expanded4:first-child{
 
.childTourItem.expanded4:first-child{
−
background-image: url(http://igem.rwth-aachen.de/2015/images/4/4e/Branch_extended_purple_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/e/ef/Aachen_branch_extended_blue.png);
 
}
 
}
 
.childTourItem.expanded4:nth-last-child(2){
 
.childTourItem.expanded4:nth-last-child(2){
−
background-image: url(http://igem.rwth-aachen.de/2015/images/8/82/End_expanded_purple_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/b/bf/Aachen_end_extended_blue.png);
 
}
 
}
 +
  
 
.tourItemLabel.tourItemLabelExpanded5{
 
.tourItemLabel.tourItemLabelExpanded5{
Line 103: Line 81:
 
}
 
}
 
.childTourItem.expanded5{
 
.childTourItem.expanded5{
−
background-image: url(http://igem.rwth-aachen.de/2015/images/2/2d/Default_c_expanded_orange_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/5/52/Aachen_child_expanded_orange.png);
 
}
 
}
 
.childTourItem.expanded5:first-child{
 
.childTourItem.expanded5:first-child{
−
background-image: url(http://igem.rwth-aachen.de/2015/images/7/7f/Branch_extended_orange_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/3/37/Aachen_branch_expanded_orange.png);
 
}
 
}
 
.childTourItem.expanded5:nth-last-child(2){
 
.childTourItem.expanded5:nth-last-child(2){
−
background-image: url(http://igem.rwth-aachen.de/2015/images/0/07/End_expanded_orange_v3.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/b/b2/Aachen_end_expanded_orange.png);
 
}
 
}
 +
  
 
.tourBoundingBoxInner {
 
.tourBoundingBoxInner {
Line 125: Line 104:
 
  width:160px;
 
  width:160px;
 
  height:100%;
 
  height:100%;
−
  background-image:url(http://igem.rwth-aachen.de/2015/images/d/d4/Default_nonselected.png);  /*default nonselected = line with hexagon, all grey*/
+
  background-image:url(https://static.igem.org/mediawiki/2015/4/4d/Aachen_parent_nonselected.png);  /*default nonselected = line with hexagon, all grey*/
 
  background-repeat:no-repeat;
 
  background-repeat:no-repeat;
 
  background-position:center bottom;
 
  background-position:center bottom;
Line 137: Line 116:
 
   
 
   
 
   .parentTourItem.itemLastSelected1{
 
   .parentTourItem.itemLastSelected1{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/8/80/Default_p_lastselected_blue_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Aachen_parent_lastselected_red.png);
 
   }
 
   }
 
   .parentTourItem.itemLastSelected2{
 
   .parentTourItem.itemLastSelected2{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/9/9a/Default_p_lastselected_green_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/3/3c/Aachen_parent_lastselected_purple.png);
 
   }
 
   }
 
   .parentTourItem.itemLastSelected3{
 
   .parentTourItem.itemLastSelected3{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/8/84/Default_p_lastselected_red_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/f/f2/Aachen_parent_lastselected_green.png);
 
   }
 
   }
 
   .parentTourItem.itemLastSelected4{
 
   .parentTourItem.itemLastSelected4{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/b/b8/Default_p_lastselected_purple_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/5/54/Aachen_parent_lastselected_blue.png);
 
   }
 
   }
 
   .parentTourItem.itemLastSelected5{
 
   .parentTourItem.itemLastSelected5{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/1/15/Default_p_lastselected_orange_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/6/6e/Aachen_parent_lastselected_orange.png);
 
   }
 
   }
 
   .parentTourItem.itemLastSelected6{
 
   .parentTourItem.itemLastSelected6{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/4/42/Default_p_lastselected_yellow_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/4/42/Default_p_lastselected_yellow_v3.png);
 
   }
 
   }
 
    
 
    
 
    
 
    
 
   .parentTourItem.itemSelected2{
 
   .parentTourItem.itemSelected2{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/7/74/Default_p_selected_green_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/a/ae/Aachen_parent_selected_purple.png);
 
   }
 
   }
 
   .parentTourItem.itemSelected3{
 
   .parentTourItem.itemSelected3{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/9/94/Default_p_selected_red_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/5/56/Aachen_parent_selected_green.png);
 
   }
 
   }
 
   .parentTourItem.itemSelected4{
 
   .parentTourItem.itemSelected4{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/7/77/Default_p_selected_purple_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/f/f5/Aachen_parent_selected_blue.png);
 
   }
 
   }
 
   .parentTourItem.itemSelected5{
 
   .parentTourItem.itemSelected5{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/3/3f/Default_p_selected_orange_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/7/7a/Aachen_parent_selected_orange_v3.png);
 
   }
 
   }
 
   .parentTourItem.itemSelected6{
 
   .parentTourItem.itemSelected6{
−
  background-image: url(http://igem.rwth-aachen.de/2015/images/e/e0/Default_p_selected_yellow_v3.png);
+
  background-image: url(https://static.igem.org/mediawiki/2015/e/e0/Default_p_selected_yellow_v3.png);
 
   }
 
   }
 
    
 
    
  
 
.parentTourItem.itemParentSelected3{
 
.parentTourItem.itemParentSelected3{
−
           background-image: url(http://igem.rwth-aachen.de/2015/images/f/fd/Aachen_parent_parentselected_red.png);
+
           background-image: url(https://static.igem.org/mediawiki/2015/0/02/Aachen_parent_parentselected_green.png);
 
}
 
}
 
.parentTourItem.itemParentSelected4{
 
.parentTourItem.itemParentSelected4{
−
 
+
          background-image: url(https://static.igem.org/mediawiki/2015/7/74/Aachen_parent_parentselected_blue.png);
 
}
 
}
 
.parentTourItem.itemParentSelected5{
 
.parentTourItem.itemParentSelected5{
−
 
+
          background-image: url(https://static.igem.org/mediawiki/2015/4/44/Aachen_parent_parentselected_orange.png);
 
}
 
}
  
Line 186: Line 165:
  
 
.childTourItem.itemLastSelected3:first-child{
 
.childTourItem.itemLastSelected3:first-child{
−
           background-image: url(http://igem.rwth-aachen.de/2015/images/b/b2/Aachen_branch_lastselected_red.png);
+
           background-image: url(https://static.igem.org/mediawiki/2015/b/b2/Aachen_branch_lastselected_green.png);
 
}
 
}
 
.childTourItem.itemLastSelected4:first-child{
 
.childTourItem.itemLastSelected4:first-child{
−
 
+
          background-image: url(
−
}
+
}  
 
.childTourItem.itemLastSelected5:first-child{
 
.childTourItem.itemLastSelected5:first-child{
  

Revision as of 21:38, 15 September 2015

/* TOUR MENU */

.tourBoundingBox {

text-align:center; width: 100vw; height: 73px; z-index: 9999; margin-left:-15px;

}

/*Left and right end of the tour + color control*/

.tourBorderLeft, .tourBorderRight { 

   float:left;
   width: calc((100vw - 960px)/2);
   height: 100%;

background-repeat: repeat-x; background-position: center -14px; background-size: auto 80px; background-image: url(Aachen_bg.png); }

.tourBorderLeft.itemselected1 { background-image: url(Aachen_bg_selected_red.png); } .tourBorderLeft.itemselected2 { background-image: url(Aachen_bg_selected_purple.png); } .tourBorderLeft.itemselected3 { background-image: url(Aachen_bg_selected_green.png); } .tourBorderLeft.itemselected4 { background-image: url(Aachen_bg_selected_blue.png); } .tourBorderLeft.itemselected5 { background-image: url(Aachen_bg_selected_orange.png); } .tourBorderLeft.itemselected6, .tourBorderRight.itemselected6 { background-image: url(Aachen_bg_selected_yellow_v3.png); }




/*control of expanded submenus*/

.tourItemLabel.tourItemLabelExpanded3{ background-color: #EC545F; } .childTourItem.expanded3{ background-image: url(Aachen_child_expanded_green.png); } .childTourItem.expanded3:first-child{ background-image: url(Aachen_branch_extended_green.png); } .childTourItem.expanded3:nth-last-child(2){ background-image: url(Aachen_end_expanded_green.png); }


.tourItemLabel.tourItemLabelExpanded4{ background-color: #DA7AD2; } .childTourItem.expanded4{ background-image: url(Aachen_child_expanded_blue.png); } .childTourItem.expanded4:first-child{ background-image: url(Aachen_branch_extended_blue.png); } .childTourItem.expanded4:nth-last-child(2){ background-image: url(Aachen_end_extended_blue.png); }


.tourItemLabel.tourItemLabelExpanded5{ background-color: #FFA97D; } .childTourItem.expanded5{ background-image: url(Aachen_child_expanded_orange.png); } .childTourItem.expanded5:first-child{ background-image: url(Aachen_branch_expanded_orange.png); } .childTourItem.expanded5:nth-last-child(2){ background-image: url(Aachen_end_expanded_orange.png); }


.tourBoundingBoxInner {

height:66px; width:960px; float:left; padding-top: 7px; } 

.parentTourItem {
position: relative;
float:left;
width:160px;
height:100%;
background-image:url(Aachen_parent_nonselected.png);   /*default nonselected = line with hexagon, all grey*/
background-repeat:no-repeat;
background-position:center bottom;
background-size: auto 80px;
text-align:center;
padding-top:22px;
padding-left:2px;
padding-right:2px;
z-index: 10;
}

 .parentTourItem.itemLastSelected1{

background-image: url(Aachen_parent_lastselected_red.png); 

 }
 .parentTourItem.itemLastSelected2{

background-image: url(Aachen_parent_lastselected_purple.png); 

 }
 .parentTourItem.itemLastSelected3{

background-image: url(Aachen_parent_lastselected_green.png); 

 }
 .parentTourItem.itemLastSelected4{

background-image: url(Aachen_parent_lastselected_blue.png); 

 }
 .parentTourItem.itemLastSelected5{

background-image: url(Aachen_parent_lastselected_orange.png); 

 }
  .parentTourItem.itemLastSelected6{

background-image: url(Default_p_lastselected_yellow_v3.png); 

 }
 
 
 .parentTourItem.itemSelected2{

background-image: url(Aachen_parent_selected_purple.png); 

 }
 .parentTourItem.itemSelected3{

background-image: url(Aachen_parent_selected_green.png); 

 }
  .parentTourItem.itemSelected4{

background-image: url(Aachen_parent_selected_blue.png); 

 }
  .parentTourItem.itemSelected5{

background-image: url(Aachen_parent_selected_orange_v3.png); 

 }
  .parentTourItem.itemSelected6{

background-image: url(Default_p_selected_yellow_v3.png); 

 }

.parentTourItem.itemParentSelected3{ 

         background-image: url(Aachen_parent_parentselected_green.png);

} .parentTourItem.itemParentSelected4{ 

         background-image: url(Aachen_parent_parentselected_blue.png);

} .parentTourItem.itemParentSelected5{ 

         background-image: url(Aachen_parent_parentselected_orange.png);

}


.childTourItem.itemLastSelected3:first-child{ 

         background-image: url(Aachen_branch_lastselected_green.png);

} .childTourItem.itemLastSelected4:first-child{ 

         background-image: url(

} .childTourItem.itemLastSelected5:first-child{

}


.childTourItem.itemLastSelected3:nth-last-child(2){

} .childTourItem.itemLastSelected4:nth-last-child(2){

} .childTourItem.itemLastSelected5:nth-last-child(2){

} 




 .parentTourItemHidden {

display: none;

} 

.expandedTour {

height:100%;

float:left;

}

.expandedTourInner {

position: absolute; 

padding-top:70px;

float:left;

width:auto;

background-repeat:repeat-x;

background-image:url();

}

.childTourItem {
position: relative;
float:left;
width:160px;
height:100px;
background-image:url(http://igem.rwth-aachen.de/2015/images/d/d4/Default_nonselected.png); 
background-repeat:no-repeat;
background-position:center bottom;
background-size: auto 80px;
text-align:center;
padding-top:61px;
padding-left:2px;
padding-right:2px;
margin-top: -46px !important;
margin-left:-35px;
z-index: 5;

} 

.childTourItem:nth-last-child(2){

background-image: url(http://igem.rwth-aachen.de/2015/images/9/97/End_nonselected.png); 

   padding-left: 69px;

margin-left:-80px; 

}

 .childTourItem:first-child{

background-image: url(http://igem.rwth-aachen.de/2015/images/8/83/Branch_nonselected.png); 

    margin-left: -101px;

padding-top: 61px; 

    padding-left: 0px;
}




.tourItemLabel {
position:relative;
top: 26px;
left: -64px; 	 
width: 110px; 
margin-left:auto;
margin-right:auto;
background-color:#AAAAAA;
text-align:center;
font-size:10px;
line-height: 1.5em;
padding: 0px 4px;
display:inline-block;
color:black;
}
 .tourItemLabel:visited {

color: black; 

 }

 .tourItemLabel:hover {
color:white;
text-decoration:none;
}

.childTourItem:first-child > .tourItemLabel{ left: -86px; 

}
.tourItemLabelSelected1 {
background-color:#2850ad;
color: black;
}

.tourItemLabelSelected2 { 

background-color:#aaaaaa;
color: black;
}

.tourItemLabel.tourItemLabelLastSelected1 { color: white; background-color: #2850ad; } .tourItemLabel.tourItemLabelLastSelected2 { color: white; background-color: #00993d; } .tourItemLabel.tourItemLabelLastSelected3 { color: white; background-color: #bf1521; } .tourItemLabel.tourItemLabelLastSelected4 { color: white; background-color: #b933ad; } .tourItemLabel.tourItemLabelLastSelected5 { color: white; background-color: #FF6313; } .tourItemLabel.tourItemLabelLastSelected6 { color: #333333; background-color: #FCCC0A; } .tourItemLabel.tourItemLabelLastSelected6:hover { color: #333333; }


.tourItemLabelIndicator { 

background-color:#fb9d23;

color:white !important;

}