Template:Compass icon: Difference between revisions

Latest revision as of 03:21, 26 July 2026

Generates a gold circular border around the specified icon, mimicking how it appears on the Compass.

Parameter	Purpose
filename	the filename, including the extension, of the icon to place inside the border
`path=`	an optional Principle Path to which the item is associated, for easier location by readers. May be omitted to skip the outside highlight. Use any of following values: Notoriety Empire Seafaring Wealth
`size=`	the size of the icon, from any of the standard sizes: `xs` `sm` - default `md` `lg` `xl`

{{Compass icon|T ICO resource plank.png|path=Notoriety|size=xs}}

{{Compass icon|T ICO resource plank.png|path=Empire|size=sm}}

{{Compass icon|T ICO resource plank.png|path=Seafaring|size=md}}

{{Compass icon|T ICO resource plank.png|path=Wealth|size=lg}}

{{Compass icon|T ICO resource plank.png|size=xl}}

@@ Line 1: / Line 1: @@
-<includeonly><span style="display: inline-block;
+<includeonly><span class="cc-compass-icon" style="--instance-path-color: {{#switch: {{{path|}}}|Notoriety=#88ba5c|Empire=#e6573f|Seafaring=#5782cf|Wealth=#d844b8|default=transparent}};
-width:  {{#switch: {{{size|sm}}}|xs=16|sm=32|md=64|lg=96|xl=128}}px;
+--instance-size: {{#switch: {{{size|sm}}}|xs=16|sm=32|md=64|lg=96|xl=128}}px;
-height: {{#switch: {{{size|sm}}}|xs=16|sm=32|md=64|lg=96|xl=128}}px;
+--instance-inner-size: {{#switch: {{{size|sm}}}|xs=13|sm=26|md=52|lg=78|xl=104}}px;"><!--
-border-radius: 50%;
+--><!--
-border: {{#switch: {{{size|sm}}}|xs=0.5|sm=1.5|md=3|lg=4|xl=5}}px
-solid {{#switch: {{{path|}}}|Notoriety=#88BA5C|Empire=#D45642|Seafaring=#5D98FF|Wealth=#CB54AE|#default=transparent}};
-line-height: 0;"><!--
---><span style="display: inline-block;
-width:  {{#switch: {{{size|sm}}}|xs=14.5|sm=30|md=59|lg=88|xl=118}}px;
-height: {{#switch: {{{size|sm}}}|xs=14.5|sm=30|md=59|lg=88|xl=118}}px;
-border-radius: 50%; overflow: hidden;
-border: {{#switch: {{{size|sm}}}|xs=0.5|sm=1.5|md=3|lg=4|xl=5}}px
-solid #e6ae56;"><!--
 -->[[File:{{{1}}}|
-x{{#switch: {{{size|sm}}}|xs=15|sm=29.5|md=59|lg=88|xl=119}}px
+x{{#switch: {{{size|sm}}}|xs=13|sm=26|md=52|lg=78|xl=104}}px
-]]</span></span></includeonly><noinclude>
+]]</span></includeonly><noinclude>
 Generates a gold circular border around the specified icon, mimicking how it appears on the Compass.