vail/static/vail.css

.navbar-item img {
	margin-right: 1em;
}

.key {
	width: 95%;
	height: 6em;
}

.wide {
	width: 100%;
}

.mashable-area {
	user-select: none;
	-webkit-user-select: none; /* 2022-04-26 Safari still needs this */  
}

.tag.recv-lamp {
	background-color: #444;
	color: white;
}
.tag.recv-lamp.connected {
	background-color: #fec;
	color: black;
}
.tag.recv-lamp.rx,
.tag.recv-lamp.connected.rx {
	background-color: orange;
	color: black;
}

input[type=range] {
	height: 25px;
	margin: 10px 0;
	width: 100%;
	accent-color: #00d1b2;
}

.bottom {
	position: fixed;
	bottom: 0;
	width: 100vw;
}
#errors {
    max-height: 10em;
    overflow-y: scroll;
}

@keyframes yellow-fade {
	0% {background-color: orange;}
	100% {background-color: default;}
}
#errors p {
	background-color: #444;
	color: white;
	margin: 0.5em;
	padding: 0.2em;
	border-radius: 4px;
	text-align: center;
    animation: yellow-fade 0.3s ease-in 1;
}

kbd {
    background-color: #eee;
	color: black;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 66%;
    padding: .1em .6em;
	cursor: default;
	vertical-align: middle;
}

kbd.gamepad {
	color: white;
	font-weight: bold;
	background-color: #444;
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

code {
  background-color: #333;
  color: #fff;
  padding: 0.1em;
}

#charts {
	line-height: 0;
}
#charts canvas {
	height: 0.5em;
	width: 100%;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}