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

From Brighter Shores Wiki
Jump to navigation Jump to search
Content added Content deleted
No edit summary
(Try to autogenerate icons and themes)
Line 1: Line 1:
.leaflet-wiki-coordinates.leaflet-control {
/* MAPS */
margin: 0;
color: white;
padding: 5px 10px;
filter: drop-shadow(0 0 2px black);
}


@square: 3px;
.map.leaflet-container {
@circle: 50%;
.leaflet-wiki-coordinates.leaflet-control {

margin: 0;
@inherit: inherit;
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;
border-radius: 3px;
@miner: #749696;
@blacksmith: #B4A432;
/* professions */
@stonemason: #808789;
&.guard,
@detective: #5AB2BE;
&.guard_foe {
@leatherworker: #866E62;
background: #CA9C62 url(/images/Guard_small_icon.png) no-repeat center / contain;
@merchant: #78B492;
}
@palette: #DEDAD4;
&.chef,
@item: #90908C;
&.theme-chef,
@interactable: #927DCE;
&.chef_obj {
@neutral: #C0925A;
background: #8E7A6C url(/images/Chef_small_icon.png) no-repeat center / contain;
@aggressive: #D75650;
}

&.fisher,
@icons: guard inherit @circle,
&.theme-fisher {
chef chef @square,
background: #98D3CC url(/images/Fisher_small_icon.png) no-repeat center / contain;
fisher fisher @circle,
}
&.forager {
forager forager @square,
alchemist alchemist @square,
background: #DDDB93 url(/images/Forager_small_icon.png) no-repeat center / contain;
scout inherit @circle,
}
gatherer gatherer @square,
&.alchemist,
woodcutter woodcutter @square,
&.theme-alchemist {
carpenter carpenter @square,
background: #84CAA2 url(/images/Alchemist_small_icon.png) no-repeat center / contain;
minefighter inherit @circle,
}
bonewright bonewright @square,
&.scout {
miner miner @square,
background: #C09A60 url(/images/Scout_small_icon.png) no-repeat center / contain;
blacksmith blacksmith @square,
}
stonemason stonemason @square,
&.gatherer {
watchperson inherit @circle,
background: #C8C87C url(/images/Gatherer_small_icon.png) no-repeat center / contain;
detective detective @square,
}
leatherworker leatherworker @square,
&.woodcutter,
merchant merchant @square,
&.theme-woodcutter {
bank inherit @square,
background: #78C86C url(/images/Woodcutter_small_icon.png) no-repeat center / contain;
clipboard chef @square,
}
enchant item @circle,
&.carpenter,
hairdresser interactable @circle,
&.theme-carpenter,
interactable interactable @square,
&.carpenter_obj {
item item @square,
background: #9C8A7C url(/images/Carpenter_small_icon.png) no-repeat center / contain;
talk item @circle,
}
obelisk item @square,
&.minefighter {
palette palette @square,
background: #B2865D url(/images/Minefighter_small_icon.png) no-repeat center / contain;
portal_stone item @square,
}
search item @square,
&.bonewright,
shop inherit @circle,
&.theme-bonewright {
strange_stone item @square;
background: #B0B897 url(/images/Bonewright_small_icon.png) no-repeat center / contain;

}
@theme-onlys: aggressive aggressive,
&.miner {
interactable interactable,
background: #749696 url(/images/Miner_small_icon.png) no-repeat center / contain;
neutral neutral;
}

&.blacksmith {
.image(@str) {
background: #B4A432 url(/images/Blacksmith_small_icon.png) no-repeat center / contain;
@first: to-upper-case(extract(@str, 1));
}
@rest: to-lower-case(extract(@str, 2));
&.stonemason,
@image: ~'/images/@{first}@{rest}_small_icon.png';
&.theme-stonemason {
}
background: #808789 url(/images/Stonemason_small_icon.png) no-repeat center / contain;

}
.generate-map-icon-rules(@classname, @color, @shape) {
&.watchperson {
.image(@classname);
background: #AE8653 url(/images/Watchperson_small_icon.png) no-repeat center / contain;
.leaflet-marker-icon-icon-@{classname} {
}
background: @color url(@image) no-repeat center / contain;
&.detective {
border-radius: @shape;
background: #5AB2BE url(/images/Detective_small_icon.png) no-repeat center / contain;
}
}
}
&.leatherworker {
.generate-map-theme-rules(@classname, @color) when (@classname = @color) {
background: #866E62 url(/images/Leatherworker_small_icon.png) no-repeat center / contain;
.image(@classname);
}
.leaflet-marker-icon-theme-@{classname} {
&.merchant {
background-color: @color;
background: #78B492 url(/images/Merchant_small_icon.png) no-repeat center / contain;
}
}
}
&.shieldbearer {

background: red url(/images/Shieldbearer_small_icon.png) no-repeat center / contain;
.leaflet-marker-icon-entity {
}
background-color: red;
&.builder {
}
background: red url(/images/Builder_small_icon.png) no-repeat center / contain;
.each(@icons, {
}
@classname: extract(@value, 1);
&.armorer {
@color: extract(@value, 2);
background: red url(/images/Armorer_small_icon.png) no-repeat center / contain;
@shape: extract(@value, 3);
}
.generate-map-icon-rules(@classname, @color, @shape);
});
/* extra themes */
.each(@themes-only, {
&.theme-neutral {
@classname: extract(@value, 1);
background-color: #C0925A;
@color: extract(@value, 2);
}
.generate-map-theme-rules(@classname, @color)
&.theme-aggressive {
});
background-color: #C44A44;
.leaflet-marker-icon-shape-circle {
}
border-radius: @circle;
}
&.theme-item {
.leaflet-marker-icon-shape-square {
background-color: white;
border-radius: @square;
}
/* shapes */
&.shape-square,
&.theme-square {
border-radius: 3px;
}
&.shape-circle {
border-radius: 50px;
}
/* other */
&.strange_stone,
&.portal_stone {
background-color: #949A90;
}
}
}
}

