370 lines
No EOL
9.5 KiB
SCSS
370 lines
No EOL
9.5 KiB
SCSS
@import "properties";
|
|
@import "mixin";
|
|
|
|
.channel-tree-container {
|
|
height: 100%;
|
|
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
|
|
@include chat-scrollbar-vertical();
|
|
}
|
|
|
|
/* the channel tree */
|
|
.channel-tree {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
width: 100%;
|
|
|
|
display: -ms-flex;
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
* {
|
|
font-family: sans-serif;
|
|
font-size: 12px;
|
|
white-space: pre;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tree-entry {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
/* margin-left: 16px; */
|
|
min-height: 16px;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
&.server, > .container-channel, &.client {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
|
|
&:hover {
|
|
background-color: $channel_tree_entry_hovered;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: $channel_tree_entry_selected;
|
|
.channel-name {
|
|
color: whitesmoke;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.server {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
position: relative;
|
|
|
|
cursor: pointer;
|
|
margin-left: 0;
|
|
|
|
.server_type {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.name {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
align-self: center;
|
|
color: $channel_tree_entry_text_color;
|
|
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.icon_property {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
&.channel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.container-channel {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
width: 100%;
|
|
min-height: 16px;
|
|
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
.channel-type {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.container-channel-name {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
justify-content: left;
|
|
|
|
max-width: 100%; /* important for the repetitive channel name! */
|
|
overflow-x: hidden;
|
|
height: 16px;
|
|
|
|
&.align-right {
|
|
justify-content: right;
|
|
}
|
|
|
|
&.align-center, &.align-repetitive {
|
|
justify-content: center;
|
|
}
|
|
|
|
.channel-name {
|
|
align-self: center;
|
|
color: $channel_tree_entry_text_color;
|
|
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&.align-repetitive {
|
|
.channel-name {
|
|
text-overflow: clip;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&.move-selected {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.show-channel-normal-only {
|
|
display: none;
|
|
|
|
&.channel-normal {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.icon_no_sound {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.container-clients {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
&.client {
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
> div {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.client-name {
|
|
line-height: 16px;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
|
|
padding-right: .25em;
|
|
color: $channel_tree_entry_text_color;
|
|
|
|
&.client-name-own {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.client-away-message {
|
|
color: $channel_tree_entry_text_color;
|
|
}
|
|
|
|
.container-icons {
|
|
margin-right: 0; /* override from previous thing */
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
padding-right: 5px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
.container-icons-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.container-group-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
&:focus-within {
|
|
.container-icons {
|
|
background-color: $channel_tree_entry_selected;
|
|
padding-left: 5px;
|
|
z-index: 1001; /* show before client name */
|
|
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
.client-name {
|
|
&:focus {
|
|
position: absolute;
|
|
color: black;
|
|
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
|
|
z-index: 1000;
|
|
|
|
margin-right: -10px;
|
|
margin-left: 18px;
|
|
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.channel .container-channel, &.client, &.server {
|
|
.marker-text-unread {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
width: 1px;
|
|
background-color: #a814147F;
|
|
|
|
opacity: 1;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
width: 24px;
|
|
|
|
background: -moz-linear-gradient(left, rgba(168,20,20,.18) 0%, rgba(168,20,20,0) 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(left, rgba(168,20,20,.18) 0%,rgba(168,20,20,0) 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to right, rgba(168,20,20,.18) 0%,rgba(168,20,20,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
}
|
|
|
|
&.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
@include transition(opacity $button_hover_animation_time);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* all icons related to basic_icons */
|
|
.clicon {
|
|
width:16px;
|
|
height:16px;
|
|
background:url('../../img/ts/basic_icons.png') no-repeat;
|
|
background-size: 16px 608px;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.host {background-position: 0 -448px}
|
|
|
|
.server_open {background-position: 0 -352px}
|
|
.server_full {background-position: 0 -128px}
|
|
.server_pass {background-position: 0 -432px}
|
|
|
|
/* Server group icon */
|
|
.group_0 {background-position: 0 -464px}
|
|
.group_100 {background-position: 0 -16px}
|
|
.group_200 {background-position: 0 -304px}
|
|
.group_300 {background-position: 0 -80px}
|
|
.group_400 {background-position: 0 -528px}
|
|
.group_500 {background-position: 0 -416px}
|
|
.group_600 {background-position: 0 -272px}
|
|
|
|
.group_server{background-position: 0 -496px}
|
|
.group_channel {background-position: 0 -400px}
|
|
|
|
/* Channel icons */
|
|
.channel_open {background-position: 0 -64px}
|
|
.channel_pass {background-position: 0 -112px}
|
|
.channel_full {background-position: 0 -256px}
|
|
.channel_flag_music {background-position: 0 -32px}
|
|
.channel_flag_default {background-position: 0 -48px}
|
|
.channel_flag_moderated {background-position: 0 -192px}
|
|
.channel_flag_password {background-position: 0 -480px}
|
|
|
|
/* Client icons */
|
|
.client_mic_muted {background-position: 0 -96px}
|
|
.client_talker {background-position: 0 -144px}
|
|
.client_idle {background-position: 0 -160px}
|
|
.client_talk {background-position: 0 -208px}
|
|
.client_snd_muted {background-position: 0 -176px}
|
|
.client_query {background-position: 0 -224px}
|
|
.client_talker_request {background-position: 0 -240px}
|
|
.client_snd_disabled {background-position: 0 -320px}
|
|
.client_priority {background-position: 0 -336px}
|
|
.client_away {background-position: 0 -368px}
|
|
.client_cc {background-position: 0 -384px}
|
|
.client_cc_talk {background-position: 0 -544px}
|
|
.client_cc_idle {background-position: 0 -288px}
|
|
.client_mic_disabled {background-position: 0 -512px} |