525 lines
9.7 KiB
CSS
525 lines
9.7 KiB
CSS
@font-face{
|
|
font-family: 'FuturaHandwritten';
|
|
font-style: normal;
|
|
src: url('FuturaHandwritten.ttf') format('truetype');
|
|
}
|
|
|
|
html,body{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body{
|
|
|
|
margin:0;
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
font-family: 'FuturaHandwritten';
|
|
color: #333;
|
|
font-size: 20px;
|
|
|
|
}
|
|
#preloader{
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 200px;
|
|
height: 50px;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
#main{
|
|
width: 100%;
|
|
height: calc(100% - 60px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#footer{
|
|
position: absolute;
|
|
z-index: 1000;
|
|
width: 100%;
|
|
height: 60px;
|
|
background: #222;
|
|
}
|
|
s{
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/*************************/
|
|
/******* SOUND *******/
|
|
/*************************/
|
|
#sound{
|
|
position: absolute;
|
|
left:13px;
|
|
top:5px;
|
|
width: 100px;
|
|
height: 50px;
|
|
cursor: pointer;
|
|
}
|
|
#sound > div{
|
|
position: absolute;
|
|
}
|
|
#sound #sound_icon{
|
|
background: url(../assets/ui/sound.png);
|
|
background-size: auto 100%;
|
|
width: 40px;
|
|
height: 40px;
|
|
top: 5px;
|
|
left:2px;
|
|
}
|
|
#sound #sound_on, #sound #sound_off{
|
|
left: 52px;
|
|
font-size: 30px;
|
|
line-height: 55px;
|
|
}
|
|
#sound #sound_on{
|
|
color:#fff;
|
|
}
|
|
#sound #sound_off{
|
|
color:#595959;
|
|
}
|
|
#sound[sound=off] #sound_icon{
|
|
background-position: -40px 0;
|
|
}
|
|
#sound[sound=on] #sound_on, #sound[sound=off] #sound_off{
|
|
display: block;
|
|
}
|
|
#sound[sound=off] #sound_on, #sound[sound=on] #sound_off{
|
|
display: none;
|
|
}
|
|
|
|
.sharing{
|
|
position: absolute;
|
|
width:120px;
|
|
height:40px;
|
|
top:10px;
|
|
right:13px;
|
|
}
|
|
.sharing img{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
/*************************/
|
|
/******* SLIDESHOW *******/
|
|
/*************************/
|
|
|
|
#slideshow_container{
|
|
width:0; height:0;
|
|
position:absolute;
|
|
margin:auto;
|
|
top:0; left:0; right:0; bottom:0;
|
|
}
|
|
#slideshow{
|
|
|
|
/*border: 1px solid rgba(0,0,0,0.2);*/
|
|
width:960px;
|
|
height:540px;
|
|
|
|
/* Center this thing */
|
|
position: absolute;
|
|
left:-480px;
|
|
top:-270px;
|
|
|
|
}
|
|
.object{
|
|
position: absolute;
|
|
transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
|
|
}
|
|
.fader{
|
|
transition: opacity 0.5s ease-in-out !important;
|
|
}
|
|
|
|
/******** Text Box ********/
|
|
|
|
.textbox{}
|
|
.textbox > div{
|
|
position: absolute;
|
|
}
|
|
/* fake bold */
|
|
.textbox b{
|
|
font-weight: normal;
|
|
text-shadow:1px 0 0 currentColor;
|
|
}
|
|
|
|
|
|
.label{
|
|
position: absolute;
|
|
}
|
|
|
|
/********* Button ********/
|
|
|
|
.no-select{
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
.button{
|
|
z-index: 0;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
transform-origin: 97.5px 27.5px;
|
|
transition: transform 0.1s ease-out;
|
|
}
|
|
.button #background{
|
|
position: absolute;
|
|
background: url(../assets/ui/button.png);
|
|
width:250px; height:125px;
|
|
background-size: 100%;
|
|
top:-35px; left:-30px;
|
|
pointer-events:none;
|
|
cursor: default;
|
|
}
|
|
.button #text{
|
|
|
|
font-family: 'FuturaHandwritten';
|
|
color: #000;
|
|
font-size: 24px;
|
|
|
|
width: 180px;
|
|
height: 30px;
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
top:14px; left:5px;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
.button #hitbox{
|
|
position: absolute;
|
|
width:195px; height:55px;
|
|
cursor: pointer;
|
|
}
|
|
.button[hover=yes]{
|
|
z-index: 100;
|
|
transform: scale(1.02, 1.02);
|
|
}
|
|
.button[hover=yes] #background{
|
|
background-position: 0px -125px !important;
|
|
}
|
|
.button[deactivated=yes] #background{
|
|
background-position: 0px -250px !important;
|
|
}
|
|
.button[deactivated=yes] #text{
|
|
color: #CCCCCC;
|
|
}
|
|
.button[deactivated=yes] #hitbox{
|
|
display: none;
|
|
}
|
|
.button[size=short]{
|
|
transform-origin: 57.5px 27.5px;
|
|
}
|
|
.button[size=short] #background{
|
|
background: url(../assets/ui/button_short.png);
|
|
background-size: 100%;
|
|
width:150px; left:-20px;
|
|
}
|
|
.button[size=short] #text{
|
|
width:105px;
|
|
/*font-size: 18px;
|
|
top: 18px;*/
|
|
}
|
|
.button[size=short] #hitbox{
|
|
width:115px;
|
|
}
|
|
.button[size=long]{
|
|
transform-origin: 172.5px 27.5px;
|
|
}
|
|
.button[size=long] #background{
|
|
background: url(../assets/ui/button_long.png);
|
|
background-size: 100%;
|
|
width:400px;
|
|
}
|
|
.button[size=long] #text{
|
|
width:330px;
|
|
top: 11px;
|
|
}
|
|
.button[size=long] #hitbox{
|
|
width:345px;
|
|
}
|
|
.button:active{
|
|
transform: scale(0.95, 0.95);
|
|
}
|
|
|
|
|
|
/*************************/
|
|
/****** SANDBOX UI *******/
|
|
/*************************/
|
|
|
|
#sandbox_tabs{
|
|
position: absolute;
|
|
left: 460px; top:-10px;
|
|
background: url(../assets/ui/sandbox_tabs.png);
|
|
width:500px; height:470px;
|
|
background-size: auto 100%;
|
|
|
|
-webkit-user-select: none; /* Chrome all / Safari all */
|
|
-moz-user-select: none; /* Firefox all */
|
|
-ms-user-select: none; /* IE 10+ */
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
#sandbox_tabs > div{
|
|
position: absolute;
|
|
}
|
|
#sandbox_tabs .hitbox{
|
|
cursor: pointer;
|
|
font-size: 25px;
|
|
top: 22px;
|
|
}
|
|
#sandbox_tabs .sandbox_page{
|
|
width: 433px;
|
|
height: 385px;
|
|
left: 33px;
|
|
top: 80px;
|
|
}
|
|
.incdec{
|
|
width: 0; height: 0;
|
|
position: absolute;
|
|
}
|
|
.incdec > div{
|
|
position: absolute;
|
|
}
|
|
.incdec > .incdec_num{
|
|
width:50px; height:50px;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
top: -16px;
|
|
left: -25px;
|
|
cursor: default;
|
|
}
|
|
.incdec > .incdec_control{
|
|
left:-10px;
|
|
width:20px; height:20px;
|
|
background: url(../assets/ui/sandbox_incdec.png);
|
|
background-size: auto 100%;
|
|
cursor: pointer;
|
|
}
|
|
.incdec > .incdec_control[arrow=up]{ top:-35px; background-position:0px 0px; }
|
|
.incdec > .incdec_control[arrow=up]:hover{ background-position:-20px 0px; }
|
|
.incdec > .incdec_control[arrow=down]{ bottom:-35px; background-position:-40px 0px; }
|
|
.incdec > .incdec_control[arrow=down]:hover{ background-position:-60px 0px; }
|
|
|
|
.slider{
|
|
position: absolute;
|
|
height: 40px;
|
|
}
|
|
.slider > div{
|
|
position: absolute;
|
|
}
|
|
.slider > .slider_bg{
|
|
top:0;
|
|
width:100%; height:30px;
|
|
background: url(../assets/ui/slider_bg.png);
|
|
background-size: auto 100%;
|
|
}
|
|
.slider > .slider_knob{
|
|
top:0;
|
|
width:30px; height:30px;
|
|
background: url(../assets/ui/slider_knob.png);
|
|
background-size: 100% 100%;
|
|
cursor: -webkit-grab;
|
|
cursor: -moz-grab;
|
|
cursor: grab;
|
|
}
|
|
.slider > .slider_knob:active{
|
|
cursor: -webkit-grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.sandbox_pop{
|
|
position: absolute;
|
|
}
|
|
.sandbox_pop>div{
|
|
position: absolute;
|
|
}
|
|
.sandbox_pop_icon{
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url(../assets/ui/sandbox_hats.png);
|
|
background-size: auto 100%;
|
|
}
|
|
.sandbox_pop_label{
|
|
font-size: 18px;
|
|
width: 150px;
|
|
top: 8px;
|
|
left: 50px;
|
|
}
|
|
|
|
/*************************/
|
|
/******* SCRATCHER *******/
|
|
/*************************/
|
|
|
|
.scratcher{
|
|
position: absolute;
|
|
top:0; left:0;
|
|
width: 100%; height: 100%;
|
|
background: url(../assets/ui/scratch.png);
|
|
background-size: 200% 2000%;
|
|
display: none;
|
|
|
|
z-index: 200;
|
|
}
|
|
|
|
/*************************/
|
|
/******* SCOREBOARD *******/
|
|
/*************************/
|
|
|
|
#scoreboard{
|
|
position: absolute;
|
|
width:200px; height:100px;
|
|
background: url(../assets/iterated/iterated_scoreboard.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
#scoreboard > div{
|
|
position: absolute;
|
|
width: 60px; height: 60px;
|
|
text-align: center;
|
|
font-size: 50px;
|
|
color: #666666;
|
|
}
|
|
#scoreboard > div:nth-child(1){
|
|
left: 20px;
|
|
top: 21px;
|
|
}
|
|
#scoreboard > div:nth-child(2){
|
|
right: 15px;
|
|
top: 21px;
|
|
}
|
|
|
|
/*************************/
|
|
/******* CHARACTERS *******/
|
|
/*************************/
|
|
|
|
.character{
|
|
position: absolute;
|
|
height: 114px;
|
|
}
|
|
.character #peep{
|
|
background: url(../assets/tournament/peep_characters.png);
|
|
background-size: auto 100%;
|
|
width: 105px;
|
|
height: 114px;
|
|
top: -5px;
|
|
left: -10px;
|
|
}
|
|
.character #desc{
|
|
width: calc(100% - 100px);
|
|
font-size: 18px;
|
|
height: 114px;
|
|
right: 0;
|
|
line-height: 1.2em;
|
|
}
|
|
.character #peep[char=tft]{ background-position: 0 0; }
|
|
.character #peep[char=all_d]{ background-position: -105px 0; }
|
|
.character #peep[char=all_c]{ background-position: -210px 0; }
|
|
.character #peep[char=grudge]{ background-position: -315px 0; }
|
|
.character #peep[char=prober]{ background-position: -420px 0; }
|
|
.character #peep[char=tf2t]{ background-position: -525px 0; }
|
|
.character #peep[char=pavlov]{ background-position: -630px 0; }
|
|
.character #peep[char=random]{ background-position: -735px 0; }
|
|
|
|
.tft{ color:#4089DD; }
|
|
.all_d{ color:#52537F; }
|
|
.all_c{ color:#FF75FF; }
|
|
.grudge{ color:#efc701; }
|
|
.prober{ color:#f6b24c; }
|
|
.tf2t{ color:#88A8CE; }
|
|
.pavlov{ color:#86C448; }
|
|
.random{ color:#FF5E5E; }
|
|
|
|
.icon{
|
|
width:25px; height:25px;
|
|
background: url(../assets/ui/sandbox_hats.png);
|
|
background-size: auto 100%;
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
.icon_label{
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
.tft .icon{ background-position: 0 0; }
|
|
.all_d .icon{ background-position: -25px 0; }
|
|
.all_c .icon{ background-position: -50px 0; }
|
|
.grudge .icon{ background-position: -75px 0; }
|
|
.prober .icon{ background-position: -100px 0; }
|
|
.tf2t .icon{ background-position: -125px 0; }
|
|
.pavlov .icon{ background-position: -150px 0; }
|
|
.random .icon{ background-position: -175px 0; }
|
|
|
|
/*************************/
|
|
/******* MISC STUFF *******/
|
|
/*************************/
|
|
|
|
.score_small{
|
|
width:40px; height:40px;
|
|
background: url(../assets/tournament/score_small.png);
|
|
background-size: auto 100%;
|
|
display: inline-block;
|
|
}
|
|
.score_small[payoff=R]{ background-position: 0 0; }
|
|
.score_small[payoff=T]{ background-position: -40px 0; }
|
|
.score_small[payoff=S]{ background-position: -80px 0; }
|
|
.score_small[payoff=P]{ background-position: -120px 0; }
|
|
|
|
/*************************/
|
|
/***** 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;
|
|
}
|
|
|
|
/*************************/
|
|
/***** CREDITS ******/
|
|
/*************************/
|
|
|
|
.credits{
|
|
color: #888;
|
|
}
|
|
.credits .big{
|
|
font-size:40px;
|
|
line-height: 42px;
|
|
color:#fff;
|
|
}
|
|
.credits .divider{
|
|
display: block;
|
|
height: 40px;
|
|
}
|
|
.credits a{
|
|
color:#dd4040;
|
|
}
|
|
.credits a:hover{
|
|
color:#ee5151;
|
|
}
|
|
|