Team:UNITN-Trento/CSS/Team

From 2013.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
function swapBg(img) {
+
@import url(http://fonts.googleapis.com/css?family=Contrail+One);
-
alt = $(img).attr('data-alt');
+
 
-
src = $(img).attr('src');
+
.tn-title {
-
$(img).fadeOut('fast', function() {
+
    /*font-family: 'Contrail One', cursive;*/
-
$(img).attr('src',alt);
+
    font-family: "Trebuchet MS",Helvetica,sans-serif;
-
$(img).attr('data-alt',src);
+
    font-variant: small-caps;
-
$(img).fadeIn();
+
    font-size: 3em;
-
});
+
    margin-bottom: 0;
 +
    color: #bf1b39;
}
}
-
$(document).ready(function() {
+
/*jmslideshow*/
-
$( '#jms-slideshow' ).jmslideshow();
+
-
$('#jms-slideshow .image').each(function() {
+
.jms-slideshow {
-
$(this).click(function(e) {
+
    font-size: 16px;
-
e.preventDefault();
+
}
-
swapBg($(this).children('img'));
+
-
});
+
-
});
+
-
$('#tn-content .tag').each(function() {
+
.jms-slideshow .step {
-
$(this).click(function(e) {
+
    height: 600px;
-
e.preventDefault();
+
    height: 500px;
-
if ( $(this).attr( 'data-type' ) === "img" && !$(this).hasClass( 'active' ) ) {
+
    font-size: 1.5em;
-
$('#tn-content .tag').removeClass( 'active' );
+
    text-align: center;
-
_self = $(this);
+
    border-radius: 1em;
-
_self.addClass( 'active' );
+
    -webkit-box-shadow: 0 8px 6px -6px black;
 +
    -moz-box-shadow: 0 8px 6px -6px black;
 +
    box-shadow: 0 8px 6px -6px black;
 +
    background-image: url(http://i40.tinypic.com/wlvibc.png);
 +
}
-
div = $('<div/>');
+
.jms-slideshow .step .title {
-
$(div).addClass( 'tn-hoverTag' );
+
    font-family: "Contrail One";
 +
    font-size: 2.5em;
 +
    font-weight: bold;
 +
    text-align: center;
 +
}
-
$(div).append( '<span>Click to exit</span><br/>' );
+
.jms-slideshow .step table {
-
$(div).append( '<img src="' + $(_self).attr('href') + '" />' );
+
    width: 100%;
-
$(div).children().wrapAll( 'div' );
+
    height: 100%;
 +
    border-radius: 1em;
 +
    background-color: rgba(250,250,250,0.6);
 +
}
-
$(div).click(function(e) {
+
.jms-slideshow .step table th {
-
e.preventDefault();
+
    width: 150px;
-
$(div).remove();
+
    font-size: 0.9em;
-
$('#tn-content .tag').removeClass( 'active' );
+
    font-variant: small-caps;
-
});
+
    text-align: right;
-
$('body').append(div);
+
}
-
} else {
+
 
-
alert("E");
+
.jms-slideshow .step table td:not(.title) {
-
}
+
    width: 350px;
-
});
+
    padding-left: 0.5em;
-
});
+
    text-align: left;
-
});
+
}
 +
 
 +
.jms-slideshow .step table td.image {
 +
    position: relative;
 +
    width: 100px;
 +
    padding: 0;
 +
    text-align: right;
 +
    vertical-align: top;
 +
    background-color: transparent;
 +
}
 +
 
 +
.jms-slideshow .step table td.image img {
 +
    border-radius: 1em;
 +
}
 +
 
 +
.jms-slideshow .step table td:not(.image),
 +
.jms-slideshow .step table th {
 +
    vertical-align: middle;
 +
}
 +
 
 +
/*tooltips*/
 +
.image .tooltip {
 +
    display: none;
 +
}
 +
 
 +
.image:hover .tooltip {
 +
    display: block;
 +
    position: absolute;
 +
    top: 100px;
 +
    left: 1em;
 +
    padding: 5px;
 +
    border-radius: 5px;
 +
    background-color: #dadada;
 +
    box-shadow: 1px 1px 0 1px rgba(18,18,18,0.5);
 +
    color: #323232;
 +
}
 +
 
 +
/*hashtags*/
 +
#tn-content a {
 +
    display: inline-block;
 +
    margin: 2px;
 +
    padding: 10px;
 +
    background-color: #323232;
 +
    border-radius: 5px;
 +
    box-shadow: 1px 1px 0 1px rgba(18,18,18,.3);
 +
    color: #dadada;
 +
    font-size: 0.8em;
 +
    font-variant: small-caps;
 +
    font-weight: bold;
 +
}
 +
 
 +
.jms-slideshow .color-1,
 +
#tn-content .color-1 a {
 +
    background-color: #000000!important;
 +
}
 +
 
 +
.jms-slideshow .color-2,
 +
#tn-content .color-2 a {
 +
    background-color: #68C9B6!important;
 +
    color: #323232!important;
 +
}
 +
 
 +
#tn-content .color-2 a {
 +
    background-color: #68C9B6!important;
 +
}
 +
 
 +
.jms-slideshow .color-3,
 +
#tn-content .color-3 a {
 +
    background-color: #D67500!important;
 +
}
 +
 
 +
.jms-slideshow .color-4,
 +
#tn-content .color-4 a {
 +
    background-color: #7F0A06!important;
 +
}
 +
 
 +
.jms-slideshow .color-5,
 +
