Difference between revisions of "Template:Copenhagen-Header"

 
(48 intermediate revisions by 2 users not shown)
Line 23: Line 23:
  
 
   /***************************************************** CUSTOM WIKI SETTINGS  ****************************************************/
 
   /***************************************************** CUSTOM WIKI SETTINGS  ****************************************************/
 +
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
    color: white; !important!
 +
}
 +
 +
a:hover {
 +
    color: white;
 +
    text-decoration: underline;
 +
}
 +
 +
a {
 +
    color: white;
 +
    text-decoration: none;
 +
}
 +
 +
#bodyContent a[href ^="http://"], #bodyContent a[href ^="gopher://"] {
 +
    text-decoration: underline;
 +
}
 +
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
    color: white;
 +
}
 +
 +
a:visited {
 +
    color: white;
 +
text-decoration: underline;
 +
}
  
 
b, strong {
 
b, strong {
Line 390: Line 419:
 
align-content: center;
 
align-content: center;
 
     width:300px;
 
     width:300px;
−
     height:300px;
+
     height:495px;
 
}
 
}
  
 
.img-responsive2{
 
.img-responsive2{
−
    width:500px;
+
align-content: center;
−
     height:350px;
+
  width:400px;
 +
     height:400px;
 +
transform: rotate(90deg);
 
}
 
}
  
 
.img-responsive3{
 
.img-responsive3{
−
     width:350px;
+
     width:500px;
−
     height:300px;
+
     height:350px;
 
}
 
}
  
Line 600: Line 631:
 
.team-img {
 
.team-img {
 
width:400px;
 
width:400px;
−
     height:500px;
+
     height:400px;
 
}
 
}
  
Line 718: Line 749:
 
}
 
}
  
−
/**
+
      .ui-widget {
−
* Tooltip Styles
+
            border: 1px solid black;
−
*/
+
  
−
/* Add this attribute to the element that needs a tooltip */
+
        }
−
[data-tooltip] {
+
−
  position: relative;
+
−
  z-index: 2;
+
−
  cursor: pointer;
+
−
}
+
  
−
/* Hide the tooltip content by default */
+
        .ui-tooltip, .arrow:after {
−
[data-tooltip]:before,
+
            background: white;
−
[data-tooltip]:after {
+
            border: 1px solid white;
−
  visibility: hidden;
+
        }
−
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+
        .ui-tooltip {
−
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+
            padding: 10px 20px;
−
  opacity: 0;
+
            color: black;
−
  pointer-events: none;
+
            border-radius: 2px;
−
}
+
            font: bold 14px "Helvetica Neue", Sans-Serif;
 +
            text-transform: uppercase;
 +
            box-shadow: 0 0 1px black;
 +
            border: 1px solid white !important;
 +
        }
 +
        .arrow {
 +
            width: 70px;
 +
            height: 16px;
 +
            overflow: hidden;
 +
            position: absolute;
 +
            left: 50%;
 +
            margin-left: -35px;
 +
            bottom: -17px;
 +
        }
 +
        .arrow.top {
 +
            top: -17px;
 +
            bottom: auto;
 +
        }
 +
        .arrow.left {
 +
            left: 20%;
 +
        }
 +
        .arrow:after {
 +
            content: "";
 +
            position: absolute;
 +
            left: 20px;
 +
            top: -20px;
 +
            width: 25px;
 +
            height: 25px;
 +
            box-shadow: 0 0 1px black;
 +
            -webkit-transform: rotate(45deg);
 +
            -moz-transform: rotate(45deg);
 +
            -ms-transform: rotate(45deg);
 +
            -o-transform: rotate(45deg);
 +
            transform: rotate(45deg);
 +
        }
 +
        .arrow.top:after {
 +
            bottom: -20px;
 +
            top: auto;
 +
        }
 +
        .hidden {
 +
            visibility: hidden;
 +
        }
  
−
/* Position tooltip above the element */
+
        .fireTip {
−
[data-tooltip]:before {
+
            margin-left: 0px;
−
  position: absolute;
+
        }
−
  bottom: 150%;
+
−
  left: 50%;
+
−
  margin-bottom: 5px;
+
−
  margin-left: -80px;
+
−
  padding: 7px;
+
−
  width: 160px;
+
−
  -webkit-border-radius: 3px;
+
−
  -moz-border-radius: 3px;
+
−
  border-radius: 3px;
+
−
  background-color: #000;
+
−
  background-color: hsla(0, 0%, 20%, 0.9);
+
−
  color: #fff;
+
−
  content: attr(data-tooltip);
+
−
  text-align: center;
+
−
  font-size: 14px;
+
−
  line-height: 1.2;
+
−
}
+
  
