added more styles to dragupload

kanhapise · Jul 29, 2024 · 7186c2f · 7186c2f
1 parent 173ba69
commit 7186c2f
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/Drag-Drop/style.css b/Drag-Drop/style.css
@@ -48,4 +48,59 @@ body section .container .dropArea {
   transition: 0.3s ease;
   transition-property: background-color, border;
   user-select: none;
+}
+body section .container .dropArea .contentHolder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 2rem;
+  color: #858a92;
+}
+body section .container .dropArea .contentHolder img {
+  width: 80px;
+}
+body section .container .dropArea .contentHolder p {
+  font-size: 1rem;
+  margin-bottom: 10px;
+}
+body section .container .dropArea .contentHolder span {
+  font-size: 1rem;
+  color: #a0a5ad;
+}
+body section .container .dropArea .contentHolder button {
+  border: none;
+  outline: none;
+  background-color: #468bf5;
+  color: #fff;
+  padding: 0.45rem 1.2rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-top: 10px;
+}
+body section .container .dropArea .contentHolder input {
+  visibility: hidden;
+  position: absolute;
+  bottom: 0%;
+}
+body section .container .dropArea.content-over {
+  border: 2px solid #c2d9f9;
+  background-color: #c2d9f952;
+}
+body section .container .uploadedFileCont {
+  width: 100%;
+  margin-top: 1rem;
+}
+body section .container .uploadedFileCont .uploadedFile {
+  display: grid;
+  grid-template-columns: auto 5%;
+  align-items: center;
+  gap: 2px;
+  padding: 0.5rem 1rem;
+  background-color: rgba(82, 179, 171, 0.1);
+  border-radius: 0.4rem;
+  user-select: none;
+  margin: 10px 0;
 }