#tn-content .color-5 a {
 +
    background-color: #BA301B!important;
 +
}
 +
 
 +
#tn-content .color-6 a {
 +
    background-color: #323232!important;
 +
}
 +
 
 +
.jms-slideshow .color-7,
 +
#tn-content .color-7 a {
 +
    background-color: #239435!important;
 +
}
 +
 
 +
.jms-slideshow .color-8,
 +
#tn-content .color-8 a {
 +
    background-color: #C7004C!important;
 +
}
 +
 
 +
#tn-content a:hover {
 +
    background-color: #dadada!important;
 +
    box-shadow: 1px 1px 0 1px rgba(18,18,18,.3) inset;
 +
    color: #323232;
 +
    text-decoration: none;
 +
}
 +
 
 +
/*hoverTag*/
 +
 
 +
.tn-hoverTag {
 +
    position: fixed;
 +
    top: 0; left: 0; right: 0; bottom: 0;
 +
    width: 100%; height: 100%;
 +
    z-index: 10;
 +
    background-color: rgba(250,250,250,.7);
 +
    text-align: center;
 +
    vertical-align: middle;
 +
}
 +
 
 +
.tn-hoverTag div {
 +
    max-width: 600px;
 +
    vertical-align: middle;
 +
}
 +
 
 +
.tn-hoverTag span {
 +
    display: inline-block;
 +
    width: 200px;
 +
    background-color: white;
 +
    font-size: 2em;
 +
}

Revision as of 08:06, 13 August 2013

@import url(http://fonts.googleapis.com/css?family=Contrail+One);

.tn-title { 

   /*font-family: 'Contrail One', cursive;*/
   font-family: "Trebuchet MS",Helvetica,sans-serif;
   font-variant: small-caps;
   font-size: 3em;
   margin-bottom: 0;
   color: #bf1b39;

}

/*jmslideshow*/

.jms-slideshow { 

   font-size: 16px;

}

.jms-slideshow .step { 

   height: 600px;
   height: 500px;
   font-size: 1.5em;
   text-align: center;
   border-radius: 1em;
   -webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
   box-shadow: 0 8px 6px -6px black;
   background-image: url(http://i40.tinypic.com/wlvibc.png);

}

.jms-slideshow .step .title { 

   font-family: "Contrail One";
   font-size: 2.5em;
   font-weight: bold;
   text-align: center;

}

.jms-slideshow .step table { 

   width: 100%;
   height: 100%;
   border-radius: 1em;
   background-color: rgba(250,250,250,0.6);

}

.jms-slideshow .step table th { 

   width: 150px;
   font-size: 0.9em;
   font-variant: small-caps;
   text-align: right;

}

.jms-slideshow .step table td:not(.title) { 

   width: 350px;
   padding-left: 0.5em;
   text-align: left;

}

.jms-slideshow .step table td.image { 

   position: relative;
   width: 100px;
   padding: 0;
   text-align: right;
   vertical-align: top;
   background-color: transparent;

}

.jms-slideshow .step table td.image img { 

   border-radius: 1em;

}

.jms-slideshow .step table td:not(.image), .jms-slideshow .step table th { 

   vertical-align: middle;

}

/*tooltips*/ .image .tooltip { 

   display: none;

}

.image:hover .tooltip { 

   display: block;
   position: absolute;
   top: 100px;
   left: 1em;
   padding: 5px;
   border-radius: 5px;
   background-color: #dadada;
   box-shadow: 1px 1px 0 1px rgba(18,18,18,0.5);
   color: #323232;

}

/*hashtags*/

  1. tn-content a { 
   display: inline-block;
   margin: 2px;
   padding: 10px;
   background-color: #323232;
   border-radius: 5px;
   box-shadow: 1px 1px 0 1px rgba(18,18,18,.3);
   color: #dadada;
   font-size: 0.8em;
   font-variant: small-caps;
   font-weight: bold;

}

.jms-slideshow .color-1,

  1. tn-content .color-1 a { 
   background-color: #000000!important;

}

.jms-slideshow .color-2,

  1. tn-content .color-2 a { 
   background-color: #68C9B6!important;
   color: #323232!important;

}

  1. tn-content .color-2 a { 
   background-color: #68C9B6!important;

}

.jms-slideshow .color-3,

  1. tn-content .color-3 a { 
   background-color: #D67500!important;

}

.jms-slideshow .color-4,

  1. tn-content .color-4 a { 
   background-color: #7F0A06!important;

}

.jms-slideshow .color-5,

  1. tn-content .color-5 a { 
   background-color: #BA301B!important;

}

  1. tn-content .color-6 a { 
   background-color: #323232!important;

}

.jms-slideshow .color-7,

  1. tn-content .color-7 a { 
   background-color: #239435!important;

}

.jms-slideshow .color-8,

  1. tn-content .color-8 a { 
   background-color: #C7004C!important;

}

  1. tn-content a:hover { 
   background-color: #dadada!important;
   box-shadow: 1px 1px 0 1px rgba(18,18,18,.3) inset;
   color: #323232;
   text-decoration: none;

}

/*hoverTag*/

.tn-hoverTag { 

   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   width: 100%; height: 100%;
   z-index: 10;
   background-color: rgba(250,250,250,.7);
   text-align: center;
   vertical-align: middle;

}

.tn-hoverTag div { 

   max-width: 600px;
   vertical-align: middle;

}

.tn-hoverTag span { 

   display: inline-block;
   width: 200px;
   background-color: white;
   font-size: 2em;

}

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Team"