80 lines
3.4 KiB
CSS
80 lines
3.4 KiB
CSS
@charset "utf-8";
|
|
|
|
/* 현재접속자 */
|
|
#current_connect ul {margin:0;padding:0;list-style:none;zoom:1}
|
|
#current_connect ul:after {display:block;visibility:hidden;clear:both;content:""}
|
|
#current_connect li:after {display:block;visibility:hidden;clear:both;content:""}
|
|
#current_connect li {position:relative;padding:25px 0 30px 0;border-bottom:1px solid #ececec;min-height:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
|
|
#current_connect li:first-child {border-top:1px solid #ececec}
|
|
#current_connect .crt_num {float:left;line-height:45px;margin-right:20px;color:#777;font-weight:normal}
|
|
#current_connect .crt_profile {float:left;margin-right:20px;line-height:45px}
|
|
#current_connect .crt_profile > img {width:45px;height:45px;border-radius:10px}
|
|
#current_connect .crt_info {float:left;margin-top:5px}
|
|
#current_connect .crt_name {display:block; font-size: 16px !important;}
|
|
#current_connect .sv_member {font-weight:normal;line-height:20px;font-size:1.2em; color:#000;}
|
|
#current_connect .profile_img {display:none}
|
|
#current_connect .crt_lct {display:block; margin-top: 3px;}
|
|
#current_connect .crt_lct a {color:#999; font-size: 12px;}
|
|
#current_connect li.empty_li {width:100%;padding:200px 0;border:0;color:#666;text-align:center}
|
|
|
|
#current_connect .cc_flex {position: relative;}
|
|
#current_connect .cc_flex1 {position: absolute; left: 0px; top:25px;}
|
|
#current_connect .cc_flex2 {width: 100%; padding-left: 65px; padding-right: 125px;}
|
|
#current_connect .cc_flex3 {position: absolute; right: 0px; top:25px;}
|
|
#current_connect .cc_flex3 a {display: inline-block; vertical-align: top;}
|
|
|
|
#current_connect .cc_flex .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 0px; position: relative; line-height: 45px;}
|
|
#current_connect .cc_flex .fl_btns:hover {border-color:#AA20FF;}
|
|
|
|
.cc_total_cnt {background-color: #AA20FF; color:#fff; padding: 0px 7px 0px 7px; border-radius: 4px; margin-left: 7px; font-size: 11px; margin-top: -2px; display: inline-block; line-height: 20px; vertical-align: middle;}
|
|
|
|
|
|
/* 툴팁 { */
|
|
#current_connect .cc_flex .tooltips {
|
|
opacity: 0;
|
|
transition: all 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
cursor: default;
|
|
position: absolute;
|
|
left:50px;
|
|
width: max-content;
|
|
color: #fff;
|
|
background-color: #212121;
|
|
border-radius: 4px;
|
|
padding: 4px 6px;
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
font-style: normal;
|
|
line-height: 100%;
|
|
top:50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
#current_connect .cc_flex .tooltips:after {
|
|
border-top: 4px solid rgba(0, 0, 0, 0);
|
|
border-left: 4px solid #212121;
|
|
border-right: 4px solid rgba(0, 0, 0, 0);
|
|
border-bottom: 4px solid rgba(0, 0, 0, 0);
|
|
content: "";
|
|
position: absolute;
|
|
left: -7px;
|
|
top: 50%;
|
|
transform: translateY(-50%) rotate(180deg);
|
|
}
|
|
|
|
|
|
|
|
#current_connect .cc_flex .fl_btns .tooltips {left: 50%; transform: translateX(-50%); bottom:-20px; top:auto;}
|
|
#current_connect .cc_flex .fl_btns .tooltips:after {
|
|
top:-7px; left: 50%; transform: translateX(-50%);
|
|
border-top: 4px solid rgba(0, 0, 0, 0);
|
|
border-left: 4px solid rgba(0, 0, 0, 0);
|
|
border-left: 4px solid rgba(0, 0, 0, 0);
|
|
border-bottom: 4px solid #212121;
|
|
}
|
|
#current_connect .cc_flex .fl_btns:hover .tooltips {opacity: 1; bottom:-30px;}
|
|
|
|
/* } */
|
|
|
|
@media all and (max-width:1024px) {
|
|
#current_connect {padding-left: 20px; padding-right: 20px;}
|
|
} |