ollie-controller/lib/controller.css

A tool to control Ollie from your computer

@import url(https://fonts.googleapis.com/css?family=Itim|Roboto+Condensed:400,300);

::-webkit-scrollbar { 
		display: none; 
}

*{
	box-sizing:border-box;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
}

body {
	font-size: 24pt;
	font-family: 'Itim', cursive;
	background: -webkit-canvas(voronoi) fixed;
	margin:0;
	padding: 0;
}

a, a:visited, a:hover{
	color:#fff;
	text-decoration: none;
}

#pages{
	padding:20px;
	transform: translateY(-50%) scale(.7);
	position: relative;
	top: 50vh;
	transition: transform .5s;
}

#pages.open {
	transform: translateY(-50%);
}

#normMove .left{
	width:510px;
	float:left;
	position: relative;
}

#normMove .right{
	width:510px;
	float:right;
	position: relative;
}

.joystickContext{
	position: relative;
	border-color: cyan;
	border-style: dashed;
	border-width: 5px;
	width:100%;
	height:510px;
	border-radius: 100%;
}

#joystick1 canvas[width="126"] {
	top: 250px !important;
	left: 250px !important;
	transform: translate(-50%, -50%);
}

#joystick2{
	border-radius: 10%;
	border-color: rgba(250,121,0,1);
}

.speedRing {
	border-color: #DD3333;
	top:255px;
	left: 255px;
	transform: translate(-50%, -50%);
	position: absolute;
	transition: all .25s;
	width:0;
	height: 0;
}

.wasd {
	width:450px;
	float: left;
}

.flex {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

.taste {
	width: 140px;
	height: 140px;
	border-color: cyan;
	border-style: dashed;
	border-width: 5px;
	border-radius: 30px;
	margin:5px 5px;
	text-align: center;
	font-size: 48pt;
	color: cyan;
	transition: all 0.25s;
}

.small .taste {
	width: 100px;
	height: 100px;
}

.taste.noborder {
	border:none;
	height: auto;
}

.taste.on {
	border-color: rgba(250,121,0,1);
	color: rgba(250,121,0,1);
}

.LEFT:after, .RIGHT:after, .UP:after, .DOWN:after {
	content: "";
	display: inline-block;
    border-right: 10px solid; border-bottom: 10px solid;
    width: 30px; height: 30px;
}

.LEFT:after {
	transform: rotate(135deg);
}

.RIGHT:after {
	transform: rotate(-45deg);
}

.UP:after {
	transform: rotate(-135deg);
}

.DOWN:after {
	transform: rotate(45deg);
}

.ctsh {
	float: right;
}

.ctsh > * {
	float: right;
}

.shift {
	width: 200px;
}

.tab {
	width: 275px;
}

.spacebar {
	width: 100%;
}

#keyboard {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

#keyboard > .joystickContext {
	width: 510px;
}

.joystickContext > .innerKeyCont {
	position: absolute;
	display: flex;
	height: 100%;
	width: 100%;
	justify-content: center;
	align-content: center;
	flex-wrap:nowrap;
}

.innerKeyCont > .flex {
	height: 100%;
	align-content: space-between;
}

.innerKeyCont .north {
	font-family: u2400;
	border-color: #aa0114;
	color: #aa0114;
	align-self: flex-start;
	transform: rotate(-90deg);
}

.innerKeyCont .a {
	height: 275px;
}

.innerKeyCont .d {
	height: 275px;
}

.joystickContext .line {
	width: 50px;
	position: relative;
	left: 230px;
	transform-origin: center bottom;
	top: 205px; /* JAVASCRIPT 205-speed */
}

.line > .inner {
	transform: translateY(25px); /* çok garip origin olaylarından oldu, kafa bi milyon */
}

.line .arrUp {
	width: 100%;
	height: 50px;
	border: #CD661D dashed 5px;
	border-radius: 50%;
}

.line .arrDo {
	height: 0px; /* JAVASCRIPT speed */
	width: 0;
	border-right: 5px dashed #EAEAAE;
	position: relative;
	left: 50%;
	transform: translate(-50%, -25px);
}


#keyboard > .keys {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
}

