You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.2 KiB
CSS
135 lines
2.2 KiB
CSS
@font-face{
|
|
font-family: 'FuturaHandwritten';
|
|
font-style: normal;
|
|
src: url('FuturaHandwritten.ttf') format('truetype');
|
|
}
|
|
|
|
body{
|
|
margin:0;
|
|
overflow: hidden;
|
|
|
|
background: #fff; /*url('paper@2x.png');
|
|
background-size: 100px 100px;*/
|
|
}
|
|
#main{
|
|
width: 100%;
|
|
height: calc(100% - 60px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#footer{
|
|
width: 100%;
|
|
height: 60px;
|
|
background: #222;
|
|
}
|
|
|
|
/*************************/
|
|
/******* SLIDESHOW *******/
|
|
/*************************/
|
|
|
|
#slideshow{
|
|
|
|
/*background: #bada55;*/
|
|
/*border: 1px solid rgba(0,0,0,0.2);*/
|
|
width:960px;
|
|
height:540px;
|
|
|
|
/* Center this thing */
|
|
position: absolute;
|
|
margin: auto;
|
|
top:0; left:0; right:0; bottom:0;
|
|
|
|
}
|
|
#slideshow .object{
|
|
position: absolute;
|
|
}
|
|
|
|
/********* Fader *********/
|
|
|
|
.fader{
|
|
-webkit-transition: opacity 0.3s ease-in-out;
|
|
-mos-transition: opacity 0.3s ease-in-out;
|
|
-ms-transition: opacity 0.3s ease-in-out;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
/******** Text Box ********/
|
|
|
|
.textbox{
|
|
font-family: 'FuturaHandwritten';
|
|
color: #333;
|
|
font-size: 20px;
|
|
}
|
|
.textbox > div{
|
|
position: absolute;
|
|
}
|
|
|
|
/********* Button ********/
|
|
|
|
.button{
|
|
z-index: 0;
|
|
}
|
|
.button #background{
|
|
position: absolute;
|
|
background: url(../assets/button.png);
|
|
width:250px; height:125px;
|
|
background-size: 100%;
|
|
top:-35px; left:-30px;
|
|
pointer-events:none;
|
|
}
|
|
.button #text{
|
|
|
|
font-family: 'FuturaHandwritten';
|
|
color: #000;
|
|
font-size: 17px;
|
|
|
|
width: 180px;
|
|
height: 30px;
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
top:18px; left:5px;
|
|
|
|
}
|
|
.button #hitbox{
|
|
position: absolute;
|
|
width:195px; height:55px;
|
|
cursor: pointer;
|
|
}
|
|
.button[hover=yes]{
|
|
z-index: 100;
|
|
}
|
|
.button[hover=yes] #background{
|
|
background-position: 0px -125px;
|
|
}
|
|
.button[deactivated=yes] #background{
|
|
background-position: 0px -250px;
|
|
}
|
|
.button[deactivated=yes] #text{
|
|
color: #CCCCCC;
|
|
}
|
|
.button[deactivated=yes] #hitbox{
|
|
display: none;
|
|
}
|
|
|
|
/*************************/
|
|
/***** SLIDE SELECT ******/
|
|
/*************************/
|
|
|
|
#select{
|
|
width:100%;
|
|
text-align: center;
|
|
padding-top: 15px;
|
|
}
|
|
#select .dot{
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 40px;
|
|
border: 1px solid #fff;
|
|
display: inline-block;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
}
|
|
#select .dot[selected]{
|
|
background: #fff;
|
|
} |