| Latest revision |
Your text |
| Line 1: |
Line 1: |
| | | <div |
| style = " | | style = " |
| /* Allow hover events to pass through */
| | position: relative; |
| pointer-events: none;
| | left: {{{x}}}%; |
|
| | top: {{{y}}}%; |
| /* Move marker on map */
| | width: fit-content; |
| position: absolute; | |
| transform: translate(calc({{{x|0}}}% * 4), calc({{{y|0}}}% * 4)); | |
|
| |
| /* 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: calc(100% / 4); | |
| height: calc(100% / 4);
| |
| " | | " |
| class = "frontOnChildHover" | | class = "hastooltip" |
| ><!-- | | ><!-- |
| --><div style = " | | --><div style = "justify-content: center;"><!-- |
| pointer-events: all; /* Allow pointer events again */
| | -->[[File:Border-fanciness-top.png]]<!-- |
| width: fit-content; /* Shrink to fit only the marker */
| | --><div style = " |
| transform:
| |
| translate(-50%, -50%) /* Center marker */
| |
| scale({{{scale|0.75}}}) /* Scale marker based on variable */
| |
| ;
| |
| "
| |
| class = "hastooltip hoverChild"
| |
| ><!--
| |
|
| |
| Marker top flair
| |
| -->{{#switch:{{{flair|fallenlondon}}} | |
| |fallenlondon =
| |
| <div style = "
| |
| image-rendering: pixelated;
| |
|
| |
| /* Move flair down a tad */
| |
| position: relative;
| |
| top: 3px;
| |
|
| |
| /* Center it */
| |
| width: fit-content;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| ">[[File:Border-fanciness-top.png|link=]]</div>
| |
| | }}<!--
| |
|
| |
| Marker
| |
| --> {{#if:{{{link|{{{name}}}}}}|{{!((}}{{{link|{{#replace:{{{name}}}|<br>|_}}}}}{{!}}}}<div style = " | |
| /* ~*Style*~ */
| |
| text-align: center;
| |
| font-family: 'Roboto Slab', Georgia, Times, serif;
| |
| font-size: 0.85cqw;
| |
| color: #fff;
| |
| text-shadow: 0 0 .25cqw #000;
| |
| background-color: rgb(111, 133, 134); | | background-color: rgb(111, 133, 134); |
| padding: .2cqw .4cqw;
| | border: 1px solid #fff; |
| border: .1cqw solid #fff; | | border-radius: 4px; |
| border-radius: .2cqw; | | box-shadow: 0px 0px 5px 0px rgb(111, 133, 134); |
| box-shadow: 0 0 .3cqw 0 rgb(111, 133, 134); | | ">{{{name|Unnamed Marker}}}</div><!-- |
| " | | -->[[File:Border-fanciness-bottom.png]]<!-- |
| >{{{name|Unnamed Marker}}}</div>{{#if:{{{link|{{{name}}}}}}|{{))!}}}}<!--
| | --></div><!-- |
|
| | --><div class = "tooltip" style = "width: 30vw; transform: translateX(- 15vw); transform: translateX(calc({{{ width}}} /2) px); text-align: left; padding: 10px;"> |
| Marker bottom flair
| |
| -->{{#switch:{{{flair|fallenlondon}}} | |
| |fallenlondon =
| |
| <div style = "
| |
| image-rendering: pixelated;
| |
|
| |
| /* Move flair up a tad */
| |
| position: relative;
| |
| bottom: 7px;
| |
|
| |
| /* Center it */
| |
| width: fit-content;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| ">[[File:Border-fanciness-bottom.png|link=]]</div>
| |
| | }}<!--
| |
|
| |
| Tooltip
| |
| --><div class = "tooltip" style = " | |
| {{#if:{{{1|{{{image|{{{header|}}}}}}}}}||display: none;}} <!-- Hide tooltip if it has no contents -->
| |
|
| |
| <!-- If the content contains text, use a set width. Otherwise, fit-content -->
| |
| {{#if:{{{1|}}}
| |
| |width: 25cqw;
| |
| |width: fit-content;
| |
| }}
| |
|
| |
| transform:
| |
| translate(calc(-16.66cqw * {{{scale|0.75}}}), calc(-200% * (0.85 - {{{scale|0.75}}})))
| |
| scale({{#expr:1/{{{scale|0.75}}}}}) /* Undo scaling applied by marker to tooltip */
| |
| ;
| |
|
| |
| text-align: left;
| |
| padding: 10px;
| |
| "><!--
| |
| -->{{#if:{{{header|}}}|[[File:{{{header|}}}]]}}<!--
| |
| -->{{#if:{{{image|}}}|<div style = "width: 12.5cqw; clear: right; float: right">[[File:{{{image|}}}|right]]</div>}}<!--
| |
| -->{{{1|}}}<!--
| |
| --></div><!--
| |
| --></div>
| |
| </div>
| |
| </includeonly>
| |
| <noinclude>{{documentation}}</noinclude>
| |
