From 2c68b6a7984eedc5482134b058798bb13f12577d Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Mon, 23 Nov 2020 12:22:05 +0100
Subject: [PATCH] Improve crop editor styling.

---
 public/css/admin.css     | 9 +++++----
 public/js/crop_editor.js | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/css/admin.css b/public/css/admin.css
index 4e58d3e..af84404 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -150,7 +150,7 @@ body {
 	left: 0;
 	height: 100%;
 	width: 100%;
-	background: #000;
+	background: rgba(0, 0, 0, 0.8);
 	z-index: 100;
 	color: #fff;
 }
@@ -163,6 +163,8 @@ body {
 	position: relative;
 }
 .crop_position {
+	background: rgba(0, 0, 0, 1.0);
+	border: none;
 	padding: 5px;
 	text-align: center;
 }
@@ -176,15 +178,14 @@ body {
 	max-height: 700px;
 }
 #crop_boundary {
-	border: 1px solid rgba(255, 255, 255, 0.75);
-	background: rgba(255, 255, 255, 0.75);
+	border: 1px dashed rgb(255, 255, 255);
+	background: rgba(255, 255, 255, 0.4);
 	position: absolute;
 	z-index: 200;
 	width: 500px;
 	height: 300px;
 	top: 400px;
 	left: 300px;
-	filter: invert(100%); /* temp */
 }
 
 
diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js
index 8e3884d..a067910 100644
--- a/public/js/crop_editor.js
+++ b/public/js/crop_editor.js
@@ -18,7 +18,7 @@ class CropEditor {
 		this.container = document.createElement("div");
 		this.container.id = "crop_editor";
 
-		this.position = document.createElement("div");
+		this.position = document.createElement("fieldset");
 		this.position.className = "crop_position";
 		this.container.appendChild(this.position);
 
@@ -217,4 +217,4 @@ class CropEditor {
 		crop_boundary.style.width = (this.crop_width.value) * width_scale + "px";
 		crop_boundary.style.height = (this.crop_height.value) * height_scale + "px";
 	}
-}
\ No newline at end of file
+}