lcars-dash/client/styles/buttons.css

LCARS inspired multi-window dashboard

div.lcars.v.right {
	text-align: right;
}

div.lcars.v.left {
	text-align: left;
}

div.lcars.v.top {
	
}

div.lcars.v.bottom {
	text-align: left;
}

div.lcars.v.right.divide {
	border-left: 5px solid black;
}

div.lcars.v.left.divide {
	border-right: 5px solid black;
}

div.lcars.v.top.divide {
	
}

div.lcars.v.bottom.divide {
	
}

div.lcars.v button.lcars.corner {
	border-width: 0px !important;
}

div.lcars.v.bottom.left button.lcars.corner {
	border-bottom-left-radius: 80px;
}

div.lcars.v.bottom.right button.lcars.corner {
	border-bottom-right-radius: 80px;
}

div.lcars.v.top.left button.lcars.corner {
	border-top-left-radius: 80px;
}

div.lcars.v.top.right button.lcars.corner {
	border-top-right-radius: 80px;
}
/*
div.lcars.right button.lcars span {
	left: 8px;
}
*/
div.lcars.v button.lcars {
	/*position: relative;
	display: inline-block;*/
	width: 240px;
	height: 65px;
	
	cursor: pointer;
	
	line-height: 20px;
	text-transform: uppercase;
	font-weight: 600;
    position: relative;
}

div.lcars.v button.lcars.h05 {
	height: 35px;
}

div.lcars.v button.lcars.h04 {
	height: 30px;
}

div.lcars.v button.lcars.h2 {
	height: 95px;
}

div.lcars.v button.lcars.h25 {
	height: 90px;
}

div.lcars.v button.lcars.h3 {
	height: 125px;
}

div.lcars.v button.lcars.h35 {
	height: 120px;
}

div.lcars.v button.lcars.h4 {
	height: 155px;
}

div.lcars.v button.lcars.h45 {
	height: 150px;
}

div.lcars.v button.lcars.h5 {
	height: 185px;
}

div.lcars.v button.lcars.h55 {
	height: 180px;
}

div.lcars.v button.lcars.hFlow {
	height: inherit;
}

div.lcars.v button.lcars.txT span {
	top: 4px;
	bottom: inherit;
}

div.lcars.v button.lcars.txB span {
	bottom: 4px;
	top: inherit;
}

div.lcars.v button.lcars.txL span {
	left: 88px;
}

div.lcars.v button.lcars.txR span {
	right: 88px;
}

div.lcars.v.bottom button.lcars {
	border-bottom: 5px solid black;
	border-right: 0px;
	border-left: 0px;
	border-top: 0px;
}

div.lcars.v.top button.lcars {
	border-top: 5px solid black;
	border-bottom: 0px;
	border-right: 0px;
	border-left: 0px;
}

div.lcars.bottom button.lcars span.auto {
	bottom: 4px;
}

div.lcars.top button.lcars span.auto {
	top: 4px;
}

div.lcars.left button.lcars span.auto {
	right: 8px;
}

div.lcars.right button.lcars span.auto {
	left: 8px;
}

div.lcars.v button.lcars:hover,
div.lcars.v button.lcars:active,
div.lcars.v button.lcars:focus {
	outline: none;
}

button.lcars span {
	line-height: 20px;
	text-transform: uppercase;
	font-weight: 600;
	position: absolute;
	display: inline-block;
	width: 144px;
}

.lcars.left button.lcars {
	text-align: right;
}

.lcars.right button.lcars {
	text-align: left;
}

button.lcars.bottom span {
	bottom: 7px;
}

button.lcars.top span {
	top: 7px;
}

button.lcars.passive {
	background-color: #ff9933;
	color: black;
}

button.lcars.active {
	background-color: #99ccff;
	color: black;
}

button.lcars.option {
	background-color: #882211;
	color: black;
}

button.lcars.property {
	background-color: #4455bb;
	color: black;
}

button.lcars.note {
	background-color: #664466;
	color: black;
}

button.lcars.configuration {
	background-color: #bb6622;
	color: black;
}



button.lcars.functional {
	background-color: #000088;
	color: black;
}

button.lcars.warning {
	background-color: #bbaa55;
	color: black;
}

button.lcars.exception {
	background-color: #882211;
	color: black;
}