Style modal close button (fix #12)

components/ProjectModal.tsx

@@ -61,7 +61,10 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
         <a href="javascript:void(0);" onClick={() => setVisible(false)}>
             <div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
         </a>
-        <div ref={containerRef} className={`${styles.modalContainer} asciidoc`}>
+        <div className={styles.modalContainer}>
+            <div className={`${styles.modalText} asciidoc`} ref={containerRef}>
+                
+            </div>
         </div>
     </div>;
 };

styles/ProjectModal.module.css

@@ -20,18 +20,21 @@
     position: relative;
 }
 
+.modalText {
+    max-width: 45em;
+    margin: 0 auto;
+}
+
 .modalClose {
     float: right;
     position: relative;
-    background: #555;
+    background: #272b30;
     border-radius: 50%;
     width: 2em;
     height: 2em;
     font-family: sans-serif;
-    margin-bottom: -20px;
+    margin-bottom: 10px;
     z-index: 100;
-    /*text-align: center;*/
-    /*padding: auto 0;*/
 }
 
 .modalCloseAlign {
@@ -43,4 +46,27 @@
     display: block;
     color: #fff;
     text-decoration: none;
-}
+}
+
+/* Firefox */
+.modalContainer {
+    scrollbar-width: auto;
+    scrollbar-color: var(--repl-color, #188a18) #272b30;
+}
+
+/* Chrome, Edge, and Safari */
+.modalContainer::-webkit-scrollbar {
+    width: 16px;
+}
+
+.modalContainer::-webkit-scrollbar-track {
+    background: #272b30;
+    border-bottom-right-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.modalContainer::-webkit-scrollbar-thumb {
+    background-color: var(--repl-color, #188a18);
+    border-radius: 20px;
+    border: none;
+}