Template:Marker: Difference between revisions
From The Fifth City Wiki
m forgot to move some stuff |
Fix positioning frfr this time. Hopefully. Also add comments. |
||
| Line 1: | Line 1: | ||
<div | <div | ||
style = " | style = " | ||
/* Move marker on map */ | |||
position: absolute; | |||
transform: | transform: translate({{{x|0}}}%, {{{y|0}}}%); | ||
/* Transformation percentages take into account | |||
the size of the current element rather than | |||
the parent element. So, to translate based on | |||
a percentage of the parent element's size, | |||
this element must have the same size. */ | |||
width: 100%; | |||
height: 100%; | |||
" | " | ||
class = "hastooltip" | class = "hastooltip" | ||
><!-- | ><!-- | ||
--><div style = " | --><div style = " | ||
transform: translate( | width: fit-content; /* Shrink to fit only the marker */ | ||
"><!-- | transform: | ||
translate(-50%, -50%) /* Center marker */ | |||
scale({{{scale|0.75}}}) /* Scale marker based on variable */ | |||
; | |||
" | |||
class = "hastooltip" | |||
><!-- | |||
Marker top flair | |||
--><div style = " | --><div style = " | ||
image-rendering: pixelated; | image-rendering: pixelated; | ||
/* Move flair down a tad */ | |||
position: relative; | position: relative; | ||
top: 3px; | top: 3px; | ||
/* Center it */ | |||
width: fit-content; | width: fit-content; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
">[[File:Border-fanciness-top.png]]</div><!-- | ">[[File:Border-fanciness-top.png]]</div><!-- | ||
Marker | |||
--><div style = " | --><div style = " | ||
/* ~*Style*~ */ | |||
font-family: 'Roboto Slab', Georgia, Times, serif; | font-family: 'Roboto Slab', Georgia, Times, serif; | ||
color: #fff; | color: #fff; | ||
| Line 28: | Line 51: | ||
box-shadow: 0px 0px 5px 0px rgb(111, 133, 134); | box-shadow: 0px 0px 5px 0px rgb(111, 133, 134); | ||
">{{{name|Unnamed Marker}}}</div><!-- | ">{{{name|Unnamed Marker}}}</div><!-- | ||
Marker bottom flair | |||
--><div style = " | --><div style = " | ||
image-rendering: pixelated; | image-rendering: pixelated; | ||
/* Move flair up a tad */ | |||
position: relative; | position: relative; | ||
bottom: 7px; | bottom: 7px; | ||
/* Center it */ | |||
width: fit-content; | width: fit-content; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
">[[File:Border-fanciness-bottom.png]]</div><!-- | ">[[File:Border-fanciness-bottom.png]]</div><!-- | ||
--><div class = "tooltip" style = "width: 150%; transform: translateX(-25%) scale({{#expr:1/{{{scale| | |||
Tooltip | |||
--><div class = "tooltip" style = " | |||
width: 150%; /* Width of tooltip in relation to marker */ | |||
transform: | |||
translateX(-25%) /* Should be width/2 - 100%, centers tooltip */ | |||
scale({{#expr:1/{{{scale|0.75}}}}}) /* Undo scaling applied by marker to tooltip */ | |||
; | |||
text-align: left; | |||
padding: 10px; | |||
"> | |||
Revision as of 04:10, 23 June 2025
Unnamed Marker
