Team:CityU HK/lablog/project1.css

From 2014.igem.org

(Difference between revisions)
 
(84 intermediate revisions not shown)
Line 1: Line 1:
-
.block {  
+
@import url('https://2014.igem.org/Team:CityU_HK/lablog/project1.css2');
-
width: 200px; color: #fff; margin: 35px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;  
+
 
-
position: relative;  
+
/* Toggle slide box Style */
-
perspective: 350;
+
 
 +
#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;
}
}
-
.block .normal {
+
 
-
background: gray; padding: 15px; cursor: pointer;
+
/* Flexible Slide-to-top Accordion Style*/
-
position:relative; z-index:2;
+
.wrapper{
 +
width:90%;
 +
max-width:800px;
 +
margin:30px auto;
 +
        margin-top:0px;
 +
        margin-bottom: 50px;
 +
        background-color:#F0EEEA;
}
}
-
.block .hover {
+
.st-accordion{
-
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
+
    width:100%;
-
position: relative; z-index:1;
+
    min-width:270px;
-
transition: all 250ms ease;
+
    margin: 0 auto;
 +
    padding: 10px 0 10px 0;
 +
    border-radius: 2px;
}
}
-
.block:hover .normal {
+
.st-accordion ul li{
-
background: #0084b4;
+
    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{
-
.block:hover .hover {
+
    border-top:none;
-
margin-top: 0;
+
-
-webkit-transform-origin: top;
+
-
-moz-transform-origin: top;
+
-
-o-transform-origin: top;
+
-
-ms-transform-origin: top;
+
-
transform-origin: top;
+
-
+
-
-webkit-animation: balance 3s ease-in-out 150ms 1 alternate;
+
-
-moz-animation: balance 1.5s ease-in-out 150ms 1 alternate;
+
-
-ms-animation: balance 1.5s ease-in-out 150ms 1 alternate;
+
-
-o-animation: balance 1.5s ease-in-out 150ms 1 alternate;
+
-
animation: balance 1.5s ease-in-out 150ms 1 alternate;
+
}
}
-
 
+
.st-accordion ul li > a{
-
 
+
    color: #555555;
-
@keyframes "balance" {
+
    font-family: 'Raleway',san-serif;
-
0% {
+
    font-weight: 300;
-
margin-top: 0;
+
    font-size: 25px;
-
}
+
    display: block;
-
15% {
+
position: relative;
-
margin-top: 0;
+
    line-height: 100px;
-
-webkit-transform: rotateX(-50deg);
+
outline:none;
-
-moz-transform: rotateX(-50deg);
+
    -webkit-transition: color 0.2s ease-in-out;
-
-o-transform: rotateX(-50deg);
+
-moz-transition: color 0.2s ease-in-out;
-
-ms-transform: rotateX(-50deg);
+
-o-transition: color 0.2s ease-in-out;
-
  transform: rotateX(-50deg);
+
-ms-transition: color 0.2s ease-in-out;
-
}
+
transition: color 0.2s ease-in-out;
-
30% {
+
}
-
margin-top: 0;
+
.st-accordion ul li > a span{
-
-webkit-transform: rotateX(50deg);
+
background: transparent url(https://static.igem.org/mediawiki/2014/e/e4/CityU_HK_lablog_down.png) no-repeat center center;
-
-moz-transform: rotateX(50deg);
+
text-indent:-9000px;
-
-o-transform: rotateX(50deg);
+
width: 26px;
-
-ms-transform: rotateX(50deg);
+
height: 14px;
-
transform: rotateX(50deg);
+
position: absolute;
-
}
+
top: 50%;
-
45% {
+
right: -26px;
-
margin-top: 0;
+
margin-top: -7px;
-
-webkit-transform: rotateX(-30deg);
+
opacity:0;
-
-moz-transform: rotateX(-30deg);
+
-webkit-transition: all 0.2s ease-in-out;
-
-o-transform: rotateX(-30deg);
+
-moz-transition: all 0.2s ease-in-out;
-
-ms-transform: rotateX(-30deg);
+
-o-transition: all 0.2s ease-in-out;
-
  transform: rotateX(-30deg);
+
-ms-transition:  all 0.2s ease-in-out;
-
}
+
transition:  all 0.2s ease-in-out;
-
60% {
+
}
-
margin-top: 0;
+
.st-accordion ul li > a:hover{
-
-webkit-transform: rotateX(30deg);
+
    color: #40e0d0;
-
-moz-transform: rotateX(30deg);
+
}
-
  -o-transform: rotateX(30deg);
+
.st-accordion ul li > a:hover span{
-
-ms-transform: rotateX(30deg);
+
opacity:1;
-
transform: rotateX(30deg);
+
right: 10px;
-
}
+
}
-
75% {
+
.st-accordion ul li.st-open > a{
-
margin-top: 0;
+
    color: #40e0d0;
-
-webkit-transform: rotateX(-15deg);
+
}
-
-moz-transform: rotateX(-15deg);
+
.st-accordion ul li.st-open > a span{
-
-o-transform: rotateX(-15deg);
+
-webkit-transform:rotate(180deg);
-
-ms-transform: rotateX(-15deg);
+
-moz-transform:rotate(180deg);
-
transform: rotateX(-15deg);
+
    transform:rotate(180deg);
-
}
+
right:10px;
-
100% {
+
opacity:1;
-
margin-top: 0;
+
-
-webkit-transform: rotateX(0deg);
+
-
-moz-transform: rotateX(0deg);
+
-
-o-transform: rotateX(0deg);
+
-
-ms-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-content{
-
@-moz-keyframes balance {
+
    padding: 5px 0px 30px 0px;
-
0% {
+
-
margin-top: 0;
+
-
}
+
-
15% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(-50deg);
+
-
transform: rotateX(-50deg);
+
-
}
+
-
30% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(50deg);
+
-
transform: rotateX(50deg);
+
-
}
+
-
45% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
60% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(30deg);
+
-
transform: rotateX(30deg);
+
-
}
+
-
75% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(-15deg);
+
-
transform: rotateX(-15deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-content p{
-
@-webkit-keyframes "balance" {
+
    font-size:  16px;
-
0% {
+
    font-family:  Georgia, serif;
-
margin-top: 0;
+
    font-style: italic;
-
  }
+
    line-height:  28px;
-
15% {
+
    padding: 0px 4px 15px 4px;  
-
margin-top: 0;
+
-
-webkit-transform: rotateX(-50deg);
+
-
  transform: rotateX(-50deg);
+
-
}
+
-
30% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(50deg);
+
-
  transform: rotateX(50deg);
+
-
}
+
-
45% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
60% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(30deg);
+
-
transform: rotateX(30deg);
+
-
}
+
-
75% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(-15deg);
+
-
transform: rotateX(-15deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-content img{
-
@-ms-keyframes "balance" {
+
    width:125px;
-
0% {
+
    border-right:1px solid #fff;
-
margin-top: 0;
+
    border-bottom:1px solid #fff;
-
}
+
-
15% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(-50deg);
+
-
transform: rotateX(-50deg);
+
-
}
+
-
30% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(50deg);
+
-
transform: rotateX(50deg);
+
-
}
+
-
45% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
60% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(30deg);
+
-
transform: rotateX(30deg);
+
-
}
+
-
75% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(-15deg);
+
-
transform: rotateX(-15deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
@media screen and (max-width: 320px){
-
@-o-keyframes "balance" {
+
.st-accordion ul li > a{
-
0% {
+
font-size:36px;
-
margin-top: 0;
+
}
-
}
+
-
15% {
+
-
margin-top: 0;
+
-
-o-transform: rotateX(-50deg);
+
-
transform: rotateX(-50deg);
+
-
}
+
-
30% {
+
-
margin-top: 0;
+
-
-o-transform: rotateX(50deg);
+
-
transform: rotateX(50deg);
+
-
}
+
-
45% {
+
-
margin-top: 0;
+
-
-o-transform: rotateX(-35deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
60% {
+
-
margin-top: 0;
+
-
-o-transform: rotateX(30deg);
+
-
transform: rotateX(30deg);
+
-
}
+
-
75% {
+
-
margin-top: 0;
+
-
-o-transform: rotateX(-15deg);
+
-
transform: rotateX(-15deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-o-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}

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 */

  1. 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(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; } }

Retrieved from "http://2014.igem.org/Team:CityU_HK/lablog/project1.css"