| Latest revision |
Your text |
| Line 1: |
Line 1: |
| | | <div style = "position: relative; width: fit-content; height: fit-content;"> |
| | [[File:{{{image|Fallen-london-full-map.jpg}}}]] |
| | <div |
| style = " | | style = " |
| /* Allow hover events to pass through */
| |
| pointer-events: none;
| |
|
| |
| /* Move marker on map */
| |
| position: absolute; | | position: absolute; |
| transform: translate(calc({{{x|0}}}% * 4), calc({{{y|0}}}% * 4)); | | left: 0; |
| | | top: 0; |
| /* Transformation percentages take into account | | padding: 0px; |
| the size of the current element rather than
| | width: 100%; |
| the parent element. So, to translate based on
| | height: 100%; |
| 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"
| |
| ><!-- | | ><!-- |
| --><div style = " | | --><div |
| pointer-events: all; /* Allow pointer events again */
| | style = " |
| width: fit-content; /* Shrink to fit only the marker */
| | position: relative; |
| transform:
| | left: {{{posx|74}}}%; |
| translate(-50%, -50%) /* Center marker */ | | top: {{{posy|40}}}%; |
| scale({{{scale|0.75}}}) /* Scale marker based on variable */
| | transform: translate(calc(-{{{iconwidth|100}}}px/2), calc(-{{{iconheight|130}}}px/2)); |
| ;
| | width: fit-content; |
| "
| | " |
| class = "hastooltip hoverChild"
| | class = "hastooltip" |
| ><!-- | | ><!-- |
|
| | -->[[File:{{{icon|Appallingsecretnew.png}}}|{{{iconwidth}}}x{{{iconheight}}}px|link=]]<!-- |
| Marker top flair
| | --><div class = " tooltip"><!-- |
| -->{{#switch:{{{flair|fallenlondon}}} | | -->Hmm yes this is text<!-- |
| |fallenlondon =
| | --></div><!-- |
| | | --></div><!-- |
| image-rendering: pixelated;
| | --><div |
|
| | style = " |
| /* Move flair down a tad */
| | position: relative; |
| position: relative;
| | left: {{{posx|35}}}%; |
| top: 3px;
| | top: {{{posy|0}}}%; |
|
| | transform: translate(calc(-{{{iconwidth|100}}}px/2), calc(-{{{iconheight|130}}}px/2)); |
| /* Center it */
| | width: fit-content; |
| 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);
| |
| padding: .2cqw .4cqw; | |
| border: .1cqw solid #fff;
| |
| border-radius: .2cqw;
| |
| box-shadow: 0 0 .3cqw 0 rgb(111, 133, 134);
| |
| " | | " |
| >{{{name|Unnamed Marker}}}</div>{{#if:{{{link|{{{name}}}}}}|{{))!}}}}<!-- | | class = "hastooltip" |
|
| | ><!-- |
| Marker bottom flair
| | -->[[File:{{{icon|Appallingsecretnew.png}}}|{{{iconwidth}}}x{{{iconheight}}}px|link=]]<!-- |
| -->{{#switch:{{{flair|fallenlondon}}} | | --><div class = "tooltip"><!-- |
| |fallenlondon =
| | -->Second tooltip<!-- |
| <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> | | --></div> |
| </div> | | </div> |
| </includeonly> | | </div> |
| <noinclude>{{documentation}}</noinclude>
| |
