feat: prettier scrollbars

1 files changed, 28 insertions, 21 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 7cc0dec..1aa37d9 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -3,6 +3,17 @@ img {
   display: block;
 }
 
+::-webkit-scrollbar {
+  width: 8px;
+}
+.messages-buffer::-webkit-scrollbar {
+  width: 10px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background: black;
+}
+
 body {
   max-width: 100vw;
   max-height: 100vh;
@@ -301,7 +312,7 @@ background: #00000060;
 .chats-list-chats,
 .roster-list-roster {
   flex-grow: 1;
-  overflow-y: scroll;
+  /* overflow-y: scroll; */
 }
 
 .open-chat-views {
@@ -343,29 +354,22 @@ background: #00000060;
   max-height: auto;
 }
 
-.new-message-composer textarea {
-  font-family: 'K2D';
+.new-message-composer .overlay-scroll {
+  max-height: min(32em, 50vh);
+  background-color: #dcdcdc;
   border: 2px solid black;
-  font-size: 16px;
-  padding: 8px;
-  /* width: auto; */
-  margin: 0;
-  height: auto;
-  /* resize: none; */
-  /* box-sizing: border-box; */
-  /* overflow: scroll; */
-  /* display: block; */
+}
+
+[contenteditable]:focus {
+    outline: 0px solid transparent;
 }
 
 .new-message-composer .text-box {
+  padding: 8px;
   white-space: pre-wrap;
   color: black;
-  background-color: #dcdcdc;
-  max-height: 32em;
-  overflow-y: auto;
+  /* overflow-y: auto; */
   font-size: 16px;
-  border: 2px solid black;
-  padding: 8px;
   margin: 0;
   height: fit-content;
 }
@@ -668,6 +672,7 @@ background: #00000060;
 }
 
 .settings-main {
+  height: calc(100% - 56px);
   display: flex;
   flex: 1 1 auto;
 }
@@ -826,6 +831,12 @@ hr {
   background: #00000060;
 }
 
+.add-contact-panel {
+  flex-shrink: 0;
+  max-height: calc(100% - 150px);
+  border-bottom: 2px solid black;
+}
+
 .new-chat-widget form {
   border: 2px solid black;
   padding: 4px;
@@ -836,10 +847,6 @@ hr {
   align-items: end;
 }
 
-.roster-add-contact {
-  border-bottom: 2px solid black;
-}
-
 .add-contact-menu h3 {
   margin: 1em 0 0.5em;
 }