file manager css

app/frontend/static/assets/css/partial/crafty-filemanager.css

@@ -0,0 +1,134 @@
+/* Overlay (right click menu) */
+.overlay {
+  display: none;
+  flex-direction: column;
+  background-color: #9f9daf;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
+  padding: 10px 0;
+  z-index: 10000;
+  overflow: scroll;
+}
+
+.overlay::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.overlay {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+/* Position the content inside the overlay */
+.overlay-content {
+  display: flex;
+  flex-direction: column;
+  background-color: #9f9daf;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
+  padding: 10px 0;
+}
+
+/* The navigation links inside the overlay */
+.overlay a {
+  font: inherit;
+  border: 0;
+  padding: 10px 30px 10px 15px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-decoration: unset;
+  color: #000;
+  font-weight: 500;
+  transition: 0.5s linear;
+  -webkit-transition: 0.5s linear;
+  -moz-transition: 0.5s linear;
+  -ms-transition: 0.5s linear;
+  -o-transition: 0.5s linear;
+}
+
+/* When you mouse over the navigation links, change their color */
+.overlay a:hover,
+.overlay a:focus {
+  background: grey;
+  color: #4b00ff;
+}
+
+/* Position the close button (top right corner) */
+.overlay .closebtn .closebtn:hover {
+  background-color: red;
+  color: red;
+  z-index: 10000;
+}
+
+/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
+@media screen and (max-height: 450px) {
+  .overlay a {
+    font-size: 20px;
+  }
+
+  .overlay .closebtn {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+
+.tree-file:hover {
+  cursor: pointer;
+}
+
+/* Remove default bullets */
+.tree-view,
+.tree-nested {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  margin-left: 10px;
+}
+
+/* Style the items */
+.tree-item,
+.files-tree-title {
+  cursor: pointer;
+  user-select: none;
+  /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.tree-caret .fa-folder {
+  display: inline-block;
+}
+
+.tree-caret .fa-folder-open {
+  display: none;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.tree-caret-down .fa-folder {
+  display: none;
+}
+
+.tree-caret-down .fa-folder-open {
+  display: inline-block;
+}
+
+/* Hide the nested list */
+.tree-nested {
+  display: none;
+}
+
+html,
+body,
+body > .container-scroller {
+  overflow: initial;
+}
+
+.editorManager {
+  top: 63px;
+  position: sticky;
+}