Team:SJTU-Software2/test
From 2014.igem.org
(Difference between revisions)
(146 intermediate revisions not shown) | |||
Line 7: | Line 7: | ||
<p> | <p> | ||
+ | <style type="text/css"> body {background-image:url(https://static.igem.org/mediawiki/2014/5/57/Sjtu_software_background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style> | ||
+ | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script> | ||
+ | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script> | ||
+ | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | . | + | .slider |
- | + | { | |
- | + | background: #d5d5d5; | |
- | + | height: 7px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | height: | + | |
- | + | ||
position: relative; | position: relative; | ||
- | width: | + | cursor: pointer; |
+ | width: 100%; | ||
+ | clear: right; | ||
+ | top: 0px; | ||
+ | -moz-border-radius: 5px; | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-box-shadow: inset 0 0 8px #000; | ||
+ | margin: 10px 0 10px 0; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /* progress bar (enabled with progress: true) */ | |
- | + | .progress | |
- | - | + | { |
- | + | height: 7px; | |
- | + | position: relative; | |
- | + | background: #5389c5; /* Old browsers */ | |
- | + | background: -moz-linear-gradient(top, #5389c5 0%, #4775a9 100%); /* FF3.6+ */ | |
- | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5389c5), color-stop(100%,#4775a9)); /* Chrome,Safari4+ */ | |
- | - | + | background: -webkit-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* Chrome10+,Safari5.1+ */ |
- | -webkit- | + | background: -o-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* Opera 11.10+ */ |
- | + | background: -ms-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* IE10+ */ | |
+ | background: linear-gradient(to bottom, #5389c5 0%,#4775a9 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5389c5', endColorstr='#4775a9',GradientType=0 ); /* IE6-9 */ | ||
+ | -moz-border-radius: 5px; | ||
+ | -webkit-border-radius: 5px; | ||
+ | top: 0px; | ||
+ | border: 1px solid #4b7bb1; | ||
- | -moz- | + | -moz-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3); |
- | + | -webkit-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3); | |
- | + | box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3); | |
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /* drag handle */ | |
- | + | .handle | |
- | + | { | |
- | + | background: url(../images/handle.png) repeat-x center; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | background: url( | + | |
height: 16px; | height: 16px; | ||
- | + | width: 16px; | |
+ | top: -5px; | ||
position: absolute; | position: absolute; | ||
- | top: | + | display: block; |
- | + | margin-top: 1px; | |
+ | cursor: pointer; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | /* the input field */ | |
- | + | .range | |
+ | { | ||
+ | display: none; | ||
} | } | ||
- | + | /* | |
- | + | * CSS Expandable Menu | |
- | + | * @author: Francisco Neves | |
- | + | */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /** Reset */ | |
- | + | * { font-family: "museo500", "Arial"; font-size: 12px; list-style: none; margin: 0; padding: 0; outline: 0; text-decoration: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | /* | + | /** |
- | + | * START FREEBIE STYLES | |
- | + | */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | /*! Font Faces */ | ||
+ | @font-face{ | ||
+ | font-family: 'museo500'; | ||
+ | src: url('../fonts/MuseoSans_500-webfont.eot'); | ||
+ | src: url('../fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'), | ||
+ | url('../fonts/MuseoSans_500-webfont.woff') format('woff'), | ||
+ | url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'), | ||
+ | url('../fonts/MuseoSans_500-webfont.svg#museo_sans_500regular') format('svg'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
- | + | /*! Freebie Skelet */ | |
+ | ul.expmenu { width: 200px; } | ||
+ | ul.expmenu * { list-style: none; } | ||
+ | ul.expmenu > li > div.header { padding: 12px; border-bottom: 1px #396e9f solid; } | ||
+ | ul.expmenu > li:last-child > div.header { border-bottom: none; } | ||
+ | ul.expmenu > li ul li { background-color: #ececec; padding: 12px; border-bottom: 1px solid #dcdcdc; border-top: 1px solid #fff; color: #727272; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); } | ||
+ | ul.expmenu > li ul li:last-child { border-bottom: none; } | ||
+ | ul.expmenu > li ul li.selected { background-color: #f4f4f4; } | ||
+ | ul.expmenu div.header | ||
+ | { | ||
+ | color: #203f61; | ||
+ | text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2); | ||
- | + | background: #4d7fb8; /* Old browsers */ | |
+ | background: -moz-linear-gradient(top, #4d7fb8 0%, #4572a5 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4572a5)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #4d7fb8 0%,#4572a5 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4572a5',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | ul.expmenu > li > div.header > .label { padding-left: 24px; background: no-repeat; } | ||
+ | ul.expmenu > li > div.header > .arrow { display: block; width: 16px; height: 16px; background: no-repeat center; float: right; } | ||
+ | ul.expmenu > li > div.header > .arrow.up { background-image: url(../images/arrow_u.png); } | ||
+ | ul.expmenu > li > div.header > .arrow.down { background-image: url(../images/arrow_d.png); } | ||
+ | /* Mouse Events */ | ||
+ | ul.expmenu div.header:hover | ||
+ | { | ||
+ | background: #4571a0; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, #4d7fb8 0%, #4571a0 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4571a0)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #4d7fb8 0%,#4571a0 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4571a0',GradientType=0 ); /* IE6-9 */ | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | ul.expmenu > li ul li:not(.selected):hover | ||
+ | { | ||
+ | background: #e7e7e7; /* Old browsers */ | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | ul.expmenu > li ul li:not(.selected):active | ||
+ | { | ||
+ | background: #f1f1f1; /* Old browsers */ | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | /** | ||
+ | * END FREEBIE STYLES | ||
+ | */ | ||
+ | |||
- | + | /** | |
- | + | * Not important styles | |
- | + | */ | |
- | + | body | |
- | + | { | |
- | + | color: #b1b1b1; | |
- | + | background: #e1e1e1; /* Old browsers */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | font-family: "museo500"; | |
- | + | } | |
- | + | ul#pagination-freebie { display: table; padding-right: 20px; margin: 20px auto; list-style: none; } | |
- | + | ul#pagination-freebie:last-child { padding-right: 0; } | |
- | + | ul#pagination-freebie li { float: left; margin-bottom: 20px } | |
- | + | ul#pagination-freebie li:last-child { margin-right: 0; } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | div#text { text-align: center; font-size: 48px; width: 610px; margin: 0 auto; margin-top: 50px; margin-top: 80px; } | |
- | + | div#smalltext { text-align: center; font-size: 15px; width: 600px; margin: 0 auto; } | |
- | + | div#content { display: table; margin: 0 auto; padding: 30px; } | |
- | + | </style> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | + | <div align="center"> | |
- | + | <div class="container2" style="height:700px;width:71%;background-color:#FFFFFF;"> | |
- | + | <div align=left> | |
- | + | <div class="container2" style="height:700px;width:30%;background-color:#00FF00;float:left; display:inline" > | |
- | + | <div id="content"> | |
- | + | <ul id="expmenu-freebie"> | |
- | </ | + | <li> |
+ | <!-- Start Freebie --> | ||
+ | <ul class="expmenu"> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label" style="background-image: url(images/messages.png);">Messages</span> | ||
+ | <span class="arrow up"></span> | ||
+ | </div> | ||
+ | <ul class="menu"> | ||
+ | <li>Notification Settings</li> | ||
+ | <li class="selected">Email Alerts</li> | ||
+ | <li>Privacy Settings</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label" style="background-image: url(images/user.png);">User Controls</span> | ||
+ | <span class="arrow up"></span> | ||
+ | </div> | ||
+ | <ul class="menu"> | ||
+ | <li><input type="range" name="range" min="0" max="100" value="35" style="width: 100%;" /></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label" style="background-image: url(images/pc.png);">Screen Settings</span> | ||
+ | <span class="arrow down"></span> | ||
+ | </div> | ||
+ | <ul class="menu" style="display:none"> | ||
+ | <li>Your settings</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label" style="background-image: url(images/search.png);">Search</span> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <!-- End Freebie --> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="container2" style="height:700px;width:70%;background-color:#FFFF00;float:left; display:inline" > | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
Latest revision as of 08:01, 12 October 2014