dev

Note: After publishing, you may have to bypass your browser's cache to see the changes.

/**
*** @title				LocalNavExploreIcons
*** @description		Adds missing icons to the rest of list items under the
***						"Explore" menu on the local navigation bar.
*** @author				Polymeric
*** @license			CC-BY-SA 3.0
**/

:root {
	--dev-nav-icon--all-images: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 22 22' %3E%3Cpath fill-rule='evenodd' d='M3 21h5v-5H3v5zm6-7H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1zm6-11h7a1 1 0 1 0 0-2h-7a1 1 0 1 0 0 2m7 11h-7a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2m0-6h-7a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2m0 13h-7a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2M3 8h5V3H3v5zm6-7H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'%3E%3C/path%3E%3C/svg%3E");
	--dev-nav-icon--community: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 10a1 1 0 1 0 0 2c3.309 0 6 2.691 6 6a1 1 0 1 0 2 0c0-4.411-3.589-8-8-8m-5-1c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3 3 1.35 3 3m8-4c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3 3 1.35 3 3M8 14c-4.411 0-8 3.589-8 8a1 1 0 1 0 2 0c0-3.309 2.691-6 6-6s6 2.691 6 6a1 1 0 1 0 2 0c0-4.411-3.589-8-8-8'%3E%3C/path%3E%3C/svg%3E");
	--dev-nav-icon--map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 23 22'%3E%3Cpath d='M3 5.66v14.823l5-2.142V3.516L3 5.66zm7 12.681l5 2.142V5.66l-5-2.143v14.825zM17 5.66v14.824l5-2.142V3.516L17 5.66zM16 23a.994.994 0 0 1-.29-.043h-.001a1.687 1.687 0 0 1-.107-.039L9 20.088 2.394 22.92A1.002 1.002 0 0 1 1 22V5c0-.4.238-.762.606-.919l6.997-2.999c.029-.012.059-.024.088-.033h.004v-.002a.995.995 0 0 1 .595-.004h.001a.979.979 0 0 1 .107.04L16 3.912l6.606-2.832A.999.999 0 0 1 24 2v17c0 .4-.238.762-.606.92l-6.997 2.998a1.573 1.573 0 0 1-.088.033l-.003.001h-.001v.001c-.1.031-.202.047-.305.047z'%3E%3C/path%3E%3C/svg%3E");
	--dev-nav-icon--blog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 10H6a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2m4 2c0 1.654-1.346 3-3 3h-6a.997.997 0 0 0-.707.293L7 20.586V16a1 1 0 0 0-1-1H5c-1.654 0-3-1.346-3-3V5c0-1.654 1.346-3 3-3h14c1.654 0 3 1.346 3 3v7zM19 0H5C2.243 0 0 2.243 0 5v7c0 2.757 2.243 5 5 5v6a1 1 0 0 0 1.707.707L13.414 17H19c2.757 0 5-2.243 5-5V5c0-2.757-2.243-5-5-5zm-1 5H6a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2'%3E%3C/path%3E%3C/svg%3E");
	--dev-nav-icon--random: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 16 16'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/%3E%3C/svg%3E");
	--dev-nav-icon--video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 18h12v-2.73a.999.999 0 0 1 1.423-.907L22 17.43V6.57l-6.577 3.067A1 1 0 0 1 14 8.73V6H2v12zm21 2a.998.998 0 0 1-.423-.094L16 16.84V19a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2.16l6.577-3.066A1 1 0 0 1 24 5v14a1.002 1.002 0 0 1-1 1z'%3E%3C/path%3E%3C/svg%3E");
	--dev-nav-icon--image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 22 22'%3E%3Cpath d='M3 21v-6.586l4-4 6.293 6.293a.999.999 0 0 0 1.414 0L18 13.414l3 3V21H3zM21 3v10.586l-2.293-2.293a.999.999 0 0 0-1.414 0L14 14.586 7.707 8.293a.999.999 0 0 0-1.414 0L3 11.586V3h18zm1-2H2a1 1 0 0 0-1 1v20a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm-8 8c1.103 0 2-.897 2-2s-.897-2-2-2-2 .897-2 2 .897 2 2 2'%3E%3C/path%3E%3C/svg%3E");
}

/* Creating pseudo-elements and their styles. */
.fandom-community-header__local-navigation .explore-menu .wds-list a:not([data-tracking='explore-main-page'], [data-tracking='explore-discuss'])::before {
	background-color: currentColor;
	bottom: 1px;
	content: '';
	display: inline-block;
	height: 12px;
	margin-inline-end: 12px;
	-webkit-mask: center/contain no-repeat;
	mask: center/contain no-repeat;
	min-width: 12px;
	position: relative;
	transition: background-color 300ms;
	width: 12px;
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='explore-all-pages']::before {
	-webkit-mask-image: var(--dev-nav-icon--all-images);
	mask-image: var(--dev-nav-icon--all-images);
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='explore-community']::before {
	-webkit-mask-image: var(--dev-nav-icon--community);
	mask-image: var(--dev-nav-icon--community);
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='interactive-maps']::before {
	-webkit-mask-image: var(--dev-nav-icon--map);
	mask-image: var(--dev-nav-icon--map);
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='explore-blogs']::before {
	-webkit-mask-image: var(--dev-nav-icon--blog);
	mask-image: var(--dev-nav-icon--blog);
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='explore-random']::before {
	-webkit-mask-image: var(--dev-nav-icon--random);
	mask-image: var(--dev-nav-icon--random);
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='explore-videos']::before {
	-webkit-mask-image: var(--dev-nav-icon--video);
	mask-image: var(--dev-nav-icon--video);
}

.fandom-community-header__local-navigation .explore-menu .wds-list a[data-tracking='explore-images']::before {
	-webkit-mask-image: var(--dev-nav-icon--image);
	mask-image: var(--dev-nav-icon--image);
}

/* Consistent margin on icons. */
.fandom-community-header__local-navigation .navigation-item-icon {
	margin-inline-end: 12px;
}

/* Inverting icon's X axis for right-to-left pages. */
[dir='rtl'] .fandom-community-header__local-navigation .explore-menu .wds-list a:where([data-tracking='explore-all-pages'],
[data-tracking='explore-blogs'],
[data-tracking='explore-random'],
[data-tracking='explore-videos'])::before {
	transform: scaleX(-1);
}