−
/* Triangle hack to make tooltip look like a speech bubble */
+
.cart {
−
[data-tooltip]:after {
+
    overflow:hidden;
−
  position: absolute;
+
    padding:10px 3px;
−
  bottom: 150%;
+
    background: yellow;
−
  left: 170%;
+
−
  margin-left: -5px;
+
−
  width: 0;
+
−
  border-top: 5px solid #000;
+
−
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+
−
  border-right: 5px solid transparent;
+
−
  border-left: 5px solid transparent;
+
−
  content: " ";
+
−
  font-size: 0;
+
−
  line-height: 0;
+
 
}
 
}
  
−
/* Show tooltip content on hover */
 
−
[data-tooltip]:hover:before,
 
−
[data-tooltip]:hover:after {
 
−
  visibility: visible;
 
−
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
−
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
 
−
  opacity: 1;
 
−
}
 
 
     </style>
 
     </style>
  
Line 861: Line 892:
 
});
 
});
  
−
$(function () {
+
 
−
  $('[data-toggle="tooltip"]').tooltip()
+
$(function() {
−
})
+
            $( document ).tooltip({
 +
                items: "input",
 +
                content: function() {
 +
                    return $('.myPopover').html();
 +
                },
 +
                position: {
 +
                    my: "center bottom-20",
 +
                    at: "center top",
 +
                    using: function( position, feedback ) {
 +
                        $( this ).css( position );
 +
                        $( "<div>" )
 +
                                .addClass( "arrow" )
 +
                                .addClass( feedback.vertical )
 +
                                .addClass( feedback.horizontal )
 +
                                .appendTo( this );
 +
                    }
 +
                }
 +
            });
 +
 
 +
            $('.fireTip').click(function () {
 +
                if(!$(this).hasClass('open')) {
 +
                    $('#age').trigger('mouseover');
 +
                    $(this).addClass('open');
 +
                } else {
 +
                    $('#age').trigger('mouseout');
 +
                    $(this).removeClass('open');
 +
                }
 +
 
 +
            })
 +
 
 +
        });
 +
 
 +
$(document).ready(function(){
 +
$("#masterclass-popover").popover({
 +
    html : true,
 +
placement: 'bottom',
 +
    title: $("#masterclass-popover-head").html(),
 +
    content: $("#masterclass-popover-content").html()
 +
    });
 +
 
 +
$("small.download-notice a").click(function(e) {
 +
    e.preventDefault();
 +
});
 +
});
 +
 
 +
$(document).on("click", ".tooltip", function() {
 +
    $(this).tooltip(
 +
        {
 +
            items: ".tooltip",
 +
            content: function(){
 +
                return $(this).data('description');
 +
            },
 +
            close: function( event, ui ) {
 +
                var me = this;
 +
                ui.tooltip.hover(
 +
                    function () {
 +
                        $(this).stop(true).fadeTo(400, 1);
 +
                    },
 +
                    function () {
 +
                        $(this).fadeOut("400", function(){
 +
                            $(this).remove();
 +
                        });
 +
                    }
 +
                );
 +
                ui.tooltip.on("remove", function(){
 +
                    $(me).tooltip("destroy");
 +
                });
 +
          },
 +
        }
 +
    );
 +
    $(this).tooltip("open");
 +
});
 +
 
 
</script>
 
</script>
  
Line 902: Line 1,005:
 
                     <li>
 
                     <li>
 
                         <div class="dropdown">
 
                         <div class="dropdown">
−
                             <a href="https://2017.igem.org/Team:UCopenhagen/Safety"><button class="dropbtn">Safety</button></a>
+
                             <a href="https://2017.igem.org/Team:UCopenhagen/Safety"><button class="dropbtn">Safety & Labnotes</button></a>
 
                             <div class="dropdown-content">
 
                             <div class="dropdown-content">
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Safety">Safety</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Safety">Safety</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Notebook">Notebook</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Notebook">Notebook</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Protocols">Protocols</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/Protocols">Protocols</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Improve">Improve</a>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 925: Line 1,029:
 
                             <div class="dropdown-content">
 
                             <div class="dropdown-content">
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Silver">Overview</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Silver">Overview</a>
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Gold_Integrated">Integrated</a>
 
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Ethics">Ethics</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Ethics">Ethics</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Gold_Integrated">Integrated</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Events">Events</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Events">Events</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Media">Media</a>
 
                                 <a href="https://2017.igem.org/Team:UCopenhagen/HP/Media">Media</a>
 
                             </div>
 
                             </div>
−
                        </div>
 
−
                    </li>
 
−
<li>
 
−
                        <div class="dropdown">
 
−
                            <a href="https://2017.igem.org/Team:UCopenhagen/Next"><button href="https://2017.igem.org/Team:UCopenhagen/Project" class="dropbtn">What's next?</button></a>
 
−
                            <div class="dropdown-content">
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Next">Next steps</a>
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Limitations">Limitations</a>
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Ethical-concerns">Ethical concerns</a>
 
−
                                <a href="https://2017.igem.org/Team:UCopenhagen/Final">Final words</a>
 
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>

Latest revision as of 03:57, 2 November 2017