material style

client/src/styles/app.css

@@ -1,5 +1,16 @@
- 
- form > fieldset > label {
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
+
+html, body {
+    margin: 0;
+}
+
+html {
+    background-color: #FAFAFA;
+    color: #212121;
+}
+
+form > fieldset > label {
     display: flex;
 }
 
@@ -7,20 +18,6 @@ form > fieldset {
     border: none;
 }
 
-li {
-    list-style: none;
-    font-size: 11px;
-}
-li.box:hover {  
-    cursor: move;  
-}
-li.item {
-    display: grid;
-    grid-template-columns: 1fr auto auto;
-    column-gap: 0.1em;
-    margin: 0.4em 0 0 0;
-    padding: 0;
-}
 h1, h2, h3, h4 {
     font-weight:normal;
     margin: 0;
@@ -36,16 +33,14 @@ button.box-function, button.item-function {
 button:hover {
     cursor: pointer;
 }
-.box {
-    box-sizing: content-box;
-    outline: 1px solid black;
-    box-shadow: 4px 4px black;
+.box-title {
+    font-size: 1.25rem;
+    line-height: 2rem;
 }
 .box-subtitle {
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    font-size: 12px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    opacity: 0.6;
     text-transform: lowercase;
 }
 ul.list-box {
@@ -55,14 +50,81 @@ ul.list-box {
     margin: 0;
     gap: 1em;
 }
-ul.list-box-item {
-    padding: 0 0 0 1em;
-    display: grid;
+
+.box {
+    height: min-content;
+    width: 344px;
+    padding: 16px;
+    background-color: white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e0e0e0;
+    box-shadow: 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 0px 0px rgba(0,0,0,.12);
+    list-style: none;
+
 }
-p {
-    margin: 0;
+.list-box-item {
+    margin: 1rem 0;
+    max-height: 200px;
+    overflow-y: scroll;
 }
-.drop-zone {
-    width: 100px;
+.list-box-item::-webkit-scrollbar {
+    width: 5px;
+}
+.list-box-item::-webkit-scrollbar-track {
+    background: #ddd;
+}
+.list-box-item::-webkit-scrollbar-thumb {
+    background: #666;
+}
+.item {
+    font-size: 0.75rem;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.75rem;
+    list-style: none;
+}
+
+.head-divider {
+    margin: 1rem 0;
+    width: 100%;
+    height: 1px;
+    background-color: #e0e0e0;
+}
+
+.item-menu {
+    font-size: 1rem;
+    margin-right: 0;
+    margin-left: auto;
+}
+.item-menu:hover {
+    cursor: pointer;
+}
+.item-menu-more {
+    position: absolute;
+    margin: 0 10px 0 0;
+    top: 2rem;
+    right: 0;
     height: 100px;
-}
+    width: 75px;
+    z-index: 1;
+    background-color: white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e0e0e0;
+    box-shadow: 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 0px 0px rgba(0,0,0,.12);
+
+}
+  .scroll1::-webkit-scrollbar-thumb {
+    background: #666; 
+  }