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

Add Pencil icon, and use map_icon instead of small_icon for entities
No edit summary
(Add Pencil icon, and use map_icon instead of small_icon for entities)
 
(26 intermediate revisions by the same user not shown)
Line 1:
//<pre>
.map {
float: right;
clear: right;
.leaflet-container {
background: #444444;
}
.leaflet-wiki-coordinates.leaflet-control {
margin: 0;
Line 4 ⟶ 12:
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: 3px5px;
@circle: 50%;
 
@inheritnone: inherit~'';
@chef: #9C8474;
@fisher: #98D3CC;
Line 20 ⟶ 37:
@miner: #749696;
@blacksmith: #B4A432;
@stonemason: #8087899C8A7C;
@detective: #5AB2BE;
@leatherworker: #866E62;
@merchant: #78B492;
@builder: #9C8A7C;
@palette: #DEDAD4;
@item: #90908C;
@interactableobstacle: #927DCE;
@neutral: #C0925A;
@aggressive: #D75650;
 
// classname color icon shape
@icons: guard inherit @circle,
// All these icons should also be found here: https://brightershoreswiki.org/w/Brighter_Shores:Orphanage
chef chef @square,
fisher@icons: fisherguard none Guard @circle,
forager forager chef chef Chef @square,
fisher fisher Fisher @circle,
alchemist alchemist @square,
scoutforager inheritforager Forager @circlesquare,
alchemist alchemist Alchemist @square,
gatherer gatherer @square,
scout none Scout @circle,
woodcutter woodcutter @square,
carpenter carpenter gatherer gatherer Gatherer @square,
woodcutter woodcutter Woodcutter @square,
minefighter inherit @circle,
carpenter carpenter Carpenter @square,
bonewright bonewright @square,
minefighter inheritnone Minefighter @circle,
miner miner @square,
bonewright bonewright Bonewright @square,
blacksmith blacksmith @square,
stonemason stonemason miner miner Miner @square,
blacksmith blacksmith Blacksmith @square,
watchperson inherit @circle,
stonemason stonemason Stonemason @square,
detective detective @square,
watchperson inheritnone Watchperson @circle,
leatherworker leatherworker @square,
detective detective Detective @square,
merchant merchant @square,
bankleatherworker inheritleatherworker Leatherworker @square,
clipboard chef merchant merchant Merchant @square,
builder builder Builder @square,
enchant item @circle,
chefbank chefnone Bank @square,
hairdresser interactable @circle,
interactableclipboard interactablechef Clipboard @square,
enchantress item Enchantress @circle,
item item @square,
hairdresser interactableobstacle Hairdresser @circle,
talk item @circle,
obelisk item item Item @square,
enchant talk item Talk @circle,
palette palette @square,
portal_stone obelisk item Obelisk @square,
search item obstacle obstacle Obstacle @square,
shoppalette inheritpalette Palette @circlesquare,
talk pencil item Pencil @circle,
strange_stone item @square;
portal_stone item Portal_Stone @square,
recipe none Recipe @square,
item search item Search @square,
shop none Shop @circle,
storage item Storage @square,
venture none Venture @square;
 
@themes: aggressive aggressive,
neutral neutral;
interactable interactable,
neutral neutral;
 
.generate-map-icon-rules(@classname, @color, @image, @shape) {
.image(@str) {
@first: to-upper-case(extract(@str, 1));
@rest: to-lower-case(extract(@str, 2));
@image: ~'/images/@{first}@{rest}_small_icon.png';
 
.generate-map-icon-rules(@classname, @color, @shape) {
.image(@classname);
.leaflet-marker-icon-icon-@{classname} {
background: @@color url('/images/@{image}_map_icon.png') no-repeat center / contain;
border-radius: @shape;
}
Line 81 ⟶ 97:
.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);
@shapeimage: 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, {
Line 105 ⟶ 129:
border-radius: @square;
}
//</pre>