Team:CityU HK/lablog/project1.css
From 2014.igem.org
(69 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | . | + | @import url('https://2014.igem.org/Team:CityU_HK/lablog/project1.css2'); |
- | + | ||
- | + | /* Toggle slide box Style */ | |
- | + | ||
+ | #title { | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | text-align: center; | ||
+ | font-size: 2em; | ||
+ | font-weight: 700; | ||
+ | text-shadow: 0px 3px 2px rgba(0,0,0,0.2); | ||
+ | color: #676767; | ||
+ | background-color: #fff; | ||
+ | margin: 0; | ||
+ | width:100%; | ||
+ | padding-top: 70px; | ||
+ | padding-bottom: 30px; | ||
} | } | ||
- | . | + | |
- | + | /* Flexible Slide-to-top Accordion Style*/ | |
- | + | .wrapper{ | |
+ | width:90%; | ||
+ | max-width:800px; | ||
+ | margin:30px auto; | ||
+ | margin-top:0px; | ||
+ | margin-bottom: 50px; | ||
+ | background-color:#F0EEEA; | ||
} | } | ||
- | . | + | .st-accordion{ |
- | + | width:100%; | |
- | + | min-width:270px; | |
- | + | margin: 0 auto; | |
+ | padding: 10px 0 10px 0; | ||
+ | border-radius: 2px; | ||
} | } | ||
- | . | + | .st-accordion ul li{ |
- | + | height: 100px; | |
+ | border-bottom: 1px solid #e3e3e3; | ||
+ | border-top:1px solid #fff; | ||
+ | overflow: hidden; | ||
+ | padding: 0 50px 0 50px; | ||
} | } | ||
- | + | .st-accordion ul li:first-child{ | |
- | . | + | border-top:none; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .st-accordion ul li > a{ | |
- | + | color: #555555; | |
- | + | font-family: 'Raleway',san-serif; | |
- | + | font-weight: 300; | |
- | + | font-size: 25px; | |
- | + | display: block; | |
- | + | position: relative; | |
- | + | line-height: 100px; | |
- | + | outline:none; | |
- | + | -webkit-transition: color 0.2s ease-in-out; | |
- | + | -moz-transition: color 0.2s ease-in-out; | |
- | + | -o-transition: color 0.2s ease-in-out; | |
- | + | -ms-transition: color 0.2s ease-in-out; | |
- | + | transition: color 0.2s ease-in-out; | |
- | + | } | |
- | + | .st-accordion ul li > a span{ | |
- | + | background: transparent url(https://static.igem.org/mediawiki/2014/e/e4/CityU_HK_lablog_down.png) no-repeat center center; | |
- | + | text-indent:-9000px; | |
- | + | width: 26px; | |
- | + | height: 14px; | |
- | + | position: absolute; | |
- | + | top: 50%; | |
- | + | right: -26px; | |
- | + | margin-top: -7px; | |
- | + | opacity:0; | |
- | + | -webkit-transition: all 0.2s ease-in-out; | |
- | + | -moz-transition: all 0.2s ease-in-out; | |
- | + | -o-transition: all 0.2s ease-in-out; | |
- | + | -ms-transition: all 0.2s ease-in-out; | |
- | + | transition: all 0.2s ease-in-out; | |
- | + | } | |
- | + | .st-accordion ul li > a:hover{ | |
- | + | color: #40e0d0; | |
- | + | } | |
- | - | + | .st-accordion ul li > a:hover span{ |
- | + | opacity:1; | |
- | + | right: 10px; | |
- | + | } | |
- | + | .st-accordion ul li.st-open > a{ | |
- | + | color: #40e0d0; | |
- | + | } | |
- | + | .st-accordion ul li.st-open > a span{ | |
- | + | -webkit-transform:rotate(180deg); | |
- | + | -moz-transform:rotate(180deg); | |
- | + | transform:rotate(180deg); | |
- | + | right:10px; | |
- | + | opacity:1; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .st-content{ | |
- | + | padding: 5px 0px 30px 0px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .st-content p{ | |
- | + | font-size: 16px; | |
- | + | font-family: Georgia, serif; | |
- | + | font-style: italic; | |
- | + | line-height: 28px; | |
- | + | padding: 0px 4px 15px 4px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .st-content img{ | |
- | + | width:125px; | |
- | + | border-right:1px solid #fff; | |
- | + | border-bottom:1px solid #fff; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | @media screen and (max-width: 320px){ | |
- | @ | + | .st-accordion ul li > a{ |
- | + | font-size:36px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } |
Latest revision as of 15:18, 25 September 2014
@import url('https://2014.igem.org/Team:CityU_HK/lablog/project1.css2');
/* Toggle slide box Style */
- title {
font-family: 'Raleway', sans-serif; text-align: center; font-size: 2em; font-weight: 700; text-shadow: 0px 3px 2px rgba(0,0,0,0.2); color: #676767; background-color: #fff; margin: 0; width:100%; padding-top: 70px; padding-bottom: 30px;
}
/* Flexible Slide-to-top Accordion Style*/ .wrapper{ width:90%; max-width:800px; margin:30px auto;
margin-top:0px; margin-bottom: 50px; background-color:#F0EEEA;
} .st-accordion{
width:100%; min-width:270px; margin: 0 auto; padding: 10px 0 10px 0; border-radius: 2px;
} .st-accordion ul li{
height: 100px; border-bottom: 1px solid #e3e3e3; border-top:1px solid #fff; overflow: hidden; padding: 0 50px 0 50px;
} .st-accordion ul li:first-child{
border-top:none;
} .st-accordion ul li > a{
color: #555555; font-family: 'Raleway',san-serif; font-weight: 300; font-size: 25px; display: block;
position: relative;
line-height: 100px;
outline:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .st-accordion ul li > a span{ background: transparent url() no-repeat center center; text-indent:-9000px; width: 26px; height: 14px; position: absolute; top: 50%; right: -26px; margin-top: -7px; opacity:0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .st-accordion ul li > a:hover{
color: #40e0d0;
} .st-accordion ul li > a:hover span{ opacity:1; right: 10px; } .st-accordion ul li.st-open > a{
color: #40e0d0;
} .st-accordion ul li.st-open > a span{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);
transform:rotate(180deg);
right:10px; opacity:1; } .st-content{
padding: 5px 0px 30px 0px;
} .st-content p{
font-size: 16px; font-family: Georgia, serif; font-style: italic; line-height: 28px; padding: 0px 4px 15px 4px;
} .st-content img{
width:125px; border-right:1px solid #fff; border-bottom:1px solid #fff;
} @media screen and (max-width: 320px){ .st-accordion ul li > a{ font-size:36px; } }