devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

misc: 내 도시 위치를 '신경쓰이게' 표시

Browse Source
This commit is contained in:
Hide_D
2021-12-19 04:55:28 +09:00
parent f0ffd3356d
commit bd54681d78
1 changed files with 460 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/css/map.css
+460 -342
View File
@@ -1,165 +1,220 @@
@charset "UTF-8"; @charset "UTF-8";
.world_map{ .world_map {
width:700px; width: 700px;
background:black; background: black;
font-size:14px; font-size: 14px;
color:white; color: white;
position: relative; position: relative;
} }
.map_title{ .map_title {
width:700px; width: 700px;
height:20px; height: 20px;
text-align:center; text-align: center;
} }
.map_title_tooltiptext .tooltip-inner{ .map_title_tooltiptext .tooltip-inner {
max-width:220px; max-width: 220px;
width:220px; width: 220px;
text-align: left; text-align: left;
} }
.map_title_text{ .map_title_text {
margin:auto; margin: auto;
text-align:center; text-align: center;
width:160px; width: 160px;
display:block; display: block;
line-height:20px; line-height: 20px;
font-size:14px; font-size: 14px;
font-weight:bold; font-weight: bold;
} }
.map_body{ .map_body {
width:700px; width: 700px;
height:500px; height: 500px;
position:relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.map_body .map_bglayer1{ .map_body .map_bglayer1 {
width:100%; width: 100%;
height: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; position: absolute;
z-index:16; left: 0;
display:none; top: 0;
min-width:120px; }
.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; border: 0.02em gray solid;
white-space: nowrap; white-space: nowrap;
} }
.world_map .city_name{
.world_map .city_name {
background-color: rgb(30, 164, 255); background-color: rgb(30, 164, 255);
z-index: 6; z-index: 6;
line-height:15px; line-height: 15px;
height:15px; height: 15px;
} }
.world_map .nation_name{
.world_map .nation_name {
background-color: rgb(30, 164, 255); background-color: rgb(30, 164, 255);
z-index: 6; z-index: 6;
line-height:15px; line-height: 15px;
height:15px; height: 15px;
border-top: 0.02em gray solid; border-top: 0.02em gray solid;
text-align:right; text-align: right;
} }
.world_map .map_flag{ .world_map .map_flag {
width:12px; width: 12px;
height:12px; height: 12px;
} }
.world_map.map_detail .my_city{ .world_map.map_detail .my_city:before {
border:solid 1px red; content: "";
outline:dotted 4px red; top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute;
animation-duration: 3.9s;
animation-name: blink-my-city-d1;
animation-iteration-count: infinite;
} }
.world_map.map_detail .city_filler{ .world_map.map_detail .my_city:after {
position:absolute; content: "";
width:calc(100% + 2px); top: -2px;
height:calc(100% + 2px); left: -2px;
left:-1px; right: -2px;
top:-1px; bottom: -2px;
background:transparent; position: absolute;
animation-duration: 3.9s;
animation-name: blink-my-city-d2;
animation-iteration-count: infinite;
} }
.world_map .city_detail_name{
background-color:rgba(0,0,0,0.5); @keyframes blink-my-city-d1 {
font-size:10px; 0% {
position:absolute; outline: dashed 3px transparent;
white-space:nowrap; }
left:70%;
bottom:-10px; 50% {
color:white; outline: dashed 3px rgba(255, 255, 255, 0.5);
}
100% {
outline: dashed 3px transparent;
}
} }
.world_map.hide_cityname .city_detail_name{ @keyframes blink-my-city-d2 {
display:none; 0% {
outline: dashed 2px transparent;
}
50% {
outline: dashed 2px red;
}
100% {
outline: dashed 2px transparent;
}
} }
.city_base{
position:absolute; .world_map.map_detail .city_filler {
width:40px; position: absolute;
height:30px; width: calc(100% + 2px);
height: calc(100% + 2px);
left: -1px;
top: -1px;
background: transparent;
} }
.city_base .city_bg{ .world_map .city_detail_name {
z-index:1; background-color: rgba(0, 0, 0, 0.5);
position:absolute; 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; background-position: center;
} }
.city_base div{ .city_base div {
z-index:2; z-index: 2;
} }
/* /*
@@ -173,80 +228,80 @@
} }
*/ */
.map_detail .city_base.city_level_1 .city_bg{ .map_detail .city_base.city_level_1 .city_bg {
/*수*/ /*수*/
width:48px; width: 48px;
height:45px; height: 45px;
background-size:48px 45px; background-size: 48px 45px;
left:-4px; left: -4px;
top:-7.5px; top: -7.5px;
} }
.map_detail .city_base.city_level_2 .city_bg{ .map_detail .city_base.city_level_2 .city_bg {
/*진*/ /*진*/
width:60px; width: 60px;
height:42px; height: 42px;
background-size:60px 42px; background-size: 60px 42px;
left:-10px; left: -10px;
top:-6px; top: -6px;
} }
.map_detail .city_base.city_level_3 .city_bg{ .map_detail .city_base.city_level_3 .city_bg {
/*관*/ /*관*/
width:42px; width: 42px;
height:42px; height: 42px;
background-size:42px 42px; background-size: 42px 42px;
left:-1px; left: -1px;
top:-6px; top: -6px;
} }
.map_detail .city_base.city_level_4 .city_bg{ .map_detail .city_base.city_level_4 .city_bg {
/*이*/ /*이*/
width:60px; width: 60px;
height:45px; height: 45px;
background-size:60px 45px; background-size: 60px 45px;
left:-10px; left: -10px;
top:-7.5px; top: -7.5px;
} }
.map_detail .city_base.city_level_5 .city_bg{ .map_detail .city_base.city_level_5 .city_bg {
/*소*/ /*소*/
width:72px; width: 72px;
height:48px; height: 48px;
background-size:72px 48px; background-size: 72px 48px;
left:-16px; left: -16px;
top:-9px; top: -9px;
} }
.map_detail .city_base.city_level_6 .city_bg{ .map_detail .city_base.city_level_6 .city_bg {
/*중*/ /*중*/
width:78px; width: 78px;
height:54px; height: 54px;
background-size:78px 54px; background-size: 78px 54px;
left:-19px; left: -19px;
top:-12px; top: -12px;
} }
.map_detail .city_base.city_level_7 .city_bg{ .map_detail .city_base.city_level_7 .city_bg {
/*대*/ /*대*/
width:84px; width: 84px;
height:60px; height: 60px;
background-size:84px 60px; background-size: 84px 60px;
left:-22px; left: -22px;
top:-15px; top: -15px;
} }
.map_detail .city_base.city_level_8 .city_bg{ .map_detail .city_base.city_level_8 .city_bg {
/*특*/ /*특*/
width:96px; width: 96px;
height:72px; height: 72px;
background-size:96px 72px; background-size: 96px 72px;
left:-28px; left: -28px;
top:-21px; top: -21px;
} }
.city_img{ .city_img {
position:absolute; position: absolute;
} }
/* /*
@@ -261,241 +316,304 @@
*/ */
.map_detail .city_base.city_level_1 .city_img{ .map_detail .city_base.city_level_1 .city_img {
width:16px; width: 16px;
height:15px; height: 15px;
left:12px; left: 12px;
top:7.5px; top: 7.5px;
} }
.map_detail .city_base.city_level_2 .city_img{ .map_detail .city_base.city_level_2 .city_img {
width:20px; width: 20px;
height:14px; height: 14px;
left:10px; left: 10px;
top:8px; top: 8px;
} }
.map_detail .city_base.city_level_3 .city_img{ .map_detail .city_base.city_level_3 .city_img {
width:14px; width: 14px;
height:14px; height: 14px;
left:13px; left: 13px;
top:8px; top: 8px;
} }
.map_detail .city_base.city_level_4 .city_img{ .map_detail .city_base.city_level_4 .city_img {
width:20px; width: 20px;
height:15px; height: 15px;
left:10px; left: 10px;
top:7.5px; top: 7.5px;
} }
.map_detail .city_base.city_level_5 .city_img{ .map_detail .city_base.city_level_5 .city_img {
width:24px; width: 24px;
height:16px; height: 16px;
left:8px; left: 8px;
top:7px; top: 7px;
} }
.map_detail .city_base.city_level_6 .city_img{ .map_detail .city_base.city_level_6 .city_img {
width:26px; width: 26px;
height:18px; height: 18px;
left:7px; left: 7px;
top:6px; top: 6px;
} }
.map_detail .city_base.city_level_7 .city_img{ .map_detail .city_base.city_level_7 .city_img {
width:28px; width: 28px;
height:20px; height: 20px;
left:6px; left: 6px;
top:5px; top: 5px;
} }
.map_detail .city_base.city_level_8 .city_img{ .map_detail .city_base.city_level_8 .city_img {
width:32px; width: 32px;
height:24px; height: 24px;
left:4px; left: 4px;
top:3px; top: 3px;
} }
.map_detail .city_base .city_state{ .map_detail .city_base .city_state {
position: absolute; position: absolute;
top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/ top: 5px;
left:0; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
left: 0;
} }
.map_detail .city_base .city_flag{ .map_detail .city_base .city_flag {
position: absolute; position: absolute;
width:12px; width: 12px;
height:12px; height: 12px;
} }
.map_detail .city_base .city_flag > img{ .map_detail .city_base .city_flag>img {
width:12px; width: 12px;
height:12px; height: 12px;
} }
.map_detail .city_base.city_level_1 .city_flag{ .map_detail .city_base.city_level_1 .city_flag {
right:-8px; right: -8px;
top:-4px; top: -4px;
} }
.map_detail .city_base.city_level_2 .city_flag{ .map_detail .city_base.city_level_2 .city_flag {
right:-8px; right: -8px;
top:-4px; top: -4px;
} }
.map_detail .city_base.city_level_3 .city_flag{ .map_detail .city_base.city_level_3 .city_flag {
right:-8px; right: -8px;
top:-4px; top: -4px;
} }
.map_detail .city_base.city_level_4 .city_flag{ .map_detail .city_base.city_level_4 .city_flag {
right:-6px; right: -6px;
top:-3px; top: -3px;
} }
.map_detail .city_base.city_level_5 .city_flag{ .map_detail .city_base.city_level_5 .city_flag {
right:-6px; right: -6px;
top:-4px; top: -4px;
} }
.map_detail .city_base.city_level_6 .city_flag{ .map_detail .city_base.city_level_6 .city_flag {
right:-6px; right: -6px;
top:-4px; top: -4px;
} }
.map_detail .city_base.city_level_7 .city_flag{ .map_detail .city_base.city_level_7 .city_flag {
right:-6px; right: -6px;
top:-4px; top: -4px;
} }
.map_detail .city_base.city_level_8 .city_flag{ .map_detail .city_base.city_level_8 .city_flag {
right:-6px; right: -6px;
top:-3px; top: -3px;
} }
.map_detail .city_base .city_flag .city_capital{ .map_detail .city_base .city_flag .city_capital {
position: absolute; position: absolute;
width:10px; width: 10px;
height:10px; height: 10px;
top:0; top: 0;
right:-1px; right: -1px;
} }
.map_detail .city_base .city_flag .city_capital > img{ .map_detail .city_base .city_flag .city_capital>img {
width:10px; width: 10px;
height:10px; height: 10px;
} }
/* Basic */ /* Basic */
.world_map.map_basic .city_filler{ .world_map.map_basic .city_filler {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:transparent;
}
.world_map.map_basic .my_city{
outline:dotted 4px red;
}
.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; position: absolute;
width:5px; width: 100%;
height:5px; height: 100%;
top:-2px; left: 0;
right:-2px; top: 0;
background-color:yellow; background: transparent;
} }
.map_basic .city_base .city_state{ /*
.world_map.map_basic .my_city {
}*/
.world_map.map_basic .my_city:before {
content: "";
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
position: absolute; position: absolute;
width:10px;
height:10px; animation-duration: 2s;
top:-2px; animation-name: blink-my-city;
left:-4px; animation-iteration-count: infinite;
background-color:white;
} }
.map_basic .city_base .city_state.city_state_war{
background-color:red; .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;
} }
.map_basic .city_base .city_state.city_state_bad{
background-color:orange; @keyframes blink-my-city {
0% {
outline: dashed 5px transparent;
}
50% {
outline: dashed 5px white;
}
100% {
outline: dashed 5px transparent;
}
} }
.map_basic .city_base .city_state.city_state_good{ @keyframes blink-my-city2 {
background-color:blue; 0% {
outline: dashed 4px transparent;
}
50% {
outline: dashed 4px red;
}
100% {
outline: dashed 4px transparent;
}
} }
.btn.btn-minimum{
.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-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
} }