Merge pull request #75 from maxpoulin64/badge-fade
Fade long channel names in sidebar
This commit is contained in:
commit
1e8ca51d47
@ -277,7 +277,7 @@ button,
|
||||
#sidebar .chan-placeholder {
|
||||
display: block;
|
||||
margin: 1px -10px;
|
||||
padding: 6px 10px 8px;
|
||||
padding: 6px 10px 8px 36px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
transition: color .2s;
|
||||
@ -309,6 +309,12 @@ button,
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#sidebar .chan:before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#chat .title:before {
|
||||
margin-top: 17px;
|
||||
}
|
||||
@ -330,22 +336,49 @@ button,
|
||||
|
||||
#sidebar .chan:hover .badge {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#sidebar .chan:hover .close {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#sidebar .chan:hover .name {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
#sidebar .chan .name {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#sidebar .chan .name:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: linear-gradient(to right, rgba(69, 81, 100, 0) 0%, rgba(69, 81, 100, 1) 100%);
|
||||
content: " ";
|
||||
}
|
||||
|
||||
#sidebar .badge {
|
||||
background: rgba(255, 255, 255, .06);
|
||||
border-radius: 3px;
|
||||
color: #afb6c0;
|
||||
font-size: 10px;
|
||||
margin-top: 1px;
|
||||
margin-right: -5px;
|
||||
margin-left: 5px;
|
||||
padding: 3px 6px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
transition: all .2s;
|
||||
float: right;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
#sidebar .badge.highlight {
|
||||
@ -362,6 +395,7 @@ button,
|
||||
margin-right: 5px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
@ -2,6 +2,6 @@
|
||||
<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
|
||||
<span class="badge" data-count="{{unread}}">{{#if unread}}{{unread}}{{/if}}</span>
|
||||
<span class="close"></span>
|
||||
<span class="name">{{name}}</span>
|
||||
<span class="name" title="{{name}}">{{name}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
Loading…
Reference in New Issue
Block a user