1 files changed, 245 insertions, 0 deletions
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..a0cfef2
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,245 @@
+body {
+	background-color: #333;
+	font-family: sans-serif;
+}
+
+.title {
+	color: #ddd;
+	font-size: 38px;
+	user-select: none;
+	text-align: center;
+	margin-bottom: 20px;
+	min-height: 38px;
+	cursor: pointer;
+}
+
+.title label {
+	cursor: pointer;
+}
+
+.title input {
+	display: none;
+	background: transparent;
+	border: 0px;
+	color: #ddd;
+	font-size: 38px;
+}
+
+.title input:focus {
+	background: #666;
+}
+
+.main-content {
+	display: flex;
+	flex-flow: column;
+}
+
+.main-content.vertical {
+	flex-flow: row !important;
+}
+
+.vertical .tierlist {
+	width: 80%;
+}
+
+.toggleable-container {
+	display: flex;
+	flex-flow: column;
+	flex-grow: 1;
+}
+
+.tierlist span {
+    min-width: 100px;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    font-size: 30px;
+    font-family: sans-serif;
+    border: 0;
+    padding: 0;
+}
+
+.tierlist div.row {
+	border: 0px solid #666;
+	border-top-width: 1px;
+	border-right-width: 1px;
+	display: flex;
+	user-select: none;
+}
+
+.tierlist div:last-child {
+	border-bottom-width: 1px !important;
+}
+
+.tierlist div.row:hover {
+	background-color: #666;
+}
+
+.tierlist div.row.drag-entered {
+	background-color: #888;
+}
+
+span.header {
+	justify-content: center;
+	align-self: stretch;
+	cursor: pointer;
+}
+
+span.header label {
+	cursor: pointer;
+}
+
+span.header input[type=text] {
+	display: none;
+	height: 50px;
+	font-size: 30px;
+	text-align: center;
+}
+
+span.items {
+	display: flex;
+	flex-wrap: wrap;
+	flex-grow: 1;
+	justify-content: left;
+	pointer-events: none;
+	height: fit-content;
+}
+
+span.item {
+	pointer-events: auto;
+}
+
+.images {
+	display: flex;
+	border: 1px solid #666;
+	height: 200px;
+	overflow-y: auto;
+	flex-wrap: wrap;
+	flex-grow: 1;
+	width: 100%;
+	align-content: flex-start;
+}
+
+.images.drag-entered {
+	background-color: #888;
+}
+
+img.draggable {
+    cursor: grab;
+    max-height: 100px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+}
+
+img.draggable:hover, .button:hover {
+	filter: brightness(0.6);
+}
+
+img.draggable.dragged, .button:active {
+	filter: brightness(0.4);
+}
+
+.button img {
+	user-select: none;
+}
+
+.bottom-container {
+	display: flex;
+	flex-flow: row;
+	align-items: center;
+	margin-top: 15px;
+	flex-grow: 1;
+}
+
+.vertical .bottom-container {
+	flex-flow: column !important;
+	margin-left: 15px;
+	margin-top: 0px !important;
+}
+
+.bottom-container input {
+	border: 0;
+	padding: 0;
+	display: none;
+}
+
+.bottom-container > div {
+	margin: 0;
+}
+
+.button {
+	border: 1px solid #666;
+	height: 100px;
+}
+
+.row-buttons {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: space-evenly;
+	opacity: 0.2;
+	transition: 200ms linear;
+}
+
+.row-buttons:hover {
+	opacity: 1;
+	transition: 200ms linear;
+}
+
+.buttons-container {
+	display: flex;
+	flex-wrap: wrap;
+	width: 270px;
+}
+
+.vertical .buttons-container {
+	justify-content: center;
+}
+
+.gh-link {
+	position: absolute;
+	top: 5px;
+	color: #ccc;
+	text-decoration: none;
+}
+
+.top-container {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	height: 60px;
+	display: flex;
+	flex-flow: row;
+}
+
+.top-container * {
+	height: 100%;
+	overflow: hidden;
+	margin: 0;
+	padding-left: 5px;
+	padding-right: 5px;
+	border: 0;
+}
+
+.top-container input {
+	border: 0;
+	padding: 0;
+	display: none;
+}
+
+#trash {
+	opacity: 0.4;
+}
+
+#trash:hover {
+	opacity: 1;
+}
+
+.hint {
+	font-style: italic;
+	font-size: small;
+	color: #ccc;
+	padding: 0px 10px;
+}
+\ No newline at end of file