Improve crop editor styling.

This commit is contained in:
Aaron van Geffen 2020-11-23 12:22:05 +01:00
parent fd84e1c9f8
commit 2c68b6a798
2 changed files with 7 additions and 6 deletions

View File

@ -150,7 +150,7 @@ body {
left: 0; left: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #000; background: rgba(0, 0, 0, 0.8);
z-index: 100; z-index: 100;
color: #fff; color: #fff;
} }
@ -163,6 +163,8 @@ body {
position: relative; position: relative;
} }
.crop_position { .crop_position {
background: rgba(0, 0, 0, 1.0);
border: none;
padding: 5px; padding: 5px;
text-align: center; text-align: center;
} }
@ -176,15 +178,14 @@ body {
max-height: 700px; max-height: 700px;
} }
#crop_boundary { #crop_boundary {
border: 1px solid rgba(255, 255, 255, 0.75); border: 1px dashed rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.4);
position: absolute; position: absolute;
z-index: 200; z-index: 200;
width: 500px; width: 500px;
height: 300px; height: 300px;
top: 400px; top: 400px;
left: 300px; left: 300px;
filter: invert(100%); /* temp */
} }

View File

@ -18,7 +18,7 @@ class CropEditor {
this.container = document.createElement("div"); this.container = document.createElement("div");
this.container.id = "crop_editor"; this.container.id = "crop_editor";
this.position = document.createElement("div"); this.position = document.createElement("fieldset");
this.position.className = "crop_position"; this.position.className = "crop_position";
this.container.appendChild(this.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.width = (this.crop_width.value) * width_scale + "px";
crop_boundary.style.height = (this.crop_height.value) * height_scale + "px"; crop_boundary.style.height = (this.crop_height.value) * height_scale + "px";
} }
} }