Team:CityU HK/lablog/project1.css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
.block {  
+
/* CSS reset */
-
width: 200px; color: #fff; margin: 35px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
+
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
-
position: relative;  
+
margin:0;
-
perspective: 350;
+
padding:0;
}
}
-
.block .normal {
+
html,body {
-
background: gray; padding: 15px; cursor: pointer;
+
margin:0;
-
position:relative; z-index:2;
+
padding:0;
}
}
-
.block .hover {
+
table {
-
background: #00aced; margin-top:-48px; padding: 15px; display: block; color:#fff ; text-decoration: none;
+
border-collapse:collapse;
-
position: relative; z-index:1;
+
border-spacing:0;
-
transition: all 110ms ease;
+
}
}
-
.block:hover .normal {
+
fieldset,img {
-
background: #0084b4;
+
border:0;
 +
}
 +
input{
 +
border:1px solid #b0b0b0;
 +
padding:3px 5px 4px;
 +
color:#979797;
 +
width:190px;
 +
}
 +
address,caption,cite,code,dfn,th,var {
 +
font-style:normal;
 +
font-weight:normal;
 +
}
 +
ol,ul {
 +
list-style:none;
 +
}
 +
caption,th {
 +
text-align:left;
 +
}
 +
h1,h2,h3,h4,h5,h6 {
 +
font-size:100%;
 +
font-weight:normal;
 +
}
 +
q:before,q:after {
 +
content:'';
 +
}
 +
abbr,acronym { border:0;
}
}
-
.block:hover .hover {
+
/* General Demo Style */
-
margin-top: 0;  
+
body{
-
-webkit-transform-origin: top;
+
background:#f7f7f7 url(../images/pattern.png) repeat top left;
-
-moz-transform-origin: top;
+
color:#000;
-
-o-transform-origin: top;
+
font-family: 'Arial Narrow', Arial, sans-serif;
-
-ms-transform-origin: top;
+
font-size:13px;
-
transform-origin: top;
+
min-height:2000px;
-
+
}
-
-webkit-animation: balance 1.3s ease-in-out 110ms 1 alternate;
+
a{
-
-moz-animation: balance 1.3s ease-in-out 110ms 1 alternate;
+
color:#000;
-
-ms-animation: balance 1.3s ease-in-out 110ms 1 alternate;
+
text-decoration:none;
-
-o-animation: balance 1.3s ease-in-out 110ms 1 alternate;
+
}
-
animation: balance 1.3s ease-in-out 110ms 1 alternate;
+
.clr{
 +
clear:both;
 +
}
 +
h1{
 +
padding:20px;
 +
font-size:28px;
 +
color:#333;
 +
font-family: 'Josefin Slab',Georgia, serif;
 +
font-weight:400;
 +
    text-align:center;
 +
    text-shadow:1px 1px 1px #fff;
 +
}
 +
h1 span{
 +
font-size:18px;
 +
color:#1693eb;
 +
}
 +
.more{
 +
font-family: 'Josefin Slab',Georgia, serif;
 +
margin:0 auto;
 +
text-align:center;
 +
color:#ddd;
 +
font-size:15px;
 +
color:#444;
 +
}
 +
.more p{
 +
display:block;
 +
margin:10px;
 +
}
 +
.more a{
 +
color:#666;
 +
white-space: nowrap;
 +
font-weight:bold;
 +
background:#fff;
 +
padding:1px 6px;
 +
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 +
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 +
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 +
}
 +
.more a.current,
 +
.more a.current:hover{
 +
color:#fff;
 +
background:#000;
 +
}
 +
.more a:hover{
 +
background-color:#1693eb;
 +
color:#fff;
 +
}
 +
/* Header Style */
 +
.header{
 +
line-height:24px;
 +
font-size:11px;
 +
background:#000;
 +
opacity:0.9;
 +
text-transform:uppercase;
 +
z-index:4;
 +
-moz-box-shadow:1px 0px 2px #000;
 +
-webkit-box-shadow:1px 0px 2px #000;
 +
box-shadow:1px 0px 2px #000;
 +
}
 +
.header a{
 +
padding:0px 10px;
 +
letter-spacing:1px;
 +
color:#ddd;
 +
display:block;
 +
float:left;
 +
}
 +
.header a:hover{
 +
color:#fff;
 +
}
 +
.header span.right{
 +
float:right;
 +
}
 +
.header span.right a{
 +
float:none;
 +
display:inline;
}
}
-
 
