6bin/css/binPanel.css

User interface for 6element sensors

#editor {
	width: 100vw; height: 100vh;
	position: absolute; top: 0; left: 100vw;
	font-size: .8rem;
	background-color: #77aaff;
	transition: left .5s ease;
	z-index: 2;
}

.panel-open #editor {
	left: 0vw;
}

#delete-button {
	display: block; padding: .5rem 1.1rem; margin: 0 auto; width: 8rem;
	border: 1px solid black; border-radius: 5px;
	background-color: #EEE;
	font-size: .8rem; color: #E00; text-align: center;
}

#editor ul {
	display: flex; margin: .5rem;
	flex-direction: row; justify-content: space-around; flex-wrap: wrap; align-content: flex-start;
	font-size: 1.2rem; line-height: 1rem;
	/*background-color: #EEE;*/
}

#editor > span:first-child{
	display: block;
	font-size: 1.5rem; font-weight: bold; text-align: center;
	/*z-index: 2;*/
}

#editor > ul {
	margin: 0 auto;
	justify-content: center;
	text-align: center;
}

#editor > ul > div{
	position: relative; left: 4.4rem; margin: 0 1rem;
	z-index: 1;
	transition: left .5s ease-in-out;
}

#editor > ul > div span {
	width: 100%;
	/*background-color: #77aaff;*/
}

#editor > ul > div:last-child{
	left: -4.4rem;
	z-index: 0;
}

#editor > ul.new > div{
	left: 0;
}

#editor > ul > div:first-child li{
	background-color: #FF2727;
}

#editor > ul.new > div:last-child li{
	background-color: #28D628;
}

#wastelist{
	margin: .3rem 0; height: 13rem;
	overflow-y: scroll; 
}

#editor .bins {
	position: relative;
	z-index: 1; overflow-y: hidden; overflow-x: hidden;
}

#editor .bins li {
	text-transform: capitalize;
	height: 4rem; width: 3rem; margin: .3rem;
}

#editor svg {
	background-color: #EEE;
}

.current{
	color: #BBB; stroke: #BBB; fill: #BBB;
}

.positions{
	position: relative; /*margin-top: -9vh;*/
	list-style-type: none; z-index: 0;
	transition: margin-top .5s;
}

.positions li {
	display: inline-block; margin: .2rem; padding: .2rem;
}

.positions li.assigned {
	color: orange;
}

.positions li.selected {
	color: #EEE;
	background-color: #111;
	border-radius: 5px;
}