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

Basic channel button css

Browse Source
This commit is contained in:
shockrah 2021-02-12 18:11:20 -08:00
parent 6904e8eb26
commit 8fb0fdbeed
3 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,14 +30,9 @@
</nav> </nav>
<div class="wrapper" id="content-container"> <div class="wrapper" id="content-container">
<nav id="channels-container"> <nav>
<div class="channels-list-header"><h3>server name here</h3></div> <div class="channels-list-header"><h3>server name here</h3></div>
<ul class="list-unstyled components"> <ul class="list-unstyled components" id="channels-list">
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
</ul> </ul>
</nav> </nav>
<!-- Sample data so we know what things should look like --> <!-- Sample data so we know what things should look like -->

42
freechat-client/sass/channels.scss Normal file
View File

@ -0,0 +1,42 @@
@import 'general';
.channel {
color: $text;
background-color: $top-grey;
text-decoration: none;
}
.channel a {
color: $text;
background-color: $top-grey;
text-decoration: none;
}
.channel a:focus {
background-color: $bar-grey !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
}
.channel a:hover {
background-color: $bar-grey !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
}
.channel a:active {
background-color: $bar-grey !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
}
.channel a:visited {
background-color: $bar-grey !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
}
.channel-name {
color: $text;
}
.channel-name:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5)
}

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

@ -1,6 +1,7 @@
@import 'general'; @import 'general';
@import 'scroll'; @import 'scroll';
@import 'join-modal'; @import 'join-modal';
@import 'channels';
body { body {
color: $text; color: $text;
@ -91,10 +92,6 @@ ul ul a {
color: $text; color: $text;
} }
.message:hover {
background-color: $top-grey;
}
.message a:hover { .message a:hover {
background-color: $bar-grey; background-color: $bar-grey;
color: $text; color: $text;