tagslice/tagslice.css

@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
	/* Highly approximate color names from our pallette */
	--orange: rgb(255,153,0);
	--black: rgb(66,66,66);
	--white: rgb(255,255,255);
	--lightgrey: rgb(233,233,233);
	--darkgrey: rgb(188,188,188);
	--blue: rgb(50,153,187);
}

outer {
	display: flex;

	width: 100%;
	height: 100%;

	background-color: var(--white);
	font-family: 'Roboto';

	flex-direction: row;
}

taglist {
	display: flex;

	border-right: 2px solid var(--orange);

	flex-shrink: 0;

	flex-direction: column;
}

tagsection {
	display: flex;

	padding: 5px;

	border-bottom: 1px solid var(--orange);

	flex-direction: column;
}

tag {
	display: block;

	padding: 3px;

	border: 1px solid var(--darkgrey);
	border-radius: 8px;

	background-color: var(--lightgrey);
	color: var(--blue);
	font-family: 'Roboto';
	font-size: small;
	text-align: center;

	cursor: move;
	user-select: none;
}

tag.placeholder {
	opacity: 0.7;
}

objectlist {
	display: block;

	padding: 5px;

	flex-grow: 1;
}