#keyboard > .throttle {
	box-sizing: content-box;
	position: relative;
	border-radius: 40px;
	width: 80px;
	height: 510px;
	border: 5px dashed cyan;
	overflow: hidden;
}

.throttle .pedal {
	border-radius: 40px;
	width: 80px;
	position: absolute;
	bottom: 0;
	height: 0;
	border: 5px dashed #CD661D;
}

.throttle .pedalSp {
	transition: all .2s;
	width: 80px;
	position: absolute;
	bottom: 0;
	height: 0;
	border-top: 5px dashed #DD3333;
}

.throttle .w {
	width: 70px;
	position: absolute;
	top: 0;
}

.throttle .s {
	width: 70px;
	position: absolute;
	bottom: 0;
}

.overlay {
	visibility: hidden;
	position: fixed;
	opacity: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(188,167,190,0.8);
	color: rgba(76,115,166,1);
	z-index: 1000;
	transition: visibility .5s .5s, opacity .5s;
}

.overlay.open {
	visibility: visible;
	transition: visibility .5s, opacity .5s;
	opacity: 1;
}

#greeter {
	z-index: 123414134324;
}

#greeter > div {
	text-align: center;
	position: relative;
	transform: translateY(-100%);
	font-size: 48pt;
	top: 50%;
}

.overlay .wrapper {
	width:60%;
	max-width: 800px;
	padding: 30px 0;
	margin:auto;
}

.overlay .wrapper > * {
	margin:0 10px 30px 10px;
}

.overlay .left {
	float: left;
}

.overlay .right {
	float: right;
}

.overlay .mitte {
	clear: both;
	float: none;
	position: relative;
}

/* Bar (from chris coyier) (simplified) */

.meter { 
	box-sizing: content-box;
	height: 20px;  /* Can be anything */
	position: relative;
	border: solid 5px rgba(76,115,166,1);
	background: rgba(76,115,166,0.5);
	border-radius: 25px;
	padding: 10px;
}
.meter > span {
	display: block;
	height: 100%;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border: solid 5px;
	border-color: rgb(199,228,112);
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.orange > span {
	border-color: rgb(251,159,48);
}

.yellow > span {
	border-color: rgb(250,244,186);
}

.red > span {
	border-color: rgb(255,0,85);
}	

/* Checkbox */

input[type=checkbox] {
	border:none;
	background-color: gray;
	width: 25px;
	height: 25px;
}

input[type=checkbox] + label {
	margin: 0 10px;
}

/* Button */

.button {
	border-color: rgba(76,115,166,1);
	color: rgba(76,115,166,1);
	border-style: dashed;
	border-width: 3px;
	border-radius:100px;
	display:inline-block;
	cursor:pointer;
	font-size:24px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px rgba(76,115,166,1);
}
.button:hover {
	border-color: rgba(250,121,0,1);
	color: rgba(250,121,0,1);
	text-shadow:0px 1px 0px rgba(250,121,0,1);
}
.button:active {
	border-color: #DD3333;
	color: #DD3333;
	text-shadow:0px 1px 0px #DD3333;
	position:relative;
	top:1px;
}

/* input (callmenick) */

input[type="text"] {
	display: block;
	margin: 0;
	width: 100%;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
}
input[type="text"]:focus {
	outline: none;
}
input[type="text"] {
	padding: 10px;
	border: none;
	border-bottom: solid 3px #c9c9c9;
	transition: border 0.3s;
}
input[type="text"]:focus,
input[type="text"].focus {
	border-bottom: solid 3px #969696;
}

input[type="text"].buttonified {
	padding: 16px 31px;
	border-color: rgba(76,115,166,1);
	color: rgba(76,115,166,1);
	/*font-family: 'Itim', cursive;*/
	font-size:24px;
	width: 30%;
	background: transparent;
	border-style: dashed;
	border-width: 3px;
	border-radius:100px;
	transition:all 0.3s;
}

input[type="text"].buttonified::-webkit-input-placeholder {
   color: rgba(76,115,166,1);
}

input[type="text"].buttonified:focus,
input[type="text"].buttonified.focus {
	border-color: rgba(250,121,0,1);
	color: rgba(250,121,0,1);
}

input[type="text"].buttonified:focus::-webkit-input-placeholder {
   color: rgba(250,121,0,1);
}