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)
 
(38 intermediate revisions by 2 users not shown)
Line 1:
//<pre>
/* MAPS */
.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;
.map.leaflet-container {
@circle: 50%;
.leaflet-wiki-coordinates.leaflet-control {
 
margin: 0;
@none: ~'';
color: white;
@chef: #9C8474;
padding: 5px 10px;
@fisher: #98D3CC;
filter: drop-shadow(0 0 2px black);
@forager: #DDDB93;
}
@alchemist: #83C8A1;
@gatherer: #C8C87C;
/* ICONS */
@woodcutter: #78C86C;
@carpenter: #9C8A7C;
.leaflet-marker-icon {
@bonewright: #B0B897;
&.guard {
@miner: #749696;
background: #CA9C62 url(/images/Guard_small_icon.png) no-repeat center / 70%;
@blacksmith: #B4A432;
}
@stonemason: #9C8A7C;
&.chef {
@detective: #5AB2BE;
background: #8E7A6C url(/images/Chef_small_icon.png) no-repeat center / 70%;
@leatherworker: #866E62;
}
@merchant: #78B492;
&.fisher {
@builder: #9C8A7C;
background: #98D3CC url(/images/Fisher_small_icon.png) no-repeat center / 70%;
@palette: #DEDAD4;
}
@item: #90908C;
&.forager {
@obstacle: #927DCE;
background: #DDDB93 url(/images/Forager_small_icon.png) no-repeat center / 70%;
@neutral: #C0925A;
}
@aggressive: #D75650;
&.alchemist {
 
background: #84CAA2 url(/images/Alchemist_small_icon.png) no-repeat center / 70%;
// classname color icon shape
}
// All these icons should also be found here: https://brightershoreswiki.org/w/Brighter_Shores:Orphanage
&.scout {
@icons: guard none Guard @circle,
background: #C09A60 url(/images/Scout_small_icon.png) no-repeat center / 70%;
chef chef Chef @square,
}
fisher fisher Fisher @circle,
&.gatherer {
forager forager Forager @square,
background: #C8C87C url(/images/Gatherer_small_icon.png) no-repeat center / 70%;
alchemist alchemist Alchemist @square,
}
scout none Scout @circle,
&.woodcutter {
gatherer gatherer Gatherer @square,
background: #78C86C url(/images/Woodcutter_small_icon.png) no-repeat center / 70%;
woodcutter woodcutter Woodcutter @square,
}
&. carpenter {carpenter Carpenter @square,
minefighter none Minefighter @circle,
background: red url(/images/Carpenter_small_icon.png) no-repeat center / 70%;
bonewright bonewright Bonewright @square,
}
miner miner Miner @square,
&.minefighter {
blacksmith blacksmith Blacksmith @square,
background: #B2865D url(/images/Minefighter_small_icon.png) no-repeat center / 70%;
stonemason stonemason Stonemason @square,
}
watchperson none Watchperson @circle,
&.bonewright {
detective detective Detective @square,
background: #B0B897 url(/images/Bonewright_small_icon.png) no-repeat center / 70%;
leatherworker leatherworker Leatherworker @square,
}
merchant merchant Merchant @square,
&.miner {
builder builder Builder @square,
background: #749696 url(/images/Miner_small_icon.png) no-repeat center / 70%;
bank none Bank @square,
}
clipboard chef Clipboard @square,
&.blacksmith {
enchantress item Enchantress @circle,
background: #B4A432 url(/images/Blacksmith_small_icon.png) no-repeat center / 70%;
hairdresser obstacle Hairdresser @circle,
}
item item Item @square,
&.stonemason {
talk item Talk @circle,
background: #808789 url(/images/Stonemason_small_icon.png) no-repeat center / 70%;
obelisk item Obelisk @square,
}
obstacle obstacle Obstacle @square,
&.watchperson {
palette palette Palette @square,
background: #AE8653 url(/images/Watchperson_small_icon.png) no-repeat center / 70%;
pencil item Pencil @circle,
}
portal_stone item Portal_Stone @square,
&.detective {
recipe none Recipe @square,
background: #5AB2BE url(/images/Detective_small_icon.png) no-repeat center / 70%;
search item Search @square,
}
shop none Shop @circle,
&.leatherworker {
storage item Storage @square,
background: #866E62 url(/images/Leatherworker_small_icon.png) no-repeat center / 70%;
venture none Venture @square;
}
 
&.merchant {
@themes: aggressive aggressive,
background: #78B492 url(/images/Merchant_small_icon.png) no-repeat center / 70%;
neutral neutral;
}
 
&.shieldbearer {
.generate-map-icon-rules(@classname, @color, @image, @shape) {
background: red url(/images/Shieldbearer_small_icon.png) no-repeat center / 70%;
.leaflet-marker-icon-icon-@{classname} {
}
background: @@color url('/images/@{image}_map_icon.png') no-repeat center / contain;
&.builder {
border-radius: @shape;
background: red url(/images/Builder_small_icon.png) no-repeat center / 70%;
}
}
}
&.armorer {
.generate-map-theme-rules(@classname, @color) when (@classname = @color) {
background: red url(/images/Armorer_small_icon.png) no-repeat center / 70%;
.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>