TeaWeb/shared/css/ts/client.scss

.channelTree {
    width: 100%; max-width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: center;
    outline: none;
}
.channelTree * {
    font-family: Arial;
    font-size: 12px;
    white-space: pre;
    line-height: 1;
}
.channelTree div {
    max-width: 100%;
    height: 16px;
    position: relative;
}

.channelTree .channel_type {
    margin-right: 4px;
}
.channelTree .icon_client_state {
    margin-right: 4px;
}
.channelTree .server_type {
    margin-right: 4px;
}

.channelTree .icons .icon_entry {
    margin-left: 2px;
}

.channelTree img.loading {width: 50px;height: 50px;-webkit-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.channelTree div.l {justify-content: flex-start; }
.channelTree div.c {justify-content: center;}
.channelTree div.r {justify-content: flex-end;}

.channelTree div.solidline{ background: url('../images/viewer/spacer_solidline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dashline{ background: url('../images/viewer/spacer_dashline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dashdotline{ background: url('../images/viewer/spacer_dashdotline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dashdotdotline{ background: url('../images/viewer/spacer_dashdotdotline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dotline{ background: url('../images/viewer/spacer_dotline.gif') repeat-x left center;margin: 0px; }

.channelTree div * {vertical-align: middle;display:inline-block;height: 16px;padding: 0px;}
.channelTree div img  {border: 0;}
.channelTree div > span {position: absolute; right: 0;}
.channelTree {
    .name, .group_prefix, .group_suffix, .away {
        vertical-align: middle;
        margin-top: 1px;
        height: 14px;
        display: inline;
    }

    .group_prefix {
        margin-right: 3px;
    }

    .group_suffix {
        margin-left: 3px;
    }
}
.channelTree .own_name {
    font-weight: bold;
    display: inline;
}
.channelTree .channel_name {
    display: flex;
    align-items: center;
}

.channelTree .channel_name_container {
    display: inline-flex;
    width: 100%;
    overflow-x: hidden;
}

.channelTree .country {width:16px;height:11px;}

.channelTree .siblings {
    position: absolute;
    margin-top: 16px;
    margin-bottom: -2px;
    display: grid;
    width: 100%;
    left: 16px;
}

.channelTree .channel {
    cursor: pointer;
    margin-top: 1px;
}

.channelTree .clients {
    position: absolute;
    margin-top: 16px;
    margin-bottom: -2px;
    display: grid;
    width: 100%;
    left: 16px;
}

.channelTree .client {
    cursor: pointer;
    margin-top: 1px;
    width: calc(100%);
}

.channelTree .client span > div {
    margin-left: 3px;
}

.channelTree .server {
    cursor: pointer;
    margin-top: 0px;
    width: calc(100%);
}

.channelTree .channelLine {
    position: absolute;
    width: calc(100% - 16px);
    display: flex;
    flex-direction: row;
    top:    0px;
    left:   16px;

    &.move-selected {
        border: 1px black solid;
    }
}


.channelTree .selected {
    background: #005cbf;
}

.clicon {width:16px;height:16px;background:url('../../img/ts/basic_icons.png') no-repeat;background-size: 16px 608px;}
.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}

/* Channel tree icons
.tree_line {background-position: 0 -560px}
.tree_mid {background-position: 0 -576px}
.tree_end {background-position: 0 -592px}

.badges {width:16px;height:16px;background-size: 16px !important;}
.badges.overwolf {background:url('../images/viewer/client_overwolf.png') no-repeat;}
*/

/* menu header via data attribute */
.data-title:before {
    content: attr(data-menutitle);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #DDD;
    padding: 2px;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
}
.data-title :first-child {
    margin-top: 50px;
}