.throbber_LoadingWrapper_9UFR8 {
display: flex;
flex-direction: column;
margin: 0; }
.throbber_LoadingWrapper_9UFR8.throbber_noString_2uxjb {
flex-direction: row; }
.throbber_LoadingWrapper_9UFR8 .throbber_Throbber_1Y6Da,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber path {
width: 100%;
height: 100%;
position: relative; }
.throbber_LoadingWrapper_9UFR8 .throbber_Throbber_1Y6Da {
align-self: center;
margin: 0px;
width: 100%;
height: 100%; }
.throbber_LoadingWrapper_9UFR8.throbber_throbber_small_21jHr .throbber_Throbber_1Y6Da {
width: 32px;
height: 32px; }
.throbber_LoadingWrapper_9UFR8.throbber_throbber_medium_1nACb .throbber_Throbber_1Y6Da {
width: 64px;
height: 64px; }
.throbber_LoadingWrapper_9UFR8.throbber_throbber_large_3hJM_ .throbber_Throbber_1Y6Da {
width: 92px;
height: 92px; }
.throbber_throbber_center_wrapper_1Dn-N {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.throbber_throbber_center_wrapper_1Dn-N .throbber_ThrobberText_3r290,
.throbber_LoadingWrapper_9UFR8 .throbber_ThrobberText_3r290 {
color: #3d85c8;
font-size: 12px;
text-transform: uppercase;
text-align: center;
flex: 1;
user-select: none;
margin-top: 8px;
font-weight: 500; }
.throbber_LoadingWrapper_9UFR8.throbber_throbber_medium_1nACb .throbber_ThrobberText_3r290 {
margin-top: 4px; }
.throbber_LoadingWrapper_9UFR8.throbber_throbber_small_21jHr .throbber_ThrobberText_3r290 {
margin-top: 2px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber.throbber_blur_3cMTP {
filter: blur(3px);
position: absolute;
left: 0;
top: 0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber.throbber_blur_3cMTP path {
stroke: #4375fd; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber path {
stroke: #67c1f5;
animation-name: throbber_ThrobberRoundLoop_3iwJU;
animation-duration: 0.7s;
stroke-linecap: butt;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity: 0.0; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundOuterOutline_1yAiX,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundOuter_3LNze {
stroke-dashoffset: 0;
stroke-dasharray: 116;
/*stroke-dasharray: 40 10 30 20 20 30 10 40;*/
stroke-width: 6px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundOuter_3LNze {
opacity: 1;
stroke: #3b8bb9;
stroke-width: 6px;
transform-origin: 50% 50%;
stroke-linecap: round; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundOuterOutline_1yAiX {
display: none; }
@keyframes throbber_ThrobberRoundLoop_3iwJU {
to {
stroke-dashoffset: -232.00; } }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundFill_3dnp9 {
animation-name: throbber_ThrobberFillLoop_1e442;
animation-duration: 3s;
animation-delay: -1.2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
opacity: 1;
stroke-width: 0; }
@keyframes throbber_ThrobberFillLoop_1e442 {
0% {
fill: rgba(103, 193, 245, 0); }
50% {
fill: rgba(103, 193, 245, 0.05); }
100% {
fill: rgba(103, 193, 245, 0); } }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_topCircle_3Zy4H .throbber_circlePulse_17mrs,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_topCircle_3Zy4H circle {
stroke: #67c1f5;
animation-name: throbber_ThrobberTopCircleLoop_RFW6m;
animation-duration: 3s;
animation-delay: -1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 67% 36%; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_topCircle_3Zy4H circle {
animation-name: throbber_ThrobberBottomCircleLoop_1AigW; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_bottomCircle_1XTvd path {
fill: #67c1f5;
stroke-width: 0;
animation-name: throbber_ThrobberBottomCircleLoop_1AigW;
animation-duration: 3s;
animation-delay: -0.6s;
animation-iteration-count: infinite;
animation-timing-function: linear; }
@keyframes throbber_ThrobberTopCircleLoop_RFW6m {
0% {
opacity: 0;
transform: scale(0.75);
stroke-width: 4px; }
20% {
opacity: 0.3; }
40% {
opacity: 0; }
50% {
opacity: 0;
transform: scale(5);
stroke-width: 0px; }
100% {
opacity: 0;
transform: scale(5);
stroke-width: 0px; } }
@keyframes throbber_ThrobberBottomCircleLoop_1AigW {
0% {
opacity: 0; }
40% {
opacity: 1; }
80% {
opacity: 0; }
100% {
opacity: 0; } }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber15_Ty6Px,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber14_T03GA,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber13_2YjHq,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber12_39ueX,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber11_ze_zC,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber10_jIdSr,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber09_3R4dR,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber08_2WJ-s,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber07_2UhCH,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber06_gkW0p,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber05_20j9w,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber04_3TMdv,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber03_3aNO_,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber02_1m8h_,
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber01_2h6Ph {
animation-name: throbber_ThrobberRoundLoopThickness_1YJDV;
animation-duration: 3s;
stroke-dasharray: 150 950; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber01_2h6Ph {
animation-delay: -0.0s;
opacity: 0.06;
stroke-width: 0.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber02_1m8h_ {
animation-delay: -0.1s;
opacity: 0.13;
stroke-width: 1.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber03_3aNO_ {
animation-delay: -0.2s;
opacity: 0.20;
stroke-width: 1.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber04_3TMdv {
animation-delay: -0.3s;
opacity: 0.26;
stroke-width: 2.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber05_20j9w {
animation-delay: -0.4s;
opacity: 0.33;
stroke-width: 2.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber06_gkW0p {
animation-delay: -0.5s;
opacity: 0.40;
stroke-width: 3.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber07_2UhCH {
animation-delay: -0.6s;
opacity: 0.46;
stroke-width: 3.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber08_2WJ-s {
animation-delay: -0.7s;
opacity: 0.53;
stroke-width: 4.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber09_3R4dR {
animation-delay: -0.8s;
opacity: 0.6;
stroke-width: 4.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber10_jIdSr {
animation-delay: -0.9s;
opacity: 0.66;
stroke-width: 5.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber11_ze_zC {
animation-delay: -1.0s;
opacity: 0.73;
stroke-width: 5.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber12_39ueX {
animation-delay: -1.1s;
opacity: 0.8;
stroke-width: 6.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber13_2YjHq {
animation-delay: -1.2s;
opacity: 0.86;
stroke-width: 6.5px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber14_T03GA {
animation-delay: -1.3s;
opacity: 0.93;
stroke-width: 7.0px; }
.throbber_LoadingWrapper_9UFR8 .SVGIcon_Throbber .throbber_roundThrobber15_Ty6Px {
animation-delay: -1.4s;
opacity: 1;
stroke-width: 7.5px; }
@keyframes throbber_ThrobberRoundLoopThickness_1YJDV {
0% { }
/*
10%
{
stroke-width: 4.5px;
}
20%
{
stroke-width: 2px;
}
30%
{
stroke-width: 4.5px;
}
40%
{
stroke-width: 2px;
}
50%
{
stroke-width: 4.5px;
}
60%
{
stroke-width: 9px;
}
70%
{
stroke-width: 4.5px;
}
80%
{
stroke-width: 9px;
}
90%
{
stroke-width: 9px;
}*/
100% {
stroke-dashoffset: -1100.00; } }
.SVGIcon_Button {
fill: #ffffff;
overflow: visible;
width: 100%;
height: 100%;
max-width: 320px;
max-height: 320px; }
.throbber_throbber_small_21jHr {
width: 36px;
height: 36px; }
.throbber_throbber_medium_1nACb {
width: 60px;
height: 60px; }
.throbber_throbber_large_3hJM_ {
width: 92px;
height: 92px; }
.throbber_throbber_xlarge_iO6_X {
width: 120px;
height: 120px; }
.contextmenu_ContextMenuMouseOverlay_3H7og {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1599; }
.contextmenu_ContextMenuFocusContainer_2thYU:focus {
outline: none; }
.contextmenu_contextMenu_3_a2Z {
position: absolute;
background: radial-gradient(ellipse farthest-corner at 50% 0%, #3c4047 0%, #3c4047 50%, #33363d 100%);
box-shadow: 0 10px 32px 0px #000000ab;
opacity: 1.0;
transition: opacity 200ms;
z-index: 1600;
user-select: none;
padding: 4px; }
.web_chat_frame .contextmenu_contextMenu_3_a2Z {
max-height: calc( 100% - 128px);
overflow-y: auto;
overflow-x: hidden; }
html.contextmenu_ContextMenuPopup_1exss .contextmenu_contextMenu_3_a2Z {
position: static;
box-shadow: none;
display: inline-block;
padding: 0; }
html.contextmenu_ContextMenuPopup_1exss .contextmenu_contextMenuContents_1yyTu {
padding: 4px; }
html.contextmenu_ContextMenuPopup_1exss .contextmenu_contextMenuItem_CBC-y {
min-width: fit-content; }
.contextmenu_contextMenuContents_1yyTu {
display: flex;
flex-direction: column;
padding: 0px;
font-size: 14px;
-webkit-app-region: no-drag; }
.contextmenu_contextMenu_3_a2Z:not(.visible) {
opacity: 0;
pointer-events: none; }
.contextmenu_contextMenuItem_CBC-y {
padding: 4px 6px;
line-height: 20px;
color: #9ca4a7;
border-top: 0.5px solid rgba(80, 87, 94, 0.5);
border-bottom: 0.5px solid rgba(80, 87, 94, 0);
cursor: default;
position: relative;
min-width: 120px; }
.contextmenu_contextMenuItem_CBC-y:first-child {
border-top: 0.5px solid rgba(80, 87, 94, 0); }
.contextmenu_contextMenuItem_CBC-y:hover, .contextmenu_contextMenuItem_CBC-y.contextmenu_active_3vYUp {
background: #5a6069;
color: #b8c5c9; }
.contextmenu_contextMenuItem_CBC-y.contextmenu_disabled_molnq {
background: none;
color: #6b7072;
cursor: default;
pointer-events: none; }
.contextmenu_contextMenuItem_CBC-y.contextmenu_disabled_molnq:hover {
background: none;
color: #6b7072;
cursor: default; }
.contextmenu_contextMenuItem_CBC-y.menuChecked {
color: #6dcff6; }
.contextmenu_contextMenuItem_CBC-y.menuChecked.contextMenuCheckMark {
display: block; }
.contextmenu_contextMenuItem_CBC-y .SVGIcon_Button {
height: 10px;
width: 10px;
margin-right: 4px; }
.contextmenu_contextMenuItem_CBC-y .SVGIcon_DownArrowContextMenu {
height: 14px;
width: 14px;
transform: rotateZ(-90deg);
position: absolute;
right: 2px;
top: 6px;
fill: #9ca4a7; }
.contextMenuCheckMark {
width: 4px;
height: 18px;
background-color: #6dcff6;
min-height: 1px;
display: inline-block;
position: absolute;
left: -4px;
margin-top: 0px;
display: none; }
.steamavatar_avatarHolder_1G7LI {
height: 36px;
display: flex;
margin: 0px 0px;
transform: scale(0.86, 0.86) translateX(0px);
transition-property: transform;
transition-duration: 0.34s;
transition-timing-function: cubic-bezier(0.42, 0, 0.19, 2.28);
flex-direction: row;
flex-shrink: 0; }
.steamavatar_avatarHolder_1G7LI.Large {
height: 84px; }
.steamavatar_avatarHolder_1G7LI.X-Large {
height: 92px; }
.ingame .steamavatar_avatarStatus_1Pwr6 {
background: linear-gradient(to bottom, #8cd61d 0%, #a1f410 30%, #a1f410 70%, #8cd61d 100%); }
.ingame .X-Large .steamavatar_avatarStatus_1Pwr6 {
background: #bff02b; }
.golden .steamavatar_avatarStatus_1Pwr6 {
background: linear-gradient(to bottom, #d5bf6a 0%, #ffe2a9 40%, #ba995c 52%, #ba995c 61%, #d5bf6a 85%); }
.watchingbroadcast .steamavatar_avatarStatus_1Pwr6 {
background: linear-gradient(to bottom, #9c8fd4 0%, #9c8fd4 30%, #9c8fd4 70%, #9c8fd4 100%); }
.online .steamavatar_avatarStatus_1Pwr6 {
background: linear-gradient(to bottom, #6dcff6 0%, #6dcff6 30%, #6dcff6 70%, #6dcff6 100%); }
.awayOrSnooze .steamavatar_avatarStatus_1Pwr6 {
-webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAQAAABKxSfDAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIUlEQVQI12P8/5+BgYGBgZGBgYGBiQEJoHAY/+OSQeEAAMCCAwlfJ3DmAAAAAElFTkSuQmCC") repeat-y;
-webkit-mask-size: 5px 5px;
mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAQAAABKxSfDAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIUlEQVQI12P8/5+BgYGBgZGBgYGBiQEJoHAY/+OSQeEAAMCCAwlfJ3DmAAAAAElFTkSuQmCC") repeat-y;
mask-size: 5px 5px;
opacity: .75; }
.steamavatar_avatarStatus_1Pwr6.right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 2px; }
.steamavatar_avatarStatus_1Pwr6.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px; }
.awayOrSnooze .steamavatar_avatarStatus_1Pwr6.bottom {
-webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAQAAABKxSfDAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIUlEQVQI12P8/5+BgYGBgZGBgYGBiQEJoHAY/+OSQeEAAMCCAwlfJ3DmAAAAAElFTkSuQmCC") repeat-x;
mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAQAAABKxSfDAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIUlEQVQI12P8/5+BgYGBgZGBgYGBiQEJoHAY/+OSQeEAAMCCAwlfJ3DmAAAAAElFTkSuQmCC") repeat-x; }
.awayOrSnooze .X-Large .steamavatar_avatarStatus_1Pwr6.bottom {
mask-size: 6px 6px;
opacity: 1.0; }
.steamavatar_avatar_f2laR {
border: 1px solid #383c43;
height: calc( 100% - 2px);
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.3);
transition: filter .24s ease-in-out; }
.steamavatar_friendavatar_2yzw2 {
display: block; }
.friendsnooze_SnoozeContainer_1OfTa {
position: relative;
overflow: hidden;
display: flex;
flex-direction: row-reverse;
margin-top: 2px;
margin-left: 4px;
flex-shrink: 0; }
.friendsnooze_SnoozeContainer_1OfTa .friendsnooze_SnoozeZ_29fyi {
font-size: 6px;
animation-name: friendsnooze_none_lZX-E;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; }
.friendsnooze_SnoozeContainer_1OfTa.friendsnooze_Medium_2NSIM .friendsnooze_SnoozeZ_29fyi {
font-size: 8px; }
.friendsnooze_SnoozeContainer_1OfTa.friendsnooze_Large_2QDqq .friendsnooze_SnoozeZ_29fyi {
font-size: 14px;
font-weight: 500;
text-shadow: -1px -1px 4px #000, 1px -1px 4px #000, -1px 1px 2px #000, 1px 1px 2px #000; }
.friendsnooze_SnoozeContainer_1OfTa.friendsnooze_Dim_10sPU .friendsnooze_SnoozeZ_29fyi {
filter: brightness(0.75); }
.friendsnooze_SnoozeContainer_1OfTa .friendsnooze_Z1_GU6T2 {
animation-delay: .0s;
margin-top: 0px;
z-index: 1; }
.friendsnooze_SnoozeContainer_1OfTa .friendsnooze_Z2_277XL {
animation-delay: .2s;
margin-top: 2px;
z-index: 2; }
.friendsnooze_SnoozeContainer_1OfTa .friendsnooze_Z3_1gXQi {
animation-delay: .4s;
margin-top: 4px;
z-index: 3; }
.friendsnooze_SnoozeContainer_1OfTa.online .friendsnooze_SnoozeZ_29fyi {
color: #4c91ac; }
.friendsnooze_SnoozeContainer_1OfTa.golden .friendsnooze_SnoozeZ_29fyi {
color: #d5bf6a; }
.friendsnooze_SnoozeContainer_1OfTa.watchingbroadcast .friendsnooze_SnoozeZ_29fyi {
color: #c9bdf7; }
.friendsnooze_SnoozeContainer_1OfTa.in-game .friendsnooze_SnoozeZ_29fyi {
color: #91c257; }
.friendsnooze_SnoozeContainer_1OfTa.online.friendsnooze_Dim_10sPU .friendsnooze_SnoozeZ_29fyi {
color: #6dcff6; }
.friendsnooze_SnoozeContainer_1OfTa.in-game.friendsnooze_Dim_10sPU .friendsnooze_SnoozeZ_29fyi {
color: #a1f410; }
.friendsnooze_SnoozeContainer_1OfTa.friendsnooze_animating_1pImE .friendsnooze_SnoozeZ_29fyi,
.friendsnooze_hoverParent_3SgRH:hover * .friendsnooze_SnoozeZ_29fyi {
animation-name: friendsnooze_Snoring_6q8Na; }
@keyframes friendsnooze_Snoring_6q8Na {
0% {
transform: translateY(0px); }
50% {
transform: translateY(-2px); }
100% {
transform: translateY(0px); } }
.personastatusicons_PersonaStatusIcon_2rP7f {
width: 16px;
height: 16px;
margin-top: -1px;
margin-left: 2px; }
.personastatusicons_PersonaStatusIcon_2rP7f.personastatusicons_MobilePhoneIcon_2ZlAW {
margin-top: -2x;
margin-left: -1px; }
.personastatusicons_PersonaStatusIcon_2rP7f.ingame .SVGIcon_VR path,
.personastatusicons_PersonaStatusIcon_2rP7f.ingame .SVGIcon_MobilePhone path,
.personastatusicons_PersonaStatusIcon_2rP7f.ingame .SVGIcon_BigPicture path {
fill: #80aa4d; }
.personastatusicons_PersonaStatusIcon_2rP7f.online .SVGIcon_VR path,
.personastatusicons_PersonaStatusIcon_2rP7f.online .SVGIcon_MobilePhone path,
.personastatusicons_PersonaStatusIcon_2rP7f.online .SVGIcon_BigPicture path {
fill: #4c91ac; }
.personanameandstatus_statusAndName_9U-hi {
display: flex;
margin-top: -2px; }
.personanameandstatus_blocked_138jh .personanameandstatus_richPresenceLabel_3Q6g1 {
color: rgba(195, 74, 72, 0.75); }
.personanameandstatus_playerName_1uxaf,
.personanameandstatus_playerNickname_3-32P {
flex: 1;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
font-size: 14px;
transition: text-overflow 0s linear; }
.personanameandstatus_playerName_1uxaf {
-webkit-mask: linear-gradient(to right, black calc( 100% - 6px), rgba(0, 0, 0, 0.15) 100%);
mask: linear-gradient(to right, black calc( 100% - 6px), rgba(0, 0, 0, 0.15) 100%);
flex: initial;
padding-right: 6px;
margin-right: -6px; }
.personanameandstatus_playerNickname_3-32P {
padding-left: 5px;
color: #666666; }
.personanameandstatus_playerNicknameBracket_1lu-g {
color: #999;
font-size: 18px;
display: inline-block;
margin-left: 1px;
opacity: 0.5;
line-height: 16px; }
.personanameandstatus_richPresenceContainer_21cNf {
display: flex;
flex-direction: column; }
.personanameandstatus_richPresenceLabel_3Q6g1 {
display: flex;
flex-direction: row;
line-height: 12px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 10px;
margin-top: -1px;
-webkit-mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0.15) 100%); }
.personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
line-height: 18px;
font-size: 12px; }
.personanameandstatus_DNDContainer_3h0SR {
width: 12px;
height: 12px;
margin-top: -3px;
margin-left: 3px; }
.personanameandstatus_partyBeaconJoin__ugTP {
font-weight: 800; }
/* Styles that change based on persona state */
.ingame .personanameandstatus_playerName_1uxaf {
color: #e3ffc2; }
.ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1,
.ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a,
.ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:hover,
.ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:active,
.ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:visited,
.ingame.personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
color: #91c257; }
.ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 12px; }
.VoiceChannelParticipants .ingame .personanameandstatus_playerName_1uxaf {
font-size: 11px;
margin-bottom: -2px;
margin-top: -2px; }
.VoiceChannelParticipants .ingame .personanameandstatus_twoLine_2wZNn .personanameandstatus_playerName_1uxaf {
font-size: 14px;
margin-top: 0px; }
.VoiceChannelParticipants .ingame .personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 10px;
margin-top: -6px;
margin-bottom: 3px; }
.VoiceChannelParticipants .ingame .personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 12px;
margin-top: 0px; }
.ingame.awayOrSnooze .personanameandstatus_richPresenceLabel_3Q6g1,
.ingame .personanameandstatus_richPresenceLabel_3Q6g1,
.ingame .personanameandstatus_richPresenceLabel_3Q6g1 a,
.ingame .personanameandstatus_richPresenceLabel_3Q6g1 a:hover,
.ingame .personanameandstatus_richPresenceLabel_3Q6g1 a:active,
.ingame .personanameandstatus_richPresenceLabel_3Q6g1 a:visited {
color: #62813b; }
.ingame .SVGIcon_DoNotDisturb circle,
.ingame .SVGIcon_DoNotDisturb line {
stroke: #cf7f67; }
.golden .personanameandstatus_playerName_1uxaf {
color: #e4ca63; }
.golden .personanameandstatus_richPresenceLabel_3Q6g1,
.golden .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a,
.golden .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:hover,
.golden .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:active,
.golden .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:visited {
color: #e4ca63; }
.watchingbroadcast .personanameandstatus_playerName_1uxaf {
color: #c9bdf7; }
.watchingbroadcast .personanameandstatus_richPresenceLabel_3Q6g1,
.watchingbroadcast .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a,
.watchingbroadcast .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:hover,
.watchingbroadcast .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:active,
.watchingbroadcast .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:visited {
color: #8277b1; }
.online .personanameandstatus_playerName_1uxaf {
color: #ccccd5;
color: #6dcff6; }
.online .personanameandstatus_richPresenceLabel_3Q6g1,
.online .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a,
.online .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:hover,
.online .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:active,
.online .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:visited {
color: #4c91ac; }
.online .SVGIcon_DoNotDisturb circle,
.online .SVGIcon_DoNotDisturb line {
stroke: #a0545a; }
.offline .personanameandstatus_playerName_1uxaf {
color: #7a7a7a; }
.offline .personanameandstatus_statusAndName_9U-hi {
filter: saturate(0); }
.offline .personanameandstatus_richPresenceLabel_3Q6g1,
.offline .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a,
.offline .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:hover,
.offline .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:active,
.offline .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 a:visited {
color: #555; }
.offline .SVGIcon_DoNotDisturb circle,
.offline .SVGIcon_DoNotDisturb line {
stroke: #cf7f67; }
.offline .personanameandstatus_DNDContainer_3h0SR {
display: none; }
/* Styles that change based on props */
.personanameandstatus_hidePersona_1-otV .ContextMenuButton {
transform: translateY(6px); }
.personanameandstatus_hidePersona_1-otV .personanameandstatus_statusAndName_9U-hi {
height: 100%; }
.personanameandstatus_hidePersona_1-otV .personanameandstatus_playerName_1uxaf {
margin-top: 8px;
line-height: 100%; }
.personanameandstatus_compactView_2PCWF.personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 10px;
margin-top: 1px; }
.personanameandstatus_compactView_2PCWF .personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 10px;
line-height: 11px; }
.personanameandstatus_compactView_2PCWF .ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 10px;
line-height: 14px; }
.personanameandstatus_compactView_2PCWF .speaking .personanameandstatus_playerName_1uxaf {
filter: brightness(1.5); }
.personanameandstatus_compactView_2PCWF .personanameandstatus_playerName_1uxaf,
.personanameandstatus_compactView_2PCWF .personanameandstatus_playerNickname_3-32P {
margin-bottom: -6px;
font-size: 12px; }
.personanameandstatus_compactView_2PCWF .personanameandstatus_noContextMenu_35VFv .personanameandstatus_playerName_1uxaf,
.personanameandstatus_compactView_2PCWF .personanameandstatus_noContextMenu_35VFv .personanameandstatus_playerNickname_3-32P {
margin-bottom: -2px; }
/* These are styles yanked out of friends.global.css that should probably be fixed up to be more moduly */
.currentUserContainer .personanameandstatus_playerName_1uxaf {
font-size: 15px;
font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif;
transition: color .94s ease-in-out;
text-shadow: 1px 1px 4px #000;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0; }
.currentUserContainer .personanameandstatus_statusAndName_9U-hi {
display: flex;
flex-direction: row;
margin-bottom: -4px;
margin-right: 10px;
-webkit-app-region: no-drag; }
.currentUserContainer .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 13px; }
.currentUserContainer .personanameandstatus_richPresenceLabel_3Q6g1 {
-webkit-app-region: no-drag; }
.currentUserContainer .personanameandstatus_richPresenceContainer_21cNf {
margin-top: 2px; }
.currentUserContainer .personanameandstatus_compactView_2PCWF .personanameandstatus_playerName_1uxaf {
font-size: 14px;
margin-bottom: 0px; }
.currentUserContainer .personanameandstatus_compactView_2PCWF .personanameandstatus_richPresenceLabel_3Q6g1 {
line-height: initial; }
.currentUserContainer .personanameandstatus_compactView_2PCWF .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 12px; }
.ChatTabs .personanameandstatus_compactView_2PCWF .personanameandstatus_playerName_1uxaf,
.ChatTabs .personanameandstatus_compactView_2PCWF .personanameandstatus_playerNickname_3-32P {
font-size: 12px;
margin-bottom: 0px;
text-overflow: clip; }
.ChatTabs .personanameandstatus_compactView_2PCWF .personanameandstatus_playerNickname_3-32P {
color: #a2a6ac; }
.ChatTabs .personanameandstatus_compactView_2PCWF .personanameandstatus_richPresenceLabel_3Q6g1 {
line-height: 11px;
font-size: 10px;
margin-top: -1px; }
.ChatTabs .personanameandstatus_compactView_2PCWF:not(.personanameandstatus_twoLine_2wZNn) .personanameandstatus_richPresenceLabel_3Q6g1:not(.personanameandstatus_gameName_qvibF) {
display: none; }
.ChatTabs .personanameandstatus_compactView_2PCWF .offline .personanameandstatus_statusAndName_9U-hi {
color: #cccccc; }
.ChatTabs .personanameandstatus_compactView_2PCWF .offline .personanameandstatus_richPresenceLabel_3Q6g1 {
color: #888; }
.titleBarContainer .currentUserContainer .personanameandstatus_richPresenceLabel_3Q6g1 {
margin-top: -1px;
margin-bottom: 1px;
font-size: 12px;
display: inline-block;
transition: color .94s ease-in-out;
text-shadow: 1px 1px 3px #000; }
.titleBarContainer .currentUserContainer .personanameandstatus_compactView_2PCWF .personanameandstatus_richPresenceLabel_3Q6g1 {
margin-top: -4px;
margin-bottom: -2px; }
.titleBarContainer .currentUserContainer .personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
margin-top: 0px; }
.titleBarContainer .currentUserContainer .personanameandstatus_compactView_2PCWF.personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
margin-top: -4px;
margin-bottom: 0px; }
.titleBarContainer .currentUserContainer .personanameandstatus_richPresenceLabel_3Q6g1:not(.personanameandstatus_gameName_qvibF) {
font-size: 10px;
margin-top: -1px;
margin-bottom: 1px; }
.titleBarContainer .currentUserContainer .ContextMenuButton {
margin-top: -4px;
margin-bottom: 4px; }
.singlewindow .currentUserContainer .personanameandstatus_statusAndName_9U-hi {
margin-right: 4px; }
.singlewindow .currentUserContainer .personanameandstatus_twoLine_2wZNn .personanameandstatus_statusAndName_9U-hi,
.singlewindow .currentUserContainer .personanameandstatus_twoLine_2wZNn {
margin-right: 10px; }
.needsUpdate .currentUserContainer .personanameandstatus_twoLine_2wZNn .personanameandstatus_statusAndName_9U-hi {
margin-right: 48px; }
.friendRequests .bright .moMutualFriends .personanameandstatus_playerName_1uxaf,
.friendRequests .personanameandstatus_playerName_1uxaf {
color: white;
transition: color .2s ease-in-out; }
.friendRequests .noMutualFriends .personanameandstatus_playerName_1uxaf {
color: #aaa;
transition: color .2s ease-in-out; }
.MemberListColumn .personanameandstatus_statusAndName_9U-hi .personanameandstatus_richPresenceLabel_3Q6g1,
.MemberListColumn .personanameandstatus_statusAndName_9U-hi .personanameandstatus_playerNickname_3-32P,
.MemberListColumn .personanameandstatus_statusAndName_9U-hi .personanameandstatus_playerName_1uxaf {
text-overflow: clip;
transition-delay: 0.4s; }
.MemberListColumn.MemberListViewCompact .personanameandstatus_statusAndName_9U-hi .personanameandstatus_richPresenceLabel_3Q6g1,
.MemberListColumn.MemberListViewCompact .personanameandstatus_statusAndName_9U-hi .personanameandstatus_playerNickname_3-32P,
.MemberListColumn.MemberListViewCompact .personanameandstatus_statusAndName_9U-hi .personanameandstatus_playerName_1uxaf {
text-overflow: clip;
transition-delay: 0s; }
.chatModalCover.inviteDrop .personanameandstatus_statusAndName_9U-hi {
width: 220px;
opacity: 1; }
.chatModalCover.inviteDrop .personanameandstatus_playerNickname_3-32P,
.chatModalCover.inviteDrop .personanameandstatus_playerName_1uxaf {
font-size: 24px;
text-align: center;
margin-left: auto;
margin-right: auto;
overflow: visible;
text-shadow: 0px 6px 6px #000, 0px 2px 12px #000;
line-height: normal; }
.chatModalCover.inviteDrop .personanameandstatus_richPresenceContainer_21cNf,
.chatModalCover.inviteDrop .personanameandstatus_SnoozeContainer_2xgNz,
.chatModalCover.inviteDrop .ContextMenuButton,
.chatModalCover.inviteDrop .personanameandstatus_ModalPosition_TopBar_1Y6m1 {
display: none; }
.groupMemberList .personanameandstatus_playerName_1uxaf,
.groupMemberList .personanameandstatus_playerNickname_3-32P {
font-size: 13px; }
.groupMemberList .ingame .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 10px;
margin-top: -3px;
margin-bottom: -3px; }
.groupMemberList .ingame.personanameandstatus_twoLine_2wZNn .personanameandstatus_gameName_qvibF.personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 12px;
margin-top: -1px; }
.groupMemberList .personanameandstatus_twoLine_2wZNn .personanameandstatus_richPresenceLabel_3Q6g1 {
font-size: 12px; }
.groupMemberList .personanameandstatus_richPresenceLabel_3Q6g1 {
line-height: 13px; }
.personanameandstatus_gameIsPrivateIcon_1cu1a {
width: 28px;
height: 20px;
margin-top: -3px;
margin-left: 0px;
display: inline-block; }
.personanameandstatus_gameIsPrivateIcon_1cu1a svg {
width: 24px;
height: 24px;
margin-bottom: -8px; }
.personanameandstatus_gameIsPrivateIcon_1cu1a svg line, .personanameandstatus_gameIsPrivateIcon_1cu1a svg path {
stroke: #6e8d50; }
.miniprofile_miniProfile_s5zcg {
width: fit-content;
margin: 11px;
box-shadow: 0 10px 32px 0px #000000ab; }
.miniprofile_miniProfileContent_25Sge {
width: 328px;
position: relative; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileHeader_3oBIW {
height: 62px;
z-index: 1;
padding: 16px;
background: none;
border: none; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K {
display: flex;
flex-direction: row; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K .miniprofile_playerContent_PV11V {
padding-left: 16px;
margin-bottom: 30px;
margin-top: auto; }
.miniprofile_miniProfileBackground_3gfFJ {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -3;
background: radial-gradient(ellipse farthest-corner at 20% 30%, #4c505b 0%, #34373f 50%, #282c32 100%); }
.miniprofile_miniProfileBackgroundBlur_G000o {
width: 380px;
height: 380px;
filter: blur(10px) saturate(2);
position: absolute;
left: -60px;
top: -60px;
opacity: 0.4;
-webkit-mask: radial-gradient(ellipse farthest-corner at 150px 150px, black 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 64%);
mask: radial-gradient(ellipse farthest-corner at 150px 150px, black 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 64%);
mix-blend-mode: screen; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBlocked_1fKEq,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileNotFriends_7gGbH {
position: absolute;
top: 4px;
right: 6px;
text-transform: uppercase;
font-size: 12px;
color: rgba(184, 156, 80, 0.75); }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBlocked_1fKEq {
color: rgba(195, 74, 72, 0.75); }
.miniprofile_miniProfileContent_25Sge.miniprofile_notFriends_nfBN5 .miniprofile_miniProfileBlocked_1fKEq {
top: 18px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_SnoozeContainer_2HCB2 {
position: absolute;
overflow: visible;
z-index: 3;
left: 4px;
top: 8px; }
.miniprofile_miniProfileHover_2P8wD .miniprofile_miniprofile_arrow_38UVn.miniprofile_left_qVPF2 {
border-right: 8px solid #41444e; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerAvatar_1dzWG {
width: 90px;
height: 92px;
position: relative;
margin: 0;
border: none;
padding: 0;
display: flex;
flex-direction: column;
box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.65);
transform: scale(1); }
.miniprofile_miniProfileContent_25Sge .miniprofile_avatarStatus_23H45.miniprofile_miniProfileAvatarStatus_1VgK8 {
width: 100%;
height: 2px;
z-index: 2; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.online .miniprofile_avatarStatus_23H45.miniprofile_miniProfileAvatarStatus_1VgK8 {
background: #6dcff6; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.golden .miniprofile_avatarStatus_23H45.miniprofile_miniProfileAvatarStatus_1VgK8 {
background: #e4ca63; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.in-game .miniprofile_avatarStatus_23H45.miniprofile_miniProfileAvatarStatus_1VgK8 {
background: #bff02b; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.watchingbroadcast .miniprofile_avatarStatus_23H45.miniprofile_miniProfileAvatarStatus_1VgK8 {
background: #9c8fd4; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerContent_PV11V .miniprofile_personaName_W3QjS {
text-shadow: 1px 1px 4px #000;
font-size: 20px;
letter-spacing: 1px;
font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif;
display: flex; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.in-game .miniprofile_personaName_W3QjS:not(.miniprofile_hasNickname_dgG-l) .miniprofile_personaNameLabel_390p4,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.in-game .miniprofile_personaName_W3QjS.miniprofile_nickName_2E8Iz .miniprofile_personaNameLabel_390p4 {
color: #e3ffc2; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.golden .miniprofile_personaName_W3QjS:not(.miniprofile_hasNickname_dgG-l) .miniprofile_personaNameLabel_390p4,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.golden .miniprofile_personaName_W3QjS.miniprofile_nickName_2E8Iz .miniprofile_personaNameLabel_390p4 {
color: #e4ca63; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.watchingbroadcast .miniprofile_personaName_W3QjS:not(.miniprofile_hasNickname_dgG-l) .miniprofile_personaNameLabel_390p4,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.watchingbroadcast .miniprofile_personaName_W3QjS.miniprofile_nickName_2E8Iz .miniprofile_personaNameLabel_390p4 {
color: #c9bdf7; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerContent_PV11V .miniprofile_persona_1Z3Ey .miniprofile_personaName_W3QjS.miniprofile_hasNickname_dgG-l {
color: #888;
font-size: 14px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerContent_PV11V .miniprofile_persona_1Z3Ey .miniprofile_personaName_W3QjS.miniprofile_hasNickname_dgG-l .miniprofile_personaNameLabel_390p4 {
color: #bbb;
max-width: 154px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #999;
max-width: 154px;
text-shadow: 1px 1px 4px #000;
font-size: 14px;
letter-spacing: 1px;
font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerContent_PV11V .miniprofile_personaName_W3QjS.miniprofile_nickName_2E8Iz .miniprofile_personaNameLabel_390p4,
.miniprofile_miniProfileContent_25Sge .miniprofile_playerContent_PV11V .miniprofile_personaName_W3QjS:not(.miniprofile_hasNickname_dgG-l) .miniprofile_personaNameLabel_390p4 {
max-width: 160px;
text-overflow: ellipsis;
max-height: 48px;
overflow: hidden;
white-space: nowrap;
word-wrap: break-word; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.online .miniprofile_nickname_1W3dU,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.online .miniprofile_persona_1Z3Ey {
color: #6dcff6; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.offline .miniprofile_nickname_1W3dU,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.offline .miniprofile_persona_1Z3Ey {
color: #bbb; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerNicknameBracket_1bkKo {
color: #bbb; }
.miniprofile_miniProfileContent_25Sge .miniprofile_playerAvatar_1dzWG img {
width: 90px;
height: 90px;
border: none;
margin: 0;
padding: 0;
z-index: 1;
background: none;
border-top-left-radius: 2px;
border-top-right-radius: 2px; }
.miniprofile_miniProfileContent_25Sge.miniprofile_notInOrWatchingGame_3AIC2 .miniprofile_miniProfileBottom_3Agb6,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH {
background: linear-gradient(to bottom, rgba(24, 26, 30, 0.7) 5%, rgba(24, 26, 30, 0.4) 95%); }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH {
z-index: -1;
border: none;
min-height: 64px;
position: relative; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_gameLogo_2B0di {
width: 90px;
height: 34px;
top: 18px;
left: 16px;
position: absolute; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_ingame_3H2mq {
color: #90ba3c; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_ingame_3H2mq .miniprofile_richPresence_1rud4,
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_ingame_3H2mq .miniprofile_gameState_2Va3_ {
font-size: 12px;
color: #62813b; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_golden_3cUbZ .miniprofile_gameState_2Va3_ {
color: #e4ca63; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_golden_3cUbZ .miniprofile_richPresence_1rud4 {
color: #e4ca63; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_watchingbroadcast_24vwG .miniprofile_gameState_2Va3_ {
padding-top: 6px;
font-size: 12px;
color: #8277b1; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_watchingbroadcast_24vwG .miniprofile_richPresence_1rud4 {
font-size: 14px;
color: #c9bdf7; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_watchingbroadcast_24vwG .miniprofile_watchingbroadcastThumbnail_3EoM- {
width: 200px;
height: 110px;
margin-top: 8px;
position: relative; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileGameContainer_2FyZH .miniprofile_gameContent_3x24t {
padding: 8px 8px 8px 122px;
font-size: 14px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBottom_3Agb6 {
padding: 16px 16px 8px 16px; }
.miniprofile_miniProfileContent_25Sge.miniprofile_notInOrWatchingGame_3AIC2 .miniprofile_miniProfileBottom_3Agb6 {
padding-top: 26px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileFeaturedContainer_3ljT4 {
position: relative;
height: 34px;
display: flex;
padding-left: 16px;
margin-bottom: 8px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileFeaturedContainer_3ljT4 .miniprofile_favoriteBadgeIcon_icnrU {
width: 34px;
height: 34px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileFeaturedContainer_3ljT4 .miniprofile_badgeIcon_2TBf0 {
width: 100%;
height: 100%; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBottom_3Agb6 .miniprofile_featuredLabels_1dGw1 {
font-size: 14px;
overflow: hidden;
white-space: nowrap;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
margin-left: 12px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBottom_3Agb6 .friendPlayerLevel .miniprofile_friendPlayerLevelNum_2Ni_1 {
font-size: 14px;
color: #e5e5e5; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBottom_3Agb6 .miniprofile_featuredLabels_1dGw1 .miniprofile_featuredTitle_2_2RA {
overflow: hidden;
text-overflow: ellipsis;
color: #b1b1b1; }
.miniprofile_mutualFriends_36Vl4 {
background-color: #000a; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfileBottom_3Agb6 .miniprofile_featuredLabels_1dGw1 .miniprofile_featuredSubTitle_2p8kJ {
color: #6b6a6a;
font-size: 12px; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.golden .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #e4ca63; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.watchingbroadcast .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #c9bdf7; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.in-game .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #91c257; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.offline .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
font-size: 10px;
letter-spacing: 0; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.golden .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #e4ca63; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.watchingbroadcast .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #8277b1; }
.miniprofile_miniProfileContent_25Sge .miniprofile_miniProfilePlayer_3cN6K.online .miniprofile_playerContent_PV11V .miniprofile_awayStatusLabel_2UzRy {
color: #4c91ac; }
/* These are all also in community's shared_global.css but we don't necessarily have that file available where we're using
this component. */
.friendPlayerLevel {
display: inline-block;
font-size: 16px;
border-radius: 50%;
border: solid white 2px;
height: 28px;
width: 28px;
line-height: 26px;
text-align: center;
cursor: default;
margin-top: 2px; }
.friendPlayerLevel.lvl_0 {
border-color: #9b9b9b; }
.friendPlayerLevel.lvl_10 {
border-color: #c02942; }
.friendPlayerLevel.lvl_20 {
border-color: #d95b43; }
.friendPlayerLevel.lvl_30 {
border-color: #fecc23; }
.friendPlayerLevel.lvl_40 {
border-color: #467a3c; }
.friendPlayerLevel.lvl_50 {
border-color: #4e8ddb; }
.friendPlayerLevel.lvl_60 {
border-color: #7652c9; }
.friendPlayerLevel.lvl_70 {
border-color: #c252c9; }
.friendPlayerLevel.lvl_80 {
border-color: #542437; }
.friendPlayerLevel.lvl_90 {
border-color: #997c52; }
.friendPlayerLevel.lvl_100, .friendPlayerLevel.lvl_200,
.friendPlayerLevel.lvl_300, .friendPlayerLevel.lvl_400,
.friendPlayerLevel.lvl_500, .friendPlayerLevel.lvl_600,
.friendPlayerLevel.lvl_700, .friendPlayerLevel.lvl_800,
.friendPlayerLevel.lvl_900, .friendPlayerLevel.lvl_1000,
.friendPlayerLevel.lvl_1100, .friendPlayerLevel.lvl_1200,
.friendPlayerLevel.lvl_1300, .friendPlayerLevel.lvl_1400,
.friendPlayerLevel.lvl_1500, .friendPlayerLevel.lvl_1600,
.friendPlayerLevel.lvl_1700, .friendPlayerLevel.lvl_1800,
.friendPlayerLevel.lvl_1900, .friendPlayerLevel.lvl_2000,
.friendPlayerLevel.lvl_2100, .friendPlayerLevel.lvl_2200,
.friendPlayerLevel.lvl_2300, .friendPlayerLevel.lvl_2400,
.friendPlayerLevel.lvl_2500, .friendPlayerLevel.lvl_2600,
.friendPlayerLevel.lvl_2700, .friendPlayerLevel.lvl_2800,
.friendPlayerLevel.lvl_2900, .friendPlayerLevel.lvl_3000,
.friendPlayerLevel.lvl_3100, .friendPlayerLevel.lvl_3200,
.friendPlayerLevel.lvl_3300, .friendPlayerLevel.lvl_3400,
.friendPlayerLevel.lvl_3500, .friendPlayerLevel.lvl_3600,
.friendPlayerLevel.lvl_3700, .friendPlayerLevel.lvl_3800,
.friendPlayerLevel.lvl_3900, .friendPlayerLevel.lvl_4000,
.friendPlayerLevel.lvl_4100, .friendPlayerLevel.lvl_4200,
.friendPlayerLevel.lvl_4300, .friendPlayerLevel.lvl_4400,
.friendPlayerLevel.lvl_4500, .friendPlayerLevel.lvl_4600,
.friendPlayerLevel.lvl_4700, .friendPlayerLevel.lvl_4800,
.friendPlayerLevel.lvl_4900, .friendPlayerLevel.lvl_5000 {
border: none;
border-radius: 0;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 14px;
height: 32px;
width: 32px;
line-height: 32px;
text-shadow: 1px 1px #1a1a1a; }
.friendPlayerLevel.lvl_100 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_hexagons.png"); }
.friendPlayerLevel.lvl_200 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_shields.png"); }
.friendPlayerLevel.lvl_300 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_books.png"); }
.friendPlayerLevel.lvl_400 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_chevrons.png"); }
.friendPlayerLevel.lvl_500 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_circle2.png"); }
.friendPlayerLevel.lvl_600 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_angle.png"); }
.friendPlayerLevel.lvl_700 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_flag.png"); }
.friendPlayerLevel.lvl_800 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_wings.png"); }
.friendPlayerLevel.lvl_900 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_arrows.png"); }
.friendPlayerLevel.lvl_1000 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_crystals.png"); }
.friendPlayerLevel.lvl_1100 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_space.png"); }
.friendPlayerLevel.lvl_1200 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_waterelement.png"); }
.friendPlayerLevel.lvl_1300 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_fireelement.png"); }
.friendPlayerLevel.lvl_1400 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_earthelement.png"); }
.friendPlayerLevel.lvl_1500 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_airelement_1-2.png"); }
.friendPlayerLevel.lvl_1600 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_airelement_3-4.png"); }
.friendPlayerLevel.lvl_1700 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_airelement_5-6.png"); }
.friendPlayerLevel.lvl_1800 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_airelement_7-8.png"); }
.friendPlayerLevel.lvl_1900 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_airelement_9-10.png"); }
.friendPlayerLevel.lvl_2000 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_geo_1-2.png?v=2"); }
.friendPlayerLevel.lvl_2100 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_geo_3-4.png?v=2"); }
.friendPlayerLevel.lvl_2200 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_geo_5-6.png?v=2"); }
.friendPlayerLevel.lvl_2300 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_geo_7-8.png?v=2"); }
.friendPlayerLevel.lvl_2400 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_geo_9-10.png?v=2"); }
.friendPlayerLevel.lvl_2500 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_mandala_1-2.png?v=2"); }
.friendPlayerLevel.lvl_2600 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_mandala_3-4.png?v=2"); }
.friendPlayerLevel.lvl_2700 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_mandala_5-6.png?v=2"); }
.friendPlayerLevel.lvl_2800 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_mandala_7-8.png?v=2"); }
.friendPlayerLevel.lvl_2900 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_mandala_9-10.png?v=2"); }
.friendPlayerLevel.lvl_3000 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_spiro_1-2.png?v=2"); }
.friendPlayerLevel.lvl_3100 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_spiro_3-4.png?v=2"); }
.friendPlayerLevel.lvl_3200 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_spiro_5-6.png?v=2"); }
.friendPlayerLevel.lvl_3300 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_spiro_7-8.png?v=2"); }
.friendPlayerLevel.lvl_3400 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_spiro_9-10.png?v=2"); }
.friendPlayerLevel.lvl_3500 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_patterns_1-2.png?v=2"); }
.friendPlayerLevel.lvl_3600 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_patterns_3-4.png?v=2"); }
.friendPlayerLevel.lvl_3700 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_patterns_5-6.png?v=2"); }
.friendPlayerLevel.lvl_3800 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_patterns_7-8.png?v=2"); }
.friendPlayerLevel.lvl_3900 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_patterns_9-10.png?v=2"); }
.friendPlayerLevel.lvl_4000 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_shapes_1.png?v=2"); }
.friendPlayerLevel.lvl_4100 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_shapes_2.png?v=2"); }
.friendPlayerLevel.lvl_4200 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_shapes_3.png?v=2"); }
.friendPlayerLevel.lvl_4300 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_shapes_4.png?v=2"); }
.friendPlayerLevel.lvl_4400 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_shapes_5.png?v=2"); }
.friendPlayerLevel.lvl_4500 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_grunge_1.png?v=2"); }
.friendPlayerLevel.lvl_4600 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_grunge_2.png?v=2"); }
.friendPlayerLevel.lvl_4700 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_grunge_3.png?v=2"); }
.friendPlayerLevel.lvl_4800 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_grunge_4.png?v=2"); }
.friendPlayerLevel.lvl_4900 {
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/community/levels_grunge_5.png?v=2"); }
.friendPlayerLevel.lvl_plus_10 {
background-position: 0 -32px; }
.friendPlayerLevel.lvl_plus_20 {
background-position: 0 -64px; }
.friendPlayerLevel.lvl_plus_30 {
background-position: 0 -96px; }
.friendPlayerLevel.lvl_plus_40 {
background-position: 0 -128px; }
.friendPlayerLevel.lvl_plus_50 {
background-position: 0 -160px; }
.friendPlayerLevel.lvl_plus_60 {
background-position: 0 -192px; }
.friendPlayerLevel.lvl_plus_70 {
background-position: 0 -224px; }
.friendPlayerLevel.lvl_plus_80 {
background-position: 0 -256px; }
.friendPlayerLevel.lvl_plus_90 {
background-position: 0 -288px; }
.hoverposition_HoverPosition_3gYNB {
position: fixed;
z-index: 100;
opacity: 0;
transition: opacity 0.25s;
pointer-events: none; }
.hoverposition_HoverPosition_3gYNB.hoverposition_ready_3d6MD {
opacity: 1; }
.hoverposition_HoverPosition_3gYNB.hoverposition_nospace_39IjN {
display: none; }
.mutualFriendsContainer {
padding: 12px 16px 4px 16px; }
.mutualFriend {
display: flex;
flex-direction: row;
margin-bottom: 12px; }
.mutualFriendAvatar {
width: 16px;
height: 16px;
margin-right: 8px;
margin-left: 24px; }
.mutualFriendTitle {
color: #4c91ac;
font-size: 14px;
margin-bottom: 12px; }
.mutualFriendLabel {
font-size: 14px;
color: #b1b1b1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 190px; }
.mutualFriendLabel.plusOthersLabel {
margin-left: 48px;
color: #5f5f5f; }
.miniProfileHoverInner .watchingbroadcastThumbnail {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%; }
.miniProfileHoverInner .watchingbroadcastThumbnail .crossfade {
width: 100%;
height: 100%; }
@charset "UTF-8";
.changeLog,
.betaFeedbackLabel {
margin-top: 4px;
margin-bottom: 4px;
margin-left: 8px;
font-size: 10px;
user-select: none;
cursor: default;
text-transform: uppercase;
white-space: nowrap; }
.changeLog:hover {
color: white;
cursor: pointer; }
.changeLog {
position: absolute;
width: 16px;
height: 16px;
right: 32px;
top: -1px; }
.singlewindow .changeLog {
right: 8px; }
.changeLog .SVGIcon_Scroll {
width: 20px;
height: 20px; }
.changeLog .SVGIcon_Scroll path {
fill: #888; }
.changeLog:hover .SVGIcon_Scroll path {
fill: #bbb; }
.changeLog.showViolator .SVGIcon_Scroll path {
fill: #ddd; }
.changeLog.showViolator:hover .SVGIcon_Scroll path {
fill: #fff; }
.changeLog .changeLogViolator {
background-color: #e64a35;
color: white;
border-radius: 50%;
position: absolute;
width: 14px;
height: 14px;
right: 8px;
top: 6px;
text-align: center;
font-size: 10px; }
.changeLog:hover .changeLogViolator {
background-color: #f58374; }
.DialogContent.changeLogPage {
max-height: 680px; }
.changeLogDetails {
width: calc( 100% - 60px);
height: 100%;
background-color: #0005;
box-shadow: inset 2px 2px 18px #00000075;
overflow: scroll scroll;
padding: 16px;
padding-left: 32px;
padding-top: 32px; }
.changeLogPage .changeLogDate {
font-size: 12px;
margin-bottom: 8px;
color: #777; }
.changeLogPage .changeLogTitle {
color: white;
font-size: 16px; }
.changeLogPage .changeLogDescription {
font-size: 14px;
padding: 0 16px;
margin-bottom: 24px;
position: relative; }
.changeLogPage .changeLogItemSubHeader {
font-weight: bold;
margin-bottom: 8px;
margin-left: -8px; }
.changeLogPage .changeLogExtra {
font-size: 14px;
margin-bottom: 14px; }
.changeLogPage .changeLogItem {
clear: left;
line-height: 16px;
margin-bottom: 12px;
padding-left: 10px;
user-select: text; }
.changeLogPage .changeLogItem:before {
position: absolute;
left: 18px;
content: "\2022";
margin-right: 4px;
color: #669abd; }
.betaFeedbackAnchor {
color: rgba(0, 217, 255, 0.5);
text-decoration: underline; }
.betaFeedbackAnchor:hover {
color: #00d9ff; }
.singlewindow .title-area .betaFeedbackLabel {
display: none; }
.BroadcastView {
width: 100%;
height: 100%;
background-color: #000;
display: flex;
flex-direction: column; }
.broadcastHeader {
height: 96px;
background-color: #393947;
border-bottom: 1px solid black; }
.broadcastMainView {
display: flex;
justify-content: center;
flex-grow: 1; }
.leftContainer {
display: flex;
flex: 1 0;
align-items: center;
flex-direction: column; }
.rightContainer {
min-width: 320px;
/*flex: 1 0;*/
display: flex;
flex-direction: column;
border-left: 1px solid black; }
.broadcastChatContainer {
background-color: #393947;
flex: 1;
width: 100%; }
.videoFooter {
display: none; }
.videoContainer .videoBlur {
width: 100%;
height: 100%;
background-color: #000;
opacity: .5; }
.videoControls {
z-index: 31;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
opacity: 1;
transition: all .3s ease-in-out;
transition-duration: .3s;
user-select: none;
pointer-events: none; }
.videoContainer.HidePlayerControls .videoControls,
.videoContainer.HidePlayerControls .STV_BroadcastClose {
opacity: 0;
bottom: -24px;
transition-duration: .3s;
pointer-events: none; }
.videoContainer:hover.HidePlayerControls .videoControls,
.videoContainer:hover.HidePlayerControls .STV_BroadcastClose {
transition-duration: .8s; }
.videoControls .videoControlsBottom {
margin-top: auto;
margin-bottom: 0;
padding-bottom: 8px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(29, 30, 35, 0) 100%);
pointer-events: all; }
.STV_BroadcastClose {
position: absolute;
right: 0;
top: 0;
width: 24px;
height: 24px;
padding: 6px;
margin: 10px;
background-color: #0002;
border-radius: 50%;
cursor: pointer;
opacity: .75;
z-index: 55; }
.ChatRoomGroup_Main_Content.chatHidden .STV_BroadcastClose {
margin-right: 40px; }
.STV_BroadcastClose:hover {
background-color: #000a;
opacity: 1; }
.STV_ReplayBanner {
position: absolute;
top: 6px;
right: 4px;
border-radius: 3px;
padding: 0px 8px;
z-index: 46;
color: black;
font-size: 16px;
line-height: 20px;
font-weight: bold;
white-space: nowrap;
background-image: url("../../images/webui/textures/rebroadcast.png");
box-shadow: 0 0 10px black; }
.videoContainer.fullscreenVideo .STV_ReplayBanner {
font-size: 1.5vh;
line-height: 2vh; }
.videoContainer.HidePlayerControls video {
cursor: none; }
.BroadcastVideoWatchState,
.BroadcastVideoUserInputNeeded {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
cursor: default;
z-index: 45; }
.BroadcastVideoWatchState_Text {
text-align: center;
margin: 0px 10%; }
.BroadcastVideoUserInputNeeded {
cursor: pointer; }
.BroadcastVideoUserInputNeeded:hover {
color: white; }
.BroadcastVideoUserInputNeeded .SVGIcon_Play {
width: 64px;
height: 64px;
margin-bottom: 4px;
padding: 8px;
border-radius: 50%;
border: 1px solid #fff1; }
.BroadcastVideoUserInputNeeded .SVGIcon_Play path {
fill: #fff4;
stroke: white;
stroke-width: 6px;
stroke-dasharray: 0 576;
stroke-linecap: butt;
transition: all .12s ease-in-out;
transform: translateX(20px); }
.BroadcastVideoUserInputNeeded:hover .SVGIcon_Play path {
stroke-dasharray: 512 0;
fill: #fffc; }
.videoTimelineMain {
width: calc( 100% - 8%);
margin-left: 4%;
margin-top: 48px;
position: relative; }
.videoTimelineMain .STV_timelineContainer {
padding-top: 0px;
padding-bottom: 6px; }
.videoTimelineMain .STV_timelineContainer:focus {
outline: none; }
.videoTimelineMain ._DialogInputContainer {
padding: 0;
margin: 0;
margin-bottom: 16px; }
.DialogSlider_SliderContainer {
height: 22px;
padding-top: 6px;
cursor: pointer; }
.videoTimelineMain .DialogSlider_Slider {
border: none;
height: 6px;
margin-top: 4px;
margin-bottom: 4px;
border-radius: 2px;
background-color: #405358;
box-shadow: 0px 1px 8px 2px black, 1px 2px 28px black; }
.videoTimelineMain .STV_timelineGhostValue,
.videoTimelineMain .STV_timelineValue,
.videoTimelineMain .STV_timelineNoVideo {
border-radius: 2px;
background: #368fa7;
background: linear-gradient(to right, rgba(54, 143, 167, 0.45) 0px, rgba(54, 143, 167, 0.5) calc( 100% - 64px), #5dc3ff 100%);
position: absolute;
left: 0;
top: 0;
bottom: 0; }
.videoTimelineMain .STV_timelineValue {
-webkit-mask: url("../../images/webui/masks/dashed_mask.png") repeat-x;
-webkit-mask-size: 4px 15px;
mask: url("../../images/webui/masks/dashed_mask.png") repeat-x;
mask-size: 5px 5px; }
.videoTimelineMain .STV_timelineGhostValue {
background: linear-gradient(to right, #368fa7 0%, #5dc3ff calc( 100% - 4px), #dcf2ff calc( 100% - 1px), #dcf2ff 100%);
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
transition: width .2s linear; }
.videoTimelineMain .STV_timelineNoVideo {
background: #3a3e46;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
transition: width .2s linear;
background-image: url("../../images/webui/textures/novideo_bg.png");
background-size: 8px; }
.STV_timelineContainer.minimapActive .STV_timelineGhostValue {
transition: none; }
.STV_BroadcastSettings,
.videoControlsButtons {
display: flex;
justify-content: center;
align-items: center;
position: relative; }
.videoControlsButtons.LeftSpacer {
width: calc(50% - 85px);
flex-shrink: 1; }
.videoControlsButtons.PlayControls {
flex-shrink: 0;
flex-grow: 0; }
.videoControlsButtons.GoLive {
text-align: left;
justify-content: flex-start;
width: 110px;
flex-shrink: 0;
flex-grow: 0; }
.STV_BroadcastSettings {
justify-content: flex-end;
flex-grow: 1; }
.videoControlButton {
width: 32px;
height: 32px;
margin: 8px;
cursor: pointer;
position: relative;
transition: all .12s ease-in-out; }
.videoControlButton:hover {
filter: brightness(1.3); }
.STV_BroadcastSettings .videoControlButton {
width: 18px;
height: 18px; }
.STV_BroadcastSettings .videoControlButton .SVGIcon_Settings path {
fill: transparent;
stroke: white;
stroke: #7e7e7e;
stroke-width: 10px; }
.STV_BroadcastSettingsPanel {
padding: 8px;
text-align: right;
border: 1px solid #333e;
background: #000c;
position: absolute;
margin-top: -156px;
margin-left: -64px;
z-index: 7; }
.STV_BroadcastSettingsPanel.SubtitlesMenu {
overflow: hidden scroll;
padding-right: 0px; }
.STV_BroadcastContextMenuPanel {
padding: 8px;
text-align: center;
border: 1px solid #333e;
background: #000c;
position: absolute;
z-index: 44; }
.STV_BroadcastSettingsMenuItems {
background: #234e;
font-size: 12px; }
.STV_BroadcastSettingsMenuItems .contextMenuItem {
cursor: pointer;
padding: 2px 12px; }
.STV_BroadcastSettingsMenuItems .contextMenuItem:hover {
color: white;
background-color: #3d5b79; }
.STV_BroadcastSettingsMenuItems .contextMenuItem.menuChecked {
font-weight: bold;
position: relative; }
.STV_BroadcastSettingsMenuItems .menuChecked .contextMenuCheckMark {
right: 4px;
top: 9px;
left: initial;
height: 4px;
width: 4px;
border-radius: 50%; }
.settingsMenuSeparator {
width: calc(100% - 8px);
height: 1px;
background-color: #536d84;
margin: 4px; }
.videoControlButton .SVGIcon_Button {
margin-left: 6px; }
.videoControlButton.controlFlip .SVGIcon_Button {
margin-left: -6px; }
.videoControlButton .SVGIcon_Button polyline,
.videoControlButton .SVGIcon_Button path {
fill: #7e7e7e;
transition: fill .12s ease-in-out; }
.videoControlButton:hover .SVGIcon_Button polyline,
.videoControlButton:hover .SVGIcon_Button path,
.BroadcastVolumeControl:hover .SVGIcon_Button polyline,
.BroadcastVolumeControl:hover .SVGIcon_Button path {
fill: #dadada; }
.STV_BroadcastSettings .videoControlButton.VideoSettingsOpen .SVGIcon_Button polyline,
.STV_BroadcastSettings .videoControlButton.VideoSettingsOpen .SVGIcon_Button path {
fill: #6dcff6;
stroke: #6dcff6; }
.videoControlButton.jumpToMarker .Arrow,
.videoControlButton.jumpToMarker .preArrowBox {
fill: #b29a7c; }
.videoControlButton.jumpToMarker:not(.noMarkersInDirection):hover .Arrow,
.videoControlButton.jumpToMarker:not(.noMarkersInDirection):hover .preArrowBox {
fill: #ffead1; }
.videoControlButton.jumpToMarker.noMarkersOrSegments {
visibility: hidden;
display: none; }
.videoControlButton.jumpToMarker.noMarkersInDirection {
cursor: default; }
.videoControlButton.jumpToMarker.noMarkersInDirection .Arrow,
.videoControlButton.jumpToMarker.noMarkersInDirection .preArrowBox {
fill: #66635e; }
.videoControlButton.videoControlGoLive {
display: flex;
width: fit-content; }
.videoControlButton.videoControlGoLive .SVGIcon_Button {
width: 32px; }
.videoControlButton.videoControlGoLive .Arrow {
fill: #216c91; }
.videoControlButton.videoControlGoLive:hover .Arrow {
fill: #3da5da; }
.videoControlButton.videoControlGoLive .jumpGoLive {
color: white;
font-size: 12px;
background-color: #216c91;
line-height: 15px;
height: 17.5px;
margin-top: 7px;
padding: 0 6px;
padding-top: 1px;
text-align: center;
border-radius: 2px;
margin-left: -6px;
transition: all .12s ease-in-out;
margin-right: -60px;
text-transform: uppercase; }
.videoControlButton.videoControlGoLive:hover .jumpGoLive {
background-color: #3da5da; }
.videoControlButton.videoControlGoLive.isLiveEdge:hover .jumpGoLive,
.videoControlButton.videoControlGoLive.isLiveEdge .jumpGoLive {
background-color: transparent;
color: #3da5da; }
.videoControlButton.videoControlGoLive.isLiveEdge svg {
display: none; }
.videoControlButton.videoControlGoLive.isLiveEdge {
cursor: default; }
.videoControlButton .jumpAheadValue {
position: absolute;
top: 7px;
left: 9px;
color: #141823;
font-size: 12px; }
.videoControlButton.buttonPlayPause {
width: 32px;
height: 32px;
border: 1px solid rgba(126, 126, 126, 0.5);
border-radius: 50%;
background-color: rgba(126, 126, 126, 0.1); }
.videoControlButton.buttonPlayPause .SVGIcon_Play {
width: 80%;
height: 80%;
margin-top: 3px;
margin-left: 5px; }
.videoControlButton.buttonPlayPause .SVGIcon_Pause {
width: 75%;
height: 75%;
margin-top: 4px;
margin-left: 4px; }
.videoControlButton.buttonPlayPause .SVGIcon_Button path {
fill: white; }
.videoControlButton.buttonPlayPause:hover {
border: 1px solid #7e7e7e;
background-color: #7e7e7e; }
.videoControlButton .SVGIcon_Button.SVGIcon_ClosedCaption {
width: 24px;
height: 24px;
margin-top: -2px;
margin-left: -2px; }
.videoControlButton .SVGIcon_Button.SVGIcon_ClosedCaption path.CCBox {
fill: transparent;
stroke: #7e7e7e; }
.videoControlButton.ClosedCaptionsActive .SVGIcon_Button.SVGIcon_ClosedCaption path.CCBox {
fill: #ccc;
stroke: #000; }
.videoControlButton.ClosedCaptionsActive .SVGIcon_Button.SVGIcon_ClosedCaption path.C1 {
fill: #000;
stroke: #7e7e7e; }
.BroadcastVolumeControl {
/* collapsed width */
width: 34px;
overflow: hidden;
cursor: pointer;
transition: width 0.3s ease-in-out; }
.BroadcastVolumeControl.ShowVolumeSlider {
/* width must match BroadcastVolumeControl_FixedLayout */
width: 99px; }
.BroadcastVolumeControl_FixedLayout {
/* width must match BroadcastVolumeControl */
width: 99px;
display: flex;
flex-direction: row;
align-items: center; }
.BroadcastVolumeControl .videoControlButton {
margin-right: 16px; }
.BroadcastVolumeControl.muted .SVGIcon_Volume .SoundWaves {
display: none; }
.BroadcastVolumeControl.muted .SVGIcon_Volume .SoundX line {
stroke: #7e7e7e;
stroke-width: 10px; }
.BroadcastVolumeControl.muted:hover .SVGIcon_Volume .SoundX line {
stroke: #dadada; }
.BroadcastVolumeControl .videoControlButton .SoundWavesHighest,
.BroadcastVolumeControl .videoControlButton .SoundWavesHigh,
.BroadcastVolumeControl .videoControlButton .SoundWavesMed {
transition: all .32s ease-in-out; }
.BroadcastVolumeControl .videoControlButton.HighVolume .SoundWavesHighest,
.BroadcastVolumeControl .videoControlButton.MedVolume .SoundWavesHighest,
.BroadcastVolumeControl .videoControlButton.MedVolume .SoundWavesHigh,
.BroadcastVolumeControl .videoControlButton.LowVolume .SoundWavesHighest,
.BroadcastVolumeControl .videoControlButton.LowVolume .SoundWavesHigh,
.BroadcastVolumeControl .videoControlButton.LowVolume .SoundWavesMed {
opacity: 0; }
.BroadcastVolumeSlider {
position: relative;
width: 50px;
height: 22px;
cursor: pointer; }
.BroadcastVolumeSlider_Track {
background-color: #7e7e7e;
position: absolute;
left: 0;
right: 0;
top: 10px;
bottom: 10px; }
.BroadcastVolumeSlider_Fill {
background-color: #dadada;
position: absolute;
left: 0;
top: 10px;
bottom: 10px; }
.BroadcastVolumeSlider_Thumb {
background-color: #dadada;
position: absolute;
border-radius: 50%;
width: 12px;
height: 12px;
left: 100%;
margin-left: -6px;
top: 50%;
margin-top: -6px; }
.STV_timelineGrabber_Wrapper {
position: absolute;
top: -25px;
bottom: -3px;
height: 54px;
width: 24px;
z-index: 6;
margin-left: -14px; }
.videoTimelineMain .STV_timelineGrabber {
/* shouldn't this be 50%? */
margin-left: -100%;
display: flex;
flex-direction: column;
align-items: center;
-webkit-app-region: no-drag;
transition: transform .0s ease-in-out;
pointer-events: none; }
.STV_timelineContainer .STV_timelineGrabber .rightarrow,
.STV_timelineContainer .STV_timelineGrabber .leftarrow {
transform: scaleX(0);
transform-origin: 50% 50%; }
.STV_timelineContainer:not(.grabberDown) .STV_timelineGrabber.grabberOffScreenRight .rightarrow,
.STV_timelineContainer:not(.grabberDown) .STV_timelineGrabber.grabberOffScreenLeft .leftarrow {
opacity: 1;
transform: scaleX(1);
fill: #5dc2fe;
stroke: black;
stroke-width: 10px;
transition: all .16s ease-in-out; }
.STV_timelineContainer:not(.grabberDown) .STV_timelineGrabber.grabberOffScreenRight .grabber,
.STV_timelineContainer:not(.grabberDown) .STV_timelineGrabber.grabberOffScreenLeft .grabber {
opacity: 1;
transform: scale(1);
fill: #5dc2fe;
stroke: black;
stroke-width: 10px;
transition: all .16s ease-in-out; }
.STV_timelineGrabberArrow {
width: 24px;
height: 44px;
margin-top: -6px;
margin-left: 26px;
pointer-events: all; }
.STV_timelineGrabberArrow .SVGIcon_STVTimelineGrabber .grabber {
transform: scale(2, 1.25);
transform-origin: 50% 50%;
fill: #5dc2fe;
stroke: black;
stroke-width: 6px;
vector-effect: non-scaling-stroke; }
.STV_timelineGrabberArrow:hover .SVGIcon_STVTimelineGrabber .grabber {
fill: white; }
.STV_timelineMinimapContainer .STV_timelineMapCurTime {
display: none;
width: 2px;
height: 6px;
background-color: white;
position: absolute;
top: 6px;
margin-left: -1px; }
.STV_timelineGrabberValue {
width: fit-content;
padding: 0 3px;
text-align: center;
white-space: nowrap;
background: linear-gradient(to bottom, #5dc3ff 0%, #5dc3ff 80%);
box-shadow: 0px -4px 5px 2px rgba(0, 0, 0, 0.2);
font-size: 10px;
color: white;
flex: 0 1;
z-index: 2;
margin-bottom: -2px;
border-radius: 2px;
opacity: 0;
transition: all .2s ease-in-out;
margin-left: 24px;
margin-top: -4px;
margin-bottom: 2px; }
.STV_timelineContainer.grabberDown .STV_timelineGrabberValue,
.STV_timelineGrabber:not(.grabberOffscreen):hover .STV_timelineGrabberValue {
opacity: 1; }
.timelineMarker {
width: 8px;
height: 32px;
z-index: 1;
position: absolute;
top: -8px;
left: 10%; }
.timelineMarkerIcon {
width: 24px;
height: 32px;
margin-left: -8px;
pointer-events: none; }
.timelineMarkerIcon .SVGIcon_STVTimelineMarker {
fill: #b29a7c;
stroke: black;
stroke-width: 6px; }
.timelineMarkerIcon .SVGIcon_STVTimelineMarker .pointer {
fill: #886b48;
transform: scale(0.6) translateY(26px);
transform-origin: 50% 50%;
transition: all .16s ease-in-out; }
.timelineMarker:hover .timelineMarkerIcon .SVGIcon_STVTimelineMarker .pointer {
transform: scale(1) translateY(0px); }
.timelineMarkerIcon .SVGIcon_STVTimelineMarker .line {
transform: scale(2, 1);
transform-origin: 50% 50%;
vector-effect: non-scaling-stroke;
stroke-width: 0.5px; }
.timelineMarker:hover .timelineMarkerIcon .SVGIcon_STVTimelineMarker {
cursor: pointer; }
.timelineMarker:hover .timelineMarkerIcon .SVGIcon_STVTimelineMarker .line {
fill: #ffe9cd; }
.STV_timelineThumbnailContainer {
position: absolute;
width: 72px;
height: 48px;
border-radius: 4px;
background-color: #5dc3ff;
background: linear-gradient(to top, white 0%, #b29a7c 80%);
margin-left: -32px;
top: -52px;
opacity: 0;
transform: scale(0);
transform-origin: 50% 100%;
z-index: 2;
pointer-events: none; }
.STV_timelineThumbnailContainer.thumbnailVisible {
opacity: 1;
transform: scale(1); }
.STV_timelineContainer.grabberDown .STV_timelineThumbnailContainer {
opacity: 1;
transform: scale(1);
top: -64px;
background: linear-gradient(to top, #5dc3ff 0%, #166b9c 80%); }
.STV_timelineThumbnail {
width: calc( 100% - 4px);
height: calc( 100% - 4px);
padding: 2px; }
.STV_timelineThumbnail_Img {
width: 100%;
height: 100%;
border-radius: 3px;
/*object-fit: contain;*/ }
.STV_timelineSegmentsContainer {
display: flex;
flex-direction: row;
overflow: hidden;
height: 16px;
width: 100%;
position: relative; }
.noSegments .STV_timelineSegmentsContainer {
display: none; }
.STV_timelineSegment {
margin-right: 2px;
font-size: 10px;
cursor: pointer;
display: flex;
flex-direction: row;
position: absolute;
height: 16px;
transition: opacity .1s linear; }
.STV_timelineSegment:hover {
z-index: 5;
text-shadow: 0px 0px 2px #000, 1px 1px 3px #000; }
.STV_timelineSegment:hover .STV_timelineSegmentBackFill,
.STV_timelineSegment:hover .STV_timelineSegmentFrontFill {
opacity: 1; }
.STV_timelineSegment:hover div {
border-color: #cacaca; }
.STV_timelineSegmentFrontFill {
width: 8px;
height: 100%;
border: 1px solid grey;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
margin-top: 6px;
margin-right: 4px;
opacity: .3;
pointer-events: none;
transition: opacity .1s ease-in-out; }
.STV_timelineSegment.hideFront .STV_timelineSegmentFrontFill {
border-left: 0px solid transparent;
border-top-style: dotted; }
.STV_timelineSegmentLabel {
flex-shrink: 0;
transition: color .1s ease-in-out; }
.STV_timelineSegment:hover .STV_timelineSegmentLabel {
color: white !important; }
.STV_timelineSegmentBackFill {
flex: 1;
height: 100%;
border: 1px solid grey;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
margin-top: 6px;
margin-left: 4px;
opacity: .3;
pointer-events: none;
transition: opacity .1s ease-in-out; }
.STV_timelineMinimapContainer {
height: 22px;
flex: 1;
position: relative;
margin-top: 72px;
margin-right: 32px; }
.STV_timelineMinimap {
width: 100%;
height: 6px;
padding: 6px 0;
padding-top: 7px; }
.STV_timelineMinimapLine {
width: 100%;
height: 3px;
background-color: #405358; }
.STV_timelineMinimapLine.Played {
background-color: #216c91;
background: linear-gradient(to right, #368fa7 0px, #368fa7 calc( 100% - 6px), #5dc3ff 100%);
position: absolute;
top: 7px;
transition: all .2s ease-in-out; }
.STV_timelineMapWindow {
height: 100%;
border: 0px solid #fff0;
border-top: 1px dashed #fff2;
border-bottom: 1px dashed #fff2;
position: absolute;
top: -2px;
backdrop-filter: brightness(160%);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: flex; }
.STV_timelineMapWindowCenter {
flex: 1;
background-color: #06f1;
cursor: pointer; }
.STV_timelineMapWindowCenter:hover {
background-color: rgba(148, 191, 255, 0.144); }
.STV_timelineMapWindowEdge {
width: 4px;
height: 100%;
background-color: rgba(213, 228, 255, 0.5);
flex-shrink: 0;
cursor: ew-resize; }
.STV_timelineMapWindowEdge:hover {
background-color: white;
cursor: ew-resize; }
.STV_BroadcastController {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 64px; }
.STV_BroadcastTooltip {
position: absolute;
color: white;
font-size: 12px;
padding: 0 4px;
border-radius: 4px;
user-select: none;
background-color: #216c91;
box-shadow: 0px 1px 8px 2px rgba(0, 0, 0, 0.5), 2px 3px 32px rgba(0, 0, 0, 0.8);
z-index: 1000; }
.dash_video_stats {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
background: rgba(40, 60, 82, 0.65);
/* So we can see it over the video */
padding: 8px;
color: #cfdae4;
font: 14px Sans-Serif;
backdrop-filter: blur(8px);
margin: 6px;
border: 1px solid black;
z-index: 40; }
.dash_video_stats .videoStatsValue {
color: white; }
.dash_video_stats .dash_stat_close_button {
background: none;
border: none;
width: 24px;
height: 24px;
background-color: #0005;
border-radius: 4px;
padding: 2px;
margin: 0;
cursor: pointer; }
.dash_video_stats .dash_stat_close_button:focus,
.dash_video_stats .dash_stat_close_button:active {
outline: none; }
.dash_video_stats .dash_stat_close_button svg {
width: 100%;
height: 100%; }
.dash_video_stats .dash_stat_close_button svg line {
stroke: #c9d3df;
stroke-width: 24px; }
.dash_video_stats .dash_stat_close_button:hover svg line {
stroke: white; }
.dash_stat_close_button {
float: right; }
.BroadcastTab {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.ToggleBroadcastChat {
padding: 7px;
border-radius: 2px;
margin: 8px 8px 8px 0px;
align-self: center;
background-color: #7a6ebe;
width: 24px;
height: 24px;
margin-right: 16px;
cursor: pointer; }
.ToggleBroadcastChat .SVGIcon_DoubleArrow {
transform: rotateZ(180deg);
transition: all .16s ease-in-out; }
.ChatCollapsed .ToggleBroadcastChat .SVGIcon_DoubleArrow {
transform: rotateZ(0deg); }
.BroadcastTabHeaderContainer {
display: flex;
justify-content: flex-end; }
.TheaterMode .BroadcastTabHeaderContainer {
display: none; }
.BroadcastTab_OverBackground {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column; }
.BroadcastTab_HeaderRow {
display: flex;
justify-content: flex-end;
align-items: center;
align-content: center;
width: 356px; }
.BroadcastContainer {
display: flex;
flex-direction: row;
margin-left: 4px;
padding: 18px 16px;
padding-top: 0px;
height: 100%; }
.multiChatDialog .BroadcastContainer {
padding: 0;
padding-right: 2px; }
.TheaterMode .BroadcastContainer {
padding: 0;
height: 100%; }
.BroadcastChat {
max-width: 340px;
min-width: 340px;
flex: 1;
background-color: #22252b;
font-size: 0;
position: relative; }
.BroadcastChat iframe {
border: 0px;
height: 100%;
width: 100%; }
.BroadcastSection,
.BroadcastContainerSection {
background-color: black;
display: flex;
flex-direction: column;
flex-basis: content;
flex-shrink: 0; }
.BroadcastSection {
position: relative; }
.BroadcastContainerSection {
overflow-y: scroll;
overflow-x: auto; }
.BroadcastSection {
width: 100%;
max-width: 100%;
max-height: calc( 100% - 50px); }
.BroadcastDetailsSection {
flex: 1;
display: flex;
user-select: none;
min-height: 195px; }
.TheaterMode .BroadcastSection {
max-height: 100%;
margin-top: auto;
margin-bottom: auto; }
.TheaterMode .BroadcastDetailsSection {
display: none; }
.BroadcastDetailsSection .BroadcastDetails {
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.15);
position: relative;
flex: 1;
overflow: hidden; }
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader {
height: 50px;
font-size: 16px;
padding: 8px 8px;
box-sizing: border-box;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: space-between; }
.BroadcastDetailsHeader_ViewerCount {
margin-top: 6px;
height: 20px;
line-height: 20px;
font-size: 13px;
pointer-events: none;
text-decoration: none; }
.BroadcastDetailsHeader_ViewerCount .SVGIcon_Viewers {
width: 16px;
height: 16px;
margin-right: 10px;
margin-bottom: -3px; }
.BroadcastButton.WatchWithFriends .SVGIcon_Viewers .backGuy {
fill: white; }
.BroadcastButton.WatchWithFriends .SVGIcon_Viewers .frontGuy {
fill: #b6c3f8; }
.videoContainer .BroadcastDetailsHeader_ViewerCount {
margin-left: 0px; }
.videoContainer .videoBackground,
.BroadcastDetailsSection .BroadcastDetails .broadcastDetailsThumbBlur {
width: 100%;
opacity: 0.6;
user-select: none;
filter: blur(24px) saturate(2) brightness(1.21);
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) -25%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) -25%, rgba(0, 0, 0, 0) 100%);
height: 100%;
max-height: none;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0; }
.videoContainer .videoBackground {
opacity: 0.4;
mask-image: none;
-webkit-mask-image: none; }
.BroadcastDetails .BroadcastDetailsHeader .AppTitle {
color: #c1c6cf;
flex-shrink: 0; }
.BroadcastDetails .BroadcastDetailsHeader .BroadcastTitle {
color: #777;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.BroadcastDetails .BroadcastDetailsHeader .BroadcastLink {
color: #778494;
cursor: pointer;
font-size: 14px;
width: fit-content; }
.BroadcastDetails .BroadcastDetailsHeader .BroadcastLink:hover {
color: #AAA; }
.BroadcastDetails .BroadcastDetailsHeader .BroadcastLanguage {
color: #8277b1;
display: flex;
align-items: center;
flex-direction: row;
flex-shrink: 0;
cursor: pointer; }
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader .Info {
display: flex;
align-items: center; }
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader .Actions {
margin-left: 40px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end; }
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader .ContextMenuButton {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
padding-top: 4px; }
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader .ContextMenuButton .SVGIcon_DownArrowContextMenu {
fill: #8277b1;
width: 16px;
height: 16px;
stroke-width: 8px;
stroke: #8277b1;
margin-left: 4px; }
.BroadcastChatDivider {
background-color: #333741;
border: 0.5px solid #121216;
z-index: 1; }
.TheaterMode .BroadcastChatDivider {
background-color: #121314; }
.TheaterMode .BroadcastChatDivider:hover,
.BroadcastChatDivider:hover {
background-color: #40464f; }
.BroadcastTheaterToggle,
.BroadcastChatPositionToggle,
.BroadcastFullscreenToggle {
width: 30px;
height: 30px;
background-repeat: no-repeat; }
.BroadcastChatPositionToggle.bottom {
background-image: url("../../images/webui/icon_view_chatbottom.png?v=2");
margin-right: 4px; }
.BroadcastChatPositionToggle.right {
background-image: url("../../images/webui/icon_view_chatright.png?v=2");
margin-right: 4px; }
.BroadcastFullscreenToggle {
background-image: url("../../images/webui/icon_view_fullscreen.png?v=2");
margin-left: 4px; }
.BroadcastTheaterToggle {
background-image: url("../../images/webui/icon_view_theater.png?v=2"); }
.BroadcastChatDivider.horizontal {
min-width: 6px;
width: 6px;
height: 100%;
cursor: ew-resize; }
.BroadcastChatDivider.vertical {
width: 100%;
min-height: 6px;
height: 6px;
cursor: ns-resize; }
.chatWindow.broadcastVisible .chatBody {
/*border: 1px solid red;*/
min-height: 200px;
flex: 1;
flex-shrink: 0; }
.videoContainer {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
flex-basis: content;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
overflow: hidden;
box-sizing: border-box; }
.videoContainer .BroadcastDetails {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(29, 30, 35, 0) 100%);
height: 64px;
padding: 8px 16px;
font-size: 20px;
text-shadow: 0px 0px 2px #000, 1px 1px 3px 4px #000, 1px 1px 8px 6px #000;
display: none;
transition: all .3s ease-in-out; }
.videoContainer.HidePlayerControls .BroadcastDetails {
transform: translateY(-24px); }
.TheaterMode .videoContainer .BroadcastDetails,
.videoContainer.fullscreenVideo .BroadcastDetails {
display: block; }
.videoContainer .BroadcastDetails .BroadcastDetailsHeader .BroadcastTitle {
color: #ccc; }
.videoContainer .BroadcastDetails .BroadcastDetailsHeader .AppTitle {
color: #eceff5; }
.videoContainerSizer {
width: 100%;
height: 0;
padding-bottom: 56.25%; }
.videoSrc {
transition: all .06s ease-in-out;
z-index: 2;
max-width: 100%;
height: 100%;
object-fit: contain;
border-left: 1px solid black;
border-right: 1px solid black;
position: absolute;
top: 0;
bottom: 0;
background-color: #18191d; }
.videoContainer.VideoPaused .videoSrc {
filter: saturate(0.5) brightness(0.96); }
iframe.steamTVLogin {
border: none;
width: 800px;
max-width: 100%;
height: 60vh;
max-height: 500px; }
.DialogContent.SteamTVLoginDialog {
width: 800px;
padding: 0;
max-width: 100%; }
.DialogContent.SteamTVLoginDialog > .DialogContent_InnerWidth {
max-width: 800px; }
.FullpageBroadcastBackdrop {
filter: blur(50px);
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
width: 100%;
height: 100%;
background-position: center center; }
.StandalonePlayer .FullpageBroadcastBackdrop {
z-index: -100; }
.BroadcastButton {
background: linear-gradient(to right, #3366ff, #7d6ebc);
display: inline-block;
padding: 8px 32px;
border-radius: 2px;
font-size: 14px;
color: #fff;
user-select: none; }
.StandalonePlayerHeader {
background-color: rgba(23, 26, 33, 0.3);
border-bottom: 1px solid;
border-image: linear-gradient(to right, rgba(51, 102, 122, 0.5), rgba(0, 203, 255, 0.5)) 100% 1;
height: 71px;
display: flex;
justify-content: space-between; }
.StandalonePlayer.TheaterMode .StandalonePlayerHeader {
display: none; }
.StandalonePlayerHeader .Logo {
margin: 12px 0 0 20px;
width: 154px;
height: 46px;
display: inline-block;
background-image: url("../../images/webui/logo_steamtv.png"); }
.BroadcastContainerSectionVideoContainer {
max-height: calc(100vh - 150px);
position: relative; }
.StandalonePlayer .BroadcastContainerSectionVideoContainer {
max-height: calc(100vh - 150px); }
.TheaterMode .BroadcastContainerSectionVideoContainer {
margin-top: auto;
margin-bottom: auto;
max-height: 100%; }
.BroadcastStreamDetails {
padding: 10px; }
.WatchWithFriends {
margin: 0px 16px 0px 4px;
cursor: pointer;
flex: 1;
display: flex;
justify-content: center; }
.WatchWithFriends svg {
width: 22px;
height: 22px;
margin-right: 5px;
vertical-align: top;
display: inline-block; }
.BroadcastStreamDetails .BroadcastAppName {
color: #fff;
font-size: 18px;
display: inline-block;
margin-left: 5px; }
.BroadcastStreamDetails .BroadcastTitle {
color: #778494;
font-size: 18px;
display: inline-block;
margin-left: 10px; }
.BroadcastStreamDetails .BroadcastLanguage {
color: #9582e7;
font-size: 18px; }
.StandalonePlayer,
.StandalonePlayer .BroadcastContainerSection,
.StandalonePlayer .BroadcastContainer {
background: transparent; }
.StandalonePlayer.TheaterMode,
.TheaterMode .BroadcastContainerSection,
.TheaterMode .BroadcastContainer {
height: 100%; }
.StandalonePlayer .BroadcastStreamDetails {
background-color: rgba(0, 0, 0, 0.4);
padding: 12px 5px; }
.STV_Logo {
display: flex;
align-content: center;
align-items: center;
margin-left: 16px; }
.STV_Logo .SVGIcon_SteamTV {
width: 152px;
height: 38px;
margin-right: 3px; }
.STV_Logo_STEAM,
.STV_Logo_TV {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 0;
color: #7d6ebc;
user-select: none; }
.STV_Logo_TV {
font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif;
margin-top: 1px; }
.STV_Logo_STEAM {
font-weight: bold;
margin-right: 1px;
background: linear-gradient(to right, #5b6adb 0%, #7d6ebc 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.STV_Logo .SVGIcon_Throbber #mainOutline path {
stroke-width: 0px; }
.STV_Logo .SVGIcon_Throbber #mainOutline path,
.STV_Logo .SVGIcon_Throbber #partCircle path {
display: none; }
.STV_Logo .SVGIcon_Throbber #mainOutline .steamTV {
display: block; }
.STV_Logo .SVGIcon_Throbber #topCircle circle {
stroke: #5069e5; }
.STV_Logo .SVGIcon_Throbber #bottomCircle path {
fill: #4367f0;
stroke-width: 0px; }
.BroadcastDotaKualaLumpurMajorOffline,
.BroadcastQuakeLiveOffline,
.BroadcastCSGOLondonOffline,
.BroadcastArtifactOffline,
.BroadcastInjustice2Offline,
.BroadcastSmiteOffline,
.BroadcastPaladinsOffline,
.BroadcastRealmRoyaleOffline,
.BroadcastDOTATrueSight,
.BroadcastSteamAwardsOffline,
.BroadcastCSGOKatowiceOffline,
.BroadcastCSGOFaceitOffline {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover; }
.BroadcastSteamAwardsOffline {
background-image: url("../../images/webui/broadcast/steam_awards_2018_3.png"); }
.BroadcastSmiteOffline,
.BroadcastPaladinsOffline,
.BroadcastRealmRoyaleOffline {
background-image: url("../../images/webui/broadcast/hrx_splash_screen_2018.jpg"); }
.BroadcastInjustice2Offline {
background-image: url("../../images/webui/broadcast/injustice2_grand_finals_2018_splash_screen.jpg"); }
.BroadcastDotaKualaLumpurMajorOffline {
background-image: url("../../images/webui/broadcast/dota_major_kuala_lumpur_2018.jpg"); }
.BroadcastQuakeLiveOffline {
background-image: url("../../images/webui/broadcast/quake_live_2018.jpg"); }
.BroadcastCSGOLondonOffline {
background-image: url("../../images/webui/broadcast/steam_broadcast_london_2018.jpg"); }
.BroadcastCSGOKatowiceOffline {
background-image: url("../../images/webui/broadcast/csgo_esl_2019.jpg"); }
.BroadcastCSGOFaceitOffline {
background-image: url("../../images/webui/broadcast/csgo_faceit_ecs.png"); }
.BroadcastDOTATrueSight {
background-image: url("../../images/webui/broadcast/true_sight_logo.png"); }
.BroadcastDOTAChongqingOffline {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-image: url("../../images/webui/broadcast/dota_chongqing_splash_screen_2019.png"); }
.BroadcastCSGOLondonOffline_Schedule {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
display: flex;
flex-direction: column;
align-items: center; }
.BroadcastCSGOLondonOffline_Prelims,
.BroadcastCSGOLondonOffline_Group {
color: #d3d3d3;
line-height: 36px; }
.BroadcastCSGOLondonOffline_Playoffs {
color: #ff6600;
line-height: 36px; }
.BroadcastArtifactOffline {
background-image: url("../../images/webui/broadcast/artifact_1080p.jpg"); }
.BroadcastArtifactOffline_Schedule {
position: absolute;
left: 0;
right: 0;
bottom: 40px;
display: flex;
flex-direction: column;
align-items: center; }
.BroadcastArtifactOffline_Text {
color: #d3d3d3;
line-height: 18px; }
.StoreSaleWidgetContainer {
display: flex;
flex-direction: row;
max-width: 780px;
overflow: hidden;
max-height: 200px;
z-index: 1; }
.StoreSaleWidgetContainer_mini,
.StoreSaleWidgetContainer_column {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 337px; }
.StoreSaleWidgetContainer_mini {
max-width: 155px;
background: #000; }
.StoreSaleWidgetContainer_column {
max-width: 310px;
padding: 8px; }
.StoreSaleWidgetImage {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
cursor: pointer; }
.StoreSaleWidgetImage_mini {
cursor: pointer;
max-width: 155px; }
.StoreSaleWidgetImage_column {
cursor: pointer;
max-width: 310px; }
.StoreSaleImage {
cursor: pointer; }
.StoreSaleImage_mini {
cursor: pointer;
width: 155px; }
.StoreSaleImage_column {
cursor: pointer;
width: 294px; }
.StoreSaleWidgetTitle {
cursor: pointer;
font-size: 14px;
width: fit-content;
color: #c1c6cf;
flex-shrink: 0;
margin-top: 8px; }
.StoreSaleWidgetTitle:hover {
color: #AAA; }
.StoreSaleWidgetRelease {
font-size: 10px;
color: #919fb1;
margin-bottom: 8px; }
.StoreSaleWidgetShortDesc {
font-size: 12px; }
.StoreSaleWidgetShortDesc_column,
.StoreSaleWidgetShortDesc_mini {
max-height: 160px;
overflow-y: scroll;
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 16px);
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 16px);
padding-bottom: 8px;
overflow: hidden;
letter-spacing: 0px;
line-height: 15px; }
.StoreSaleWidgetRight {
padding: 8px; }
.StoreSalePriceActionWidgetContainer {
display: flex;
flex-direction: row;
padding: 1px;
justify-content: flex-end; }
.StoreSalePriceBox {
padding: 5px;
background-color: black; }
.StoreSalePriceButton {
border-radius: 2px;
border: none;
padding: 1px;
display: inline-block;
cursor: pointer;
text-decoration: none !important;
color: #D2E885 !important;
background: #799905;
background: -webkit-linear-gradient(top, #799905 5%, #536904 95%);
background: linear-gradient(to bottom, #799905 5%, #536904 95%);
padding: 0 15px;
font-size: 15px;
line-height: 30px; }
.StoreSalePriceButton:hover {
text-decoration: none !important;
color: #ffffff !important;
background: #a4d007;
background: -webkit-linear-gradient(top, #a4d007 5%, #6b8705 95%);
background: linear-gradient(to bottom, #a4d007 5%, #6b8705 95%); }
.LinkOverlayContainer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 30;
-webkit-app-region: no-drag;
display: flex;
flex-direction: column; }
.LinkOverlayValidRegion {
width: 100%;
height: 85%;
-webkit-app-region: no-drag;
position: relative; }
.LinkOverlayInvalidRegion {
width: 100%;
height: 15%;
background-image: url("../../images/webui/textures/diagonal_bg_transparent.png");
background-size: 16px;
border-top: 1px solid rgba(101, 164, 212, 0.25);
border-bottom: 1px solid rgba(101, 164, 212, 0.25);
background-color: #0003;
opacity: 1;
display: flex;
justify-content: center; }
.LinkOverlayInvalidRegion > div {
text-transform: uppercase;
letter-spacing: 2px;
color: #80c1f3;
text-align: center;
width: fit-content;
vertical-align: middle;
font-size: 16px;
text-shadow: 1px 1px 2px 4px #000, 1px 1px 3px 3px #000;
font-weight: 100;
align-self: center; }
.LinkRegion {
left: 15%;
top: 20%;
width: 20%;
height: 10%;
opacity: 0.1;
background-color: yellow;
display: table;
position: absolute; }
.LinkRegion:hover {
opacity: 0.5; }
.LinkRegionText {
display: table-cell;
text-align: center;
vertical-align: middle; }
.LinkRegionDragBox {
position: absolute;
top: 32px;
left: 32px;
right: 32px;
bottom: 32px;
-webkit-app-region: no-drag;
z-index: 50; }
.LinkRegionDragBox.EdgeDown {
z-index: 52; }
.LinkRegionGridBox {
width: calc( 100% + 30px);
height: calc( 100% + 30px);
display: grid;
grid-template-columns: 16px auto 16px;
grid-template-rows: 16px auto 16px;
grid-gap: 0;
grid-row-gap: 0;
margin-left: -16px;
margin-top: -16px;
-webkit-app-region: no-drag; }
.LinkRegionEdge {
background-color: rgba(92, 191, 230, 0.192);
width: 100%;
height: 100%;
-webkit-app-region: no-drag; }
.LinkRegionEdge.TopLeft {
border-right: 2px dotted #008ada;
border-bottom: 2px dotted #008ada;
cursor: nwse-resize; }
.LinkRegionEdge.Top {
border-bottom: 2px dotted #008ada;
background: linear-gradient(to top, rgba(1, 153, 255, 0.5) -50%, rgba(29, 30, 35, 0) 100%);
cursor: ns-resize; }
.LinkRegionEdge.TopRight {
border-left: 2px dotted #008ada;
border-bottom: 2px dotted #008ada;
cursor: nesw-resize; }
.LinkRegionEdge.Left {
border-right: 2px dotted #008ada;
background: linear-gradient(to left, rgba(1, 153, 255, 0.5) -50%, rgba(29, 30, 35, 0) 100%);
cursor: ew-resize; }
.LinkRegionEdge.Middle {
cursor: move; }
.LinkRegionEdge.Middle .LinkRegionDelete {
width: 20px;
height: 20px;
max-width: 100%;
max-height: 100%;
position: absolute;
right: 8px;
top: 8px;
cursor: default;
opacity: 0;
-webkit-app-region: no-drag;
transition: all .21s ease-in-out; }
.LinkRegionEdge.Middle .LinkRegionSettings {
width: 20px;
height: 20px;
max-width: 100%;
max-height: 100%;
position: absolute;
left: 8px;
top: 8px;
cursor: default;
opacity: 0;
-webkit-app-region: no-drag;
transition: all .21s ease-in-out; }
.LinkRegionEdge.Middle .LinkRegionDelete line,
.LinkRegionEdge.Middle .LinkRegionSettings line {
stroke-width: 26px;
stroke: #008ada;
transition: all .21s ease-in-out; }
.LinkRegionEdge.Middle:hover .LinkRegionDelete:hover line,
.LinkRegionEdge.Middle:hover .LinkRegionSettings:hover line {
stroke: #cce0ff; }
.LinkRegionEdge.Middle:hover .LinkRegionDelete,
.LinkRegionEdge.Middle:hover .LinkRegionSettings {
opacity: 1; }
.LinkRegionEdge.Right {
border-left: 2px dotted #008ada;
background: linear-gradient(to right, rgba(1, 153, 255, 0.5) -50%, rgba(29, 30, 35, 0) 100%);
cursor: ew-resize; }
.LinkRegionEdge.BottomLeft {
border-right: 2px dotted #008ada;
border-top: 2px dotted #008ada;
cursor: nesw-resize; }
.LinkRegionEdge.Bottom {
border-top: 2px dotted #008ada;
background: linear-gradient(to bottom, rgba(1, 153, 255, 0.5) -50%, rgba(29, 30, 35, 0) 100%);
cursor: ns-resize; }
.LinkRegionEdge.BottomRight {
border-left: 2px dotted #008ada;
border-top: 2px dotted #008ada;
cursor: nwse-resize; }
.AddLinkRegion, .SaveLinkRegion {
position: absolute;
right: 8px;
top: 8px;
padding: 8px;
background: #000a;
border: 1px solid rgba(59, 127, 238, 0.541);
color: #3b7fee;
z-index: 51;
user-select: none;
font-size: 12px;
cursor: pointer;
text-transform: uppercase; }
.AddLinkRegion:hover, .SaveLinkRegion:hover {
border: 1px solid white;
color: white; }
.SaveLinkRegion {
top: 45px; }
.LinkRegionDragBox.topleft .LinkRegionEdge.TopLeft,
.LinkRegionDragBox.top .LinkRegionEdge.Top,
.LinkRegionDragBox.topright .LinkRegionEdge.TopRight,
.LinkRegionDragBox.left .LinkRegionEdge.Left,
.LinkRegionDragBox.right .LinkRegionEdge.Right,
.LinkRegionDragBox.bottomleft .LinkRegionEdge.BottomLeft,
.LinkRegionDragBox.bottom .LinkRegionEdge.Bottom,
.LinkRegionDragBox.bottomright .LinkRegionEdge.BottomRight {
border-color: white; }
.LinkRegionEdge:hover {
border-color: #7eadf8; }
.LinkRegionEdge.Middle {
background-color: rgba(191, 202, 250, 0.133); }
.EdgeDown.middle .LinkRegionEdge.Middle,
.LinkRegionEdge.Middle:hover {
z-index: 10;
background-color: rgba(133, 156, 255, 0.171); }
.EdgeDown.middle .LinkRegionEdge.Right,
.EdgeDown.middle .LinkRegionEdge.Bottom,
.EdgeDown.middle .LinkRegionEdge.Top,
.EdgeDown.middle .LinkRegionEdge.Left {
border-color: white; }
.LinkRegionEdge.Middle {
display: table; }
.LinkRegionButtonContainer .DialogButton {
display: inline-block;
width: 100px;
margin-right: 20px; }
.LinkRegionInfo {
background-color: black;
padding: 10px; }
.LinkText {
text-align: center;
vertical-align: middle;
display: table-cell; }
@media screen and (max-width: 420px) and (min-height: 420px) {
.BroadcastContainer {
flex-direction: column;
padding: 0;
margin: 0;
justify-content: space-between; }
.StandalonePlayer .BroadcastContainerSectionVideoContainer {
flex: 1; }
.StandalonePlayer .BroadcastContainerSection {
width: 100% !important;
max-width: 100% !important; }
.BroadcastContainerSection {
flex: 0 0 auto;
align-self: stretch; }
.BroadcastTab_HeaderRow {
width: 100%; }
.BroadcastDetailsSection {
flex-basis: auto;
max-height: 32px;
display: none; }
.BroadcastChatDivider.horizontal {
height: 6px;
width: 100%;
display: none; }
.BroadcastChatDiv {
height: 100%; }
.StandalonePlayer .LoginDiv,
.BroadcastDetailsSection .BroadcastDetails .broadcastDetailsThumbBlur {
display: none; }
.WatchWithFriends {
display: none; }
.BroadcastChat {
max-width: 100%;
min-width: 0; }
.StandalonePlayerHeader {
position: absolute;
z-index: 12;
right: 0;
left: 0;
background: none;
border: none;
display: none; }
.StandalonePlayer {
display: flex;
flex-direction: column;
height: 100%; }
.StandalonePlayer .BroadcastContainer {
height: 100%;
flex: 1;
flex-direction: column; }
.StandalonePlayer .FullpageBroadcastBackdrop {
position: absolute; }
.StandalonePlayer .videoSrc {
left: 0;
right: 0;
top: 0;
bottom: 0; }
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader {
font-size: 12px; }
.dash_video_stats {
font-size: 10px;
line-height: 10px; }
.STV_BroadcastController {
margin: 0; }
.STV_BroadcastSettings {
position: absolute;
top: 4px;
right: 4px;
background-color: #0008;
border-radius: 8px;
padding-right: 16px;
filter: brightness(1.3); }
.STV_BroadcastSettingsPanel {
margin-top: 28px !important; } }
@media screen and (max-width: 830px) and (max-height: 420px) {
{
/*
.BroadcastTab_HeaderRow
{
width: 100%;
}
.BroadcastDetailsSection .BroadcastDetails .broadcastDetailsThumbBlur
{
display: none;
}
#friendslist-container.fullheight
{
}
.StandalonePlayer .BroadcastContainer
{
height: 100%;
flex: 1;
}
.BroadcastDetailsSection .BroadcastDetails .BroadcastDetailsHeader
{
font-size: 12px;
}
.dash_video_stats
{
font-size: 10px;
line-height: 10px;
}
.STV_BroadcastController
{
margin: 0;
}
*/ }
.BroadcastContainer {
padding: 0;
margin: 0;
justify-content: space-between;
height: 100%; }
.StandalonePlayerHeader {
position: absolute;
z-index: 12;
right: 0;
left: 0;
background: none;
border: none;
display: none; }
.STV_BroadcastSettings {
position: absolute;
top: 4px;
right: 4px;
background-color: #0008;
border-radius: 8px;
padding-right: 16px;
filter: brightness(1.3); }
.WatchWithFriends {
display: none; }
.STV_BroadcastSettingsPanel {
margin-top: 28px !important; }
.StandalonePlayer {
display: flex;
flex-direction: column;
height: 100%; }
.StandalonePlayer .BroadcastContainerSectionVideoContainer {
flex: 1;
max-height: calc(100% - 32px); }
.StandalonePlayer .FullpageBroadcastBackdrop {
position: absolute; }
.StandalonePlayer .BroadcastContainerSection {
width: 100% !important;
max-width: 100% !important; }
.StandalonePlayer .BroadcastChatDivider.horizontal,
.StandalonePlayer .BroadcastChatDiv {
display: none !important; }
.BroadcastContainerSection {
flex: 1 1 auto;
align-self: stretch; }
.BroadcastDetailsSection {
flex-basis: auto;
max-height: 32px; } }
.broadcastchat_BroadcastChat_25xed {
max-width: 194px;
min-width: 0; }
.broadcastchat_ChatEntry_3hSYv {
display: flex;
flex-shrink: 0;
flex-direction: row;
padding: 6px;
padding-bottom: 8px;
background-color: #22252b;
transition: all .21s ease-in-out;
flex-wrap: wrap;
justify-content: center; }
.broadcastchat_ChatEntry_3hSYv .chatSubmitButton.EmbedButton {
margin-top: 2px;
max-width: 46px;
max-height: 46px; }
.broadcastchat_ChatPanel_3jc_d {
display: flex;
flex: 1;
flex-direction: column;
background-color: #1b1c20;
position: relative; }
.broadcastchat_ChatMessages_PNfmQ {
flex-grow: 1;
overflow-y: scroll;
flex-basis: 1px;
position: relative;
padding: 8px; }
.broadcastchat_EmoticonContainer_3ArHy {
width: 15%;
height: 10%; }
.broadcastchat_ChatSend_2szrh {
width: 15%;
height: 10%; }
.broadcastchat_ChatBox_3y_AV {
width: 70%;
height: 10%; }
.broadcastchat_ChatControls_35ufH {
display: flex; }
.broadcastchat_MessageChat_3eku_ {
padding: 4px;
color: #c1c6cf; }
.broadcastchat_MessageName_2P_MO {
color: #6dcff6;
font-size: 14px;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: #6dcff63d; }
.broadcastchat_MessageName_2P_MO:hover {
color: #9edff8;
text-decoration-color: #6dcff6b4; }
.broadcastchat_MessageContents_555m- {
font-size: 14px; }
.broadcastchat_MessageContents_555m- a {
color: white; }
.broadcastchat_MessageContents_555m- img.emoticon.large {
width: 24px;
height: 24px;
object-fit: contain;
margin-right: 4px;
pointer-events: all;
margin-top: -3px;
margin-bottom: -3px;
margin-right: -3px; }
.broadcastchat_MessageNotification_2LJJp {
color: gray;
padding: 6px; }
.broadcastchat_MessageError_YWUjL {
color: #812819;
padding: 6px;
border: 1px dashed rgba(255, 58, 58, 0.15);
box-shadow: 2px 3px 14px 1px #00000066 inset;
margin: 8px; }
.broadcastchat_minHeightZero_3Cgfe {
min-height: 0;
flex: 1; }
.broadcastchat_ChatLoginButton_7EQxy {
background: linear-gradient(to right, #3366ff, #7d6ebc);
display: inline-block;
padding: 0;
border-radius: 2px;
font-size: 14px;
color: #fff;
width: 100%;
left: 4px;
right: 4px;
bottom: 4px;
height: 42px;
text-align: center;
line-height: 40px;
text-decoration: none;
cursor: pointer;
min-width: 340px; }
.broadcastchat_RateLimitProgressBarContainer_fFamE {
width: 100%;
height: 8px; }
.broadcastchat_RateLimitProgressBar_kaFIe {
background-color: #7d6ebc;
height: 100%;
width: 0%; }
.broadcastchat_TimedProgressBarContainer_321-Z {
width: 44px;
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
background: #2c3036;
z-index: 2; }
.broadcastchat_wrapper_1iiJF {
width: 30px;
height: 30px;
position: absolute;
right: 6px;
top: 6px;
background: #2c3036; }
.broadcastchat_wrapper_1iiJF .SVGIcon_Submit {
z-index: 500; }
.broadcastchat_pie_2q7aN {
width: 50%;
height: 100%;
position: absolute;
background: #2c3036;
border: 2px solid #00ccff;
box-sizing: border-box; }
.broadcastchat_spinner_2u1pz {
border-radius: 45px 0 0 45px;
z-index: 200;
border-right: none;
animation: broadcastchat_rota_1D2nd 0s linear infinite;
transform-origin: 100% 50%; }
.broadcastchat_filler_ZTWuH {
border-radius: 0 45px 45px 0;
z-index: 100;
border-left: none;
animation: broadcastchat_fill_1uXHe 0s steps(1, end) infinite;
transform-origin: 50% 50%;
left: 50%;
opacity: 0; }
.broadcastchat_mask_xcUAc {
width: calc(50% + 1px);
height: calc(100% + 2px);
top: -1px;
left: -1px;
position: absolute;
z-index: 300;
opacity: 1;
background: inherit;
animation: broadcastchat_mask_xcUAc 0s steps(1, end) infinite;
transform-origin: 50% 50%; }
@keyframes broadcastchat_rota_1D2nd {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@keyframes broadcastchat_fill_1uXHe {
0% {
opacity: 0; }
50%, 100% {
opacity: 1; } }
@keyframes broadcastchat_mask_xcUAc {
0% {
opacity: 1; }
50%, 100% {
opacity: 0; } }
.broadcastchat_FlairContainer_tqyZ3 {
width: 24px;
height: 24px;
pointer-events: none; }
.broadcastchat_FlairContainer_tqyZ3 img.emoticon.large {
width: 24px;
height: 24px;
object-fit: contain;
margin-right: 4px;
pointer-events: all;
margin-top: -3px;
margin-bottom: -3px; }
.chatentry_chatEntryControls_2O_X7 {
/* for flyouts */
position: relative;
/* for children */
display: flex;
flex-direction: row;
/* our layout */
flex: 1;
background-color: #1b1c20;
box-shadow: inset 0px 0px 4px #000000;
outline-width: 0px;
color: #aaa;
border: 0px solid transparent;
padding-right: 2px; }
.chatentry_chatTextarea_3e__5 {
resize: none;
margin-right: 4px;
height: 42px;
background-color: transparent;
box-shadow: inset 0px 0px 4px transparent;
outline-width: 0px;
color: #aaa;
border: 0px solid transparent;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
padding: 4px 4px 4px 8px;
/*flex: 6;*/
flex-shrink: 1;
width: 100%; }
.chatentry_chatEntryActionsGroup_15mWd {
padding: 2px;
box-shadow: black 0px 0px 4px inset;
background-color: #1b1c20;
margin-left: 8px; }
.chatentry_chatEntryActionsContainer_WZNUD,
.chatentry_chatEntryActionsGroup_15mWd {
display: flex;
flex-direction: row; }
.chatentry_minHeightZero_NcZQ_ {
min-height: 0; }
.compactView .chatentry_chatTextarea_3e__5 {
height: initial; }
.BroadcastContainer .chatentry_chatEntryControls_2O_X7 .chatSubmitButton.EmbedButton {
margin-top: 2px;
max-width: 46px;
max-height: 46px; }
.emoticon_NewEmoticonIndicator_3NVON {
background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255, 153, 0, 0.8) 0%, rgba(233, 154, 35, 0.2) 45%, rgba(233, 154, 35, 0) 85%);
position: absolute;
top: -5%;
right: -5%;
left: 55%;
bottom: 55%;
display: flex;
align-items: center; }
.emoticon_NewEmoticonIndicator_3NVON .emoticon_NewEmoticonCircle_3mNrG {
width: 4px;
height: 4px;
background-color: yellow;
border-radius: 50%;
overflow: hidden;
margin: auto; }
.emoticon_EmoticonSelector_177nw {
max-height: 25vh;
max-width: 40vw;
display: flex;
flex-direction: column;
max-width: 302px; }
.emoticon_EmoticonSelector_177nw img.emoticon_emoticon_9hYGN.emoticon_large_p8Q42 {
width: 27px;
height: 27px; }
.emoticon_EmoticonSelector_Emoticons_1OTXW {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
flex: 1; }
.emoticon_EmoticonSelector_Separator_1_yzI {
box-sizing: border-box;
width: 100%;
padding: 5px; }
.emoticon_EmoticonSelector_Separator_1_yzI .emoticon_EmoticonSelector_SeparatorBackground_13bYy {
height: 2px;
background: #8492a4; }
.emoticon_EmoticonSelector_Controls_1hOWv {
display: flex;
align-content: flex-start;
padding: 5px;
flex-shrink: 0; }
.emoticon_EmoticonSelector_Item_3muLb {
margin: 2px;
width: 28px;
height: 28px;
padding: 5px 0;
cursor: pointer;
text-align: center; }
.emoticon_EmoticonSelector_Item_3muLb:hover .emoticon_emoticon_9hYGN.emoticon_large_p8Q42 {
transform: scale(1.25);
filter: brightness(1.25); }
.emoticon_EmoticonSelector_Item_New_spFg_ {
position: relative; }
img.emoticon_emoticon_9hYGN {
vertical-align: middle;
width: 18px;
height: 18px;
transition: all .1s ease-in-out; }
img.emoticon_emoticon_9hYGN.emoticon_large_p8Q42 {
width: 32px;
height: 32px;
margin-top: -14px;
margin-bottom: -14px; }
/* These styles are used within the returned emoticon tooltip, so need to be global for now */
.emoticon_hover_arrow {
width: 13px;
height: 26px;
background-image: url("https://steamcommunity-a.akamaihd.net/public/shared/images/popups/hover_arrow_both.gif");
background-repeat: no-repeat;
position: absolute;
top: 26px; }
.emoticon_hover_arrow.left {
background-position: left top;
left: 0; }
.emoticon_hover_arrow.right {
background-position: right top;
right: 0; }
.hover_arrow {
position: absolute;
top: 30px; }
.emoticon_hover_content {
padding: 6px 10px 6px 6px;
background-color: #3b3938;
border: 1px solid #797979;
margin: 12px;
box-shadow: 0 0 12px #000000;
white-space: nowrap; }
.emoticon_hover_content.client {
margin: 0;
box-shadow: none;
display: inline-block; }
.emoticon_hover_content_inner {
position: relative;
min-height: 54px;
padding-left: 62px;
font-size: 13px; }
.emoticon_hover_content_inner img.emoticon_large {
position: absolute;
left: 0;
top: 0; }
.emoticon_hover_title {
padding-top: 8px;
color: #898989; }
.emoticon_hover_desc {
color: #686868; }
.messages_SpeakerName_InGame_1vaKy {
color: #e3ffc2; }
.isCurrentUser .messages_SpeakerName_InGame_1vaKy {
color: #6a8f40; }
.messages_SpeakerName_Golden_hZgKn {
color: #e4ca63; }
.isCurrentUser .messages_SpeakerName_Golden_hZgKn {
color: #ad901e; }
.messages_SpeakerName_WatchingBroadcast_3DQ_c {
color: #c9bdf7; }
.isCurrentUser .messages_SpeakerName_WatchingBroadcast_3DQ_c {
color: #8277b1; }
.messages_SpeakerName_Online_2nKVN {
color: #6dcff6; }
.isCurrentUser .messages_SpeakerName_Online_2nKVN {
color: #4f96b3; }
.messages_SpeakerName_Default_1Qo8j {
color: #b8b8b8; }
.isCurrentUser .messages_SpeakerName_Default_1Qo8j {
color: #6e6e6e; }
.main_throbberContainer_29hiv {
height: 100%;
width: 100%;
position: fixed;
z-index: 200;
pointer-events: none; }
.main_throbberContainer-exit-active_24VO6 {
opacity: 0;
transition: opacity 1.2s ease-in-out;
transition-delay: 1.0s; }
.main_SteamPageHeader_3EaXO {
display: flex;
align-items: center;
background-color: #171a21;
padding: 10px; }
.main_SteamPageHeaderShortLogo_2KbGi {
background-image: url("../../images/webui/globalheader_small_logo.png");
background-size: contain;
background-repeat: no-repeat;
margin-right: 24px;
width: 119px;
height: 21px; }
.main_SteamPageHeaderShortLogo_2KbGi:hover {
filter: brightness(2); }
.main_SteamPageHeaderTopLink_17wXz {
display: block;
padding: 0px 7px;
color: #b8b6b4;
line-height: 16px;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
font-family: "Motiva Sans", Sans-serif;
font-weight: normal; }
.main_SteamPageHeaderTopLink_17wXz:hover {
color: #ffffff; }
.messages_PreMessage_1jeo-,
.messages_CodeMessage_1Fe4I,
.messages_QuoteMessage_33jrq {
padding: 1em;
white-space: pre-wrap;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
border-radius: 4px; }
.messages_PreMessage_1jeo-,
.messages_CodeMessage_1Fe4I {
background: linear-gradient(to right, rgba(7, 10, 14, 0.4) 30%, rgba(7, 10, 14, 0.3) 40%, rgba(7, 10, 14, 0.05) 60%, rgba(7, 10, 14, 0) 80%);
margin: 0;
margin-bottom: 16px;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
border-left-style: dashed;
border-left-width: 1px; }
.messages_CodeMessage_1Fe4I {
border-left-color: #080; }
.messages_CodeMessage_1Fe4I {
color: #FFFFFF;
/* default - before we've prettified */ }
.messages_CodeMessage_1Fe4I .str {
color: #65B042;
/* string - green */ }
.messages_CodeMessage_1Fe4I .kwd {
color: #E28964;
/* keyword - dark pink */ }
.messages_CodeMessage_1Fe4I .com {
color: #AEAEAE;
font-style: italic;
/* comment - gray */ }
.messages_CodeMessage_1Fe4I .typ {
color: #89BDFF;
/* type - light blue */ }
.messages_CodeMessage_1Fe4I .lit {
color: #3387CC;
/* literal - blue */ }
.messages_CodeMessage_1Fe4I .pun {
color: #FFFFFF;
/* punctuation - white */ }
.messages_CodeMessage_1Fe4I .pln {
color: #FFFFFF;
/* plaintext - white */ }
.messages_CodeMessage_1Fe4I .tag {
color: #89BDFF;
/* html/xml tag - light blue */ }
.messages_CodeMessage_1Fe4I .atn {
color: #BDB76B;
/* html/xml attribute name - khaki */ }
.messages_CodeMessage_1Fe4I .atv {
color: #65B042;
/* html/xml attribute value - green */ }
.messages_CodeMessage_1Fe4I .dec {
color: #3387CC;
/* decimal - blue */ }
.messages_PreMessage_1jeo- {
color: #FFFFFF;
border-left-color: #068; }
.messages_QuoteMessage_33jrq {
color: #bcc3cf;
background: linear-gradient(to bottom, rgba(64, 72, 83, 0.8) 0%, rgba(64, 72, 83, 0.5) 40%, rgba(64, 72, 83, 0.2) 100%);
border-left: 1px solid #737a86;
max-width: fit-content;
margin-top: 4px;
margin-bottom: 4px;
font-style: italic; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X,
.bbcode_ChatMessageSteamStore_gwzSZ {
max-width: 640px;
color: black;
cursor: default;
padding: 8px;
margin: 8px 0px 8px 0px;
background: linear-gradient(to right, rgba(87, 92, 104, 0.3) 40%, rgba(87, 92, 104, 0.05) 100%);
color: silver;
font-family: "Motiva Sans", Helvetica, Arial, sans-serif;
border-radius: 8px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
font-size: 13px;
height: 208px; }
.msg .bbcode_ChatMessageSteamStore_Failed_2wa0X a,
.msg .bbcode_ChatMessageSteamStore_Failed_2wa0X a:hover,
.bbcode_ChatMessageSteamStore_Failed_2wa0X a, .msg
.bbcode_ChatMessageSteamStore_gwzSZ a,
.msg
.bbcode_ChatMessageSteamStore_gwzSZ a:hover,
.bbcode_ChatMessageSteamStore_gwzSZ a {
border: none; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I,
.bbcode_ChatMessageSteamStore_gwzSZ.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I {
background: linear-gradient(to right, rgba(104, 87, 87, 0.3) 40%, rgba(104, 87, 87, 0.05) 100%);
height: fit-content; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X .SteamLogoThrobber,
.bbcode_ChatMessageSteamStore_gwzSZ .SteamLogoThrobber {
margin-top: 16px;
margin-left: auto;
margin-right: auto;
opacity: .5; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X {
height: fit-content; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X .bbcode_senderName_1_tWd {
color: white; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X .bbcode_URLSent_2yalT {
color: #df8484;
cursor: text; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X .bbcode_SteamURL_2VXfO {
color: silver; }
.bbcode_ChatMessageSteamStore_Failed_2wa0X .bbcode_SteamURL_2VXfO:hover {
color: #fff; }
.msg .bbcode_ChatMessageSteamStore_Failed_2wa0X a,
.msg .bbcode_ChatMessageSteamStore_Failed_2wa0X a:hover,
.bbcode_ChatMessageSteamStore_Failed_2wa0X a {
border-bottom: 1px dotted grey; }
.bbcode_ChatMessageSteamStore_Name_2-b92 {
font-size: 18px;
font-weight: 0;
font-family: 'Motiva Sans';
letter-spacing: 1px;
color: #eee;
border-bottom: 1px dotted transparent;
margin-top: 1px; }
.bbcode_ChatMessageSteamStore_gwzSZ:not(.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I) .bbcode_ChatMessageSteamStore_GameNameAndIcon_qa-O1:hover .bbcode_ChatMessageSteamStore_Name_2-b92 {
color: white;
border-bottom: 1px dotted grey; }
.bbcode_ChatMessageSteamStore_Header_3X7hC {
display: flex;
margin-bottom: 8px;
background-color: rgba(0, 17, 34, 0.4);
background: linear-gradient(to right, rgba(0, 17, 34, 0.5) 60%, rgba(0, 17, 34, 0.2) 100%);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding-right: 8px;
position: relative; }
.bbcode_ChatMessageSteamStore_HeaderImage_2s811 {
background-color: #0004;
width: 160px;
height: 70px;
border-top-left-radius: 4px;
z-index: 1;
cursor: pointer;
user-select: none; }
.bbcode_ChatMessageSteamStore_HeaderImage_2s811.bbcode_Blurred_3BKMl {
transform: scale(3, 1);
position: absolute;
filter: blur(12px);
z-index: -1; }
.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I .bbcode_ChatMessageSteamStore_HeaderImage_2s811:not(.bbcode_Blurred_3BKMl) {
filter: blur(4px) brightness(0.5);
transform: scale(0.95, 0.9);
cursor: default; }
@media screen and (max-width: 600px) {
.bbcode_ChatMessageSteamStore_HeaderImage_2s811 {
display: none; } }
.bbcode_ChatMessageSteamStore_HeaderImageFiltered_2GO7- {
position: absolute;
width: 140px;
z-index: 2;
text-transform: uppercase;
top: 26px;
left: 8px;
text-align: center;
letter-spacing: 1px;
background-color: rgba(73, 64, 64, 0.51);
color: black;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.8);
border-radius: 3px; }
.bbcode_ChatMessageSteamStore_GameDetails_99hwV {
display: flex;
flex-direction: column;
margin-left: 8px; }
.bbcode_ChatMessageSteamStore_Description_17PwS {
max-height: 80px;
overflow-y: scroll;
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 16px);
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 16px);
padding-bottom: 8px;
overflow: hidden; }
.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I .bbcode_ChatMessageSteamStore_Description_17PwS {
mask-image: none;
-webkit-mask-image: none;
max-height: none; }
.bbcode_ChatMessageSteamStore_Description_17PwS .bbcode_ChatMessageSteamStore_FilteredDescription_3Iqni {
padding: 6px;
width: calc(100% - 16px);
color: #a59090; }
.bbcode_ChatMessageSteamStore_GameNameAndIcon_qa-O1 {
display: flex;
margin-top: 4px;
align-items: center;
cursor: pointer; }
.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I .bbcode_ChatMessageSteamStore_GameNameAndIcon_qa-O1 {
cursor: default; }
.bbcode_ChatMessageSteamStore_GameIcon_1EeOf {
position: initial;
width: 24px;
height: 24px;
margin-right: 6px;
border-radius: 2px;
/* fallback for broken icon which shows before appInfo is loaded */ }
.bbcode_ChatMessageSteamStore_GameIcon_1EeOf img {
width: 24px;
height: 24px; }
.bbcode_ChatMessageSteamStore_GameIcon_1EeOf img:before {
content: ' ';
display: block;
position: absolute;
height: 24px;
width: 24px;
background-color: black; }
.bbcode_ChatMessageSteamStore_Body_1L1hB {
display: flex; }
.bbcode_ChatMessageSteamStore_DetailsContainer_2d12m {
/*min-width: 406px;*/
flex: 2; }
.bbcode_ChatMessageSteamStore_MediaContainer_2i_00 {
flex: 1;
min-width: 232px; }
@media screen and (max-width: 800px) {
.bbcode_ChatMessageSteamStore_MediaContainer_2i_00 {
display: none; } }
.bbcode_ChatMessageSteamStore_MainMedia_28eQq {
margin-top: -46px;
margin-right: 8px;
width: 220px;
border-radius: 8px;
border: 2px solid #2c303b; }
.bbcode_ChatMessageSteamStore_MainMedia_28eQq > img {
border-radius: 8px;
width: 100%;
object-fit: cover;
max-height: 123px;
min-height: 123px;
background-color: black;
margin-bottom: -4px; }
.bbcode_ChatMessageSteamStore_MainMedia_28eQq .bbcode_ChatMessageSteamStore_VideoThumbnail_2c-FU > img {
border-radius: 8px;
width: 100%;
object-fit: cover;
max-height: 123px;
min-height: 123px;
background-color: black;
margin-bottom: -4px; }
.bbcode_ChatMessageSteamStore_ThumbnailsContainer_246HV {
display: flex;
margin-top: 6px;
flex-direction: row;
margin-right: 10px;
flex: 1; }
.bbcode_ChatMessageSteamStore_Screenshot_3XVGb {
flex: 1;
height: 37px;
margin-right: 4px;
margin: 0 3px;
background-color: black;
border: 1px solid #2c303b; }
.bbcode_ChatMessageSteamStore_ScreenshotThumbnail_3R0VG {
width: 100%;
height: 100%;
object-fit: cover; }
.bbcode_ChatMessageSteamStore_VideoThumbnail_2c-FU {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
transition: all .21s ease-in-out;
margin-bottom: 0; }
.bbcode_ChatMessageSteamStore_VideoThumbnail_2c-FU.bbcode_videoPlaying_1UpDR {
opacity: 0;
transform: translateX(-198px) scale(1.7) translateY(5px); }
.bbcode_ChatMessageSteamStore_VideoPlayButton_2oeMy {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #0006;
border: 1px solid #aaa3;
opacity: .75;
transition: all .16s ease-in-out; }
.bbcode_ChatMessageSteamStore_VideoThumbnail_2c-FU:hover .bbcode_ChatMessageSteamStore_VideoPlayButton_2oeMy {
opacity: 1; }
.bbcode_ChatMessageSteamStore_VideoThumbnail_2c-FU:hover .bbcode_ChatMessageSteamStore_VideoPlayButton_2oeMy .SVGIcon_Play {
fill: #fff; }
.bbcode_ChatMessageSteamStore_VideoPlayButton_2oeMy .SVGIcon_Play {
fill: #ccc;
width: 50%;
height: 50%;
margin-left: 18px;
margin-top: 15px;
transition: all .16s ease-in-out; }
.bbcode_ChatMessageSteamStore_VideoLargeContainer_2pzdG {
position: absolute;
width: calc(100% - 16px);
height: calc(100% - 16px);
top: 8px;
left: 8px;
border-radius: 4px;
z-index: 3;
background-color: #000d;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all .26s ease-in-out; }
.bbcode_ChatMessageSteamStore_VideoLargeContainer_2pzdG.bbcode_videoPlaying_1UpDR {
opacity: 1;
pointer-events: initial; }
.bbcode_ChatMessageSteamStore_VideoLargeContainer_2pzdG .SVGIcon_X_Line {
position: absolute;
width: 22px;
height: 22px;
right: 8px;
top: 8px;
cursor: pointer; }
.bbcode_ChatMessageSteamStore_VideoLargeContainer_2pzdG .SVGIcon_X_Line line {
stroke-width: 30px;
stroke: #aaa; }
.bbcode_ChatMessageSteamStore_VideoLargeContainer_2pzdG .SVGIcon_X_Line:hover line {
stroke: #fff; }
.bbcode_ChatMessageSteamStore_VideoLarge_2Dj_u {
height: calc(100% - 16px);
object-fit: contain;
align-self: center;
flex: 1; }
.bbcode_ChatMessageSteamStore_Footer_1mXJd {
width: fit-content;
position: absolute;
bottom: 8px;
display: flex; }
.bbcode_ChatMessagesSteamStore_FilteredContent_34k3I .bbcode_ChatMessageSteamStore_Footer_1mXJd {
position: static;
margin-top: 16px; }
.bbcode_ChatMessageSteamStore_PricingContainer_fYTQK {
width: fit-content;
border: 2px solid black;
border-radius: 4px;
display: flex;
background-color: black;
border-bottom-left-radius: 4px;
height: 28px; }
.bbcode_ChatMessageSteamStore_Pricing_bKeQr {
background-color: black;
color: #acdbf5;
font-size: 16px;
display: flex;
flex-direction: row;
align-items: center; }
.bbcode_ChatMessageSteamStore_Pricing_Discount_1BAfb {
flex: 1;
min-width: fit-content;
align-self: flex-end;
background: linear-gradient(to bottom, #77b84b 30%, rgba(119, 184, 75, 0.8) 100%);
height: calc(100% - 6px);
width: 100%;
padding: 0px 6px;
padding-top: 6px;
border-radius: 2px;
margin-top: 4px;
color: #cffab2; }
.bbcode_ChatMessageSteamStore_Pricing_FinalContainer_3piGx {
flex: 1;
display: flex;
flex-direction: column;
min-width: fit-content;
align-items: flex-end; }
.bbcode_ChatMessageSteamStore_Pricing_Final_2TCu5 {
padding: 0px 8px; }
.bbcode_ChatMessageSteamStore_Pricing_Final_2TCu5.bbcode_hasDiscount_2DoYC {
font-size: 14px;
margin-top: -3px;
margin-bottom: 3px; }
.bbcode_ChatMessageSteamStore_Pricing_Initial_1Jm7h {
text-decoration: line-through;
font-size: 11px;
color: #777;
padding: 0px 8px; }
.bbcode_ChatMessageSteamStore_ViewStore_1_czf {
background: linear-gradient(to bottom, #4b82b8 30%, rgba(75, 130, 184, 0.4) 100%);
padding: 4px 10px;
border-radius: 2px;
color: white;
user-select: none;
color: #acdbf5;
cursor: pointer; }
.bbcode_ChatMessageSteamStore_ViewStore_1_czf:hover {
color: white;
background: linear-gradient(to bottom, #6ea3d8 30%, rgba(92, 148, 204, 0.4) 100%); }
.bbcode_ChatMessageSteamStore_Free_3Zq0f {
padding: 0px 8px;
font-size: 13px; }
.bbcode_ChatMessageSteamStore_CopyURL_23S5M {
width: 18px;
height: 18px;
margin-left: 10px;
margin-top: 6px;
cursor: pointer; }
.bbcode_ChatMessageSteamStore_CopyURL_23S5M:hover .SVGIcon_CopyToClipboard {
stroke: white;
transition: all 0.2s ease-in-out; }
.bbcode_ChatMessageSteamStore_CopyURL_23S5M:active .SVGIcon_CopyToClipboard polyline,
.bbcode_ChatMessageSteamStore_CopyURL_23S5M:active .SVGIcon_CopyToClipboard polygon {
fill: #fff7; }
/*
* Twitter embed
*/
.bbcode_ChatMessageTweet_1R69m {
padding: 20px;
max-width: 616px;
margin-bottom: 16px;
background: linear-gradient(to right, rgba(253, 253, 253, 0.15) 0%, rgba(181, 183, 189, 0.1) 25%, rgba(181, 183, 189, 0.05) 60%, rgba(87, 92, 104, 0.05) 100%);
color: #d3dce6;
font-family: "Helvetica";
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
cursor: pointer;
overflow: hidden; }
.bbcode_ChatMessageTweet_1R69m a, .bbcode_ChatMessageTweet_1R69m a:hover {
border-bottom: none !important;
/* temporary until .msg is out of global scope */
padding: 0; }
.bbcode_ChatMessageTweet_Header_gpcGy {
display: flex;
margin-bottom: 8px; }
.bbcode_ChatMessageTweet_ProfileImage_wRcpO {
width: 48px;
height: 48px;
margin-right: 06px; }
.bbcode_ChatMessageTweet_ProfileImage_wRcpO > img {
border-radius: 48px;
box-shadow: 0px 0px 8px #000000; }
.bbcode_ChatMessageTweet_NameSection_3c-Qw {
display: flex;
flex-direction: column; }
.bbcode_ChatMessageTweet_NameGroup_3VNx1 {
display: flex;
font-weight: bold; }
.bbcode_ChatMessageTweet_1R69m a.bbcode_ChatMessageTweet_Name_1_swN {
color: #fff;
font-size: 20px;
margin-top: 4px; }
.bbcode_ChatMessageTweet_Logo_1ex2E {
background-image: url("../../images/webui/twitter/Twitter_Logo_Blue.png");
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px;
margin-left: auto; }
.bbcode_ChatMessageTweet_Verified_2roaO {
background-image: url("../../images/webui/twitter/Twitter_verified.png");
background-image: no-repeat;
background-size: cover;
width: 18px;
height: 18px;
margin-left: 10px;
align-self: flex-end; }
.bbcode_ChatMessageTweet_1R69m a.bbcode_ChatMessageTweet_ScreenName_3pM50 {
line-height: 24px;
color: #AAB8C2; }
a.bbcode_ChatMessageTweet_Body_2mh_n {
margin: 8px 0px;
color: #d3dce6; }
.bbcode_ChatMessageTweet_Body_2mh_n {
cursor: text; }
.bbcode_ChatMessageTweet_Body_2mh_n > img {
display: block;
margin: 16px;
max-width: 100%;
max-height: 400px;
object-fit: contain;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 10px 64px #000000cb;
border-radius: 4px;
cursor: pointer; }
.bbcode_ChatMessageTweet_Footer_11DrN {
display: flex; }
.bbcode_ChatMessageTweet_Created_1qrLY {
margin-left: auto;
font-weight: bold;
font-size: 14px; }
.bbcode_numberCounterContainer_mswnK {
min-width: 12px;
text-align: center;
display: inline-block;
border: 1px solid #1c1c1d;
border-radius: 4px;
color: white;
background-color: rgba(83, 83, 83, 0.5);
position: relative;
max-height: 16px;
overflow: hidden;
margin-bottom: -4px; }
.bbcode_numberColumn_2SFVv {
animation-timing-function: linear;
animation-fill-mode: backwards;
margin-top: -1px; }
.bbcode_randomNumberLabel_6Nz3l {
text-align: center;
transition-property: opacity;
transition-duration: 1s;
transition-delay: 6s;
opacity: 1;
user-select: none; }
.bbcode_randomNumberLabel_6Nz3l.bbcode_randomActual_1KvCn {
user-select: initial; }
.bbcode_randomNumberShadow_3OoiC {
background: linear-gradient(to bottom, #393a3e 0px, rgba(57, 58, 62, 0) 20%, rgba(57, 58, 62, 0) 50%, #393a3e 100%);
position: absolute;
top: -1px;
left: 0;
right: 0;
bottom: -1px;
border-radius: 3px; }
.bbcode_numberColumn_2SFVv.bbcode_startingZero_20MSk {
opacity: .3;
animation-fill-mode: none; }
.bbcode_randomMsg_2x8Cn:not(.bbcode_MsgAnimating_3a9nR) .bbcode_numberColumn_2SFVv.bbcode_startingZero_20MSk {
opacity: 0.3; }
.bbcode_MsgAnimating_3a9nR .bbcode_numberCounterContainer_mswnK .bbcode_randomNumberLabel_6Nz3l:before {
position: absolute;
top: -16px; }
.bbcode_MsgAnimating_3a9nR .bbcode_numberCounterContainer_mswnK .bbcode_randomNumberLabel_6Nz3l:after {
position: absolute;
top: 17px;
left: 2px; }
@keyframes bbcode_randomNumbers_2IGPW {
0% {
opacity: 1;
transform: translateY(-180px); }
100% {
opacity: 1;
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers0_1UWWl {
0% {
opacity: 1;
transform: translateY(0px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers1_2b7O2 {
0% {
opacity: 1;
transform: translateY(-18px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers2_TxzW6 {
0% {
opacity: 1;
transform: translateY(-36px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers3_1v-a7 {
0% {
opacity: 1;
transform: translateY(-54px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers4_2J19q {
0% {
opacity: 1;
transform: translateY(-72px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers5_2tjCM {
0% {
opacity: 1;
transform: translateY(-90px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers6_behC6 {
0% {
opacity: 1;
transform: translateY(-108px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers7_CGn78 {
0% {
opacity: 1;
transform: translateY(-126px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers8_261Uj {
0% {
opacity: 1;
transform: translateY(-144px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers9_1orHm {
0% {
opacity: 1;
transform: translateY(-162px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
@keyframes bbcode_randomNumbers10_2bRjg {
0% {
opacity: 1;
transform: translateY(-180px); }
90% {
opacity: 1; }
100% {
transform: translateY(0px); } }
.bbcode_randomMsg_2x8Cn:not(.bbcode_MsgAnimating_3a9nR) .bbcode_numberColumn_2SFVv {
animation-name: bbcode_none_3qH01 !important; }
@keyframes bbcode_randomNumbersZero_OKABV {
0% {
transform: translateY(-180px);
opacity: 1; }
100% {
transform: translateY(0px);
opacity: 1; } }
.bbcode_randomValues_Vpi5G {
opacity: .7; }
.bbcode_coinLabel_1GhxZ {
text-transform: uppercase;
color: black;
font-size: 10px;
letter-spacing: 0px;
text-align: center;
padding-top: 10px; }
.bbcode_CoinModel_JExHJ {
border: 1px solid red;
width: fit-content; }
.bbcode_flipCoinContainer_2PyUD {
position: relative;
overflow: visible;
transition: all .2s ease-in-out;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: both;
transform-origin: 50% 50%;
opacity: 0; }
.bbcode_MsgAnimating_3a9nR .bbcode_flipCoinContainer_2PyUD {
opacity: 1;
animation-name: bbcode_coinFade_3vycN; }
.bbcode_flipCoinAndResult_1FjLD {
display: flex;
flex-direction: row;
height: 20px;
overflow: visible; }
.bbcode_coin_AlQa_ {
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin-left: 8px;
perspective: 80px;
position: absolute;
top: 10px;
left: 0px;
transform: rotateY(0deg) rotateX(90deg) scale(1);
transition: all .2s ease-in;
z-index: -1; }
.bbcode_coin_AlQa_ .bbcode_front_h-0pm {
width: 100%;
height: 100%;
background: #b3b3b3;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: both; }
.bbcode_coin_AlQa_ .bbcode_back_22p29 {
width: 100%;
height: 100%;
background: #aaaaaa;
border-radius: 50%;
transform: rotateY(180deg) translateZ(4px);
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter: brightness(1);
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: both; }
.bbcode_MsgAnimating_3a9nR .bbcode_coin_AlQa_ .bbcode_back_22p29 {
animation-name: bbcode_coinFlipBottom_38MhH; }
.bbcode_MsgAnimating_3a9nR .bbcode_coin_AlQa_ .bbcode_front_h-0pm {
animation-name: bbcode_coinFlipTop_BnEA6; }
.bbcode_coin_AlQa_ .bbcode_front_b_2ugtx {
width: 100%;
height: 100%;
background: #686868;
border-radius: 50%;
-webkit-transform: translateZ(-1px);
transform: translateZ(-0.5px);
position: absolute;
top: 0;
left: 0;
z-index: 2; }
.bbcode_coin_AlQa_ .bbcode_back_b_3YNs8 {
width: 100%;
height: 100%;
background: #6e6e6e;
border-radius: 50%;
transform: translateZ(-3.5px);
position: absolute;
top: 0;
left: 0;
z-index: -2; }
.bbcode_coin_AlQa_:before {
content: "";
margin-left: -5px;
width: 3.5px;
height: 100%;
background: #6b6b6b;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transform-origin: 100% 50%;
transform: rotateY(-90deg) translateX(0px);
transform-origin: 100% 50%; }
.bbcode_coin_AlQa_:after {
content: "";
width: 3.5px;
height: 100%;
background: #6b6b6b;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transform: rotateZ(90deg) rotateY(90deg) translateX(0px);
transform-origin: 0% 50%; }
.bbcode_coin_AlQa_ .bbcode_mid_10JhA {
content: "";
margin-left: -5px;
width: 3.5px;
height: 100%;
background: dimgray;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transform-origin: 100% 50%;
transform: rotateY(-90deg) rotateX(45deg) translateX(0px);
transform-origin: 100% 50%; }
.bbcode_coin_AlQa_ .bbcode_mid_10JhA:before {
content: "";
margin-left: -5px;
width: 3.5px;
height: 100%;
background: #888888;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
transform-origin: 100% 50%;
transform: rotateY(-90deg) rotateX(-45deg) translateX(0px);
transform-origin: 100% 50%; }
.bbcode_coinFace_3OmQy {
border-radius: 50%;
width: 34px;
height: 34px;
background-color: gray; }
.bbcode_coinFace_3OmQy .bbcode_flipCoinWinningSide_17gzn {
transform: translateZ(10px); }
.bbcode_coinFace_3OmQy .bbcode_flipCoinLosingSide_g63r6 {
transform: translateZ(-10px); }
.bbcode_MsgAnimating_3a9nR .bbcode_coin_AlQa_ {
animation-name: bbcode_coinFlip_3klbs;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
transform-origin: 50% 50%;
transform-style: preserve-3d; }
@keyframes bbcode_coinSpin_3_X1R {
0% {
transform: rotateY(360deg) rotateX(0deg) translateX(0px); }
50% {
transform: rotateY(0deg) rotateX(90deg) translateX(0px); }
100% {
transform: rotateY(360deg) rotateX(0deg) translateX(0px); } }
@keyframes bbcode_coinFlip_3klbs {
0% {
left: -40px;
transform: rotateY(6300deg) rotateX(0deg) scale(0.5, 0.5); }
10% {
left: 20px; }
30% {
left: 0px; }
90% {
left: 0px;
transform: rotateY(0deg) rotateX(90deg) scale(1, 1); }
100% {
left: 0px;
transform: rotateY(0deg) rotateX(90deg) scale(1, 0); } }
@keyframes bbcode_coinFlipTop_BnEA6 {
0% {
filter: brightness(1); }
30% {
filter: brightness(1); }
40% {
filter: brightness(2); }
50% {
filter: brightness(1); }
100% {
filter: brightness(0.5); } }
@keyframes bbcode_coinFlipBottom_38MhH {
0% {
filter: brightness(1); }
30% {
filter: brightness(0.35); }
100% {
filter: brightness(0); } }
.bbcode_resultLabel_3Lefr {
margin-left: 6px;
text-transform: uppercase;
transform-origin: 100% 50%;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: both;
color: white; }
.bbcode_MsgAnimating_3a9nR .bbcode_resultLabel_3Lefr {
animation-name: bbcode_coinFlipResult_2a-5i; }
@keyframes bbcode_coinFlipResult_2a-5i {
0% {
opacity: 0;
transform: rotateX(90deg) translateY(10px); }
76% {
opacity: 0;
transform: rotateX(90deg) translateY(10px);
color: #7e7e7e; }
80% {
transform: rotateX(45deg) translateY(-8px);
color: #7e7e7e; }
84% {
opacity: 1;
transform: rotateX(0deg) translateY(0px);
color: #7e7e7e; }
100% {
opacity: 1;
transform: rotateX(0deg) translateY(0px);
color: white; } }
@keyframes bbcode_coinFade_3vycN {
0% {
opacity: 1; }
75% {
opacity: 1; }
80% {
opacity: 0; }
100% {
opacity: 0; } }
.bbcode_plusOne_3mCUi {
font-style: normal;
font-size: 24px;
font-weight: 1000;
color: #d5dbe6;
animation-name: bbcode_none_3qH01;
animation-duration: 1.5s;
animation-delay: .2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0.44, 0.11, 0.66, 2.13);
animation-timing-function: cubic-bezier(0.53, 1.15, 0.66, 2.13);
width: fit-content;
animation-fill-mode: both; }
.bbcode_MsgAnimating_3a9nR.bbcode_plusOne_3mCUi {
animation-name: bbcode_plusOne_3mCUi; }
@keyframes bbcode_plusOne_3mCUi {
0% {
opacity: 0;
transform: scale(0.2);
text-shadow: 0px 0px 32px #ffff; }
26% {
opacity: 1;
transform: scale(1);
color: white;
text-shadow: 0px 0px 20px #ffff; }
100% {
color: #d5dbe6;
text-shadow: 0px 0px 0px #fff0; } }
.chatImageContainer,
.chatVideoContainer {
background-color: #2c3036;
padding: 2px;
box-shadow: 0 6px 14px 1px #00000063;
display: inline-block;
margin-bottom: 16px;
position: relative;
transition-property: background-color, box-shadow;
transition-duration: .5s;
transition-timing-function: ease-in-out; }
.chatImageContainer {
max-width: 652px;
max-width: 520px;
min-height: 50px;
transition-property: min-height;
transition-duration: 0s;
transition-delay: 0.2s;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none; }
.chatImageContainer img {
min-width: 100%;
min-height: 100%;
max-height: 840px; }
.chatImageContainer.Resized img {
max-height: none; }
.chatImageContainer.Minimized,
.chatVideoContainer.Minimized {
min-height: 20px;
max-width: 400px;
padding-bottom: 2px; }
.chatVideoContainer {
width: 600px;
padding-bottom: 24px;
box-shadow: none;
background: none; }
.chatVideoContainer video {
border: 2px solid #2c3036;
border-radius: 6px; }
.chatVideoContainer .BBCodeResizeControl {
width: 24px;
height: 14px; }
.chatVideoContainer .BBCodeResizeControl .SVGIcon_Button {
bottom: 2px;
right: 2px; }
.chatVideoContainer video {
width: 100%; }
.chatVideoPlayControl {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
cursor: pointer;
padding: 0px;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
display: flex;
align-items: center; }
.chatVideoPlayControl .playButtonContainer {
width: 64px;
height: 64px;
background-color: #000a;
border-radius: 50%;
padding: 32px;
margin: auto;
align-self: center;
transition: all .16s ease-in-out; }
.chatVideoPlayControl:hover .playButtonContainer {
background-color: #000f; }
.chatVideoPlayControl:hover svg {
transform: scale(1.2); }
.chatVideoPlayControl svg {
padding-left: 4px;
display: block;
margin: 0 auto;
transition: all .21s ease-in-out; }
.chatImageContainer.Resized {
max-width: 1280px; }
.BBCodeResizableComponent.Minimized {
background-color: transparent;
box-shadow: 0 0 0 0 #00000000;
min-height: 0px;
transition-delay: 0.0s; }
.BBCodeResizableComponent.Minimized:hover .BBCodeCollapseControl {
opacity: 1; }
.BBCodeResizableComponent.Minimized:hover .BBCodeCollapseControl .SVGIcon_Button {
fill: white; }
.BBCodeResizableComponent.Minimized:hover .BBCodeCollapsed {
background-color: #5a7585;
color: white; }
.BBCodeCollapsed {
position: absolute;
margin-left: 22px;
background-color: #2e3c44;
padding-top: 2px;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
border-radius: 6px;
opacity: 0;
cursor: pointer;
transform: translateX(32px);
top: 2px;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
transition-property: opacity, transform;
transition-duration: .16s;
transition-timing-function: ease-in-out;
z-index: 1;
pointer-events: none; }
.BBCodeResizableComponent.Minimized .BBCodeCollapsed {
opacity: 1;
transform: translateX(0px);
transition-duration: .46s;
pointer-events: initial; }
.chatImageFull {
width: 100%;
transition: opacity .8s ease-in-out;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
cursor: pointer; }
.Minimized .BBCodeResizableElement {
opacity: 0;
transition-duration: .35s;
height: 0px; }
.BBCodeResizableComponent.Minimized .HideWhenMinimized,
.BBCodeResizableComponent.Minimizing .HideWhenMinimized {
display: none; }
.chatImage {
min-height: 20px;
min-width: 20px; }
.chatImageContainer .LoadingImage {
padding: 12px;
max-width: 1280px;
border: 1px dashed rgba(58, 176, 255, 0.15);
box-shadow: 2px 3px 14px 1px #00000066 inset;
background-color: #0001;
text-transform: uppercase;
font-size: 12px;
color: rgba(58, 176, 255, 0.6); }
.chatImageContainer .LoadingImage a {
text-transform: initial;
color: rgba(58, 176, 255, 0.4); }
.chatImageContainer .LoadingImage a:hover {
text-transform: initial;
color: rgba(58, 176, 255, 0.7); }
.chatImageContainer.FailedToLoad {
padding: 12px;
max-width: 320px;
border: 1px dashed rgba(255, 58, 58, 0.15);
box-shadow: 2px 3px 14px 1px #00000066 inset;
background-color: #0001; }
.FailedToLoadImage span {
color: #bb3827;
text-transform: uppercase;
text-align: center;
font-size: 12px;
letter-spacing: 1px; }
.msg .FailedToLoadImage a {
color: #7e3228; }
.msg .FailedToLoadImage a:hover {
color: #ac726a; }
.msg .chatVideoContainer a,
.msg .chatVideoContainer a:-webkit-any-link,
.msg .chatImageContainer a,
.msg .chatImageContainer a:-webkit-any-link {
outline: none;
border: 0px;
padding-bottom: 0px; }
.msg .NonInlinedEmbed a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: none; }
.msg .NonInlinedEmbed a:hover {
border-bottom: none; }
.NonInlinedEmbed a svg,
.NonInlinedEmbed a div.NonInlinedEmbedLogo {
opacity: 0.8;
padding-right: 4px;
display: inline-block; }
.NonInlinedEmbed a:hover svg,
.NonInlinedEmbed a:hover div.NonInlinedEmbedLogo {
opacity: 1.0; }
.NonInlinedEmbed .SVGIcon_YouTube {
width: 17px;
height: 12px; }
.NonInlinedEmbed .SVGIcon_Hyperlink {
width: 16px;
height: 16px;
margin-top: 3px;
margin-bottom: -3px;
fill: #91e0ff; }
.NonInlinedEmbed .SVGIcon_Image {
width: 16px;
height: 16px;
margin-right: 1px;
padding-bottom: 2px;
vertical-align: middle; }
.NonInlinedEmbed .SVGIcon_Video path,
.NonInlinedEmbed .SVGIcon_Image path {
stroke: #91e0ff;
fill: #91e0ff; }
.NonInlinedEmbed .SVGIcon_Video {
width: 20px;
height: 20px;
margin-right: 1px;
padding-bottom: 2px;
vertical-align: middle; }
.NonInlinedEmbedLogo_Twitter {
background-image: url("../../images/webui/twitter/Twitter_Logo_Blue.png");
background-repeat: no-repeat;
background-size: 100%;
width: 17px;
height: 17px;
background-position-y: 1px;
background-position-x: -2px;
margin-right: -1px; }
.NonInlinedEmbedLogo_Giphy {
background-image: url("../../images/webui/giphy_logo.png");
width: 12px;
height: 16px;
margin-top: 2px;
margin-bottom: -2px;
background-size: contain;
background-position: -1px 0px;
background-repeat: no-repeat; }
.NonInlinedEmbedSingleLine {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.BBCodeResizeControl {
position: absolute;
width: 120px;
height: 120px;
width: 45%;
height: 45%;
right: 0px;
bottom: 0px;
cursor: nwse-resize;
padding: 6px;
opacity: 0;
transition: opacity .3s ease-in-out;
stroke: #000; }
.BBCodeResizeControl .SVGIcon_ResizeIcon path {
fill: white;
stroke-width: 6px; }
.chatImageURL {
position: absolute;
width: 120px;
height: 120px;
width: 35%;
height: 35%;
left: 0px;
bottom: 0px;
cursor: pointer;
padding: 0px;
opacity: 0;
transition: opacity .3s ease-in-out;
stroke: #000;
stroke-width: 0.5px; }
.giphyImg .chatImageURL {
background-image: url("../../images/webui/giphy_logo.png");
width: 32px;
height: 32px;
background-size: contain;
background-position: 0% 50%;
background-repeat: no-repeat;
margin-bottom: 6px; }
.giphyImg .chatImageURL svg {
display: none; }
.giphyImg a.chatImageURL .giphyTag {
margin-left: 32px;
margin-top: 8px;
color: white;
text-shadow: -1px -1px 2px black, 1px -1px 2px black, 1px 1px 2px black, 1px 1px 1px black;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: -4px;
padding-right: 2px;
padding-left: 2px;
font-weight: bold; }
.NonInlinedEmbed .giphySearch {
font-weight: normal; }
.giphyImg a.chatImageURL .giphyTag .giphySearch {
color: #eee;
font-weight: normal; }
.BBCodeRestoreControl {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
padding: 0px;
opacity: 0;
transition: opacity .2s ease-in-out; }
.BBCodeResizableComponent.ActivelyResizing .BBCodeRestoreControl,
.BBCodeResizableComponent:not(.Resized) .BBCodeRestoreControl,
.BBCodeResizableComponent.Restoring .BBCodeRestoreControl {
display: none; }
.Minimized .BBCodeRestoreControl,
.Minimized .chatImageURL,
.Minimized .BBCodeResizeControl {
opacity: 0;
pointer-events: none;
transition-duration: 0s; }
.BBCodeCollapseControl {
position: absolute;
right: 2px;
top: 4px;
width: 24px;
height: 24px;
cursor: pointer;
padding: 0px;
opacity: 0;
transition: opacity .2s ease-in-out;
stroke: #000;
stroke-width: 0.5px; }
.Minimized .BBCodeCollapseControl {
opacity: 1;
width: 16px;
height: 16px; }
.Minimized .BBCodeCollapseControl .SVGIcon_Button {
width: 16px;
height: 16px; }
.BBCodeCollapseControl .SVGIcon_Button {
transition: opacity 0.21s ease-in-out, transform 0.5s ease-in-out, fill 0.21s ease-in-out, stroke 0.21s ease-in-out;
transform-origin: 50% 50%; }
.Minimized .BBCodeCollapseControl .SVGIcon_Button {
transform: rotateZ(-45deg);
opacity: 1; }
.BBCodeCollapseControl .SVGIcon_Button,
.chatImageURL .SVGIcon_Button,
.BBCodeResizeControl .SVGIcon_Button {
position: absolute;
width: 20px;
height: 20px;
right: 5px;
bottom: 6px; }
.BBCodeRestoreControl .restoreSize {
position: absolute;
width: 12px;
height: 12px;
left: 5px;
top: 6px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0px 1px #000000aa, 0 0 0px 1px #000000aa inset;
cursor: pointer; }
.BBCodeResizableComponent:hover .BBCodeRestoreControl:hover {
opacity: 1; }
.BBCodeRestoreControl:hover .restoreSize {
box-shadow: 0 0 0px 1px #000000ff, 0 0 0px 1px #000000ff inset;
opacity: 1; }
.chatImageURL .SVGIcon_Button {
bottom: 0px;
left: 1px; }
.BBCodeCollapseControl .SVGIcon_Button {
top: 0px;
right: 1px; }
.BBCodeResizableComponent:hover .BBCodeCollapseControl {
opacity: 0.5;
stroke: #000;
stroke-width: 4px; }
.chatVideoContainer .chatImageURL .SVGIcon_Button {
bottom: -3px;
left: -2px; }
.BBCodeResizableComponent:hover .BBCodeResizeControl,
.BBCodeResizableComponent:hover .BBCodeRestoreControl,
.chatVideoContainer:hover .chatImageURL,
.chatImageContainer:hover .chatImageURL {
opacity: 0.5;
stroke: #000;
stroke-width: 0.5px; }
.BBCodeResizableComponent:hover .BBCodeCollapseControl:hover,
.BBCodeCollapseControl:hover {
opacity: 1; }
.BBCodeResizableComponent.ActivelyResizing .BBCodeResizeControl,
.BBCodeResizableComponent:hover .BBCodeResizeControl:hover,
.chatVideoContainer:hover .chatImageURL:hover,
.chatImageContainer:hover .chatImageURL:hover,
.chatImageURL:hover,
.BBCodeResizeControl:hover {
opacity: 1;
stroke: #000;
stroke-width: 0.5px; }
.BBCodeResizableComponent.Minimized .chatImageURL,
.BBCodeResizableComponent.Minimized .BBCodeRestoreControl,
.BBCodeResizableComponent.Minimized .BBCodeResizeControl,
.BBCodeResizableComponent.ActivelyResizing .BBCodeCollapseControl,
.chatVideoContainer.ActivelyResizing .chatImageURL,
.chatImageContainer.ActivelyResizing .chatImageURL {
opacity: 0; }
.msg .chatVideoContainer a.chatImageURL,
.msg .chatImageContainer a.chatImageURL {
width: 24px;
height: 24px;
position: absolute;
left: 5px;
bottom: 6px; }
.msg .chatImageContainer.giphyImg a.chatImageURL {
width: fit-content;
max-width: 80%;
display: flex;
flex-direction: row;
bottom: 3px;
left: 8px; }
.BBCodeYouTubeComponent {
background: linear-gradient(to right, rgba(87, 92, 104, 0.3) 40%, rgba(87, 92, 104, 0.05) 100%);
background: linear-gradient(to right, rgba(87, 92, 104, 0.3) 40%, rgba(87, 92, 104, 0.05) 100%);
border-radius: 10px;
padding: 8px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
margin: 8px 0px 8px 0px;
position: relative;
max-width: 520px; }
.BBCodeYouTubeComponent.ActivelyResizing,
.BBCodeYouTubeComponent.Resized {
max-width: initial; }
.BBCodeYouTubeComponent.Minimized {
background: transparent;
padding: 2px;
padding-top: 8px;
padding-bottom: 8px; }
.BBCodeYouTubeComponent_Sizer {
position: relative; }
.BBCodeYouTubeComponent .BBCodeCollapseControl {
right: 10px;
top: 12px; }
.BBCodeYouTubeComponent .BBCodeRestoreControl .restoreSize {
top: 14px;
left: 13px; }
.BBCodeYouTubeComponent.Minimized .BBCodeCollapseControl {
right: 2px;
top: 4px; }
.BBCodeYouTubeComponent_Sizer > .YoutubePlayer {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.BBCodeYouTubeComponent_Sizer > .YoutubePlayer > iframe {
width: 100%;
height: 100%; }
.BBCodeYouTubeComponent.ActivelyResizing .YoutubePlayer {
pointer-events: none; }
.BBCodeYouTubeComponent .BBCodeResizeControl {
height: 18px;
width: 48px; }
.BBCodeTitle {
font-size: 14px;
margin-left: 6px;
margin-top: 6px;
-webkit-app-region: no-drag;
user-select: none;
width: calc( 100% - 82px); }
.BBCodeDetails {
font-size: 12px;
color: #888;
margin-left: 6px; }
.BBCodeOEmbedComponent {
background: linear-gradient(to right, rgba(87, 92, 104, 0.3) 40%, rgba(87, 92, 104, 0.05) 100%);
max-width: 640px;
border-radius: 10px;
padding: 8px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 12px; }
.BBCodeOEmbedComponent .OpenGraphImgContainer {
margin: 0;
background-color: transparent; }
.BBCodeOEmbedComponent .sketchfab-embed-wrapper p {
display: none; }
.BBCodeOEmbedComponent .sketchfab-embed-wrapper {
color: #00000000;
line-height: 0px; }
.BBCodeOEmbedComponent.Twitch iframe {
width: 100%;
height: 360px; }
.BBCodeOEmbedComponent.SoundCloud .oembedProvider,
.BBCodeOEmbedComponent.SoundCloud .oembedTitle {
display: none; }
.BBCodeOEmbedComponent.Streamable .oembedInner iframe {
width: 100%;
height: 330px; }
.oembedInner iframe {
width: 100%; }
.OEmbedPreview {
position: relative; }
.OEmbedPreview img {
width: 100%;
border-radius: 8px;
cursor: pointer;
transition: all .14s ease-in-out; }
.OEmbedPreview .oembedImgContainer:hover img {
filter: brightness(1.2); }
.oembedProvider {
color: white;
font-weight: bold;
font-size: 16px;
user-select: none; }
.oembedHint {
position: absolute;
width: 100%;
bottom: 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px #000, 1px 1px 12px #000, 1px 1px 6px #000;
color: #efefef;
pointer-events: none; }
.oembedImgContainer {
position: relative; }
.oembedTitle {
color: #888;
user-select: none; }
.spoilerLabelContainer .BBCodeResizableComponent:hover .chatVideoPlayControl {
opacity: 1; }
.spoilerLabelContainer .BBCodeResizableComponent.chatVideoContainer {
background-color: #0004; }
.spoilerLabelContainer .BBCodeResizableComponent.chatVideoContainer.Minimized {
background-color: #0000; }
.bbcode_ImageModalBackground_XfE_W {
background-color: #2c3036;
padding: 30px;
display: flex;
align-items: center;
justify-content: center; }
.bbcode_ImageModalContent_1jjqt {
height: 100%;
width: 100%;
object-fit: contain; }
/* Style scrollbar elements */
::-webkit-scrollbar,
.iScrollHorizontalScrollbar,
.iScrollVerticalScrollbar {
height: 12px;
width: 12px;
background: transparent;
overflow: visible; }
::selection {
background: #54a5d4;
text-shadow: 1px 1px 2px #000000aa;
color: #fff; }
/*::-webkit-scrollbar-track
{
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}*/
.iScrollHorizontalScrollbar {
position: absolute;
left: 2px;
right: 2px;
bottom: 2px;
width: 100%; }
.iScrollVerticalScrollbar {
position: absolute;
bottom: 2px;
top: 2px;
right: 2px;
height: 100%; }
::-webkit-scrollbar-thumb,
.iScrollIndicator {
border-radius: 2px;
margin: 4px;
/*box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, .25);*/ }
::-webkit-scrollbar-thumb {
min-height: 32px;
min-width: 32px; }
.iScrollIndicator {
width: 8px;
margin: 1px;
position: absolute; }
::-webkit-scrollbar-thumb:hover,
.iScrollIndicator:hover {
background: #4E5157; }
::-webkit-scrollbar-corner {
background: #202020; }
.ChatRoomContextNoPermission {
opacity: .4;
cursor: default;
pointer-events: none;
user-select: none; }
.ChatRoomContextNoPermission .SVGIcon_Lock {
width: 12px;
height: 12px;
margin-right: 4px;
margin-bottom: -1px; }
.flexRow {
display: flex;
flex-direction: row; }
.flexRowCentered {
display: flex;
flex-direction: row;
align-items: center; }
.flexColumn {
display: flex;
flex-direction: column; }
.scrollMaskVertical {
-webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, black 16px, black calc( 100% - 8px), rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, black 16px, black calc( 100% - 8px), rgba(0, 0, 0, 0) 100%); }
.SVGIcon_Button {
fill: #ffffff;
overflow: visible;
width: 100%;
height: 100%;
max-width: 320px;
max-height: 320px; }
.crossfade {
position: relative;
overflow: hidden; }
.crossfade-anim-exit {
opacity: 1;
transition-timing-function: linear;
transition-property: opacity; }
.crossfade-anim-exit-active {
opacity: 0.01; }
.crossfade-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover; }
.ClientUIControls div {
cursor: default; }
.ClientUIControls :focus {
outline: none !important; }
#ControlZooContainer {
display: flex;
flex-direction: column; }
.DevButton {
color: yellow;
font-size: 18px;
text-align: center;
height: 32px;
border-radius: 4px;
padding: 4px 16px;
margin: 16px;
display: inline-block;
max-width: 200px;
text-transform: uppercase;
background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
background-color: green;
align-content: center;
line-height: 32px;
border: 1px solid #00ff00;
transition-property: background-color;
transition-duration: .32s; }
.DevButton:hover {
background-color: yellowgreen; }
.DevButton:active {
background-color: black; }
.ClientUIControls input[type="submit"],
.ButtonLabel,
.GenericButton {
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
font-size: 16px;
text-align: center;
font-weight: 200;
font-family: 'Motiva Sans';
line-height: 32px;
letter-spacing: 2px;
padding: 0px 16px;
text-overflow: ellipsis;
background-image: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
transition-property: transform, color, background-color, background-image;
transition-duration: .12s;
transition-timing-function: ease-in-out; }
.ClientUIControls input[type="submit"],
.GenericButton {
max-height: 32px;
min-width: 100px;
display: inline-block;
border: 1px solid black;
background-color: #252930;
background-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.4) 100%);
transition-property: background-color, transform;
transition-duration: .16s, .16s;
transition-timing-function: ease-in-out;
margin: 16px;
box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.25); }
.ClientUIControls input[type="submit"]:not([disabled]):focus,
.GenericButton:not([disabled]):focus,
.ClientUIControls input[type="submit"]:not([disabled]):hover,
.GenericButton:not([disabled]):hover {
background-color: #353d4b;
color: white; }
.GenericButton .ButtonLabel {
padding-left: 16px;
padding-right: 16px; }
.ClientUIControls input[type="submit"]:not([disabled]):active,
.GenericButton:not([disabled]):active {
transform: translateY(1px) scale3d(0.98, 0.98, 1); }
/*------------------ POPUPS -------------*/
.PopupGeneric {
max-width: 700px;
border-top: solid 1px transparent;
border-image: url("data:image/svg+xml;utf8, ") 10% stretch;
width: fit-content;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
border-radius: 0px;
background: radial-gradient(ellipse farthest-corner at 0 25%, #262A31 0%, #202329 60%, #0A0B0D 140%);
opacity: 1;
transform: scale3d(1, 1, 1);
box-shadow: 0px 8px 38px 5px rgba(0, 0, 0, 0.75);
transition-duration: .32s;
transition-property: opacity, transform, box-shadow;
transition-timing-function: ease-in-out; }
.ModalAnimation-appear .PopupGeneric,
.ModalAnimation-leave .PopupGeneric {
opacity: 0;
box-shadow: 0px 4px 18px 3px black;
transform: scale3d(0.92, 0.92, 1);
transition-duration: .42s; }
.PopupGenericContent {
opacity: 0;
display: flex;
padding: 32px;
text-align: center;
flex-flow: column nowrap;
transform: scale3d(0.85, 0.85, 1);
transition-property: opacity, transform;
transition-duration: .22s;
transition-delay: 0s;
transition-timing-function: ease-in-out; }
/* workaround to achieve justify-content without pushing content outside of visible area.
see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flex_item_considerations
*/
.PopupGenericContent > :first-child {
margin-top: auto; }
.PopupGenericContent > :last-child {
margin-bottom: auto; }
.PopupGeneric.PopupVisible .PopupGenericContent {
opacity: 1;
transform: scale3d(1, 1, 1);
transition-delay: 0.05s;
transition-duration: .42s; }
.PopupGenericTitle {
font-size: 34px;
text-transform: uppercase;
color: white;
text-align: left;
font-family: 'Motiva Sans Light';
letter-spacing: 4px;
min-width: 300px;
margin-bottom: 16px;
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); }
.PopupGenericSubTitle {
color: #7e7e7e;
font-size: 13px;
margin: auto;
margin-bottom: 10px;
text-align: left;
text-transform: uppercase; }
.PopupGenericBodyText {
color: #7e7e7e;
font-size: 16px;
margin: auto;
margin-bottom: 20px;
text-align: left; }
.PopupGenericControls {
display: flex;
align-self: flex-end;
overflow: hidden; }
.PopupGeneric.PopupVisible .PopupHangingButton {
transform: translateY(0px); }
.PopupHangingButton:hover {
background-color: #2C3038; }
.PopupGeneric:not(.PopupVisible) .PopupHangingButton:not(.NegativeButton):hover,
.PopupHangingButton:active {
background-color: rgba(0, 122, 204, 0.2); }
.PopupGeneric:not(.PopupVisible) .PopupHangingButton.NegativeButton:hover,
.PopupHangingButton.NegativeButton:active {
background-color: #3b2a30; }
.PopupGeneric:not(.PopupVisible) .PopupHangingButton:hover {
transform: translateY(0px);
transition-delay: .5s; }
.PopupHangingButton {
flex-grow: 1;
flex-basis: 100%;
height: 64px;
transform: translateY(64px);
border: 1px solid black;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(to top, transparent 80%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0.4) 100%);
transition-property: background-color, transform;
transition-duration: 0s, .22s;
transition-timing-function: ease-in-out; }
.PopupGenericControls:first-child .PopupHangingButton {
border-left: 0px solid black; }
.PopupGenericControls:last-child .PopupHangingButton {
border-right: 0px solid black; }
.PopupHangingButton .ButtonLabel {
line-height: 64px;
font-size: 20px; }
.PopupHangingButton:hover .ButtonLabel {
color: white; }
.PopupHangingButton:active .ButtonLabel {
transform: translateY(1px) scale3d(0.95, 0.95, 1);
color: #9cdcfe; }
.PopupHangingButton.NegativeButton:active .ButtonLabel {
color: #ffd29a; }
.PopupGeneric select {
width: 100%; }
.ClientUIControls select {
-webkit-appearance: menulist;
-webkit-rtl-ordering: logical;
box-sizing: border-box;
align-items: center;
white-space: pre;
color: #dfe3e6;
font-size: 16px;
font-family: 'Motiva Sans Light';
line-height: 32px;
overflow: hidden;
padding: 12px 10px;
margin-bottom: 30px;
text-overflow: ellipsis;
white-space: nowrap;
width: 300px;
/*cursor: pointer;*/
border-radius: none;
text-transform: uppercase;
letter-spacing: 2px;
border: none;
background-color: #434953;
transition-property: background-color, transform, box-shadow, border;
transition-duration: .16s, .16s;
transition-timing-function: ease-in-out; }
.ClientUIControls select:disabled {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #1F2023;
color: #5D5D5D;
cursor: default; }
.ClientUIControls select option {
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
font-size: 16px;
text-align: center;
font-weight: 200;
font-family: 'Motiva Sans Light';
line-height: 32px;
display: block;
white-space: pre;
font-size: 16px;
min-height: 1.2em;
padding: 0px 2px 1px; }
.ClientUIControls input[type="checkbox"] {
-webkit-appearance: none;
box-sizing: border-box;
width: 20px;
height: 20px;
background-color: #252930;
background-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.4) 100%);
background-size: 100%;
border: 1px solid black;
box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.25);
border-radius: 3px;
vertical-align: middle;
margin-right: 8px;
transition-property: background-color, border;
transition-duration: .32s;
transition-timing-function: ease-in-out; }
.ClientUIControls input[type="checkbox"]:checked {
background-color: #63C1FF;
padding: 4px; }
.ClientUIControls input[type="checkbox"]:hover {
border-color: #007ACC; }
.ClientUIControls input[type="checkbox"]:disabled:hover {
border-color: black; }
.ClientUIControls input[type="checkbox"]:disabled + label {
color: gray; }
.InputLabel {
color: #939393;
transition: color .32s; }
.InputLabel:hover {
color: #63C1FF; }
.ClientUIControls input[type="text"],
.ClientUIControls input[type="password"] {
height: 32px;
box-shadow: inset 2px 2px 8px #000000;
border: 0px solid transparent;
background-color: #181a1e;
color: #555;
font-size: 18px;
letter-spacing: 0.5px;
padding: 0px 14px;
transition-property: background-position, box-shadow, background-color, color, padding;
transition-duration: .32s;
transition-timing-function: ease-in-out; }
.ClientUIControls input[type="password"] {
font-weight: 1200;
letter-spacing: 6px; }
.ClientUIControls input[type="text"]:focus,
.ClientUIControls input[type="password"]:focus {
background-color: #2c3036;
box-shadow: inset 0px 0px 4px #000000;
outline-width: 0px;
color: #aaa;
padding-left: 12px;
background-position: 2px; }
.ClientUIControls input[type="text"]:focus::-webkit-input-placeholder {
color: #5a5c61; }
.ClientUIControls input[type="text"]:hover::-webkit-input-placeholder {
color: #5a5c61; }
.ClientUIControls ::-webkit-input-placeholder {
color: #262a2c;
font-style: italic;
transition: color .32s ease-in-out; }
.ClientUIControls input[type="password"]::selection,
.ClientUIControls input[type="text"]::selection {
background-color: #8aafc0;
color: white; }
.SpecularHighlightContainer {
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
pointer-events: none; }
.SpecularHighlight {
width: 100%;
height: 100%;
background: radial-gradient(ellipse farthest-corner at 50% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
z-index: 10;
pointer-events: none;
transition-property: opacity, transform;
transition-duration: .32s;
transition-timing-function: ease-in-out; }
.ToggleSlider {
width: 40px;
height: 26px;
background: #333;
border-radius: 50px;
position: relative;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); }
.ToggleSlider .Slide {
display: block;
width: 20px;
height: 20px;
border-radius: 20px;
transition: all .4s ease;
/*cursor: pointer;*/
position: absolute;
top: 4px;
left: 3px;
z-index: 1;
background-color: #888888; }
.ToggleSlider input[type=checkbox] {
display: none; }
.ToggleSlider input[type=checkbox]:checked + .Slide {
left: 18px;
background-color: #63c1ff; }
.PopupFullWindow .TitleBar {
bottom: auto;
background-color: rgba(86, 86, 86, 0.1);
background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.03) 95%);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
height: 24px; }
.ModalDialogPopup .PopupFullWindow .TitleBar {
background: none;
background-color: transparent;
border: none;
height: 64px; }
.PopupFullWindow .PopupGeneric {
max-width: none;
width: auto;
height: 100%;
display: flex;
flex-direction: column; }
.PopupFullWindow .PopupGeneric .PopupGenericContent {
flex: auto;
overflow-y: auto;
padding-top: 48px; }
.PopupFullWindow .PopupGenericControls {
align-self: auto;
flex-shrink: 0; }
.PopupFullWindow .PopupGenericBodyText {
margin: 0;
flex: auto; }
.PopupFullWindow .PopupGenericChildren {
flex: auto; }
.SettingsPageContainer {
width: 100%;
height: 100%; }
.SettingsPage {
padding: 20px;
text-align: left; }
.SettingsPage .SettingsGroup {
margin-bottom: 32px; }
.SettingsPage .SettingsGroup > * {
margin-left: 32px; }
.SettingsPage .SettingsGroup h1,
.SettingsPage h1 {
width: 100%;
max-width: 1280px;
color: white;
text-transform: uppercase;
background-image: linear-gradient(to right, #2C323C 50%, #212731 75%, rgba(0, 0, 0, 0) 100%);
margin-left: 0px;
line-height: 38px;
border-radius: 2px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 24px;
padding: 4px;
padding-left: 16px;
letter-spacing: 2px;
font-weight: lighter;
font-size: 24px; }
.SettingsPage .SettingsGroup h2,
.SettingsPage h2 {
width: 100%;
color: white;
font-size: 18px;
margin-left: 16px;
margin-top: 0px;
margin-bottom: 0px;
padding: 4px;
font-weight: lighter; }
.SettingsPage div.SettingsFriendsSubGroup {
margin-left: 8px;
margin-bottom: 18px; }
.SettingsStringValue {
font-weight: bold; }
.SettingsPage a:hover {
text-decoration: underline; }
.SettingsPage div {
color: #ddd;
font-size: 16px;
margin-top: 4px;
margin-bottom: 4px; }
.SettingsCheckBox {
display: flex;
flex-direction: row;
align-items: center; }
.SettingsCheckBox div {
margin-left: 4px; }
.SettingsTextInputDiv {
display: flex;
flex-direction: row; }
/* reset browser styles */
button.DialogButton {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; }
button.DialogButton {
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
margin: 2px 0;
user-select: none;
-webkit-user-select: none;
/* for button */
-moz-user-select: none;
-ms-user-select: none; }
input.DialogInput::-moz-focus-inner,
button.DialogButton::-moz-focus-inner {
border: 0;
padding: 0; }
.DialogInputPlaceholder::placeholder,
.DialogInputPlaceholder::-webkit-input-placeholder {
color: #969696;
font-style: italic; }
/* for some reason, mixing these with ::placeholder confuses chrome */
.DialogInputPlaceholder::-ms-input-placeholder,
.DialogInputPlaceholder:-ms-input-placeholder {
color: #969696;
font-style: italic; }
.PopupFullWindow {
height: 100%; }
.FullModalOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1500; }
.FullModalOverlay.NotReadyToRender {
background: black; }
.FullModalOverlay .ModalPosition_Content {
height: initial;
width: initial;
max-width: 80vw;
max-height: 90vh; }
.ModalOverlayContent {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.ModalOverlayContent.inactive {
z-index: 5; }
.ModalOverlayContent.active {
z-index: 10; }
.ModalOverlayBackground {
background: rgba(0, 0, 0, 0.9);
z-index: 7; }
.ModalOverlayBackground.NotificationBrowserWarning {
background: rgba(0, 0, 0, 0.9); }
.DialogBody {
padding-top: 4px;
padding-right: 12px;
/*border: 2px dotted #f005;*/
display: flex;
flex-direction: column;
flex: 1;
overflow: auto; }
.ModalDialogPopup .DialogContentTransition .DialogBody {
overflow-y: scroll;
-webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, black 16px, black calc( 100% - 8px), rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, black 16px, black calc( 100% - 8px), rgba(0, 0, 0, 0) 100%); }
.DialogInnerBody {
flex: 1;
overflow: auto;
padding-right: 2px;
padding-bottom: 16px; }
.ModalDialogPopup .ModalDialogBody {
margin: 0px; }
/* We need .title-area for dragging the window, but if it covers the entire dialog, it blocks click events from the buttons. */
.ModalDialogPopup .ModalDialogBody .title-area {
height: 80px; }
.ModalDialogPopup .DialogInnerBody {
overflow-y: scroll;
overflow-x: hidden; }
.ModalPosition {
display: flex;
align-content: center;
height: 100%;
flex-direction: column; }
.ModalPosition:focus {
outline: none; }
.ModalDialogPopup .ModalPosition_Dismiss {
display: none; }
.ModalPosition_Dismiss {
position: absolute;
right: 4px;
top: 4px;
z-index: 1; }
.ModalPosition_Dismiss .closeButton {
width: 14px;
height: 14px;
padding: 4px;
background-size: cover;
cursor: pointer;
background-image: none;
border-radius: 4px; }
.ModalPosition_Dismiss .closeButton .SVGIcon_X_Line line {
stroke: #788a92;
stroke-width: 24px; }
.ModalPosition_Dismiss .closeButton:hover .SVGIcon_X_Line line {
stroke: white; }
.ModalPosition_Dismiss .closeButton:hover {
opacity: 1.0; }
.ModalPosition_Content {
box-shadow: 0px 8px 38px 5px rgba(0, 0, 0, 0.75);
margin: auto;
font-weight: 300;
color: #969696;
font-size: 16px;
position: relative;
display: flex;
flex-direction: column; }
.ModalPosition_Content > div:not(.ModalPosition_TopBar):not(.ModalPosition_Dismiss) {
min-height: 0;
min-width: 0;
flex-shrink: 1;
flex-grow: 1; }
.PopupFullWindow .ModalPosition_Content > div:not(.ModalPosition_TopBar):not(.ModalPosition_Dismiss) {
min-height: initial;
flex: 1; }
.DialogContent,
.DialogContentTransition {
background: radial-gradient(circle at top left, rgba(74, 81, 92, 0.4) 0%, rgba(75, 81, 92, 0) 60%), #25282e;
user-select: none; }
.DialogContentTransition {
display: flex;
width: 664px;
max-width: calc( 100% - 64px);
flex: 3.3;
position: relative; }
.ModalDialogPopup .DialogContentTransition {
display: block; }
.ModalDialogPopup .DialogContentTransition > .DialogContent {
position: absolute;
bottom: 0;
top: 0; }
:not(.PopupFullWindow) .DialogContentTransition .opacityfade-anim-exit {
position: absolute; }
.DialogContent {
padding: 32px;
padding-right: 6px;
width: 600px;
max-width: calc( 100% - 38px);
display: flex;
overflow: visible;
position: relative; }
.PagedSettingsDialog_PageListItem,
.DialogToggle_Label {
user-select: none; }
.contextMenuItem .DialogToggle_Label {
white-space: nowrap; }
._DialogNote {
font-size: 12px;
text-transform: uppercase; }
._DialogCenterVertically {
display: flex;
flex-direction: column;
justify-content: space-around; }
.DialogContent_InnerWidth {
max-width: 600px;
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
/*border: 0.5px dashed #f805;*/ }
.DialogContent.DialogContentFullSize {
width: max-content; }
.DialogContentFullSize .DialogContent_InnerWidth {
max-width: none; }
.ModalDialogPopup .DialogContent {
width: 100%;
overflow: visible; }
.ModalDialogPopup .DialogContent_InnerWidth {
max-width: none; }
.DialogContent_InnerWidth > form {
display: flex;
flex-direction: column;
flex: 1; }
.ModalPosition_TopBar {
height: 1px;
background: linear-gradient(to right, #00ccff, #3366ff); }
.Destructive .ModalPosition_TopBar {
background: linear-gradient(to right, #c44848, #c44848); }
.ModalDialogPopup .ModalPosition,
.ModalDialogPopup .ModalPosition_Content {
max-width: none;
max-height: none;
width: 100%;
height: 100%; }
.DialogContent._DialogLayout.PagedSettingsDialog_PageContent .DialogHeader {
margin-bottom: 16px;
margin-right: 0; }
.DialogHeader {
font-weight: 300;
font-size: 32px;
line-height: 36px;
letter-spacing: 2px;
color: #ffffff;
text-transform: uppercase;
flex-shrink: 0;
user-select: none;
margin-right: 26px; }
.DialogSubHeader {
font-weight: 300;
font-size: 24px;
line-height: 36px;
letter-spacing: 2px;
color: #ffffff;
text-transform: uppercase;
flex-shrink: 0;
user-select: none;
margin-right: 26px; }
.DialogContent_InnerWidth .DialogBody .DialogHeader {
margin-right: 0px; }
.DialogHeaderSubtitle {
color: #6e7985;
font-size: 22px;
letter-spacing: 1px;
text-transform: none; }
.DialogHighlight {
color: #4297f8; }
.DialogFooter {
margin-top: 16px;
flex-shrink: 0;
margin-right: 26px; }
.DialogBodyText {
color: #969696;
font-size: 16px;
line-height: 19px;
font-weight: 300;
margin-bottom: 32px;
user-select: none; }
.DialogBodyText a {
color: #969696;
text-decoration: underline; }
.DialogBodyText a:hover {
color: #ffffff; }
.DialogLabel {
cursor: default; }
.DialogLabel,
.DialogLabelStrong {
font-weight: 300;
color: #969696;
text-transform: uppercase;
line-height: 19px;
font-size: 13px;
margin-bottom: 4px;
user-select: none;
letter-spacing: initial; }
.DialogLabelStrong .DialogLabel,
.DialogLabel.DialogLabelStrong {
text-transform: none;
color: #dedede; }
.disabled .DialogLabelStrong .DialogLabel,
.disabled .DialogLabel.DialogLabelStrong {
color: #424853; }
.DialogHBar {
flex: 1;
min-height: 1px;
max-height: 1px;
background: linear-gradient(to right, #393e47 0%, #40464f 20%, #393e47 100%);
margin-bottom: 16px; }
.OrSeparator .DialogHBar {
margin: 0; }
._DialogRow {
display: flex;
flex-direction: row;
padding: 4px;
padding-left: 12px;
margin-bottom: 6px;
justify-content: space-between;
flex-shrink: 0; }
._DialogRow._DialogRowBackground {
background: linear-gradient(to right, #383d45, #383d45); }
._DialogRow ._DialogRowAction {
flex: 1; }
._DialogRow ._DialogRowSecondaryLabel,
._DialogRow ._DialogRowLabel {
flex: 1.5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
align-self: center;
display: flex;
flex-direction: row; }
._DialogRow ._DialogRowSecondaryLabel {
display: block;
flex: 1;
line-height: 32px;
text-align: center;
margin: 2px 0; }
._DialogRow ._DialogRowLabel .SVGIcon_Button {
width: 24px;
height: 24px; }
.disabledNotice {
color: rgba(184, 156, 80, 0.75);
margin-left: 4px; }
.DialogLabelExplainer {
text-transform: none;
text-align: center;
font-weight: 300;
color: #7e7e7e;
font-size: 13px;
margin-top: 4px; }
.DialogInput {
border: 1px solid white; }
.DialogLabelExplainer.Left {
text-align: left; }
.DialogInputRequirementLabel {
color: #b80505;
margin-left: 15px; }
.DialogRequirementLabel {
color: #b80505; }
.DialogInputLabelGroup {
margin-bottom: 22px; }
._DialogSection {
margin-bottom: 26px; }
._DialogTextInputBase,
._DialogInputContainer {
background: rgba(59, 63, 72, 0.5);
color: #dfe3e6;
font-size: 14px;
font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
border: none;
border-radius: 3px;
box-shadow: inset 0px 0px 0px #0000;
transition: all .2s ease-in-out; }
._DialogTextInputBase:focus {
background: rgba(67, 73, 83, 0.6);
box-shadow: inset 1px 1px 8px #000a;
padding-left: 11px; }
._DialogTextInputBase:not(disabled):hover {
background: rgba(67, 73, 83, 0.6); }
._DialogTextInputBase:disabled:hover {
background: rgba(67, 73, 83, 0.3); }
._DialogInputContainer {
padding: 12px;
line-height: 18px;
margin-bottom: 22px; }
._DialogInputContainer:focus {
outline: none; }
.DialogOnOffToggle._DialogInputContainer {
display: flex;
justify-content: space-between;
padding: 6px;
padding-left: 12px; }
.DialogOnOffToggle.Disabled .DialogToggle_Label {
color: #555; }
._DialogInputContainer.Active {
/*outline: 1px solid rgba( 31, 141, 254, 1.0 );*/ }
.DialogDropDown._DialogInputContainer.Active {
outline: none; }
._DialogTextInputBase.inviteURLLink {
padding: 0 12px;
background: #30353b;
margin-right: 4px;
flex-grow: 4;
box-shadow: inset 0px 0px 4px #0006;
border: 0.5px solid rgba(139, 153, 170, 0.4);
border-style: inset; }
._DialogTextInputBase:disabled,
._DialogTextInputBase:read-only {
color: rgba(136, 136, 136, 0.7); }
.InviteLinksTable .DialogInput {
padding: 5px;
margin: 5px;
margin-right: 30px; }
.DialogInput_Wrapper {
display: flex;
flex-direction: row;
position: relative; }
.DialogInput_Wrapper > input.DialogInput {
flex: 1; }
.DialogInput_Wrapper > input.DialogInput:focus {
outline: none; }
button.DialogButton:focus {
outline: none; }
button.DialogButton.DialogInput_CopyAction {
width: auto;
padding-left: 16px;
padding-right: 16px; }
.DialogInput_ClearAction {
position: absolute;
right: 12px;
top: 0;
bottom: 0;
width: 24px;
cursor: pointer; }
.DialogInput {
display: block;
line-height: 22px;
padding: 10px; }
button.DialogButton {
display: block;
line-height: 32px;
color: #dfe3e6;
font-size: 14px;
text-align: center;
border-radius: 2px;
/*margin-bottom: 22px;*/
cursor: pointer;
transition: 0.1s all;
width: 100%;
background: transparent;
transition: all 0.2s ease-out;
background: #3d4450;
background-position: 99% 1%;
background-size: 300% 300%;
position: relative; }
button.DialogButton::before {
pointer-events: none;
user-select: none;
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 200ms ease-in-out; }
button.DialogButton:disabled:hover::before,
button.DialogButton:disabled::before {
opacity: 0; }
button.DialogButton:hover::before {
opacity: 1; }
button.DialogButton:active::before {
opacity: 0; }
button.DialogButton.DialogButtonTall {
height: 44px; }
.VoiceSettings .advancedSettingsButton {
margin-bottom: 0px;
margin-top: 16px; }
.VoiceSettings .advancedSettings {
margin-bottom: 16px; }
.DialogBody.VoiceSettings ._FixedHeight {
padding-bottom: 16px; }
button.DialogButton.Primary {
background: transparent;
background: linear-gradient(to right, #47bfff 0%, #1a44c2 60%);
background-position: 25%;
background-size: 330% 100%; }
button.DialogButton.GreenPlay {
background: linear-gradient(to right, #8ac329 0%, #4a7a16 60%);
background-position: 25%;
background-size: 330% 100%; }
button.DialogButton.GreenPlay:hover {
background: linear-gradient(to right, #8ac329 0%, #4a7a16 60%);
background-position: 0%;
background-size: 330% 100%;
color: white; }
button.DialogButton.GreenPlay:active,
button.DialogButton.GreenPlay:active:hover {
background: linear-gradient(to right, #8ac329 0%, #4a7a16 60%);
background-position: 40%;
transition-duration: .04s; }
button.DialogButton.Secondary.Off {
box-shadow: inset 1px 1px 4px #0003; }
button.DialogButton:active,
button.DialogButton:active:hover {
background: #393f49;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
transition-duration: .04s; }
button.DialogButton.Primary:hover {
background: linear-gradient(to right, #47bfff 0%, #1a44c2 60%);
background-position: 0%;
background-size: 330% 100%;
color: white; }
button.DialogButton.Primary:active,
button.DialogButton.Primary:hover:active {
background: linear-gradient(to right, #47bfff 0%, #1a44c2 60%);
background-position: 40%;
transition-duration: .04s; }
button.DialogButton:hover {
background: #464d58;
color: white; }
button.DialogButton:disabled,
button.DialogButton:disabled:hover {
background: rgba(61, 67, 77, 0.35);
color: #464d58;
box-shadow: none;
cursor: default; }
button.TextButton {
background-color: transparent;
border: 0px hidden transparent;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
padding: 0;
color: white;
cursor: pointer;
font-weight: 100;
border-bottom: 1px dotted #0000; }
button.TextButton .SVGIcon_Button {
transition: all .20s ease-in-out;
margin-right: 2px; }
button.TextButton:hover {
color: white; }
button.TextButton:focus {
outline: none; }
.DialogButton .SVGIcon_Button {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 2px; }
.DialogButton:disabled .SVGIcon_Button {
opacity: .1; }
.DialogOnOffToggle_Control {
float: right;
position: relative;
line-height: 30px;
overflow: hidden;
border-radius: 3px;
background: #3a3f48;
color: rgba(223, 227, 230, 0.5);
font-size: 14px;
display: flex;
flex-direction: row;
cursor: pointer;
user-select: none;
align-self: flex-start;
flex-shrink: 0;
margin-left: 6px; }
.DialogOnOffToggle_Option {
text-transform: uppercase;
width: 66px;
text-align: center;
cursor: pointer;
transition-property: color, background;
transition-duration: 250ms; }
.DialogOnOffToggle_Option:hover:not(.Active) {
background: #464d58; }
.Disabled .DialogOnOffToggle_Option:hover:not(.Active),
.Disabled .DialogOnOffToggle_Option.Active,
.Disabled .DialogOnOffToggle_Option {
background-color: transparent;
color: #555;
cursor: default; }
.Disabled .DialogOnOffToggle_Option.Active {
color: #666; }
.Disabled .DialogOnOffToggle_Option.Active {
background-color: #434953; }
.DialogToggle_Description {
color: #808080;
line-height: 19px;
font-size: 13px;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
padding-top: 8px; }
.DialogOnOffToggle_Option.Active {
color: #dfe3e6;
background: #2d73ff; }
.DialogOnOffToggle_Option:hover {
color: white; }
.PagedSettingsDialog {
/*width: 842px;*/
display: flex;
flex-direction: row;
height: 720px; }
.PagedSettingsDialog_PageListColumn {
background: #2a2d34;
flex: 1;
min-width: 140px;
max-width: 220px;
padding-left: 24px;
padding-top: 40px;
display: flex;
flex-direction: column;
position: relative; }
.PagedSettingsDialog_Title {
text-transform: uppercase;
margin-bottom: 20px;
color: #4297f8;
font-weight: 300;
font-size: 13px;
user-select: none; }
.PagedSettingsDialog_PageList {
line-height: 16px;
white-space: nowrap;
overflow-y: overlay;
flex-shrink: 1; }
.PagedSettingsDialog_PageListItem {
white-space: normal;
max-width: 180px;
text-overflow: ellipsis;
color: #7e7e7e;
font-size: 15px;
font-weight: normal;
text-transform: uppercase;
cursor: pointer;
margin-bottom: 14px; }
.PagedSettingsDialog_PageListItem.DisabledItem,
.PagedSettingsDialog_PageListItem.DisabledItem:hover,
.PagedSettingsDialog_PageListItem.DisabledItem:not(.Active):hover {
color: #414141; }
.PagedSettingsDialog_PageListItem:not(.Active):hover {
color: #cccccc; }
.PagedSettingsDialog_PageListItem.Active {
color: #ffffff;
cursor: default; }
.PagedSettingsDialog_PageContent {
flex: 3; }
.PagedSettingsDialog_PageContentTitle {
color: #ffffff;
font-size: 30px; }
.DialogMenuPosition {
position: absolute;
transition: opacity 200ms;
z-index: 1600; }
.DialogMenuPosition:not(.visible) {
opacity: 0;
pointer-events: none; }
.DialogDropDown {
cursor: pointer;
position: relative; }
.DialogDropDown:hover {
box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.16); }
.DialogDropDown._DialogInputContainer {
margin-bottom: 0;
user-select: none; }
.DialogDropDown_Arrow {
position: absolute;
width: 18px;
top: 14px;
right: 10px; }
.DialogDropDown_Arrow .SVGIcon_DownArrowContextMenu {
fill: #189cff; }
.DialogDropDownMenu._DialogInputContainer {
background: #373c44;
box-shadow: 0px 8px 26px 2px rgba(0, 0, 0, 0.2);
margin-top: 2px; }
.DialogDropDownMenu_Item {
line-height: 40px;
padding: 0 16px;
cursor: pointer; }
.DialogDropDownMenu_Item:hover {
background: #3e444d; }
._DialogColLayout {
display: flex;
flex-flow: row wrap;
justify-content: space-between; }
._DialogColLayout > ._DialogLayout {
flex: 1;
box-sizing: border-box; }
.DialogTwoColLayout > ._DialogLayout {
max-width: calc( 50% - 14px);
min-width: 200px; }
.DialogThreeColLayout > ._DialogLayout,
.DialogTwoThirdColLayout > ._DialogLayout:nth-child(2n+1) {
max-width: calc( 33.33% - 9px);
min-width: 133px; }
.DialogTwoThirdColLayout > ._DialogLayout {
max-width: calc( 66.66% - 18px);
min-width: 266px; }
.DialogLayout_NoMinWidth > ._DialogLayout,
.DialogTwoThirdColLayout.DialogLayout_NoMinWidth > ._DialogLayout {
min-width: 0; }
.DialogDraggable {
cursor: -webkit-grab;
cursor: grab;
user-select: none; }
.DialogDraggable.DraggedOut {
display: none; }
.DialogDraggable_DropGhost {
cursor: -webkit-grabbing;
cursor: grabbing;
opacity: 0.75; }
.DialogDraggable_DragGhost {
cursor: -webkit-grabbing;
cursor: grabbing;
position: fixed;
opacity: 0.75;
z-index: 5000; }
.DialogDropRegion.Active {
/* border: 1px dashed salmon; */ }
.DialogSlider_Container:focus {
outline: none; }
.DialogSlider_Slider {
border: 4px solid #2a2d33;
border-radius: 10px;
position: relative;
height: 10px;
background: #202226;
cursor: pointer;
box-shadow: inset 0px 11px 8px -10px #131313;
user-select: none; }
.DialogSlider_Value {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, #00ccff 0%, #2d73ff 80%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
.DialogSlider_Grabber {
position: absolute;
top: -1px;
bottom: -3px;
margin-left: -6px;
/* should be half of width */
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #89e7ff 0%, #80aaff 80%);
border-radius: 50%;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2); }
.DialogProgressBar_ProgressBarContainer {
border: 4px solid #2a2d33;
border-radius: 10px;
position: relative;
height: 10px;
background: #202226;
cursor: pointer;
box-shadow: inset 0px 11px 8px -10px #131313;
user-select: none;
overflow: hidden; }
.DialogProgressBar_Value {
height: 100%;
background: linear-gradient(to bottom, #00ccff 0%, #2d73ff 80%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 0px;
transition: all .2s linear; }
.DialogListBuilderInput_List {
display: flex;
flex-wrap: wrap;
align-items: start;
line-height: 26px; }
.DialogListBuilderInput_Input {
border: none;
background: transparent;
color: white;
outline: none; }
.DialogListBuilderInput_Input:focus {
outline: none; }
.DialogSpanningTable {
width: 100%;
border-spacing: 0px 6px;
table-layout: fixed; }
.DialogSpanningTable th {
font-weight: normal;
text-align: left;
font-size: 12px;
height: 20px;
text-transform: uppercase; }
.DialogSpanningTable.BannedUsersTable tr.hoverRow,
.DialogSpanningTable.InvitedUsersTable tr.hoverRow,
.DialogSpanningTable.InviteLinksTable tbody tr {
background: linear-gradient(to right, #383d45, #383d45); }
.DialogSpanningTable tr.hoverRow:hover {
background-color: #393d46; }
.DialogSpanningTable td.friendCell {
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px; }
.DialogSpanningTable td.dateCell {
text-align: left;
font-size: 14px; }
.DialogSpanningTable td.buttonCell {
padding-left: 5px;
padding-right: 10px; }
.BannedUsersTable th.friendColumn,
.InvitedUsersTable th.friendColumn {
width: auto; }
.BannedUsersTable th.dateColumn,
.InvitedUsersTable th.dateColumn {
width: 175px; }
.BannedUsersTable th.buttonColumn,
.InvitedUsersTable th.buttonColumn {
width: 130px; }
.InviteLinksTable .inviteCodeColumn {
width: auto; }
.InviteLinksTable .dateColumn {
width: 175px; }
.InviteLinksTable .buttonColumn {
width: 130px; }
.DialogSpanningTable th.tableAlignRight,
.DialogSpanningTable td.tableAlignRight {
text-align: right; }
.DialogCheckbox_Container {
cursor: pointer;
padding: 4px;
margin-bottom: 8px; }
.DialogCheckbox_Container .DialogCheckbox {
float: left;
margin-right: 8px; }
.DialogCheckbox {
width: 22px;
height: 22px;
background-color: #0004;
padding: 0;
box-shadow: inset 1px 0.5px 3px rgba(1, 1, 1, 0.4);
cursor: pointer;
border-radius: 2px; }
.DialogCheckbox .SVGIcon_DialogCheck {
opacity: 0;
transition: all .1s ease-in-out;
width: 18px;
height: 18px;
margin-top: 9%;
margin-left: 12%; }
.DialogCheckbox .SVGIcon_DialogCheck path {
stroke-width: 40px;
stroke-dashoffset: -270.00;
transition: all .18s ease-out;
transition-timing-function: cubic-bezier(1, 0, 1, 0.65);
transition-delay: .3s; }
.DialogCheckbox.Active .SVGIcon_DialogCheck path {
stroke-dashoffset: 90.00;
transition-timing-function: cubic-bezier(1, 0, 1, 0.65);
transition-delay: 0s; }
.DialogCheckbox.Active .SVGIcon_DialogCheck {
opacity: 1; }
.DialogCheckbox.Active .SVGIcon_DialogCheck #stop0 {
opacity: 1; }
.DialogCheckbox.Disabled {
cursor: default;
opacity: .5;
filter: saturate(0.35);
box-shadow: none; }
.DialogCheckbox_Container:hover .DialogCheckbox,
.DialogCheckbox:hover:not(.Disabled) {
background-color: #1e1f23; }
.DialogCheckbox_Container:focus,
.DialogCheckbox:focus {
outline: none; }
.DialogCheckbox .DialogCheck {
width: 100%;
height: 100%;
margin: 0;
padding: 0; }
.DialogRoundCheckbox {
width: 24px;
height: 24px;
border-radius: 50%; }
.DialogRoundCheckbox_Control {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0;
padding: 0;
background-color: #24262b; }
.DialogRoundCheckbox_OuterCircle {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0;
padding: 0;
box-shadow: inset 0.5px 1px 3px rgba(1, 1, 1, 0.4);
display: flex;
justify-content: center;
transition: background-color .08s ease-in-out; }
.DialogRoundCheckbox_Control:focus {
outline: none; }
.DialogRoundCheckbox_OuterCircle:hover {
outline: none;
background-color: #1e1f23;
cursor: pointer; }
.DialogRoundCheckbox_Control .DialogRoundCheckbox_InnerCircle {
width: 50%;
height: 50%;
border-radius: 50%;
align-self: center;
box-shadow: 0px 0px 8px rgba(31, 141, 254, 0.5);
background: linear-gradient(to bottom, #00ccff 0%, #2d73ff 80%);
transform: scale(0);
opacity: 0;
transition: all .1s ease-in-out; }
.DialogRoundCheckbox_Control.Active .DialogRoundCheckbox_InnerCircle {
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
transform: scale(1);
opacity: 1; }
.copiedAnimation {
position: absolute;
left: 0;
right: 0;
opacity: 0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
color: #1b98ff;
transition: all 0s ease-out;
z-index: 0;
pointer-events: none;
user-select: none; }
.copiedAnimation.animationComplete {
opacity: 0;
transition-duration: 1s;
transition-delay: 0.5s; }
.copiedAnimation.animationPlaying {
opacity: 1;
transition-property: transform, opacity;
transition-duration: 0s, 0.6s; }
._FixedHeight {
flex-shrink: 0; }
._FillAvailableHeightAndScroll {
flex: 1;
min-height: 0;
overflow-y: scroll; }
ul {
list-style-type: disc;
list-style-position: inside; }
/*
* Title Bar styles
*/
.title-area {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 18px;
-webkit-app-region: drag;
z-index: 2; }
body.in_global_drag .title-area {
-webkit-app-region: no-drag; }
.titleBarContainer {
position: relative; }
.titleBarContainer .no-drag {
-webkit-app-region: no-drag;
z-index: 3; }
.title-area .title-bar-actions {
display: flex;
flex-direction: row-reverse;
position: absolute;
top: 0px;
right: 2px;
bottom: 0;
max-height: 24px;
-webkit-app-region: no-drag;
pointer-events: auto; }
.singleWindowFocusBar {
width: 100%;
height: 24px;
background: linear-gradient(to right, #007896, #1f3d96);
-webkit-mask: linear-gradient(to bottom, black 0px, black 1px, rgba(0, 0, 0, 0.4) 1px, rgba(0, 0, 0, 0.2) 8px, rgba(0, 0, 0, 0) 100%);
position: absolute;
top: 0;
opacity: 0;
transition: opacity .18s ease-in-out;
pointer-events: none;
user-select: none; }
.focused .singleWindowFocusBar {
opacity: 1;
z-index: 15; }
.title-area-highlight {
height: 24px;
background: linear-gradient(to right, #007896, #1f3d96);
-webkit-mask: linear-gradient(to bottom, black 0px, black 1px, rgba(0, 0, 0, 0.4) 1px, rgba(0, 0, 0, 0.2) 8px, rgba(0, 0, 0, 0) 100%);
opacity: 0;
transition: opacity .18s ease-in-out;
pointer-events: none;
user-select: none; }
.focused:not(.singlewindow) .title-area-highlight {
opacity: 1; }
.title-area-icon {
width: 24px;
height: 18px;
margin: auto 0px auto 0px;
/*background-size: 10px;*/
background-repeat: no-repeat;
background-position: center;
-webkit-app-region: no-drag; }
.title-area-children {
float: right;
margin-right: 84px;
-webkit-app-region: no-drag;
pointer-events: auto;
position: absolute;
top: 4px;
right: 0px;
text-align: right; }
.title-area-icon .SVGIcon_Minimize {
width: 14px;
height: 14px;
margin-top: -2px;
margin-left: 4px; }
.title-area-icon .SVGIcon_Maximize {
width: 14px;
height: 14px;
margin-top: -2px;
margin-left: 4px; }
.title-area-icon .SVGIcon_X_Line {
width: 14px;
height: 14px;
margin-top: -2px;
margin-left: 4px; }
.title-area-icon .SVGIcon_X_Line line {
stroke: #788a92;
stroke-width: 24px; }
.title-area-icon:hover .SVGIcon_Button rect,
.title-area-icon:hover .SVGIcon_Button line,
.title-area-icon:hover .SVGIcon_Button polyline {
stroke: white; }
.maximizeRestoreButton {
/*background-image: url( "../../images/sharedui/chrome/icon_window_max.png" );*/ }
.ModalDialogPopup .maximizeRestoreButton {
display: none; }
.minimizeButton {
/*background-image: url( "../../images/sharedui/chrome/icon_window_min.png" );*/ }
.closeButton:hover {
/*background-image: url( "../../images/sharedui/chrome/icon_window_close_hover.png" );*/ }
.maximizeRestoreButton:hover {
/*background-image: url( "../../images/sharedui/chrome/icon_window_max_hover.png" );*/ }
.minimizeButton:hover {
/*background-image: url( "../../images/sharedui/chrome/icon_window_min_hover.png" );*/ }
.window_resize_grip {
background-image: url("../../images/sharedui/chrome/resizehandleicon.png");
background-size: 16px 16px;
background-position: 4px 4px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
opacity: .3;
position: fixed;
right: 0px;
bottom: 0px;
/* force above other ui. even when fixed, seeing other ui on top */
z-index: 1000; }
.DialogBodyNotificationBar {
font-size: 12px;
letter-spacing: 0px;
color: #52b8e0;
line-height: 18px;
height: 18px;
display: flex;
position: absolute;
margin-top: -2px; }
.permissionDetailsPage .DialogBodyNotificationBar {
margin-top: -18px; }
.DialogBodyNotificationBar svg {
height: 13px;
width: 13px;
margin-left: 0px;
margin-right: 2px;
margin-top: 2px; }
.DialogBodyNotificationBar .SVGIcon_Lock .topLock {
fill: #52b8e0; }
.DialogBodyNotificationBar .SVGIcon_Lock .baseLock {
stroke: #52b8e0; }
.GenericConfirmDialog .friend {
margin-top: 10px; }
.displayColumn {
display: flex;
flex-direction: column; }
.displayRow {
display: flex;
flex-direction: row; }
.fullheight {
height: 100%;
top: 0px;
bottom: 0px; }
.fullWidth {
width: 100%; }
.alignItemsCenter {
align-items: center; }
.alignSelfCenter {
align-self: center; }
.tempText {
font-size: 10px;
color: #f50;
width: 400px;
align-self: center; }
.allCaps {
text-transform: uppercase; }
.flexShrinkNone {
flex-shrink: 0; }
/*
* Throbber
*/
.throbber {
width: 60px;
height: 90px;
display: inline-block; }
.throbber_small {
width: 36px;
height: 36px; }
.throbber_medium {
width: 60px;
height: 60px; }
.throbber_large {
width: 92px;
height: 92px; }
.throbber_xlarge {
width: 120px;
height: 120px; }
.throbber_fixed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.throbber_absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.throbber > div {
float: left;
width: 25%;
height: 100%;
background-color: #67c1f5; }
.throbber > div {
animation: loading_throbber_bar 1s ease-in-out infinite; }
.throbber > div:nth-child(1) {
transform: scaleX(1) scaleY(0.6); }
.throbber > div:nth-child(2) {
margin-left: 12%;
transform: scaleX(1) scaleY(0.6);
animation-delay: 0.16s; }
.throbber > div:nth-child(3) {
margin-left: 12%;
transform: scaleX(1) scaleY(0.6);
animation-delay: 0.32s; }
.WaitingForInterFaceReadyContainer {
width: 100%;
height: 100%;
background-color: #1f2126;
display: flex; }
.WaitingForInterFaceReadyThrobber {
margin: auto;
align-self: center;
width: fit-content; }
.Throbber_Blur {
position: absolute;
filter: blur(12px);
transform: scale(1.25); }
@keyframes loading_throbber_bar {
0% {
transform: scaleX(1) scaleY(0.6); }
30% {
transform: scaleX(1) scaleY(1); }
55% {
transform: scaleX(1) scaleY(0.6); }
100% {
transform: scaleX(1) scaleY(0.6); } }
/*=============TEST STUFF BELOW PLZ DONT DELETE=======================*/
.innerwidth {
border: 3px dashed #f80;
flex: 1;
color: white; }
.form {
border: 1px dotted cyan;
height: 100%;
display: flex;
flex-direction: column; }
.A {
background-color: #F006;
height: 40px; }
.B {
background-color: #0f06;
display: flex;
flex-direction: column; }
.ScrollList {
border: 2px solid pink;
background-color: #000a;
margin: 16px 32px;
overflow-y: auto;
overflow-x: hidden;
height: 200px;
min-height: 40px; }
.FixedHeight {
border: 2px outset red;
height: 60px;
margin: 4px 32px;
background-color: #000a;
margin-bottom: 16px; }
.VariableHeight {
border: 2px inset blue;
height: 60px;
margin: 4px 32px;
background-color: #000a; }
.C {
background-color: #00f6;
height: 40px; }
/*=============TEST STUFF ABOVE PLZ DONT DELETE=======================*/
.largeThrobber {
width: 64px;
height: 64px;
margin-bottom: 18px; }
.mediumThrobber {
width: 32px;
height: 32px;
margin-bottom: 24px; }
.smallThrobber {
width: 16px;
height: 24px; }
.whiteText {
color: white; }
.textLink {
color: white;
text-decoration: underline; }
.allCaps {
text-transform: uppercase; }
body {
color: #969696;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif; }
button {
font-family: "Motiva Sans", Arial, Helvetica, sans-serif; }
img {
-webkit-user-drag: none; }
/* Style scrollbar elements */
::-webkit-scrollbar {
height: 12px;
width: 14px;
background: transparent;
z-index: 12; }
::-webkit-scrollbar-thumb {
width: 10px;
background-color: #434953;
border-radius: 10px;
z-index: 12;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
transition: background-color .32s ease-in-out; }
.shared_common_SubText_iXOar {
color: gray;
font-size: 10px; }
.shared_common_AvatarImage_HVcru {
width: 48px;
height: 48px;
border-radius: 25%;
position: relative; }
.shared_common_AvatarImage_HVcru:after {
content: "N/A";
display: block;
color: #555;
font-size: 10px;
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background-color: #201e25; }
.shared_common_STV_HomeGridPreviewDetails_1FyZE .shared_common_AvatarImage_HVcru {
border: 2px solid red; }
.shared_common_ChatAvatarImage_3n4wV {
width: 48px;
height: 48px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #201e25; }
.shared_common_EditButton_DLPvj {
text-transform: uppercase;
/*background: linear-gradient(to right, #3366ff, #7d6ebc);*/
background: rgba(0, 0, 0, 0);
border: 1px #7d6ebc solid;
display: inline-block;
padding: 8px 32px;
border-radius: 2px;
font-size: 14px;
color: #7d6ebc;
user-select: none;
cursor: pointer;
margin-top: 4px;
margin-right: 4px; }
.shared_common_EditButton_DLPvj.shared_common_Small_lUt7Z {
font-size: 9px;
padding: 4px 8px; }
.shared_common_FlexCenter_2xt9g {
display: flex;
align-items: center;
justify-content: center;
height: 100%; }
html.client_chat_frame body,
html.web_chat_frame body {
background: #000000;
min-height: 100%;
margin: 0;
overflow: hidden; }
.ChatTabs ::-webkit-scrollbar-thumb {
background-color: transparent; }
.ChatRoomList::-webkit-scrollbar-thumb,
.friendlistListContainer::-webkit-scrollbar-thumb {
background-color: rgba(67, 73, 83, 0);
background-clip: padding-box; }
.ChatRoomList .ChatRoomList_Empty {
padding: 10px 20px;
font-size: 14px;
color: rgba(197, 214, 212, 0.35); }
.ChatRoomList_Empty a {
color: rgba(213, 231, 229, 0.5);
text-decoration: none; }
.ChatRoomList:hover::-webkit-scrollbar-thumb,
.friendlistListContainer:hover::-webkit-scrollbar-thumb {
background-color: #434953;
background-clip: padding-box; }
.friendlistListContainer:hover::-webkit-scrollbar-thumb:hover,
.ChatRoomList ::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
background-color: #58606d;
background-clip: padding-box; }
::-webkit-scrollbar-corner {
background: #202020; }
.fullheight {
height: 100%; }
.chat_frame,
.chat_main {
display: flex;
flex-direction: column;
position: relative;
z-index: 1; }
.chat_main,
#popup_target .popup_chat_frame {
width: 100%;
height: 100%; }
.chat_main.resizingSingleWindow {
user-select: none;
cursor: ew-resize; }
.friendlist {
max-width: 300px;
max-width: 100%;
height: 100%;
user-select: none;
cursor: default;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
/*
border-top: 1px solid rgba(26, 31, 38, 1);
border-image: url("data:image/svg+xml;utf8, ") 10% stretch;
*/ }
.TheaterMode.singlewindow .friendsListContainer {
display: none; }
.singlewindow .friendsListContainer {
width: 308px; }
.friendsListContainer {
min-width: 0;
width: 100%; }
.singleWindowDivider {
width: 4px;
height: calc( 100%);
background-color: #22252b;
min-width: 3px;
cursor: ew-resize;
border: 0.5px solid #121216;
border-top: 2px solid rgba(34, 37, 43, 0.8);
border-bottom: 3px solid rgba(34, 37, 43, 0.9);
z-index: 12; }
.singleWindowDivider.friendsListCollapsed,
.TheaterMode .singleWindowDivider {
display: none; }
.errorDisconnected .singleWindowDivider {
top: 32px; }
.resizingSingleWindow .singleWindowDivider,
.singleWindowDivider:hover {
background-color: #333741; }
.chat_main:not(.singlewindow) .friendlist {
max-width: none;
min-width: 0;
width: auto;
flex-grow: 1; }
.chat_main.singlewindow .friendlist .title-bar-actions {
display: none; }
.FriendsListContent {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0; }
.friendlistListContainer {
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
flex-grow: 1;
background: radial-gradient(ellipse farthest-corner at 50% 30%, #212329 0%, #1e2025 50%, #1c1d22 100%);
min-height: 32px; }
.listContentContainer {
position: relative; }
.FriendsListContent .friendlistListContainer > .friendGroup.offlineFriends:first-child,
.FriendsListContent .friendlistListContainer > .friendGroup.onlineFriends:first-child,
.FriendsListContent .friendlistListContainer > .friendGroup:first-child {
border-top: 0.5px solid transparent;
margin-top: 0px; }
body.in_global_drag .friendlist_titlebar {
-webkit-app-region: no-drag; }
.friendListHeaderContainer {
min-height: 84px;
background-color: #0e0f11;
background-color: #23262c;
position: relative;
user-select: none;
cursor: default;
flex-shrink: 0; }
.statusHeaderGlow {
position: absolute;
opacity: 1;
transition: opacity .92s ease-in-out;
pointer-events: none; }
.statusHeaderGlow stop {
transition: stop-color 1s ease; }
.statusHeaderGlow stop:first-child {
stop-color: rgba(117, 174, 197, 0.3); }
.statusHeaderGlow stop:last-child {
stop-color: rgba(0, 122, 204, 0);
stop-opacity: 0; }
.currentUserContainer {
padding-right: 24px; }
.currentUserContainer.ingame .statusHeaderGlow stop:first-child {
stop-color: rgba(140, 188, 84, 0.3); }
.currentUserContainer.ingame .statusHeaderGlow stop:last-child {
stop-color: rgba(140, 188, 84, 0);
stop-opacity: 0; }
.currentUserContainer.golden .statusHeaderGlow stop:first-child {
stop-color: rgba(228, 202, 99, 0.3); }
.currentUserContainer.golden .statusHeaderGlow stop:last-child {
stop-color: rgba(228, 202, 99, 0);
stop-opacity: 0; }
.currentUserContainer.offline .statusHeaderGlow {
opacity: 0; }
.currentUserContainer {
border-bottom: 1px solid rgba(67, 73, 83, 0.5); }
/*.persona_menu_empty{
height:10px;
}*/
.persona_menu_descriptor {
font-size: 11px;
color: #707379;
line-height: 14px; }
.persona_menu_dnd_descriptor {
font-size: 11px;
color: #707379;
padding-left: 20px; }
.currentUserContextMenu {
min-width: 220px; }
.personaContextMenuItem:hover .persona_menu_descriptor, .personaContextMenuItem:hover .persona_menu_dnd_descriptor {
color: #93969c; }
.currentUserAvatar {
/*cursor: pointer;*/
width: 48px;
height: 48px;
box-shadow: 1px 2px 18px rgba(0, 0, 0, 0.3);
transition-property: box-shadow, filter, transform;
transition-duration: .24s, .16s;
transition-timing-function: ease-in-out;
z-index: 100;
position: relative;
-webkit-app-region: no-drag;
cursor: pointer;
border-radius: 2px; }
.currentUserAvatar:hover {
transform: scale(1.05);
filter: brightness(1.2); }
.compactView .currentUserAvatar {
width: 40px;
height: 40px; }
.currentUserAvatarLink {
-webkit-app-region: no-drag; }
.compactView .currentUserContainer .labelHolder {
margin-left: 8px; }
.compactView .AvatarAndUser {
padding: 8px; }
/*.currentUserAvatar:hover
{
filter: brightness( 130% );
box-shadow: 1px 2px 28px rgba( 109, 207, 246, 2 );
}*/
.largeAvatar {
width: 256px;
height: 256px; }
.mediumAvatar {
width: 64px;
height: 64px; }
.smallAvatar {
width: 32px;
height: 32px; }
.socialTabSearchContainer {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative;
z-index: 2; }
.horizontalTabBarSeparator {
width: 100%;
height: 3px;
background-color: #ff4953; }
.socialSearchContainer {
background-color: #434953;
display: flex;
flex-direction: row;
flex-grow: 1; }
.socialInputContainer .inputContainer {
margin: 0 0px 3px 0px;
display: flex;
flex-direction: row; }
.compactView .socialInputContainer .inputContainer {
height: 22px; }
.socialInputContainer {
flex-grow: 1;
transition: all .2s ease-in-out;
opacity: 0;
max-height: 3px;
transform: scale3d(1, 0, 0); }
.MemberListOptionsContainer .socialInputContainer {
width: 172px;
opacity: 1;
max-height: 24px;
transform: scale3d(1, 1, 1);
margin: 8px 8px 0 8px; }
.MemberListViewCompact .MemberListOptionsContainer .socialInputContainer {
width: 0px;
margin-left: 12px;
margin-right: 0px; }
.MemberListOptionsContainer .SVGIcon_DoubleArrow {
cursor: pointer;
width: 16px;
height: 16px;
transform: rotateZ(180deg); }
.socialInputContainer.SearchActive {
transform: scale3d(1, 1, 1);
max-height: 33px;
opacity: 1; }
.socialTabContainer {
display: flex;
flex-direction: row; }
.FriendChatTypingNotification {
width: calc( 100% - 32px);
color: #8097a1;
font-weight: 100;
text-shadow: none;
z-index: 12;
position: absolute;
bottom: 0px;
left: 0px;
padding: 18px 10px 4px 10px;
background-color: #1d1e23;
background: linear-gradient(to top, rgba(26, 28, 33, 0.9) 0%, rgba(29, 30, 35, 0.9) 12px, rgba(29, 30, 35, 0) 80%);
margin-right: 6px;
opacity: 0;
transition: opacity .4s ease-in-out;
pointer-events: none; }
.FriendChatTypingNotification.FriendIsTyping {
opacity: 1; }
.LoadingOlderMessages {
pointer-events: none;
position: absolute;
z-index: 10;
left: 6px;
top: 6px;
opacity: 1;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
transition: opacity .24s ease-in-out; }
.LoadingOlderMessages.Hidden {
opacity: 0; }
.ScrollToBottomButton {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-top: 10px;
overflow: hidden;
text-align: center;
transition-property: transform, opacity;
transition-duration: .3s;
transition-timing-function: ease-in-out;
pointer-events: none;
font-size: 12px;
color: #6d8992;
z-index: 5;
user-select: none; }
.ScrollToBottomButton:hover {
color: white; }
.ScrollToBottomButton.Hidden {
opacity: 0;
transform: translateY(30px); }
.VoiceRoomChatHistory .ScrollToBottomButton.Hidden {
opacity: 0;
transform: translateY(0px); }
.ScratchPadConnect {
display: none;
width: 35px;
height: 24px;
background-color: #2e2f35;
position: absolute;
background: linear-gradient(to right, #3a3e46 0%, #2e2f35 100%);
right: -34px;
top: 26px; }
.InsetWindowOpen .ActiveVoiceChannel .ScratchPadConnect {
display: block; }
.dropConfirmationNotice {
position: absolute;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #0008;
animation-duration: 1.1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row; }
.dropConfirmationNotice .avatar {
width: 48px;
height: 48px;
border-radius: 6px;
border: 2px solid black;
z-index: 2;
align-self: center;
opacity: 0;
transform: scale(0);
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-iteration-count: 1; }
.dropConfirmationNotice.Active {
animation-name: dropConfirmation; }
.dropConfirmationNotice.Active .avatar {
animation-name: dropConfirmationAvatar; }
@keyframes dropConfirmation {
0% {
opacity: 0;
filter: brightness(1); }
10% {
opacity: 1;
filter: brightness(1.3); }
100% {
opacity: 0;
filter: brightness(1); } }
@keyframes dropConfirmationAvatar {
0% {
opacity: 1;
transform: scale(1.2); }
40% {
opacity: 1;
transform: scale(1); }
100% {
opacity: 0;
transform: scale(0); } }
.ScrollToBottomButton.Hidden > span {
pointer-events: none; }
.ScrollToBottomButton > span {
pointer-events: all;
cursor: pointer;
display: inline-block;
box-shadow: 0 0 8px #00000088;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 4px 10px 4px 10px;
background: linear-gradient(to bottom, #434953 0, #22252b 100%); }
.ScrollToBottomButton.UnreadMessages > span {
background: linear-gradient(to bottom, #a16e1a 0, #22252b 100%);
color: #f1f000; }
.friendsListSectionTitle {
background-color: #434953;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 30px;
user-select: none;
cursor: default;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
text-align: left;
color: #b7ccd5;
padding: 0;
position: relative; }
.compactView .friendsListSectionTitle {
height: 26px;
padding: 0; }
.friendsListSectionTitle .SVGIcon_NewChatGroup {
fill: #b7ccd5;
stroke-width: 0px;
width: 20px;
height: 20px;
margin-top: -2px;
margin-right: 2px; }
.compactView .friendsListSectionTitle .SVGIcon_NewChatGroup {
height: 16px;
width: 16px;
margin-top: -1px; }
.friendsListSectionTitle .createChatRoomButton:hover .SVGIcon_NewChatGroup {
fill: white; }
.friendsListSectionTitle .SVGIcon_NewChatGroup line {
stroke: #434953; }
.socialListTab {
/*width: 50%;*/
flex-grow: 1;
height: 30px;
padding-top: 2px;
user-select: none;
cursor: default;
margin-top: 6px;
letter-spacing: 2px;
text-transform: uppercase;
padding-left: 16px;
font-size: 12px;
line-height: 20px;
text-align: left;
color: #40474a;
transition-property: background-color, box-shadow, color, padding;
transition-duration: 233ms;
transition-timing-function: ease-in-out;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
/*border: 0.5px solid red;*/ }
.compactView .socialListTab {
height: 24px; }
.socialListTab.TabSearchActive {
padding-left: 4px; }
.socialListTab .tabLabel {
opacity: 1;
transition: opacity .4s ease-in-out; }
.socialListTab.TabSearchActive .tabLabel {
opacity: 0;
transition-duration: .24s; }
.friendsTabButtonsContainer {
display: flex;
flex-direction: row;
flex-grow: 1;
height: 100%;
padding-left: 12px;
padding-right: 2px;
transition: padding .32s ease-in-out;
/*border: 0.5px dashed white;*/ }
.socialListTab.TabSearchActive .friendsTabButtonsContainer {
padding-left: 0px; }
.friendsTabButtonsContainer .TabSearchButton {
flex-grow: 1;
cursor: text;
display: flex;
justify-content: flex-end; }
.tabSearchTransitionGroup,
.tabSearchTransition {
flex-grow: 1; }
.tab-search-anim-appear,
.tab-search-anim-enter {
opacity: 0.0;
transition: opacity 0.4s ease-out; }
.tab-search-anim-appear.tab-search-anim-appear-active,
.tab-search-anim-enter.tab-search-anim-enter-active {
opacity: 1; }
.tab-search-anim-exit {
opacity: 1;
transition: opacity 0.4s ease-out; }
.tab-search-anim-exit.tab-search-anim-exit-active {
opacity: 0;
overflow: hidden; }
.TabSearchButton {
width: 16px;
height: 24px;
margin-top: 2px;
opacity: 0;
transition-property: background-color, opacity, transform;
transition-duration: 322ms;
transition-timing-function: ease-in-out;
cursor: pointer;
border-radius: 2px; }
.compactView .TabSearchButton {
margin-top: 0;
height: 22px; }
.TabSearchButton:hover {
background-color: rgba(44, 48, 54, 0.5); }
.TabSearchButton .searchIconButton {
width: 22px;
height: 22px;
flex-shrink: 0;
transition: all .3s ease-in-out; }
.TabSearchActive .TabSearchButton .searchIconButton {
width: 0px;
overflow: hidden;
opacity: 0; }
.activeTab .TabSearchButton {
opacity: 1; }
.TabSearchButton .ColorSelector {
stroke: #b7ccd5;
fill: #b7ccd5; }
.TabSearchButton:hover .ColorSelector {
stroke: #fff;
fill: #fff; }
.friendsTabButtonsContainer .TabSearchButton .SVGIcon_MagnifyingGlass {
width: 18px;
height: 18px;
margin-top: 3px;
margin-right: 2px;
cursor: pointer; }
.compactView .friendsTabButtonsContainer .TabSearchButton .SVGIcon_MagnifyingGlass {
margin-top: 2px; }
.friendsTabButtonsContainer .friendRequestButton {
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 1px;
cursor: pointer;
padding-left: 6px;
position: relative; }
.friendsTabButtonsContainer .friendRequestButton .SVGIcon_Notification {
margin-top: 3px;
transition: all .1s ease-in-out;
stroke: #434953; }
.SVGIcon_Notification .topFlap,
.SVGIcon_Notification .baseEnvelope,
.SVGIcon_Notification .note {
transition: all .26s ease-in-out;
stroke-width: 1px; }
.SVGIcon_Notification .topFlap {
transform-origin: 0% 36%; }
.SVGIcon_Notification .note {
opacity: 0; }
.SVGIcon_Notification {
stroke: black; }
.SVGIcon_Notification polygon,
.SVGIcon_Notification polyline,
.SVGIcon_Notification rect,
.SVGIcon_Notification line {
stroke-width: 10px;
fill: #ffdc17;
transition: all .26s ease-in-out; }
.friendRequestButton .SVGIcon_Notification .topFlap {
transform: rotateX(-180deg);
transition-property: transform;
transition-duration: .42s;
transition-delay: .06s;
transition-timing-function: ease-in-out; }
.friendRequestButton:hover .SVGIcon_Notification {
transform: translateY(-2px); }
.friendRequestButton.friendRequestViewActive .SVGIcon_Notification .topFlap {
transform: rotateX(0deg);
transition-delay: 0s; }
.friendRequestButton .SVGIcon_Notification .topFlap polyline {
transition-delay: .24s; }
.friendRequestButton.friendRequestViewActive .SVGIcon_Notification .topFlap polyline {
fill: #9e8350;
transition-delay: 0s;
transition-duration: 0.3s; }
.friendRequestButton .SVGIcon_Notification .note {
transform: translateY(50px);
transition-property: transform, opacity;
transition-duration: .26s, .1s;
transition-delay: 0s, .26s;
transition-timing-function: ease-in-out; }
.friendRequestButton.friendRequestViewActive .SVGIcon_Notification .note {
opacity: 1;
transform: translateY(-10px);
transition-duration: .26s, .1s;
transition-delay: .26s, 0.1s; }
.friendRequestButton.friendRequestViewActive .SVGIcon_Notification .note rect {
fill: white; }
.friendRequestButton .SVGIcon_Notification .note rect {
fill: #858585; }
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest .Bubble {
fill: #ffe292; }
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest line {
stroke: black; }
.confirmInviteRequestActions,
.friendInviteButtons,
.friendInviteContainer {
display: flex;
flex-direction: row;
margin-top: 12px; }
.friendInviteButtons {
padding-right: 8px;
cursor: pointer; }
.friendInviteContainer .friend .inviteLabel {
-webkit-mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0) 100%);
color: #4c91ac; }
.friendInviteContainer .friend .inviteLabel {
color: #4f6168 !important; }
.friendInviteContainer {
justify-content: space-between; }
.friendInviteContainer .friend {
flex-grow: 1;
min-width: 0;
transition: all 0.32s ease-in-out; }
.friendInviteContainer .friend.dim {
filter: saturate(0) brightness(0.3) contrast(0.8) blur(2px); }
.friendInviteBlockContainer {
display: flex;
position: absolute;
left: 19px;
opacity: 0;
pointer-events: none;
transform: translateX(20px);
transition: all .32s ease-in-out; }
.friendInviteContainer.declined .friendInviteBlockContainer {
opacity: 1;
transform: translateX(0px);
pointer-events: initial; }
.compactView .friendInviteContainer.declined .friendInviteBlockContainer {
left: 12px; }
.friendInviteBlockContainer .DialogCheckbox {
margin-right: 13px;
margin-top: 11px;
background-color: #4e1f1f;
border: 1px solid #7a2d2d; }
.compactView .friendInviteBlockContainer .DialogCheckbox {
margin-right: 10px;
margin-top: 6px; }
.friendInviteBlockContainer .DialogCheckbox .SVGIcon_DialogCheck path {
stroke: #dd3322;
stroke-width: 24px; }
.friendInviteBlockContainer .DialogCheckbox:hover {
border-color: #975555; }
.friendInviteBlockContainer .blockCommunicationLabel {
margin-top: 7px;
text-shadow: 0px 0px 8px #000;
font-size: 14px;
color: #c9c9c9; }
.compactView .friendInviteBlockContainer .blockCommunicationLabel {
margin-top: 2px; }
.friendInviteBlockContainer .blockCommunicationLabel.subtitle {
font-size: 12px;
color: #747474;
margin-top: 1px; }
.compactView .friendInviteBlockContainer .blockCommunicationLabel.subtitle {
margin-top: -4px; }
.friendInviteButton {
width: 24px;
height: 24px;
border: 1px solid #555;
flex-shrink: 0;
margin-left: 8px;
align-self: center;
text-align: center;
border-radius: 50%;
transition: all .1s ease-in-out; }
.friendInviteButton .SVGIcon_Check {
width: 18px;
height: 18px;
margin-top: 3px; }
.friendInviteButton .SVGIcon_Check polyline {
stroke: #444;
stroke-width: 24px;
transition: all .1s ease-in-out; }
.declineFriendInvite .SVGIcon_X_Line {
width: 66%; }
.declineFriendInvite .SVGIcon_X_Line line {
stroke: #444;
stroke-width: 30px;
transition: all .1s ease-in-out; }
.friendInviteButton:not(.bright).declineFriendInvite:hover {
border-color: #732;
color: #732; }
.friendInviteButton:not(.bright).declineFriendInvite:hover .SVGIcon_X_Line line {
stroke: #732; }
.friendInviteButton:not(.bright).acceptFriendInvite:hover {
border-color: #273; }
.friendInviteButton:not(.bright).acceptFriendInvite:hover .SVGIcon_Check polyline {
border-color: #273;
stroke: #273; }
.friendInviteButton.bright.acceptFriendInvite:hover,
.friendInviteButton.bright.declineFriendInvite:hover {
background-color: #4f5764; }
.friendInviteButton.declineFriendInvite,
.friendInviteButton.acceptFriendInvite {
color: #444; }
.friendInviteButton.bright.acceptFriendInvite,
.friendInviteButton.bright.declineFriendInvite {
background-color: #3d434d;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.6); }
.friendInviteButton.bright.acceptFriendInvite .SVGIcon_Check polyline {
stroke: #2d3; }
.friendInviteButton.bright.declineFriendInvite .SVGIcon_X_Line line {
stroke: #d32; }
.confirmInviteRequestContainer .confirmInviteButton {
flex: 1;
text-align: center;
background-color: #3d434d;
color: #dfe3e6;
padding: 4px;
margin: 4px;
font-size: 14px;
transition: 0.2s all;
cursor: pointer; }
.confirmInviteRequestContainer .cancelAddFriends {
position: absolute;
top: 4px;
right: 10px;
width: 24px;
height: 24px;
cursor: pointer; }
.confirmInviteRequestContainer .cancelAddFriends .SVGIcon_Arrow polyline {
stroke: #daa81f;
stroke-width: 20px;
transition: all .21s ease-in-out; }
.confirmInviteRequestContainer .cancelAddFriends:hover .SVGIcon_Arrow polyline {
stroke: #fce3a0;
transform: translateY(-32px); }
.confirmInviteButton.dim {
cursor: default; }
.confirmInviteRequestContainer .confirmInviteButton:hover {
color: white;
background-color: #464d5a; }
.confirmInviteRequestContainer {
display: flex;
flex-direction: column;
padding: 0 6px; }
.declineFriendInvite.bright,
.acceptFriendInvite.bright {
border-color: transparent; }
.declineFriendInvite.dim,
.acceptFriendInvite.dim {
border-color: #333; }
.confirmInviteButton.confirmInvites {
background-color: #3366ff;
background: linear-gradient(to right, #3366ff 0%, #3366ff 50%); }
.confirmInviteButton.confirmInvites:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.26);
background: linear-gradient(to right, #11aaff 0%, #3366ff 50%); }
.confirmInviteRequestContainer .confirmInviteButton.dim:hover,
.confirmInvites.dim:hover,
.confirmInvites.dim {
opacity: 0.5;
color: #969696;
border-color: #333;
background-color: #333;
background: none; }
.clanInviteContainer {
height: 38px;
margin: 2px 0 2px 0;
padding: 2px 0 2px 6px;
display: flex;
flex-direction: row;
flex-grow: 1;
min-width: 0;
transition: all 0.32s ease-in-out;
position: relative; }
.clanInviteContainer .clanAvatar {
position: relateive;
padding-right: 2px;
height: 36px;
margin: 0px;
transform: scale(0.86, 0.86) translateX(0px); }
.clanInviteContainer .clanName {
flex-grow: 1;
align-self: center;
margin-left: 6px;
min-width: 0;
margin-top: 0px;
transition-property: transform, opacity;
transition-duration: .24s;
transition-delay: .2s;
transition-timing-function: ease-in-out;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
transition: text-overflow 0s linear;
color: #ccc; }
.clanActionButtons {
margin-right: 6px;
display: flex;
flex-direction: column; }
.clanActionButtons button.TextButton {
color: #888; }
.clanActionButtons button.TextButton:hover {
color: #eee; }
.clanInviteContainer a {
color: #ccc;
text-decoration: none;
display: flex;
flex-direction: row;
flex-grow: 1;
min-width: 0; }
.clanInviteContainer a:hover .clanName {
color: white; }
.clanInviteContainer .clanAvatar .clanAvatarIcon {
border: 1px solid #383c43;
height: calc( 100% - 2px);
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.3);
transition: filter .24s ease-in-out; }
.clanInvitesGroupContainer {
padding: 0 6px;
margin-top: 6px;
margin-bottom: 8px; }
.clanInvitesGroupContainer .clanDetails {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px; }
.clanInvitesGroupContainer .statMembersTotal {
color: #888;
margin-right: 16px; }
.clanInvitesGroupContainer .statMembersOnline,
.clanInvitesGroupContainer .statMembersInGame {
margin-right: 16px; }
.clanInvitesGroupContainer .statCircle {
margin-right: 3px; }
.clanInvitesGroupContainer .clanInviteTitle {
color: #ffc628;
font-size: 14px;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
margin-left: 0px;
display: flex;
flex-direction: row;
transition: color .2s ease-in-out;
margin-left: 10px; }
.clanInvitesGroupContainer a.clanManageButton {
flex: 1;
text-align: center;
background-color: #3d434d;
color: #dfe3e6;
padding: 4px;
margin: 4px;
font-size: 14px;
transition: 0.2s all;
cursor: pointer;
text-decoration: none;
align-self: center;
display: flex;
justify-content: center; }
.friendlistListContainer {
position: relative; }
/* override any persona state colors if a friend request*/
.friendGroup.friendRequests .friend:hover {
background-color: transparent; }
.friendGroup.friendRequests .friend .avatarHolder img.avatar {
filter: brightness(1) saturate(1); }
.mutualFriendNumber {
color: #82d7ff;
color: #6dcff6; }
.inputContainer {
margin: 0 6px 6px 6px;
height: 24px;
border-radius: 2px;
overflow: hidden; }
.friendSearchInput[type="text"] {
width: 100%;
height: 100%;
box-shadow: inset 2px 2px 8px #00000075;
border: 0px solid transparent;
background-color: #262930;
color: #555;
font-size: 12px;
letter-spacing: 0.5px;
padding-left: 24px;
transition-property: background-position, box-shadow, background-color, color, padding;
transition-duration: .32s;
transition-timing-function: ease-in-out;
background-image: url("../../images/webui/searchicon.png");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: 6px 4px; }
.friendSearchInput[type="text"]:focus {
background-color: #2c3036;
box-shadow: inset 0px 1px 4px #000000aa;
outline-width: 0px;
color: #aaa;
padding-left: 22px;
background-position: 4px 4px; }
.friendSearchInput:hover::placeholder,
.friendSearchInput:focus::placeholder {
color: #5a5c61; }
.friendSearchInput::placeholder {
color: rgba(76, 84, 89, 0.5);
font-style: italic;
font-size: 12px;
margin: 0px;
transition: color .32s ease-in-out; }
.MemberListOptionsContainer .friendSearchInput::placeholder {
color: rgba(90, 92, 97, 0.7); }
.MemberListOptionsContainer .friendSearchInput:hover::placeholder,
.MemberListOptionsContainer .friendSearchInput:focus::placeholder {
color: #686a70; }
.friendSearchInput::selection {
background-color: #8aafc0;
color: white; }
.friendSearchClear {
position: absolute;
width: 28px;
height: 26px;
right: -2px;
top: 0px;
opacity: 0;
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
pointer-events: none;
cursor: pointer;
display: flex;
z-index: 2; }
.friendSearchClear .SVGIcon_X_Line {
width: 14px;
height: 14px;
margin: auto; }
.friendSearchClear .SVGIcon_X_Line line {
stroke: white;
stroke-width: 26px; }
.friendSearchNoResultsContainer {
margin: 15px;
font-size: 14px; }
.friendSearchNoResultsContainer .searchSteamSuggestion {
margin-top: 20px; }
.friendSearchNoResultsContainer a {
color: #969696;
text-decoration: underline;
font-weight: bold; }
.MemberListOptionsContainer .inputContainer {
margin: 0px; }
.socialInputContainer .friendSearchInput[type="text"] {
padding-right: 25px; }
.Page_Misc .friendSearchInput[type="text"] {
width: 296px;
height: 32px;
font-size: 20px;
margin-left: 11px;
background-position: 6px 50%;
padding-left: 32px; }
.Page_Misc .friendSearchInput::-webkit-input-placeholder {
color: #666;
font-style: normal;
font-size: 16px; }
.Page_Misc .friend {
margin-top: 16px;
margin-left: 16px;
width: 210px; }
.SearchActive .friendSearchClear {
opacity: .4;
pointer-events: auto; }
.compactView .SearchActive .friendSearchClear {
margin-top: -1px; }
.friendSearchClear:hover {
opacity: 1; }
.activeTab {
background-color: #434953;
box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.05), 4px -1px 1px 0px rgba(0, 0, 0, 0.05);
color: #b7ccd5; }
.groupTab {
border-top-right-radius: 0px;
border-top-left-radius: 6px;
margin-right: 0px;
margin-left: 6px; }
.friendGroup {
padding-bottom: 0px; }
.friendGroup .ReactVirtualized__Grid__innerScrollContainer {
padding-bottom: 16px; }
.FriendPicker_Suggestions.CompactFriendsList .createCategoryContainer {
display: none; }
.createCategoryContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: row; }
.createCategoryButton {
width: 18px;
height: 18px;
flex-shrink: 1;
margin-right: 4px;
margin-top: 2px; }
.createCategoryButton .SVGIcon_PlusCircle circle {
display: none; }
.AssignCategoriesDialog_Friend {
margin-bottom: 16px;
padding: 6px;
background: #3d434d; }
.FriendCategoryCheckboxes_List {
max-height: 300px;
overflow: auto;
margin-bottom: 16px; }
.AssignCategoriesDialog_AddNewButton {
margin-bottom: 32px; }
.fillSpace {
width: 100%;
height: 100%;
flex: 1; }
.FriendsListContent .friendlistListContainer .friendGroup.onlineFriends {
border-top: 0.5px solid rgba(15, 165, 224, 0.5);
background: linear-gradient(to bottom, rgba(72, 87, 112, 0.2) 0, rgba(67, 73, 83, 0) 320px);
background: linear-gradient(to bottom, rgba(72, 87, 112, 0) 0, rgba(67, 73, 83, 0) 320px);
margin-top: 8px; }
.FriendsListContent .friendlistListContainer .friendGroup.offlineFriends {
border-top: 0.5px solid rgba(143, 143, 143, 0.25);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(67, 73, 83, 0) 320px);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(67, 73, 83, 0) 320px);
margin-top: 8px; }
.FriendsListContent .friendlistListContainer .friendGroup.onlineFriends .groupName,
.FriendsListContent .friendlistListContainer .friendGroup.offlineFriends .groupName {
color: #c5d6d4; }
.FriendsListContent .friendlistListContainer .friendGroup.friendRequests .groupName {
color: #ffc628; }
.friendGroup.Grid {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.friendGroup.Friends {
/* background: linear-gradient( to right, rgba(41,73,25,1) 5%, rgba(26,28,28,1) 95% );*/
border-bottom: 1px solid #5e95cc; }
.groupHeaderContainer {
display: flex;
flex-direction: row; }
.groupHeaderContainer .groupName {
flex: 1; }
.groupHeaderContainer .SortByRecent {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-right: 8px;
transition: all 0.26s ease-in-out;
cursor: pointer; }
.SVGIcon_SortBy {
stroke: #fff; }
.groupHeaderContainer .SortByRecent .SVGIcon_SortBy {
stroke: #666; }
.groupHeaderContainer .SortByRecent:hover .SVGIcon_SortBy {
stroke: #fff; }
.SVGIcon_SortBy .alphabet,
.SVGIcon_SortBy .arrow,
.SVGIcon_SortBy .time {
transition: all 0.26s ease-in-out;
transform-origin: 36% 50%; }
.groupHeaderContainer .SortByRecent.Recent .SVGIcon_SortBy .alphabet {
opacity: 0;
transform: rotateZ(-180deg); }
.SVGIcon_SortBy .time {
opacity: 0;
transform: rotateZ(180deg); }
.groupHeaderContainer .SortByRecent.Collapsed {
opacity: 0; }
.groupHeaderContainer .SortByRecent.Recent .SVGIcon_SortBy .time {
opacity: 1;
transform: rotateZ(0deg); }
.friendGroup .groupName {
color: #c5d6d4;
font-size: 14px;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
margin-left: 0px;
margin-top: 4px;
display: flex;
flex-direction: row;
transition: color .2s ease-in-out;
cursor: pointer; }
.chatRoomMembers .friendGroup .groupName {
margin-left: 11px;
position: relative;
overflow: visible; }
.friendGroup.offlineFriends .groupName,
.friendGroup.onlineFriends .groupName {
font-size: 14px;
color: #c5d6d4; }
.CompactFriendsList .friendGroup.offlineFriends .groupName,
.CompactFriendsList .friendGroup.onlineFriends .groupName {
font-size: 12px; }
.friendGroup .groupName span {
transition: opacity .24s ease-in-out, transform .24s ease-in-out, font-weight .24s ease-in-out;
transform-origin: 0% 50%; }
.friendGroup .groupName hr {
height: 0px;
margin-left: 5px;
margin-top: 12px;
border-color: rgba(114, 114, 114, 0);
border-width: .5px;
flex: 1 1 auto; }
.recentChatsGroup {
width: 100%;
z-index: 10; }
.recentChatsGroup .friendGroup {
margin: 0px;
position: relative;
padding: 0px;
padding-top: 4px;
transition: all .32s ease-in-out; }
.recentChatsGroup .friendGroup .groupName {
position: relative; }
.recentChatsGroup .friendGroup .groupName hr {
margin-right: 8px; }
.recentChatsGroup .recentClearFriend {
width: 16px;
height: 16px;
position: absolute;
right: 4px;
top: 12px;
align-self: center; }
.recentChatsGroup .recentClearFriend .SVGIcon_X_Line line {
stroke: #676666;
stroke-width: 20px;
transition: all .1s linear; }
.recentChatsGroup .recentClearFriend:hover .SVGIcon_X_Line line {
stroke: #fff;
stroke-width: 25px; }
.recentChatsGroup .friendGroup {
opacity: 1; }
.recentChatsGroup .friendGroup.emptyRecentList {
opacity: 0;
margin-bottom: -20px;
padding: 0; }
.friendGroup .groupIcon {
margin-right: 8px;
height: 24px; }
.friendGroup.taggedGroup {
position: relative; }
.recentChatsGroup .friendGroup .groupName,
.friendGroup.taggedGroup .groupName,
.friendGroup.gameGroup .groupName {
color: #c5d6d4; }
.friendGroup .groupName .groupCount {
color: #73c257;
margin-left: 4px;
letter-spacing: 0px;
font-size: 12px;
opacity: 0;
transform: translateX(-4px);
transition: all .28s ease-in-out; }
.chatRoomMembers .friendGroup .groupName .groupCount {
opacity: 1;
margin-left: 8px;
color: #666; }
.friendGroup.offlineFriends .groupName .groupCount,
.friendGroup.onlineFriends .groupName .groupCount,
.friendGroup .groupName .groupCount.collapsed {
opacity: 1;
transform: translateX(0px);
color: #676666; }
.friendGroup.taggedGroup,
.friendGroup.gameGroup {
border-top: 0.5px solid rgba(143, 143, 143, 0.25);
margin-top: 4px; }
.CompactFriendsList .friendGroup.taggedGroup,
.CompactFriendsList .friendGroup.gameGroup {
margin-top: 0px; }
.CompactFriendsList .friendGroup.taggedGroup .groupName,
.CompactFriendsList .friendGroup.gameGroup .groupName {
font-size: 12px; }
.compactQuickAccess .FavoriteFriend_GameIcon {
width: 16px;
height: 16px; }
.CompactFriendsList .friendsContainer {
padding-bottom: 8px;
transition: padding .2s ease-in-out; }
.CompactFriendsList .friendsContainer.groupCollapsed {
padding-bottom: 0px; }
.friend {
color: #898989;
display: flex;
/*border-radius: 2px;*/
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
transition-property: box-shadow, background-color;
transition-duration: 0.04s;
transition-timing-function: ease-in-out; }
.friendGroup .friend,
.friendGroup .SteamPlayerGroupFooter {
height: 38px;
margin: 2px 0px 2px 0px;
padding: 2px 0px 2px 12px;
flex-direction: row; }
.friendGroup .SteamPlayerGroupFooter {
height: 16px;
padding-top: 0; }
.friendGroup.gameGroup:not(.OtherGamesGroup) .SteamPlayerGroupFooter,
.friendGroup.gameGroup:not(.OtherGamesGroup) .friend {
padding: 2px 0px 2px 44px; }
.CompactFriendsList .friend,
.CompactFriendsList .friendGroup .friend,
.CompactFriendsList .friendGroup .SteamPlayerGroupFooter,
.CompactFriendsList .friendGroup.gameGroup:not(.OtherGamesGroup) .friend {
height: 22px;
margin: 2px 0px 2px 0px;
padding: 4px 0px 4px 12px;
transition: all .21s ease-in-out; }
.CompactFriendsList .friendlistListContainer .friendGroup.gameGroup .friend {
padding: 4px 0px 4px 44px; }
.CompactFriendsList .friend.ingame,
.CompactFriendsList .friendGroup .friend.ingame {
height: 22px; }
.CompactFriendsList .friendGroup.gameGroup:not(.OtherGamesGroup) .SteamPlayerGroupFooter {
/*padding-left: 12px;*/
height: 18px;
margin-top: -4px;
margin-bottom: 6px; }
.chatRoomVoiceChannel.ActiveVoiceChannel .CompactFriendsList .friend.ingame {
height: 22px; }
.chatRoomVoiceChannel.ActiveVoiceChannel .CompactFriendsList .friend.ingame .labelHolder {
margin-top: 0; }
.CompactFriendsList .friend.ingame .labelHolder {
margin-top: -2px; }
/* ------ */
/* MinimizeMemberList - only show avatars in a row */
.MinimizeMemberList .CompactFriendsList,
.MinimizeMemberList .VoiceChannelParticipants.CompactFriendsList {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.MinimizeMemberList .CompactFriendsList .friend .labelHolder {
display: none; }
/* ------ */
.friend.Grid {
height: 220px;
width: 220px;
flex-direction: column; }
.currentUserContainer.online .status,
.friend.online .status {
color: #4c91ac; }
.friend.offline {
color: #7a7a7a; }
.friend.online {
color: #6dcff6; }
.friend.ingame {
color: #e3ffc2; }
.currentUserContainer.golden .playerName,
.friend.golden {
color: #e4ca63; }
.friend.watchingbroadcast {
color: #c9bdf7; }
.friendStatusHover.ingame:hover,
.friendStatusHover.ingame.Friend_ContextMenuActive {
background-color: rgba(39, 52, 36, 0.3); }
.friendStatusHover.online:hover,
.friendStatusHover.online.Friend_ContextMenuActive {
background-color: rgba(36, 52, 64, 0.3); }
.friendStatusHover.offline:hover,
.friendStatusHover.offline.Friend_ContextMenuActive {
background-color: rgba(0, 0, 0, 0.5); }
.friend.ingame .status {
color: #91c257; }
.quickAccessFriends .favoriteElement:hover .friend {
background-color: rgba(36, 52, 64, 0);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0); }
.quickAccessFriends.compactQuickAccess .favoriteElement:hover .friend .avatarHolder {
transform: scale(1.1); }
.quickAccessFriends .favoriteElement:hover .friend .avatarHolder {
transform: scale(1); }
.quickAccessFriends .favoriteElement:hover .friend .playerName {
color: white; }
.FriendPicker_Suggestions .friend.offline {
color: #aaa; }
.friend.offline .avatarHolder img.avatar {
filter: brightness(60%) saturate(50%); }
.quickAccessFriends .favoriteElement:hover .friend .avatarHolder img.avatar,
.friend.offline:hover .avatarHolder img.avatar,
.friend.offline.Friend_ContextMenuActive .avatarHolder img.avatar {
filter: brightness(100%) saturate(100%); }
.friend.dropGhost {
opacity: 0.5; }
.friend.dragOriginGhost {
opacity: 0.25; }
/*.friendsContainer .friend .avatarHolder img.avatar:hover
{
box-shadow: 2px 1px 6px 0px rgb(120, 131, 146);
}
.groupList .friend .avatarHolder img.avatar:hover
{
box-shadow: 2px 1px 6px 0px rgb(120, 131, 146);
}
*/
.DialogCheckbox_Container.DNDCheckBox {
padding: 0;
margin: 0;
cursor: default;
display: flex;
flex-direction: row;
align-items: center; }
.DialogCheckbox_Container.DNDCheckBox .DialogCheckbox {
width: 16px;
height: 16px;
margin-right: 4px;
cursor: default; }
.DNDCheckBox .DialogCheckbox svg {
width: 12px;
height: 12px;
margin-bottom: 1px; }
.DNDCheckBox .DialogToggle_Label {
padding-right: 12px; }
.ContextMenuPopupBody .DNDCheckBox .DialogToggle_Label span {
margin-right: 12px; }
.friend .connectionSpinner {
display: none; }
.CompactFriendsList .friend .avatarHolder img.avatar {
border: 0px solid transparent;
height: 100%; }
/*.CompactFriendsList .friend .avatarHolder img.avatar:hover
{
box-shadow: 1px 1px 6px 0px rgb(120, 131, 146);
}
*/
.CompactFriendsList .friend.speaking .avatarHolder img.avatar {
filter: brightness(1.75) contrast(0.9);
transition-duration: 0s; }
.CompactFriendsList .friend.slowconnecting,
.CompactFriendsList .friend.reconnecting {
opacity: 0.65;
filter: brightness(1);
animation-duration: 1.2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-name: ConnectingPulse; }
@keyframes ConnectingPulse {
0% {
opacity: 0.65;
filter: brightness(1); }
50% {
opacity: 1;
filter: brightness(1.3); }
100% {
opacity: 0.65;
filter: brightness(1); } }
.quickAccessFriends .friend:hover .avatarHolder,
.friend .avatarHolder:hover {
/*transform: scale( 1, 1 ) translateX( 2px );*/ }
.quickAccessFriends .ChatRoomMultiFriendAvatar,
.quickAccessFriends .ChatRoomGroupAvatar {
transform: scale(0.96, 0.96) translateX(0px);
transition-property: transform;
transition-duration: 0.34s;
transition-timing-function: cubic-bezier(0.42, 0, 0.19, 2.28); }
.quickAccessFriends .ChatRoomMultiFriendAvatar {
transform: scale(0.86, 0.86) translateX(0px); }
.quickAccessFriend.QuickAccessChat .ChatRoomMultiFriendAvatar {
width: 45px;
height: 45px;
padding: 0 .5px; }
.compactQuickAccess .quickAccessFriend.QuickAccessChat .ChatRoomMultiFriendAvatar {
padding: 0;
width: 30px;
height: 30px;
border-width: 1px;
margin: 0;
margin-left: 4px; }
.quickAccessFriends .ChatRoomMultiFriendAvatar:hover {
transform: scale(0.96, 0.96) translateX(0px); }
.quickAccessFriends .favoriteElement:hover .ChatRoomGroupAvatar {
transform: scale(1.06, 1.06) translateX(0px); }
.quickAccessFriends .friend:hover .avatarHolder {
transform: scale(0.96, 0.96) translateX(0px); }
@media only screen and (min-resolution: 1.5dppx) and (max-resolution: 2dppx) {
.friend .avatarHolder img.avatar {
border-width: 0.5px; } }
.SteamPlayerGroupFooter .SteamPlayerGroupFooterCount {
height: 36px;
display: flex;
margin: 0px 0px;
transform: scale(0.86, 0.86) translateX(0px);
transition-property: transform;
transition-duration: 0.34s;
transition-timing-function: cubic-bezier(0.42, 0, 0.19, 2.28);
flex-direction: row;
flex-shrink: 0; }
.SteamPlayerGroupFooter .SteamPlayerGroupFooterCount {
height: fit-content;
border: 1px solid transparent;
width: 34px; }
.CompactFriendsList .SteamPlayerGroupFooter .SteamPlayerGroupFooterCount,
.CompactFriendsList .friend .avatarHolder {
height: 24px;
width: 24px;
transform: scale(1, 1) translateX(0px); }
.CompactFriendsList .SteamPlayerGroupFooter .SteamPlayerGroupFooterCount {
border: 1px solid transparent; }
.SteamPlayerGroupFooter {
display: flex;
color: #e3ffc2; }
.SteamPlayerGroupFooterCount {
width: 36px;
border: 1px solid rgba(146, 194, 87, 0.25); }
.SteamPlayerGroupFooterCount .count {
width: 100%;
display: table-cell;
line-height: 16px;
font-size: 16px;
text-align: center;
overflow: hidden;
color: #91c257;
margin-top: -2px; }
.SteamPlayerGroupFooterCount.twoDigits .count {
font-size: 14px; }
.CompactFriendsList .SteamPlayerGroupFooterCount .count {
font-size: 12px;
line-height: 22px; }
.CompactFriendsList .SteamPlayerGroupFooterCount.twoDigits .count {
font-size: 10px; }
.SteamPlayerGroupFooterCount.manyDigits {
display: none; }
.SteamPlayerGroupFooterLabel {
flex: 1 0 auto;
align-self: center;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: middle;
height: initial;
margin-left: 8px;
color: rgba(145, 194, 87, 0.5);
font-size: 12px;
-webkit-mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0.15) 100%); }
.CompactFriendsList .SteamPlayerGroupFooterLabel {
font-size: 10px;
margin-left: 6px; }
.SteamPlayerGroupLines {
flex-shrink: 0; }
.friend.firstInGroup .SteamPlayerGroupLines {
height: 24px;
margin-top: 18px;
border-left: 1px solid #74859b;
border-top: 1px solid #74859b;
border-top-left-radius: 6px; }
.CompactFriendsList .friend.firstInGroup .SteamPlayerGroupLines {
height: 16px;
margin-top: 12px;
margin-left: -6px; }
.CompactFriendsList .SteamPlayerGroupFooter .SteamPlayerGroupLines {
height: 16px;
margin-left: -8px; }
.friend.inGroup .SteamPlayerGroupLines {
height: 52px;
border-left: 1px solid #74859b;
margin-top: -6px; }
.CompactFriendsList .friend.firstInGroup .SteamPlayerGroupLines,
.CompactFriendsList .friend.lastInGroup .SteamPlayerGroupLines,
.CompactFriendsList .friend.inGroup .SteamPlayerGroupLines {
width: 7px;
height: 32px;
margin-left: -8px; }
.CompactFriendsList .friend.lastInGroup .SteamPlayerGroupLines,
.CompactFriendsList .friend.firstInGroup .SteamPlayerGroupLines {
height: 16px; }
.CompactFriendsList .friend.lastInGroup .SteamPlayerGroupLines {
margin-top: -6px; }
.friend.lastInGroup .SteamPlayerGroupLines,
.SteamPlayerGroupFooter .SteamPlayerGroupLines {
height: 24px;
border-left: 1px solid #74859b;
border-bottom: 1px solid #74859b;
margin-top: -5px;
border-bottom-left-radius: 6px; }
.SteamPlayerGroupFooter .SteamPlayerGroupLines {
height: 11px; }
.friend.firstInGroup .SteamPlayerGroupLines,
.friend.inGroup .SteamPlayerGroupLines,
.friend.lastInGroup .SteamPlayerGroupLines,
.SteamPlayerGroupFooter .SteamPlayerGroupLines {
width: 9px;
margin-left: -10px;
border-width: 1px; }
.friend.awayOrSnooze {
/*opacity: .5;
filter: saturate( .5);*/ }
.chatroomBucket_partybeacon {
background: linear-gradient(to right, #35403a, rgba(53, 64, 58, 0)); }
.CompactFriendsList .avatarHolder .avatarStatus {
min-width: 1px; }
.friend.Grid .avatarHolder {
height: 200px; }
.quickAccessFriends .friend .SnoozeContainer {
position: absolute;
margin: 0px;
margin-top: -6px;
margin-left: -4px;
overflow: visible;
text-shadow: 1px 1px 1px #000, 1px 1px 2px #000, 1px 1px 3px #000; }
.quickAccessFriends .friend .SnoozeContainer {
padding-top: 2px; }
.DialogBodyText .friend .statusAndName {
line-height: 10px; }
.friend .avatarHolder .avatarStatus {
display: none; }
.friendlistListContainer .friend .avatarHolder {
position: relative;
padding-right: 2px; }
.CompactFriendsList .friend .avatarHolder {
position: relative;
padding-right: 2px; }
.friendlistListContainer .friend .avatarHolder .avatarStatus,
.CompactFriendsList .friend .avatarHolder .avatarStatus,
.FriendNotificationsDialog .friend .avatarHolder .avatarStatus {
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 2px; }
.VoiceChannelParticipants .friend .avatarHolder .avatarStatus {
transform: translateY(-1px); }
.quickAccessFriend {
cursor: pointer; }
.quickAccessFriend .clanName,
.quickAccessFriend .playerName,
.quickAccessFriend .playerNickname {
line-height: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
font-size: 14px;
transition: text-overflow 0s linear; }
.ChatMsgSpeaker .speaker.friendChat .playerNickname {
/* display: inline-block;*/ }
.playerNicknameBracket {
color: #999;
font-size: 18px;
display: inline-block;
margin-left: 1px;
opacity: 0.5;
line-height: 16px; }
.playerNameQuickAccessContainer {
display: flex;
flex-direction: row;
line-height: 16px;
width: 48px; }
.playerNameQuickAccessContainer .playerNicknameBracket {
margin-left: 0px;
margin-top: 2px;
margin-bottom: -2px;
flex: 1;
color: #999;
font-size: 18px;
display: inline-block;
opacity: 0.5;
line-height: 16px; }
.friend.awayOrSnooze .playerNameQuickAccessContainer {
opacity: .5; }
.friend .labelHolder {
flex-grow: 1;
height: 28px;
align-self: center;
margin-left: 6px;
min-width: 0;
transition-property: transform, opacity;
transition-duration: .24s;
transition-delay: .2s;
transition-timing-function: ease-in-out; }
.AvatarAndUser .labelHolder .richPresenceContainer {
margin-top: 2px; }
.friend.avatarOnly .labelHolder {
display: none; }
.friendlistListContainer .friend.ingame .labelHolder {
/*background: linear-gradient( to right, rgba(27, 55, 51, 0) 33%, rgba(27, 55, 51, 0.5) 100%);*/
margin-top: -6px;
padding-top: 3px;
padding-bottom: 3px; }
.CompactFriendsList .friendlistListContainer .friend.ingame .labelHolder {
margin-top: 0px; }
.CompactFriendsList .friend .labelHolder {
height: 24px;
margin: 0px;
margin-left: 8px;
margin-top: 2px; }
.friend.Grid .labelHolder {
margin-top: 10px;
width: 100%; }
.AvatarAndUser {
display: flex;
flex-direction: row;
padding-left: 8px;
padding-top: 8px;
padding-bottom: 8px; }
.currentUserContainer .labelHolder {
margin: 0px 0px 0px 8px;
min-width: 0;
display: flex;
flex-shrink: 1;
margin-right: 84px;
flex-direction: column;
justify-content: flex-end;
margin-bottom: -4px; }
.singlewindow .currentUserContainer .labelHolder {
margin-right: 4px; }
.multiChatDialog {
flex: 2;
display: flex;
flex-direction: column;
min-width: 0; }
.errorDisconnected .friendsListContainer,
.errorDisconnected .multiChatDialog {
/*filter: saturate(0.0) contrast(.75) brightness(.7);*/
opacity: .5; }
.multiChatDialog:focus {
outline: none; }
.singlewindow .multiChatDialog {
overflow: hidden; }
.ChatTabs {
padding-top: 1px;
padding-left: 0px;
padding-right: 2px;
padding-top: 4px;
transition: all .2s ease-in-out; }
.chatTabDraggableSpace.ChromeClearance,
.chatTabDraggableSpace {
width: 58px;
flex-shrink: 0;
-webkit-app-region: drag;
/*background-color: red;*/
z-index: -1;
position: relative;
pointer-events: none; }
.web_chat_frame .chatTabDraggableSpace {
display: none; }
.chatTabDraggableSpace.ChromeClearance {
width: 70px;
height: 26px;
align-self: flex-end;
/*background-color: orange;*/ }
.compactView .chatTabDraggableSpace.ChromeClearance {
height: 15px; }
.TheaterMode .ChatTabs.activeTabHasBroadcast {
margin-top: -49px; }
.TheaterMode .ChatTabs.activeTabHasBroadcast .title-area {
margin-bottom: 30px; }
.ChatTabs.HasWindowControls {
/*padding-right: 84px;*/ }
.chatTabList {
display: flex; }
.chatTabSetContainer {
display: flex; }
.chatTabSetContainer.test {
outline: 1px solid red; }
.chatTabSelector {
margin-top: 0px;
background-color: #393e45;
width: 42px;
height: 44x;
flex-shrink: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-app-region: no-drag;
z-index: 3;
position: relative;
border: 0.5px solid black;
border-bottom-width: 0px;
background: linear-gradient(to bottom, #393e45 0px, #393e45 80%, #2e3135 100%);
box-shadow: -2px -2px 6px #00000088; }
.compactView .chatTabSelector.UnreadMessages .ChatUnreadMessageIndicator,
.compactView .chatTabSelector {
height: 32px; }
.compactView .chatTabSelector .SVGIcon_DownArrowContextMenu {
margin-left: 15px;
margin-top: 10px; }
.chatTabSelector:hover {
background: linear-gradient(to bottom, #60666e 0px, #43484f 80%, #393e45 100%);
cursor: pointer; }
.chatTabSelector .SVGIcon_DownArrowContextMenu {
width: 16px;
height: 16px;
margin: auto;
margin-left: 16px;
margin-top: 16px; }
.chatTabSelector.UnreadMessages .SVGIcon_DownArrowContextMenu {
fill: #fbfa01; }
.chatTabSelector.UnreadMessages .ChatUnreadMessageIndicator {
width: 42px;
height: 42px;
left: 0;
background: radial-gradient(52px 42px at 22px 100%, rgba(255, 153, 0, 0.8) 0%, rgba(233, 154, 35, 0.2) 40%, rgba(233, 154, 35, 0) 70%); }
.chatRoomHeader {
min-height: 4px;
z-index: 2; }
.TheaterMode .broadcastVisible .MemberListColumn,
.TheaterMode .broadcastVisible .chatRoomGroupNavColumn,
.TheaterMode .broadcastVisible .chatRoomHeader {
display: none; }
.TheaterMode .chatWindow.broadcastVisible {
background: black; }
.ChatTabs {
position: relative; }
.theaterModeHoverSpace {
width: 100%;
height: 16px;
display: none;
background-color: rgba(58, 62, 70, 0.5);
transition: all .2s ease-in-out; }
.TheaterMode .ChatTabs.activeTabHasBroadcast.TheaterTopHovered .ChatUnreadMessageIndicator {
opacity: 0; }
.ChatTabs .theaterModeHoverSpace .ChatUnreadMessageIndicator {
width: 25%;
height: 32px;
top: 38px;
border-radius: 0;
z-index: 20;
transition: opacity .2s ease-in-out; }
.ChatTabs .theaterModeHoverSpace .chatUnreadCircle {
margin-top: 15px; }
.TheaterMode .ChatTabs.activeTabHasBroadcast .theaterModeHoverSpace {
display: block; }
.TheaterMode .ChatTabs.activeTabHasBroadcast.TheaterTopHovered {
margin-top: 0;
transition-duration: .2s; }
.TheaterMode .ChatTabs.activeTabHasBroadcast.TheaterTopHovered .theaterModeHoverSpace {
height: 4px;
background-color: #3a3e46; }
.responsive .singlewindow .ChatTabs.HasTabs {
padding-top: 4px; }
.chatTabList .chatTab,
.ChatTabsBackButton {
display: flex;
background: #393e45;
margin: 0px;
margin-right: 4px;
cursor: default;
padding: 0px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
flex-direction: row;
width: 180px;
/* update k_chatTabWidth in chattabs.tsx if this width changes */
height: 43px;
flex: 1;
position: relative;
/*background: linear-gradient( 170deg, rgba( 78, 86, 96, 1 ) 0%, rgba( 78, 86, 96, 1 ) 8%, rgba( 55, 59, 66, 1 ) 24%, rgba( 55, 59, 66, 1 ) 50%, rgba( 16, 18, 20, 1 ) 100% );
background-repeat: no-repeat;
background-size: 100% 128px;
background-size: 100% 134px;
background: linear-gradient( 170deg, rgba( 21, 92, 28, 1 ) 0px, rgba( 14, 72, 12, 1 ) 32px, rgb(5, 47, 9) 84px, rgba( 15, 135, 24, 1 ) 196px, rgba( 12, 110, 20, 1 ) 228px, rgba( 12, 110, 20, 1 ) 276px, rgba( 78, 86, 96, 1 ) 288px, rgba( 78, 86, 96, 1 ) 320px, rgba( 55, 59, 66, 1 ) 368px, rgba( 55, 59, 66, 1 ) 380px, rgba( 16, 18, 20, 1 ) 462px );
background-size: 100% 512px;
background-position: 0px -310px;*/
transition-property: background-position, box-shadow, background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
overflow: hidden;
border: .5px solid black;
border-bottom-width: 0px; }
.ChatTabs.compactView .chatTabList .chatTab,
.ChatTabs.compactView .ChatTabsBackButton {
height: 32px; }
.ChatTabs.compactView .ChatTabContent .avatarHolder .avatar {
width: 32px; }
.ChatTabs.compactView .clanName {
font-size: 12px; }
.ChatTabs.compactView .labelHolder {
margin-top: 4px; }
/* Test block for full width tabs, disabling for now
.chatTabTransitionGroup
{
width: 100%;
height: 100%;
}
.ChatTabs.titleBarContainer.OneTab .chatTab
{
width: 100%;
margin-right: 0;
}
*/
.title-area-icon.singleWindowToggle {
position: absolute;
top: 3px;
right: 74px;
z-index: 10; }
.title-area-icon.singleWindowToggle.inOverlay {
right: 22px; }
.singlewindow .title-area-icon.singleWindowToggle {
display: none; }
.singlewindow .ChatTabs .title-area-icon.singleWindowToggle {
display: block; }
.title-area-icon .SVGIcon_SingleWindowToggle {
width: 14px;
height: 14px;
margin-top: -2px;
margin-left: 4px; }
.title-area-icon .SVGIcon_SingleWindowToggle .leftBox {
transition: transform .21s ease-in-out; }
.ChatTabs .title-area-icon.singleWindowToggle {
display: none; }
.chat_main .ChatTabs .title-area-icon.singleWindowToggle {
display: block; }
.chat_main.singlewindow .ChatTabs .title-area-icon .SVGIcon_SingleWindowToggle {
display: block;
margin-top: 3px; }
.ChatTabs .title-area-icon:hover .SVGIcon_SingleWindowToggle .leftBox {
transform: translateX(-56px); }
.ChatTabsBackButton {
float: left;
width: 60px;
font-size: 22px;
text-align: center;
line-height: 43px;
display: block; }
.chatTabList .chatTab:not(.active) {
box-shadow: inset 0px -2px 3px black;
background: #1c1f22; }
.chatTabList .chatTab.VoiceActive {
/*background: rgb(44, 78, 47);*/ }
.chatTabList .chatTab.VoiceActive:not(.active) {
background: #293b28; }
.TestGradient {
height: 512px;
width: 224px;
background: linear-gradient(170deg, #155c1c 0px, #0e480c 32px, #052f09 84px, #0f8718 196px, #0c6e14 228px, #0c6e14 276px, #4e5660 288px, #4e5660 320px, #373b42 368px, #373b42 380px, #101214 462px);
background-size: 100% 512px;
position: absolute;
top: 0;
left: 0;
display: none; }
.TestGradientBox {
height: 43px;
width: 100%;
border: 1px solid black;
margin-bottom: 50px; }
.chatTabList .chatTab.active {
color: #dddddd; }
.chatTabList .chatTab:hover {
color: #ffffff; }
.TabRightContainer {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between; }
.ChatTabsContextMenu .ChatTabContextMenuItem {
padding: 0;
min-height: 32px; }
.ChatTabsContextMenu.compactView .chatTabGroupName {
margin-top: -2px; }
.ChatTabsContextMenu .chatTab .ChatTabContent {
padding-top: 2px;
padding-bottom: 0px;
padding-left: 2px; }
.ChatTabsContextMenu .chatTab .ChatTabContent.ChatRoom {
padding-top: 8px;
padding-bottom: 2px;
padding-left: 5px; }
.ChatTabContextMenuItem .chatTabHighlight,
.ChatTabContextMenuItem .TabRightContainer .chatTabClose.closeButton {
display: none; }
.ChatTabContextMenuItem .TabRightContainer {
position: absolute;
width: 100%;
top: 0; }
.ChatTabsContextMenu.compactView .ChatTabContextMenuItem .TabRightContainer .chatTabUnreadBadge {
position: absolute;
right: 4px;
top: 8px;
height: 16px;
width: 16px;
border-radius: 50%;
padding: 0;
padding-right: 6px;
text-align: right;
margin-right: 2px;
background-color: transparent; }
.ChatTabsContextMenu.compactView .ChatTabContextMenuItem .TabRightContainer .chatTabUnreadBadge:before {
position: absolute;
content: '';
height: 4px;
width: 4px;
border-radius: 50%;
background-color: #ffd800;
right: -2px;
top: 4px; }
.ChatTabContextMenuItem .TabRightContainer .UnreadGlow {
position: absolute;
top: 0;
height: 32px;
background: radial-gradient(ellipse farthest-corner at 98% 50%, rgba(255, 153, 0, 0.8) 0%, rgba(233, 154, 35, 0.2) 40%, rgba(233, 154, 35, 0) 70%);
opacity: .5;
z-index: 10; }
.ChatTabsContextMenu.compactView .ChatTabContent .avatarHolder .avatar {
width: 24px; }
.ChatTabsContextMenu .ChatTabContent .avatarHolder {
flex-direction: row;
height: 24px; }
.ChatTabsContextMenu .ChatTabContent .avatarHolder .avatarStatus {
width: 2px;
height: 100%;
margin-top: 0; }
.ChatTabsContextMenu .friend.awayOrSnooze .avatarHolder .avatarStatus {
-webkit-mask: url(../../images/webui/masks/dashed_mask.png) repeat-y;
-webkit-mask-size: 2px 4px; }
.ChatTabsContextMenu.CompactFriendsList .friend {
margin-top: 3px;
height: 24px; }
.ChatTabsContextMenu .ChatUnreadMessageIndicator.ChatTabUnread {
top: 14px;
right: 0; }
.ChatTabsContextMenu {
padding-right: 0;
min-width: 160px; }
.ChatTabsContextMenu .SnoozeContainer {
margin-top: -6px;
margin-bottom: -4px; }
.ChatTabsContextMenu.CompactFriendsList .friend .labelHolder {
margin-top: 2px; }
.ChatTabsContextMenu.CompactFriendsList .friend .playerNicknameBracket {
line-height: 12px;
margin-top: 2px; }
.chatTab .chatTabClose {
cursor: default;
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: center center;
padding: 3px;
margin: 2px;
width: 12px;
height: 12px;
line-height: 8px;
font-size: 10px;
vertical-align: middle;
opacity: 0;
transform: scale(0);
transition-property: opacity, transform;
transition-duration: .2s;
z-index: 1000;
margin-left: auto;
margin-right: 2px; }
.chatTab.active .chatTabClose,
.chatTab:hover .chatTabClose {
opacity: .5;
transform: scale(1);
cursor: pointer; }
.chatTab .chatTabClose .SVGIcon_X_Line line {
stroke: white;
stroke-width: 24px; }
.chatTab:not(.active):hover {
background-color: #22252b; }
.chatTab .chatTabUnreadBadge,
.FriendMessageCount,
.ChatUnreadMessageIndicator {
border-top-left-radius: 4px;
color: #ffff00;
line-height: 22px;
height: 22px;
font-size: 12px;
margin: 0px;
padding: 0px;
padding-right: 5px;
padding-left: 6px;
text-align: right;
position: relative;
pointer-events: none;
animation-name: UnreadLabelPulse;
animation-name: none;
background: rgba(218, 149, 0, 0.65);
animation-duration: 2.3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
.ChatTabs.compactView .chatTab .chatTabUnreadBadge {
line-height: 12px;
height: 12px;
font-size: 10px;
padding-right: 7px; }
.ChatTabs.compactView .chatTab .chatTabClose {
margin-bottom: -3px; }
.ChatUnreadMessageIndicator {
position: absolute;
height: 48px;
width: 24px;
margin: 0px;
border-radius: 0px;
top: 0px;
left: -1px;
background: radial-gradient(ellipse farthest-corner at 0% 50%, rgba(255, 153, 0, 0.8) 0%, rgba(233, 154, 35, 0.2) 40%, rgba(233, 154, 35, 0) 70%);
animation-name: none;
bottom: 0px;
z-index: 1; }
.compactView .ChatRoomListGroupItem_header .ChatUnreadMessageIndicator {
top: -8px; }
.chatSectionTitle .ChatUnreadMessageIndicator {
top: -8px;
left: 0px; }
.compactView .chatSectionTitle .ChatUnreadMessageIndicator {
top: -10px; }
.Collapsed .chatSectionTitle .ChatUnreadMessageIndicator .chatUnreadCircle {
background-color: transparent; }
.Collapsed.HasUnreadChats .chatSectionTitle .SVGIcon_DoubleArrow .Arrow1,
.Collapsed.HasUnreadChats .chatSectionTitle .SVGIcon_DoubleArrow .Arrow2 {
stroke: #ff0;
stroke-width: 42px; }
.Collapsed.HasUnreadChats .chatSectionTitle .ToggleGroupChatList:hover .SVGIcon_DoubleArrow .Arrow1,
.Collapsed.HasUnreadChats .chatSectionTitle .ToggleGroupChatList:hover .Arrow2 {
stroke: #fff; }
.chatRoomTextChannel .ChatUnreadMessageIndicator {
top: -8px; }
.indicatorOptionContainer .chatUnreadCircle,
.chatRoomTextChannel .chatUnreadCircle {
position: absolute;
left: 8px;
top: 20px; }
.quickAccessFriends .ChatUnreadMessageIndicator {
height: auto;
width: auto;
background: none;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 0;
line-height: 4px; }
.quickAccessFriends:not(.compactQuickAccess) .ChatUnreadMessageIndicator {
/* space for the name label */
bottom: 17px; }
.quickAccessFriends .ChatUnreadMessageIndicator .chatUnreadCircle {
position: absolute;
right: 11%;
bottom: 11%;
margin: 0;
box-shadow: 0px 0px 14px 1px #ffae00, 0px 0px 32px 1px #da9500; }
.quickAccessFriends:not(.compactQuickAccess) .friend.quickAccessFriend .ChatUnreadMessageIndicator .chatUnreadCircle {
right: 5px;
bottom: -4px; }
.quickAccessFriends:not(.compactQuickAccess) .friend.ingame.quickAccessFriend .ChatUnreadMessageIndicator .chatUnreadCircle {
right: 0px;
bottom: -2px; }
.quickAccessFriends.compactQuickAccess .friend.quickAccessFriend .ChatUnreadMessageIndicator .chatUnreadCircle {
right: -2px;
bottom: -6px; }
.quickAccessFriends.compactQuickAccess .friend.ingame.quickAccessFriend .ChatUnreadMessageIndicator .chatUnreadCircle {
right: -8px;
bottom: -7px; }
.ChatUnreadMessageIndicator .chatUnreadCircle {
width: 4px;
height: 4px;
background-color: yellow;
border-radius: 50%;
overflow: hidden; }
.UnreadMention.ChatUnreadMessageIndicator .chatUnreadCircle {
overflow: visible;
background-color: transparent;
font-size: 12px;
line-height: 4px; }
.ChatRoomListGroupItem .ChatUnreadMessageIndicator .chatUnreadCircle {
margin-top: 21px; }
.ChatRoomListGroupItem .ChatUnreadMessageIndicator.UnreadMention .chatUnreadCircle {
margin-left: -3px; }
.ChatUnreadMessageIndicator.Hidden {
display: none; }
.ChatUnreadMessageIndicator.ChatTabUnread {
background: transparent;
right: 2px;
bottom: 6px;
top: auto;
left: auto;
height: auto;
width: auto; }
.unreadFriend {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative; }
.unreadFriend .friend {
width: 100%; }
.unreadFriend .FriendMessageCount {
font-size: 12px;
animation-name: UnreadLabelPulseAndGlow;
animation-name: none;
background: rgba(218, 149, 0, 0.35);
box-shadow: 0 0 14px 1px rgba(218, 149, 0, 0.5);
border-radius: 4px;
padding: 0px 8px;
text-align: center;
right: 6px;
top: -2px;
pointer-events: none;
margin-top: 12px;
position: absolute; }
.CompactFriendsList .unreadFriend .FriendMessageCount {
margin-top: 8px; }
@keyframes UnreadLabelPulse {
0% {
background: rgba(161, 98, 3, 0.2); }
50% {
background: rgba(218, 149, 0, 0.65); }
100% {
background: rgba(161, 98, 3, 0.2); } }
@keyframes UnreadLabelPulseAndGlow {
0% {
background: rgba(161, 98, 3, 0.2);
box-shadow: 0 0 6px 1px rgba(161, 98, 3, 0.1); }
50% {
background: rgba(218, 149, 0, 0.35);
box-shadow: 0 0 14px 1px rgba(218, 149, 0, 0.5); }
100% {
background: rgba(161, 98, 3, 0.2);
box-shadow: 0 0 6px 1px rgba(161, 98, 3, 0.1); } }
.FriendMessageCount {
border-top-left-radius: 0;
animation-name: none;
margin: auto 2px;
line-height: 24px;
height: 24px;
font-size: 16px; }
.chatTab .UnreadGlow {
width: 100px;
height: 43px;
position: absolute;
right: 0px;
opacity: 0;
transition: opacity .2s ease-in-out;
background: radial-gradient(ellipse farthest-corner at 98% 90%, rgba(255, 153, 0, 0.8) 0%, rgba(233, 154, 35, 0.2) 40%, rgba(233, 154, 35, 0) 70%);
animation-name: none;
animation-duration: 2.3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: -1; }
.unreadMessageViolator {
position: absolute;
left: 6px;
right: 6px;
color: #68490f;
background: linear-gradient(to bottom, #221400 0%, #ce9d44 6px, #efcf57 100%);
font-size: 14px;
line-height: 30px;
text-align: center;
width: calc(100% - 12px);
z-index: 1;
margin: 0 auto;
margin-top: -1px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-width: 0;
border: 0.5px solid rgba(250, 250, 250, 0.1);
box-shadow: 0 4px 12px #00000088;
cursor: pointer; }
.unreadMessageViolator:hover {
filter: brightness(1.2); }
.chatTab .chatTabHighlight {
pointer-events: none;
position: absolute;
width: 180px;
height: 16px;
background: radial-gradient(ellipse farthest-corner at 10% -8px, rgba(205, 212, 228, 0.3) 0%, rgba(205, 212, 228, 0.2) 10%, rgba(57, 61, 69, 0.1) 55%, rgba(57, 61, 69, 0) 80%);
z-index: 0;
mix-blend-mode: screen;
transition: all .32s ease-in-out; }
.chatTab.VoiceActive .chatTabHighlight {
background: radial-gradient(ellipse farthest-corner at 10% -8px, #52fd1e 0%, rgba(82, 255, 66, 0.3) 30%, rgba(57, 61, 69, 0.1) 55%, rgba(57, 61, 69, 0) 80%); }
.chatTab.VoiceActive.MicMuted .chatTabHighlight {
opacity: 0.5; }
.chatTab:not(.active) .chatTabHighlight {
width: 180px;
height: 8px;
opacity: .2; }
.chatTab .UnreadGlow {
opacity: 1; }
.chatTab .chatTabName {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.chatTab .chatTabClose:hover {
opacity: 1; }
.chatTabGroupName {
transition: color .32s ease-in-out;
margin-top: 6px;
text-shadow: 1px 1px 2px #0006; }
.chatDialogs {
position: relative;
/* for parent flex */
flex-grow: 1;
min-height: 0;
background: radial-gradient(ellipse farthest-corner at 50% 30%, #2b2d33 0%, #1e2025 50%, #14151a 100%); }
.chatDialogs .emptyChatDialogs {
/* take up all of parent space */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-left: 20px;
padding-right: 20px;
text-align: center;
vertical-align: middle;
line-height: 100vh;
user-select: none; }
.chatWindow {
/* take up all of parent space */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* for children */
display: flex;
flex-direction: column;
/*font-family: "Motiva Sans";*/
/* fixes long lines of text with no whitespace from breaking flex sizing */
word-wrap: break-word;
word-break: break-word;
/*background: radial-gradient(ellipse farthest-corner at 20% 30%, #0A0B0D 0%, #262A31 0%, rgb(33, 36, 43) 100%);*/
background: radial-gradient(ellipse farthest-corner at 50% 30%, #212329 0%, #1e2025 50%, #1c1d22 100%);
font-size: 14px; }
.ChatRoomGroupDialog_contents {
display: flex;
flex-direction: row;
height: 100%;
min-height: 0; }
.ChatRoomGroupDialog_contents .LoadingWrapper {
margin: auto auto;
opacity: 0;
animation: throbberfade 1s linear 2s;
animation-fill-mode: forwards; }
@keyframes throbberfade {
from {
opacity: 0; }
to {
opacity: 1; } }
.chatHistory {
margin: 0 0 0 8px;
padding-bottom: 16px;
position: relative; }
.chatHistoryAndMembers {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
min-width: 0; }
.broadcastVisible .chatStack:not(.GroupChatVisible) .chatHistoryAndMembers {
display: none; }
body.in_global_drag .chatWindow .DropTarget.chatBody,
body.in_global_drag .chatWindow .chatBody .chatHistoryAndMembers,
.chatWindow .chatBody.chatRoomActiveDrop .chatHistoryAndMembers {
position: relative; }
.chatFileUploadPreviewContainer {
position: absolute;
bottom: 72px;
left: 16px;
min-width: 260px;
background: #2c3036;
padding: 8px;
border-radius: 4px;
box-shadow: 0 10px 32px 0px #000000ab;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: center; }
.chatFileUploadPreviewContainer img {
border-radius: 4px;
box-shadow: 0 0 4px 1px #000000;
margin-right: auto;
margin-left: auto; }
.chatFileUploadPreviewContainer .SVGIcon_Video {
fill: #788a92;
background-color: #0004;
border-radius: 4px;
height: 150px;
width: 100%; }
.chatFileUploadPreviewContainer .SVGIcon_Video path {
transform: scale(0.85);
transform-origin: 50% 50%; }
.chatFileUploadPreview {
max-height: 200px;
max-width: 250px; }
.chatFileUploadFileName {
flex: 1;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px;
user-select: none;
text-align: center;
max-width: 250px; }
.chatFileUploadCancel {
position: absolute;
top: 4px;
right: 4px;
cursor: pointer;
border-radius: 3px;
background-color: rgba(67, 73, 83, 0.9);
padding: 4px;
width: 16px;
height: 16px;
vertical-align: middle;
box-shadow: 0 0 4px 1px #00000088; }
.chatFileUploadCancel .SVGIcon_X_Line line {
stroke: white; }
.chatFileUploadCancel:hover {
background-color: rgba(92, 100, 114, 0.9); }
.uploadOptions {
width: 100%;
display: flex;
flex-direction: column; }
.spoilerCheckBox {
width: 50%;
font-size: 12px;
margin: 0;
margin-bottom: -2px;
flex: 1; }
.spoilerCheckBox .DialogToggle_Label span {
vertical-align: middle; }
.chatFileUploadBtn {
user-select: none;
margin-top: 5px;
background: #cccccc;
color: #000000;
border-radius: 10px;
padding: 3px;
line-height: 8px;
font-size: 10px;
vertical-align: middle;
text-align: center; }
.chatFileUploadBtn:hover {
background: #fff; }
.chatFileUploadProgressContainer {
position: absolute;
width: 250px;
bottom: 55px;
background: #2c3036;
padding: 8px;
border-radius: 4px;
box-shadow: 0 10px 32px 0px #000000ab;
margin-bottom: 16px;
display: flex;
flex-direction: column; }
.chatFileUploadProgressBarContainer {
width: 100%;
height: 10px; }
.chatFileUploadProgressName {
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px;
user-select: none;
text-align: center;
width: 100%; }
.chatRoomInviteInline.msg {
display: flex;
flex-direction: row;
height: 120px;
max-width: 800px;
background: linear-gradient(to right, #474b57 0%, #292c31 100%);
border-radius: 5px;
padding-left: 10px;
display: flex;
flex-direction: column;
margin-bottom: 10px; }
.chatRoomInviteInline h1 {
font-size: 24px;
text-shadow: none;
color: white;
text-transform: uppercase; }
.chatRoomInviteInline .expiration {
position: absolute;
right: 10px;
top: 10px; }
.chatRoomInviteInline .inviteDescription {
margin-left: 30px; }
.inviteDescription .inviterName {
color: #6dcff4; }
.inviteDescription .roomName {
color: white; }
.chatRoomInviteInline .otherParticipantsBlock {
margin-top: 10px;
display: flex;
flex-direction: row; }
.otherParticipantsBlock .otherParticipantsLabel {
line-height: 30px; }
.otherParticipantsBlock .FriendAvatar {
width: 30px;
height: 30px;
margin-left: 4px;
margin-right: 4px; }
.otherParticipantsBlock .otherParticipantsExtraCount {
font-size: 12px;
line-height: 30px;
margin-left: 10px; }
.chatRoomInviteInline .buttonContainer {
position: absolute;
right: 10px;
bottom: 0px; }
/*
* OpenGraph embed
*/
.msg .ChatMessageOpenGraph_Description {
text-shadow: 0 0 16px black;
pointer-events: none; }
.msg div.ChatMessageOpenGraph,
.msg div.SteamPublishedFile {
max-width: 640px;
color: black;
cursor: default;
padding: 8px;
margin: 8px 0px 8px 0px;
background: linear-gradient(to right, rgba(87, 92, 104, 0.3) 40%, rgba(87, 92, 104, 0.05) 100%);
color: silver;
font-family: "Motiva Sans", Helvetica, Arial, sans-serif;
border-radius: 8px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
/*the following mask-image is a work around for a chrome bug that doesnt clip child image with border-radius8*/
/* this doesn't seem to be needed anymore now that layout has been corrected
-webkit-mask-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
*/ }
.msg .ChatMessageOpenGraph a {
cursor: pointer; }
.OpenGraphImgContainer,
.ChatLargeImageContainer {
margin-right: 16px;
position: relative;
border-radius: 6px;
display: block;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2; }
.OpenGraphContent .OpenGraphImgContainer {
float: left;
max-width: 40%;
margin-bottom: 12px; }
.ChatLargeImageContainer {
display: inline-block;
max-width: 100%;
margin: 0px;
border-color: black;
object-fit: scale-down;
object-fit: cover; }
.ChatLargeImageContainer_Image {
display: block;
max-width: 100%; }
.OpenGraphImgBackground {
max-width: 70%;
position: absolute;
left: -64px;
top: 0;
bottom: 0;
z-index: 0; }
.OpenGraphImgBackground .ChatMessageOpenGraph_Image {
filter: blur(24px) saturate(2) brightness(1.21);
-webkit-mask-image: linear-gradient(90deg, black -25%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg, black -25%, rgba(0, 0, 0, 0) 100%);
height: 100%;
max-height: none; }
.ChatMessageOpenGraph_Image {
display: block;
border-radius: 0px;
width: 100%;
height: auto;
max-height: 140px;
object-fit: cover; }
.msg .OpenGraphMessageURL {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-height: 20px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.1) 100%);
padding: 2px 4px 2px 4px;
z-index: 2;
border-bottom: 0px dotted rgba(97, 116, 231, 0);
flex-grow: 1;
position: relative;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: #8fc3d8; }
.msg .OpenGraphMessageURL:hover {
border-bottom: 0px dotted rgba(97, 116, 231, 0); }
.msg .OpenGraphMessageURL .OpenGraphMessageURL_full {
text-transform: none;
letter-spacing: 0px; }
.OpenGraphMessageURLPosition {
display: block;
position: relative;
cursor: text; }
.OpenGraphMessageURL_short,
.OpenGraphMessageURL_full {
display: block;
transition-property: opacity, transform, color;
transition-duration: .32s;
transition-timing-function: ease-in-out;
overflow: hidden;
text-overflow: ellipsis;
transform: scaleX(1);
transform-origin: 0px 0px; }
.OpenGraphMessageURL_full {
position: absolute;
left: 0;
top: 0;
right: 0;
opacity: 0.0;
transform: scaleX(0.75);
/**/
padding: 0px;
border: none;
background-color: transparent;
color: #8fc3d8;
width: 100%;
margin-top: 0.5px; }
.OpenGraphFooter:hover .OpenGraphMessageURL_short {
opacity: 0.0;
transform: scaleX(1.75); }
.OpenGraphFooter:hover .OpenGraphMessageURL_full {
opacity: 1.0;
transform: scaleX(1); }
.OpenGraphFooter:hover .OpenGraphMessageURL {
color: #b1e3f7; }
.ChatMessageOpenGraph .OpenGraphFooter {
display: flex;
flex-direction: row;
transform: translateY(-1px);
clear: left; }
.OpenGraphFooter .OpenGraphURLButton {
width: 18px;
height: 18px;
margin-left: 6px;
margin-top: 2px;
cursor: pointer; }
.SVGIcon_Button.SVGIcon_CopyToClipboard {
stroke: #8492a4;
transition: all 0.2s ease-in-out; }
.OpenGraphFooter .OpenGraphURLButton:hover .SVGIcon_CopyToClipboard,
.copyInviteLink:hover .SVGIcon_CopyToClipboard {
stroke: white;
transition: all 0.2s ease-in-out; }
.OpenGraphFooter .OpenGraphURLButton:active .SVGIcon_CopyToClipboard polygon,
.copyInviteLink:active .SVGIcon_CopyToClipboard polygon,
.OpenGraphFooter .OpenGraphURLButton:active .SVGIcon_CopyToClipboard polyline,
.copyInviteLink:active .SVGIcon_CopyToClipboard polyline {
fill: #fff7;
transition: all 0.05s ease-in-out; }
.ChatMessageOpenGraph_Body {
padding: 8px;
position: relative; }
.ChatMessageOpenGraph_Body .throbber_center_wrapper {
float: center;
width: fit-content;
z-index: 2;
margin-top: 32px; }
.OpenGraphContent.ClientFetchesData .ChatMessageOpenGraph_Body {
min-height: 120px; }
.ChatMessageOpenGraph_Body :nth-child(2) {
margin-top: 4px; }
.ChatMessageOpenGraph_Title {
font-size: 14px; }
.msg .ChatMessageOpenGraph_Title {
color: #aad8ec; }
.msg .ChatMessageOpenGraph_Title:hover {
color: white; }
/*
* SteamCommunityPublishedFile
*/
.msg .SteamPublishedFile,
.msg .CommunityBroadcastWatch {
max-width: 640px;
color: black;
cursor: pointer;
padding: 8px;
margin-bottom: 16px;
color: silver;
font-family: "Helvetica";
border-radius: 8px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden; }
/* '.video' '.image' are content type classes that we can use to change the published file layout */
.SteamPublishedFile.image .OpenGraphImgContainer {
border: 1px solid black; }
.msg .SteamPublishedFile a,
.msg .SteamPublishedFile a:hover,
.msg .CommunityBroadcastWatch a,
.msg .CommunityBroadcastWatch a:hover {
border-bottom: none;
padding: 0; }
.SteamPublishedFile_Logo {
display: block;
float: right;
background-image: url("../../images/webui/Steam_Logo.png");
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px; }
.SteamCommunityPublishedFile .button {
max-width: 200px; }
.workshopItemControlCtn {
z-index: 1; }
.NotAFriendMessage {
width: 100%;
box-shadow: 0px 4px 8px black;
z-index: 2; }
.NotAFriendBody {
display: flex;
flex-direction: row;
background-color: #261c1a; }
.NotAFriendBody .Exclamation {
width: 64px;
height: 64px;
margin: 8px;
flex-grow: 2;
max-width: 64px; }
.NotAFriendBody .Exclamation .SVGIcon_Caution .exclamation path {
fill: #f34c2b; }
.NotAFriendBody .Exclamation .SVGIcon_Caution line,
.NotAFriendBody .Exclamation .SVGIcon_Caution path {
stroke: #f34c2b;
fill: rgba(243, 76, 43, 0.267); }
.NotAFriendBody .Explanation {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 12px 0px;
flex: 1; }
.NotAFriendBody .Explanation div {
margin-bottom: 6px;
user-select: none; }
.NotAFriendBody .ExplanationBody {
font-size: 13px; }
.NotAFriendBody .Buttons {
display: flex;
flex-direction: column;
margin-left: 30px;
margin-right: 30px;
justify-content: center; }
.NotAFriendActionButton {
background: none;
border: 1px solid rgba(55, 71, 82, 0.5);
color: #686e73;
white-space: nowrap;
padding: 6px 8px;
transition-property: color, border;
transition-duration: .32s;
transition-timing-function: ease-in-out;
cursor: pointer;
margin: 2px; }
.NotAFriendActionButton:hover {
color: white;
border-color: rgba(255, 255, 255, 0.5); }
.NotAFriendBody .ExplanationHeader {
font-size: 14px;
color: #f34c2b; }
.NotAFriendBody .ExplanationBody {
font-size: 12px;
color: #bb887e; }
.NotAFriendBody .ExplanationMoreInfo {
align-self: flex-start;
font-size: 10px;
color: #e0b3aa;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px dotted rgba(187, 136, 126, 0.5); }
.NotAFriendBody .ExplanationMoreInfo:hover {
color: #f3dcd7;
border-bottom: 1px dotted #bb887e; }
.NotAFriendOrApproved .BBCodeYouTubeComponent,
.NotAFriendOrApproved .chatImageContainer {
overflow: hidden; }
.NotAFriendOrApproved .BBCodeYouTubeComponent_Sizer,
.NotAFriendOrApproved .chatImageFull {
filter: blur(8px); }
.NotAFriendOrApproved .ChatHistoryContainer {
filter: blur(3px) saturate(0.5) brightness(0.5); }
.interactionBlocker {
cursor: default;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1; }
/*
* embed version of invite code
*/
.ChatMessageInvite {
max-width: 656px;
min-width: 300px;
background: radial-gradient(256px 256px at 20% 20%, #3d444e 0%, #292c33 50%, #24272e 100%);
color: #b5bec8;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 6px 14px 1px #00000063;
border-radius: 8px;
position: relative;
text-align: left;
user-select: none;
margin-bottom: 16px;
line-height: normal; }
.ChatMessageInvite.GroupAlreadyJoined,
.ChatMessageInvite.Inviter {
background: radial-gradient(256px 256px at 20% 20%, rgba(61, 68, 78, 0.5) 0%, rgba(41, 44, 51, 0.5) 50%, rgba(36, 39, 46, 0.5) 100%), #1e2329;
box-shadow: 0 6px 14px 1px #00000011; }
.ChatMessageInvite:not(.Inviter) .inviteButton {
margin-top: 10px; }
.ChatMessageInvite.TradeOfferInvite:not(.Inviter) .inviteButton {
margin-top: 0px; }
.ChatMessageInvite .groupAlreadyJoined {
font-size: 10px;
color: #74859b;
text-transform: uppercase; }
.ChatMessageInvite.InviteDialog {
margin-bottom: 0;
border-radius: 0;
padding: 32px 16px;
max-width: initial; }
.ChatInviteForm > .ChatMessageInvite {
margin: 0 auto; }
.ChatMessageInvite.VoiceChannelInvite {
/*background: radial-gradient( 256px 256px at 72px 64px, rgba(146, 173, 147, 0.3) 0%, rgb(41, 51, 44) 50%, rgb(36, 39, 46) 100% );*/ }
.ChatMessageInvite.InviteExpired {
/*box-shadow: none;*/
background: radial-gradient(256px 256px at 20% 20%, rgba(61, 68, 78, 0.5) 0%, rgba(41, 44, 51, 0.5) 50%, rgba(36, 39, 46, 0.5) 100%);
box-shadow: 0 6px 14px 1px #00000000; }
.ChatMessageInvite.InviteExpired .leftInviteContainer {
opacity: .5;
filter: saturate(0); }
.ChatMessageInvite .leftInviteContainer {
float: left;
z-index: 1;
padding: 16px; }
.ChatMessageInvite.gameInviteMsg .leftInviteContainer,
.ChatMessageInvite.broadcastInviteMsg .leftInviteContainer,
.ChatMessageInvite.broadcastViewRequestMsg .leftInviteContainer {
position: relative;
overflow: hidden;
flex: 1;
display: flex;
align-items: center;
width: 30%; }
.ChatMessageInvite.broadcastInviteMsg .leftInviteContainer {
background-color: #000c;
background: radial-gradient(128px 100px at 50% 40%, #193452 0%, rgba(14, 17, 31, 0.64) 100%); }
.ChatMessageInvite .DialogButton,
.inviteButtonJoinChat {
align-self: flex-start;
width: auto;
padding: 0 16px;
min-width: 120px; }
.ChatMessageInvite .rightInviteContainer.rightInvite_Horizontal .DialogButton,
.rightInviteContainer.rightInvite_Horizontal .inviteButtonJoinChat {
align-self: center;
margin-right: 0; }
.ChatMessageInvite.broadcastInviteMsg .leftInviteContainer .noisePattern {
background-image: url("../../images/webui/tvnoise.png");
background-repeat: repeat;
background-position: 0 0;
animation: noiseAnim 0.4s infinite linear alternate;
opacity: 0.06;
position: absolute;
width: 196px;
height: 110px;
border-radius: 8px; }
@keyframes noiseAnim {
0% {
background-position: 10px 200px; }
20% {
background-position: -50px 0; }
40% {
background-position: 100px -10px; }
60% {
background-position: 0 -150px; }
80% {
background-position: -100px -30px; }
100% {
background-position: 160px -60px; } }
.ChatMessageInvite.gameInviteMsg .rightInviteContainer,
.ChatMessageInvite.broadcastInviteMsg .rightInviteContainer,
.ChatMessageInvite.broadcastViewRequestMsg .rightInviteContainer {
flex: 2; }
.ChatMessageInvite .rightInviteContainer {
overflow: hidden;
/*padding-bottom: 20px;*/
/* for expire time */
z-index: 1;
display: flex;
flex-direction: column;
padding: 16px; }
.ChatMessageInvite.NoBGSplitInvite .rightInviteContainer {
padding-left: 0px;
flex-wrap: wrap; }
.ChatMessageInvite .rightInviteContainer .rightInviteContainerContent {
flex: 1;
margin-right: 16px; }
.msg.ChatMessageInvite .invitedTimeLabel,
.Invite_ExpireTime {
text-align: right;
font-size: 10px;
color: rgba(116, 133, 155, 0.5);
text-transform: uppercase;
position: absolute;
right: 8px;
bottom: 2px;
line-height: normal; }
.msg.ChatMessageInvite .closeButton {
position: absolute;
right: 8px;
top: 8px;
width: 12px;
height: 12px;
background-size: cover;
opacity: .5;
cursor: pointer;
z-index: 10; }
.msg.ChatMessageInvite .closeButton .SVGIcon_X_Line line {
stroke-width: 24px; }
.msg.ChatMessageInvite .closeButton:hover {
opacity: 1; }
.inviteeNameLabel {
color: #ebf5ff; }
input.InviteFriendToChatDialog_LinkInput {
cursor: text; }
.inviteLinkContainer .DialogInputLabelGroup {
margin-top: 16px;
margin-bottom: 0px; }
.inviteLinkContainer .DialogInputLabelGroup .DialogInput {
padding: 0 12px;
background: #30353b;
margin: 1px 8px 1px 2px;
flex-grow: 3;
box-shadow: inset 0px 0px 4px #0006;
border: 0.5px solid rgba(139, 153, 170, 0.4);
border-style: inset;
line-height: 32px; }
.inviteLinkContainer .DialogInputLabelGroup.inviteLinkDropDown {
margin: 0px;
display: flex; }
.expireLinkInContainer {
display: flex;
flex-direction: row;
margin-top: 6px;
margin-left: auto;
justify-content: flex-end;
align-items: center; }
.expireLinkInContainer .DialogLabel {
margin: 0; }
.inviteLinkContainer .DialogDropDown._DialogInputContainer {
display: inline-block;
min-width: 204px;
user-select: none;
padding: 4px;
padding-left: 6px;
margin-left: 8px;
margin-right: 8px;
text-align: center;
background-color: #2f333b; }
.DialogListBuilderInput ._DialogInputContainer {
padding: 6px 10px;
margin: 0px;
min-height: 26px; }
.DialogListBuilderInput .DialogListBuilderInput_Input.DialogInputPlaceholder {
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
cursor: text;
user-select: none;
margin: 4px 0; }
.inviteLinkContainer .DialogDropDown._DialogInputContainer:hover {
color: #fff;
background-color: #3d4450; }
.inviteLinkContainer .DialogDropDown._DialogInputContainer .DialogDropDown_Arrow {
top: 6px;
right: 4px;
width: 18px; }
.inviteLinkContainer .DialogInput_Wrapper._DialogLayout {
padding: 6px;
background-color: #434953;
border-radius: 3px; }
.inviteLinkContainer .DialogInput_Wrapper._DialogLayout .displayRow {
flex-grow: 1;
position: relative; }
.inviteLinkContainer .DialogButton.DialogInput_CopyAction {
flex-grow: 1;
margin-right: 2px; }
.OrSeparator {
display: flex;
flex-direction: row;
align-items: center;
margin: 24px 0;
user-select: none; }
.OrSeparator .HBar {
height: 1px;
background-color: #aaa5;
flex-grow: 1; }
.OrSeparator .OrSeparatorLabel {
text-transform: uppercase;
color: #4297f8;
margin: 0 18px;
text-align: center;
font-size: 14px;
letter-spacing: 1px; }
.ChatMessageInvite .inviteLabel {
margin-bottom: 0px; }
.ChatMessageInvite .inviteLabelButtons {
margin-top: 10px; }
.ChatMessageInvite .inviteLabelLaunchPrompt {
margin-top: 10px; }
.ChatMessageInvite.Inviter .inviteLabel,
.ChatMessageInvite.GroupAlreadyJoined .inviteLabel {
margin-bottom: 2px;
min-width: 170px; }
.ChatMessageInvite.InviteExpired .inviteLabel {
margin-bottom: 4px;
opacity: .3; }
.ChatMessageInvite.RequestingInfo.displayRow,
.ChatMessageInvite.InviteExpired {
padding: 16px;
align-items: center;
max-width: 621px; }
.ChatMessageInvite.RequestingInfo .postedExpiredInvite,
.ChatMessageInvite.InviteExpired .postedExpiredInvite {
color: #787d85; }
.ChatMessageInvite.RequestingInfo .postedExpiredInvite {
margin-left: 8px; }
.ChatMessageInvite.NoColumns {
padding: 16px; }
.ChatMessageInvite .inviteHighlight {
/*color: white;*/ }
.ChatMessageInvite .groupName {
color: #fff;
font-size: 28px;
font-weight: 100;
letter-spacing: 2px;
line-height: 28px;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif; }
.ChatMessageInvite.InviteLink .groupName {
margin-bottom: 0; }
.ChatMessageInvite .inviteButtonJoinChat {
flex-shrink: 0; }
.ChatMessageInvite .inviteButton.inviteButtonJoinChat {
min-height: 32px; }
.ChatMessageInvite.Inviter .groupName,
.ChatMessageInvite.GroupAlreadyJoined .groupName {
font-size: 16px;
margin-bottom: 0;
letter-spacing: 1px; }
.ChatMessageInvite.DirectInvite .groupName {
margin-bottom: 16px; }
.ChatMessageInvite.VoiceChannelInvite .groupName {
margin-top: 0px;
margin-bottom: 0px; }
.ChatMessageInvite.VoiceChannelInvite.GroupAlreadyJoined .groupName,
.ChatMessageInvite.VoiceChannelInvite.Inviter .groupName {
margin-bottom: 2px; }
.ChatMessageInvite.VoiceChannelInvite .VoiceChannelDetails {
margin-bottom: 12px;
color: rgba(181, 190, 200, 0.5);
flex-wrap: wrap;
margin-left: 30px;
margin-right: 4px; }
.ChatMessageInvite.VoiceChannelInvite.GroupAlreadyJoined .VoiceChannelDetails,
.ChatMessageInvite.VoiceChannelInvite.Inviter .VoiceChannelDetails {
margin-bottom: 4px; }
.ChatMessageInvite.VoiceChannelInvite.InviteExpired .VoiceChannelDetails {
margin-bottom: 6px;
opacity: .3; }
.ChatMessageInvite.VoiceChannelInvite .VoiceChannelDetails .inviteHighlight {
color: rgba(181, 190, 200, 0.5);
font-weight: bold; }
.ChatMessageInvite.InviteExpired .groupName {
color: #888;
font-size: 20px;
font-weight: 200;
letter-spacing: 0px; }
.ChatMessageInvite.VoiceChannelInvite.InviteExpired .groupName {
margin-bottom: 0px; }
.ChatMessageInvite .groupTagline {
color: #999;
font-style: italic;
margin-top: 4px;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif; }
.ChatMessageInvite.InviteExpired .groupTagline {
margin-top: 0px; }
.msg .ChatMessageInvite a, .msg .ChatMessageInvite a:hover {
border-bottom: 0px solid transparent; }
.ChatRoomGroupDialog_contents.BothChatsDisplayed .chatTextarea:focus {
outline-offset: -2px;
outline: -webkit-focus-ring-color auto 5px; }
.chatSubmitButton {
position: relative;
background-color: #3d424b;
border: 1px solid #1b1c20;
color: #c9c9c9;
margin: 0px;
margin-top: 2px;
min-width: 16px;
max-width: 46px;
max-height: 46px;
padding: 0;
background-image: none;
background-size: 22px 22px;
background-position: center;
background-repeat: no-repeat;
min-width: 46px;
cursor: pointer; }
.chatSubmitButton:focus {
outline: none; }
.chatSubmitButton.EmoticonPickerButton,
.chatSubmitButton.EmbedButton {
flex: 0;
min-width: 46px;
position: relative;
color: #c9c9c9;
margin: 0px;
margin-top: 0px;
max-width: 46px;
max-height: 50px; }
.chatSubmitButton.EmoticonPickerButton {
margin-right: 1px;
overflow: hidden; }
.chatSubmitButton.EmoticonPickerButton .SVGIcon_CSGO {
width: 32px;
height: 32px;
fill: #dfc408;
margin-left: 1px;
margin-top: 4px; }
.chatEntry.compactView .chatEntryControls .chatSubmitButton {
margin-bottom: 2px; }
.chatEntry.compactView .chatSubmitButton {
min-width: 32px; }
.chatEntry.compactView .chatSubmitButton .SVGIcon_Submit,
.chatEntry.compactView .chatSubmitButton.EmoticonPickerButton .SVGIcon_Emoticon {
width: 20px;
height: 20px;
margin-top: 2px; }
.chatEntry.compactView .chatSubmitButton .SVGIcon_Paperclip {
width: 20px;
height: 20px;
margin-top: 3px;
margin-bottom: 4px; }
.chatEntry.compactView .chatSubmitButton .SVGIcon_Submit path {
stroke-width: 2px;
stroke: #8592a5; }
.chatEntry.compactView .chatSubmitButton.EmoticonPickerButton .SVGIcon_Emoticon line,
.chatEntry.compactView .chatSubmitButton.EmoticonPickerButton .SVGIcon_Emoticon circle,
.chatEntry.compactView .chatSubmitButton.EmoticonPickerButton .SVGIcon_Emoticon path {
stroke-width: 12px; }
.chatEntry.compactView .VoiceToggle {
height: 28px; }
.chatEntry.compactView .VoiceToggleIconCtn {
height: 24px;
top: 3px; }
.chatEntry.compactView .activeVoiceFlexBox {
height: 28px; }
.chatEntry.compactView .activeVoiceButtons button {
max-width: 28px;
min-width: 28px;
min-height: 28px;
max-height: 28px;
margin-top: 2px; }
.chatEntry.compactView .SVGIcon_Button.SVGIcon_Shadow {
top: 6px;
left: 10px; }
.chatEntry.compactView .VoiceControlPanelButton:active .SVGIcon_Microphone.SVGIcon_Shadow,
.chatEntry.compactView .VoiceControlPanelButton:active .SVGIcon_Headphones.SVGIcon_Shadow {
top: 3px;
left: 7px; }
.chatEntry.compactView .VoiceControlPanelButton.ToggleVoiceOutputButton .SVGIcon_Headphones,
.chatEntry.compactView .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone {
padding-top: 2px;
width: 20px;
height: 20px; }
.chatEntry.compactView .ChatMessageEntryVoice .activeVoiceButtons {
width: 64px; }
.chatEntry.compactView .ChatMessageEntryVoice .activeVoiceControls {
width: 64px; }
.chatEntry.compactView .ChatMessageEntryVoice.Active {
min-width: 114px;
max-width: 114px;
width: 114px; }
.chatEntry.compactView .ChatMessageEntryVoice.pushToTalkEnabled .activeVoiceButtons {
margin-top: -2px; }
.chatEntry.compactView .ChatMessageEntryVoice.pushToTalkEnabled .VoiceControlPanelButton {
min-height: 14px; }
.chatEntry.compactView .ChatMessageEntryVoice.pushToTalkEnabled .activeVoiceButtons .SVGIcon_Button.SVGIcon_Shadow {
top: 2px; }
.chatEntry.compactView .ChatMessageEntryVoice .activeVoicePushToTalk {
top: 18px;
right: 0px;
width: 66px;
text-align: center;
color: #74c069;
background-color: #0000; }
.chatSubmitButton.disabled,
.chatSubmitButton.EmbedButton,
.chatSubmitButton.EmoticonPickerButton {
background-color: #2c3036; }
.VoiceToggle.Inactive:hover,
.chatSubmitButton.EmbedButton:hover,
.chatSubmitButton.EmoticonPickerButton:hover {
background-color: #3d424b; }
.chatSubmitButton:not(.disabled):hover .SVGIcon_Button.SVGIcon_Submit path {
fill: white;
stroke: white; }
.ChatMessageEntryVoice {
/* our layout */
flex: 0;
min-width: 46px;
position: relative;
color: #c9c9c9;
margin: 0px;
margin-top: 0px;
max-width: 46px;
max-height: 50px;
padding: 2px;
display: flex;
flex-direction: column;
margin-left: 8px;
box-shadow: black 0px 0px 4px inset;
transition-property: width, max-width, min-width, border-radius, background-position;
transition-duration: .3s, .3s, .3s, .6s;
background: radial-gradient(128px 128px at 20% 50%, #1da834 0%, rgba(27, 28, 32, 0) 100%);
background-position: -190px 0px;
background-color: #1b1c20;
background-repeat: no-repeat;
background-size: 256px 128px; }
.ChatMessageEntryVoice.Disabled {
opacity: .2;
border: 1px dashed #000;
outline: 2px solid #0007; }
.ChatMessageEntryVoice.Active {
min-width: 136px;
max-width: 136px;
width: 136px;
background-position: 0px 0px; }
.ChatMessageEntryVoice .buttonsContainer {
display: flex; }
.chatRoomVoiceChannel .activeVoicePushToTalk {
display: none; }
.ChatMessageEntryVoice .activeVoicePushToTalk {
position: absolute;
top: 33px;
left: 49px;
width: 87px;
text-align: center;
color: #74c069;
background-color: #0005; }
.friendListHeaderContainer .activeVoicePushToTalk,
.ChatMessageEntryVoice .activeVoicePushToTalk {
font-size: 11px;
margin-top: 12px;
margin-bottom: -18px;
opacity: 1.0;
transition: opacity 0.3s ease-out;
white-space: nowrap;
user-select: none; }
.ChatMessageEntryVoice .activeVoicePushToTalk {
font-size: 10px;
margin-top: 0px; }
.friendListHeaderContainer .activeVoicePushToTalk {
float: right;
margin-right: 8px;
margin-bottom: 4px; }
.ChatMessageEntryVoice.pushToTalkEnabled .activeVoiceButtons {
margin-top: -8px; }
.ChatMessageEntryVoice.pushToTalkEnabled .VoiceControlPanelButton {
min-height: 14px; }
.ChatMessageEntryVoice.pushToTalkEnabled .activeVoiceButtons .SVGIcon_Button.SVGIcon_Shadow {
top: 2px; }
.activeVoicePushToTalk.pushToTalkKeyDown {
color: #c8f1c2; }
.chatSubmitButton .SVGIcon_Submit {
width: 24px;
height: 24px;
margin-top: 3px; }
.chatSubmitButton .SVGIcon_Submit path {
fill: #8592a5;
stroke-width: 2px; }
.VoiceToggleIconCtn .SVGIcon_VoiceRoom .Microphone {
fill: #8492a4;
transition-duration: 0s; }
.OneOnOneVoiceRoomControls {
display: flex;
flex: 1;
flex-direction: row;
z-index: 0;
min-height: 0;
height: 40px;
width: 100%;
background-color: #393e45;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25); }
.OneOnOneVoice-anim-appear,
.OneOnOneVoice-anim-enter {
opacity: 0.0;
height: 0px;
overflow: hidden;
transition: opacity 0.3s ease-out, height 0.3s ease-out; }
.OneOnOneVoice-anim-appear.OneOnOneVoice-anim-appear-active,
.OneOnOneVoice-anim-enter.OneOnOneVoice-anim-enter-active {
opacity: 1;
height: 40px;
overflow: hidden; }
.OneOnOneVoice-anim-exit {
opacity: 1;
height: 40px;
overflow: hidden;
transition: opacity 0.16s ease-out, height 0.3s ease-out; }
.OneOnOneVoice-anim-exit.OneOnOneVoice-anim-exit-active {
opacity: 0;
height: 0px;
overflow: hidden; }
.OneOnOneVoiceRoomControls .friend {
flex-direction: column;
margin-top: 1px; }
.OneOnOneVoiceRoomControls .friend .richPresenceLabel {
font-size: 10px; }
.OneOnOneVoiceRoomControls .friend {
position: relative;
margin-left: 0px;
margin-right: 8px; }
.OneOnOneVoiceRoomControls .friend.connecting .avatar,
.OneOnOneVoiceRoomControls .friend.slowconnecting .avatar {
filter: brightness(0.4);
transition: filter .3s ease-in-out; }
.OneOnOneVoiceRoomControls .friend.connecting .connectionSpinner,
.OneOnOneVoiceRoomControls .friend.slowconnecting .connectionSpinner {
display: block;
width: 12px;
height: 12px;
position: absolute;
animation-name: SlowSpin;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background-image: url("../../images/webui/simple_spinner_green.png");
background-repeat: no-repeat;
background-size: contain;
top: 12px;
left: 12px; }
.OneOnOneVoiceRoomControls .friend .labelHolder,
.OneOnOneVoiceRoomControls .friend .statusAndName {
display: none; }
.OneOnOneVoiceRoomControls .inviteButton.inviteButtonJoinVoice {
margin-right: 8px;
margin-top: 4px;
line-height: 14px; }
.OneOnOneVoiceRoomControls .VoiceToggleIconCtn {
position: relative;
left: 0px;
top: 5px;
margin-left: 10px;
margin-right: 10px; }
.OneOnOneVoiceRoomControls.OneOnOneVoiceActive .VoiceToggleIconCtn .AudioLines {
fill: black; }
.OneOnOneVoiceRoomControls.OneOnOneVoiceActive .VoiceToggleIconCtn .Bubble {
stroke: black; }
.OneOnOneVoiceMembers {
display: flex;
flex: 1;
flex-direction: row; }
.OneOnOneVoiceMembers .SteamLogoThrobber {
filter: hue-rotate(-90deg);
position: absolute;
left: 4px;
top: 1px; }
.OneOnOneVoiceActive {
background: radial-gradient(64% 124px at 10% 50%, rgba(28, 147, 49, 0.5) 0%, rgba(28, 147, 49, 0) 70%); }
.OneOnOneVoiceMembers .friend .avatarStatus {
display: block;
width: 2px;
flex: none;
position: absolute;
right: 0;
bottom: 0; }
.OneOnOneVoiceStatusLabel {
margin-top: 12px;
margin-left: 8px;
user-select: none; }
.OneOnOneVoiceActive .OneOnOneVoiceStatusLabel {
color: #87dfa3; }
.OneOnOneVoiceClose {
width: 32px;
height: 32px;
margin-top: 4px;
margin-right: 16px;
border-radius: 50%;
background-color: #222222;
cursor: pointer; }
.OneOnOneVoiceClose .SVGIcon_X_Line {
transform: scale(0.5); }
.OneOnOneVoiceClose .SVGIcon_X_Line line {
stroke: #ccc; }
.OneOnOneVoiceClose:hover {
background-color: #555; }
.OneOnOneVoiceClose:hover .SVGIcon_X_Line line {
stroke: #fff; }
.OneOnOneVoiceRoomControls .friend .avatarHolder img.avatar,
.friend.emptyFriend .avatarHolder img.avatar {
width: 36px;
height: 36px;
border-radius: 2px;
border: 1px solid transparent;
border-top: none;
border-bottom: 1px solid #fff8;
box-shadow: inset 1px 1px 4px black, inset 1px 1px 4px black, 1px 0 1px rgba(255, 255, 255, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2);
background-color: #0002; }
.OneOnOneVoiceRoomControls.OneOnOneVoiceActive .friend .avatarHolder img.avatar,
.OneOnOneVoiceRoomControls.OneOnOneVoiceActive .friend.emptyFriend .avatarHolder img.avatar {
box-shadow: inset 1px 1px 4px black, inset 1px 1px 4px black, 1px 0 1px rgba(65, 189, 121, 0.3), 0 1px 0 rgba(65, 189, 121, 0.3);
border-bottom: 1px solid rgba(65, 189, 121, 0.3); }
.SingleUserChat.VoiceRequested .OneOnOneVoiceRoomControls .friend.emptyFriend .avatarHolder:hover img {
background-color: #8fa2;
cursor: pointer; }
.Sonar {
opacity: 0;
transition: opacity .4s ease-in-out; }
.WaitingForYouFirstTime .Sonar {
opacity: 1; }
.SonarCircle {
width: 23px;
height: 23px;
border: 1px solid #10cd4e;
position: absolute;
border-radius: 50%;
left: 2px;
top: 1px;
z-index: 3;
opacity: 0;
animation-name: SonarPing;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite; }
@keyframes SonarPing {
0% {
transform: scale(0.15);
opacity: 0; }
25% {
opacity: 1; }
100% {
transform: scale(3);
opacity: 0; } }
.VoiceToggleIconCtn {
position: relative;
width: 28px;
height: 28px;
left: 12px;
position: absolute;
top: 11px; }
.chatSubmitButton:not(.disabled):hover .SVGIcon_Button {
fill: #f5ffd7; }
.chatSubmitButton.Inactive .SVGIcon_Microphone_Off {
opacity: 1; }
button.DialogButton.copyVoiceLogsButton {
margin-top: 12px;
margin-bottom: 12px;
width: fit-content;
padding: 0 24px;
margin-left: auto;
margin-right: auto; }
.VoiceToggle {
max-width: 46px;
min-width: 46px;
max-height: 46px;
width: 46px;
height: 46px;
margin: 0px;
background: #2c3036;
border: none;
border: 1px solid #1b1c20;
box-shadow: none;
padding: 0px;
cursor: pointer;
transition-property: width, max-width, border-radius, border, background-color;
transition-duration: .3s;
display: flex; }
.VoiceToggle:focus {
outline: none; }
.VoiceToggle.Active {
border: 1px solid #1b6329;
border-right: 0.5px solid #1c852f;
border-bottom: 0.5px solid #1c852f;
background-color: rgba(36, 39, 46, 0.5); }
.VoiceToggle.Active:hover {
background-color: rgba(97, 253, 151, 0.3); }
.chatSubmitButton.EmoticonPickerButton .SVGIcon_Emoticon {
width: 26px;
height: 26px; }
.EmoticonPickerButton .SVGIcon_Emoticon line,
.EmoticonPickerButton .SVGIcon_Emoticon circle,
.EmoticonPickerButton .SVGIcon_Emoticon path {
stroke: #8492a4;
stroke-width: 10px; }
.EmoticonPickerButton .SVGIcon_Emoticon line {
stroke-width: 16px; }
.EmoticonPickerButton:hover .SVGIcon_Emoticon line,
.EmoticonPickerButton:hover .SVGIcon_Emoticon circle,
.EmoticonPickerButton:hover .SVGIcon_Emoticon path {
stroke: white; }
.EmbedButton {
background-image: none;
margin-right: 2px;
font-size: 28px;
text-align: center;
color: #8492a4;
padding: 0px; }
.EmbedButton .SVGIcon_Paperclip {
width: 60%;
height: 60%;
margin-top: 6px; }
.EmbedButton .SVGIcon_Paperclip path {
stroke: #8492a4;
stroke-width: 12px; }
.EmbedButton:hover .SVGIcon_Paperclip path,
.SVGIcon_Paperclip {
stroke: #fff; }
.SVGIcon_Button.SVGIcon_Emoticon {
width: 100%;
height: 100%; }
.chatSubmitButton.disabled {
color: #898989;
cursor: default; }
.chatWindow .chatHeader {
flex-shrink: 0;
background-color: #3a3e46;
background: linear-gradient(to right, #3a3e46 80%, #2c3037 100%);
min-height: 4px;
transition: background-color 0.2s ease-in-out;
position: relative; }
.TheaterMode .chatWindow.broadcastVisible .chatHeader {
display: none; }
.chatWindow .chatHeaderGradient {
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background: linear-gradient(to bottom, rgba(158, 62, 70, 0) 0%, #1e2025 100%);
user-select: none;
pointer-events: none;
z-index: 0;
display: none; }
.chatWindow.SingleUserChat .chatHeader {
background: #393e45; }
.voiceChatControlsContainer {
position: absolute;
width: 100%;
z-index: 3;
top: 8px;
right: 12px; }
.alignRightVoiceControls {
float: right;
max-width: 300px; }
.activeVoiceControls {
background: #38404b;
border-top: 1px solid #78db86;
border-bottom: 1px solid #78db86;
border-image: url("data:image/svg+xml;utf8, ") 10% stretch; }
.CloseActiveVoiceWindowConfirmation .activeVoiceControls {
margin-right: 16px;
margin-top: 8px; }
.friendListHeaderContainer > .activeVoiceControls {
height: 43px; }
.friendListHeaderContainer > .activeVoiceControls.pushToTalkEnabled {
height: 58px; }
.activeVoiceFlexBox {
height: 44px;
display: flex;
justify-content: space-between; }
.activeVoiceControls .connectionStatusLabels,
.chatRoomVoiceChannel .connectionStatusLabels {
font-size: 10px;
color: #0ee720;
text-align: right;
font-weight: 100; }
a.connectionStatus,
a.connectionStatus:hover,
a.connectionStatus:active,
a.connectionStatus:visited {
color: #0ee720 !important; }
.activeVoiceControls .connectionStatusLabels {
margin-top: -14px;
margin-right: 6px; }
.chatRoomVoiceChannel .connectionStatusLabels {
font-size: 10px;
padding: 2px; }
.chatRoomGroupNavColumn .activeVoiceControls .activeVoiceLabels,
.chatRoomListContainer .activeVoiceControls .activeVoiceLabels {
display: none; }
.SingleUserChat .activeVoiceControls {
background-color: transparent;
background: transparent;
border: 0px solid transparent;
transition: margin .34s ease-in-out, opacity .24s ease-in-out;
opacity: 0;
pointer-events: none; }
.SingleUserChat.VoiceActive .activeVoiceControls {
margin-left: 0px;
opacity: 1;
pointer-events: initial; }
.SingleUserChat .activeVoiceLabels {
display: none; }
.activeVoiceLabels {
font-size: 10px;
padding-left: 12px;
padding-top: 4px;
padding-right: 12px;
min-width: 0; }
.activeVoiceLabels .activeVoiceHeader {
color: #76d483;
letter-spacing: 2px;
white-space: nowrap; }
.activeVoiceLabels .activeVoiceName {
font-size: 12px;
color: #a7d4ad;
line-height: 12px;
max-height: 24px;
/* height is 2x line-height, so two lines will display */
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer; }
.activeVoiceLabels .activeVoiceName:hover {
color: white; }
.activeVoiceButtons {
min-width: 132px;
display: flex;
justify-content: space-between;
padding-right: 1px;
height: 100%; }
.ChatMessageEntryVoice .activeVoiceButtons {
min-width: 0px;
width: 84px; }
.ChatMessageEntryVoice .activeVoiceControls {
min-width: 0px;
width: 84px;
border-top: 0px solid transparent;
border-bottom: 0px solid transparent;
background: none; }
.activeVoiceButtonsSpacer {
display: block;
flex: 1;
transition: flex .4s ease-in-out; }
.activeVoiceButtonsSpacerAfter {
display: block;
flex: 0;
transition: flex .4s ease-in-out; }
.emptyChannelNotice {
pointer-events: none;
user-select: none;
height: 0px;
opacity: 0;
margin: 0px;
font-size: 10px;
color: #5f6f79;
margin-left: 12px;
transition: opacity .21s ease-in-out, height .21s ease-in-out, margin .21s ease-in-out; }
.emptyChannelNotice.Visible {
height: 12px;
opacity: 1;
margin-bottom: 6px;
margin-top: 6px; }
.chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceButtons .activeVoiceButtonsSpacer {
display: block;
flex: 1; }
.chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceButtons button .VoiceControlPanelButton,
.chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceButtons button {
max-width: 26px;
min-width: 26px;
min-height: 28px;
max-height: 28px;
margin: 0 0.5px; }
.ChatMessageEntryVoice.Inactive .VoiceControlPanelButton {
pointer-events: none; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton .SVGIcon_Button {
width: 18px;
height: 18px;
fill: #9198a1; }
.activeVoiceButtons .SVGIcon_Button {
fill: #c8f1c2; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat .SVGIcon_Button {
fill: rgba(0, 0, 0, 0); }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton .SVGIcon_Button.SVGIcon_VoiceRoom {
width: 25px;
height: 24px;
margin-top: 3px;
margin-left: -8px; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.ToggleVoiceOutputButton:hover .SVGIcon_Button,
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.ToggleMicrophoneButton:hover .SVGIcon_Button {
fill: white; }
.VoiceControlPanelButton .SVGIcon_Microphone.SVGIcon_Shadow line,
.VoiceControlPanelButton .SVGIcon_Headphones.SVGIcon_Shadow line,
.VoiceControlPanelButton:hover .SVGIcon_Microphone.SVGIcon_Shadow,
.VoiceControlPanelButton:hover .SVGIcon_Headphones.SVGIcon_Shadow {
fill: black;
stroke: black; }
.VoiceControlPanelButton:active .SVGIcon_Microphone,
.VoiceControlPanelButton:active .SVGIcon_Headphones {
margin-left: 2px;
transition: all 0.05s ease-in-out; }
.VoiceControlPanelButton:active .SVGIcon_Microphone.SVGIcon_Shadow,
.VoiceControlPanelButton:active .SVGIcon_Headphones.SVGIcon_Shadow {
filter: blur(1px);
left: 11.5px;
top: 7px;
margin-left: 0px;
transition: all 0.05s ease-in-out; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.ToggleMicrophoneButton {
border-bottom-left-radius: 4px; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat {
min-width: 48px;
border-left: 0.5px solid #2e3c44; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat .SVGIcon_VoiceRoom .ExitDoor,
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat .SVGIcon_VoiceRoom .Arrow {
stroke: #8f9e9c; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat:hover .SVGIcon_VoiceRoom .ExitDoor,
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat:hover .SVGIcon_VoiceRoom .Arrow {
stroke: white; }
.chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceButtons {
min-width: 100%; }
.activeVoiceButtons button {
max-width: 42px;
min-width: 42px;
min-height: 42px;
max-height: 42px;
background: none;
box-shadow: none;
border: none;
background-repeat: no-repeat;
background-position: 50% 50%;
float: left;
margin: 0px;
align-self: center;
padding: 0px;
margin-top: 2px;
border-radius: 2px;
margin: 2px;
margin-top: 4px;
margin-right: 0px;
outline: none !important;
cursor: pointer; }
.friendListHeaderContainer .VoiceControlPanelButton.chatInvite {
display: none; }
.chatRoomVoiceChannel .VoiceControlPanelButton.chatInvite {
pointer-events: none; }
.chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatInvite {
pointer-events: all; }
.VoiceControlPanelButton:hover {
background-color: rgba(97, 253, 151, 0.3); }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone:hover {
background-color: rgba(97, 253, 151, 0);
cursor: default; }
.ChatMessageEntryVoice.Active .VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone:active,
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone:active {
background-color: rgba(197, 23, 11, 0.5);
transition-duration: 0s; }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone:active .SVGIcon_Button {
margin-left: 0px; }
.SVGIcon_Headphones .HeadphonesStrike,
.SVGIcon_Microphone .MicStrike {
transform: transformY(45px);
transition: stroke-width .3s linear, stroke .3s linear, transform .3s linear;
transform-origin: 250px 250px; }
.SVGIcon_Headphones .HeadPhonesFill,
.SVGIcon_Microphone .MicFill {
transition: opacity .2s ease-in-out; }
.MicMuted .SVGIcon_Microphone .MicStrike,
.disabled .SVGIcon_Headphones .HeadphonesStrike,
.disabled .SVGIcon_Microphone .MicStrike {
stroke-width: 10px;
stroke: #fff;
transform: transformY(0px); }
.MicMuted .SVGIcon_Microphone .MicFill,
.disabled .SVGIcon_Headphones .HeadPhonesFill,
.disabled .SVGIcon_Microphone .MicFill {
opacity: 0; }
.ChatMessageEntryVoice .VoiceControlPanelButton.ToggleVoiceOutputButton {
transform: translateX(-64px) scale(0.7);
transition-property: transform, opacity;
transition-duration: .16s;
transition-timing-function: ease-in-out;
opacity: 0;
cursor: pointer; }
.ChatMessageEntryVoice .VoiceControlPanelButton.ToggleMicrophoneButton {
transform: translateX(-32px) scale(0.5);
transition: transform .1s ease-in-out, opacity .3s ease-in-out;
opacity: 0;
cursor: pointer; }
.ChatMessageEntryVoice.Active .VoiceControlPanelButton.ToggleVoiceOutputButton,
.ChatMessageEntryVoice.Active .VoiceControlPanelButton.ToggleMicrophoneButton {
opacity: 1;
transform: translateX(0px) scale(1);
transition: transform .3s ease-in-out, opacity .3s ease-in-out, background-color .1s ease-in-out; }
.VoiceControlPanelButton.ToggleVoiceOutputButton .SVGIcon_Headphones,
.VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone {
padding-top: 4px;
width: 24px;
height: 24px; }
.SVGIcon_Button.SVGIcon_Shadow {
fill: black;
filter: blur(3px);
position: absolute;
left: 12px;
top: 10px;
z-index: -1; }
.chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceFlexBox {
height: 28px; }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone .SVGIcon_Microphone {
fill: #f43; }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone .SVGIcon_Microphone {
fill: #f43; }
.ChatMessageEntryVoice.pushToTalkEnabled .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone,
.friendListHeaderContainer .pushToTalkEnabled .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone {
fill: rgba(200, 241, 194, 0.2); }
.ChatMessageEntryVoice.pushToTalkEnabled .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone.SVGIcon_Shadow,
.friendListHeaderContainer .pushToTalkEnabled .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone.SVGIcon_Shadow {
fill: rgba(0, 0, 0, 0.2); }
.ChatMessageEntryVoice.pushToTalkEnabled.pushToTalkKeyDown .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone.SVGIcon_Shadow,
.friendListHeaderContainer .pushToTalkEnabled.pushToTalkKeyDown .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone.SVGIcon_Shadow {
fill: black; }
.ChatMessageEntryVoice.pushToTalkEnabled.pushToTalkKeyDown .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone,
.friendListHeaderContainer .pushToTalkEnabled.pushToTalkKeyDown .VoiceControlPanelButton.ToggleMicrophoneButton .SVGIcon_Microphone {
fill: #c8f1c2; }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone .SVGIcon_Microphone.SVGIcon_Microphone.SVGIcon_Shadow {
opacity: 0; }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone .SVGIcon_Microphone .MicStrike {
stroke-width: 10px;
stroke: #f44; }
.VoiceControlPanelButton.ToggleMicrophoneButton.NoMicrophone .SVGIcon_Microphone .MicFill {
fill: transparent; }
.ChatMessageEntryVoice .VoiceControlPanelButton.chatEndVoiceChat {
display: none; }
.chatTab .friend {
height: 100%;
padding: 0px;
margin: 0px; }
.chatTab.ChatTabTransiton-appear,
.chatTab.ChatTabTransiton-enter,
.chatTab.ChatTabTransiton-appear-active,
.chatTab.ChatTabTransiton-enter-active,
.chatTab.ChatTabTransiton-exit,
.chatTab.ChatTabTransiton-exit-active {
transition: all 0.15s ease-in-out; }
.chatTab.ChatTabTransiton-appear,
.chatTab.ChatTabTransiton-enter {
opacity: 0.01;
transform: translateY(42px); }
.chatTab.ChatTabTransiton-appear-active,
.chatTab.ChatTabTransiton-enter-active {
opacity: 1;
transform: translateY(0px); }
.chatTab.ChatTabTransiton-exit {
opacity: 1;
transform: translateY(0px);
animation-name: TabBounce;
animation-duration: .3s;
animation-iteration-count: 1;
animation-timing-function: ease-in; }
.chatTab.ChatTabTransiton-exit-active {
opacity: 0;
transform: translateY(42px);
transform-origin: 0% bottom;
margin-right: -180px; }
@keyframes TabBounce {
0% {
margin-right: 0px; }
50% {
margin-right: -180px; }
80% {
margin-right: -172px; }
100% {
margin-right: -180px; } }
.chatTabList > div {
display: flex; }
.chatTab .avatarHolder {
height: 100%;
transform: scale(1, 1) translateX(0px);
border-radius: 0px; }
.chatTab .avatarHolder img {
height: 100%;
width: 42px;
border: 0px solid black;
/*border-top-left-radius: 4px;*/
box-shadow: inset 0 0 10px #000000;
z-index: 3; }
.chatTab .avatarHolder .avatarStatus {
display: block;
width: 2px;
flex: none;
/*border-top-left-radius: 4px;*/ }
/*.chatTab.VoiceActive .avatarHolder
{
display: relative;
}
.chatTab.VoiceActive .avatarHolder .avatarStatus
{
position: absolute;
left: -20px;
z-index: 40;
height: 43px;
}*/
.chatTab .avatarHolder:hover {
transform: scale(1, 1) translateX(0px); }
.chatTab .avatarHolder:hover img {
transform: scale(1, 1) translateX(0px); }
.MemberListColumn .friend.online .avatarHolder .avatarStatus {
background: linear-gradient(to right, #6dcff6 0%, #6dcff6 2px, rgba(109, 207, 246, 0) 2px, rgba(109, 207, 246, 0) 100%);
background-color: rgba(109, 207, 246, 0); }
.MemberListColumn.MemberListViewCompact .friend.online .avatarHolder .avatarStatus {
width: 10px;
transform: translateX(8px);
background-color: rgba(109, 207, 246, 0.3); }
.MemberListColumn .friend.ingame .avatarHolder .avatarStatus {
background: linear-gradient(to right, #8cd61d 0%, #8cd61d 2px, rgba(140, 214, 29, 0) 2px, rgba(140, 214, 29, 0) 100%);
background-color: rgba(140, 214, 29, 0); }
.MemberListColumn .friend.golden .avatarHolder .avatarStatus {
background: linear-gradient(to bottom, #d5bf6a 0%, #ffe2a9 40%, #ba995c 52%, #ba995c 61%, #d5bf6a 85%);
background-color: rgba(213, 191, 106, 0); }
.MemberListColumn .friend.watchingbroadcast .avatarHolder .avatarStatus {
background: linear-gradient(to right, #9c8fd4 0%, #9c8fd4 2px, rgba(156, 143, 212, 0) 2px, rgba(156, 143, 212, 0) 100%);
background-color: rgba(156, 143, 212, 0); }
.MemberListColumn.MemberListViewCompact .friend.ingame .avatarHolder .avatarStatus {
width: 10px;
transform: translateX(8px);
background-color: rgba(140, 214, 29, 0.45); }
.friendInviteContainer .SnoozeContainer {
display: none; }
.friend.ingame.awayOrSnooze .labelHolder,
.friendInviteContainer .friend.awayOrSnooze .labelHolder,
.chatTab .friend.awayOrSnooze .labelHolder,
.DialogContent._DialogLayout .friend.awayOrSnooze .labelHolder,
.FriendPicker_Suggestions .friend.awayOrSnooze .labelHolder,
.friend.awayOrSnooze .avatarHolder {
opacity: 1; }
.friend.awayOrSnooze .labelHolder {
opacity: .5; }
.chatWindow .chatBody {
flex: 3;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
z-index: 0; }
.chatWindow .chatBody.chatRoomActiveDrop {
position: relative; }
.chatBody .ChatBodyControls {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 0;
border-bottom: 2px solid #393e45; }
.BroadcastChatExpander .SVGIcon_HideShowChat line,
.BroadcastChatExpander .SVGIcon_HideShowChat polyline,
.BroadcastChatExpander .SVGIcon_HideShowChat polygon,
.ChatBodyControls .Close .SVGIcon_HideShowChat polyline {
stroke: #969696; }
.ChatBodyControls .Close .SVGIcon_HideShowChat line {
stroke: #967575; }
.ChatBodyControls .Close:hover .SVGIcon_HideShowChat line,
.ChatBodyControls .Close:hover .SVGIcon_HideShowChat polyline {
stroke: white; }
.chatBody .ChatBodyControls .showBothTabs,
.chatBody .ChatBodyControls .Close {
padding: 4px;
width: 24px;
height: 24px;
cursor: pointer;
fill: #393e45;
transition: fill 0.2s ease-in-out;
flex-shrink: 0; }
.chatBody .ChatBodyControls .showBothTabs {
opacity: .3;
flex: 1 0;
flex-shrink: 0;
max-width: 34px;
min-width: 34px; }
.chatBody .ChatBodyControls .showBothTabs:hover {
opacity: .8; }
.BothChatsDisplayed .chatBody .ChatBodyControls .showBothTabs {
opacity: 0.8; }
.BothChatsDisplayed .chatBody .ChatBodyControls .showBothTabs:hover {
opacity: 1; }
.BothChatsDisplayed .chatBody .ChatBodyControls .showBothTabs .SVGIcon_ShowBothChats circle,
.BothChatsDisplayed .chatBody .ChatBodyControls .showBothTabs .SVGIcon_ShowBothChats polyline {
opacity: 1;
fill: #747e8d; }
.chatBody .ChatBodyControls .Close:hover {
fill: #969696; }
.chatBody .ChatBodyControls .InnerChatTabs {
flex: 1;
display: flex;
min-width: 0; }
.chatBody .InnerChatTab,
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab {
position: relative;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #2c3037;
font-size: 14px;
color: #969696;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
padding: 6px 8px;
margin-left: 4px;
margin-right: 4px;
margin-top: 2px;
overflow: hidden;
user-select: none; }
.chatBody .InnerChatTab {
flex: 0 0;
min-height: 20px;
min-width: 0; }
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab .ChatUnreadMessageIndicator {
height: 100%; }
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab .ChatUnreadMessageIndicator .chatUnreadCircle {
margin-top: 55%;
margin-left: -3px; }
.chatBody .InnerChatTab .SVGIcon_Globe {
width: 16px;
height: 16px;
box-sizing: border-box;
border-width: 1px; }
.chatBody .InnerChatTab .SVGIcon_Button,
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab .ChatRoomGroupAvatar,
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab .ChatRoomMultiFriendAvatar.Micro {
margin-right: 4px; }
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab.Active {
background-color: #393e45;
cursor: default; }
.ChatRoomGroupDialog_contents.BothChatsDisplayed .chatBody .InnerChatTab,
.ChatRoomGroupDialog_contents.BothChatsDisplayed .chatBody .InnerChatTab.Active {
pointer-events: none;
cursor: default;
background-color: #2c3037; }
.chatBody .ChatBodyControls .InnerChatTabs .InnerChatTab .InnerChatTabLabel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.chatBody .BroadcastChat {
max-width: none;
min-width: 0;
width: 100%;
display: none; }
.GlobalChatVisible .BroadcastChat {
display: block; }
.BroadcastChatExpander {
position: absolute;
bottom: 50%;
right: 50%;
height: 24px;
width: 24px;
background-color: rgba(29, 31, 36, 0.8);
opacity: 1;
z-index: 32;
cursor: pointer;
padding: 4px;
transition: opacity .2s ease-in-out; }
.BroadcastChatExpander:hover .SVGIcon_HideShowChat line,
.BroadcastChatExpander:hover .SVGIcon_HideShowChat polygon,
.BroadcastChatExpander:hover .SVGIcon_HideShowChat polyline {
stroke: white; }
.BroadcastChatExpander.right {
right: 0;
top: 12px;
margin-bottom: -16px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px; }
.BroadcastChatExpander.bottom {
bottom: 0;
left: 46px;
margin-right: -16px;
border-top-left-radius: 2px;
border-top-right-radius: 2px; }
.TheaterMode .BroadcastChatExpander.bottom {
left: 0; }
.ChatRoomGroup_Main_ContentAndMembers,
.ChatRoomGroup_Main_Content,
.ChatRoomGroup_MainAndChatEntry {
flex: 1;
min-width: 0;
min-height: 0; }
.ChatRoomGroup_Main_Content.Horizontal {
display: flex;
flex-direction: row;
position: relative; }
.ChatRoomGroup_Main_Content.Horizontal .chatBody {
min-width: 264px; }
.ChatRoomGroup_Main_Content.Vertical {
display: flex;
flex-direction: column; }
.ChatRoomGroupDialog_history {
position: relative;
/* Mirrors expected layout for when it is directy under chatBody in Friend dialog */
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden; }
.InsetWindowOpen .ChatRoomGroupDialog_history {
position: initial; }
.InsetWindowOpen .chatHistoryAndMembers {
position: relative; }
.ChatHistoryContainer {
position: relative;
min-width: 0;
display: flex;
flex: 1;
flex-direction: column;
z-index: 0;
min-height: 0;
transition-property: opacity;
transition-duration: 0.32s;
transition-timing-function: ease-in-out; }
.inviteAnotherFriendButton {
width: 32px;
height: 32px;
border-radius: 50%;
display: block;
position: absolute;
top: 8px;
right: 16px;
background-color: #1f2126;
cursor: pointer;
transition: top .32s ease-in-out; }
.inviteAnotherFriendButton.broadcastVisible {
top: unset; }
.errorDisconnected .inviteAnotherFriendButton {
display: none; }
.NotAFriendOrApproved .inviteAnotherFriendButton {
display: none; }
.SingleUserChat.VoiceRequested .inviteAnotherFriendButton,
.SingleUserChat.VoiceActive .inviteAnotherFriendButton {
top: 56px; }
.inviteAnotherFriendButton .SVGIcon_Button {
width: 80%;
height: 80%;
fill: #3e4450;
margin-left: 4px;
margin-top: 2px; }
.inviteAnotherFriendButton .SVGIcon_Button line {
stroke: #3e4450; }
.inviteAnotherFriendButton:hover .SVGIcon_Button,
.inviteAnotherFriendButton:hover .SVGIcon_Button line {
stroke: white;
fill: white; }
.chatHistoryScroll {
overflow: auto;
position: relative;
padding: 14px 6px;
min-height: 100%;
box-sizing: border-box; }
.chatRoomGroupNavColumn {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
max-width: 200px;
min-width: 200px;
box-shadow: 0 0 22px 0 #00000033;
overflow-y: auto;
overflow-x: hidden;
/*padding-top: 20px;*/
transition: all .4s ease-in-out;
overflow: visible;
z-index: 1; }
.chatRoomGroupNavColumn.noActiveVoiceChannels.defaultChatOnly {
min-width: 0px;
max-width: 0px;
opacity: 0;
overflow: hidden; }
.chatRoomMembers {
flex: 1;
user-select: none;
cursor: default;
border-left: 1px solid #22252b;
border-right: 6px solid rgba(34, 37, 43, 0); }
.MemberListColumn {
width: 220px;
/*height: 100%;*/
flex-shrink: 0;
display: flex;
flex-direction: column;
transition: width 0.32s ease-in-out, background-color .32s ease-in-out;
background-color: rgba(34, 37, 43, 0);
position: relative; }
.MemberListColumn.MemberListViewCompact {
width: 46px; }
.ChatSpeaker.ChatRoomSpeaker .speaker .rankIcon,
.MemberListColumn .friend .rankIcon,
.MemberListColumn .friend .chatMemberFriendIcon {
position: relative; }
.ChatSpeaker.ChatRoomSpeaker .speaker .rankIcon > *,
.MemberListColumn .friend .rankIcon > * {
position: absolute;
width: 12px;
height: 12px;
left: -5px;
top: -5px;
z-index: 1; }
.ChatSpeaker.ChatRoomSpeaker .speaker .rankIcon .SVGIcon_Crown,
.MemberListColumn .friend .rankIcon .SVGIcon_Crown {
fill: #ffbb00;
stroke: black;
stroke-width: 6px;
background: radial-gradient(10px 10px at 70% 60%, black 0%, rgba(0, 0, 0, 0) 50%, rgba(36, 39, 46, 0) 100%); }
.MemberListColumn .friend .rankIcon.isFriend .SVGIcon_Crown {
margin-top: 9px;
z-index: 10;
background: none; }
.MemberListColumn .friend .chatMemberFriendIcon svg {
position: absolute;
width: 16px;
height: 16px;
left: -7px;
bottom: -6px;
z-index: 1; }
.MemberListColumn .friend .chatMemberFriendIcon svg circle,
.MemberListColumn .friend .chatMemberFriendIcon svg path {
fill: #a6a7a8; }
.MemberListColumn .friend .chatMemberFriendIcon svg .outline circle,
.MemberListColumn .friend .chatMemberFriendIcon svg .outline path {
stroke: black;
fill: black;
stroke-width: 20px; }
.MemberListColumn .friend .chatMemberFriendIcon .WavingArm {
animation-name: none;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
transform-origin: 25% 55%; }
.MemberListColumn .friend:hover .chatMemberFriendIcon .WavingArm {
animation-name: FriendRequestWave; }
.MemberListColumn .friend .chatMemberPartyBeaconIcon svg {
position: absolute;
width: 7px;
height: 7px;
left: 29px;
padding: 3px;
bottom: -2px;
z-index: 1;
background: linear-gradient(to right, #4a8d24, #7aaf2b);
border-radius: 8px; }
.MemberListColumn .friend .chatMemberPartyBeaconIcon svg .playTriangle {
fill: #e1f7c9; }
.MemberListColumn.MemberListViewCompact .friendGroup .groupName .groupIcon {
opacity: 1;
transform: translateX(0px); }
.MemberListViewCompact .CompactFriendsList .friend .labelHolder {
opacity: 0;
transition-delay: 0s; }
.MemberListColumn.MemberListViewCompact .chatRoomMembers {
/*
overflow-x: hidden;
overflow-y: auto;
*/
margin-right: -20px;
padding-right: 28px; }
.MemberListColumn.MemberListViewCompact .friendGroup .groupName .groupCount,
.MemberListColumn.MemberListViewCompact .friendGroup .groupName .groupNameLabel {
opacity: 0;
transform: scale3d(0.4, 2, 1);
font-weight: bold;
pointer-events: none; }
.MemberListColumn .friendGroup .groupName .groupCountCollapsed {
opacity: 0;
position: absolute;
color: #d4e0e7;
letter-spacing: 0px;
font-size: 12px;
white-space: no-wrap;
text-overflow: clip;
transform: translateX(84px) translateY(0px);
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
z-index: 2;
pointer-events: none;
min-width: 34px;
text-align: right; }
.MemberListColumn.MemberListViewCompact .friendGroup .groupName .groupCountCollapsed {
opacity: 1;
transform: translateX(-8px) translateY(6px); }
.MemberListColumn.MemberListViewCompact .friendGroup .groupName .groupIcon .SVGIcon_Group {
fill: #888;
stroke: #8880;
stroke-width: 0px; }
.MemberListOptionsContainer {
width: 100%;
height: 42px;
display: flex;
flex-direction: row;
justify-content: flex-end;
position: relative;
margin-left: 0px; }
.ChatRoomMemberScrollList_List {
outline: 0;
border-right: 6px solid rgba(34, 37, 43, 0); }
.MemberListColumn.MemberListViewCompact .ChatRoomMemberScrollList_List::-webkit-scrollbar {
display: none; }
.MemberListColumn.MemberListViewCompact .ChatRoomMemberScrollList_List {
border-right: 0px solid rgba(34, 37, 43, 0); }
.chatRoomGroupNavCollapseExpand,
.MemberListOption {
width: 20px;
height: 26px;
align-self: center;
margin-right: 0px;
opacity: 0.5;
flex-shrink: 0;
cursor: pointer;
padding: 4px;
transition: all .4s ease-in-out; }
.MemberListOptionsContainer .MemberListOption {
padding-right: 0;
padding-left: 12px; }
.MemberListViewCompact .MemberListOptionsContainer .MemberListOption {
margin-left: 14px;
padding-left: 0px; }
.chatRoomGroupNavColumn .chatRoomGroupNavCollapseExpand {
margin-right: 8px;
opacity: 1;
position: absolute;
top: 0;
right: -4px; }
.chatRoomGroupNavColumn.chatRoomGroupNavCollapsed .chatRoomGroupNavCollapseExpand {
right: -56px; }
.chatRoomGroupNavColumn.chatRoomGroupNavCollapsed {
min-width: 46px;
max-width: 46px; }
.chatRoomGroupNavCollapsed .chatRoomTextChannel:hover,
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel:not(.ActiveVoiceChannel):hover {
overflow: visible;
transition-duration: 0s; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannelsGroup .chatRoomVoiceChannel,
.chatRoomGroupNavCollapsed .chatRoomVoiceChannelsGroup .chatRoomVoiceChannel.ActiveVoiceChannel {
transition: all .4s ease-in-out;
width: 42px;
overflow: hidden;
margin-left: 2px;
margin-right: 2px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover {
width: 200px;
box-shadow: 4px 2px 18px 0px #00000088;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .voicestatusIcon.voiceStatusMic {
margin-left: -46px;
z-index: 2; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .voicestatusIcon.voicestatusIcon.voiceStatusOutput {
margin-left: 12px;
z-index: 2; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .voicestatusIcon.voiceStatusMic {
margin-left: 0px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .voicestatusIcon.voicestatusIcon.voiceStatusOutput {
margin-left: 0px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .emptyChannelNotice.Visible {
opacity: 1;
transition-delay: .3s; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceButtonsSpacer {
flex: 0; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceButtonsSpacerAfter {
flex: 1; }
.chatRoomGroupNavCollapsed .chatRoomTextChannel.ActiveTextChannel:hover {
background: linear-gradient(to right, #3a3e46 0px, #3a3e46 46px, rgba(58, 62, 70, 0) 47px, rgba(0, 0, 0, 0) 100%); }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .VoiceControlPanelButton {
opacity: 1; }
.chatRoomGroupNavCollapsed .chatRoomTextChannelName {
position: absolute;
top: 1px;
left: 42px;
line-height: 28px;
pointer-events: none; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel:not(.ActiveVoiceChannel) .chatRoomVoiceChannelName {
position: absolute;
top: 0px;
left: 24px;
line-height: 28px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel:not(.ActiveVoiceChannel):hover .chatRoomVoiceChannelName,
.chatRoomGroupNavCollapsed .chatRoomTextChannel:hover .chatRoomTextChannelName {
opacity: 1;
transition-duration: .21s;
background-color: #1d1f24;
width: fit-content;
position: absolute;
left: 42px;
line-height: 28px;
padding: 0px 8px;
top: 1px;
bottom: -1px;
padding-bottom: 4px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
.chatRoomGroupNavCollapsed .chatRoomTextChannel.ActiveTextChannel:hover .chatRoomTextChannelName {
background-color: #3a3e46; }
.chatRoomGroupNavCollapsed .CompactFriendsList .friend {
padding-left: 8px; }
.chatRoomGroupNavCollapsed .ScratchPadConnect {
opacity: 0; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomTextChannel {
right: -48px;
width: 23px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .chatRoomTextChannel {
right: 109px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .VoiceControlPanelButton.chatEndVoiceChat {
min-width: 42px;
opacity: 1; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomTextChannel .chatRoomTextChannelIcon {
opacity: 0;
transition: all .32s ease-in-out; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .chatRoomTextChannel .chatRoomTextChannelIcon {
opacity: 1; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomTextChannel {
overflow: visible; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomTextChannel .ChatUnreadMessageIndicator {
left: -10px;
top: 0;
opacity: 1;
transform: scaleX(-1);
transform-origin: 19% 48%;
transition: all .34s ease-in-out; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .chatRoomTextChannel .ChatUnreadMessageIndicator {
transform: scaleX(1);
left: 0px;
top: -6px; }
.chatRoomGroupNavCollapsed .emptyChannelNotice {
opacity: 0;
transition-duration: .21s;
transition-delay: 0s; }
.chatRoomGroupNavCollapsed .VoiceControlPanelButton,
.chatRoomGroupNavCollapsed .friend .labelHolder,
.chatRoomGroupNavCollapsed .chatRoomTextChannel .chatRoomTextChannelName,
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel .chatRoomVoiceChannelName {
opacity: 0;
transition-duration: .21s; }
.ChannelTypeTitle {
transition: all .16s ease-in-out; }
.ChannelTypeTitle .ChannelTypeLabel {
flex: 1;
transition: all .16s ease-in-out;
min-width: 0;
border-radius: 3px;
margin-right: 2px;
padding: 2px 0; }
.ChannelTypeTitle .ChannelTypeLabel:not(.NoPermission) {
cursor: pointer; }
.ChannelTypeTitle .ChannelTypeLabel:hover:not(.NoPermission) {
color: #a3bdce; }
.ChannelTypeTitle .ChannelTypeLabel:active:not(.NoPermission) {
color: white;
transform: translateY(1px);
transition-duration: 0s; }
.chatRoomGroupNavCollapsed .ChannelTypeTitle .ChatRoomAddRoomBtn {
flex: 1;
margin-left: 55px; }
.chatRoomGroupNavCollapsed .ChannelTypeTitle .ChannelTypeLabel {
flex: 0;
opacity: 0;
pointer-events: none; }
.chatRoomGroupNavCollapsed .ChannelTypeTitle {
transform: translateX(-52px); }
.chatRoomGroupNavCollapsed .chatRoomGroupNavCollapseExpand .SVGIcon_DoubleArrow {
transform: rotateZ(180deg); }
.chatRoomGroupNavCollapsed .chatRoomTextChannel {
padding-left: 8px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannelIcon {
margin-left: 8px; }
.chatRoomGroupNavCollapsed .chatRoomVoiceChannel.ActiveVoiceChannel:hover .chatRoomVoiceChannelName,
.chatRoomGroupNavCollapsed .chatRoomVoiceChannelsGroup .chatRoomVoiceChannel.ActiveVoiceChannel:hover .friend .labelHolder {
opacity: 1; }
.chatRoomGroupNavCollapseExpand .SVGIcon_DoubleArrow,
.MemberListOption .SVGIcon_DoubleArrow {
transform: rotateZ(180deg);
width: 16px;
height: 16px;
opacity: 1;
display: block;
margin: 0px;
margin-top: 4px;
transition: all .21s ease-in-out;
transition-duration: .24s;
cursor: pointer; }
.chatRoomGroupNavCollapseExpand .SVGIcon_DoubleArrow {
transform: rotateZ(0deg);
opacity: .35; }
.chatRoomGroupNavCollapseExpand:hover .SVGIcon_DoubleArrow {
opacity: 1; }
.MemberListColumn.MemberListViewCompact .MemberListOption .SVGIcon_DoubleArrow {
transform: rotateZ(0deg); }
.MemberListOption.SearchActive {
opacity: .2; }
.MemberListOption.SearchActive .ExpandArrow {
cursor: default; }
.MemberListOption:hover:not(.SearchActive) {
opacity: 1; }
.chatRoomGroupNavColumn .chatRoomMembers {
margin-top: 16px; }
.chatRoomGroupNavFooter {
height: 70px;
background-color: #22252b;
vertical-align: bottom;
display: none; }
.chatRoomOptions {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-right: -4px; }
.chatRoomButton .SVGIcon_Button {
fill: #5c6575;
width: 80%;
height: 80%;
margin: 3px; }
.inviteAnotherFriendButton .SVGIcon_Button line,
.chatRoomButton .SVGIcon_Button line {
stroke: #5c6575;
transition: stroke .21s ease-in-out; }
.inviteAnotherFriendButton:hover .SVGIcon_Button,
.chatRoomButton:hover:not(.Disabled) .SVGIcon_Button {
fill: white; }
.inviteAnotherFriendButton:hover .SVGIcon_Button line,
.chatRoomButton:hover:not(.Disabled) .SVGIcon_Button line {
stroke: white; }
.inviteAnotherFriendButton .invitePlus,
.chatRoomButton .invitePlus {
transform-origin: 108px 128px;
transition: transform .31s ease-in-out; }
.inviteAnotherFriendButton:hover .invitePlus,
.chatRoomButton:hover:not(.Disabled) .invitePlus {
transform: scale(1.5); }
.chatRoomButton {
width: 32px;
height: 32px;
align-self: center;
margin: 2px 2px 2px 4px;
cursor: pointer; }
.chatRoomButton.InviteToGroupChat.Disabled {
opacity: .25;
cursor: default; }
.chatRoomButton.ManageNotifications {
height: 28px; }
.chatRoomButton .SVGIcon_Button.SVGIcon_ChatSettings {
margin-top: 5px; }
.SVGIcon_InviteFriend .InvitePlus {
transition: all .21s ease-in-out;
fill: #539eff;
transform: scale3d(1, 1, 1); }
.SVGIcon_InviteFriend:hover .InvitePlus {
fill: #ffffff;
transform: scale3d(2, 2, 1) translateX(-10px); }
.chatWindow .chatEntry {
/* needed? */
flex-shrink: 0;
position: relative;
display: flex;
flex-direction: row;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
background-color: #22252b;
transition: all .21s ease-in-out;
flex-wrap: wrap;
justify-content: center; }
.chatWindow .chatEntry > * {
margin-bottom: 8px; }
.chatWindow .chatEntry.compactView > .compactableHeight {
height: 32px; }
html.client_chat_frame .chatWindow .chatEntry {
/* Allow room for resize control in bottom corner */
padding-right: 24px; }
.singlewindow .chatWindow .chatEntry {
/*padding-left: 10px;
padding-right: 10px;*/ }
.chatWindow .InsetWindowOpen .chatEntry {
background-color: #0c0d0f;
padding-left: 32px;
z-index: 7; }
.chatWindow .InsetWindowOpen .chatEntry .chatEntryControls {
border: 1px solid #525b64; }
.chatWindow .InsetWindowOpen .friendListInsetShadowBottom {
opacity: 0; }
html.client_chat_frame .popup_chat_frame {
display: flex;
flex-direction: column; }
html.web_chat_frame .perf_timing_area {
display: none; }
.ChatRoomSpeaker {
position: relative;
margin-top: 12px; }
.compactView .ChatRoomSpeaker {
margin-top: 0; }
.ChatMsgSlashEmote {
margin-top: 4px;
line-height: 18px; }
.ChatRoomSpeaker .speaker .speakerAvatar,
.ChatMsgSlashEmote .speaker .speakerAvatar {
width: 22px;
height: 22px;
margin-right: 0px; }
.msg.serverMsg .msgText {
color: #5097b4;
width: 100%;
max-width: none;
text-align: right;
font-size: 12px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%);
background: transparent;
padding: 0px;
margin: 0px; }
.msg.timeDivision {
height: 18px;
font-size: 10px;
color: #4f5257;
margin-top: 6px;
margin-bottom: 6px;
display: flex;
flex-direction: row;
padding-left: 0px; }
.msg.timeDivision.new_messages {
color: #fecd4579; }
.timeDivision.time_passes .preHorizDivider,
.timeDivision.time_passes .horizDivider {
height: 0px;
border: 1px dashed #0ef3f322;
background-color: transparent;
margin-right: 0px; }
.timeDivision.time_passes .preHorizDivider {
margin-left: 88px; }
.timeDivision.time_passes .preHorizDivider {
width: 100%; }
.timeDivision.time_passes .postHorizDivider {
width: 0%; }
.timeDivision.new_messages .preHorizDivider,
.timeDivision.new_messages .horizDivider {
background-color: #ff990059;
height: 1px; }
.timeDivision .preHorizDivider {
width: 20%;
height: 1px;
background-color: rgba(79, 82, 87, 0.5);
margin-top: auto;
margin-bottom: auto;
margin-right: 8px; }
.SingleUserChat .msg.timeDivision {
padding-left: 0px; }
.timeDivision .horizDivider {
height: 1px;
flex-grow: 1;
background-color: rgba(79, 82, 87, 0.5);
margin-top: auto;
margin-bottom: auto;
margin-left: 8px; }
.msg.ChatMsgSlashEmote .speaker {
color: #2984af;
background: linear-gradient(to right, rgba(68, 44, 244, 0) 0%, #163a3d 32px, rgba(66, 58, 58, 0) 156px); }
.SingleUserChat .msg.ChatMsgSlashEmote .speaker {
text-align: right;
margin-left: -4px; }
.SingleUserChat .msg.ChatMsgSlashEmote .speakerName {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.chatWindow .msg.ChatMsgSlashEmote .SpeakerLineBreak .speaker {
display: flex;
flex-direction: row; }
.chatWindow .msg.ChatMsgSlashEmote .SpeakerLineBreak .msgText {
margin-left: 4px; }
.chatWindow.MultiUserChat .msg.ChatMsgSlashEmote .speaker {
line-height: 22px;
overflow: hidden; }
.SpeakerLineBreak {
transition: filter .05s ease-in-out; }
.ChatMessageBlock_BlockedSender {
opacity: 0.4;
transition: opacity 0.3s; }
.ChatMessageBlock_BlockedSender:hover {
opacity: 1; }
.msgText.MessageFromBlockedUser {
color: #787d85;
font-style: italic; }
.SingleUserChat .msg.gameInviteMsg,
.SingleUserChat .msg.broadcastInviteMsg,
.SingleUserChat .msg.broadcastViewRequestMsg {
max-width: 656px;
display: flex;
flex-direction: row;
user-select: none;
padding: 0;
margin-top: 16px;
left: 0px;
margin-bottom: 32px;
overflow: hidden;
margin-right: 0; }
.gameInviteMsg .productImage,
.broadcastInviteMsg .productImage,
.broadcastViewRequestMsg .productImage {
width: 100%;
box-shadow: 0 4px 12px 0px #00000088;
border-radius: 2px;
position: relative; }
.gameInviteMsg .productImage.productImageBlur,
.broadcastInviteMsg .productImage.productImageBlur,
.broadcastViewRequestMsg .productImage.productImageBlur {
width: 100%;
height: 100%;
filter: blur(30px);
margin: 0;
box-shadow: none;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
z-index: 0; }
.gameInviteMsg .centerBlock,
.broadcastInviteMsg .centerBlock,
.broadcastViewRequestMsg .centerBlock {
display: flex;
flex-direction: column;
margin-bottom: 16px; }
.gameInviteMsg .playingWithAvatars {
display: flex;
flex-direction: row; }
.gameInviteMsg .productName,
.broadcastInviteMsg .productName,
.broadcastViewRequestMsg .productName {
font-size: 28px;
color: white;
font-weight: 100;
letter-spacing: 2px;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
line-height: 28px;
margin-bottom: 0px; }
.gameInviteMsg .playingWithAvatars .avatarHolder {
width: 32px;
height: 32px;
margin-bottom: -4px; }
.VoiceChannelDetails .playingWithLine,
.gameInviteMsg .playingWithLine {
border-left: 1px solid #74859b;
border-bottom: 1px solid #74859b;
width: 23px;
height: 10px;
margin-top: 4px;
margin-left: 8px;
margin-right: 4px;
border-bottom-left-radius: 6px; }
.VoiceChannelDetails .playingWithLine {
height: 6px;
margin-left: -28px;
border-color: #6f747cc9;
position: absolute; }
.gameInviteMsg .playingWithExtraCount {
color: #74859b;
margin-top: 5px;
margin-left: 4px; }
.gameInviteMsg .acceptGameInviteButton {
background-color: #6f895c;
color: white;
text-transform: uppercase;
height: 18px;
padding: 6px;
position: absolute;
right: 0px;
bottom: 0px; }
.gameInviteMsg .acceptGameInviteButton:hover {
outline: 1px solid white; }
.msg .gameInviteDismissed,
.msg .gameInviteSelf,
.msg .gameInviteAccepted {
font-style: italic; }
.msg.voiceChannelInvite {
position: relative;
margin-right: 44px;
float: right;
font-style: italic;
color: #5097b4; }
.msg.voiceChannelInviteClear {
clear: both; }
.msg .gameInviteDismissed img,
.msg .gameInviteSelf img,
.msg .gameInviteAccepted img,
.msg .broadcastInviteDismissed img,
.msg .broadcastInviteSelf img,
.msg .broadcastViewRequestDismissed img {
width: 16px;
height: 16px;
margin-bottom: -2px;
margin-right: 4px;
margin-left: 4px; }
.tradeInviteMsg.tradeInviteSender {
background: radial-gradient(256px 256px at 20% 20%, rgba(61, 68, 78, 0.5) 0%, rgba(41, 44, 51, 0.5) 50%, rgba(36, 39, 46, 0.5) 100%), #1e2329;
box-shadow: 0 6px 14px 1px #00000011; }
.tradeInviteMsg .leftInviteContainer {
background-color: #1026;
background: radial-gradient(300px 228px at 50% 45%, #514764 0%, rgba(20, 16, 22, 0.5) 50%, #102 100%); }
.tradeInviteMsg.tradeInviteSender .leftInviteContainer {
min-width: 66px;
flex: 0;
padding: 0; }
.tradeInviteMsg.tradeInviteSender .centerBlock {
flex: 1;
margin-right: 16px; }
.tradeInviteMsg.tradeInviteSender .rightInviteContainer {
flex-direction: row; }
.tradeInviteMsg.tradeInviteSender .leftInviteContainer .SVGIcon_Trade {
width: 48px;
margin: 0;
padding-left: 8px;
float: left; }
.tradeInviteMsg.tradeInviteSender .DialogButton.Primary {
margin-right: 0;
align-self: center;
flex: 0.4; }
.tradeInviteMsg .SVGIcon_Trade {
width: 104px;
margin: auto; }
.msg.tradeRequest {
max-width: 656px;
background: radial-gradient(256px 256px at 20% 20%, #3d444e 0%, #292c33 50%, #24272e 100%);
color: #b5bec8;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 6px 14px 1px #00000063;
border-radius: 8px;
position: relative;
text-align: left;
display: flex;
flex-direction: row;
user-select: none;
margin-bottom: 8px;
height: 108px;
outline: 1px solid #63487b;
padding: 3px;
background-image: url("../../images/webui/tradeoffer.png");
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: 4px 4px; }
.SingleUserChat .msg.tradeRequest {
padding: 0 0 3px 0px; }
.SingleUserChat .tradeInviteDismissed {
font-style: italic;
color: #c1c6cf; }
.SingleUserChat .isCurrentUser .tradeInviteDismissed {
color: #969aa1; }
.SingleUserChat .tradeInviteDismissed .SVGIcon_Trade {
width: 16px;
height: 16px;
margin-right: 4px;
margin-bottom: -2px; }
.msg.tradeRequest.tradeRequestCancelled {
background-size: 48px;
height: 56px; }
.msg.tradeRequest.tradeRequestCancelled .centerBlock {
margin-left: 60px; }
.tradeRequest .centerBlock {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 112px; }
.tradeRequestButtonContainer {
display: flex;
flex-direction: row;
position: absolute;
right: 0px;
bottom: 0px; }
.tradeRequestButton {
background-color: #63487b;
color: white;
text-transform: uppercase;
height: 18px;
padding: 6px;
margin-left: 12px; }
/*.msg.FriendChatSlashEmote:hover .SpeakerLineBreak,
.msg.ChatRoomSlashEmote:hover .SpeakerLineBreak
{
filter: blur(3px);
}
.msg.FriendChatSlashEmote .emoteWarning,
.msg.ChatRoomSlashEmote .emoteWarning
{
color: rgb(167, 117, 117);
margin-left: 32px;
opacity: 0;
filter: blur(0px);
font-size: 12px;
line-height: 12px;
position: absolute;
text-shadow: 1px 1px 2px #000000ff;
user-select: none;
pointer-events: none;
margin-top: -16px;
transition: opacity .43s ease-in-out;
display: none;
}
.msg.FriendChatSlashEmote .emoteWarning
{
margin-left: 6px;
}
.msg.FriendChatSlashEmote:hover .emoteWarning,
.msg.ChatRoomSlashEmote:hover .emoteWarning
{
opacity: 1;
display: block;
}
*/
.ChatRoomSpeaker .speaker {
display: flex;
flex-direction: row;
margin-top: 4px;
padding-top: 4px; }
.nameAndColon {
display: flex;
flex-direction: row;
margin-right: 0px;
margin-left: auto; }
.ChatRoomSpeaker .speaker .speakerStatus,
.ChatMsgSlashEmote .speaker .speakerStatus {
width: 2px;
height: 22px;
align-self: center;
background-color: #636363;
margin-left: 0px;
margin-right: 8px;
flex-shrink: 0;
transition: background-color .6s ease-in-out; }
.ChatMsgSlashEmote .speaker .speakerStatus {
align-self: normal; }
.FriendChatTimeStamp {
opacity: 0;
position: relative;
top: -5px;
top: -2px;
font-size: 10px;
color: #555;
align-self: flex-end;
line-height: 12px;
text-align: right;
margin-right: 0px;
transition-property: opacity, top, left;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: .0s;
user-select: none; }
.ChatMessageBlock.SingletonMsg .FriendChatTimeStamp {
background-color: #1d1f24;
background: linear-gradient(to bottom, #1d1f24 0%, #1d1f24 60%, rgba(29, 31, 36, 0) 100%);
border-radius: 3px;
margin-bottom: -18px;
margin-right: -4px;
z-index: 10;
padding-bottom: 8px;
padding-right: 4px; }
.msg .FriendChatTimeStamp {
top: 4px;
opacity: 0;
position: absolute;
width: 84px;
left: 0px;
border-top: 0.5px solid rgba(59, 118, 141, 0.25); }
.FriendChatSlashEmote .FriendChatTimeStamp {
display: inline;
margin-left: 6px; }
.chatWindow.SingleUserChat .ChatMessageBlock:hover .FriendChatSlashEmote .speakerTimeStamp,
.chatWindow.SingleUserChat .ChatMessageBlock.LastMessageBlock:not(.HasInternalTimeStamp) .FriendChatSlashEmote .speakerTimeStamp,
.chatWindow.SingleUserChat .ChatMessageBlock.LastMessageBlock:not(.HasInternalTimeStamp) .ChatSpeaker .FriendChatTimeStamp,
.chatWindow.SingleUserChat .ChatMessageBlock:hover .FriendChatSlashEmote .speakerTimeStamp,
.chatWindow.SingleUserChat .ChatMessageBlock:hover .ChatSpeaker .FriendChatTimeStamp {
opacity: 1;
top: -2px;
transition-duration: .1s;
transition-timing-function: ease-in; }
.chatWindow.SingleUserChat .ChatMessageBlock.LastMessageBlock .msg.HasTimeStamp:last-child .FriendChatTimeStamp,
.chatWindow.SingleUserChat .ChatMessageBlock:hover .msg .FriendChatTimeStamp {
opacity: 1;
left: -1px; }
.FriendChatTimeStamp.online {
color: #3b768d;
border-color: rgba(59, 118, 141, 0.25); }
.FriendChatTimeStamp.online.golden {
color: #e4ca63;
border-color: rgba(228, 202, 99, 0.25); }
.FriendChatTimeStamp.online.watchingbroadcast {
color: #8277b1;
border-color: rgba(130, 119, 177, 0.25); }
.FriendChatTimeStamp.ingame {
color: #50702b;
border-color: rgba(80, 112, 43, 0.25); }
.FriendChatTimeStamp.offline {
color: #5c5c5c;
border-color: rgba(92, 92, 92, 0.25); }
.ChatMessageBlock {
position: relative; }
.ChatMessageBlock_HighlightDelete .ChatSpeaker,
.ChatMessageBlock_HighlightDelete .msg {
opacity: .3;
filter: saturate(0);
transition: all .12s ease-out; }
.ChatMessageBlockDelete {
width: 20px;
height: 20px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 30px;
left: 2px;
z-index: 1000;
cursor: pointer; }
.ChatMessageBlockDelete svg path {
stroke: #888; }
.ChatMessageBlockDelete svg path,
.ChatMessageBlockDelete,
.ChatMessageBlockDelete .lines .line1,
.ChatMessageBlockDelete .lines .line2,
.ChatMessageBlockDelete .lines .line3,
.ChatMessageBlockDelete .lid {
transition: all .2s ease-in-out;
z-index: 10; }
.msg.ChatMessageDeleted.EmojiOnly {
line-height: 18px; }
.msgText.MsgNoUserContent {
overflow: visible;
margin-bottom: 2px; }
.msg .filteredURL.bb_removedlink {
color: #c91616;
background-color: black;
border-radius: 4px;
padding: 0 4px;
border: .5px solid #400;
cursor: default;
text-transform: uppercase; }
.msg.ChatMessageDeleted .filteredURL.bb_removedlink {
color: #2a687a;
background-color: #0004;
border: .5px solid #234;
box-shadow: inset 1px 1px 3px black; }
.msg .filteredURL.bb_removedlink .SVGIcon_Caution {
width: 18px;
height: 18px;
transform: translateY(3px);
margin-right: 4px; }
.msg .filteredURL.bb_removedlink .SVGIcon_Caution path,
.msg .filteredURL.bb_removedlink .SVGIcon_Caution line {
stroke: red; }
.msg .filteredURL.bb_removedlink .SVGIcon_Caution .triangle path {
fill: #680c00; }
.msg .filteredURL.bb_removedlink .SVGIcon_Caution .exclamation path {
fill: red; }
.msg .filteredURL.bb_removedlink .threatURL {
font-weight: bold;
color: red;
cursor: text;
text-transform: none; }
.msg .filteredURL.bb_removedlink .threatURL::selection {
font-weight: bold;
color: #ff4a4a;
cursor: text;
background-color: #800; }
.msg.EmojiOnly span.bb_removedlink {
font-size: 10px; }
.ChatMessageBlockDelete:hover {
transform: scale(1);
transition-duration: .12s; }
.ChatMessageBlockDelete .lines .line1 {
transition: all .2s ease-in-out; }
.ChatMessageBlockDelete:hover .lines .line1 {
opacity: 0;
transform: scaleX(0, 1); }
.ChatMessageBlockDelete:hover .lines .line2 {
transform: rotateZ(-45deg);
transform-origin: 46% 37%;
stroke: #ce2f1a;
stroke-width: 20; }
.ChatMessageBlockDelete:hover .lines .line3 {
transform: rotateZ(45deg);
transform-origin: 53% 36%;
stroke: #ce2f1a;
stroke-width: 20; }
.ChatMessageBlockDelete:hover svg path {
stroke: #fff; }
.ChatMessageBlockDelete:hover .lid {
transform: rotateZ(-15deg) translateX(-5px) translateY(-22px);
opacity: 0; }
.ChatMessageBlock:hover .ChatMessageBlockDelete {
pointer-events: initial;
opacity: 1; }
.ChatHistoryContainer .nameWidthLabel,
.ChatSpeaker .speaker {
font-size: 14px; }
.ChatHistoryContainer .nameWidthLabel {
display: inline-block;
white-space: nowrap;
opacity: 1; }
.speakerLabelWidthContainer {
display: flex;
flex-direction: column;
user-select: none;
pointer-events: none;
position: absolute;
opacity: 0; }
.speakerHoverArea {
display: flex;
min-width: 0;
flex-shrink: 1; }
.ChatMsgSlashEmote .speakerHoverArea {
display: inline-flex;
vertical-align: middle;
flex-shrink: 0; }
.ChatMsgSlashEmote .speaker {
display: inline; }
.ChatRoomSpeaker .speaker .speakerName {
max-width: 480px;
min-width: 0;
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
transition: color .6s ease-in-out; }
.ChatRoomSpeaker .speaker .speakerName .playerNickname {
color: #555; }
.speakerTimeStamp {
font-size: 10px;
color: #555;
align-self: flex-end;
line-height: 20px;
margin-left: 6px;
white-space: nowrap; }
.ChatMsgSlashEmote .speakerTimeStamp {
display: inline; }
.speaker.ingame .speakerStatus {
background-color: #a6df3d; }
.speaker.away .speakerStatus {
-webkit-mask: url(../../images/webui/masks/dashed_mask.png) repeat-y;
-webkit-mask-size: 4px 4px;
-webkit-mask-image: url("../../images/webui/masks/dashed_mask.png") repeat-y;
mask-image: url("../../images/webui/masks/dashed_mask.png") repeat-y;
mask-size: 4px 4px; }
.speaker.online .speakerStatus {
background-color: #0295ca; }
.speaker.golden .speakerStatus {
background: linear-gradient(to bottom, #d5bf6a 0%, #ffe2a9 40%, #ba995c 52%, #ba995c 61%, #d5bf6a 85%); }
.speaker.watchingbroadcast .speakerStatus {
background: linear-gradient(to right, #9c8fd4 0%, #9c8fd4 2px, rgba(156, 143, 212, 0) 2px, rgba(156, 143, 212, 0) 100%); }
.msg a {
color: #6dcff6;
text-decoration: none;
border-bottom: 1px dotted rgba(109, 207, 246, 0.6);
padding-bottom: 0px; }
.msg a.OpenGraphImgContainer:hover,
.msg a.OpenGraphImgContainer {
border-bottom: none;
padding-bottom: 0; }
.msg a.OpenGraphImgContainer:hover {
filter: brightness(1.2); }
.msg a:hover {
color: #b0e9ff;
text-decoration: none;
border-bottom: 1px dotted rgba(176, 233, 255, 0.5); }
.ChatRoomSpeaker .speaker {
display: flex;
flex-direction: row;
cursor: default;
color: #777; }
.msg {
position: relative;
line-height: 18px;
transition-property: opacity, filter;
transition-duration: .12s;
transition-timing-function: ease-in-out; }
.MultiUserChat .msg {
padding: 1.5px 0;
margin-right: 16px; }
.MultiUserChat .msg:not(.ChatMsgSlashEmote) {
padding-left: 32px; }
.SingleUserChat .msg {
padding: 0 0 3px 92px;
margin-right: 6px;
/*margin-right: 48px; removed padding for space complaints, this will make text go under the add friend button */ }
.SingleUserChat .ChatMsgSlashEmote.msg {
padding-bottom: 10px;
padding-left: 4px;
clear: left; }
.MultiUserChat .ChatMsgSlashEmote.msg {
padding-left: 0px;
clear: left; }
.FriendChatSlashEmote .speakerTimeStamp {
opacity: 0;
transition: opacity .1s ease-in-out; }
.msgNewEntryMarker {
position: absolute;
margin-left: -14px;
color: #ccc3; }
.msgText {
color: #c1c6cf;
overflow: hidden; }
.msgText.EmoticonOnly {
overflow: visible; }
.msg.EmojiOnly {
font-size: 28px;
line-height: 32px; }
.SingleUserChat .msgText {
margin-left: 10px;
margin-right: 22px; }
/* ----------------- FONT SIZE SETTINGS ------------------------*/
.FriendsSettingsChatFontSizeSection_ButtonRow {
margin-top: -6px; }
/*--------------------- SMALL --------------------------------*/
.smallChatFont .chatTextarea,
.smallChatFont .msg.serverMsg .msgText,
.FriendsSettingsChatFontSizeSection_ButtonRow .smallFontSetting,
.smallChatFont .ChatMessageOpenGraph_Title,
.smallChatFont .nameWidthLabel,
.ChatHistoryContainer.smallChatFont .ChatSpeaker .speaker,
.smallChatFont {
font-size: 11px; }
.smallChatFont.compactView .chatTextarea {
height: 24px; }
.smallChatFont .msg.serverMsg .msgText,
.smallChatFont .nameWidthLabel,
.ChatHistoryContainer.smallChatFont .ChatSpeaker .speaker,
.smallChatFont .msg {
line-height: 12px; }
.ChatHistoryContainer.smallChatFont .playerNicknameBracket {
margin-top: -6px; }
.smallChatFont .ChatMessageOpenGraph_Title {
line-height: 16px; }
.smallChatFont .msg .FriendChatTimeStamp {
font-size: 9px;
top: 0; }
.smallChatFont .ChatRoomSpeaker .speaker .speakerName {
margin-top: 6px;
overflow: visible; }
/*---------------- LARGE ----------------*/
.largeChatFont .chatTextarea,
.largeChatFont .msg.serverMsg .msgText,
.FriendsSettingsChatFontSizeSection_ButtonRow .largeFontSetting,
.largeChatFont .ChatMessageOpenGraph_Title,
.largeChatFont .nameWidthLabel,
.ChatHistoryContainer.largeChatFont .ChatSpeaker .speaker,
.largeChatFont {
font-size: 16px; }
.largeChatFont .nameWidthLabel,
.ChatHistoryContainer.largeChatFont .ChatSpeaker .speaker,
.largeChatFont .msg {
line-height: 20px; }
.largeChatFont .ChatMessageOpenGraph_Title {
line-height: 20px; }
.largeChatFont .msg .FriendChatTimeStamp {
top: 4px; }
/* ----------------- close FONT SIZE SETTINGS ------------------------*/
.SingleUserChat .ChatMsgSlashEmote.isCurrentUser .msgText,
.ChatMsgSlashEmote .msgText {
color: #2984af; }
.msg.isCurrentUser.ChatMessageErrorSending {
padding: 0;
padding-left: 0 !important;
margin: 12px;
background: linear-gradient(to bottom, rgba(68, 44, 44, 0.4) 0%, rgba(61, 22, 22, 0.2) 60%, rgba(66, 58, 58, 0.05) 100%);
border: 1px dashed rgba(66, 58, 58, 0.51); }
.msg.isCurrentUser.ChatMessageErrorSending .msgText {
color: #835252;
padding: 16px; }
.ChatMessageErrorSendingAlert {
text-transform: uppercase;
font-size: 12px;
background-color: #b60f0324;
padding-left: 8px;
letter-spacing: 2px;
color: #ac2800;
user-select: none; }
.ChatMessageErrorSendingAlert.VideoFailed {
width: fit-content;
padding: 0 8px; }
.failedVideoURL,
.failedVideoSpan {
display: inline-block;
text-transform: initial;
letter-spacing: 0px; }
.ChatMessageErrorPermissionDeniedAlert .SVGIcon_Lock {
width: 12px;
height: 12px;
margin-right: 4px;
transform: translateY(2px); }
.ChatMessageErrorPermissionDeniedAlert .SVGIcon_Lock .topLock {
fill: #5097b4; }
.ChatMessageErrorPermissionDeniedAlert .SVGIcon_Lock .baseLock {
stroke: #5097b4; }
.ChatMessageErrorPermissionDeniedAlert {
font-size: 12px;
color: #5097b4;
line-height: 18px; }
.MultiUserChat .isCurrentUser .msgText {
color: #969aa1; }
.SingleUserChat .ChatMessageBlock {
clear: left; }
/*
* /spoiler styling
*/
.msgText .spoilerMsgText {
max-width: fit-content;
border: 1px solid #000;
background-color: #0003;
overflow: hidden;
border-radius: 3px;
padding: 6px; }
.spoilerMsg.spoilerMedia .BBCodeResizableComponent .BBCodeResizableElement,
.msgText .spoilerMsgText .spoilerMsg {
margin-left: 0px;
opacity: 0.5;
filter: blur(6px);
transition: all .1s ease-in-out; }
.msgText .spoilerMsgText .spoilerMsg {
word-wrap: break-word;
overflow-wrap: break-word; }
.spoilerMsg.spoilerMedia .BBCodeResizableComponent .BBCodeResizableElement {
opacity: 0;
filter: blur(0px);
margin: 0;
box-shadow: none; }
.spoilerMsg.spoilerMedia .BBCodeResizableComponent.ActivelyResizing .BBCodeResizableElement,
.spoilerMsg.spoilerMedia .BBCodeResizableComponent:hover .BBCodeResizableElement,
.msgText .spoilerMsgText:hover .spoilerMsg {
filter: blur(0px);
opacity: 1; }
.spoilerLabelContainer {
width: fit-content;
height: fit-content;
position: relative; }
.spoilerLabelContainer .chatVideoPlayControl {
opacity: 0.1;
transition: opacity .1s ease-in-out; }
.spoilerLabelBlock {
position: absolute;
opacity: 1;
transition: all .12s ease-in-out;
top: 0;
bottom: 18px;
left: 50%;
user-select: none; }
.spoilerLabelContainer:hover .spoilerLabelBlock {
opacity: 0;
pointer-events: none; }
.spoilerMsg.spoilerMedia .spoilerLabel {
position: relative;
left: -50%;
top: calc( 50% - 42px);
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 1px; }
/*
* Title Bar styles
*/
.ChatTabs .title-area {
min-height: 45px; }
.titleBarContainer.ChatTabs {
background: linear-gradient(to bottom, rgba(24, 26, 30, 0.8) 0%, rgba(24, 26, 30, 0.5) 70%, rgba(24, 26, 30, 0.2) 100%); }
.singlewindow .titleBarContainer.ChatTabs {
padding-left: 4px; }
.TheaterMode .titleBarContainer.ChatTabs {
padding-left: 0; }
.popup_chat_frame .title-area {
position: absolute;
right: 0;
left: 0; }
.friendListHeaderContainer .title-area {
height: 66px;
pointer-events: none;
z-index: 6; }
.app-close-button {
margin-right: 100px; }
.friendListFooter {
position: relative;
min-height: 26px;
background-color: #22252b;
flex-shrink: 0; }
.insetShadow {
pointer-events: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0) calc( 100% - 8px), rgba(0, 0, 0, 0.2) 100%); }
.friendsListInsetShadowCtn {
position: relative;
height: 0;
width: auto;
flex-grow: 0;
flex-shrink: 0; }
.friendListInsetShadowTop {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0) 100%);
height: 26px;
position: absolute;
top: 0;
left: 0;
right: 0;
flex-shrink: 0;
z-index: 2;
pointer-events: none; }
.friendListInsetShadowBottom {
background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0) 100%);
height: 16px;
position: absolute;
flex-shrink: 0;
bottom: 0px;
left: 0;
right: 0;
pointer-events: none; }
.friendListCreateChatTestButton {
background: blue;
color: white;
width: 30px;
height: 30px;
border-radius: 15px;
line-height: 30px;
font-size: 24px;
text-align: center;
position: absolute;
top: -50px;
right: 20px;
cursor: pointer;
box-shadow: 0 0 12px 2px #000000; }
.friendListCreateChatTestButton:hover {
background: lightblue; }
.friendlist.collapsed {
min-width: 0;
background-color: #1c1f22;
transition: background-color 0.32s ease-in-out; }
.friendlist.collapsed > *:not(.friendListCollapse) {
opacity: 0;
visibility: hidden; }
.friendlist > * {
transition: all 0.32s ease-in-out; }
.chatTabOpenFriendsList {
float: left;
height: 43px;
font-size: 14px;
text-align: center;
line-height: 43px;
padding: 0 8px;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
color: #dddddd;
background-color: #1c1f22;
box-shadow: inset 0px -2px 3px black;
margin: 0 4px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
position: relative;
white-space: nowrap;
-webkit-app-region: no-drag;
z-index: 12;
user-select: none; }
.compactView .chatTabOpenFriendsList {
height: 32px;
line-height: 32px; }
.chatTabOpenFriendsList:hover {
background-color: #3a3e46; }
.chatTabOpenFriendsList .SVGIcon_Group {
width: 20px;
height: 20px;
margin-right: 4px; }
.friendListCollapse {
top: 4px;
-webkit-app-region: no-drag;
z-index: 3; }
.friendListButtons {
top: 40px; }
.friendListCollapse,
.friendListButtons {
position: absolute;
z-index: 3;
right: 0px;
display: flex; }
.compactView .friendListButtons {
top: 34px; }
.friendListButton {
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
margin: 0 5px 0 4px; }
.friendListButton:last-child:not(.addFriendButton) {
margin-right: 2px; }
.compactView .friendsTabButtonsContainer .friendRequestButton {
width: 20px;
height: 20px;
margin-top: -1px; }
.compactView .friendListButton.addFriendButton {
width: 20px;
height: 20px;
margin-top: -1px; }
.addFriendButton {
width: 22px;
height: 22px;
margin-top: 1px;
cursor: pointer;
margin-right: 8px; }
.friendRequestButton .requestsNumber {
letter-spacing: -1px;
color: white;
position: absolute;
font-size: 8px;
top: 11.0px;
right: -4px;
width: fit-content;
min-width: 8px;
background-color: #e64a35;
border-radius: 16px;
line-height: 11.5px;
padding: 0 2px;
text-align: center;
transform: translateX(0px);
transition: all .21s ease-in-out;
padding-top: 1px; }
@media only screen and (min-resolution: 1.5dppx) and (max-resolution: 2dppx) {
.friendRequestButton .requestsNumber {
padding-top: 0; } }
.friendRequestButton:hover .requestsNumber {
transform: translateX(1px);
background-color: #ff7664; }
.friendRequestButton .SVGIcon_FriendRequest,
.addFriendButton .SVGIcon_AddFriend {
width: 100%;
height: 100%;
margin-top: 2px;
margin-left: 4px; }
.friendRequestButton .SVGIcon_FriendRequest .redCircle {
fill: #e64a35;
transition: fill .21s ease-in-out, transform .21s ease-in-out; }
.friendRequestButton.friendRequestOutgoingOnly .SVGIcon_FriendRequest .redCircle,
.friendRequestButton .SVGIcon_FriendRequest .friendBodyFull {
display: none; }
.friendRequestButton.friendRequestOutgoingOnly .SVGIcon_FriendRequest .friendBodyFull {
display: block; }
.addFriendButton .SVGIcon_AddFriend .plusCircle {
fill: #b7ccd5;
transition: fill .21s ease-in-out, transform .21s ease-in-out; }
.friendRequestButton .SVGIcon_FriendRequest .friendBodyFull,
.friendRequestButton .SVGIcon_FriendRequest .friendHead,
.friendRequestButton .SVGIcon_FriendRequest .friendArm,
.friendRequestButton .SVGIcon_FriendRequest .friendBody,
.addFriendButton .SVGIcon_AddFriend .friendHead,
.addFriendButton .SVGIcon_AddFriend .friendBody {
fill: #788a92;
transition: fill .21s ease-in-out; }
.friendRequestButton:hover .SVGIcon_FriendRequest .redCircle,
.addFriendButton:hover .SVGIcon_AddFriend .plusCircle {
fill: white;
transform: translateX(12px); }
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest .redCircle,
.friendRequestButton:hover .SVGIcon_FriendRequest .redCircle {
fill: #ff7664; }
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest .friendBodyFull,
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest .friendHead,
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest .friendArm,
.friendRequestButton.friendRequestViewActive .SVGIcon_FriendRequest .friendBody {
fill: #ffc628; }
.friendRequestButton.friendRequestViewActive:hover .SVGIcon_FriendRequest .friendBodyFull,
.friendRequestButton.friendRequestViewActive:hover .SVGIcon_FriendRequest .friendHead,
.friendRequestButton.friendRequestViewActive:hover .SVGIcon_FriendRequest .friendArm,
.friendRequestButton.friendRequestViewActive:hover .SVGIcon_FriendRequest .friendBody {
fill: #ffe292; }
.friendRequestButton:hover .SVGIcon_FriendRequest .friendHead,
.friendRequestButton:hover .SVGIcon_FriendRequest .friendArm,
.friendRequestButton:hover .SVGIcon_FriendRequest .friendBody,
.friendRequestButton:hover .SVGIcon_FriendRequest .friendBodyFull,
.addFriendButton:hover .SVGIcon_AddFriend .friendHead,
.addFriendButton:hover .SVGIcon_AddFriend .friendBody {
fill: #aac2cc; }
.friendRequestButton:hover:not(.friendRequestViewActive) .SVGIcon_FriendRequest .friendArm {
animation-name: FriendRequestWave; }
.friendRequestButton.friendRequestOutgoingOnly:hover .SVGIcon_FriendRequest .friendArm {
animation-name: none; }
.friendRequestButton .SVGIcon_FriendRequest .friendArm {
animation-name: none;
animation-duration: .3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
transform-origin: 25% 55%; }
@keyframes FriendRequestWave {
0% {
transform: rotateZ(0deg); }
33% {
transform: rotateZ(-40deg); }
66% {
transform: rotateZ(10deg); }
100% {
transform: rotateZ(0deg); } }
.friendCollapseButton,
.friendSettingsButton {
width: 24px;
height: 24px;
cursor: pointer; }
.friendSettingsButton {
margin-right: 7px; }
.friendCollapseButton .SVGIcon_DoubleArrow {
transform: rotateZ(180deg);
width: 16px;
height: 16px;
opacity: 1;
display: block;
margin: 0px;
margin-top: 4px;
transition: all .21s ease-in-out;
transition-duration: .24s;
cursor: pointer; }
.friendListCollapse,
.friendCollapseButton,
.friendCollapseButton .SVGIcon_DoubleArrow {
-webkit-app-region: no-drag;
z-index: 12; }
.friendListCollapse {
z-index: 100; }
.friendCollapseButton .SVGIcon_DoubleArrow {
transform: rotateZ(0deg);
opacity: .35; }
.friendCollapseButton:hover .SVGIcon_DoubleArrow {
opacity: 1; }
.friendSettingsButton .SVGIcon_Settings {
fill: #7c858a;
stroke: rgba(0, 0, 0, 0);
stroke-width: 0px;
width: 20px;
height: 20px;
margin: 0px 0px 0px 0px;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: none;
transform: rotateZ(0deg); }
.friendSettingsButton:hover .SVGIcon_Settings {
fill: #c5d0d4; }
.friendSettingsButton:active .SVGIcon_Settings {
animation-name: SlowSpin;
stroke: #dceef6;
animation-duration: 1s; }
.friendSettingsSubheader {
margin-top: 24px; }
.friendSettingsFakeFriend {
margin-top: 10px; }
.friendSettingsFakeFriend .fakeFriendAvatar {
transform: none; }
@keyframes SlowSpin {
0% {
transform: rotateZ(0deg); }
50% {
transform: rotateZ(180deg); }
100% {
transform: rotateZ(360deg); } }
.friendsListNeedsUpdate.friendsListVeryOutOfDate {
background-color: rgba(255, 81, 0, 0.75); }
.friendsListNeedsUpdate.friendsListVeryOutOfDate:hover {
background-color: #ff5100; }
.friendsListNeedsUpdate {
background-color: rgba(0, 255, 13, 0.75);
border-radius: 50%;
display: flex;
width: 20px;
height: 20px; }
.friendsListNeedsUpdate:hover {
background-color: #00ff0d; }
.friendsListNeedsUpdate .SVGIcon_Reload {
width: 60%;
height: 60%;
margin: auto;
align-self: center; }
.friendsListNeedsUpdate .SVGIcon_Reload path {
stroke: #23262c; }
.friendsListNeedsUpdate .SVGIcon_Reload polygon {
fill: #23262c; }
.controlZoo {
background-image: url("../../images/webui/zoo_icon.png");
background-size: 80% 80%;
background-position: 50% 50%; }
.audioDebug:hover,
.controlZoo:hover {
filter: brightness(2); }
.audioDebug {
background-image: url("../../images/webui/debug_mic.png"); }
#friendslist-droptarget {
display: none; }
.drag_and_drop #friendslist-droptarget {
display: block; }
.drag_and_drop #friendslist-container {
display: none; }
.friend.friends_drop_targets {
width: 128px;
height: 64px; }
.friend.friends_drop_targets .avatarHolder {
height: 64px; }
.chatTab .ChatTabContent {
opacity: 0.5;
filter: saturate(0.75);
transition-property: opacity, filter, margin;
transition-duration: .2s;
transition-timing-function: ease-in-out;
margin-right: 0px;
flex: 1;
min-width: 0;
overflow: visible;
font-size: 14px;
-webkit-mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0) 100%); }
.chatTab:hover .ChatTabContent {
opacity: .75; }
.chatTab .ChatTabContent.ChatRoom {
padding-top: 8px;
padding-left: 8px;
white-space: nowrap;
text-overflow: ellipsis;
flex-direction: row;
display: flex; }
.ChatTabContent.ChatRoom .ChatRoomGroupAvatar {
margin-top: -3px;
display: inline-block;
margin-right: 8px;
margin-left: -4px;
flex-shrink: 0;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.ChatTabs.compactView .ChatTabContent.ChatRoom .ChatRoomMultiFriendAvatar,
.ChatTabs.compactView .ChatTabContent.ChatRoom .ChatRoomGroupAvatar {
width: 24px;
height: 24px;
margin-top: -6px; }
.ChatTabs.compactView .chatTabGroupName {
font-size: 12px;
margin-top: 0; }
.ChatTabs.compactView .ChatTabContent.ChatRoom .ChatRoomGroupAvatar .ChatRoomGroupAvatar_initials {
font-size: 12px;
padding-top: 2px; }
.ModalPosition_Content .DialogContent._DialogLayout.CloseActiveVoiceWindowConfirmation {
min-height: 252px; }
.CloseActiveVoiceWindowConfirmation .voiceControlsExample {
position: relative; }
.CloseActiveVoiceWindowConfirmation .VoiceControlPanelButton:hover, .CloseActiveVoiceWindowConfirmation .VoiceControlPanelButton:active {
border-radius: 8px; }
.CloseActiveVoiceWindowConfirmation .DialogBody {
flex: none;
padding-bottom: 20px; }
.CloseActiveVoiceWindowConfirmation .DialogButton.Primary {
max-width: 300px;
margin-left: auto;
margin-right: auto; }
.CloseActiveVoiceWindowConfirmation .DialogFooter {
margin-top: 0; }
.circleHighlight {
position: absolute;
right: 8px;
top: 2px;
width: 58px;
height: 58px;
border: 1px dashed #66ff00;
border-radius: 50%;
pointer-events: none; }
.CloseActiveVoiceWindowConfirmation .activeVoiceLabels,
.CloseActiveVoiceWindowConfirmation .ToggleMicrophoneButton,
.CloseActiveVoiceWindowConfirmation .ToggleVoiceOutputButton {
pointer-events: none; }
.CloseActiveVoiceWindowConfirmation .SVGIcon_VoiceRoom .ExitDoor,
.CloseActiveVoiceWindowConfirmation .SVGIcon_VoiceRoom .Arrow polyline {
stroke: white; }
.CloseActiveVoiceWindowConfirmation .exitIconExample {
width: 32px;
height: 32px;
flex-shrink: 0;
margin: auto;
margin-right: 16px; }
.CloseActiveVoiceWindowConfirmation .exitIconExample .SVGIcon_VoiceRoom {
width: 52px;
height: 52px;
margin-left: -10px;
margin-top: -10px; }
.CloseActiveVoiceWindowConfirmation .activeVoiceDetails {
margin-top: 6px;
font-size: 14px; }
.CloseActiveVoiceWindowConfirmation .furtherDetails {
margin: 8px 14px 8px 0;
background-color: #0003;
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: row;
font-size: 14px;
color: #4c78b1; }
.CloseActiveVoiceWindowConfirmation .dontShowConfirmation .DialogCheckbox {
margin-right: 8px;
background-color: #0007; }
.CloseActiveVoiceWindowConfirmation .dontShowConfirmation {
display: flex;
flex-direction: row;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
font-size: 14px;
cursor: pointer; }
.CloseActiveVoiceWindowConfirmation .dontShowConfirmation:hover {
color: #ccc; }
.DialogHeader .ChatRoomGroupAvatar.Small {
margin-right: 8px;
width: 24px;
height: 24px;
border-width: 0;
margin-top: 5px; }
.DialogHeader .ChatRoomGroupAvatar.Small .ChatRoomGroupAvatar_initials {
font-size: 12px;
line-height: 12px;
letter-spacing: 0px; }
.ChatRoomGroupAvatar.Small {
width: 30px;
height: 30px; }
.ChatRoomGroupAvatar.Small .ChatRoomGroupAvatar_initials {
font-size: 16px;
padding-top: 4px; }
.ChatRoomGroupAvatar.Micro {
width: 16px;
height: 16px;
box-sizing: border-box;
border-width: 1px; }
.ChatRoomGroupAvatar.Micro .ChatRoomGroupAvatar_initials {
font-size: 7px;
padding-top: 2px; }
.chatTab .MicStatus {
position: absolute;
width: 40px;
height: 43px;
align-self: center;
background: radial-gradient(ellipse farthest-corner at 12px 20px, #7af55b 0%, rgba(122, 245, 91, 0.3) 30%, rgba(122, 245, 91, 0.1) 50%, rgba(122, 245, 91, 0) 70%);
z-index: 2;
mix-blend-mode: screen;
padding-top: 4px;
transition: all .2s ease-in-out;
overflow: visible; }
.chatTab.MicMuted .MicStatus {
background: radial-gradient(ellipse farthest-corner at 12px 20px, rgba(122, 245, 91, 0.2) 0%, rgba(122, 245, 91, 0.1) 30%, rgba(122, 245, 91, 0.05) 50%, rgba(122, 245, 91, 0) 70%); }
.chatTab.active .ChatTabContent {
opacity: 1;
filter: saturate(1); }
.chatTab.VoiceActive .ChatTabContent {
margin-left: 24px; }
.HorizontalMiniSlider {
position: relative;
overflow: hidden; }
.HorizontalMiniSliderArrow {
position: absolute;
top: 0;
bottom: 0;
background: #393e45;
background: black;
cursor: pointer;
/*border-radius: 3px;*/
width: 64px;
padding-top: 5px;
z-index: 10;
transition: opacity 0.5s;
user-select: none;
pointer-events: none; }
.chatTabSetContainer .HorizontalMiniSliderArrow {
display: none; }
.HorizontalMiniSliderArrow:not(.Visible) .SVGIcon_DoubleArrow {
pointer-events: none; }
.HorizontalMiniSliderArrow .SVGIcon_DoubleArrow {
width: 18px;
height: 18px;
padding: 8px;
transform: rotateZ(0deg) translateX(4px);
border-radius: 50%;
background: #393e45;
pointer-events: initial; }
.HorizontalMiniSliderArrow .SVGIcon_DoubleArrow polyline {
stroke: #9c9c9c;
stroke: #747f94;
stroke-width: 32px; }
.HorizontalMiniSliderArrow .SVGIcon_DoubleArrow:hover polyline {
stroke: white; }
.HorizontalMiniSliderArrow .SVGIcon_DoubleArrow .Arrow1 {
transform: translateX(20px); }
.HorizontalMiniSliderArrow .SVGIcon_DoubleArrow .Arrow2 {
display: none; }
.HorizontalMiniSliderArrow.Right .SVGIcon_DoubleArrow {
transform: rotateZ(180deg) translateX(4px);
float: right; }
.HorizontalMiniSliderArrow:not(.Visible) {
pointer-events: none;
opacity: 0; }
.HorizontalMiniSliderArrow.Left {
left: 0;
/*box-shadow: 2px -2px 14px 0 rgba( 0, 0, 0, 0.75 );*/
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); }
.HorizontalMiniSliderArrow.Right {
right: 0;
/*box-shadow: -2px -2px 14px 0 rgba( 0, 0, 0, 0.75 );*/
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); }
.HorizontalMiniSliderScroll {
overflow-x: auto; }
.voiceDebugHeader {
background-color: #22252b;
padding: 2px; }
.voiceVolumeMeter {
display: inline;
padding: 4px; }
.voiceDebugHeader.collapse {
padding: 0px;
visibility: collapse; }
.chatActionsCtn {
float: right;
position: relative;
margin: 18px 12px 0 0;
font-size: 16px; }
.chatActionMenuButton {
background: grey;
padding: 4px;
cursor: pointer; }
.chatActionMenuCtn {
position: relative; }
.chatActionMenu.popupMenu {
position: absolute;
right: 0;
top: 0;
z-index: 5;
white-space: nowrap;
background: #333333; }
.popupMenu .popupMenuChoice {
line-height: 24px;
padding: 0 12px;
cursor: pointer; }
.popupMenu .popupMenuChoice:hover {
background-color: lightblue; }
.chatModalCover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 50;
font-size: 16px;
-webkit-app-region: no-drag; }
.chatModalCover .ModalPosition_Content {
max-width: 80%;
max-height: 90%; }
.InviteFriendToChatDialog_Expires {
flex-grow: 1; }
.BBCodeTradeOffer_CreateOfferButton {
white-space: nowrap; }
.BBCodeTradeOffer_CreateOfferButton .TradeOfferRecipient {
text-overflow: ellipsis;
max-width: 364px;
max-height: 30px;
display: inline-block;
text-align: left;
overflow: hidden;
vertical-align: top; }
.ChatRoomSettingsDialog .chatModalContent {
min-width: 300px; }
.ChatRoomSettingsDialog .doneButton {
align-self: flex-end; }
.ChatRoomSettingsDialog .AvatarAndUser {
padding: 4px;
padding-top: 0;
flex-direction: column;
position: relative;
border-top-right-radius: 124px;
border-top-left-radius: 124px; }
.AvatarAndUser .noIconLabel {
position: absolute;
font-size: 12px;
top: 94px;
text-transform: uppercase;
text-align: center;
width: 160px;
color: #6a7586;
z-index: 4; }
.DialogButton .SVGIcon_VoiceRoom .Microphone path {
fill: white; }
.DialogButton .SVGIcon_VoiceRoom .Bubble,
.DialogButton .SVGIcon_TextRoom line {
stroke: white; }
.ChatRoomSettingsDialog .AvatarAndUser .DialogButton {
margin-top: 8px;
margin-bottom: 0; }
.ChatRoomSettingsDialog .currentUserAvatar {
border-radius: 50%;
width: 148px;
height: 148px;
user-select: none;
margin: 6px;
margin-top: 6px;
margin-bottom: 10px;
border: 0.5px solid #0000;
background-color: #0005; }
.GeneralChatSettings {
flex: 1;
margin-left: 26px; }
.GeneralChatSettings .DialogInputLabelGroup {
margin-bottom: 16px; }
.Page_GroupSettings_Save .DialogBodyText {
margin-bottom: 16px; }
.Page_GroupSettings_Save .groupChatUpgradeIcon {
width: 164px;
height: 164px;
margin: auto;
margin-top: 44px;
margin-bottom: 0; }
.Page_GroupSettings_Save .groupChatUpgradeIcon .SVGIcon_Upgrade path {
stroke: #3366ff;
stroke-width: 4px; }
.Page_GroupSettings_Save .DialogButton.Primary {
width: 300px;
height: 64px;
align-self: center; }
.Page_GroupSettings_Save .SteamLogoThrobber {
margin: 0 auto; }
.Page_GroupSettings_Save .ErrorWhileSaving {
color: #ac2800;
text-align: center;
margin-bottom: 10px; }
.Page_GroupSettings_General .friend.groupOwnerFriend {
background-color: rgba(67, 73, 83, 0.3);
border-radius: 3px;
padding: 4px; }
.ChatRoomSettingsDialog .PagedSettingsDialog_PageList {
margin-bottom: 40px; }
.ChatRoomLeave {
color: #c44848;
position: absolute;
bottom: 31px;
font-size: 13px;
margin-bottom: 0px; }
.ChatRoomLeave:not(.Active):hover {
color: #fd4525; }
.mentionDialogPosition {
position: absolute;
left: 0;
right: 0; }
.mentionDialog {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
background: #2c3036;
padding: 12px 0px 12px 12px;
box-shadow: 0 0 32px 0px #000000ab;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.mentionDialog:focus {
outline: none; }
.mentionSearchText {
color: #818181;
margin-bottom: 10px;
font-size: 12px; }
.suggestOption {
color: #adaeaf;
transition-property: padding-left, color;
transition-duration: 0.15s;
transition-timing-function: ease-out;
line-height: 26px;
cursor: pointer;
margin-top: -0px;
padding-left: 22px;
margin-right: 12px;
overflow: hidden; }
.suggestOption .nickname {
color: #6e6e6e; }
.suggestOption.selected {
color: #dfe3e6;
background-color: #434953;
padding-left: 30px; }
span.mentionSearchMatch {
color: #dfe3e6; }
.MentionAtSymbol {
color: #b4b4b4;
margin-right: 2px; }
.me .MentionAtSymbol {
color: #b6c7d4; }
.mentionSuggestion {
display: flex;
flex-direction: row; }
.notSelectable {
color: #b64646; }
.mentionAvatar {
position: absolute;
left: 15px;
width: 16px;
height: 16px;
margin-top: 5px;
margin-bottom: 2px;
margin-right: 4px;
transition: margin .15s ease-in-out; }
.suggestOption.selected .mentionAvatar {
margin-left: 8px; }
span.mention {
border-radius: 3px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
display: inline-block;
background: linear-gradient(to bottom right, rgba(219, 145, 75, 0.5) 0%, rgba(219, 145, 75, 0.3) 2px, rgba(219, 145, 75, 0.3) 2px, rgba(219, 145, 75, 0.1) 100%);
padding: 0px 4px 0px 3px;
cursor: default;
line-height: 18px;
color: #c0a665;
font-weight: 100;
background: #313236;
color: #8d8d8d;
border: 0.5px solid #575757;
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: bottom; }
span.mention.me {
background: #6b7080;
color: white;
border: 0.5px solid #7b93a7; }
.HoverPositionPopup {
/* force hover position to match size of contents. Javascript will then use this element to tell Steam what size to make the popup */
display: inline-block; }
.HoverPositionPopup .miniProfileHoverInner {
margin: 0;
box-shadow: none; }
.HoverPositionPopup .hover_arrow {
display: none; }
.nicknameEntryDialog .friend {
margin: 12px 0; }
.friend.editNickname .labelHolder {
display: flex;
flex-direction: column;
margin-left: 16px;
align-self: auto; }
.friend.editNickname .labelHolder .nickNamedAs {
margin-top: 6px;
margin-bottom: 6px;
font-size: 14px;
color: #7e7e7e;
user-select: none; }
.mediumName {
font-size: 24px;
user-select: none; }
.friend.editNickname.nickNamed.ingame .labelHolder .mediumName:not(.asNickName) {
color: #91c257; }
.friend.editNickname.nickNamed.online .labelHolder .mediumName:not(.asNickName) {
color: #4c91ac; }
.FriendNotificationsDialog .friend .avatarHolder {
position: relative;
padding-right: 2px; }
.FriendNotificationsDialog .DialogBodyText {
margin-bottom: 20px; }
.avatarMedium {
width: 84px;
height: 84px;
border-radius: 4px; }
.Dialog_EditNickName .friend .avatarMedium,
.Dialog_ChangePersonaName .friend .avatarMedium {
border: 1px solid black;
box-shadow: 0px 4px 24px #0008;
margin-right: 6px; }
.Dialog_EditNickName .friend ._DialogTextInputBase,
.Dialog_ChangePersonaName .friend ._DialogTextInputBase {
font-size: 24px;
padding: 4px;
padding-left: 8px; }
.Dialog_EditNickName .friend .DialogInput.DialogInputPlaceholder._DialogTextInputBase.nicknameInput::-webkit-input-placeholder,
.Dialog_ChangePersonaName .friend .DialogInput.DialogInputPlaceholder._DialogTextInputBase.nicknameInput::-webkit-input-placeholder {
font-size: 16px; }
.Dialog_EditNickName .friend ._DialogTextInputBase,
.Dialog_ChangePersonaName .friend ._DialogTextInputBase {
padding: 2px; }
.Dialog_EditNickName .friend.ingame ._DialogTextInputBase,
.Dialog_ChangePersonaName .friend.ingame ._DialogTextInputBase {
color: #e3ffc2; }
.Dialog_EditNickName .friend.online ._DialogTextInputBase,
.Dialog_ChangePersonaName .friend.online ._DialogTextInputBase {
color: #6dcff6;
padding-left: 8px; }
.Dialog_ChangePersonaName .friend {
height: 84px; }
.Dialog_ChangePersonaName .friend .labelHolder {
align-self: initial;
height: 100%; }
.Dialog_ChangePersonaName .friend .labelHolder > div {
height: 50%; }
.Dialog_ChangePersonaName .error {
color: red; }
._DialogRowLabel .HomeChannel {
font-style: italic;
font-weight: bold; }
.ChatGroupSettingsChannels_Row {
display: flex;
width: 100%;
position: relative; }
.ChatGroupSettingsChannels_Row ._DialogRow {
height: 32px;
border-radius: 2px;
background-color: #373d46;
flex-grow: 1;
margin-top: 2px;
margin-bottom: 6px;
padding: 0px 8px 0px 8px;
color: #b9bcbd; }
.ChatGroupSettingsChannels_Row .ChannelDeleteButton {
text-transform: uppercase;
color: #777777;
font-size: 14px;
line-height: 32px;
margin-right: 10px;
padding-left: 8px;
padding-right: 8px;
cursor: pointer; }
.ChatGroupSettingsChannels_Row .ChannelDeleteButton:hover {
color: #CCCCCC; }
.nicknameError {
margin: 20px 0;
color: #990000; }
.disconnectBlocker {
display: none;
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 4;
pointer-events: all; }
.ChatRoomList .disconnectBlocker {
z-index: 10; }
.errorDisconnected .disconnectBlocker {
display: block; }
.errorDisconnected {
user-select: none !important; }
.ConnectionTrouble {
display: flex;
align-items: center;
z-index: 200;
flex-shrink: 0;
/* put us on top of other modals */
height: 32px; }
.chat_main_flex {
height: 100%;
min-height: 0; }
.ConnectionTrouble:focus {
outline: none; }
.ConnectionTroubleContent {
overflow: visible;
display: flex;
flex-direction: column;
align-content: center;
z-index: 10;
flex: 1;
background: linear-gradient(to right, #007896, #1f3d96);
height: 32px; }
.ConnectionTroubleContent .closeButton {
display: none; }
.ConnectionTroubleContent .TitleBar {
height: 32px; }
.WebConnectionTrouble .ConnectionTroubleContent {
justify-content: space-between; }
.errorMessageContainer {
display: flex;
flex-direction: row;
margin-left: auto;
margin-right: auto;
height: 32px;
align-content: center;
align-items: center; }
.ConnectionTroubleContent .ConnectionTroubleMessage,
.ConnectionTroubleContent .ConnectionTroubleReconnectMessage {
margin-top: auto;
margin-bottom: auto;
text-align: center;
color: #5aa5f9;
color: white;
font-size: 16px;
text-align: center;
text-shadow: 1px 1px 2px #0007;
align-items: center;
z-index: 201;
user-select: none;
text-align: center; }
.WebConnectionTrouble .ConnectionTroubleContent .ConnectionTroubleMessage,
.WebConnectionTrouble .ConnectionTroubleContent .ConnectionTroubleReconnectMessage {
display: flex;
flex-direction: row;
line-height: 16px; }
.WebConnectionTrouble.NotReadyToRender .ConnectionTroubleContent {
background: black; }
.ConnectionTroubleMessage.NotificationBrowserWarning {
/* Custom style for the "please allow notifications" message text. */
text-transform: none; }
.ConnectionTroubleContent .LoadingWrapper {
opacity: 0;
z-index: 201;
transition: all .32s ease-in-out;
flex-direction: row; }
.ConnectionTroubleContent .connectionThrobber.showThrobber .LoadingWrapper {
opacity: 1; }
.ConnectionTroubleContent .ConnectionTroubleReconnectMessage {
font-size: 14px;
/*margin-top: 24px;*/ }
.ConnectionTroubleContent .ReconnectWaitMessage {
/*margin-bottom: 24px;*/
flex: 1; }
.ConnectionTroubleContent .ReconnectNow {
min-width: 220px;
height: 28px;
margin-right: 4px; }
.ConnectionTroubleContent .DialogButton {
padding: 0;
height: 24px;
text-transform: uppercase;
font-size: 16px;
line-height: 16px; }
.modalbg-anim-appear,
.modalbg-anim-enter {
opacity: 0.01;
transition: opacity 0.3s ease-out; }
.modalbg-anim-appear.modalbg-anim-appear-active,
.modalbg-anim-enter.modalbg-anim-enter-active {
opacity: 1; }
.modalbg-anim-exit {
opacity: 1;
transition: opacity 0.3s ease-out; }
.inviteDrop-anim-exit.inviteDrop-anim-exit-active {
opacity: 0; }
.inviteDrop-anim-appear,
.inviteDrop-anim-enter {
opacity: 0.0;
transition: opacity 0.3s ease-out; }
.inviteDrop-anim-appear.inviteDrop-anim-appear-active,
.inviteDrop-anim-enter.inviteDrop-anim-enter-active {
opacity: 1; }
.inviteDrop-anim-exit {
opacity: 1;
transition: opacity 0.16s ease-out; }
.inviteDrop-anim-exit.inviteDrop-anim-exit-active {
opacity: 0; }
.inviteDrop-anim-appear .ModalPosition_Content,
.inviteDrop-anim-enter .ModalPosition_Content {
transform: scale(0.3);
transition: transform 0.2s ease-in-out; }
.inviteDrop-anim-appear.inviteDrop-anim-appear-active .ModalPosition_Content,
.inviteDrop-anim-enter.inviteDrop-anim-enter-active .ModalPosition_Content {
transform: scale(1); }
.inviteDrop-anim-exit .ModalPosition_Content {
transform: scale(1);
transition: transform 0.16s ease-out; }
.inviteDrop-anim-exit.inviteDrop-anim-exit-active .ModalPosition_Content {
transform: scale(0.9); }
.chatModalCover.inviteDrop.inviteDrop-anim-appear .avatarHolder,
.chatModalCover.inviteDrop.inviteDrop-anim-enter .avatarHolder {
transform: scale(0.6);
transition: transform 0.3s cubic-bezier(0.42, 0, 0.19, 1.8); }
.chatModalCover.inviteDrop.inviteDrop-anim-appear.inviteDrop-anim-appear-active .avatarHolder,
.chatModalCover.inviteDrop.inviteDrop-anim-enter.inviteDrop-anim-enter-active .avatarHolder {
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.42, 0, 0.19, 1.8); }
.chatModalCover.inviteDrop.inviteDrop-anim-exit .avatarHolder {
transform: scale(1);
transition: transform 0.30s ease-out; }
.chatModalCover.inviteDrop.inviteDrop-anim-exit.inviteDrop-anim-exit-active .avatarHolder {
transform: scale(0.9); }
.chatModalCover.inviteDrop .ModalPosition_Content {
min-width: 250px;
width: 600px;
background: none;
padding: 0px;
box-shadow: none; }
.chatModalCover.inviteDrop .DialogContent._DialogLayout {
padding: 0px;
width: 250px;
max-width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
border: 1px solid black;
box-shadow: 0px 2px 24px black;
overflow: hidden;
background: radial-gradient(circle at top center, #4a515c 0%, #4b515c 50%, rgba(19, 21, 24, 0.9) 100%);
text-align: center; }
.chatModalCover.inviteDrop .DialogHeader {
text-shadow: 0px 1px 6px #000, 0px 2px 12px #000;
bottom: 0px;
width: 600px;
margin-bottom: 12px;
user-select: none;
text-align: center;
margin-left: auto;
margin-right: auto;
order: 5;
margin-top: -50px;
z-index: 2; }
.chatModalCover.inviteDrop .friend {
flex-direction: column;
margin-top: 16px; }
.chatModalCover.inviteDrop .friend .avatarHolder {
width: 132px;
height: 132px;
margin: auto;
border-radius: 50%;
box-shadow: 0px 6px 24px #0008; }
.chatModalCover.inviteDrop .friend .avatarHolder .avatar {
filter: none;
border-radius: 50%;
padding: 0px; }
.chatModalCover.inviteDrop .labelHolder {
width: 220px;
opacity: 1;
margin: 0px;
margin-top: 2px; }
.dropTargetBox {
border: 2px dashed rgba(0, 217, 255, 0.4);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 4px;
border-radius: 8px;
z-index: 100;
opacity: 0;
transform: scale(0.99);
transition: all .2s ease-in-out;
pointer-events: none; }
.ChatTabs .dropTargetBox {
border-radius: 4px;
margin: 0px;
margin-bottom: -2px; }
.chatRoomVoiceChannel .dropTargetBox {
border-radius: 4px;
margin: 0px; }
.chatRoomActiveDrop .dropTargetBox,
.chatRoomVoiceChannel.voiceRoomActiveDrop .dropTargetBox {
border: 2px dashed rgba(0, 255, 85, 0.692);
border: 2px dashed rgba(166, 242, 255, 0.808); }
.friendGroup.taggedGroup .dropTargetBox {
margin-top: 0px; }
.quickAccessFriends:not(.emptyQuickAccess) .dropTargetBox {
margin: -2px;
margin-top: 2px; }
body.in_global_drag .dropTargetBox {
opacity: 1;
transform: scale(1); }
body.in_global_drag .dropTargetBox:hover {
border: 2px dashed rgba(202, 247, 255, 0.8); }
body.in_global_drag.drag_type_chatroomgroup .chatWindow.MultiUserChat .dropTargetBox,
body.in_global_drag.drag_type_chattab .chatRoomVoiceChannel .dropTargetBox,
body.in_global_drag.drag_type_chattab .friendGroup.taggedGroup .dropTargetBox,
body.in_global_drag.drag_type_chattab .chatBody .dropTargetBox,
body.in_global_drag.drag_source_chatmemberlist .chatBody .dropTargetBox {
opacity: 0; }
.favoriteElement {
position: relative;
height: 72px;
cursor: pointer; }
.compactQuickAccess .favoriteElement {
height: 36px; }
.favoriteElement .ChatRoomGroupAvatar {
width: 44px;
height: 44px;
padding: 0 1px;
margin: 2px;
margin-bottom: 3px; }
.favoriteElement .ChatRoomGroupAvatar.HasAvatar {
width: 48px;
height: 48px;
border: none;
padding: 0;
margin-left: 3px;
margin-right: 3px; }
@media only screen and (min-resolution: 1.5dppx) and (max-resolution: 2dppx) {
.favoriteElement .ChatRoomGroupAvatar {
margin-bottom: 2px; } }
.favoriteElement .ChatRoomGroupAvatar_initials {
padding-top: 4px;
font-size: 25px; }
.compactQuickAccess .favoriteElement .ChatRoomGroupAvatar_initials {
font-size: 14px;
padding-top: 4px; }
.favoriteElement .ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
padding-top: 3px; }
.compactQuickAccess .favoriteElement .ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
padding-top: 1px; }
.favoriteElement .ChatRoomMultiFriendAvatar {
margin: 2px;
margin-bottom: 2px; }
.quickAccessFriendsMessage {
font-size: 12px;
display: flex;
justify-content: center;
color: rgba(0, 217, 255, 0.5);
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
border: 1px dashed rgba(0, 217, 255, 0.3);
padding: 8px 0px 8px 0;
border-radius: 6px;
transition: all .32s ease-in-out; }
body.in_global_drag .quickAccessFriendsMessage {
border: 1px dashed rgba(0, 217, 255, 0); }
.quickAccessFriends.emptyQuickAccess .quickAccessFriendsMessageDismiss {
position: absolute;
bottom: 0;
right: 0;
font-size: 10px;
text-transform: uppercase;
background: #185c6c;
border-radius: 3px;
padding: 0 8px 0 8px;
color: white;
z-index: 101;
cursor: pointer; }
.quickAccessFriends.emptyQuickAccess .quickAccessFriendsMessageDismiss:hover {
background: #3ba2b9; }
.quickAccessFriends {
position: relative;
transition: height 1s ease-in-out;
margin-left: 4px;
width: calc( 100% - 8px); }
.quickAccessFriends.emptyQuickAccess {
height: 48px;
overflow: hidden;
transition: height 0.25s ease-in-out; }
.quickAccessFriends.emptyQuickAccess.hintDismissed {
height: 0px;
margin-top: -6px; }
body.in_global_drag .quickAccessFriends.emptyQuickAccess {
height: 48px;
margin-top: 0px; }
.quickAccessFriends:not(.emptyQuickAccess) {
display: inline-flex;
flex-wrap: wrap;
min-height: 32px;
padding-top: 4px; }
.friend.quickAccessFriend {
width: 50px;
margin: 2px;
transition-property: position;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); }
.compactQuickAccess .friend.quickAccessFriend {
width: 24px;
margin-left: 6px;
margin-right: 6px; }
.compactQuickAccess .favoriteElement .ChatRoomGroupAvatar {
width: 28px;
height: 28px;
margin: 2px;
margin-left: 3px;
margin-right: 3px;
padding: 0;
border-width: 1px; }
.compactQuickAccess .favoriteElement .ChatRoomGroupAvatar.HasAvatar {
margin-left: 4px;
margin-right: 4px; }
.compactQuickAccess .friend.quickAccessFriend .avatarHolder {
transform: scale(1); }
.compactQuickAccess .friend.quickAccessFriend .avatarHolder .avatar {
width: 26px; }
.quickAccessFriend .clanName,
.friend.quickAccessFriend .playerName {
width: 44px;
margin-left: 2px;
text-align: center;
font-size: 12px;
bottom: 0px;
text-overflow: clip;
-webkit-mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0.15) 100%);
mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0.15) 100%);
transition: color .2s ease-in-out;
padding: 0px;
margin-left: auto;
margin-right: auto; }
.quickAccessFriend .clanName {
color: #a3aebd; }
.favoriteElement:hover .quickAccessFriend .clanName {
color: white; }
.friend.quickAccessFriend .playerNameQuickAccessContainer .playerName {
width: 50x;
margin-left: 1px; }
.friend .avatarHolder .avatarStatus {
transition-property: height, background-color, opacity, width, transform;
transition-duration: .08s, .24s;
transition-timing-function: linear, ease-in-out; }
/* hide broken image if it cant load avatar... probably a better way to do this
.avatarHolder .avatar:before
{
content: "N/A";
display: block;
color: #555;
font-size: 10px;
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
position: absolute;
width: 35px;
height: 30px;
margin-bottom: -18px;
background-color: rgb(3, 3, 3);
}*/
.ChatTabContent .avatarHolder .avatarStatus,
.friend.quickAccessFriend .avatarHolder .avatarStatus {
display: block;
height: 2px;
width: 100%;
order: 5; }
.ChatTabContent .avatarHolder .avatarStatus {
height: 2px;
margin-top: -2px;
z-index: 4; }
.ChatTabContent .friend.awayOrSnooze .avatarHolder .avatarStatus,
.friend.quickAccessFriend.friend.awayOrSnooze .avatarHolder .avatarStatus {
-webkit-mask: url("../../images/webui/masks/dashed_mask.png") repeat-x;
-webkit-mask-size: 5px 6px;
mask: url("../../images/webui/masks/dashed_mask.png") repeat-x;
mask-size: 5px 6px;
opacity: .75; }
.ChatTabContent .avatarHolder,
.friend.quickAccessFriend .avatarHolder {
height: auto;
flex-direction: column; }
.ChatTabContent .avatarHolder .avatar {
width: 41px;
height: auto; }
.chatTab:not(.active) .ChatTabContent .avatarHolder .avatar {
-webkit-mask: linear-gradient(to bottom, black 0px, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0) 100%); }
.friend.quickAccessFriend .avatarHolder .avatar {
width: 36px;
width: 48px;
height: auto;
border: none; }
.quickAccessFriends .friend.friend.awayOrSnooze .avatarHolder img {
opacity: .5; }
.msg.isCurrentUser .TradeOfferInvite {
background: radial-gradient(256px 256px at 20% 20%, rgba(61, 68, 78, 0.5) 0%, rgba(41, 44, 51, 0.5) 50%, rgba(36, 39, 46, 0.5) 100%), #1e2329;
box-shadow: 0 6px 14px 1px #00000011; }
.TradeOfferInvite .rightInviteContainer {
overflow: visible; }
.rightInviteContainer.rightInvite_Horizontal {
flex-direction: row;
justify-content: space-between; }
.TradeOfferInvite .leftInviteContainer {
position: relative;
/*background-color: #2043;*/ }
.TradeOfferInvite .leftInviteContainer .SVGIcon_Trade {
position: absolute;
width: 20px;
height: 20px;
background-color: #179cfd;
border-radius: 50%;
padding: 6px;
bottom: 10px;
right: 8px;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8); }
.msg.isCurrentUser .TradeOfferInvite .leftInviteContainer .SVGIcon_Trade {
width: 14px;
height: 14px;
padding: 2px; }
.TradeOfferInvite .leftInviteContainer .avatarHolder.Large {
width: 66px;
height: 66px;
transform: scale(1);
border-radius: 3px; }
.msg.isCurrentUser .TradeOfferInvite .leftInviteContainer .avatarHolder.Large {
width: 36px;
height: 36px;
transform: scale(1);
border-radius: 3px; }
.TradeOfferInvite .leftInviteContainer .avatarHolder.Large .avatar {
border-radius: 4px;
border: 1px solid black;
filter: none; }
.TradeOffer_NoteFromFriendCtn {
position: relative;
margin-top: 4px;
margin-bottom: 6px; }
.TradeOffer_NoteFromFriend {
padding: 13px 13px;
border: 1px solid #3c3d3e;
color: #d6d7d8;
font-size: 14px;
font-style: italic;
line-height: 19px;
border-radius: 5px;
margin-bottom: 5px;
background-color: #262626; }
.TradeOffer_NoteFromFriend_QuoteArrow {
position: absolute;
width: 17px;
height: 18px;
left: -16px;
top: 5px;
background-repeat: no-repeat;
background-image: url("../../images/skin_1/quotearrow_graybg_flipped.png"); }
.friend {
position: relative; }
.gameGroup .gameGroupContainer {
display: flex; }
.gameGroup:not(.OtherGamesGroup):not(.NonSteamGamesGroup) .gameGroupContainer {
background-color: #cde2;
background-color: transparent;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 40px;
height: 26px;
margin-right: 8px; }
.CompactFriendsList .gameGroup:not(.OtherGamesGroup):not(.NonSteamGamesGroup) .gameGroupContainer {
margin-right: 4px; }
.FriendInGameIcon {
margin-left: -12px;
line-height: 22px;
width: 36px;
height: 26px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
z-index: 0;
margin-right: 8px;
margin-top: 5px;
background-color: #cde2;
background-color: transparent;
flex-shrink: 0;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0); }
.CompactFriendsList .FriendInGameIcon {
display: none; }
.groupName .gameGroupContainer .groupIcon,
.FriendInGameIcon img {
width: 22px;
height: 22px;
margin-left: 15px;
margin-top: 2px;
box-shadow: none; }
.groupName .gameGroupContainer .groupIcon {
margin-left: 0;
border-radius: 2px; }
.CompactFriendsList .groupName .gameGroupContainer .groupIcon {
/*display: none;*/ }
.FriendInGameIcon img {
box-shadow: 1px 1px 2px black;
border: 0px solid transparent;
border-radius: 3px; }
.FriendInGameIcon .FriendInGameIcon_NA {
display: inline-block;
line-height: normal;
vertical-align: middle;
margin-left: 14px;
color: #555;
font-size: 10px;
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
width: 22px;
background-color: #030303;
border-radius: 2px; }
.FavoriteFriend_GameIcon {
display: block;
position: absolute;
width: 24px;
height: 24px;
background-color: #555;
right: -4px;
bottom: -4px; }
.FavoriteFriend_GameIcon img {
box-shadow: 1px 1px 2px black;
width: 100%;
height: 100%;
border: 0px solid transparent;
border-radius: 3px; }
.ExpandArrow {
width: 12px;
height: 12px;
min-width: 12px;
background-image: url("../../images/webui/expandarrow.png");
background-size: contain;
background-repeat: no-repeat;
margin-top: 6px;
transform: rotateZ(90deg);
transition-property: transform, margin, opacity;
transition-duration: .2s;
transition-timing-function: ease-in-out;
margin-right: 4px;
opacity: .5; }
.Collapsed .ExpandArrow {
transform: rotateZ(0deg); }
.ExpandPlusMinus {
width: 10px;
height: 10px;
min-width: 10px;
margin-top: 3px;
transition-property: transform, margin, opacity, color;
transition-duration: .2s;
transition-timing-function: ease-in-out;
opacity: 0;
color: #676666;
font-size: 16px;
font-weight: 100;
text-align: center;
margin-right: 3px;
margin-left: 2px; }
.compactView .ExpandPlusMinus {
opacity: 1; }
.friendGroup.offlineFriends .ExpandPlusMinus,
.friendGroup.onlineFriends .ExpandPlusMinus {
margin-top: 2px; }
.ExpandPlusMinus .SVGIcon_PlusCircle {
width: 16px;
height: 16px;
margin-left: -2px; }
.ExpandPlusMinus .SVGIcon_PlusCircle circle {
opacity: 0; }
.ExpandPlusMinus .SVGIcon_PlusCircle .horizontalLine,
.ExpandPlusMinus .SVGIcon_PlusCircle .verticalLine {
stroke: #676666;
transition: stroke .2s ease-in-out, transform .2s ease-in-out; }
.ExpandPlusMinus .SVGIcon_PlusCircle .verticalLine {
transform: scaleY(0);
transform-origin: 50% 50%; }
.Collapsed .ExpandPlusMinus .SVGIcon_PlusCircle .verticalLine {
transform: scaleY(1); }
.groupName:hover .ExpandPlusMinus,
.Collapsed .ExpandPlusMinus {
opacity: 1; }
.groupName:hover .ExpandPlusMinus .SVGIcon_PlusCircle line {
stroke: white; }
.SVGIcon_Group {
width: 100%;
height: 100%; }
.friendGroup .groupName .groupIcon .SVGIcon_Group {
fill: #8880;
stroke: #888;
stroke-width: 10px;
transition-property: fill, stroke;
transition-duration: 0.24s;
transition-timing-function: ease-in-out; }
.chatRoomMembers .friendGroup .groupName .groupIcon {
position: absolute;
width: 24px;
height: 24px;
opacity: 0;
transform: translateX(36px) scale3d(4, 0.5, 1);
transition-property: transform, opacity;
transition-duration: 0.24s;
transition-timing-function: ease-in-out;
border-radius: 3px; }
.friendGroup .groupLabelsContainer {
display: flex;
flex-direction: row; }
.friendGroup .groupName:hover .ExpandArrow {
opacity: 1; }
.friendGroup:not(.noTransitions) .friend-anim-appear,
.friendGroup:not(.noTransitions) .friend-anim-enter {
opacity: 0.01;
margin-bottom: -44px;
pointer-events: none; }
.friendGroup:not(.noTransitions) .lastInGroup.friend-anim-appear.friend-anim-appear-active,
.friendGroup:not(.noTransitions) .lastInGroup.friend-anim-enter.friend-anim-enter-active,
.friendGroup:not(.noTransitions) .inGroup.friend-anim-appear.friend-anim-appear-active,
.friendGroup:not(.noTransitions) .inGroup.friend-anim-enter.friend-anim-enter-active,
.friendGroup:not(.noTransitions) .firstInGroup.friend-anim-appear.friend-anim-appear-active,
.friendGroup:not(.noTransitions) .firstInGroup.friend-anim-enter.friend-anim-enter-active,
.friendGroup:not(.noTransitions) .friend-anim-appear.friend-anim-appear-active,
.friendGroup:not(.noTransitions) .friend-anim-enter.friend-anim-enter-active {
opacity: 1;
margin-bottom: 0px;
transition: opacity 0.3s ease-in-out, margin 0.3s ease-in-out; }
.friendGroup:not(.noTransitions) .friend-anim-exit {
opacity: 1;
margin-bottom: 0px; }
.friendGroup:not(.noTransitions) .awayOrSnooze.friend-anim-exit.friend-anim-exit-active,
.friendGroup:not(.noTransitions) .friend-anim-exit.friend-anim-exit-active {
opacity: 0;
margin-bottom: -44px;
transition: opacity 0.2s ease-in-out, margin 0.3s ease-in-out; }
.friendGroup:not(.noTransitions) .awayOrSnooze.friend-anim-appear.friend-anim-appear-active,
.friendGroup:not(.noTransitions) .awayOrSnooze.friend-anim-enter.friend-anim-enter-active {
opacity: 1;
margin-bottom: 0px;
transition: opacity 0.3s ease-in-out, margin 0.3s ease-in-out; }
.friendGroup:not(.noTransitions) .lastInGroup.friend-anim-exit,
.friendGroup:not(.noTransitions) .inGroup.friend-anim-exit,
.friendGroup:not(.noTransitions) .firstInGroup.friend-anim-exit,
.friendGroup:not(.noTransitions) .awayOrSnooze.friend-anim-exit {
opacity: 1;
margin-bottom: 0px; }
/*---------------ingroup variations----------------*/
.friendGroup:not(.noTransitions) .firstInGroup.friend-anim-appear,
.friendGroup:not(.noTransitions) .firstInGroup.friend-anim-enter {
margin-bottom: -38px;
opacity: 0.01; }
.friendGroup:not(.noTransitions) .firstInGroup.friend-anim-exit.friend-anim-exit-active {
margin-bottom: -38px;
opacity: 0; }
.friendGroup:not(.noTransitions) .inGroup.friend-anim-appear,
.friendGroup:not(.noTransitions) .inGroup.friend-anim-enter {
margin-bottom: -36px;
opacity: 0.01; }
.friendGroup:not(.noTransitions) .inGroup.friend-anim-exit.friend-anim-exit-active {
margin-bottom: -36px;
opacity: 0; }
.friendGroup:not(.noTransitions) .lastInGroup.friend-anim-appear,
.friendGroup:not(.noTransitions) .lastInGroup.friend-anim-enter {
margin-bottom: -44px;
opacity: 0.01; }
.friendGroup:not(.noTransitions) .lastInGroup.friend-anim-exit.friend-anim-exit-active {
margin-bottom: -44px;
opacity: 0; }
/*---------------ingroup variations COMPACT----------------*/
.CompactFriendsList .friendGroup:not(.noTransitions) .firstInGroup.friend-anim-appear,
.CompactFriendsList .friendGroup:not(.noTransitions) .firstInGroup.friend-anim-enter {
margin-bottom: -34px;
opacity: 0.01; }
.CompactFriendsList .friendGroup:not(.noTransitions) .firstInGroup.friend-anim-exit.friend-anim-exit-active {
margin-bottom: -34px;
opacity: 0; }
.CompactFriendsList .friendGroup:not(.noTransitions) .inGroup.friend-anim-appear,
.CompactFriendsList .friendGroup:not(.noTransitions) .inGroup.friend-anim-enter {
margin-bottom: -34px;
opacity: 0.01; }
.CompactFriendsList .friendGroup:not(.noTransitions) .inGroup.friend-anim-exit.friend-anim-exit-active {
margin-bottom: -34px;
opacity: 0; }
.CompactFriendsList .friendGroup:not(.noTransitions) .lastInGroup.friend-anim-appear,
.CompactFriendsList .friendGroup:not(.noTransitions) .lastInGroup.friend-anim-enter {
margin-bottom: -20px;
opacity: 0.01; }
.CompactFriendsList .friendGroup:not(.noTransitions) .lastInGroup.friend-anim-exit.friend-anim-exit-active {
margin-bottom: -16px;
opacity: 0; }
/*-----CompactFriendsList Transitions----*/
.CompactFriendsList .friendGroup:not(.noTransitions) .friendCategoryContainer.friend-anim-appear,
.CompactFriendsList .friendGroup:not(.noTransitions) .friendCategoryContainer.friend-anim-enter,
.CompactFriendsList .friendGroup:not(.noTransitions) .friend.friend-anim-appear,
.CompactFriendsList .friendGroup:not(.noTransitions) .friend.friend-anim-enter {
opacity: 0.01;
margin-bottom: -32px; }
.CompactFriendsList .friendGroup:not(.noTransitions) .friendCategoryContainer.friend-anim-appear.friend-anim-appear-active,
.CompactFriendsList .friendGroup:not(.noTransitions) .friendCategoryContainer.friend-anim-enter.friend-anim-enter-active,
.CompactFriendsList .friendGroup:not(.noTransitions) .friend.friend-anim-appear.friend-anim-appear-active,
.CompactFriendsList .friendGroup:not(.noTransitions) .friend.friend-anim-enter.friend-anim-enter-active {
opacity: 1;
margin-bottom: 0px;
transition: all 0.2s ease-in-out; }
.CompactFriendsList .friendGroup:not(.noTransitions) .friendCategoryContainer.friend-anim-exit,
.CompactFriendsList .friendGroup:not(.noTransitions) .friend.friend-anim-exit {
opacity: 1;
margin-bottom: 0px; }
.CompactFriendsList .friendGroup:not(.noTransitions) .friendCategoryContainer.friend-anim-exit.friend-anim-exit-active,
.CompactFriendsList .friendGroup:not(.noTransitions) .friend.friend-anim-exit.friend-anim-exit-active {
opacity: 0;
margin-bottom: -32px;
transition: all 0.2s ease-in-out; }
/*-----VoiceChannelParticipants.CompactFriendsList Transitions----*/
.VoiceChannelParticipants.CompactFriendsList .friend-anim-appear,
.VoiceChannelParticipants.CompactFriendsList .friend-anim-enter {
opacity: 0.01;
margin-bottom: -32px; }
.VoiceChannelParticipants.CompactFriendsList .friend-anim-appear.friend-anim-appear-active,
.VoiceChannelParticipants.CompactFriendsList .friend-anim-enter.friend-anim-enter-active {
opacity: 1;
margin-bottom: 2px;
transition: opacity 0.2s ease-in-out, margin 0.2s ease-in-out; }
.VoiceChannelParticipants.CompactFriendsList .friend-anim-exit {
opacity: 1;
margin-bottom: 2px; }
.VoiceChannelParticipants.CompactFriendsList .friend-anim-exit.friend-anim-exit-active {
opacity: 0;
margin-bottom: -32px;
transition: opacity 0.1s ease-in-out, margin 0.1s ease-in-out; }
/*-----chatWindow Transitions----*/
.VoiceRoomChatHistory.chatWindow-anim-appear,
.VoiceRoomChatHistory.chatWindow-anim-enter {
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.31s ease-in-out; }
.VoiceRoomChatHistory.chatWindow-anim-appear.chatWindow-anim-appear-active,
.VoiceRoomChatHistory.chatWindow-anim-enter.chatWindow-anim-enter-active {
background-color: rgba(0, 0, 0, 0.54);
transition: background-color 0.31s ease-in-out; }
.VoiceRoomChatHistory.chatWindow-anim-exit {
background-color: rgba(0, 0, 0, 0.54);
transition: background-color 0.31s ease-in-out; }
.VoiceRoomChatHistory.chatWindow-anim-exit.chatWindow-anim-exit-active {
opacity: 0;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.31s ease-in-out, opacity 0.31s ease-in-out; }
/*-------- unread chat messages appear --------*/
.unread-messages-anim-appear,
.unread-messages-anim-enter {
opacity: 0;
transform: translateY(-20px);
transition: all 0.31s ease-in-out; }
.unread-messages-anim-appear.unread-messages-anim-appear-active,
.unread-messages-anim-enter.unread-messages-anim-enter-active {
transform: translateY(0px);
opacity: 1;
transition: all 0.31s ease-in-out; }
.unread-messages-anim-exit {
transform: translateY(0px);
opacity: 1;
transition: all 0.31s ease-in-out; }
.unread-messages-anim-exit.unread-messages-anim-exit-active {
transform: translateY(-20px);
opacity: 0;
transition: all 0.31s ease-in-out; }
/*-------- fade opacity only --------*/
.opacityfade-anim-appear,
.opacityfade-anim-enter {
opacity: 0;
transition: opacity 0.31s ease-in-out; }
.opacityfade-anim-appear.opacityfade-anim-appear-active,
.opacityfade-anim-enter.opacityfade-anim-enter-active {
opacity: 1;
transition: opacity 0.31s ease-in-out; }
.opacityfade-anim-exit {
opacity: 1;
transition: opacity 0.31s ease-in-out; }
.opacityfade-anim-exit.opacityfade-anim-exit-active {
opacity: 0;
transition: opacity 0.31s ease-in-out; }
/*-------- fade opacity and collapse width only --------*/
.widthcollapseandfade-anim-appear,
.widthcollapseandfade-anim-enter {
opacity: 0;
max-width: 0px;
transition: opacity 0.4s ease-in-out, max-width 0.4s ease-in-out; }
.widthcollapseandfade-anim-appear.widthcollapseandfade-anim-appear-active,
.widthcollapseandfade-anim-enter.widthcollapseandfade-anim-enter-active {
opacity: 1;
max-width: 150px;
transition: opacity 0.4s ease-in-out, max-width 0.4s ease-in-out; }
.widthcollapseandfade-anim-exit {
opacity: 1;
max-width: 150px;
transition: opacity 0.4s ease-in-out, max-width 0.4s ease-in-out; }
.widthcollapseandfade-anim-exit.widthcollapseandfade-anim-exit-active {
opacity: 0;
max-width: 0px;
transition: opacity 0.4s ease-in-out, max-width 0.4s ease-in-out; }
/*-------- fade opacity and collapse height only --------*/
.heightcollapseandfade-anim-appear,
.heightcollapseandfade-anim-enter {
opacity: 0;
max-height: 0px;
transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out; }
.heightcollapseandfade-anim-appear.heightcollapseandfade-anim-appear-active,
.heightcollapseandfade-anim-enter.heightcollapseandfade-anim-enter-active {
opacity: 1;
max-height: 44px;
transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out; }
.heightcollapseandfade-anim-exit {
opacity: 1;
max-height: 44px;
transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out; }
.heightcollapseandfade-anim-exit.heightcollapseandfade-anim-exit-active {
opacity: 0;
max-height: 0px;
transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out, height 0.4s ease-in-out; }
/*-------- activeVoiceControls in main friends list --------*/
.activevoice-anim-appear,
.activevoice-anim-enter {
opacity: 0;
max-height: 0px;
margin-top: -1px;
margin-bottom: -1px;
transition: all 0.32s ease-in-out; }
.activevoice-anim-appear.activevoice-anim-appear-active,
.activevoice-anim-enter.activevoice-anim-enter-active {
opacity: 1;
max-height: 44px;
margin-top: 0px;
margin-bottom: 0px;
transition: all 0.32s ease-in-out; }
.activevoice-anim-exit {
opacity: 1;
max-height: 44px;
margin-top: 0px;
margin-bottom: 0px;
transition: all 0.32s ease-in-out; }
.activevoice-anim-exit.activevoice-anim-exit-active {
opacity: 0;
max-height: 0px;
margin-top: -1px;
margin-bottom: -1px;
transition: all 0.32s ease-in-out; }
/*-----------------*/
.chatWindow-anim-appear .VoiceRoomChatWindow,
.chatWindow-anim-enter .VoiceRoomChatWindow {
opacity: 0.0;
transform: translateX(-320px) scale(0.9);
transform-origin: 0% 50%; }
.chatWindow-anim-appear.chatWindow-anim-appear-active .VoiceRoomChatWindow,
.chatWindow-anim-enter.chatWindow-anim-enter-active .VoiceRoomChatWindow {
opacity: 1;
transition: opacity 0.31s ease-in-out, transform 0.31s ease-in-out;
transform: translateX(0px) scale(1);
transform-origin: 0% 50%; }
.chatWindow-anim-exit .VoiceRoomChatWindow {
opacity: 1;
transform: translateX(0px) scale(1);
transform-origin: 0% 50%; }
.chatWindow-anim-exit.chatWindow-anim-exit-active .VoiceRoomChatWindow {
opacity: 0;
transform: translateX(-320px) scale(0.9);
transition: opacity 0.31s ease-in-out, transform 0.31s ease-in-out;
transform-origin: 0% 50%; }
/*-----chatRoomVoiceChannel Transitions----*/
.chatRoomVoiceChannel.channel-anim-appear,
.chatRoomVoiceChannel.channel-anim-enter {
opacity: 0.01;
margin-bottom: -32px; }
.chatRoomVoiceChannel.channel-anim-appear.channel-anim-appear-active,
.chatRoomVoiceChannel.channel-anim-enter.channel-anim-enter-active {
opacity: 1;
margin-bottom: 4px;
transition: opacity 0.2s ease-in-out, margin 0.3s ease-in-out, height 0.3s ease-in-out; }
.chatRoomVoiceChannel.channel-anim-exit {
opacity: 1;
margin-bottom: 4px; }
.chatRoomVoiceChannel.channel-anim-exit.channel-anim-exit-active {
opacity: 0;
margin-bottom: -32px;
transition: opacity 0.1s ease-in-out, margin 0.3s ease-in-out, height 0.3s ease-in-out; }
.YoutubePlayer {
background-color: #16181c;
border-radius: 6px;
padding: 4px; }
.chatRoomListContainer {
background: radial-gradient(ellipse farthest-corner at 20% 30%, #0a0b0d 0%, #25333a 0%, #182024 100%);
background: radial-gradient(ellipse farthest-corner at 20% 30%, #222b35 0%, #252e38 10%, #20242b 100%);
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
transition: all .2s ease-in-out; }
.ChatListResizing .chatRoomListContainer {
transition-duration: 0s; }
.ChatRoomList {
padding-top: 6px;
width: 100%;
position: relative; }
.chatRoomListScrollable {
overflow-y: auto;
flex: 1; }
.voiceRoomDragBar {
width: 100%;
height: 100%;
z-index: 10;
display: flex;
flex-direction: row;
cursor: ns-resize; }
.friendsListSectionTitle.chatSectionTitle .groupChatSectionTitle {
padding-left: 0px;
padding-top: 5px; }
.ToggleGroupChatList {
width: 10px;
height: 100%;
padding: 0 4px;
padding-top: 0px;
cursor: pointer;
z-index: 2; }
.ToggleGroupChatList .SVGIcon_DoubleArrow polyline {
stroke: #b7ccd5; }
.ToggleGroupChatList:hover .SVGIcon_DoubleArrow polyline {
stroke: #fff; }
.friendsListSectionTitle.chatSectionTitle:hover {
background-color: #4a515c; }
.compactView .friendsListSectionTitle.chatSectionTitle .groupChatSectionTitle {
padding-top: 4px; }
.FriendsListChatSection.ChatRoomListContainerParent .ToggleGroupChatList .SVGIcon_DoubleArrow {
transition: all .2s ease-in-out; }
.FriendsListChatSection.ChatRoomListContainerParent.Collapsed .ToggleGroupChatList .SVGIcon_DoubleArrow {
transform: rotateZ(90deg); }
.voiceRoomDragBar .grabberBar {
width: 64px;
margin-left: auto;
margin-right: auto;
/*pointer-events: none;*/
cursor: ns-resize;
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 10px; }
.compactView .voiceRoomDragBar .grabberBar {
margin-top: 8px; }
.voiceRoomDragBar .Grip {
width: 4px;
height: 4px;
background-color: #5b6370;
align-self: center;
margin: 2px;
cursor: ns-resize; }
.voiceRoomDragBar .grabberHitbox {
padding: 1px;
position: relative;
z-index: 3;
cursor: ns-resize;
top: 0;
bottom: 0;
border: 1px solid transparent;
height: 100%;
/* background-color: rgba(220,0,0,0.1);*/ }
/*
.voiceRoomDragBar:active .grabberBar
{
background-color: rgb( 81, 88, 100 );
}
*/
.voiceRoomDragBar:active .Grip {
background-color: #848fa0; }
.createChatRoomButton {
color: #ccc;
background-color: transparent;
border: none;
margin-top: 4px;
padding-right: 5px;
cursor: pointer; }
.createChatRoomButton:hover {
background-color: transparent; }
.createChatRoomButton:focus {
outline: none; }
.ChatRoomListGroupItem {
position: relative;
transition: margin .21s ease-in-out, background-color .1s ease-in-out, box-shadow .21s ease-in-out;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); }
.ChatRoomListGroupItem {
/*border-top: 0.25px solid #0006;
border-bottom: 0.25px solid #0003;*/ }
.ChatRoomListGroupItem .chatRoomGroupStats {
text-align: left;
align-self: flex-start; }
.ChatRoomListGroupItem .statMemberStat {
font-size: 10px; }
.ChatRoomListGroupItem .chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomTextChannel {
bottom: 0px; }
.ChatRoomListGroupItem.expanded {
background-color: #2f3844;
margin-top: 8px;
margin-bottom: 8px;
box-shadow: 1px 2px 18px black; }
.ChatRoomListGroupItem .chatRoomVoiceChannelName {
font-size: 12px; }
.ChatRoomListGroupItem .chatRoomVoiceChannel {
border-color: rgba(104, 110, 115, 0);
padding: 0px;
margin-right: 0px; }
.ChatRoomListGroupItem .SVGIcon_VoiceRoom {
width: 18px;
height: 18px;
margin-top: 2px; }
.ChatRoomListGroupItem .chatRoomVoiceChannelIcon {
margin-left: 6px; }
.ChatRoomListGroupItem.expanded .ChatRoomAddRoomBtn {
margin-left: 56px;
padding-bottom: 6px;
padding-top: 6px; }
.ChatRoomListGroupItem:hover {
background-color: rgba(47, 56, 68, 0.5); }
.ChatRoomListGroupItem:not(.NonGroupHovered) .ChatRoomListGroupItem_header:hover .chatRoomName {
color: white; }
.ChatRoomListGroupItem .ChatRoomGroupAvatar {
width: 30px;
height: 30px;
z-index: 1;
margin: 4px; }
.ChatRoomListGroupItem .ChatRoomGroupAvatar.HasAvatar {
width: 34px;
height: 34px;
border-width: 0; }
.compactView .ChatRoomListGroupItem .ChatRoomGroupAvatar {
width: 24px;
height: 24px;
margin: 0px;
border-width: 1px; }
.compactView .ChatRoomListGroupItem .ChatRoomGroupAvatar.HasAvatar {
width: 26px;
height: 26px;
margin: 0px;
border-width: 0px; }
.ChatRoomListGroupItem .openGroupButton {
width: 24px;
height: 24px;
display: block;
margin-top: 7px;
cursor: pointer;
border-radius: 50%;
margin-right: 4px;
transition: all .16s ease-in-out; }
.compactView .ChatRoomListGroupItem .openGroupButton {
margin-top: 1px;
margin-bottom: 1px; }
.openGroupButton .SVGIcon_DoubleArrow {
width: 12px;
height: 12px;
transform: rotateZ(-90deg);
margin-left: 6px;
margin-top: 6px;
transition: all .16s ease-in-out; }
.ChatRoomListGroupItem .openGroupButton .SVGIcon_DoubleArrow polyline {
stroke: #434953;
transition: all .16s ease-in-out; }
.ChatRoomListGroupItem:hover .openGroupButton:hover .SVGIcon_DoubleArrow polyline {
stroke: white; }
.ChatRoomListGroupItem_header:hover .openGroupButton .SVGIcon_DoubleArrow polyline {
stroke: #95a1b8; }
.ChatRoomListGroupItem .openGroupButton:hover {
background-color: #434953; }
.ChatRoomListGroupItem.ShowAllChannels .openGroupButton .SVGIcon_DoubleArrow {
transform: rotateZ(90deg); }
.ChatRoomListGroupItem .ChatRoomGroupAvatar .ChatRoomGroupAvatar_initials {
font-size: 16px;
padding-top: 5px;
border-width: 2px; }
.compactView .ChatRoomListGroupItem .ChatRoomGroupAvatar .ChatRoomGroupAvatar_initials {
font-size: 12px;
padding-top: 2px; }
.detailsView {
transition: all .21s ease-in-out; }
.ChatRoomListGroupItem.ShowAllChannels .detailsView {
padding-top: 4px;
box-shadow: inset 2px 2px 18px #0000003f;
background-color: #0002;
padding-bottom: 4px; }
.ChatRoomListGroupItem.NoChannels .detailsView {
padding: 0px; }
.ChatRoomListGroupItem:hover .detailsView {
background-color: #0002; }
.expanded .detailsView {
background-color: #0002;
box-shadow: inset 0px 2px 8px #00000075; }
.ChatRoomListGroupItemChatRooms {
padding-left: 0px;
font-size: 14px;
margin-left: 46px; }
.ChatRoomListGroupItem .membersInVoice {
display: flex;
margin-top: 4px;
min-height: 22px;
flex-wrap: wrap; }
.ChatRoomListGroupItem .membersInVoice .SVGIcon_VoiceRoom {
margin-top: 0px;
margin-left: -6px;
margin-right: -2px;
width: 22px;
height: 22px;
stroke: #c8f1c2; }
.ChatRoomListGroupItem .membersInVoice .SVGIcon_VoiceRoom .Bubble {
opacity: 1;
stroke: rgba(104, 110, 115, 0.4); }
.ChatRoomListGroupItem .membersInVoice .SVGIcon_VoiceRoom .Microphone {
fill: #5e6d64; }
.ChatRoomListGroupItem .membersInVoice .voiceFriendAvatar {
width: 20px;
height: 20px;
box-shadow: 0px 0px 4px black;
margin-right: 4px;
margin-left: -4px; }
.ChatRoomListGroupItem .membersInVoice .voiceFriendAvatar:first-child {
margin-left: 0; }
.ChatRoomListGroupItem .membersInVoice .voiceFriendAvatar:last-child {
margin-right: 0; }
.ChatRoomListGroupItem .membersInVoice .voiceFriendAvatar.isNotFriend:last-child {
margin-right: 2px; }
.ChatRoomListGroupItem .membersInVoice .voiceFriendAvatar.isNotFriend {
opacity: .5;
width: 16px;
height: 16px;
border-radius: 3px;
box-shadow: none;
margin: 0; }
.ChatRoomListGroupItem .membersInVoice .voiceChatGroup {
margin-right: 4px;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.61);
min-height: 20px;
border: 1px solid #64705b;
overflow: hidden;
border-radius: 3px;
background-color: #3c4e58;
display: flex;
align-items: center;
cursor: default;
margin-bottom: 4px;
flex-wrap: wrap; }
.groupNameStatusContainer {
padding-left: 5px;
flex-direction: column;
min-width: 0;
display: flex;
flex: 1;
align-self: center; }
.ChatRoomListGroupItem.HasLinkedBroadcast .groupNameStatusContainer .displayRow {
margin-top: 13px;
margin-bottom: 14px; }
.compactView .ChatRoomListGroupItem.HasLinkedBroadcast .groupNameStatusContainer .displayRow {
margin-top: 0px;
margin-bottom: 10px; }
.groupNameStatusContainer .chatRoomName {
font-size: 14px;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.groupNameStatusContainer .chatRoomDetails {
font-size: 12px; }
.activeVoiceChat .chatRoomName {
color: white; }
.ChatRoomListGroupItem .ContextMenuButton .SVGIcon_DownArrowContextMenu {
fill: #c5d6d4; }
.ChatRoomListGroupItem .ContextMenuButton:hover .SVGIcon_DownArrowContextMenu {
fill: white; }
.contextVoiceInvite {
background: radial-gradient(ellipse 100% 132px at 24px 10px, rgba(122, 245, 91, 0.5) 0%, rgba(122, 245, 91, 0.26) 25%, rgba(122, 245, 91, 0.22) 34%, rgba(122, 245, 91, 0.1) 50%, rgba(122, 245, 91, 0) 70%);
color: #b0b8bb; }
.contextVoiceInvite:hover {
background: radial-gradient(ellipse 100% 132px at 24px 10px, rgba(122, 245, 91, 0.5) 0%, rgba(122, 245, 91, 0.26) 25%, rgba(122, 245, 91, 0.22) 34%, rgba(122, 245, 91, 0.1) 50%, rgba(122, 245, 91, 0) 70%);
background-color: #5a6069;
color: white; }
.contextVoiceInvite .SVGIcon_VoiceRoom {
height: 20px;
margin-top: 1px;
margin-bottom: -3px; }
.contextVoiceInvite .SVGIcon_VoiceRoom .Bubble {
stroke: white; }
.contextVoiceInvite .SVGIcon_VoiceRoom .Microphone {
fill: white; }
.ChatRoomListGroupItem .groupNameStatusContainer .chatRoomName {
color: #c5d6d4;
font-size: 14px; }
.ChatRoomListGroupItem.HasLinkedBroadcast {
position: relative; }
.ChatRoomListGroupItem.HasLinkedBroadcast .SVGIcon_SteamTV {
height: 22px;
width: 75px; }
.ChatRoomListGroupItem.HasLinkedBroadcast .SVGIcon_SteamTV .logoBG {
opacity: 1;
fill: #222931;
stroke-width: 20px;
stroke: #252d37; }
.ChatRoomListGroupItem.HasLinkedBroadcast .steamTVSubtitle {
position: absolute;
left: 34px;
top: 28px;
z-index: 10;
font-size: 10px;
font-weight: thin;
display: flex;
align-content: center;
align-items: center;
color: #7d6ebc;
white-space: nowrap; }
.compactView .ChatRoomListGroupItem.HasLinkedBroadcast .steamTVSubtitle {
left: 24px;
top: 16px; }
.compactView .ChatRoomListGroupItem.HasLinkedBroadcast .steamTVSubtitle .SVGIcon_SteamTV #logo {
transform: scale(0.8) translateX(20px) translateY(18px); }
.compactView .ChatRoomListGroupItem .groupNameStatusContainer .chatRoomName {
font-size: 12px;
margin-left: 6px; }
.ChatRoomListGroupItem .groupNameStatusContainer .richPresenceLabel {
color: #8a9997;
font-size: 12px;
line-height: 12px;
margin-bottom: 7px; }
.chatRoomVoiceNameStatus {
display: flex;
flex-direction: row;
margin-bottom: -8px; }
.chatRoomVoiceNameStatus .chatRoomTextChannelName {
padding-left: 12px; }
.chatRoomVoiceList {
display: flex;
flex-direction: column; }
.ChatRoomListItem {
position: relative;
display: flex;
flex-direction: column; }
.ChatRoomListItem:hover {
background-color: rgba(0, 0, 0, 0.2);
color: white; }
.ChatRoomListItem.chatRoomVoiceChannel {
width: 232px; }
.chatRoomVoiceStatus {
width: 20px;
height: 20px;
background: url("../../images/webui/microphone_off.svg");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 50%;
opacity: .3;
flex-shrink: 0; }
.activeVoiceChat .chatRoomVoiceStatus {
background: url("../../images/webui/microphone_on.svg");
background-repeat: no-repeat;
opacity: 1; }
.ChatRoomListGroupItem_header {
cursor: pointer;
display: flex;
flex-direction: row;
line-height: 20px;
flex-grow: 0;
padding-left: 12px;
padding-top: 3px;
padding-bottom: 3px; }
.chatRoomHeaderButtons {
height: 100%;
display: flex;
flex-direction: row-reverse;
transition: opacity .2s ease-in-out;
opacity: 0;
/* set to take no width so it doesn't truncate longer chat names until hovered */
width: 0;
overflow: hidden;
flex-shrink: 0; }
.ChatRoomListGroupItem:hover .chatRoomHeaderButtons {
width: auto;
opacity: 1;
display: flex; }
button.chatRoomHeaderButton {
width: 18px;
min-width: 18px;
height: 18px;
min-height: 20px;
margin: 0px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
background-color: none;
border: none;
box-shadow: none;
filter: brightness(50%); }
button.chatRoomHeaderButton:hover {
filter: brightness(100%);
background-color: transparent; }
.chatRoomSettingsButton {
background: url("../../images/webui/icon_settings.png"); }
.chatRoomTextChatButton {
background: url("../../images/webui/icon_text_chat.png"); }
.unreadChatMessages {
width: 16px;
height: 16px;
font-size: 14px;
color: white;
background-color: blue;
border-radius: 50%;
margin: auto;
text-align: center;
line-height: 16px;
margin-left: 2px;
padding-left: 2px; }
.chatRoomInviteButton {
background: url("../../images/webui/icon_invite.png"); }
.ContextMenuButton {
width: 16px;
height: 16px;
opacity: 0;
margin-top: -1px;
margin-left: 0px;
transition: opacity .1s ease-in-out;
overflow: hidden;
flex-shrink: 0;
cursor: pointer;
z-index: 5; }
.friendlistListContainer .ContextMenuButton {
z-index: 0; }
.friendListHeaderContainer .ContextMenuButton {
-webkit-app-region: no-drag;
z-index: 3; }
.DialogCheckbox_Container.DNDCheckBox {
white-space: nowrap;
margin: 0px;
padding: 0px; }
.DialogCheckbox_Container.DNDCheckBox .DialogCheckbox {
transform: scale(0.85);
margin-right: 4px; }
.contextMenuItemHR {
color: #9ca4a7;
cursor: default;
height: 1px;
background-color: #262727;
position: relative;
z-index: 2;
pointer-events: none; }
.InlineVolume button.VolumeIcon {
background: none;
border: none; }
.InlineVolume button:focus {
outline: none; }
.InlineVolume ._DialogInputContainer {
background: none; }
.InlineVolume .VolumeIcon {
margin: 0px;
padding: 0px;
padding-left: 2px;
float: left;
cursor: pointer; }
.InlineVolume .VolumeIcon svg {
height: 20px;
width: 20px;
stroke: rgba(220, 220, 220, 0.8);
fill: rgba(220, 220, 220, 0.8); }
.InlineVolume .VolumeIcon:hover svg {
stroke: white;
fill: white; }
.InlineVolume .VolumeIcon svg .AudioLines {
fill: rgba(220, 220, 220, 0.8); }
.InlineVolume.Muted .VolumeIcon .SoundX line {
stroke: #fff;
stroke-width: 18px; }
.InlineVolume .VolumeIcon.HighVolume .SoundWavesHighest {
opacity: 0; }
.InlineVolume .VolumeIcon.MedVolume .SoundWavesHighest,
.InlineVolume .VolumeIcon.MedVolume .SoundWavesHigh {
opacity: 0; }
.InlineVolume .VolumeIcon.LowVolume .SoundWavesHighest,
.InlineVolume .VolumeIcon.LowVolume .SoundWavesHigh,
.InlineVolume .VolumeIcon.LowVolume .SoundWavesMed {
opacity: 0; }
.InlineVolume.Muted .VolumeIcon .SoundWaves {
opacity: 0; }
.InlineVolume .DialogSlider_Container {
float: left;
margin: 2px;
padding: 0px;
min-width: 140px; }
.InlineVolume.Muted .DialogSlider_Grabber,
.InlineVolume.Muted .DialogSlider_Value {
background: linear-gradient(to bottom, #555658 0%, #434447 80%); }
.InlineVolume.Muted .DialogSlider_Container:hover .DialogSlider_Grabber {
background: linear-gradient(to bottom, #687ab1 0%, #4e5969 80%); }
.InlineVolume .volumePercentage {
display: inline-block;
font-size: 10px;
width: 24px;
text-align: center;
margin-left: 2px; }
.voiceChannelIcon {
cursor: default; }
.chatRoomVoiceChannel:not(.ActiveVoiceChannel) .VoiceChannelParticipants .ContextMenuButton {
visibility: collapse; }
.ContextMenuButton .SVGIcon_DownArrowContextMenu {
width: 10px;
height: 10px;
padding-left: 4px; }
.currentUserContainer .ContextMenuButton .SVGIcon_DownArrowContextMenu {
width: 12px;
height: 12px; }
:not(.friendInviteContainer) .online .ContextMenuButton .SVGIcon_DownArrowContextMenu {
fill: #4c91ac; }
:not(.friendInviteContainer) .ingame .ContextMenuButton .SVGIcon_DownArrowContextMenu {
fill: #91c257; }
.currentUserContainer .ContextMenuButton {
opacity: 0.5;
padding-top: 2px;
padding-left: 2px;
-webkit-app-region: no-drag; }
.ChatRoomListGroupItem:hover .ContextMenuButton,
.friend:hover .ContextMenuButton {
opacity: 1; }
.currentUserContainer .ContextMenuButton:hover .SVGIcon_DownArrowContextMenu,
.friend:hover .ContextMenuButton:hover .SVGIcon_DownArrowContextMenu {
fill: white; }
.BroadcastThumbnail {
position: relative;
width: 55px;
height: 33px;
border: 1px solid #1b3733;
background-color: rgba(27, 55, 51, 0.24);
display: none; }
.BroadcastThumbnail:hover {
border-color: white; }
.FriendsListContent .friendlistListContainer .ingame .BroadcastThumbnail {
/*display: block;*/ }
@media only screen and (min-resolution: 1.5dppx) and (max-resolution: 2dppx) {
.BroadcastThumbnail {
border-width: 0.5px; } }
.VoiceRoomChatHistory {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 6;
background-color: rgba(0, 0, 0, 0.54); }
.VoiceRoomChatWindow {
position: absolute;
top: 32px;
left: 32px;
width: 720px;
max-width: calc( 100% - 64px);
bottom: 68px;
display: flex;
flex-direction: column;
border: 1px solid #525b64;
background-color: #2e2f35;
box-shadow: 1px 2px 18px black; }
.VoiceRoomChatHistoryContainer {
flex: 1; }
.VoiceRoomChatTitle {
background-color: #5f6974;
padding: 6px 8px;
display: flex;
flex-direction: row; }
.VoiceChatTextChannelName {
color: #eee;
letter-spacing: 1px;
text-align: center;
user-select: none; }
.VoiceRoomChatTitle .VoiceRoomTitleLabels {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: auto;
margin-right: auto; }
.VoiceChatTextChannelDesc {
font-size: 12px;
text-align: center;
position: absolute;
top: 32px;
height: 30px;
width: 100%;
z-index: 2;
padding-top: 4px;
background: linear-gradient(to bottom, rgba(44, 45, 51, 0.8) 0%, rgba(44, 45, 51, 0.5) 50%, rgba(44, 45, 51, 0) 100%);
text-shadow: 1px 1px 2px #000;
user-select: none;
pointer-events: none; }
.VoiceRoomChatTitle .MinimizeTextChat {
width: 16px;
height: 16px;
position: absolute;
right: 6px;
opacity: .5;
cursor: pointer; }
.VoiceRoomChatTitle .MinimizeTextChat line {
stroke: white; }
.VoiceRoomChatTitle .MinimizeTextChat:hover {
opacity: 1; }
.currentTextChannelName {
display: none;
width: calc( 100% - 22px);
background-color: #1a1c20;
height: 24px;
color: #8e969c;
letter-spacing: 1px;
padding-left: 22px;
font-size: 16px;
padding-top: 6px; }
.currentTextChannelName.DefaultChatRoom {
color: #b0e1f5;
font-weight: bold;
font-style: italic;
background-color: #00293b;
background: linear-gradient(to right, #171d29 0%, #1a1c20 256px, #1a1c20 44px); }
.SingleUserChat .VoiceRoomChatWindowContainer {
display: none; }
.chatRoomGroupHeader {
display: flex;
flex-direction: row;
padding: 2px;
border-bottom: 1px solid rgba(23, 24, 29, 0.75); }
.namedGroup .chatRoomGroupHeader {
padding: 8px 4px 8px 10px; }
.compactView.namedGroup .chatRoomGroupHeader {
padding: 4px 2px 4px 10px; }
.compactView .chatRoomGroupHeader .ChatRoomGroupAvatar {
width: 48px;
height: 48px; }
.compactView .chatRoomGroupHeader .ChatRoomGroupAvatar .ChatRoomGroupAvatar_initials {
margin-top: -6px; }
/*23442342*/
.chatRoomGroupHeader .broadcastInfoContainer {
display: flex;
flex-direction: row;
cursor: pointer;
margin-right: 18px;
background-color: rgba(130, 119, 177, 0.3);
border: 1px solid rgba(122, 112, 166, 0.3);
border-radius: 2px;
padding: 4px;
padding-right: 5px;
transition: all .21s ease-in-out; }
.chatRoomGroupHeader .broadcastInfoContainer .broadcastDetails {
padding-right: 10px;
text-shadow: 0px 2px 2px #0006;
line-height: 16px;
text-align: right;
min-width: 0px;
max-width: 260px; }
.chatRoomGroupHeader .broadcastInfoContainer .broadcastDetails .nowWatching {
color: #9389be;
font-size: 12px; }
.chatRoomGroupHeader .broadcastInfoContainer .broadcastDetails .gameTitle {
color: #dddddd; }
.chatRoomGroupHeader .broadcastInfoContainer .broadcastDetails .broadcastTitle {
color: #999999;
white-space: nowrap;
min-width: 0px;
overflow: hidden;
text-overflow: ellipsis; }
.chatRoomGroupHeader .broadcastInfoContainer .thumbnail {
border: 1px solid #8277b1;
border-radius: 3px;
width: 90px;
height: 46px;
background-color: #777;
transition: all .21s ease-in-out; }
.compactView .chatRoomGroupHeader .broadcastInfoContainer .thumbnail {
width: 89px;
height: 50px; }
.chatRoomGroupHeader .broadcastInfoContainer .thumbnail .thumbnailImg {
width: 100%;
height: 100%;
border-radius: 3px; }
.chatRoomGroupHeader .broadcastInfoContainer:hover .thumbnail,
.chatRoomGroupHeader .broadcastInfoContainer:hover {
border: 1px solid rgba(122, 112, 166, 0.7);
background-color: rgba(130, 119, 177, 0.4); }
.chatRoomGroupHeader .broadcastInfoContainer .actions {
min-width: 14px;
padding-left: 6px; }
.chatRoomGroupHeader .broadcastInfoContainer .actions .SVGIcon_X {
width: 14px;
height: 14px; }
.ChatRoomGroupAvatar {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid #535c68;
background-color: #222;
box-shadow: 1px 2px 18px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
background: radial-gradient(150% 150% at 50% 30%, #4d5663 0%, #454d58 20%, #212329 50%, #1b1d22 100%);
box-shadow: 0 3px 9px rgba(10, 11, 13, 0.5), inset 0 0 9px rgba(0, 0, 0, 0.5); }
.ChatRoomGroupAvatar.Large {
width: 92px;
height: 92px;
border-width: 3px;
box-shadow: 1px 6px 22px rgba(0, 0, 0, 0.3); }
.DirectInvite:not(.VoiceChannelInvite) .leftInviteContainer .ChatRoomGroupAvatar {
margin-top: auto; }
.VoiceChannelInvite .leftInviteContainer .ChatRoomGroupAvatar {
box-shadow: 1px 2px 28px rgba(18, 163, 37, 0.6); }
.VoiceChannelInvite.Inviter .leftInviteContainer .ChatRoomGroupAvatar,
.VoiceChannelInvite.Inviter .leftInviteContainer .ChatRoomGroupAvatar.Small,
.VoiceChannelInvite.GroupAlreadyJoined .leftInviteContainer .ChatRoomGroupAvatar.Small {
width: 38px;
height: 38px; }
.VoiceChannelInvite.Inviter.InviteLink .leftInviteContainer .ChatRoomGroupAvatar,
.VoiceChannelInvite.Inviter.InviteLink .leftInviteContainer .ChatRoomGroupAvatar.Small,
.VoiceChannelInvite.GroupAlreadyJoined.InviteLink .leftInviteContainer .ChatRoomGroupAvatar.Small {
width: 52px;
height: 52px; }
.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom {
width: 48px;
height: 48px;
position: absolute;
left: 70px;
top: 80px; }
.VoiceChannelInvite.GroupAlreadyJoined .leftInviteContainer .SVGIcon_VoiceRoom,
.VoiceChannelInvite.Inviter .leftInviteContainer .SVGIcon_VoiceRoom {
width: 24px;
height: 24px;
position: absolute;
left: 44px;
top: 36px; }
.VoiceChannelInvite.GroupAlreadyJoined.InviteLink .leftInviteContainer .SVGIcon_VoiceRoom,
.VoiceChannelInvite.Inviter.InviteLink .leftInviteContainer .SVGIcon_VoiceRoom {
left: 58px;
top: 37px; }
.InviteExpired.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom {
width: 32px;
height: 32px;
left: 56px;
top: 64px; }
.InviteExpired.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom .Bubble {
stroke: #666;
fill: #222; }
.InviteExpired.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom .AudioLines {
fill: #666; }
.inviteButton {
display: inline-block;
min-height: 32px;
background-color: #15a2fe;
background: linear-gradient(to right, #15a2fe 0%, #3647e9 100%);
user-select: none;
cursor: pointer;
color: white;
border: 0px solid transparent;
border-radius: 3px;
padding: 0px 16px;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
box-shadow: 1px 2px 18px rgba(0, 0, 0, 0.3);
margin-right: 16px;
align-self: flex-start; }
.inviteButton:focus {
outline: none; }
.inviteButton:hover {
background: linear-gradient(to right, #33c0ff 0%, #4a91ff 100%); }
.inviteButton:active {
background: linear-gradient(to right, #018eea 0%, #185feb 100%); }
.inviteButton.inviteButtonJoinVoice {
background: linear-gradient(to right, #12a123 0%, #10ce4f 100%); }
.inviteButton.inviteButtonJoinVoice:hover {
background: linear-gradient(to right, #13ae26 0%, #16f72d 100%); }
.inviteButton.inviteButtonJoinVoice:active {
background: linear-gradient(to right, #0b6416 0%, #0ead1e 100%); }
.inviteButton.inviteButtonJoinGame {
background: linear-gradient(to right, #8bc429 0%, #568f1a 100%); }
.inviteButton.inviteButtonJoinGame:hover {
background: linear-gradient(to right, #9edf2f 0%, #69ad20 100%); }
.inviteButton.inviteButtonJoinGame:active {
background: linear-gradient(to right, #7aac24 0%, #457215 100%); }
.inviteButtonStacked {
margin-top: 10px; }
.ChatMessageInvite .inviteURLContainer {
margin-bottom: 10px;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap; }
.ChatMessageInvite.GroupAlreadyJoined .inviteURLContainer,
.ChatMessageInvite.Inviter .inviteURLContainer {
margin-bottom: 0; }
.ChatMessageInvite .inviteURLContainer .inviteURLAndCopy {
display: flex;
flex: 1;
margin-right: 16px; }
.ChatMessageInvite.Inviter .inviteURLLinkDesc {
align-self: flex-start; }
.ChatMessageInvite.InviteExpired .inviteURLContainer {
margin: 6px 0; }
.ChatMessageInvite.InviteExpired .inviteURLContainer {
pointer-events: none; }
.ChatMessageInvite .inviteURLLinkDesc {
font-size: 12px;
text-transform: uppercase;
margin-right: 2px;
margin-top: 2px;
color: rgba(181, 190, 200, 0.75);
align-self: flex-start; }
.inviteURLContainer .copyInviteLink {
width: 14px;
height: 14px;
margin-left: 4px;
margin-top: 2px;
display: inline-block;
cursor: pointer; }
.ChatMessageInvite .inviteURLLink {
border-radius: 1px;
padding: 0px 4px;
background-color: rgba(173, 174, 175, 0.1);
user-select: text;
white-space: nowrap;
overflow: hidden;
max-width: 200px;
min-width: 190px;
color: rgba(181, 190, 200, 0.5);
font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
border: 1px solid rgba(181, 190, 200, 0.1); }
.ChatMessageInvite.InviteExpired .inviteURLLink {
user-select: none;
color: #e44a2f;
background-color: #4b2529; }
.ChatRoomGroupAvatar_initials {
font-size: 32px;
text-align: center;
padding-top: 5px;
color: #616c7a;
user-select: none;
background: -webkit-linear-gradient(white, #92a2b8);
height: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 1px 2px #0005; }
.ChatRoomGroupAvatar.Large .ChatRoomGroupAvatar_initials {
font-size: 56px;
font-weight: 100; }
.ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
-webkit-background-clip: none;
filter: sepia(1) hue-rotate(170deg) saturate(0.3) brightness(0.9) contrast(1.3);
opacity: 1;
-webkit-text-fill-color: rgba(185, 194, 204, 0.5); }
.chatRoomGroupHeader .ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
padding-top: 4px;
text-shadow: 1px 1px 4px #0008; }
.ChatTabContent.ChatRoom .ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
padding-top: 4px;
text-shadow: 1px 1px 2px #0008; }
.leftInviteContainer .ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
padding-top: 6px;
text-shadow: 1px 1px 8px #0009; }
.Inviter .leftInviteContainer .ChatRoomGroupAvatar.EmojiInitials .ChatRoomGroupAvatar_initials {
padding-top: 4px; }
img.ChatRoomGroupAvatar_Avatar {
width: 100%;
display: block; }
.chatRoomGroupHeaderNameandTag {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
justify-content: center;
user-select: none;
font-weight: 100;
min-width: 100px; }
.chatRoomGroupHeaderTagline {
font-size: 14px;
font-style: italic;
letter-spacing: 1px;
margin-left: 8px;
color: #778494; }
.chatRoomGroupHeaderName {
font-size: 20px;
margin-left: 8px;
color: #cccccc;
text-shadow: 1px 1px 2px #0006;
margin-bottom: -3px;
margin-top: -3px; }
.namedGroup .chatRoomGroupHeaderName {
font-size: 28px; }
.chatRoomGroupHeaderName,
.chatRoomGroupHeaderTagline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.chatRoomGroupSpacer {
display: none; }
.chatRoomGroupControls {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0; }
.chatRoomGroupControls .SVGIcon_VoiceRoom {
transform: scale3d(-1.2, 1.2, 1);
transform-origin: 50% 50%;
stroke: #fff;
margin: 0;
width: 20px;
height: 20px; }
.chatRoomGroupControls .LeaveGroupButton {
margin: 0px; }
.chatRoomGroupControls .SVGIcon_VoiceRoom .ExitDoor,
.chatRoomGroupControls .SVGIcon_VoiceRoom .Arrow {
opacity: 1; }
.chatRoomGroupControls .SVGIcon_VoiceRoom .Microphone,
.chatRoomGroupControls .SVGIcon_VoiceRoom .AudioLines,
.chatRoomGroupControls .SVGIcon_VoiceRoom .Bubble {
opacity: 0; }
.chatRoomVoiceChannel {
width: 194px;
position: relative;
padding-bottom: 3px;
background-color: transparent;
transition: all .4s ease-in-out;
border-radius: 0px;
margin: 2px 4px 4px 2px;
/*box-shadow: 1px 2px 18px rgba( 0, 0, 0, .5 ) inset, 1px 2px 0px rgba( 0, 0, 0, 0 );*/
border: 0.5px solid rgba(55, 71, 82, 0.5);
/*cursor: pointer;*/ }
.ChatRoomGroupDialog_contents:not(.InsetWindowOpen) .chatRoomVoiceChannel {
overflow: hidden; }
.chatRoomVoiceChannel.ActiveVoiceChannel {
width: 200px; }
.ChatRoomListGroupItemChatRooms .chatRoomVoiceChannel {
margin-right: 6px; }
.ChatRoomListGroupItemChatRooms .chatRoomVoiceChannel.ActiveVoiceChannel {
box-shadow: 0px 2px 12px #000a;
border-radius: 3px;
overflow: hidden; }
.ChatRoomListItem.chatRoomVoiceChannel {
margin-left: 42px; }
.chatRoomVoiceChannel:not(.ActiveVoiceChannel):hover {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.83) inset, 1px 2px 0px rgba(0, 0, 0, 0);
background-color: #17191d; }
.ChatRoomListGroupItemChatRooms .chatRoomVoiceChannel:not(.ActiveVoiceChannel):hover {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.83) inset, 1px 2px 0px rgba(0, 0, 0, 0);
border: 0.5px solid rgba(155, 171, 182, 0.5);
background-color: rgba(23, 25, 29, 0.5); }
.chatRoomVoiceChannelsGroup .chatRoomVoiceChannel.ActiveVoiceChannel {
margin: 10px 0px 12px 0px; }
.chatRoomVoiceChannel.ActiveVoiceChannel {
background-color: #2e3c44;
background-color: #3a3e46;
border: 0px solid transparent;
/*border-top: 1px solid rgb( 95, 111, 121 );
border-bottom: 1px solid rgb( 95, 111, 121 );*/
/*box-shadow: 1px 2px 0px rgba( 0, 0, 0, 0 ) inset, 4px 12px 38px rgba( 0, 0, 0, .6 );*/ }
.VoiceControlPanelButton.chatPinRoom {
width: 32px;
margin-top: -2px;
margin-right: 0px;
cursor: pointer; }
.VoiceControlPanelButton.chatPinRoom .SVGIcon_Button {
transform: translateX(10px) translateY(6px); }
.VoiceControlPanelButton.chatPinRoom:hover {
background-color: transparent; }
.VoiceControlPanelButton.chatPinRoom:hover .SVGIcon_Button {
fill: #9198a1;
fill: white; }
.chatRoomVoiceChannel .chatRoomTextChannel {
opacity: 0;
height: 0px;
transition-property: height, opacity, transform;
transition-duration: .14s;
transition-timing-function: ease-in-out; }
.chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomTextChannel {
cursor: pointer;
opacity: 1;
height: 28px; }
.VoiceChannelParticipants .friend {
filter: brightness(0.7); }
.ActiveVoiceChannel .VoiceChannelParticipants .friend {
filter: brightness(1); }
.voiceStatusIconsContainer {
display: flex;
flex-direction: row;
order: 6;
flex-shrink: 0;
margin-right: 4px; }
.MinimizeMemberList .VoiceChannelParticipants.CompactFriendsList {
padding-left: 12px; }
.MinimizeMemberList .VoiceChannelParticipants .friend {
margin: 0;
padding: 0;
margin-bottom: 4px; }
.ChatRoomListGroupItemChatRooms .voiceStatusIconsContainer {
display: none; }
.no_mic_for_session .voicestatusIcon.voiceStatusMic,
.output_muted_self .voicestatusIcon.voiceStatusOutput,
.output_muted_remotely .voicestatusIcon.voiceStatusOutput,
.mic_muted_self .voicestatusIcon.voiceStatusMic,
.mic_muted_remotely .voicestatusIcon.voiceStatusMic {
opacity: 0.4; }
.no_mic_for_session .voicestatusIcon.voiceStatusMic .SVGIcon_Button {
fill: #ff6f43; }
.no_mic_for_session .voicestatusIcon.voiceStatusMic .SVGIcon_Button .MicStrike {
stroke: #ff6f43; }
.voicestatusIcon {
opacity: 0;
width: 20px;
height: 20px;
transition: all .21s ease-in-out; }
.voicestatusIcon .SVGIcon_Button {
width: 16px;
height: 16px;
margin-top: 4px; }
.avatarHolder .SVGIcon_Volume {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000a; }
.avatarHolder .SVGIcon_Volume .SoundWaves {
display: none; }
.avatarHolder .SVGIcon_Volume .Speaker path {
fill: #f54; }
.avatarHolder .SVGIcon_Volume .SoundX line {
stroke: #f54;
stroke-width: 18px; }
.chatRoomChannelGroups {
min-height: 0; }
.chatRoomVoiceChannelsGroup,
.chatRoomTextChannelsGroup {
color: #686e73; }
.chatRoomVoiceChannelsGroup {
margin-top: 12px;
padding-left: 0px; }
.defaultChatOnly .chatRoomVoiceChannelsGroup {
margin-top: 0px; }
.ChannelTypeTitle {
color: #7a8d99;
display: flex;
flex-direction: row;
justify-content: space-between;
user-select: none;
padding: 6px 4px 4px 12px;
line-height: 20px;
white-space: nowrap;
transition: all .4s ease-in-out; }
.ChatRoomAddRoomBtn {
position: absolute;
opacity: 0;
background-color: transparent;
cursor: pointer;
color: blue;
transition-property: opacity, transform, flex, margin;
transition-duration: .34s, .4s, .4s, .4s;
transition-timing-function: ease-in-out; }
.ChatRoomAddRoomBtn.NoPermission {
opacity: .2;
cursor: default; }
.chatRoomGroupNavColumn.chatRoomGroupNavCollapsed .ChatRoomAddRoomBtn {
opacity: 1; }
.GroupListChatRoomAddRoomBtn.ChatRoomAddRoomBtn {
display: flex;
flex-direction: row;
height: 0px;
opacity: 0;
bottom: 4px;
right: 6px;
transition: all .21s ease-in-out;
margin: 0px;
padding: 0px; }
.expanded .GroupListChatRoomAddRoomBtn.ChatRoomAddRoomBtn {
height: 16px;
opacity: 1; }
.ChatRoomAddRoomBtn .SVGIcon_PlusCircle {
stroke: #7a8d99; }
.ChatRoomAddRoomBtn:hover:not(.NoPermission) .SVGIcon_PlusCircle {
filter: brightness(2); }
.ChatRoomAddRoomBtn .addRoomBtnText {
transition: color .21s ease-in-out;
color: grey;
margin-left: 4px;
font-size: 14px;
line-height: 20px; }
.ChatRoomAddRoomBtn:hover .addRoomBtnText {
color: white; }
.ChatRoomAddRoomBtn:hover {
color: white; }
.chatRoomDirectMessageContainer {
display: flex;
flex-direction: row;
margin-left: 22px; }
.chatRoomDirectMessagesTitle {
display: flex;
flex-direction: row; }
.chatRoomTextChannelUnreadNumber {
border-radius: 50%;
background-color: #b26513;
width: 16px;
height: 16px;
text-align: center;
color: #faf4b0;
line-height: 16px;
font-size: 12px;
opacity: 0;
margin-right: 8px; }
.chatRoomVoiceChannelName,
.chatRoomTextChannel,
.chatRoomDirectMessageEntry {
position: relative;
padding-left: 12px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: all .32s ease-in-out;
user-select: none; }
.chatRoomTextChannel:hover,
.chatRoomVoiceChannel:hover .chatRoomVoiceChannelName,
.chatRoomTextChannel:hover .chatRoomTextChannel {
color: white; }
.chatRoomVoiceChannel:not(.ActiveVoiceChannel):hover .SVGIcon_VoiceRoom .Microphone,
.chatRoomVoiceChannel:not(.ActiveVoiceChannel):hover .SVGIcon_VoiceRoom .AudioLines {
fill: white; }
.chatRoomTextChannel:hover .SVGIcon_TextRoom .TextLines {
stroke: white; }
.chatRoomVoiceChannel .chatRoomTextChannel,
.chatRoomVoiceChannelName,
.chatRoomTextChannelName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
transition: all .4s ease-in-out; }
.chatRoomVoiceChannelName.unsavedVoiceChannel {
font-style: italic; }
.chatRoomTextChannel {
display: flex;
flex-direction: row;
cursor: pointer; }
.chatRoomVoiceChannel .chatRoomTextChannel {
margin-left: 28px; }
.chatRoomDirectMessageEntry > span {
margin-right: 6px; }
.DirectMessageHasUnread .chatRoomTextChannelUnreadNumber {
opacity: 1; }
.chatRoomTextChannelIcon {
position: relative;
z-index: 2;
margin-top: 2px;
margin-bottom: -1px;
margin-left: 2px; }
.chatRoomVoiceChannel .chatRoomTextChannelIcon {
margin: 0px; }
.chatRoomVoiceChannelIcon {
margin-left: 10px;
margin-right: -12px;
z-index: 1;
transition: all .4s ease-in-out;
cursor: default; }
.chatRoomVoiceChannelIconGlow {
width: 94px;
height: 64px;
overflow: visible;
position: absolute;
z-index: 0;
opacity: 0;
background: radial-gradient(ellipse farthest-corner at 24px 10px, rgba(122, 245, 91, 0.5) 0%, rgba(122, 245, 91, 0.26) 25%, rgba(122, 245, 91, 0.22) 34%, rgba(122, 245, 91, 0.1) 50%, rgba(122, 245, 91, 0) 70%);
transition: opacity .65s ease-in-out, transform .65s ease-in-out;
pointer-events: none; }
.ActiveVoiceChannel .chatRoomVoiceChannelIconGlow {
opacity: 1; }
.SVGIcon_Pin {
opacity: 0; }
.ActiveVoiceChannel .SVGIcon_Pin {
opacity: 1; }
.SVGIcon_Pin,
.SVGIcon_Headphones,
.SVGIcon_Microphone {
width: 20px;
height: 20px; }
.chatTab .SVGIcon_Microphone {
margin-left: 2px;
margin-top: 6px; }
.SVGIcon_TextChat {
width: 26px;
height: 26px;
fill: #686e73;
margin-right: 4px; }
.SVGIcon_TextRoom,
.SVGIcon_VoiceRoom {
width: 24px;
height: 24px;
margin-right: 4px;
fill: rgba(0, 0, 0, 0);
stroke: rgba(104, 110, 115, 0.4); }
.SVGIcon_PlusCircle {
width: 20px;
height: 20px;
fill: #0000dc;
stroke: #a5acb3; }
.SVGIcon_PlusCircle circle,
.SVGIcon_PlusCircle line {
stroke-width: 16px; }
.SVGIcon_VoiceRoom .Microphone,
.SVGIcon_VoiceRoom .AudioLines {
fill: #686e73;
stroke: transparent;
transition: fill .21s ease-in-out, opacity .21s ease-in-out, transform .21s ease-in-out; }
.ChatRoomLeave .Bubble,
.ChatRoomLeave .Microphone,
.VoiceToggle.Active .SVGIcon_VoiceRoom .Microphone,
.VoiceControlPanelButton.chatEndVoiceChat .SVGIcon_VoiceRoom .Microphone,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom .Bubble,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom .AudioLines {
opacity: 0; }
.ChatRoomLeave .ExitDoor,
.ChatRoomLeave .Arrow,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom .ExitDoor,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom .Arrow {
opacity: 1;
stroke-width: 2px;
stroke: #fff; }
.CloseActiveVoiceWindowConfirmation .ExitDoor,
.CloseActiveVoiceWindowConfirmation .Arrow,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom .ExitDoor,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom .Arrow {
opacity: 1;
stroke: #c8f1c2; }
.ChatRoomLeave .ExitDoor,
.ChatRoomLeave .Arrow polyline {
stroke: #c44848; }
.ChatRoomLeave:hover .ExitDoor,
.ChatRoomLeave:hover .Arrow polyline {
stroke: #fd4525; }
.ChatRoomLeave .SVGIcon_VoiceRoom {
width: 36px;
height: 36px;
margin-bottom: -14px;
margin-right: -2px;
margin-left: -17px; }
.CloseActiveVoiceWindowConfirmation .activeVoiceControls .SVGIcon_VoiceRoom,
.friendListHeaderContainer .activeVoiceControls .SVGIcon_VoiceRoom {
width: 36px;
height: 36px; }
.SVGIcon_VoiceRoom .ExitDoor,
.SVGIcon_VoiceRoom .Arrow {
transition: opacity .21s ease-in-out, transform .21s ease-out; }
.friendListHeaderContainer .activeVoiceControls .SVGIcon_Headphones {
fill: #c8f1c2; }
.friendListHeaderContainer .activeVoiceControls {
overflow: hidden;
height: 44px; }
.VoiceControlPanelButton:hover .SVGIcon_VoiceRoom .Arrow {
stroke: #fff; }
.ChatRoomLeave:hover .Arrow,
.VoiceToggle.Active:hover .SVGIcon_VoiceRoom .Arrow,
.activeVoiceControls .VoiceControlPanelButton:hover .SVGIcon_VoiceRoom .Arrow {
transform: translateX(-4px); }
.ActiveVoiceChannel .activeVoiceControls .VoiceControlPanelButton .SVGIcon_VoiceRoom {
transform: scale3d(1.6, 1.6, 1) translateY(0px) translateX(4px);
transform-origin: 50% 50%; }
.VoiceControlPanelButton:hover {
background-color: rgba(97, 253, 151, 0.3); }
.ChatMessageEntryVoice.Active .VoiceControlPanelButton:active,
.VoiceControlPanelButton:active {
background-color: rgba(97, 253, 151, 0.5); }
.VoiceToggle.Active .SVGIcon_VoiceRoom .ExitDoor,
.VoiceToggle.Active .SVGIcon_VoiceRoom .Arrow {
opacity: 1; }
.SVGIcon_VoiceRoom .Bubble {
fill: rgba(200, 241, 194, 0);
transition: fill .15s ease-in-out;
transition-delay: 0s; }
.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom .Bubble,
.OneOnOneVoiceRoomControls.OneOnOneVoiceActive .SVGIcon_VoiceRoom .Bubble,
.chatRoomVoiceChannel.ActiveVoiceChannel .SVGIcon_VoiceRoom .Bubble,
.VoiceToggle.Active .SVGIcon_VoiceRoom .Bubble {
fill: #c8f1c2;
transition-delay: 0s; }
.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom .Bubble {
stroke: #12a325;
stroke: black; }
.VoiceChannelInvite .leftInviteContainer .SVGIcon_VoiceRoom .AudioLines {
fill: black; }
.VoiceToggle.Active .VoiceToggleIconCtn .SVGIcon_VoiceRoom .AudioLines {
fill: white;
opacity: 0;
transform: translateX(200px); }
.VoiceToggleIconCtn .SVGIcon_VoiceRoom {
width: 100%;
height: 100%;
margin: 0px;
stroke: #8492a4; }
.Active .VoiceToggle:not(.Disabled):hover .SVGIcon_VoiceRoom {
stroke: #000; }
.VoiceToggle:not(.Disabled):hover .SVGIcon_VoiceRoom {
stroke: #fff; }
.VoiceToggle:not(.Disabled):hover .SVGIcon_VoiceRoom .Microphone,
.VoiceToggle:not(.Disabled):hover .SVGIcon_VoiceRoom .AudioLines {
fill: #fff; }
.VoiceToggle.Disabled {
cursor: default; }
.VoiceToggleIconCtn .SVGIcon_VoiceRoom .AudioLines {
fill: #8492a4; }
.chatSubmitButton:not(.disabled):hover .SVGIcon_VoiceRoom {
fill: rgba(0, 0, 0, 0);
stroke: #f5ffd7; }
.VoiceToggleIconCtn .SVGIcon_VoiceRoom .AudioLines {
width: 100%;
height: 100%;
margin: 0px; }
.chatSubmitButton:not(.disabled):hover .SVGIcon_VoiceRoom .AudioLines {
fill: #f5ffd7; }
.Active .VoiceToggleIconCtn .SVGIcon_VoiceRoom {
fill: #c8f1c2;
stroke: black; }
.Active .VoiceToggleIconCtn .SVGIcon_VoiceRoom .AudioLines {
fill: black; }
.Active.chatSubmitButton:not(.disabled):hover .SVGIcon_VoiceRoom {
fill: white;
stroke: black; }
.Active.chatSubmitButton:not(.disabled):hover .SVGIcon_VoiceRoom .AudioLines {
fill: black; }
.SVGIcon_TextRoom .TextLines {
stroke: #686e73;
stroke-width: 13px; }
.ActiveVoiceChannel .SVGIcon_VoiceRoom {
stroke: #000;
fill: #c8f1c2; }
.ActiveVoiceChannel .activeVoiceControls .SVGIcon_VoiceRoom {
stroke: #fff;
fill: transparent; }
.CloseActiveVoiceWindowConfirmation .SVGIcon_VoiceRoom .Bubble,
.ActiveVoiceChannel .activeVoiceControls .SVGIcon_VoiceRoom .Bubble,
.ActiveVoiceChannel .activeVoiceControls .SVGIcon_VoiceRoom .AudioLines {
opacity: 0; }
.ActiveVoiceChannel .activeVoiceControls .SVGIcon_VoiceRoom .ExitDoor,
.ActiveVoiceChannel .activeVoiceControls .SVGIcon_VoiceRoom .Arrow {
opacity: 1; }
.ActiveVoiceChannel .SVGIcon_VoiceRoom .Microphone,
.ActiveVoiceChannel .SVGIcon_VoiceRoom .AudioLines {
fill: #000; }
.chatTab.active.VoiceActive .SVGIcon_Microphone_On {
fill: white;
margin-top: 4px; }
.chatTab.VoiceActive .SVGIcon_Microphone_On {
fill: #a0ff74; }
.ActiveVoiceChannel .SVGIcon_Microphone_On {
fill: white;
stroke: white; }
.ActiveTextChannel .SVGIcon_TextRoom {
fill: #97b0c0;
stroke: black; }
.chatRoomVoiceChannel .SVGIcon_TextRoom .TextLines,
.chatRoomVoiceChannel .SVGIcon_TextRoom .ScratchPad path,
.chatRoomVoiceChannel .SVGIcon_TextRoom .ScratchPad line {
stroke-width: 10px;
stroke: #8f9e9c; }
.chatRoomVoiceChannel .chatRoomTextChannel:hover .ScratchPad path,
.chatRoomVoiceChannel .chatRoomTextChannel:hover .ScratchPad line {
stroke: #fff; }
.ActiveTextChannel .SVGIcon_TextRoom .TextLines {
stroke: white; }
.chatRoomVoiceChannel .ActiveTextChannel .SVGIcon_TextRoom .TextLines {
stroke: #8f9e9c;
z-index: 2; }
.chatRoomVoiceChannel .ActiveTextChannel .ScratchPad path {
fill: #fff; }
.SVGIcon_TextRoom .Bubble {
opacity: 0; }
.UnreadMessageIconPip {
position: absolute;
top: 12px;
left: -4px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #b26513;
opacity: 0;
font-size: 0;
transition-property: width, height, font-size, transform, opacity, background-color;
transition-duration: .3s;
transition-timing-function: ease-in-out; }
.DirectMessageIconHasUnread .UnreadMessageIconPip {
opacity: 1; }
.HasUnreadMention .UnreadMessageIconPip {
width: 9.5px;
height: 11px;
background-color: #925310;
transform: translateY(-4px) translateX(-5.5px);
font-size: 8px;
padding-left: 1.5px;
color: #ffcc5f; }
.chatRoomVoiceChannelName,
.chatRoomTextChannelName,
.chatRoomGroupName {
align-self: center;
margin-top: -2px;
margin-right: 6px; }
.chatRoomGroupNavColumn .chatRoomGroupName {
white-space: nowrap;
text-overflow: ellipsis;
flex-grow: 1;
display: block;
overflow: hidden; }
.chatRoomVoiceChannel .chatRoomTextChannelName {
padding-top: 6px;
padding-left: 104px;
position: absolute;
height: 22px;
left: 12px;
right: 0;
z-index: 0;
pointer-events: none;
/*temp values below this line, do not erase above*/
left: 0px;
padding-left: 68px; }
.chatRoomVoiceChannel .chatRoomTextChannelName {
display: none; }
.chatRoomVoiceChannel .chatRoomTextChannel {
min-width: 48px;
position: absolute;
bottom: 3px;
right: 48px;
margin: 0px;
border: 0px;
padding: 0px;
border-left: 0.5px solid #2e3c44; }
.chatRoomVoiceChannel .chatRoomTextChannel .chatRoomTextChannelIcon {
margin: auto; }
.chatRoomVoiceChannel .chatRoomTextChannel .chatRoomTextChannelIcon .SVGIcon_TextRoom {
margin: 0px;
margin-top: 2px;
width: 26px;
height: 26px; }
.chatRoomVoiceChannel .chatRoomTextChannel:hover {
background-color: rgba(97, 253, 151, 0.3); }
.ActiveTextChannel .chatRoomGroupName,
.ActiveTextChannel .chatRoomTextChannelName {
color: white; }
.chatRoomTextChannel.ActiveTextChannel {
background-color: #2e3c44;
background-color: #3a3e46; }
.chatRoomVoiceChannel .chatRoomTextChannel.ActiveTextChannel {
background-color: transparent;
border-top: 0px solid transparent;
border-bottom: 0px solid transparent; }
.chatRoomVoiceChannel .ActiveTextChannel .chatRoomTextChannelName {
background-color: #3a484f;
background: linear-gradient(to left, #2e2f35 0%, #2e2f35 22px, #3a484f 44px);
border-top: 1px solid #5f6f79;
border-bottom: 1px solid #5f6f79;
pointer-events: initial; }
.chatRoomGroupStats {
display: none;
flex-direction: row-reverse;
text-align: right;
align-self: flex-end;
user-select: none; }
.namedGroup .chatRoomGroupStats {
display: flex; }
.statMemberStat {
display: flex;
flex-direction: row;
margin-right: 20px;
font-size: 12px; }
.statMemberStat.statMembersTotal {
margin-right: 5px;
text-transform: uppercase;
letter-spacing: 1px; }
.statCircle {
border-radius: 50%;
width: 4px;
height: 4px;
background-color: white;
margin-right: 6px;
align-self: center; }
.statMembersInGame .statCircle {
background-color: #a1f410; }
.statMembersOnline .statCircle {
background-color: #6dcff6; }
.statMembersInGame {
color: rgba(161, 244, 16, 0.7); }
.statMembersOnline {
color: rgba(109, 207, 246, 0.7); }
.RenameChatRoomInline input[type="text"] {
font-size: 14px;
align-self: center;
margin-top: 2px;
margin-right: 6px;
color: white;
font-family: "Motiva Sans", Arial, Helvetica, sans-serif; }
.RenameChatRoomInline {
width: calc( 100% - 38px);
margin-left: -6px; }
.RenameChatRoomInline input {
width: 100%;
height: 22px;
background-color: #aaa1;
padding-left: 6px;
outline: none;
border: 0px solid transparent;
box-shadow: inset 1px 1px 6px #000000;
border-radius: 3px; }
.chatRoomVoiceChannelNameContainer .RenameChatRoomInline {
width: calc( 100% - 42px);
margin-top: -3px;
margin-left: 6px; }
.chatRoomVoiceChannelNameContainer {
padding-top: 2px;
position: relative;
display: flex;
flex-direction: row;
height: 24px; }
.chatRoomVoiceChannel .VoiceControlPanelButton.ToggleMicrophoneButton,
.chatRoomVoiceChannel .VoiceControlPanelButton.ToggleVoiceOutputButton,
.chatRoomVoiceChannelNameContainer .VoiceControlPanelButton {
display: none; }
.chatRoomVoiceChannel.ActiveVoiceChannel .chatRoomVoiceChannelNameContainer .VoiceControlPanelButton {
display: block; }
.chatRoomVoiceChannel.ActiveVoiceChannel .activeVoiceControls {
background: #0004;
border: none;
padding-left: 0px;
margin-top: 4px; }
.chatRoomVoiceChannel:not(.ActiveVoiceChannel) .activeVoiceControls,
.chatRoomVoiceChannel:not(.ActiveVoiceChannel) .connectionStatusLabels {
display: none; }
.chatRoomTextChannelName.IsCommonsChannel {
font-style: italic;
font-weight: bold;
color: #7c8287;
flex-grow: 16; }
.chatRoomTextChannel:hover .chatRoomTextChannelName.IsCommonsChannel {
color: #dee9f3; }
.ActiveTextChannel .chatRoomTextChannelName.IsCommonsChannel,
.ActiveVoiceChannel .chatRoomVoiceChannelName {
color: white; }
.chatRoomGroupHBar {
width: calc( 100% - 32px);
height: 1px;
background-color: rgba(102, 113, 129, 0.555);
margin-top: 22px;
margin-left: 16px; }
/* workshop controls */
.workshopItemControls {
position: relative;
padding: 6px 0 0 0;
line-height: 40px;
display: flex;
flex-direction: row; }
.workshopItemControlCtn .general_btn {
float: none;
display: inline-block;
vertical-align: middle; }
.general_btn {
display: block;
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 8px;
margin-right: 5px;
border-radius: 3px;
-moz-border-radius: 3px;
cursor: pointer;
color: #939393;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.general_btn:hover {
color: #AAAAAA; }
a.general_btn {
color: #939393;
border-bottom: none;
padding-bottom: 5px; }
a.general_btn:hover {
text-decoration: none;
color: #AAAAAA;
border-bottom: none; }
.general_btn.inline {
display: inline-block; }
.general_btn.voteUp {
height: 30px;
padding: 0px;
padding-left: 32px;
padding-right: 12px;
background-image: url("../../images/sharedfiles/rate_ico_up_tiled.png?v=1");
background-position: 8px 0px;
background-repeat: no-repeat;
display: inline-block;
line-height: 30px; }
.general_btn.voteUp.toggled {
background-position: 8px -60px; }
.general_btn.voteUp:hover {
background-position: 8px -30px;
text-decoration: none;
background-color: rgba(102, 192, 244, 0.4);
color: #ffffff; }
.general_btn.voteDown {
height: 30px;
width: 32px;
padding: 0px;
background-image: url("../../images/sharedfiles/rate_ico_dn_tiled.png?v=1");
background-position: 8px 0px;
background-repeat: no-repeat;
display: inline-block;
line-height: 30px; }
.general_btn.voteDown.toggled {
background-position: 8px -60px; }
.general_btn.voteDown:hover {
background-position: 8px -30px;
text-decoration: none;
background-color: rgba(102, 192, 244, 0.4);
color: #ffffff; }
.SteamPublishedFile .upvoteCount {
background-image: url("../../images/sharedfiles/rate_ico_up_tiled.png?v=1");
background-position: 8px 0px;
background-repeat: no-repeat;
padding-left: 28px;
padding-right: 5px;
padding-top: 8px;
margin-right: 4px; }
.SteamPublishedFile .commentCount {
background-image: url("../../shared/images/comment_quoteicon.png");
background-repeat: no-repeat;
padding-left: 24px;
padding-right: 5px; }
.EconItemOpenGraph_GameInfo {
display: flex;
margin-top: 0.5em; }
.EconItemOpenGraph_GameInfo img {
margin-right: 0.5em; }
.EconItemOpenGraph_GameInfo > div {
margin: 0 !important;
font-size: 82%;
line-height: normal; }
.friendlistListContainer:focus,
.chatHistoryScroll:focus {
/* TODO: indicate focus somehow? */
outline: none; }
.FriendPicker {
margin-bottom: 22px;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
min-height: 0; }
.IsDropInvite .DropTarget {
padding-top: 32px; }
.chatModalCover.inviteDrop.DropGroupToInviteFriend .ChatRoomGroupOGGAvatar.Large,
.chatModalCover.inviteDrop.DropGroupToInviteFriend .ChatRoomMultiFriendAvatar.Large,
.chatModalCover.inviteDrop.DropGroupToInviteFriend .ChatRoomGroupAvatar.Large {
width: 145px;
height: 145px;
margin: auto;
margin-top: 32px;
box-shadow: 0px 8px 24px 2px black; }
.chatModalCover.inviteDrop.DropGroupToInviteFriend .ChatRoomGroupOGGAvatar.Large {
width: 200px;
height: 108px;
margin-top: 64px;
background-color: #0008; }
.chatModalCover.inviteDrop.DropGroupToInviteFriend .ChatRoomMultiFriendMore.MultiAvatar {
font-size: 26px;
line-height: 60px; }
.chatModalCover.inviteDrop.DropGroupToInviteFriend .ChatRoomGroupAvatar.Large .ChatRoomGroupAvatar_initials {
padding-top: 58px;
font-size: 86px; }
.chatModalCover.inviteDrop.DropGroupToInviteFriend .dropGroupName {
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #4b515c;
color: white;
font-size: 18px;
letter-spacing: 1px;
padding: 4px 12px;
border-radius: 4px;
margin-top: -24px;
z-index: 400;
border: 1px solid #535c68;
position: relative;
box-shadow: 0px 4px 24px 2px black;
max-width: 172px;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
overflow: hidden;
display: inline-block; }
.dropGroupInviteDialog {
height: 138px; }
.dropGroupInviteDialog.groupInviteHeight {
height: 178px; }
.dropGroupInviteDialog .highlight {
color: white; }
.dropGroupInviteDialog .dropGroupInviteDialog_Desc {
margin-bottom: 16px; }
.dropGroupInviteDialog .dropGroupInviteDialog_Graphic {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
background-color: #0005;
padding: 12px 20%;
border-radius: 8px;
box-shadow: inset 1px 1px 8px #00000075;
position: relative; }
.dropGroupInviteDialog .dropGroupInviteDialog_Graphic .ChatRoomGroupOGGAvatar.Large {
width: 176px;
height: 82px; }
.dropGroupInviteDialog .dropGroupInviteDialog_Graphic .ChatRoomMultiFriendAvatar,
.dropGroupInviteDialog .dropGroupInviteDialog_Graphic .ChatRoomGroupAvatar {
width: 72px;
height: 72px; }
.dropGroupInviteDialog .dropGroupInviteDialog_Graphic .ChatRoomGroupAvatar .ChatRoomGroupAvatar_initials {
padding-top: 10px;
font-size: 38px; }
.dropGroupInviteDialog .dropGroupInviteDialog_Graphic .ChatRoomMultiFriendMore.MultiAvatar {
font-size: 16px;
line-height: 32px; }
.dropGroupInviteDialog .dropGroupInviteDialog_Friend {
width: 48px;
height: 48px;
z-index: 2;
flex-shrink: 0;
margin: 0 6px; }
.dropGroupInviteDialog .dropGroupInviteDialog_Friend img {
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid black;
box-shadow: 0px 3px 10px black; }
.dropGroupInviteDialog .staticX {
width: 64px;
height: 48px; }
.dropGroupInviteDialog .SVGIcon_VoiceRoom {
width: 72px;
height: 72px; }
.dropGroupInviteDialog .SVGIcon_VoiceRoom .Bubble {
stroke: black;
fill: #c8f1c2; }
.dropGroupInviteDialog .SVGIcon_VoiceRoom .Microphone {
stroke-width: 0;
fill: black; }
.dropGroupInviteDialog .staticX line {
stroke: red;
stroke-width: 22px; }
.dropGroupInviteDialog .movingArrow {
width: 64px;
height: 48px;
animation-name: dropGroupInviteLoop;
animation-duration: 1.25s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
.dropGroupInviteDialog .movingArrow polyline {
stroke: #3366ff;
stroke-width: 16px; }
@keyframes dropGroupInviteLoop {
0% {
transform: translateX(-6px); }
50% {
transform: translateX(7px); }
100% {
transform: translateX(-6px); } }
.dropGroupInviteDialog .addMoreFriendsButton {
display: flex;
border-radius: 4px;
height: 16px;
text-transform: uppercase;
font-size: 12px;
position: absolute;
right: 4px;
bottom: -22px;
z-index: 2;
text-align: center;
align-items: center;
cursor: pointer; }
.dropGroupInviteDialog .ExpandArrow {
transition-duration: 0s;
width: 13px;
height: 13px;
transform: rotate(0deg);
align-self: center;
margin: 0;
margin-top: -3px;
margin-left: 3px; }
.dropGroupInviteDialog .addMoreFriendsButton:hover {
color: white; }
.dropGroupInviteDialog .addMoreFriendsButton:hover .ExpandArrow {
opacity: 1; }
.FriendPicker_ChosenFriend {
margin: 4px;
border-radius: 4px;
background: #1f8dfe;
padding: 0 8px;
display: flex;
flex-direction: row;
line-height: 18px;
cursor: pointer;
user-select: none; }
.FriendPicker_ChosenFriend span {
color: #dfe3e6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 107px; }
.FriendPicker_ChosenFriend:hover span {
color: white; }
.FriendPicker_ChosenFriend .SVGIcon_X_Line {
width: 10px;
height: 10px;
margin-left: 6px;
margin-right: -4px;
pointer-events: none;
flex-grow: 1;
flex-shrink: 0;
align-self: center; }
.FriendPicker_ChosenFriend .SVGIcon_X_Line line {
stroke-width: 32px;
stroke: #6db5fe; }
.FriendPicker_ChosenFriend:hover .SVGIcon_X_Line line {
stroke: white; }
.FriendPicker_ChosenFriend.FriendPicker_InvitedFriendNotInBeta {
background: rgba(152, 152, 152, 0.5);
padding-left: 0; }
.FriendPicker_ChosenFriend.FriendPicker_InvitedFriendNotInBeta .SVGIcon_X_Line line {
stroke: #b7b7b7; }
.FriendPicker_ChosenFriend.FriendPicker_InvitedFriendNotInBeta:hover .SVGIcon_X_Line line {
stroke: white; }
.FriendPicker_ChosenFriend.FriendPicker_InvitedFriendNotInBeta span {
color: #b7b7b7; }
.FriendPicker_InvitedFriend_NotInBetaWarning {
background: #c34a48;
color: white;
border-radius: 50%;
margin-top: 0px;
margin-right: 4px;
line-height: 16px;
width: 16px;
text-align: center;
float: left; }
.FriendPicker_ChosenFriend.FriendPicker_InvitedFriendNotInBeta .FriendPicker_InvitedFriend_NotInBetaWarning {
width: 14px;
height: 14px;
margin: 2px 4px;
font-size: 10px;
line-height: 14px; }
.FriendPicker_ChosenFriend.FriendPicker_InvitedFriendNotInBeta .FriendPicker_ChosenFriend.SVGIcon_X_Line line {
stroke: #b7b7b7; }
.CreateChat_NonBetaFriendsWarning {
transition: all 0.3s;
max-height: 0;
opacity: 0;
overflow: hidden;
margin-bottom: 0; }
.CreateChat_NonBetaFriendsWarning .FriendPicker_InvitedFriend_NotInBetaWarning {
margin-right: 8px;
margin-top: 0; }
.CreateChat_NonBetaFriendsWarning.Active {
max-height: 48px;
opacity: 1.0;
margin-bottom: 16px;
background-color: rgba(195, 74, 72, 0.2);
padding: 10px;
font-size: 14px;
color: #b7b7b7;
line-height: 19px;
border: 1px solid rgba(195, 74, 72, 0.2); }
.FriendPicker_Suggestions {
height: 250px;
min-height: 64px;
overflow-y: hidden;
overflow-x: hidden;
background-color: #0004;
position: relative;
user-select: none; }
.FriendPicker_Suggestions_List {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 6px;
padding-right: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column; }
.ChatRoomGroupInviteDialog .FriendPicker {
height: calc( 100% - 16px);
margin-bottom: 0; }
.ChatRoomGroupInviteDialog .DropTarget {
flex: 1;
min-height: 0; }
.FriendPicker_SuggestedFriend.Focus {
background: #30343c; }
.FriendPicker_SuggestedFriend {
cursor: pointer; }
.FriendPicker .DialogListBuilderInput_List {
max-height: 78px;
overflow-y: auto; }
.FriendPicker .DialogListBuilderInput .DialogListBuilderInput_Input {
max-width: 560px;
min-width: 40px;
flex-grow: 1; }
.FriendPicker.FriendPicker_FriendsChosen .DialogListBuilderInput .DialogListBuilderInput_Input {
min-width: 20px;
max-width: 560px;
flex-grow: 1;
margin-left: 4px; }
.ClanListEntry {
color: #898989;
/*border-radius: 2px;*/
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
transition-property: box-shadow, background-color;
transition-duration: 0.04s;
transition-timing-function: ease-in-out;
padding: 8px; }
.ClanListEntry_Avatar {
float: left;
height: 36px;
width: 36px;
margin-right: 8px; }
.ClanListEntry_Avatar > img {
width: 100%;
display: block; }
.ClanListEntry_Name {
overflow: hidden;
white-space: nowrap;
font-size: 16px; }
.ClanListEntry_Status {
overflow: hidden;
white-space: nowrap;
font-size: 12px; }
.EmoticonSelector_Toggle {
margin-right: 8px;
border-radius: 3px;
cursor: pointer;
padding: 4px 6px; }
.EmoticonSelector_Toggle.Active {
background: #777777; }
.EmoticonSuggestion_Emoticon {
position: relative;
display: inline-block;
margin-right: 8px;
padding: 0 4px; }
.SlashCommandSuggestion {
margin-left: -14px; }
.SlashCommandSuggestion_SlashCommand {
font-weight: bold; }
.SlashCommandSuggestion_SlashCommandDescription {
color: #9ca4a7; }
/* this is all in friendmenu.tsx, even the stuff with super generic names */
.currentUserContextMenu .contextMenuSectionContent .contextMenuItem {
border-color: transparent; }
.contextMenuSectionContent {
display: flex;
flex-direction: column; }
.contextMenuSectionContent > * {
border-top: none;
display: block; }
.contextMenuLabel {
font-size: 12px;
line-height: 25px;
padding-left: 6px; }
.contextMenuLabel.contextMenuNotAFriend {
text-transform: uppercase;
font-size: 12px;
color: rgba(184, 156, 80, 0.75); }
.recentName {
margin: 4px;
color: #ccc; }
.SendMessageContextNotFriends.disabled {
color: #666;
border-color: transparent; }
.contextMenuGameItem {
max-width: 190px;
line-height: 20px;
-webkit-mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(to right, black 85%, rgba(0, 0, 0, 0) 100%);
white-space: nowrap; }
.contextMenuGameIcon {
width: 20px;
height: 20px;
margin-right: 6px;
float: left; }
.contextMenuGameHeader {
width: 184px;
height: 69px; }
.contextMenuUnselectable:hover,
.contextMenuGameTitle,
.contextMenuBroadcast,
.contextMenuGameOptions {
background-color: #00000066; }
.contextMenuBroadcastTitle {
color: #c9bdf7; }
.contextMenuBroadcastSubtitle {
color: #8277b1;
font-size: 10px; }
.contextMenuGameOptions {
padding-left: 32px; }
.contextMenuGameOptions.contextMenuPlayButton {
padding-left: 0px; }
.contextMenuGameOptions.contextMenuPartyBeacon {
color: #91c257; }
.contextMenuGameOptions .SVGIcon_Play {
width: 18px;
height: 18px;
margin-left: 6px;
margin-right: 6px;
margin-bottom: -5px;
border: 1px solid #788294;
border-radius: 50%; }
.contextMenuGameOptions:first-child {
border-top: 0px solid transparent; }
.contextMenuGameOptions .SVGIcon_Play .playTriangle {
transform: scale(0.6) translateX(20px);
transform-origin: 50% 50%;
fill: #8b97ac; }
.contextMenuGameOptions:hover .SVGIcon_Play .playTriangle {
fill: #d0d9e9; }
.contextMenuGameName {
color: #cbdde4; }
.contextMenuItem.contextMenuUnselectable:hover {
background: rgba(0, 0, 0, 0);
color: #9ca4a7; }
/* end friendmenu.tsx stuff */
.GameHeader,
.GameIcon {
width: 100%;
height: 100%; }
.BroadcastVideoWatchState .SteamLogoThrobber {
filter: hue-rotate(40deg); }
.watchPartyDialog .watchOption {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px;
margin: 20px; }
.watchPartyDialog .watchOptionRow {
border-bottom: 1px solid #535c68; }
.watchPartyDialog .watchOption .watchOptionTitle,
.watchPartyDialog .watchOption .watchOptionSubtitle {
color: white; }
.watchPartyDialog .watchOption .watchOptionTitle .friendName {
color: #c9bdf7; }
.watchPartyDialog .watchOption .watchOptionTitle {
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.watchPartyDialog .watchOption .watchOptionSubtitle {
font-size: 14px;
color: #777; }
.watchPartyDialog .watchPartyPrompt {
font-size: 20px;
color: white;
margin-bottom: 16px; }
.DialogButton.watchHowButton {
text-align: left;
height: 48px;
padding-left: 8px;
width: calc( 100% - 16px);
margin-bottom: 8px;
display: flex; }
.watchPartyDialog {
width: 450px;
max-height: 600px; }
.ChatRoomListGroupItem.WatchPartyGroup .ChatRoomListGroupItem_header {
padding: 0; }
.ChatRoomListGroupItem.WatchPartyGroup .ChatRoomMultiFriendAvatar.Small,
.ChatRoomListGroupItem.WatchPartyGroup .ChatRoomGroupAvatar {
margin-left: 0; }
.ChatRoomListGroupItem.WatchPartyGroup .groupNameStatusContainer .chatRoomDetails {
color: #9384d4; }
.DialogButton.watchHowButton .friend.FriendAvatar.watchingbroadcast {
margin-right: 8px; }
.DialogButton.watchHowButton .highlight {
margin-left: 4px;
color: white; }
.DialogButton.watchHowButton .SVGIcon_Button {
margin-right: 6px;
width: 38px;
padding-top: 4px; }
.DialogButton.watchHowButton .SVGIcon_FriendRequest .friendArm,
.DialogButton.watchHowButton .SVGIcon_FriendRequest .redCircle {
display: none; }
.DialogButton.watchHowButton .SVGIcon_FriendRequest,
.DialogButton.watchHowButton .SVGIcon_NewChatGroup .Bubble {
fill: #b7ccd5; }
.DialogButton.watchHowButton .SVGIcon_NewChatGroup line {
stroke: #3d4450; }
.watchPartyDialog .DialogLabel {
margin-top: 16px; }
.ChatRoomGroupOGGAvatar {
flex-shrink: 0;
width: 124.1px;
height: 58px;
border: 1px solid #535c68;
border-radius: 5px;
overflow: hidden; }
.ChatRoomGroupOGGAvatar img.OGGAvatar {
display: block;
width: 100%; }
.ChatRoomMultiFriendAvatar {
position: relative;
width: 40px;
height: 40px;
flex-shrink: 0;
margin: 6px 3px 6px 6px;
overflow: hidden;
border-radius: 2px;
background-color: #0005;
border: 2px solid #535c68;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.ChatMessageInvite.Inviter .ChatRoomMultiFriendAvatar {
margin: 0; }
.ChatMessageInvite.Inviter .ChatRoomGroupAvatar.Small {
width: 38px;
height: 38px; }
.ChatMessageInvite.Inviter.InviteLink .ChatRoomGroupAvatar.Small,
.ChatMessageInvite.GroupAlreadyJoined .ChatRoomGroupAvatar.Small {
width: 56px;
height: 56px; }
.ChatMessageInvite.GroupAlreadyJoined .ChatRoomGroupAvatar.Small .ChatRoomGroupAvatar_initials {
padding-top: 3px;
font-size: 22px; }
.ChatMessageInvite.Inviter .ChatRoomGroupAvatar.Small .ChatRoomGroupAvatar_initials {
padding-top: 4px;
font-size: 20px; }
.ChatRoomMultiFriendAvatar.Micro {
width: 16px;
height: 16px;
margin: 0;
border-radius: 1px;
border-width: 1px;
box-sizing: border-box; }
.ChatRoomMultiFriendAvatar.Small {
width: 30px;
height: 30px; }
.ChatRoomMultiFriendAvatar.Large {
width: 92px;
height: 92px;
border-radius: 4px; }
.ChatRoomListGroupItem .ChatRoomMultiFriendAvatar.Small {
width: 30px;
height: 30px;
margin-left: 4px;
margin-right: 4px; }
.compactView .ChatRoomListGroupItem .ChatRoomMultiFriendAvatar.Small {
width: 23px;
height: 23px;
margin-left: 0px;
margin-right: 1px;
border-width: 1px; }
.ChatTabContent.ChatRoom .ChatRoomMultiFriendAvatar.Small {
margin-top: -2px;
margin-right: 8px;
margin-left: -2px;
/*width: 40px;
height: 40px;*/ }
.ChatRoomMultiFriendAvatar .MultiAvatar {
position: absolute;
display: block;
width: 50%;
height: 50%; }
.ChatRoomMultiFriendAvatar .MultiAvatar.Index0 {
left: 0;
top: 0; }
.ChatRoomMultiFriendAvatar .MultiAvatar.Index1 {
right: 0;
top: 0; }
.ChatRoomMultiFriendAvatar .MultiAvatar.Index2 {
left: 0;
bottom: 0; }
.ChatRoomMultiFriendAvatar .MultiAvatar.Index3 {
right: 0;
bottom: 0; }
.ChatRoomMultiFriendMore {
background: #000000;
color: #ffffff;
text-align: center;
line-height: 24px;
font-size: 12px;
user-select: none; }
.ChatRoomMultiFriendAvatar.Small .ChatRoomMultiFriendMore {
line-height: 16px;
font-size: 8px; }
.ChatRoomMultiFriendAvatar.Large .ChatRoomMultiFriendMore {
line-height: 40px;
font-size: 16px; }
.ChannelSpecificNotificationSettings_Inherit {
font-style: italic; }
.DialogDropDown._DialogInputContainer .ChannelSpecificNotificationSettings_Inherit {
opacity: 0.5; }
.DialogInputLabelGroup.InputDevice {
margin-bottom: 8px; }
.NotificationSettingsSavingIndicator {
opacity: 0;
transition: opacity 0.5s ease-in; }
.NotificationSettingsSavingIndicator.Saving {
opacity: 1.0; }
.notificationsChannel .DialogDropDown._DialogInputContainer {
flex: 1; }
.ChatRoomNotificationSettingsDialog .notificationRow {
display: flex;
flex-direction: row;
margin-bottom: 12px; }
.ChatRoomNotificationSettingsDialog .DialogHBar {
margin-bottom: 8px; }
.ChatRoomNotificationSettingsDialog .indicatorOptionContainer {
position: relative; }
.ChatRoomNotificationSettingsDialog .indicatorOptionContainer .DialogToggle_Label {
padding-left: 4px; }
.ChatRoomNotificationSettingsDialog .ChatUnreadMessageIndicator {
top: -1px;
height: 100%;
transition: opacity .32s ease-in-out; }
.ChatRoomNotificationSettingsDialog .ChatUnreadMessageIndicator.Hidden {
opacity: 0; }
.ChatRoomNotificationSettingsDialog .indicatorOption {
margin-bottom: 0; }
.ChatRoomNotificationSettingsDialog .notificationGeneralHeader {
display: flex;
flex-direction: row;
height: 20px;
justify-content: space-between;
margin-bottom: 8px; }
.notificationGeneralHeader.isDefault {
margin-top: 32px; }
.ChatRoomNotificationSettingsDialog .DialogFooter {
font-size: 14px; }
.ChatRoomNotificationSettingsDialog .DialogFooter .textLink {
cursor: pointer; }
.ChatRoomNotificationSettingsDialog .notificationGeneralHeader .notificationChimeAndToast {
width: 108px;
background-color: transparent;
justify-content: space-around; }
.ChatRoomNotificationSettingsDialog .notificationGeneralHeader .notificationChimeAndToast .SVGIcon_Bell {
width: 16px;
height: 16px; }
.ChatRoomNotificationSettingsDialog .notificationGeneralHeader .notificationChimeAndToast .SVGIcon_Toast {
width: 22px;
height: 22px;
margin-top: -2px; }
.ChatRoomNotificationSettingsDialog .notificationGeneralHeader .notificationChimeAndToast .SVGIcon_Button {
fill: #969696; }
.ChatRoomNotificationSettingsDialog .notificationGeneralHeader .notificationChimeAndToast .SVGIcon_Toast line {
stroke: #969696; }
.ChatRoomNotificationSettingsDialog .notificationRow .notificationChimeAndToast {
height: 42px; }
.ChatRoomNotificationSettingsDialog .notificationRow .DialogInputLabelGroup._DialogLayout {
flex: 1;
margin: 0; }
.ChatRoomNotificationSettingsDialog .notificationChimeAndToast {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #5551;
margin: 0;
align-self: flex-end;
height: 100%;
padding: 0;
align-items: center;
border-radius: 3px; }
.ChatRoomNotificationSettingsDialog .notificationChimeAndToast .DialogCheckbox {
margin: 0 16px; }
.FriendsSettingsVoiceTransmissionType_ButtonRow {
padding: 8px 8px;
background-color: rgba(67, 73, 83, 0.3); }
._DialogSection.pushToTalkSection .PPTSoundOption:hover {
color: #dfe3e6;
cursor: pointer; }
._DialogSection.pushToTalkSection .PPTSoundOption {
display: flex;
flex-direction: row;
background-color: #0003;
padding: 3px;
border-radius: 4px;
width: calc(100% - 6px); }
._DialogSection.pushToTalkSection .PPTSoundOption .DialogCheckbox_Container {
width: calc( 100% - 6px); }
._DialogSection.pushToTalkSection .PPTSoundOption.DialogLabelExplainer {
text-align: left; }
._DialogSection.pushToTalkSection .PPTSoundOption .DialogCheckbox {
margin-right: 6px; }
._DialogSection.pushToTalkSection .pushToKeyAssignContainer,
._DialogSection.pushToTalkSection .pushtoTalkKeyAssignContainer,
.VoiceSettings .advancedSettings {
background-color: #0004;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding: 16px;
flex: 1;
margin-bottom: 16px; }
.VoiceSettings .advancedSettings {
opacity: 1;
height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
transition: all .2s ease-in-out; }
.VoiceSettings .advancedSettings.showAdvanced {
opacity: 1;
padding-top: 16px;
padding-bottom: 16px;
height: 274px; }
.VoiceSettings ._DialogSection.pushToTalkSection .pushToKeyAssignContainer .DialogButton.ClearHotKeyButton {
width: 32px;
max-width: 32px;
min-width: 32px;
padding: 0px;
margin-left: 8px; }
.VoiceSettings .DialogButton.ClearHotKeyButton .SVGIcon_X_Line {
width: 13px;
height: 13px;
margin: 0px; }
.scrollToRef {
width: 1px;
height: 1px;
z-index: 1000; }
.voiceSelfHeader {
margin-bottom: 12px; }
.voiceMicTestContainer {
padding: 8px 8px;
background-color: rgba(67, 73, 83, 0.3); }
.voiceSelfDirections {
display: flex;
flex-direction: row;
background-color: #0004;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding: 16px; }
.voiceSelfHeader .friend .avatarHolder {
height: 50px;
width: 53px; }
.voiceSelfDirections .friend {
margin-right: 12px; }
.voiceSelfHeader .friend .avatarHolder .avatarStatus {
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 3px; }
.voiceSelfHeader .friend .avatarHolder .avatar {
height: 100%; }
button.DialogButton.LocalMicTestButton {
height: 32px;
width: auto;
padding-left: 20px;
padding-right: 20px;
margin-top: auto;
margin-bottom: auto;
min-width: 180px;
margin-left: 20px; }
._DialogSection.pushToTalkSection .pushToKeyAssignContainer.showPTTOptions {
padding-top: 6px;
padding-bottom: 6px;
height: 68px;
opacity: 1;
pointer-events: initial; }
._DialogSection.pushToTalkSection .pushToKeyAssignContainer,
._DialogSection.pushToTalkSection .pushtoTalkKeyAssignContainer {
padding: 6px;
justify-content: space-between; }
._DialogSection.pushToTalkSection .pushToKeyAssignContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0px;
border-radius: 4px;
height: 0px;
opacity: 0;
pointer-events: none;
transition: all .1s ease-in-out; }
._DialogSection.pushToTalkSection .pushToKeyAssignContainer .DialogButton,
._DialogSection.pushToTalkSection .pushtoTalkKeyAssignContainer .DialogButton {
outline: 2px solid rgba(20, 162, 255, 0);
outline-offset: 2px;
width: fit-content;
min-width: 100px;
height: 32px;
padding: 0 16px;
align-self: flex-end; }
._DialogSection.pushToTalkSection .pushToKeyAssignContainer .DialogButton.capturingKey,
._DialogSection.pushToTalkSection .pushtoTalkKeyAssignContainer .DialogButton.capturingKey {
outline: 2px solid #14a2ff;
outline-offset: 2px;
animation-name: WalkDashedOutline;
animation-iteration-count: infinite;
animation-duration: 1s; }
@keyframes WalkDashedOutline {
0% {
outline-color: #14a2ff;
background: #515d72; }
50% {
outline-color: rgba(20, 162, 255, 0.5);
background: #3d434d; }
100% {
outline-color: #14a2ff;
background: #515d72; } }
._DialogSection.pushToTalkSection .DialogLabelExplainer {
align-self: center;
text-align: center;
flex: 1;
font-size: 14px; }
._DialogSection.pushToTalkSection .DialogOnOffToggle._DialogInputContainer {
margin-bottom: 0; }
.ChatRoomNotificationSettingsDialog .notificationsChannelListContainer {
padding: 8px 0; }
.ChatRoomNotificationSettingsDialog .notificationsChannelHeader {
flex-shrink: 0;
justify-content: initial; }
.ChatRoomNotificationSettingsDialog .notificationsChannelHeader.DialogTwoColLayout .NotificationChannelNameLabel {
flex-shrink: 1;
max-width: 170px;
min-width: 0px;
margin-left: 6px;
margin-bottom: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.ChatRoomNotificationSettingsDialog .notificationsChannelHeader .OverrideChannelLabel {
flex: 1;
margin-bottom: 0; }
.ChatRoomNotificationSettingsDialog .NotificationChannelName {
flex-grow: 1;
background-color: #5551;
padding-left: 12px;
padding-top: 12px;
border-radius: 3px;
max-width: 160px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.ChatRoomNotificationSettingsDialog .notificationsChannelHeader .DialogLabel {
/*color: rgb(66, 151, 248);*/ }
.ChatRoomNotificationSettingsDialog .notificationsChannel {
height: 42px;
margin-bottom: 6px;
position: relative;
flex-wrap: nowrap; }
.ChatRoomNotificationSettingsDialog .notificationsChannel .DialogInputLabelGroup {
flex: 1;
min-width: 50%;
max-width: none;
margin: 0; }
.FriendSettingsContainer .SettingsGroup > * {
margin-left: 0px;
margin-bottom: 10px; }
.FriendSettingsContainer .DialogOnOffToggle_Control {
margin-top: 0px; }
.FriendSettingsContainer .SettingsGroup {
margin-bottom: 14px; }
.FriendsSettingsNotificationRow {
padding: 8px 12px;
margin-bottom: 10px;
background-color: rgba(67, 73, 83, 0.3);
color: #dfe3e6;
font-size: 14px;
font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif;
user-select: none; }
.FriendsSettingsNotificationRow.FriendsSettingsNotificationRow_Header {
background-color: transparent;
margin-bottom: 0px; }
.FriendsSettingsNotificationRow.FriendsSettingsNotificationRow_Header .FriendsSettingsNotificationRow_Label {
text-transform: uppercase;
color: #7e7e7e; }
.DialogBody.useDefaults .FriendsSettingsNotificationRow:not(.FriendsSettingsNotificationRow_Header) .FriendsSettingsNotificationRow_Label {
color: #7e7e7e; }
.DialogBody .useDefaultsCheckBox {
font-size: 14px; }
.DialogBody.useDefaults .useDefaultsCheckBox {
color: white; }
.FriendsSettingsNotificationRow.FriendsSettingsNotificationRow_Header .FriendsSettingsNotificationRow_Checkbox {
text-align: center;
color: #7e7e7e; }
.FriendsSettingsNotificationRow_Label,
.FriendsSettingsNotificationRow_Checkbox {
display: inline-block; }
.FriendsSettingsNotificationRow_Label {
width: 50%; }
.FriendsSettingsNotificationRow_Checkbox {
width: 25%;
vertical-align: middle; }
.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox {
margin-left: auto;
margin-right: auto; }
.FriendsSettingsFlashSection_ButtonRow {
padding: 8px 8px;
background-color: rgba(67, 73, 83, 0.3); }
.FriendsSettingsFlashSection_ButtonRow .DialogButton {
margin: 0; }
.InviteLandingRoot {
margin: 0 auto;
max-width: 600px;
padding: 80px 2%; }
.FriendMenuRoleCheckbox .DialogCheckbox {
margin-right: 8px;
display: flex;
flex-direction: row; }
.FriendMenuRoleCheckbox.disabled .DialogCheckbox {
background-color: transparent; }
.FriendMenuRoleCheckbox .DialogCheckbox_Container {
margin-bottom: 0; }
.FriendMenuRoleCheckbox.disabled .DialogCheckbox_Container {
cursor: default; }
.FriendMenuRoleCheckbox .SVGIcon_Crown {
width: 16px;
height: 16px;
margin-right: 8px;
margin-bottom: -2px; }
.FriendMenuRoleCheckbox .SVGIcon_Crown path {
fill: #ffbb00; }
.roleSubtitle {
color: #575b64;
margin-left: 4px; }
.editRoleName {
font-size: 24px;
height: 22px; }
.editRoleName:disabled {
background-color: transparent;
color: white; }
.editRoleName:disabled:hover {
background-color: transparent; }
.roleEditHeader {
min-height: 40px;
margin-bottom: 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-right: 14px; }
.roleEditHeader .DialogLabel {
margin-bottom: 0; }
.roleEditHeader .DialogInputLabelGroup {
width: 100%;
margin-bottom: 0; }
.backToPermissionsButton {
margin-bottom: 16px;
margin-left: 4px;
font-size: 22px; }
.backToPermissionsButton:hover .SVGIcon_DoubleArrow {
transform: translateX(-4px); }
.backToPermissionsButton .SVGIcon_DoubleArrow {
width: 18px;
height: 18px;
margin-bottom: -1px; }
button.DialogButton.deleteButton {
background-color: #bd4544;
background: linear-gradient(to right, #b14040 0%, #742a29 100%);
color: white;
min-height: 30px; }
.Page_GroupSettings_Permissions .DialogBody {
display: block;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 0px;
flex: 1;
padding-bottom: 4px; }
.Page_GroupSettings_Permissions .roleList {
margin-right: 16px;
overflow-x: hidden;
display: grid;
grid-template-rows: fit-content(10px) fit-content(300px) 1fr;
grid-template-rows: fit-content(0) fit-content(0) fit-content(0) fit-content(398px) fit-content(0);
grid-gap: 5px;
box-sizing: border-box; }
.Page_GroupSettings_Permissions button.DialogButton.deleteButton {
width: fit-content;
min-width: 232px;
margin-left: auto;
margin-right: 14px; }
.Page_GroupSettings_Permissions .DialogFooter {
margin-right: 0;
margin-top: 8px; }
.Page_GroupSettings_Permissions .DialogOnOffToggle.Disabled .DialogToggle_Label {
color: #dfe3e6; }
.Page_GroupSettings_Permissions .Disabled .DialogOnOffToggle_Option.Active {
color: #dfe3e6; }
.Page_GroupSettings_Permissions .DialogBodyText {
margin-bottom: 0; }
button.DialogButton.roleButton {
text-align: left;
padding: 0 12px;
width: calc( 100% - 24px);
margin-bottom: 6px; }
button.DialogButton.roleButton.owner:disabled {
color: white;
background-color: #373d46; }
button.DialogButton.roleButton.owner:disabled:hover .roleSubtitle {
color: #777; }
button.DialogButton.roleButton .SVGIcon_Crown {
width: 16px;
height: 16px;
margin-bottom: 4px;
margin-right: 6px; }
button.DialogButton.roleButton .roleSubtitle {
float: right;
text-transform: uppercase;
color: #777; }
button.DialogButton.roleButton:hover .roleSubtitle {
color: #ccc; }
.roleRow {
display: flex;
flex-direction: row; }
.rolePriorityContainer {
width: 28px;
height: 34px;
position: relative; }
.rolePriorityContainer .rolePriorityButton {
position: absolute; }
.rolePriorityContainer .rolePriorityButton.roleDown {
top: 17px; }
.rolePriorityButton {
width: 24px;
height: 15px;
background-color: #3d4450;
border-radius: 2px;
overflow: visible;
margin-top: 2px;
margin-left: 2px;
cursor: pointer; }
.rolePriorityButton.Disabled:active,
.rolePriorityButton.Disabled:hover,
.rolePriorityButton.Disabled {
opacity: .4;
background-color: #3d4450;
cursor: default; }
.rolePriorityButton.Disabled svg {
display: none; }
.rolePriorityButton:hover {
background-color: #464d58; }
.rolePriorityButton:hover svg polygon {
fill: #fff; }
.rolePriorityButton:active {
background-color: #22252b; }
.rolePriorityButton svg {
width: 100%;
height: 14px; }
.rolePriorityButton svg polygon {
fill: #888; }
.rolePriorityButton.roleUp svg {
padding-bottom: 1px; }
.rolePriorityButton.roleDown svg {
padding-top: 4px; }
button.DialogButton.createNewRoleButton {
align-self: flex-start;
padding: 0 16px;
height: 32px;
margin-top: 12px;
margin-bottom: 6px;
align-self: flex-end; }
button.DialogButton.createNewRoleButton svg {
stroke: #aad3ff;
margin-bottom: 1px; }
button.DialogButton.createNewRoleButton {
width: fit-content;
min-width: 232px;
margin-left: auto;
margin-right: 14px; }
.meKey .SVGIcon_Crown,
.meKey .SVGIcon_DialogCheck,
button.DialogButton.roleButton .SVGIcon_DialogCheck {
width: 16px;
height: 16px;
margin-right: 6px;
opacity: 0; }
.meKey .SVGIcon_DialogCheck path,
button.DialogButton.roleButton .SVGIcon_DialogCheck path {
stroke: white; }
.meKey .SVGIcon_Crown,
.meKey .SVGIcon_DialogCheck,
button.DialogButton.roleButton.currentUserRole .SVGIcon_DialogCheck,
.DialogButton.roleButton:disabled .SVGIcon_Button {
opacity: 0.5; }
.meKey .SVGIcon_Crown,
.meKey .SVGIcon_DialogCheck {
margin-bottom: -2px; }
.meKey {
float: right; }
.SettingsGroup {
margin-top: 0px;
margin-bottom: 16px; }
.SettingsGroup.PermissionsGroup,
.SettingsGroup.PermissionsGroup ._DialogInputContainer {
margin-bottom: 8px; }
.msg .broadcastInviteSelf,
.msg .broadcastInviteDismissed,
.msg .broadcastViewRequestDismissed {
font-style: italic; }
.broadcastThumbnail {
width: 196px;
height: 110px;
display: none;
border-radius: 8px;
box-shadow: 0px 4px 20px #000a; }
.broadcastThumbnail.loaded {
display: inline-block; }
.InnerChatTab .SteamLogo {
float: right; }
.chatStack {
flex: 1;
min-height: 0; }
.minHeightZero {
min-height: 0;
flex: 1; }
.BothChatsSeperator {
align-self: stretch;
background-color: #191a1b;
min-width: 6px;
min-height: 6px;
border-left: 0px solid black;
border-right: 0px solid black;
border-top: 1px solid black;
border-bottom: 0px solid black; }
.Vertical .BothChatsSeperator {
border-top: 0px solid black;
border-bottom: 0px solid black;
border-left: 1px solid black;
border-right: 1px solid black; }
.groupMemberList .friend .avatarHolder img.avatar {
height: 24px; }
.avoidEvents {
pointer-events: none; }