120 lines
6.3 KiB
CSS
120 lines
6.3 KiB
CSS
@charset "utf-8";
|
|
/* -----------------------------------------------
|
|
* 멤버란 디자인 스타일 정의
|
|
--------------------------------------------------
|
|
- 최초 작성일 : 2021.08.15
|
|
- 최초 작성자 : 아보카도
|
|
- 최종 수정일 :
|
|
- 최종 수정자 :
|
|
--------------------------------------------------*/
|
|
|
|
|
|
/****************************************************
|
|
신청자 목록 레이아웃
|
|
****************************************************/
|
|
|
|
.ready-member-list {display:block; position:relative; overflow:hidden;}
|
|
.ready-member-list li {float:left; width:50%; margin-bottom:8px;}
|
|
.ready-member-list li.empty {width:100%; line-height:300px; text-align:center;}
|
|
.ready-member-list li .item {position:relative; padding:10px; margin:0 5px; }
|
|
.ready-member-list li .ui-thumb {display:block; position:absolute; top:10px; left:10px; width:80px; height:80px; overflow:hidden; box-sizing:border-box;}
|
|
.ready-member-list li .ui-thumb span {display:block; position:absolute; top:0; bottom:0; left:0; right:0; text-align:center; font-size:11px; line-height:96px; opacity:1;}
|
|
.ready-member-list li .ui-thumb span.ing {}
|
|
.ready-member-list li .ui-thumb span.com {display:none;}
|
|
.ready-member-list li .ui-thumb a:hover span {opacity:0;}
|
|
|
|
.ready-member-list li .ui-profile {display:block; position:relative; margin-left:95px; min-height:85px;}
|
|
.ready-member-list li .ui-profile i {display:block; position:absolute; top:0; left:0; width:18px;}
|
|
.ready-member-list li .ui-profile .name {padding:5px 0;}
|
|
.ready-member-list li .ui-profile em {display:block; font-style:normal; font-size:11px;}
|
|
.ready-member-list li .ui-profile strong {font-size:14px;}
|
|
.ready-member-list li .ui-profile span {display:block; padding:3px 0; font-size:11px;}
|
|
.ready-member-list li .ui-profile span.owner {text-align:right; margin-top:5px; padding-top:5px;}
|
|
|
|
/* 반응형 */
|
|
@media all and (max-width:1024px) {
|
|
#submenu li.menu-first {display:block; text-align:center;}
|
|
}
|
|
@media all and (max-width:640px) {
|
|
.ready-member-list li {width:100%;}
|
|
}
|
|
|
|
|
|
/****************************************************
|
|
멤버 목록 레이아웃
|
|
****************************************************/
|
|
|
|
.memberWrap {display:table; width:100%;}
|
|
.memberWrap > .member-box {display:table-cell; text-align:center; vertical-align:top;}
|
|
.member-list {text-align:center;}
|
|
.member-list li {display:inline-block; vertical-align:top; margin:5px;}
|
|
.member-list .item {display:block; position:relative; padding:0;}
|
|
.member-list .ui-profile {position:absolute; left:0; right:0; bottom:0; padding:5px; text-align:center;}
|
|
|
|
@media all and (max-width:800px) {
|
|
.memberWrap,
|
|
.memberWrap > .member-box {display:block;}
|
|
}
|
|
|
|
|
|
/****************************************************
|
|
멤버 프로필 레이아웃
|
|
****************************************************/
|
|
|
|
#character_profile .visual-area {position:relative;}
|
|
#character_profile #character_body {position:relative; z-index:0;}
|
|
#character_profile #character_body img {display:block; margin:0 auto;}
|
|
#character_profile #character_head {position:absolute; left:0; bottom:0; right:0; z-index:1;}
|
|
|
|
|
|
/****************************************************
|
|
인벤토리 스타일
|
|
****************************************************/
|
|
|
|
.inventory-list {display:block; position:relative; overflow:hidden;}
|
|
.inventory-list li {display:block; float:left; padding:5px;}
|
|
.inventory-list a {display:block; position:relative; width:40px; height:40px; overflow:hidden;}
|
|
.inventory-list a img {display:block; position:relative; margin:0 auto;}
|
|
.inventory-list a i {display:block; position:absolute; right:1px; bottom:1px; background:rgba(0,0,0,.5); min-width:15px; height:15px; line-height:15px; color:#fff; font-size:10px; font-weight:800; padding:0 1px; text-align:center; z-index:2; box-sizing:border-box; border:none !important;}
|
|
.inventory-list a i.present:before {content:"\e99f"; font-family:'icon'; font-weight:400;}
|
|
|
|
.title-list {display:block; position:relative; padding:20px 0;}
|
|
.title-list p {padding:5px;}
|
|
.title-list .item {display:inline-block; min-width:25%; padding: 5px; box-sizing:border-box; text-align:left; vertical-align:middle;}
|
|
|
|
|
|
/******************************************
|
|
관계란 스타일
|
|
*******************************************/
|
|
|
|
.relation-member-list { position: relative; }
|
|
.relation-member-list > li { position:relative; padding-left: 90px; min-height:120px; margin-bottom: 20px; }
|
|
.relation-member-list .ui-thumb { position: absolute; top: 0; left: 0; width: 80px; overflow: hidden; }
|
|
.relation-member-list .rm-name { font-size: 14px; font-weight: 800; padding-right: 150px; padding-left: 10px; }
|
|
|
|
.relation-member-list .rm-like-style { position: absolute; right: 0; top: 0;width: 80px; }
|
|
.relation-member-list .rm-like-style i { display: block; width: 13px; height: 15px; position: relative; float: left; margin: 0 1px;}
|
|
.relation-member-list .rm-like-style i:before { content: "\e9da"; font-family: 'icon'; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }
|
|
.relation-member-list .memo { font-family: 'Dotum'; padding:10px; margin: 5px 0; line-height: 1.2em; min-height: 30px; }
|
|
|
|
.relation-member-list ol { display: block; position: relative; clear: both; text-align: right;padding-right: 10px; }
|
|
.relation-member-list ol li { display: inline-block; }
|
|
.relation-member-list ol li a.btn-log { display: block; position: relative; width: 20px; height: 20px; margin: 0 auto; }
|
|
.relation-member-list ol li a.btn-log:before { content: "\e925"; font-family: 'icon'; font-size: 15px; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }
|
|
|
|
.relation-member-list .modify-box { display: none; }
|
|
.relation-member-list .state-modify { }
|
|
.relation-member-list .state-modify .rm-like-style,
|
|
.relation-member-list .state-modify .memo .ori-content,
|
|
.relation-member-list .state-modify ol { display: none; }
|
|
.relation-member-list .state-modify .modify-box { display: block; }
|
|
|
|
|
|
@media all and (max-width: 500px) {
|
|
.relation-member-list .rm-name { padding-right: 0; font-size: 13px; }
|
|
.relation-member-list .rm-like-style { position: relative; width: auto;overflow: hidden; }
|
|
|
|
.relation-member-list > li { padding-left:0px; }
|
|
.relation-member-list .ui-thumb { width: 50px; }
|
|
.relation-member-list .info { min-height: 62px; margin-left: 60px; }
|
|
}
|