Revision as of 04:37, 27 November 2024

.leaflet-wiki-coordinates.leaflet-control {
    margin: 0;
    color: white;
    padding: 5px 10px;
    filter: drop-shadow(0 0 2px black);
}

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

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

@icons: guard inherit @circle,
    chef chef @square,
	fisher fisher @circle,
	forager forager @square,
	alchemist alchemist @square,
    scout inherit @circle,
	gatherer gatherer @square,
	woodcutter woodcutter @square,
	carpenter carpenter @square,
    minefighter inherit @circle,
	bonewright bonewright @square,
	miner miner @square,
	blacksmith blacksmith @square,
	stonemason stonemason @square,
    watchperson inherit @circle,
	detective detective @square,
	leatherworker leatherworker @square,
	merchant merchant @square,
    bank inherit @square,
	clipboard chef @square,
	enchant item @circle,
	hairdresser interactable @circle,
    interactable interactable @square,
	item item @square,
	talk item @circle,
	obelisk item @square,
	palette palette @square,
	portal_stone item @square,
	search item @square,
    shop inherit @circle,
	strange_stone item @square;

@theme-onlys: aggressive aggressive,
	interactable interactable,
	neutral neutral;

.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(@image) no-repeat center / contain;
        border-radius: @shape;
    }
}
.generate-map-theme-rules(@classname, @color) when (@classname = @color) {
    .image(@classname);
    .leaflet-marker-icon-theme-@{classname} {
        background-color: @color;
    }
}

.leaflet-marker-icon-entity {
    background-color: red;
}
.each(@icons, {
    @classname: extract(@value, 1);
    @color: extract(@value, 2);
    @shape: extract(@value, 3);
    .generate-map-icon-rules(@classname, @color, @shape);
});
.each(@themes-only, {
    @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;
}