parent
b6f5aeb0bd
commit
b0268bd9d6
@ -0,0 +1,289 @@
|
|||||||
|
#buttonsgeneral {
|
||||||
|
font-family: arial;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 0px #7CACDE;
|
||||||
|
box-shadow: 1px 1px 2px #BEE2F9;
|
||||||
|
padding: 10px 25px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #3866A3;
|
||||||
|
background: #63B8EE;
|
||||||
|
background: linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
|
||||||
|
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
}
|
||||||
|
#buttonsgeneral:hover {
|
||||||
|
color: #14396A !important;
|
||||||
|
background: #468CCF;
|
||||||
|
background: linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
|
||||||
|
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
}
|
||||||
|
|
||||||
|
#MMbtnStart {
|
||||||
|
font-family: arial;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 0px #7CACDE;
|
||||||
|
box-shadow: 1px 1px 2px #BEE2F9;
|
||||||
|
padding: 10px 25px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #3866A3;
|
||||||
|
background: #63B8EE;
|
||||||
|
background: linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
|
||||||
|
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
}
|
||||||
|
#MMbtnStart:hover {
|
||||||
|
color: #14396A !important;
|
||||||
|
background: #468CCF;
|
||||||
|
background: linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
|
||||||
|
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
}
|
||||||
|
|
||||||
|
#MMbtnQuit {
|
||||||
|
font-family: arial;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 0px #7CACDE;
|
||||||
|
box-shadow: 1px 1px 2px #BEE2F9;
|
||||||
|
padding: 10px 25px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #3866A3;
|
||||||
|
background: #63B8EE;
|
||||||
|
background: linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
|
||||||
|
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
}
|
||||||
|
#MMbtnQuit:hover {
|
||||||
|
color: #14396A !important;
|
||||||
|
background: #468CCF;
|
||||||
|
background: linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
|
||||||
|
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#GOSbtnRetry {
|
||||||
|
font-family: arial;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 0px #7CACDE;
|
||||||
|
box-shadow: 1px 1px 2px #BEE2F9;
|
||||||
|
padding: 10px 25px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #3866A3;
|
||||||
|
background: #63B8EE;
|
||||||
|
background: linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
|
||||||
|
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
}
|
||||||
|
#GOSbtnRetry:hover {
|
||||||
|
color: #14396A !important;
|
||||||
|
background: #468CCF;
|
||||||
|
background: linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
|
||||||
|
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
}
|
||||||
|
|
||||||
|
#GOSbtnQuit {
|
||||||
|
font-family: arial;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 0px #7CACDE;
|
||||||
|
box-shadow: 1px 1px 2px #BEE2F9;
|
||||||
|
padding: 10px 25px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #3866A3;
|
||||||
|
background: #63B8EE;
|
||||||
|
background: linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
|
||||||
|
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
}
|
||||||
|
#GOSbtnQuit:hover {
|
||||||
|
color: #14396A !important;
|
||||||
|
background: #468CCF;
|
||||||
|
background: linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
|
||||||
|
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#ENDbtnRestart {
|
||||||
|
font-family: arial;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 0px #7CACDE;
|
||||||
|
box-shadow: 1px 1px 2px #BEE2F9;
|
||||||
|
padding: 10px 25px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #3866A3;
|
||||||
|
background: #63B8EE;
|
||||||
|
background: linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -ms-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF));
|
||||||
|
background: -moz-linear-gradient(top, #63B8EE, #468CCF);
|
||||||
|
}
|
||||||
|
#ENDbtnRestart:hover {
|
||||||
|
color: #14396A !important;
|
||||||
|
background: #468CCF;
|
||||||
|
background: linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -ms-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE));
|
||||||
|
background: -moz-linear-gradient(top, #468CCF, #63B8EE);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
input[type=range] {
|
||||||
|
height: 26px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 10px 0;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
input[type=range]:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
input[type=range]::-webkit-slider-runnable-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
animate: 0.2s;
|
||||||
|
box-shadow: 1px 1px 1px #50555C;
|
||||||
|
background: #50555C;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
}
|
||||||
|
input[type=range]::-webkit-slider-thumb {
|
||||||
|
box-shadow: 0px 0px 0px #000000;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #529DE1;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||||
|
background: #50555C;
|
||||||
|
}
|
||||||
|
input[type=range]::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
animate: 0.2s;
|
||||||
|
box-shadow: 1px 1px 1px #50555C;
|
||||||
|
background: #50555C;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
}
|
||||||
|
input[type=range]::-moz-range-thumb {
|
||||||
|
box-shadow: 0px 0px 0px #000000;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #529DE1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input[type=range]::-ms-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
animate: 0.2s;
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
input[type=range]::-ms-fill-lower {
|
||||||
|
background: #50555C;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
border-radius: 28px;
|
||||||
|
box-shadow: 1px 1px 1px #50555C;
|
||||||
|
}
|
||||||
|
input[type=range]::-ms-fill-upper {
|
||||||
|
background: #50555C;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
border-radius: 28px;
|
||||||
|
box-shadow: 1px 1px 1px #50555C;
|
||||||
|
}
|
||||||
|
input[type=range]::-ms-thumb {
|
||||||
|
margin-top: 1px;
|
||||||
|
box-shadow: 0px 0px 0px #000000;
|
||||||
|
border: 0px solid #000000;
|
||||||
|
height: 20px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #529DE1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input[type=range]:focus::-ms-fill-lower {
|
||||||
|
background: #50555C;
|
||||||
|
}
|
||||||
|
input[type=range]:focus::-ms-fill-upper {
|
||||||
|
background: #50555C;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#PreloaderBar {
|
||||||
|
width: 256px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 50px auto;
|
||||||
|
display: block;
|
||||||
|
/* Important Thing */
|
||||||
|
-webkit-appearance: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* All good till now. Now we'll style the background */
|
||||||
|
#PreloaderBar::-webkit-progress-bar {
|
||||||
|
background: black;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 2px;
|
||||||
|
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Now the value part */
|
||||||
|
#PreloaderBar::-webkit-progress-value {
|
||||||
|
border-radius: 50px;
|
||||||
|
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
|
||||||
|
background:
|
||||||
|
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
|
||||||
|
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
|
||||||
|
-webkit-linear-gradient(left, #fefefe, #0000ff);
|
||||||
|
|
||||||
|
/* Looks great, now animating it */
|
||||||
|
background-size: 25px 14px, 100% 100%, 100% 100%;
|
||||||
|
-webkit-animation: move 5s linear 0 infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties */
|
||||||
|
|
||||||
|
@-webkit-keyframes move {
|
||||||
|
0% {background-position: 0px 0px, 0 0, 0 0}
|
||||||
|
100% {background-position: -100px 0px, 0 0, 0 0}
|
||||||
|
}
|
||||||
Binary file not shown.
Loading…
Reference in new issue