diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx index 555c86f..7f3902b 100644 --- a/components/ProjectModal.tsx +++ b/components/ProjectModal.tsx @@ -61,7 +61,10 @@ Last updated: ${lastUpdate} | setVisible(false)}>
X
-
+
+
+ +
; }; diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css index b0efe6e..cba7710 100644 --- a/styles/ProjectModal.module.css +++ b/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; -} \ No newline at end of file +} + +/* 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; +}