forked from devsam/core
Hide_D
14be16ce74
- 기존의 jQuery 기반 지도 렌더러를 Vue3로 재작성. - ajax로 호출하는 부분은 외부에서 처리하고, 다시 그리는 부분만 생성 - 기능상으론 거의 동일. - 일반 렌더러의 700px에, 500px모드용 모드 추가 - 아이콘의 크기는 작아지지만, 글자 크기는 작아지지 않도록 조정 dep: vueuse, detect-it 추가 Reviewed-on: https://storage.hided.net/gitea/devsam/core/pulls/216
625 lines
10 KiB
CSS
625 lines
10 KiB
CSS
.world_map {
|
|
width: 700px;
|
|
background: black;
|
|
font-size: 14px;
|
|
color: white;
|
|
position: relative;
|
|
}
|
|
|
|
.map_title {
|
|
width: 700px;
|
|
height: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.map_title_tooltiptext .tooltip-inner {
|
|
max-width: 220px;
|
|
width: 220px;
|
|
text-align: left;
|
|
}
|
|
|
|
.map_title_text {
|
|
margin: auto;
|
|
text-align: center;
|
|
width: 160px;
|
|
display: block;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.map_body {
|
|
width: 700px;
|
|
height: 500px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map_body .map_bglayer1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.map_body .map_bglayer2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.map_body .map_bgroad {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.map_body .map_button_stack {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.map_body .map_toggle_cityname::after {
|
|
content: " 끄기"
|
|
}
|
|
|
|
.map_body .map_toggle_cityname.active::after {
|
|
content: " 켜기"
|
|
}
|
|
|
|
.map_body .map_toggle_single_tap {
|
|
display: none;
|
|
}
|
|
|
|
.map_body .map_toggle_single_tap::after {
|
|
content: " 끄기"
|
|
}
|
|
|
|
.map_body .map_toggle_single_tap.active::after {
|
|
content: " 켜기"
|
|
}
|
|
|
|
.world_map .city_tooltip {
|
|
position: absolute;
|
|
z-index: 16;
|
|
display: none;
|
|
min-width: 120px;
|
|
border: 0.02em gray solid;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.world_map .city_name {
|
|
background-color: rgb(30, 164, 255);
|
|
z-index: 6;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
|
|
}
|
|
|
|
.world_map .nation_name {
|
|
background-color: rgb(30, 164, 255);
|
|
z-index: 6;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
border-top: 0.02em gray solid;
|
|
text-align: right;
|
|
}
|
|
|
|
.world_map .map_flag {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.world_map.map_detail .my_city{
|
|
border-radius: 33%;
|
|
}
|
|
|
|
.world_map.map_detail .my_city:before {
|
|
content: "";
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
position: absolute;
|
|
border-radius: 33%;
|
|
overflow: hidden;
|
|
|
|
animation-duration: 3.9s;
|
|
animation-name: blink-my-city-d1;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
.world_map.map_detail .my_city:after {
|
|
content: "";
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
position: absolute;
|
|
border-radius: 33%;
|
|
overflow: hidden;
|
|
|
|
animation-duration: 3.9s;
|
|
animation-name: blink-my-city-d2;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
@keyframes blink-my-city-d1 {
|
|
0% {
|
|
outline: solid 4px transparent;
|
|
}
|
|
|
|
50% {
|
|
outline: solid 4px rgba(255, 0, 0, 1);
|
|
}
|
|
|
|
100% {
|
|
|
|
outline: solid 4px transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-my-city-d2 {
|
|
0% {
|
|
outline: double 4px transparent;
|
|
}
|
|
|
|
50% {
|
|
outline: double 4px rgba(192, 192, 192, 1);
|
|
}
|
|
|
|
100% {
|
|
|
|
outline: double 4px transparent;
|
|
}
|
|
}
|
|
|
|
|
|
.world_map.map_detail .city_filler {
|
|
position: absolute;
|
|
width: calc(100% + 2px);
|
|
height: calc(100% + 2px);
|
|
left: -1px;
|
|
top: -1px;
|
|
background: transparent;
|
|
}
|
|
|
|
.world_map .city_detail_name {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
font-size: 10px;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
left: 70%;
|
|
bottom: -10px;
|
|
color: white;
|
|
}
|
|
|
|
.world_map.hide_cityname .city_detail_name {
|
|
display: none;
|
|
}
|
|
|
|
.city_base {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 30px;
|
|
}
|
|
|
|
.city_base .city_bg {
|
|
z-index: 1;
|
|
position: absolute;
|
|
background-position: center;
|
|
}
|
|
|
|
.city_base div {
|
|
z-index: 2;
|
|
}
|
|
|
|
/*
|
|
.map_detail .city_base.city_level_{0} .city_bg{
|
|
//$img = loadImg('cast_{0}.gif');
|
|
//$parent = cssSelect('.city_base');
|
|
width: $img.width;
|
|
height: $img.height;
|
|
left: ($parent.width - $img.width)/2;
|
|
top: ($parent.height - $img.height)/2;
|
|
}
|
|
*/
|
|
|
|
.map_detail .city_base.city_level_1 .city_bg {
|
|
/*수*/
|
|
width: 48px;
|
|
height: 45px;
|
|
background-size: 48px 45px;
|
|
left: -4px;
|
|
top: -7.5px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_2 .city_bg {
|
|
/*진*/
|
|
width: 60px;
|
|
height: 42px;
|
|
background-size: 60px 42px;
|
|
left: -10px;
|
|
top: -6px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_3 .city_bg {
|
|
/*관*/
|
|
width: 42px;
|
|
height: 42px;
|
|
background-size: 42px 42px;
|
|
left: -1px;
|
|
top: -6px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_4 .city_bg {
|
|
/*이*/
|
|
width: 60px;
|
|
height: 45px;
|
|
background-size: 60px 45px;
|
|
left: -10px;
|
|
top: -7.5px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_5 .city_bg {
|
|
/*소*/
|
|
width: 72px;
|
|
height: 48px;
|
|
background-size: 72px 48px;
|
|
left: -16px;
|
|
top: -9px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_6 .city_bg {
|
|
/*중*/
|
|
width: 78px;
|
|
height: 54px;
|
|
background-size: 78px 54px;
|
|
left: -19px;
|
|
top: -12px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_7 .city_bg {
|
|
/*대*/
|
|
width: 84px;
|
|
height: 60px;
|
|
background-size: 84px 60px;
|
|
left: -22px;
|
|
top: -15px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_8 .city_bg {
|
|
/*특*/
|
|
width: 96px;
|
|
height: 72px;
|
|
background-size: 96px 72px;
|
|
left: -28px;
|
|
top: -21px;
|
|
}
|
|
|
|
.city_img {
|
|
position: absolute;
|
|
}
|
|
|
|
/*
|
|
.map_detail .city_base.city_level_{0} .city_img{
|
|
//$img = loadImg('cast_{0}.gif');
|
|
//$parent = cssSelect('.city_base');
|
|
width: $img.width;
|
|
height: $img.height;
|
|
left: ($parent.width - $img.width)/2;
|
|
top: ($parent.height - $img.height)/2;
|
|
}
|
|
*/
|
|
|
|
|
|
.map_detail .city_base.city_level_1 .city_img {
|
|
width: 16px;
|
|
height: 15px;
|
|
left: 12px;
|
|
top: 7.5px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_2 .city_img {
|
|
width: 20px;
|
|
height: 14px;
|
|
left: 10px;
|
|
top: 8px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_3 .city_img {
|
|
width: 14px;
|
|
height: 14px;
|
|
left: 13px;
|
|
top: 8px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_4 .city_img {
|
|
width: 20px;
|
|
height: 15px;
|
|
left: 10px;
|
|
top: 7.5px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_5 .city_img {
|
|
width: 24px;
|
|
height: 16px;
|
|
left: 8px;
|
|
top: 7px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_6 .city_img {
|
|
width: 26px;
|
|
height: 18px;
|
|
left: 7px;
|
|
top: 6px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_7 .city_img {
|
|
width: 28px;
|
|
height: 20px;
|
|
left: 6px;
|
|
top: 5px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_8 .city_img {
|
|
width: 32px;
|
|
height: 24px;
|
|
left: 4px;
|
|
top: 3px;
|
|
}
|
|
|
|
.map_detail .city_base .city_state {
|
|
position: absolute;
|
|
top: 5px;
|
|
/*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
|
|
left: 0;
|
|
}
|
|
|
|
.map_detail .city_base .city_flag {
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.map_detail .city_base .city_flag>img {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_1 .city_flag {
|
|
right: -8px;
|
|
top: -4px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_2 .city_flag {
|
|
right: -8px;
|
|
top: -4px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_3 .city_flag {
|
|
right: -8px;
|
|
top: -4px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_4 .city_flag {
|
|
right: -6px;
|
|
top: -3px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_5 .city_flag {
|
|
right: -6px;
|
|
top: -4px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_6 .city_flag {
|
|
right: -6px;
|
|
top: -4px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_7 .city_flag {
|
|
right: -6px;
|
|
top: -4px;
|
|
}
|
|
|
|
.map_detail .city_base.city_level_8 .city_flag {
|
|
right: -6px;
|
|
top: -3px;
|
|
}
|
|
|
|
.map_detail .city_base .city_flag .city_capital {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
top: 0;
|
|
right: -1px;
|
|
}
|
|
|
|
.map_detail .city_base .city_flag .city_capital>img {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Basic */
|
|
|
|
|
|
|
|
.world_map.map_basic .city_filler {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
/*
|
|
.world_map.map_basic .my_city {
|
|
|
|
}*/
|
|
|
|
|
|
.world_map.map_basic .my_city:before {
|
|
content: "";
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
position: absolute;
|
|
|
|
animation-duration: 2s;
|
|
animation-name: blink-my-city;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
.world_map.map_basic .my_city:after {
|
|
content: "";
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
position: absolute;
|
|
|
|
animation-duration: 2s;
|
|
animation-name: blink-my-city2;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
@keyframes blink-my-city {
|
|
0% {
|
|
outline: dashed 5px transparent;
|
|
}
|
|
|
|
50% {
|
|
outline: dashed 5px white;
|
|
}
|
|
|
|
100% {
|
|
|
|
outline: dashed 5px transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-my-city2 {
|
|
0% {
|
|
outline: dashed 4px transparent;
|
|
}
|
|
|
|
50% {
|
|
outline: dashed 4px red;
|
|
}
|
|
|
|
100% {
|
|
|
|
outline: dashed 4px transparent;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.map_basic .city_base .city_img {
|
|
background-color: white;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_1 .city_img {
|
|
width: 12px;
|
|
height: 12px;
|
|
left: 14px;
|
|
top: 9px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_2 .city_img {
|
|
width: 12px;
|
|
height: 12px;
|
|
left: 14px;
|
|
top: 9px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_3 .city_img {
|
|
width: 14px;
|
|
height: 14px;
|
|
left: 13px;
|
|
top: 8px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_4 .city_img {
|
|
width: 16px;
|
|
height: 14px;
|
|
left: 12px;
|
|
top: 8px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_5 .city_img {
|
|
width: 18px;
|
|
height: 16px;
|
|
left: 11px;
|
|
top: 7px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_6 .city_img {
|
|
width: 20px;
|
|
height: 16px;
|
|
left: 10px;
|
|
top: 7px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_7 .city_img {
|
|
width: 22px;
|
|
height: 18px;
|
|
left: 9px;
|
|
top: 6px;
|
|
}
|
|
|
|
.map_basic .city_base.city_level_8 .city_img {
|
|
width: 24px;
|
|
height: 18px;
|
|
left: 8px;
|
|
top: 6px;
|
|
}
|
|
|
|
|
|
.map_basic .city_base .city_capital {
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 5px;
|
|
top: -2px;
|
|
right: -2px;
|
|
background-color: yellow;
|
|
}
|
|
|
|
.map_basic .city_base .city_state {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
top: -2px;
|
|
left: -4px;
|
|
background-color: white;
|
|
}
|
|
|
|
.map_basic .city_base .city_state.city_state_war {
|
|
background-color: red;
|
|
}
|
|
|
|
.map_basic .city_base .city_state.city_state_bad {
|
|
background-color: orange;
|
|
}
|
|
|
|
.map_basic .city_base .city_state.city_state_good {
|
|
background-color: blue;
|
|
}
|
|
|
|
.btn.btn-minimum {
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
} |