From 2c68b6a7984eedc5482134b058798bb13f12577d Mon Sep 17 00:00:00 2001 From: Aaron van Geffen 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 +}