Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
*** @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);
}