shockrah/freechat
shockrah/freechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better scrollbar style that doesn't look like garbage

Browse Source
This commit is contained in:
shockrah 2021-01-18 17:43:26 -08:00
parent de46c2ff38
commit 95414e21a3
3 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
freechat-client/pages/index.html
View File

@ -41,35 +41,11 @@
</ul> </ul>
</nav> </nav>
<!-- Sample data so we know what things should look like --> <!-- Sample data so we know what things should look like -->
<div class="container" id="messages-container" style="max-width: 100%;"> <div class="container scroller" id="messages-container" style="max-width: 100%;">
<div class="channel-list-header"><h4>#Channel name here</h4></div> <div class="channel-list-header"><h4>#Channel name here</h4></div>
<div class="channel-list-header"><p>Channel description here</p></div> <div class="channel-list-header"><p>Channel description here</p></div>
<ul class="list-unstyled components" id="messages-list"> <ul class="list-unstyled components" id="messages-list">
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li> <li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
</ul> </ul>
<div class="container" id="send-container"> <div class="container" id="send-container">
<form class="form-inline"> <form class="form-inline">

12
freechat-client/sass/scroll.scss Normal file
View File

@ -0,0 +1,12 @@
@import 'general';
::-webkit-scrollbar {
background-color: $back-grey;
width: .8em
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb {
background: $text;
border-radius: 10px;
}

4
freechat-client/sass/style.scss
View File

@ -1,4 +1,5 @@
@import 'general'; @import 'general';
@import 'scroll';
body { body {
color: $text; color: $text;
@ -120,8 +121,7 @@ ul ul a {
padding-bottom: 50px; padding-bottom: 50px;
overflow-y: scroll; overflow-y: scroll;
min-height: 480; min-height: 480;
max-height: 1080px; max-height: 1005px; // 1080 - $send-container-height
//max-height: 100%;
} }
// Now the message box which must be pinned at the bottom // Now the message box which must be pinned at the bottom