diff --git a/index.php b/index.php
index a92b014..90c2c93 100644
--- a/index.php
+++ b/index.php
@@ -17,7 +17,7 @@
-
diff --git a/script.js b/script.js
index 27cf0b8..2b1776e 100644
--- a/script.js
+++ b/script.js
@@ -2,25 +2,23 @@ dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', function(e) {
e.preventDefault();
- this.classList.remove('nodrop');
- this.classList.add('drop');
+ this.classList.remove('inactive');
+ this.classList.add('active');
});
dropzone.addEventListener('dragleave', function(e) {
- this.classList.remove('drop');
- this.classList.add('nodrop');
+ this.classList.remove('active');
+ this.classList.add('inactive');
});
dropzone.addEventListener('mousedown', function(e) {
- this.classList.remove('nodrop');
- this.classList.add('drop');
- console.log('click');
+ this.classList.remove('inactive');
+ this.classList.add('active');
});
dropzone.addEventListener('mouseup', function(e) {
- this.classList.remove('drop');
- this.classList.add('nodrop');
- console.log('unclick');
+ this.classList.remove('active');
+ this.classList.add('inactive');
});
dropzone.addEventListener('click', function(e) {
@@ -39,8 +37,8 @@ dropzone.addEventListener('click', function(e) {
dropzone.addEventListener('drop', function(e) {
e.preventDefault();
- this.classList.remove('drop');
- this.classList.add('nodrop');
+ this.classList.remove('active');
+ this.classList.add('inactive');
file = e.dataTransfer.files[0];
if( file.type == 'image/png' || file.type == 'image/jpeg' ) {
diff --git a/themes/gideonstar/style.css b/themes/gideonstar/style.css
index 0786f1b..67a4b4e 100644
--- a/themes/gideonstar/style.css
+++ b/themes/gideonstar/style.css
@@ -36,12 +36,13 @@ body {
justify-content: center;
}
-.nodrop {
+.active {
+ background-color: #ffb703;
+ outline: 2px dashed #fb8500;
+}
+
+.inactive {
background-color: #f5f5f5;
outline: 2px dashed #d5d5d5;
}
-.drop {
- background-color: #ffb703;
- outline: 2px dashed #fb8500;
-}