mirror of
https://github.com/Tailszefox/Pony-Fusion.git
synced 2024-11-23 14:27:59 +01:00
343 lines
No EOL
10 KiB
CSS
343 lines
No EOL
10 KiB
CSS
@font-face {
|
|
font-family: 'celestia_reduxmedium';
|
|
src: url('../fonts/celestiamediumredux1.55-webfont.eot');
|
|
src: url('../fonts/celestiamediumredux1.55-webfont.eot?#iefix') format('embedded-opentype'),
|
|
url('../fonts/celestiamediumredux1.55-webfont.woff') format('woff'),
|
|
url('../fonts/celestiamediumredux1.55-webfont.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
html, body
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#container
|
|
{
|
|
min-height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
body
|
|
{
|
|
background-color: #f0f0f0;
|
|
text-align: center;
|
|
}
|
|
|
|
#header
|
|
{
|
|
font-family: 'celestia_reduxmedium', Arial, sans-serif;
|
|
background-color: #bbbbff;
|
|
border-bottom: 1px solid black;
|
|
margin-bottom: 20px;
|
|
padding-top: 20px;
|
|
width: 100%;
|
|
height: 55px;
|
|
font-size: 36pt;
|
|
}
|
|
|
|
#content
|
|
{
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.fusionChoice
|
|
{
|
|
font-size: large;
|
|
background-color: #ddddff;
|
|
height: 35px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#from
|
|
{
|
|
margin-right: 100px;
|
|
}
|
|
|
|
#to
|
|
{
|
|
margin-left: 100px;
|
|
}
|
|
|
|
#buttonSwap, #buttonRandomize, #buttonRandomizeFrom, #buttonRandomizeTo
|
|
{
|
|
font-size: large;
|
|
}
|
|
|
|
#buttonRandomizeFrom
|
|
{
|
|
margin-right: 90px;
|
|
}
|
|
|
|
.buttonsRandomize .topAndBottom
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
#buttonRandomizeTo
|
|
{
|
|
margin-left: 90px;
|
|
}
|
|
|
|
#name
|
|
{
|
|
font-family: 'celestia_reduxmedium', Arial, sans-serif;
|
|
font-size: 25pt;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#resultDiv
|
|
{
|
|
width: 80%;
|
|
background-color: #fafafa;
|
|
margin: auto;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#resultImage
|
|
{
|
|
width: auto;
|
|
max-height: 768px;
|
|
}
|
|
|
|
#legal
|
|
{
|
|
background-color: #e5e5e5;
|
|
text-align: left;
|
|
margin: auto;
|
|
margin-left: 5px;
|
|
padding: 5px;
|
|
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
#legal p
|
|
{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#legal img
|
|
{
|
|
margin-top: -5px;
|
|
}
|
|
|
|
#faqWrapper
|
|
{
|
|
display: none;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-color: rgba(128, 128, 128, 0.4);
|
|
z-index: 10;
|
|
}
|
|
|
|
#faq
|
|
{
|
|
width: 80%;
|
|
height: 85%;
|
|
overflow: auto;
|
|
|
|
margin: auto;
|
|
margin-top: 30px;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
#faq dd
|
|
{
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#faqClose
|
|
{
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
text-align: center;
|
|
|
|
background-color: #F5F5F5;
|
|
border: 1px solid #E3E3E3;
|
|
|
|
position: fixed;
|
|
|
|
top: 20px;
|
|
right: 8%;
|
|
|
|
border-radius: 20px;
|
|
|
|
font-size: 15pt;
|
|
}
|
|
|
|
#faqCloseButton
|
|
{
|
|
position: relative;
|
|
top: 3px;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
#audio
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
#twilicane
|
|
{
|
|
position: absolute;
|
|
left: 28%;
|
|
}
|
|
|
|
@keyframes merp
|
|
{
|
|
0% {top: -10px; transform: scaleX(-1);}
|
|
1.67% {top: 10px; transform: scaleX(1);}
|
|
3.33% {top: -10px; transform: scaleX(-1);}
|
|
5% {top: 10px; transform: scaleX(1);}
|
|
6.67% {top: -10px; transform: scaleX(-1);}
|
|
8.33% {top: 10px; transform: scaleX(1);}
|
|
10% {top: -10px; transform: scaleX(-1);}
|
|
11.67% {top: 10px; transform: scaleX(1);}
|
|
13.33% {top: -10px; transform: scaleX(-1);}
|
|
15% {top: 10px; transform: scaleX(1);}
|
|
16.67% {top: -10px; transform: scaleX(-1);}
|
|
18.33% {top: 10px; transform: scaleX(1);}
|
|
20% {top: -10px; transform: scaleX(-1);}
|
|
21.67% {top: 10px; transform: scaleX(1);}
|
|
23.33% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
25% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
26.67% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
28.33% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
30% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
31.67% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
33.33% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
35% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
36.67% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
38.33% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
40% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
41.67% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
43.33% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
45% {top: 10px; transform: rotate(90deg) scaleY(1);}
|
|
46.67% {top: -10px; transform: rotate(90deg) scaleY(-1);}
|
|
48.33% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
50% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
51.67% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
53.33% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
55% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
56.67% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
58.33% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
60% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
61.67% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
63.33% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
65% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
66.67% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
68.33% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
70% {top: -10px; transform: rotate(180deg) scaleY(-1);}
|
|
71.67% {top: 10px; transform: rotate(180deg) scaleY(1);}
|
|
73.33% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
75% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
76.67% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
78.33% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
80% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
81.67% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
83.33% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
85% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
86.67% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
88.33% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
90% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
91.67% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
93.33% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
95% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
96.67% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
98.33% {top: 10px; transform: rotate(270deg) scaleY(1);}
|
|
100% {top: -10px; transform: rotate(270deg) scaleY(-1);}
|
|
}
|
|
|
|
@-webkit-keyframes merp
|
|
{
|
|
0% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
1.67% {top: 10px; -webkit-transform: scaleX(1);}
|
|
3.33% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
5% {top: 10px; -webkit-transform: scaleX(1);}
|
|
6.67% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
8.33% {top: 10px; -webkit-transform: scaleX(1);}
|
|
10% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
11.67% {top: 10px; -webkit-transform: scaleX(1);}
|
|
13.33% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
15% {top: 10px; -webkit-transform: scaleX(1);}
|
|
16.67% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
18.33% {top: 10px; -webkit-transform: scaleX(1);}
|
|
20% {top: -10px; -webkit-transform: scaleX(-1);}
|
|
21.67% {top: 10px; -webkit-transform: scaleX(1);}
|
|
23.33% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
25% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
26.67% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
28.33% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
30% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
31.67% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
33.33% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
35% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
36.67% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
38.33% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
40% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
41.67% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
43.33% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
45% {top: 10px; -webkit-transform: rotate(90deg) scaleY(1);}
|
|
46.67% {top: -10px; -webkit-transform: rotate(90deg) scaleY(-1);}
|
|
48.33% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
50% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
51.67% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
53.33% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
55% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
56.67% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
58.33% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
60% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
61.67% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
63.33% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
65% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
66.67% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
68.33% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
70% {top: -10px; -webkit-transform: rotate(180deg) scaleY(-1);}
|
|
71.67% {top: 10px; -webkit-transform: rotate(180deg) scaleY(1);}
|
|
73.33% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
75% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
76.67% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
78.33% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
80% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
81.67% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
83.33% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
85% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
86.67% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
88.33% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
90% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
91.67% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
93.33% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
95% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
96.67% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
98.33% {top: 10px; -webkit-transform: rotate(270deg) scaleY(1);}
|
|
100% {top: -10px; -webkit-transform: rotate(270deg) scaleY(-1);}
|
|
}
|
|
|
|
.animateImage
|
|
{
|
|
animation-name: merp;
|
|
animation-duration: 15s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: cubic-bezier(0,1,0,1);
|
|
|
|
-webkit-animation-name: merp;
|
|
-webkit-animation-duration: 15s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: cubic-bezier(0,1,0,1);
|
|
|
|
position: relative;
|
|
} |