MediaWiki:Common.less/leaflet.less: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
No edit summary |
(Add Pencil icon, and use map_icon instead of small_icon for entities) |
||
(13 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
//<pre> |
|||
.map { |
|||
float: right; |
|||
clear: right; |
|||
} |
|||
.leaflet-container { |
|||
background: #444444; |
|||
} |
|||
.leaflet-wiki-coordinates.leaflet-control { |
.leaflet-wiki-coordinates.leaflet-control { |
||
margin: 0; |
margin: 0; |
||
Line 4: | Line 12: | ||
padding: 5px 10px; |
padding: 5px 10px; |
||
filter: drop-shadow(0 0 2px black); |
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: |
@square: 5px; |
||
@circle: 50%; |
@circle: 50%; |
||
Line 20: | Line 37: | ||
@miner: #749696; |
@miner: #749696; |
||
@blacksmith: #B4A432; |
@blacksmith: #B4A432; |
||
@stonemason: # |
@stonemason: #9C8A7C; |
||
@detective: #5AB2BE; |
@detective: #5AB2BE; |
||
@leatherworker: #866E62; |
@leatherworker: #866E62; |
||
@merchant: #78B492; |
@merchant: #78B492; |
||
@builder: #9C8A7C; |
|||
@palette: #DEDAD4; |
@palette: #DEDAD4; |
||
@item: #90908C; |
@item: #90908C; |
||
Line 34: | Line 52: | ||
@icons: guard none Guard @circle, |
@icons: guard none Guard @circle, |
||
chef chef Chef @square, |
chef chef Chef @square, |
||
fisher fisher Fisher @circle, |
|||
forager forager Forager @square, |
|||
alchemist alchemist Alchemist @square, |
|||
scout none Scout @circle, |
scout none Scout @circle, |
||
gatherer gatherer Gatherer @square, |
|||
woodcutter woodcutter Woodcutter @square, |
|||
carpenter carpenter Carpenter @square, |
|||
minefighter none Minefighter @circle, |
minefighter none Minefighter @circle, |
||
bonewright bonewright Bonewright @square, |
|||
miner miner Miner @square, |
|||
blacksmith blacksmith Blacksmith @square, |
|||
stonemason stonemason Stonemason @square, |
|||
watchperson none Watchperson @circle, |
watchperson none Watchperson @circle, |
||
detective detective Detective @square, |
|||
leatherworker leatherworker Leatherworker @square, |
|||
merchant merchant Merchant @square, |
|||
builder builder Builder @square, |
|||
bank none Bank @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, |
obstacle obstacle Obstacle @square, |
||
palette palette Palette @square, |
|||
pencil item Pencil @circle, |
|||
portal_stone item Portal_Stone @square, |
|||
recipe none Recipe @square, |
|||
search item Search @square, |
|||
shop none Shop @circle, |
shop none Shop @circle, |
||
storage item Storage @square, |
|||
venture none Venture @square; |
|||
@themes: aggressive aggressive, |
@themes: aggressive aggressive, |
||
neutral neutral; |
|||
.generate-map-icon-rules(@classname, @color, @image, @shape) { |
.generate-map-icon-rules(@classname, @color, @image, @shape) { |
||
.leaflet-marker-icon-icon-@{classname} { |
.leaflet-marker-icon-icon-@{classname} { |
||
background: @@color url('/images/@{image} |
background: @@color url('/images/@{image}_map_icon.png') no-repeat center / contain; |
||
border-radius: @shape; |
border-radius: @shape; |
||
} |
} |
||
Line 83: | Line 104: | ||
.leaflet-marker-icon-entity { |
.leaflet-marker-icon-entity { |
||
background-color: red; |
background-color: red; |
||
box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 2px 2px; |
|||
} |
} |
||
each(@icons, { |
each(@icons, { |
||
Line 107: | Line 129: | ||
border-radius: @square; |
border-radius: @square; |
||
} |
} |
||
//</pre> |
Latest revision as of 00:54, 15 December 2024
//<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,
pencil item Pencil @circle,
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}_map_icon.png') no-repeat center / contain;
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>