MediaWiki:Common.less/leaflet.less: Difference between revisions

//<pre>
.map {
    float: right;
    clear: right;
}
.leaflet-container {
    background: #444444;
}
.leaflet-wiki-coordinates.leaflet-control {
    margin: 0;
    color: white;
    padding: 5px 10px;
    filter: drop-shadow(0 0 2px black);
}
.leaflet-tile-loaded {
    image-rendering: pixelated;
}
// Prevents stuttery zoom when prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
  .leaflet-zoom-anim .leaflet-zoom-animated {
    transition-duration: 0.25s !important;
  }
}

@square: 5px;
@circle: 50%;

@none: ~'';
@chef: #9C8474;
@fisher: #98D3CC;
@forager: #DDDB93;
@alchemist: #83C8A1;
@gatherer: #C8C87C;
@woodcutter: #78C86C;
@carpenter: #9C8A7C;
@bonewright: #B0B897;
@miner: #749696;
@blacksmith: #B4A432;
@stonemason: #9C8A7C;
@detective: #5AB2BE;
@leatherworker: #866E62;
@merchant: #78B492;
@builder: #9C8A7C;
@palette: #DEDAD4;
@item: #90908C;
@obstacle: #927DCE;
@neutral: #C0925A;
@aggressive: #D75650;

// classname color icon shape
// All these icons should also be found here: https://brightershoreswiki.org/w/Brighter_Shores:Orphanage
@icons: guard none Guard @circle,
    chef chef Chef @square,
    fisher fisher Fisher @circle,
    forager forager Forager @square,
    alchemist alchemist Alchemist @square,
    scout none Scout @circle,
    gatherer gatherer Gatherer @square,
    woodcutter woodcutter Woodcutter @square,
    carpenter carpenter Carpenter @square,
    minefighter none Minefighter @circle,
    bonewright bonewright Bonewright @square,
    miner miner Miner @square,
    blacksmith blacksmith Blacksmith @square,
    stonemason stonemason Stonemason @square,
    watchperson none Watchperson @circle,
    detective detective Detective @square,
    leatherworker leatherworker Leatherworker @square,
    merchant merchant Merchant @square,
    builder builder Builder @square,
    bank none Bank @square,
    clipboard chef Clipboard @square,
    enchantress item Enchantress @circle,
    hairdresser obstacle Hairdresser @circle,
    item item Item @square,
    talk item Talk @circle,
    obelisk item Obelisk @square,
    obstacle obstacle Obstacle @square,
    palette palette Palette @square,
    portal_stone item Portal_Stone @square,
    recipe none Recipe @square,
    search item Search @square,
    shop none Shop @circle,
    storage item Storage @square,
    venture none Venture @square;

@themes: aggressive aggressive,
    neutral neutral;

.generate-map-icon-rules(@classname, @color, @image, @shape) {
    .leaflet-marker-icon-icon-@{classname} {
        background: @@color url('/images/@{image}_small_icon.png') no-repeat center / 70%;
        border-radius: @shape;
    }
}
.generate-map-theme-rules(@classname, @color) when (@classname = @color) {
    .leaflet-marker-icon-theme-@{classname} {
        background-color: @@color;
    }
}

// Highlight bad unclassified entities in red to catch errors
.leaflet-marker-icon-entity {
    background-color: red;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 2px 2px;
}
each(@icons, {
    @classname: extract(@value, 1);
    @color: extract(@value, 2);
    @image: extract(@value, 3);
    @shape: extract(@value, 4);
    .generate-map-icon-rules(@classname, @color, @image, @shape);
});
each(@icons, {
    @classname: extract(@value, 1);
    @color: extract(@value, 2);
    .generate-map-theme-rules(@classname, @color)
});
each(@themes, {
    @classname: extract(@value, 1);
    @color: extract(@value, 2);
    .generate-map-theme-rules(@classname, @color)
});
.leaflet-marker-icon-shape-circle {
    border-radius: @circle;
}
.leaflet-marker-icon-shape-square {
    border-radius: @square;
}
//</pre>