vail

vail.css

  1.navbar-item img {
  2	margin-right: 1em;
  3}
  4
  5.key {
  6	width: 95%;
  7	height: 6em;
  8}
  9
 10.wide {
 11	width: 100%;
 12}
 13
 14.mashable-area {
 15	user-select: none;
 16	-webkit-user-select: none; /* 2022-04-26 Safari still needs this */  
 17}
 18
 19.tag.recv-lamp {
 20	background-color: #444;
 21	color: white;
 22}
 23.tag.recv-lamp.connected {
 24	background-color: #fec;
 25	color: black;
 26}
 27.tag.recv-lamp.rx,
 28.tag.recv-lamp.connected.rx {
 29	background-color: orange;
 30	color: black;
 31}
 32
 33input[type=range] {
 34	height: 25px;
 35	margin: 10px 0;
 36	width: 100%;
 37	accent-color: #00d1b2;
 38}
 39
 40.bottom {
 41	position: fixed;
 42	bottom: 0;
 43	width: 100vw;
 44}
 45#errors {
 46    max-height: 10em;
 47    overflow-y: scroll;
 48}
 49
 50@keyframes yellow-fade {
 51	0% {background-color: orange;}
 52	100% {background-color: default;}
 53}
 54#errors p {
 55	background-color: #444;
 56	color: white;
 57	margin: 0.5em;
 58	padding: 0.2em;
 59	border-radius: 4px;
 60	text-align: center;
 61    animation: yellow-fade 0.3s ease-in 1;
 62}
 63
 64kbd {
 65    background-color: #eee;
 66	color: black;
 67    border: 1px solid #bbb;
 68    border-radius: 3px;
 69    font-size: 66%;
 70    padding: .1em .6em;
 71	cursor: default;
 72	vertical-align: middle;
 73}
 74
 75kbd.gamepad {
 76	color: white;
 77	font-weight: bold;
 78	background-color: #444;
 79	border-radius: 50%;
 80	height: 10px;
 81	width: 10px;
 82}
 83
 84code {
 85  background-color: #333;
 86  color: #fff;
 87  padding: 0.1em;
 88}
 89
 90#charts {
 91	line-height: 0;
 92}
 93#charts canvas {
 94	height: 0.5em;
 95	width: 100%;
 96}
 97
 98.loader {
 99    width: 48px;
100    height: 48px;
101    border: 5px solid #FFF;
102    border-bottom-color: transparent;
103    border-radius: 50%;
104    display: inline-block;
105    box-sizing: border-box;
106    animation: rotation 1s linear infinite;
107    }
108
109    @keyframes rotation {
110    0% {
111        transform: rotate(0deg);
112    }
113    100% {
114        transform: rotate(360deg);
115    }
116}