🐸 adds crud for libraries and deletion of elements

frontend/resources/styles/main.scss

@@ -66,6 +66,7 @@
 @import 'main/partials/loader';
 @import 'main/partials/context-menu';
 @import 'main/partials/debug-icons-preview';
+@import 'main/partials/editable-label';
 
 //#################################################
 // Resources

frontend/resources/styles/main/layouts/library-page.scss

@@ -20,6 +20,19 @@
     }
 }
 
+.library-content-empty {
+    display: flex;
+    flex-direction: column;
+}
+
+.library-content-empty-text {
+    color: #7C7C7C;
+    border: 1px dashed #AFB2BF;
+    text-align: center;
+    padding: 5rem;
+    margin: 2rem;
+}
+
 .library-page #main-bar {
     position: relative;
 }
@@ -79,16 +92,13 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
-    & a {
-        color: $color-black;
-    }
+    color: $color-black;
 
     &:hover {
         background-color: $color-primary-lighter;
     }
 
-    &.current a {
+    &.current {
         font-weight: bold;
     }
 }
@@ -145,6 +155,12 @@
     }
 }
 
+.library-top-menu-actions-delete {
+    display: flex;
+    justify-content: center;
+    flex-direction: column
+}
+
 .library-page-cards-container {
     align-content: flex-start;
     display: flex;
@@ -335,3 +351,4 @@
     font-size: 24px;
     font-weight: normal;
 }
+

frontend/resources/styles/main/partials/editable-label.scss

@@ -0,0 +1,30 @@
+.editable-label {
+    display: flex;
+
+    &.is-hidden {
+        display: none;
+    }
+}
+
+.editable-label-input {
+    border: 0;
+    height: 30px;
+    padding: 5px;
+    margin: 0;
+    width: 100%;
+    background-color: $color-white;
+}
+
+.editable-label-close {
+    background-color: $color-white;
+    cursor: pointer;
+    padding: 3px 5px;
+
+    & svg {
+        fill: $color-gray;
+        height: 15px;
+        transform: rotate(45deg) translateY(7px);
+        width: 15px;
+        margin: 0;
+    }
+}