New Folder design

1 files changed, 16 insertions, 14 deletions

diff --git a/extension/src/index.css b/extension/src/index.css
index ebaa37b..54e8ea1 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -31,6 +31,7 @@ body {
   display: flex;
   flex-direction: column;
   place-items: flex-start;
+  z-index: 4;
 }
 
 .radio-group {
@@ -44,33 +45,32 @@ body {
 }
 
 /* Folder */
-.folder {
+.folderBody {
   width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
+  border-radius: 5px;
   border-color: #393939;
   margin: 5px;
   padding: 10px;
-}
-
-.folder > div {
-  display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
+  /*position: fixed;*/
+  /*bottom: 0;*/
+  animation: slideDown 0.2s ease;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.folder > summary {
-  font-weight: bold;
-  font-size: 20px;
-  margin: 5px;
-  user-select: none
+@keyframes slideDown {
+  from { transform: translateY(-50%); opacity: 0 }
 }
 
-body > .folder {
+body > .folderBody {
   margin: 0;
   border-style: none;
+  position: relative;
 }
 
 /* Bookmark */
@@ -80,6 +80,7 @@ body > .folder {
   width: 125px;
   padding: 10px;
   margin: 5px;
+  user-select: none;
 }
 
 .bookmark > img {
@@ -112,6 +113,7 @@ a {
   position: absolute;
   top: 0;
   right: 0;
+  z-index: 2;
 }
 
 #settings-close:hover, #settings-button:hover {