Team:UNITN-Trento/CSS/Main
From 2013.igem.org
m |
|||
(29 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | @import url(http://fonts.googleapis.com/css?family=Boogaloo); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Cabin); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Kameron); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Marck+Script); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300italic); | ||
+ | @import url(http://fonts.googleapis.com/css?family=PT+Sans); | ||
+ | |||
/*Hides WIKI default template*/ | /*Hides WIKI default template*/ | ||
html,body { | html,body { | ||
- | + | padding: 0; | |
- | + | margin: 0; | |
- | + | overflow: auto; | |
- | + | background: none; | |
} | } | ||
#contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#mw-panel,#mw-head,#footer,#mw-page-base,#mw-head-base { | #contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#mw-panel,#mw-head,#footer,#mw-page-base,#mw-head-base { | ||
- | + | display: none; | |
} | } | ||
#content { | #content { | ||
- | + | display: none; | |
} | } | ||
#tn-main-wrap-wrap { | #tn-main-wrap-wrap { | ||
- | + | position: fixed; | |
- | + | top: 0; | |
- | + | left: 0; | |
- | + | right: 0; | |
- | + | bottom: 0; | |
- | + | padding: 0; | |
- | + | margin: 0; | |
- | + | z-index: 2; | |
+ | |||
+ | overflow: auto; | ||
+ | -webkit-overflow-scrolling: touch; | ||
} | } | ||
#tn-main-wrap { | #tn-main-wrap { | ||
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | width: 100%; | |
- | + | /*min-width: 1280px;*/ | |
- | + | font-size: 16px; | |
- | + | background-color: rgba(31, 68, 87, 0.9); | |
- | + | ||
} | } | ||
#top-section { | #top-section { | ||
- | + | position: fixed; | |
- | + | top: 0px; | |
- | + | left: 0px; | |
- | + | right: 0px; | |
- | + | bottom: 0px; | |
- | + | height: 100%; | |
- | + | width: 100%; | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | border: none; | |
- | + | background: white; | |
- | + | z-index: 1; | |
- | + | display: none; | |
} | } | ||
/*To hide button for debug mode*/ | /*To hide button for debug mode*/ | ||
.tn-hidden { | .tn-hidden { | ||
- | + | display: none; | |
} | } | ||
/*Top menus (left/right)*/ | /*Top menus (left/right)*/ | ||
#menubar { | #menubar { | ||
- | + | background: none !important; | |
} | } | ||
#menubar ul li { | #menubar ul li { | ||
- | + | color: white !important; | |
} | } | ||
#menubar:hover { | #menubar:hover { | ||
- | + | display: block; | |
- | + | position: absolute; | |
- | + | color: white; | |
} | } | ||
#menubar:hover ul li { | #menubar:hover ul li { | ||
- | + | color: white; | |
} | } | ||
- | .right-menu li a, .left-menu li a { | + | .right-menu li a, |
- | + | .left-menu li a { | |
- | + | display: inline-block; | |
- | + | padding: 2px 5px; | |
+ | background: none; | ||
+ | color: white !important; | ||
+ | text-decoration: none; | ||
+ | font-variant: small-caps; | ||
+ | text-align: center; | ||
} | } | ||
- | .right-menu:hover li a { | + | .right-menu li a:hover, |
- | + | .left-menu li a:hover { | |
+ | background-color: white; | ||
+ | border-radius: 5px; | ||
+ | color: black !important; | ||
+ | text-decoration: underline; | ||
} | } | ||
- | . | + | .left-menu > ul > li[style='color:white;cursor:default'] { |
- | + | display: none !important; | |
} | } | ||
- | /* | + | /*************/ |
- | + | /*JMSLIDESHOW*/ | |
- | + | /*************/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | . | + | .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; | ||
} | } | ||
- | . | + | /*steps*/ |
- | + | ||
+ | .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; | ||
} | } | ||
- | . | + | /*links*/ |
- | + | ||
+ | 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; | ||
} | } | ||
- | . | + | /*dots*/ |
- | + | ||
+ | .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 span { |
- | + | width: 8px; | |
+ | height: 8px; | ||
+ | position: absolute; | ||
+ | top: 2px; | ||
+ | left: 2px; | ||
+ | border-radius: 50%; | ||
+ | background: transparent; | ||
} | } | ||
- | . | + | .jms-dots span.jms-dots-current span { |
- | + | width: 8px; | |
+ | height: 8px; | ||
+ | position: absolute; | ||
+ | top: 2px; | ||
+ | left: 2px; | ||
+ | border-radius: 50%; | ||
+ | background: #ffffff; | ||
} | } | ||
- | . | + | /*arrows*/ |
- | + | ||
+ | .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(https://static.igem.org/mediawiki/2013/e/eb/Tn-2013-jmslideshow-Arrow_left.png) no-repeat 50% 50%; | ||
+ | left: -10px; | ||
+ | } | ||
+ | .jms-arrows span.jms-arrows-next{ | ||
+ | background: #fff url(https://static.igem.org/mediawiki/2013/3/33/Tn-2013-jmslideshow-Arrow_right.png) no-repeat 50% 50%; | ||
+ | right: -10px; | ||
} | } |
Latest revision as of 12:38, 28 September 2013
@import url(http://fonts.googleapis.com/css?family=Boogaloo); @import url(http://fonts.googleapis.com/css?family=Cabin); @import url(http://fonts.googleapis.com/css?family=Kameron); @import url(http://fonts.googleapis.com/css?family=Marck+Script); @import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300italic); @import url(http://fonts.googleapis.com/css?family=PT+Sans);
/*Hides WIKI default template*/ html,body {
padding: 0; margin: 0; overflow: auto; background: none;
}
- contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#mw-panel,#mw-head,#footer,#mw-page-base,#mw-head-base {
display: none;
}
- content {
display: none;
}
- tn-main-wrap-wrap {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; z-index: 2; overflow: auto; -webkit-overflow-scrolling: touch;
}
- tn-main-wrap {
margin: 0; padding: 0; width: 100%; /*min-width: 1280px;*/ font-size: 16px; background-color: rgba(31, 68, 87, 0.9);
}
- top-section {
position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; width: 100%; margin: 0; padding: 0; border: none; background: white; z-index: 1; display: none;
}
/*To hide button for debug mode*/ .tn-hidden {
display: none;
}
/*Top menus (left/right)*/
- menubar {
background: none !important;
}
- menubar ul li {
color: white !important;
}
- menubar:hover {
display: block; position: absolute; color: white;
}
- menubar:hover ul li {
color: white;
}
.right-menu li a, .left-menu li a {
display: inline-block; padding: 2px 5px; background: none; color: white !important; text-decoration: none; font-variant: small-caps; text-align: center;
}
.right-menu li a:hover, .left-menu li a:hover {
background-color: white; border-radius: 5px; color: black !important; text-decoration: underline;
}
.left-menu > ul > li[style='color:white;cursor:default'] {
display: none !important;
}
/*************/ /*JMSLIDESHOW*/ /*************/
.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;
}
/*steps*/
.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;
}
/*links*/
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;
}
/*dots*/
.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 span {
width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: transparent;
}
.jms-dots span.jms-dots-current span {
width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #ffffff;
}
/*arrows*/
.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() no-repeat 50% 50%; left: -10px;
} .jms-arrows span.jms-arrows-next{
background: #fff url() no-repeat 50% 50%; right: -10px;
}