2022-02-09 03:05:24 +09:00
|
|
|
@charset "utf-8";
|
|
|
|
|
/* -----------------------------------------------
|
|
|
|
|
* 마이페이지 스타일 정의
|
|
|
|
|
--------------------------------------------------
|
|
|
|
|
- 최초 작성일 : 2021.08.15
|
|
|
|
|
- 최초 작성자 : 아보카도
|
|
|
|
|
- 최종 수정일 :
|
|
|
|
|
- 최종 수정자 :
|
|
|
|
|
--------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/**************************************************************
|
|
|
|
|
기본 레이아웃
|
|
|
|
|
***************************************************************/
|
|
|
|
|
|
|
|
|
|
.mypageWrap {padding:20px 0;}
|
|
|
|
|
.mypageInside {position:relative;}
|
|
|
|
|
.my-inner {max-width:900px; padding:20px; margin:0 auto;}
|
|
|
|
|
|
|
|
|
|
@media all and (max-width:640px) {
|
|
|
|
|
.mypageWrap {padding:10px 0px;}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**************************************************************
|
|
|
|
|
캐릭터 작성 폼
|
|
|
|
|
***************************************************************/
|
|
|
|
|
|
|
|
|
|
.list-character-box {display:block; position:relative; margin:10px 0; overflow:hidden;}
|
|
|
|
|
.list-character-box .item {display:block; position:relative; color:#fff; margin:10px 0; padding:0;}
|
|
|
|
|
.list-character-box .item a {display:block; position:relative; padding:10px 10px 10px 100px; min-height:100px; box-sizing:border-box;}
|
|
|
|
|
.list-character-box .item a em {display:block; position:absolute; width:80px; height:80px; top:10px; left:10px; background:no-repeat 50% 50%; background-size:cover;}
|
|
|
|
|
.list-character-box .item strong {display:block; position:relative; margin-bottom:5px; font-size:18px; line-height:1.5; font-weight:800; font-family:'HeirofLight';}
|
|
|
|
|
.list-character-box .item span {display:inline-block; font-size:13px; color:#fff;}
|
|
|
|
|
.list-character-box .item span:after {content:" | "; margin:0 4px; opacity:.5;}
|
|
|
|
|
.list-character-box .item span:last-child:after {display:none;}
|
|
|
|
|
.list-character-box .item span i {margin-right:5px;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**************************************************************
|
|
|
|
|
탭 설정
|
|
|
|
|
***************************************************************/
|
|
|
|
|
|
|
|
|
|
#tab_list {display:block; position:relative; overflow:hidden; box-sizing:border-box; text-align:center; border:none;}
|
|
|
|
|
#tab_list ul {position:relative; z-index:1;}
|
|
|
|
|
#tab_list li {font-size:14px; font-weight:600; padding:5px;}
|
|
|
|
|
#tab_list li a {color:#fff; opacity:.7}
|
|
|
|
|
#tab_list li a.point,
|
|
|
|
|
#tab_list li a:hover {opacity:1;}
|
|
|
|
|
#tab_list li a.point:before {content:"《";}
|
|
|
|
|
#tab_list li a.point:after {content:"》";}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**************************************************************
|
|
|
|
|
로그 리스트
|
|
|
|
|
***************************************************************/
|
|
|
|
|
|
|
|
|
|
.mypage-log-list {display:Block; position:relative;}
|
|
|
|
|
.mypage-log-list dl {position:relative; padding-left:100px; min-height:80px; margin:20px 15px; border-bottom:1px solid rgba(255, 255, 255, .2);}
|
|
|
|
|
.mypage-log-list dl dt {position:absolute; top:0; left:0; width:100px; height:80px; overflow:hidden;}
|
|
|
|
|
.mypage-log-list dl dt img {max-width:100%;}
|
|
|
|
|
.mypage-log-list dl dd {margin-left:10px;}
|
|
|
|
|
.mypage-log-list dl .comemnt-list li {overflow:hidden; padding-bottom:3px;}
|
|
|
|
|
.mypage-log-list dl .comemnt-list li + li {padding-top:3px; border-top:1px dashed rgba(255, 255, 255, .2);}
|
|
|
|
|
.mypage-log-list dl .comemnt-list li p {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
|
|
|
|
|
.mypage-log-list dl .comemnt-list li p.con {opacity:.8;}
|
|
|
|
|
.mypage-log-list dl .comemnt-list li p .date {font-size:11px; font-family:'Dotum';}
|
|
|
|
|
|
|
|
|
|
@media all and (max-width:500px) {
|
|
|
|
|
.mypage-log-list dl {padding-left:0; font-size:12px;}
|
|
|
|
|
.mypage-log-list dl dt {position:relative; width:auto; text-align:center;}
|
|
|
|
|
.mypage-log-list dl dd {padding-top:10px; margin-left:0;}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**************************************************************
|
|
|
|
|
좋아요 추가한 로그 리스트
|
|
|
|
|
***************************************************************/
|
|
|
|
|
|
|
|
|
|
.mypage-favorite-list {overflow:hidden;}
|
|
|
|
|
.mypage-favorite-list dl {width:20%; float:left; padding:3px; box-sizing:border-box;}
|
|
|
|
|
.mypage-favorite-list dl dt {display:block; position:relative;}
|
|
|
|
|
.mypage-favorite-list dl dt:before {content:""; display:block; position:relative; padding-top:100%;}
|
|
|
|
|
.mypage-favorite-list dl dt a {display:block; position:absolute; top:3px; left:3px; right:3px; bottom:3px; overflow:hidden; text-align:center;}
|
|
|
|
|
.mypage-favorite-list dl dt a img {position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%);}
|
|
|
|
|
.mypage-favorite-list dl dd {margin:0; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
|
|
|
|
|
|
|
|
|
@media all and (max-width:820px) {.mypage-favorite-list dl {width:25%;}}
|
|
|
|
|
@media all and (max-width:600px) {.mypage-favorite-list dl {width:33.33%;}}
|
|
|
|
|
@media all and (max-width:450px) {.mypage-favorite-list dl {width:50%;}}
|
|
|
|
|
|
|
|
|
|
.mypage-log-list .no-data,
|
|
|
|
|
.mypage-favorite-list .no-data {text-align:center; line-height:150px;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**************************************************************
|
|
|
|
|
마이페이지 캐릭터 관리
|
|
|
|
|
***************************************************************/
|
|
|
|
|
|
|
|
|
|
.profile-viewer {display:block; position:relative; padding-left:100px;}
|
|
|
|
|
.profile-viewer .theme-box {padding:0;}
|
|
|
|
|
.profile-viewer .body {display:block; position:absolute; top:0; left:0; width:100px; bottom:0;}
|
|
|
|
|
.profile-viewer .body em {display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat 50% 0% rgba(0,0,0,.5);}
|
|
|
|
|
.profile-viewer .data {display:block; position:relative; margin-left:15px; padding-right:15px; padding-bottom:20px;}
|
|
|
|
|
.profile-viewer .data > .control {text-align:center; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.5);}
|
|
|
|
|
.profile-viewer .data > .control a {display:inline-block; vertical-align:middle; padding:10px 0; color:#fff;}
|
|
|
|
|
.profile-viewer .data > .control a + a {margin-left:-4px;}
|
|
|
|
|
.profile-viewer .data > .control a + a:before {content:" · "; margin:0 10px; font-size:15px; vertical-align:middle;}
|
|
|
|
|
.profile-viewer .prof {display:block; position:relative;}
|
|
|
|
|
|
|
|
|
|
.profile-viewer .prof .thumb-item {display:block; position:relative; max-width:100px; margin:0 auto; transform:scale(.9); -webkit-transform:scale(.9); text-align:center;}
|
|
|
|
|
.profile-viewer .prof .thumb-item a {display:block; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.3);}
|
|
|
|
|
.profile-viewer .prof .thumb-item em {display:block;}
|
|
|
|
|
.profile-viewer .prof .thumb-item em img {display:block;}
|
|
|
|
|
.profile-viewer .prof .thumb-item .name {display:block; padding:3px 10px; background:#000; color:#fff;}
|
|
|
|
|
|
|
|
|
|
.profile-viewer .prof-data {text-align:center; padding:10px 0 30px;;}
|
|
|
|
|
.profile-viewer .prof-data p {padding-left:0;}
|
|
|
|
|
.profile-viewer .prof-data p:before {display:none;}
|
|
|
|
|
.profile-viewer .prof-data p strong {display:block; position:relative; font-size:16px;}
|
|
|
|
|
.profile-viewer .prof-data p + p {margin-top:5px; opacity:.7;}
|
|
|
|
|
|
|
|
|
|
.profile-viewer .comment {padding:20px 0; text-align:center; font-size:18px; font-family:'HeirofLight';}
|
|
|
|
|
.profile-viewer .comment:before,
|
|
|
|
|
.profile-viewer .comment:after {content:'"';}
|
|
|
|
|
.profile-viewer .status-bar dd p {padding-left:0;}
|
|
|
|
|
.profile-viewer .status-bar dd p:before {display:none;}
|
|
|
|
|
.profile-viewer .mypage-box {padding:10px 0;}
|
|
|
|
|
.profile-viewer .no-data {text-align:center; opacity:.5; padding:50px 0;}
|
|
|
|
|
|
|
|
|
|
@media all and (max-width:520px) {
|
|
|
|
|
.profile-viewer {padding-left:0;}
|
|
|
|
|
.profile-viewer .body {display:none;}
|
|
|
|
|
.profile-viewer .tab-box-group {margin:0 -15px;}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** Quick Navigation **/
|
|
|
|
|
#character_profile {position:relative; padding:20px 0 100px;}
|
|
|
|
|
#character_profile #profile_menu {display:block; position:absolute; top:20px; right:10px; z-index:10;}
|
|
|
|
|
#character_profile #profile_menu a {display:block; position:relative; margin-bottom:5px;}
|
|
|
|
|
|
|
|
|
|
.relation-member-list {margin-top:30px;}
|
|
|
|
|
.relation-box .ui-btn {margin-top:10px;}
|
|
|
|
|
|
|
|
|
|
.pattern-box .inner-wrap {}
|
|
|
|
|
.pattern-box .inner-wrap h4 {line-height:1.2; font-size:16px; margin-bottom:10px; border-left:4px solid #fff; padding-left:.5em;}
|
|
|
|
|
|
|
|
|
|
@media all and (max-width:520px) {
|
|
|
|
|
.tbl-scroll {overflow:auto;}
|
|
|
|
|
.tbl-scroll > table {width:620px;}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/********************************
|
|
|
|
|
쪽지란
|
|
|
|
|
********************************/
|
|
|
|
|
|
|
|
|
|
.memo-inner {padding:30px 10px; max-width:640px; margin:0 auto; min-height:300px; overflow:hidden;}
|
|
|
|
|
.ui-list-control {text-align:right; padding-bottom:20px;}
|
|
|
|
|
|
2023-04-18 01:56:37 +09:00
|
|
|
.message-item {display:block; position:relative; max-width:90%; width:570px; box-sizing:border-box; clear:both; margin-top:10px; z-index: 1;}
|
2022-02-09 03:05:24 +09:00
|
|
|
.message-item.index {max-width:100%; width:100%;}
|
|
|
|
|
.message-item .thumb {display:block; position:absolute; top:0; width:80px; text-align:center;}
|
|
|
|
|
.message-item .thumb em {display:block; position:relative; padding-top:100%; background:no-repeat 50% 50%; background-size:cover; border:2px solid #656567;}
|
|
|
|
|
.message-item .thumb strong {display:block; padding-top:5px; font-size:13px; word-break:break-all;}
|
|
|
|
|
.message-item .con {display:block; position:relative; min-height:70px; padding:15px; box-sizing:border-box;}
|
|
|
|
|
.message-item .con:after {content:""; display:block; position:absolute; width:0; height:0; border:20px solid transparent; border-top-width:10px; border-bottom-width:0; top:0;}
|
|
|
|
|
.message-item .con .txt {font-size:14px;}
|
|
|
|
|
.message-item .con .txt a {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; clear:both; overflow:hidden; height:2.8em; text-overflow:ellipsis; color:#fff;}
|
|
|
|
|
.message-item .con .control {display:block; margin-top:10px; font-size:12px; opacity:.7;}
|
|
|
|
|
.message-item .con .control .ui-btn {height:auto; line-height:1.2; padding:0 10px; border-radius:9em;}
|
|
|
|
|
|
|
|
|
|
.message-item.you {padding-left:105px; float:left;}
|
|
|
|
|
.message-item.you .thumb {left:0;}
|
|
|
|
|
.message-item.you .con {background:rgba(103,103,103,.8); border-radius:0 10px 10px 10px;}
|
|
|
|
|
.message-item.you .con:after {border-top-color:rgba(103,103,103,.8); border-top-width:10px; border-right-width:0; left:-20px;}
|
|
|
|
|
.message-item.you .con .control {text-align:right;}
|
|
|
|
|
|
|
|
|
|
.message-item.me {padding-right:105px; float:right; margin-top:20px;}
|
|
|
|
|
.message-item.me .thumb {right:0;}
|
|
|
|
|
.message-item.me .con {background:rgba(62,62,62,.8); border-radius:10px 0 10px 10px;}
|
|
|
|
|
.message-item.me .con:after {border-top-color:rgba(62,62,62,.8); border-left-width:0; right:-20px;}
|
|
|
|
|
.message-item.me .con .control {text-align:left;}
|
|
|
|
|
|
|
|
|
|
.ui-chatting-list:after {content:""; display:block; clear:both; min-height:200px;}
|
|
|
|
|
.ui-memo-write {border-top:1px solid rgba(255,255,255,.2); padding-top:20px;}
|
|
|
|
|
|
|
|
|
|
@media all and (max-width:640px) {
|
|
|
|
|
.message-item .thumb {width:60px;}
|
|
|
|
|
.message-item .con {min-height:50px; padding:10px;}
|
|
|
|
|
.message-item .con:after {border-left-width:10px; border-right-width:10px;}
|
|
|
|
|
.message-item .con .txt {font-size:12px;}
|
|
|
|
|
|
|
|
|
|
.message-item.you {padding-left:75px;}
|
|
|
|
|
.message-item.you .con:after {left:-10px;}
|
|
|
|
|
|
|
|
|
|
.message-item.me {padding-right:75px;}
|
|
|
|
|
.message-item.me .con:after {right:-10px;}
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width:420px) {
|
|
|
|
|
.message-item {max-width:100%;}
|
|
|
|
|
|
|
|
|
|
.message-item.you {padding-left:75px;}
|
|
|
|
|
.message-item.me {padding-right:75px;}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/******************************************
|
|
|
|
|
관계란 스타일
|
|
|
|
|
*******************************************/
|
|
|
|
|
|
|
|
|
|
.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; }
|
|
|
|
|
}
|
