Update index.css

CanvasTool/static/index.css

@@ -12,25 +12,23 @@ html{
     top: 0%;
     left: 0%;
 }
-#selector{
-    width: 256px;
-    height: 256px;
-    background-color: transparent;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border: 2px solid green;
-    transform: translate(-50%,-50%);
-}
-img{
-    position: fixed;
-    top: 2%;
-    left: 25%;
-}
 #moveimg{
     position: absolute;
     top: 50%;
-    left: 10%;
+    left: 5%;
+    width: 10%;
+    height: 50%;
+    background-color: gray;
+    transform: translate(-50%,-50%);
+    font-weight: bolder;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    cursor: pointer;
+}
+#resetimg{
+    position: absolute;
+    top: 50%;
+    left: 83%;
     width: 10%;
     height: 50%;
     background-color: gray;
@@ -43,7 +41,7 @@ img{
 #eraseon{
     position: absolute;
     top: 50%;
-    left: 20%;
+    left: 15%;
     width: 10%;
     height: 50%;
     background-color: gray;
@@ -53,17 +51,24 @@ img{
     text-align: center;
     cursor: pointer;
 }
-#label{
+#drawon{
     position: absolute;
-    left: 30%;
-    top: 30%;
+    top: 50%;
+    left: 25%;
+    width: 10%;
+    height: 50%;
+    background-color: gray;
     transform: translate(-50%,-50%);
+    font-weight: bolder;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    cursor: pointer;
 }
+
 #selectorsize{
     position: absolute;
-    left: 40%;
-    top: 50%;
-    transform: translate(-50%,-50%);
+    left: 39%;
+    top: 45%;
 }
 
 body{
@@ -117,3 +122,117 @@ body{
 #eraseon:hover{
     background-color: rgb(20, 20, 20);
 }
+#drawon:hover{
+    background-color: rgb(20, 20, 20);
+}
+
+input{
+    background-color: rgb(20, 20, 20);
+    border-radius: 5%;
+    outline: none;
+    caret-color: transparent;
+    color: white;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    border: 1px solid transparent;
+    text-align: center;
+}
+p{
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+#erasersize{
+    position: absolute;
+    left: 61%;
+    top: 45%;
+}
+#ff{
+    position: absolute;
+    left: 49%;
+    top: 45%;
+}
+#clr{
+    position: absolute;
+    left: 30%;
+    top: 40%;
+}
+#inprange{
+    position: absolute;
+    left: 30%;
+    top: 73%;
+    color: grey;
+}
+#source{
+    position: fixed;
+    left: 0px;
+    top: 0px;
+
+}
+#selector{
+    width: 256px;
+    height: 256px;
+    background-color: transparent;
+    left: 0px;
+    top: 0px;
+    position: fixed;
+    border: 2px solid green;
+    transform: translate(-50%,-50%);
+}
+label{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+
+
+}
+#openimg{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+label p{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-15%);
+    font-size: 500%;
+    text-align: center;
+    
+    
+}
+
+#uploadcontainer{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0%;
+    opacity: 0;
+    background: linear-gradient(to bottom,black,rgb(20,20,20),black);
+    left: 0%;
+    
+}
+#sourceimg{
+    display: none;
+}
+
+#lockbox{
+    position: absolute;
+    top: 50%;
+    left: 73%;
+    width: 10%;
+    height: 50%;
+    background-color: gray;
+    transform: translate(-50%,-50%);
+    font-weight: bolder;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    cursor: pointer;
+}
+
+#lockbox:hover{
+    background-color: rgb(20, 20, 20);
+}