Version 0.2.0 - Ajout de l'explorateur de fichier, des ViewWindow, Des DroppableMenu

public/stylesheets/style.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+@import url('https://fonts.cdnfonts.com/css/gunship');
 
 body {
   padding: 2%;
@@ -20,10 +21,10 @@ html {
 
   background-color: transparent;
   outline: none;
-  border-radius: 0.5vw;
+  border-radius: 10px;
   border: 1px solid currentColor;
   color: currentColor;
-  padding: 0.5vw;
+  padding: 10px;
   transition: 0.2s;
   cursor: pointer;
 }
@@ -125,7 +126,7 @@ code {
 
   background-color: #3D3B3C;
   padding: 0.3vw;
-  border-radius: 0.5vw;
+  border-radius: 10px;
 }
 
 p {
@@ -207,6 +208,11 @@ a {
 
 /* Logo */
 
+.logo {
+
+  user-select: none;
+}
+
 @media (max-width: 640px) {
 
   .logo {
@@ -262,36 +268,39 @@ a {
 
   width: 500px;
   height: 400px;
-  border-radius: 0.5vw;
+  border-radius: 10px;
   display: flex;
   padding: 2%;
   flex-direction: column;
   justify-content: space-between;
   background-color: #605e5863;
+  backdrop-filter: blur(10px);
 }
 
 .panel-box {
 
   width: 900px;
   height: 500px;
-  border-radius: 0.5vw;
+  border-radius: 10px;
   display: flex;
   padding: 2%;
   flex-direction: column;
   justify-content: space-between;
   background-color: #605e5863;
   gap: 50px;
+  backdrop-filter: blur(10px);
 }
 
 .subpanel-box {
 
   width: 900px;
   height: 50px;
-  border-radius: 0.5vw;
+  border-radius: 10px;
   padding: 2%;
   display: flex;
   justify-content: space-between;
   background-color: #605e5863;
+  backdrop-filter: blur(10px);
 }
 
 .subpanel-image {
@@ -421,17 +430,47 @@ a {
   font-size: 72px;
 }
 
+.view-popup {
+  position: absolute;
+  background-color: #3D3B3C;
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 2%;
+  border-radius: 10px;
+}
+
+.view-popup-bar {
+
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+}
+
+.blur {
+
+  filter: blur(10px);
+}
 
 /*ViewWindow*/
 
 .view-window {
 
   position: absolute;
+  display: flex;
+  flex-direction: column;
   z-index: 1;
   background-color: #605e58c1;
   backdrop-filter: blur(10px);
-  border-radius: 0.5vw;
+  border-radius: 10px;
   -webkit-user-drag: auto;
+  
 }
 
 .view-window-header {
@@ -441,11 +480,20 @@ a {
   align-items: center;
   padding: 10px;
   background-color: rgba(33, 32, 33, 0.753);
-  border-top-right-radius: 0.5vw;
-  border-top-left-radius: 0.5vw;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
   user-select: none;
 }
 
+.view-window-content {
+
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  
+}
+
 
 /* Files Explorer */
 
@@ -459,7 +507,7 @@ a {
 .fx-root-input {
   background-color: #323031;
   border: solid 1px #323031;
-  border-radius: 0.5vw;
+  border-radius: 10px;
   padding: 1%;
   color: white;
   outline:0px;
@@ -472,7 +520,7 @@ a {
   flex-direction: column;
   overflow-y: auto ;
   height: 450px;
-  gap: 20px
+
 }
 
 .fx-element {
@@ -517,13 +565,30 @@ a {
 
 .fx-bar-actions {
 
-    width: 30%;
+    width: 33%;
     display: flex;
     flex-direction: row;
-    gap: 10px;
+    justify-content: end;
+    gap: 10px; 
 
 }
 
+.fx-editor-content {
+
+  background-color: transparent;
+  color: white;
+  border: none;
+  padding: 15px;
+  height: 100%;
+
+}
+
+.fx-editor-content:focus {
+
+  outline: none;
+} 
+
+
 /* ===== Scrollbar CSS ===== */
   /* Firefox */
   * {
@@ -553,7 +618,7 @@ a {
   display: flex;
   flex-direction: column;
   width: 150px;
-  border-radius: 0.5vw;
+  border-radius: 10px;
   z-index: 3;
   height: auto;
 }