+
/* Flexible Slide-to-top Accordion Style*/
-
@keyframes "balance" {
+
.wrapper{
-
0% {
+
width:90%;
-
margin-top: 0;
+
max-width:800px;
-
}
+
margin:30px auto;
-
15% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(-50deg);
+
-
-moz-transform: rotateX(-50deg);
+
-
-o-transform: rotateX(-50deg);
+
-
-ms-transform: rotateX(-50deg);
+
-
transform: rotateX(-50deg);
+
-
}
+
-
30% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(50deg);
+
-
-moz-transform: rotateX(50deg);
+
-
-o-transform: rotateX(50deg);
+
-
-ms-transform: rotateX(50deg);
+
-
transform: rotateX(50deg);
+
-
}
+
-
45% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(-30deg);
+
-
-moz-transform: rotateX(-30deg);
+
-
-o-transform: rotateX(-30deg);
+
-
-ms-transform: rotateX(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
60% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(30deg);
+
-
-moz-transform: rotateX(30deg);
+
-
-o-transform: rotateX(30deg);
+
-
-ms-transform: rotateX(30deg);
+
-
transform: rotateX(30deg);
+
-
}
+
-
75% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(-30deg);
+
-
-moz-transform: rotateX(-30deg);
+
-
-o-transform: rotateX(-30deg);
+
-
-ms-transform: rotateX(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(0deg);
+
-
-moz-transform: rotateX(0deg);
+
-
-o-transform: rotateX(0deg);
+
-
-ms-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-accordion{
-
@-moz-keyframes balance {
+
    width:100%;
-
0% {
+
    min-width:270px;
-
margin-top: 0;
+
    margin: 0 auto;
-
}
+
-
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(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-moz-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-accordion ul li{
-
@-webkit-keyframes "balance" {
+
    height: 100px;
-
0% {
+
    border-bottom: 1px solid #c7deef;
-
margin-top: 0;
+
    border-top:1px solid #fff;
-
}
+
    overflow: hidden;
-
15% {
+
-
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(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-webkit-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-accordion ul li:first-child{
-
@-ms-keyframes "balance" {
+
    border-top:none;
-
0% {
+
-
margin-top: 0;
+
-
}
+
-
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(-30deg);
+
-
transform: rotateX(-30deg);
+
-
}
+
-
100% {
+
-
margin-top: 0;
+
-
-ms-transform: rotateX(0deg);
+
-
transform: rotateX(0deg);
+
-
}
+
-
+
}
}
-
+
.st-accordion ul li > a{
-
@-o-keyframes "balance" {
+
    font-family: 'Josefin Slab',Georgia, serif;
-
0% {
+
    text-shadow: 1px 1px 1px #fff;
-
margin-top: 0;
+
    font-size: 46px;
-
}
+
    display: block;
-
  15% {
+
position: relative;
-
margin-top: 0;
+
    line-height: 100px;
-
-o-transform: rotateX(-50deg);
+
outline:none;
-
transform: rotateX(-50deg);
+
    -webkit-transition: color 0.2s ease-in-out;
-
  }
+
-moz-transition: color 0.2s ease-in-out;
-
30% {
+
-o-transition: color 0.2s ease-in-out;
-
margin-top: 0;
+
-ms-transition: color 0.2s ease-in-out;
-
-o-transform: rotateX(50deg);
+
transition: color 0.2s ease-in-out;
-
transform: rotateX(50deg);
+
}
-
}
+
.st-accordion ul li > a span{
-
45% {
+
background: transparent url(../images/down.png) no-repeat center center;
-
margin-top: 0;
+
text-indent:-9000px;
-
  -o-transform: rotateX(-35deg);
+
width: 26px;
-
  transform: rotateX(-30deg);
+
height: 14px;
-
  }
+
position: absolute;
-
60% {
+
top: 50%;
-
margin-top: 0;
+
right: -26px;
-
-o-transform: rotateX(30deg);
+
margin-top: -7px;
-
transform: rotateX(30deg);
+
opacity:0;
-
}
+
-webkit-transition: all 0.2s ease-in-out;
-
75% {
+
-moz-transition: all 0.2s ease-in-out;
-
margin-top: 0;
+
-o-transition: all 0.2s ease-in-out;
-
-o-transform: rotateX(-30deg);
+
-ms-transition: all 0.2s ease-in-out;
-
transform: rotateX(-30deg);
+
transition: all 0.2s ease-in-out;
-
}
+
}
-
100% {
+
.st-accordion ul li > a:hover{
-
  margin-top: 0;
+
    color: #1693eb;
-
  -o-transform: rotateX(0deg);
+
}
-
transform: rotateX(0deg);
+
.st-accordion ul li > a:hover span{
-
}
+
opacity:1;
-
+
right: 10px;
 +
}
 +
.st-accordion ul li.st-open > a{
 +
    color: #1693eb;
 +
}
 +
.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;
 +
}
}
}

Revision as of 14:56, 5 September 2014

/* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:; } abbr,acronym { border:0; }

/* General Demo Style */ body{ background:#f7f7f7 url(../images/pattern.png) repeat top left; color:#000; font-family: 'Arial Narrow', Arial, sans-serif; font-size:13px; min-height:2000px; } a{ color:#000; text-decoration:none; } .clr{ clear:both; } h1{ padding:20px; font-size:28px; color:#333; font-family: 'Josefin Slab',Georgia, serif; font-weight:400; 

   text-align:center;
   text-shadow:1px 1px 1px #fff;

} h1 span{ font-size:18px; color:#1693eb; } .more{ font-family: 'Josefin Slab',Georgia, serif; margin:0 auto; text-align:center; color:#ddd; font-size:15px; color:#444; } .more p{ display:block; margin:10px; } .more a{ color:#666; white-space: nowrap; font-weight:bold; background:#fff; padding:1px 6px; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); box-shadow:1px 1px 2px rgba(0,0,0,0.2); } .more a.current, .more a.current:hover{ color:#fff; background:#000; } .more a:hover{ background-color:#1693eb; color:#fff; } /* Header Style */ .header{ line-height:24px; font-size:11px; background:#000; opacity:0.9; text-transform:uppercase; z-index:4; -moz-box-shadow:1px 0px 2px #000; -webkit-box-shadow:1px 0px 2px #000; box-shadow:1px 0px 2px #000; } .header a{ padding:0px 10px; letter-spacing:1px; color:#ddd; display:block; float:left; } .header a:hover{ color:#fff; } .header span.right{ float:right; } .header span.right a{ float:none; display:inline; }

/* Flexible Slide-to-top Accordion Style*/ .wrapper{ width:90%; max-width:800px; margin:30px auto; } .st-accordion{ 

   width:100%;
   min-width:270px;
   margin: 0 auto;

} .st-accordion ul li{ 

   height: 100px;
   border-bottom: 1px solid #c7deef;
   border-top:1px solid #fff;
   overflow: hidden;

} .st-accordion ul li:first-child{ 

   border-top:none;

} .st-accordion ul li > a{ 

   font-family: 'Josefin Slab',Georgia, serif;
   text-shadow: 1px 1px 1px #fff;
   font-size: 46px;
   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(../images/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: #1693eb;

} .st-accordion ul li > a:hover span{ opacity:1; right: 10px; } .st-accordion ul li.st-open > a{ 

   color: #1693eb;

} .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"