add form-box css

src/assets/css/style.css

@@ -14,8 +14,10 @@
   --bg-post: #C5E1A5;
   --border-post: #9dd162;
   --bg-post-highlight: #9dd162;
-  --border-form: #FFB300;
-  --bg-form: #FCE4EC;
+  --border-form-box: #FFB300;
+  --bg-form-box: #FCE4EC;
+  --border-profile-form-box: #9dd162;
+  --bg-profile-form-box: lightblue;
   --bg-error-popup: red;
   --border-error-popup: red;
   --bg-id: DodgerBlue;
@@ -128,9 +130,47 @@ nav a:hover, nav button:hover,
   z-index: 2;
 }
 
+.form-box {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  height: fit-content;
+  padding: 5px;
+  background-color: var(--bg-form-box);
+  border: 2px solid var(--border-form-box);
+}
+
+.form-box > h2 {
+  margin-top: 1vh;
+  margin-bottom: 2vh;
+  margin-left: 1vh;
+}
+
+.form-box-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 5vh;
+}
+
+.profile-page, .account-page, .register-page, .login-page, .about-page, .user-page {
+  display: flex;
+  flex-direction: column;
+  padding-left: 15vh;
+
+  .form-box {
+    background-color: var(--bg-profile-form-box);
+    border: 2px solid var(--border-profile-form-box);
+  }
+}
+
+.register-page, .login-page {
+  padding-top: 15vh;
+}
+
 .new-thread-view {
-  margin-inline: 1vw;
-  margin-block: 3vw;
+  display: flex;
+  justify-content: center;
+  padding-top: 15vh;
 }
 
 /* css trick to have a dropdown menu on click */
@@ -359,13 +399,11 @@ nav a:hover, nav button:hover,
 }
 
 .reply-popup {
-  display: table;
+  display: grid;
+  grid-template-rows: 1fr 14fr;
   position: fixed;
   right: 1vw;
   top: 40vh;
-  background-color: var(--bg-form);
-  border: 2px solid var(--border-form);
-  padding: 5px;
   z-index: 3;
 }
 .reply-popup-dragzone {