Team:UNITN-Trento/CSS/Team
From 2013.igem.org
(Difference between revisions)
Line 8: | Line 8: | ||
margin-bottom: 0; | margin-bottom: 0; | ||
color: #bf1b39; | color: #bf1b39; | ||
+ | } | ||
+ | |||
+ | /*jmpress*/ | ||
+ | .jms-slideshow { | ||
+ | position: relative; | ||
+ | width: 80%; | ||
+ | max-width: 1400px; | ||
+ | min-width: 640px; | ||
+ | margin: 20px auto; | ||
+ | height: 460px; | ||
+ | } | ||
+ | |||
+ | .jms-wrapper { | ||
+ | width: auto; | ||
+ | min-width: 600px; | ||
+ | height: 440px; | ||
+ | background-color: #fff; | ||
+ | box-shadow: 0 2px 6px rgba(0, 0, 0, .2); | ||
+ | -webkit-background-clip: padding; | ||
+ | -moz-background-clip: padding; | ||
+ | background-clip: padding-box; | ||
+ | border: 10px solid #fff; | ||
+ | border: 10px solid rgba(255, 255, 255, 0.9); | ||
+ | outline: none; | ||
+ | transition: background-color 1s linear; | ||
+ | } | ||
+ | |||
+ | .color-1 { | ||
+ | background-color: #E3D8FF; | ||
+ | background-color: rgba(227, 216, 268, 1); | ||
+ | } | ||
+ | .color-2 { | ||
+ | background-color: #EBBBBC; | ||
+ | background-color: rgba(235, 187, 188, 1); | ||
+ | } | ||
+ | .color-3 { | ||
+ | background-color: #EED9C0; | ||
+ | background-color: rgba(238, 217, 192, 1); | ||
+ | } | ||
+ | .color-4 { | ||
+ | background-color: #DFEBB1; | ||
+ | background-color: rgba(223, 235, 177, 1); | ||
+ | } | ||
+ | .color-5{ | ||
+ | background-color: #C1E6E5; | ||
+ | background-color: rgba(193, 230, 229, 1); | ||
+ | } | ||
+ | |||
+ | .step { | ||
+ | width: 900px; | ||
+ | height: 420px; | ||
+ | display: block; | ||
+ | transition: opacity 1s; | ||
+ | } | ||
+ | .step:not(.active) { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .jms-content{ | ||
+ | margin: 0px 370px 0px 20px; | ||
+ | position: relative; | ||
+ | clear: both; | ||
+ | } | ||
+ | .step h3{ | ||
+ | color: #fff; | ||
+ | font-size: 52px; | ||
+ | font-weight: bold; | ||
+ | text-shadow: 1px 1px 1px rgba(0,0,0,0.1); | ||
+ | margin: 0; | ||
+ | padding: 60px 0 10px 0; | ||
+ | } | ||
+ | .step p { | ||
+ | color: #fff; | ||
+ | text-shadow: 1px 1px 1px rgba(0,0,0,0.1); | ||
+ | font-size: 34px; | ||
+ | font-weight: normal; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | a.jms-link{ | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | background: linear-gradient(top, #969696 0%,#727272 100%); | ||
+ | padding: 8px 15px; | ||
+ | display: inline-block; | ||
+ | font-size: 16px; | ||
+ | font-weight: bold; | ||
+ | color: #fff; | ||
+ | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); | ||
+ | box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | ||
+ | border: 1px solid #444; | ||
+ | border-radius: 4px; | ||
+ | opacity: 1; | ||
+ | margin-top: 40px; | ||
+ | clear: both; | ||
+ | transition: all 0.4s ease-in-out 1s; | ||
+ | } | ||
+ | .step:not(.active) a.jms-link{ | ||
+ | opacity: 0; | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | .step img{ | ||
+ | position: absolute; | ||
+ | right: 0px; | ||
+ | top: 30px; | ||
+ | } | ||
+ | |||
+ | .jms-dots{ | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | text-align: center; | ||
+ | left: 0px; | ||
+ | bottom: 20px; | ||
+ | z-index: 2000; | ||
+ | user-select: none; | ||
+ | } | ||
+ | |||
+ | .jms-dots span{ | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | width: 12px; | ||
+ | height: 12px; | ||
+ | border-radius: 50%; | ||
+ | background: #777; | ||
+ | margin: 3px; | ||
+ | cursor: pointer; | ||
+ | box-shadow: | ||
+ | 1px 1px 1px rgba(0,0,0,0.1) inset, | ||
+ | 1px 1px 1px rgba(255,255,255,0.3); | ||
+ | } | ||
+ | |||
+ | .jms-dots span.jms-dots-current:after{ | ||
+ | content: ''; | ||
+ | width: 8px; | ||
+ | height: 8px; | ||
+ | position: absolute; | ||
+ | top: 2px; | ||
+ | left: 2px; | ||
+ | border-radius: 50%; | ||
+ | background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); | ||
+ | } | ||
+ | |||
+ | .jms-arrows{ | ||
+ | user-select: none; | ||
+ | } | ||
+ | .jms-arrows span{ | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | margin-top: -40px; | ||
+ | height: 80px; | ||
+ | width: 30px; | ||
+ | cursor: pointer; | ||
+ | z-index: 2000; | ||
+ | box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | .jms-arrows span.jms-arrows-prev{ | ||
+ | background: #fff url(../images/arrow_left.png) no-repeat 50% 50%; | ||
+ | left: -10px; | ||
+ | } | ||
+ | .jms-arrows span.jms-arrows-next{ | ||
+ | background: #fff url(../images/arrow_right.png) no-repeat 50% 50%; | ||
+ | right: -10px; | ||
} | } |
Revision as of 16:22, 8 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; }
/*jmpress*/ .jms-slideshow {
position: relative; width: 80%; max-width: 1400px; min-width: 640px; margin: 20px auto; height: 460px;
}
.jms-wrapper {
width: auto; min-width: 600px; height: 440px; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; border: 10px solid #fff; border: 10px solid rgba(255, 255, 255, 0.9); outline: none; transition: background-color 1s linear;
}
.color-1 {
background-color: #E3D8FF; background-color: rgba(227, 216, 268, 1);
} .color-2 {
background-color: #EBBBBC; background-color: rgba(235, 187, 188, 1);
} .color-3 {
background-color: #EED9C0; background-color: rgba(238, 217, 192, 1);
} .color-4 {
background-color: #DFEBB1; background-color: rgba(223, 235, 177, 1);
} .color-5{
background-color: #C1E6E5; background-color: rgba(193, 230, 229, 1);
}
.step {
width: 900px; height: 420px; display: block; transition: opacity 1s;
} .step:not(.active) {
opacity: 0;
}
.jms-content{
margin: 0px 370px 0px 20px; position: relative; clear: both;
} .step h3{
color: #fff; font-size: 52px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); margin: 0; padding: 60px 0 10px 0;
} .step p {
color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); font-size: 34px; font-weight: normal; position: relative; margin: 0;
}
a.jms-link{
color: #fff; text-transform: uppercase; background: linear-gradient(top, #969696 0%,#727272 100%); padding: 8px 15px; display: inline-block; font-size: 16px; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border: 1px solid #444; border-radius: 4px; opacity: 1; margin-top: 40px; clear: both; transition: all 0.4s ease-in-out 1s;
} .step:not(.active) a.jms-link{
opacity: 0; margin-top: 80px;
}
.step img{
position: absolute; right: 0px; top: 30px;
}
.jms-dots{
width: 100%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; user-select: none;
}
.jms-dots span{
display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #777; margin: 3px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
content: ; width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}
.jms-arrows{
user-select: none;
} .jms-arrows span{
position: absolute; top: 50%; margin-top: -40px; height: 80px; width: 30px; cursor: pointer; z-index: 2000; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); border-radius: 3px;
} .jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%; left: -10px;
} .jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%; right: -10px;
}