mirror of
https://github.com/exogen/t2-mapper.git
synced 2026-04-29 08:16:22 +00:00
add map info dialog
This commit is contained in:
Brian Beck
parent
0b345facea
commit
c44df43a91
36 changed files with 2051 additions and 1068 deletions
300
app/style.css
300
app/style.css
|
|
@ -10,6 +10,9 @@ html {
|
|||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
|
@ -203,6 +206,10 @@ input[type="range"] {
|
|||
.LabelledButton .ButtonLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MapInfoButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.CopyCoordinatesButton[data-copied="true"] {
|
||||
|
|
@ -569,6 +576,295 @@ input[type="range"] {
|
|||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.MapInfoDialog {
|
||||
position: relative;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
max-width: calc(100dvw - 40px);
|
||||
max-height: calc(100dvh - 40px);
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 1fr auto;
|
||||
background: rgba(20, 37, 38, 0.8);
|
||||
border: 1px solid rgba(65, 131, 139, 0.6);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 190, 220, 0.12),
|
||||
0 0 60px rgba(0, 140, 180, 0.12),
|
||||
inset 0 0 60px rgba(1, 7, 13, 0.6);
|
||||
color: #bccec3;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
user-select: text;
|
||||
-webkit-touch-callout: default;
|
||||
}
|
||||
|
||||
.MapInfoDialog-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.MapInfoDialog-left {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-right {
|
||||
border-left: 1px solid rgba(0, 190, 220, 0.3);
|
||||
height: 100%;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.MapInfoDialog-preview {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.MapInfoDialog-preview--floated {
|
||||
float: right;
|
||||
clear: right;
|
||||
margin: 0 0 16px 20px;
|
||||
max-height: 260px;
|
||||
max-width: 30%;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MapInfoDialog-title {
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
color: #7dffff;
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.MapInfoDialog-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
/* text-transform: uppercase; */
|
||||
}
|
||||
|
||||
.MapInfoDialog-planet {
|
||||
color: rgba(219, 202, 168, 0.7);
|
||||
}
|
||||
|
||||
.MapInfoDialog-quote {
|
||||
margin: 16px 0;
|
||||
padding: 0 0 0 14px;
|
||||
border-left: 2px solid rgba(0, 190, 220, 0.35);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.MapInfoDialog-quote p {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-quote cite {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MapInfoDialog-blurb {
|
||||
font-size: 13px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-sectionTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #7dffff;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 16px rgba(0, 210, 240, 0.25);
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: rgba(202, 208, 172, 0.5);
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack[data-playing="true"] {
|
||||
color: rgba(247, 253, 216, 0.7);
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicBtn {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: rgb(85, 118, 99);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack[data-playing="true"] .MapInfoDialog-musicBtn {
|
||||
color: rgb(109, 255, 170);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.MapInfoDialog-musicTrack[data-playing="true"] .MapInfoDialog-musicBtn:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.MapInfoDialog-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid rgba(0, 190, 220, 0.25);
|
||||
background: rgba(2, 20, 21, 0.7);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.MapInfoDialog-closeBtn {
|
||||
padding: 4px 18px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(41, 172, 156, 0.7),
|
||||
rgba(0, 80, 65, 0.7)
|
||||
);
|
||||
border: 1px solid rgba(41, 97, 84, 0.6);
|
||||
border-top-color: rgba(101, 185, 176, 0.5);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(120, 220, 195, 0.2),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
|
||||
0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
color: rgba(154, 239, 225, 0.9);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.MapInfoDialog-closeBtn:active {
|
||||
transform: translate(0, 1px);
|
||||
}
|
||||
|
||||
.MapInfoDialog-hint {
|
||||
font-size: 12px;
|
||||
color: rgba(201, 220, 216, 0.3);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 719px) {
|
||||
.MapInfoDialog-inner {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.MapInfoDialog-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MapInfoDialog-left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.MapInfoDialog-right {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.MapInfoDialog-preview {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.MapInfoDialog-closeBtn {
|
||||
width: 220px;
|
||||
height: 36px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.GuiMarkup-line {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.GuiMarkup-spacer {
|
||||
height: 0.6em;
|
||||
}
|
||||
|
||||
.GuiMarkup-bulletLine {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.GuiMarkup-bulletIcon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.GuiMarkup-bulletText {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.GuiMarkup-bitmap {
|
||||
max-height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.GuiMarkup-bullet {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.TouchJoystick {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
|
|
@ -609,3 +905,7 @@ input[type="range"] {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.MusicTrackName {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue