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.
/*
MapsExtended.css
Author: Macklin
Styles for MapsExtended
*/
/* === General styles === */
/* This rule only exists to detect whether the CSS has already been imported or not. If this rule is found, the css at MediaWiki:MapsExtended.css (on the dev wiki) is not imported */
.mapsExtended {
--maps-extended: 1; /* Only exists so an empty rule isn't removed */
}
.mapsExtended_minimalLayout .interactive-maps__map {
border-radius: 0;
}
.interactive-maps-container {
height: inherit;
min-height: inherit;
}
.mapsExtended_cursorDebug {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 200px;
padding: 0.1em;
background-color: var(--theme-page-background-color);
color: var(--theme-body-text-color);
font-family: monospace;
text-align: right;
}
/* === Marker styles === */
/* This works around Chrome's renderer which makes everything fuzzy when animating an opacity value via a CSS transition */
.leaflet-marker-pane .leaflet-marker-icon img {
backface-visibility: hidden;
}
/* Default to a centered anchor. This does mean that there might be some flicker on icons that don't use a center anchor */
.MapMarker-module_markerCustomIcon__YfQnB:not(.uses-icon-anchor) {
margin-top: -13px !important;
margin-left: -13px !important;
}
/* Remove drop-shadow filter, as it's a massive performance hit */
.MapMarker-module_markerIcon__dHSar {
filter: none !important;
}
/* === Popup styles === */
/* Temporary fix for popups not hiding properly */
.leaflet-popup {
transition: opacity 0.2s linear;
}
/* Because the custom padding on images is removed, let the images in custom popups keep their size */
.mapsExtended_customPopup .MarkerPopup-module_image__7I5s4 {
position: unset;
}
/* Change how padding popups works, by padding the outermost content */
.MarkerPopup-module_popup__eNi-- .MarkerPopup-module_contentTopContainer__qgen9,
.MarkerPopup-module_popup__eNi-- .MarkerPopup-module_scrollableContent__0N5PS {
padding: 0;
}
.MarkerPopup-module_content__9zoQq {
padding: 18px;
}
.MarkerPopup-module_scrollableContent__0N5PS:not(:empty) {
margin-top: 6px;
}
/* === Tooltip styles === */
/* Leaflet uses inline styles for opacity by default, but it's easier to override as a rule */
.leaflet-tooltip {
opacity: 0.9;
}
.MarkerTooltip-module_tooltip__--cjf {
display: none;
}
/* === Edit control === */
/* Don't show image bullets in dropdown list - The built-in style only handles list-style-type */
.interactive-maps__options-dropdown .wds-dropdown__content .wds-list {
list-style-image: none;
}
/* Display dropdown above other controls */
.leaflet-control:has(.interactive-maps__edit-control) {
z-index: 801;
}
/* === Fullscreen styles === */
.leaflet-control:has(.map-fullscreen-control) {
display: none;
}
/* Applied by default to .page-content img, but not in fullscreen - so apply directly to icons */
.MarkerIcon-module_icon__dNELM img {
vertical-align: middle;
}
/* Fullscreen button */
.leaflet-control-fullscreen-button {
border-radius: 3px;
cursor: pointer;
}
/* Hide zoom-out SVG when zoom-in button should be shown and vice versa */
.leaflet-control-fullscreen-button-zoom-in > svg[data-id="wds-icons-zoom-out-small"],
.leaflet-control-fullscreen-button-zoom-out > svg[data-id="wds-icons-zoom-in-small"] {
display: none;
}
/* Fullscreen functionality */
/* mapsExtended_fullscreen indicates a specific map that is in any fullscreen */
/* windowed-fullscreen at the root indicates that any map is in windowed-fullscreen */
/* fullscreen at the root indicates that any map is in screen-fullscreen */
/* Override the size of the map when in fullscreen so it fills the screen */
:is(.fullscreen, .windowed-fullscreen) .mapsExtended_fullscreen .leaflet-container {
height: 100vh !important;
width: 100vw !important;
border-radius: 0;
}
/* Don't allow scroll when in windowed fullscreen */
.windowed-fullscreen {
overflow: hidden !important;
}
/* Make map root absolutely positioned when in windowed fullscreen */
.windowed-fullscreen .mapsExtended_fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
visibility: visible;
}
/* Windowed fullscreen hiding */
/* Transition any current notifications to not sit in the middle of the map */
.fullscreen .notifications-placeholder,
.windowed-fullscreen .notifications-placeholder {
transition: left 0.2s ease-in-out;
left: 18px;
}
/* Hide the sticky header */
.windowed-fullscreen .fandom-sticky-header,
.windowed-fullscreen .fandom-sticky-header.is-visible {
transform: translateY(-1px);
}
/* Hide other elements with display: none */
.windowed-fullscreen .global-navigation,
.windowed-fullscreen .global-explore-navigation,
.windowed-fullscreen .marketing-notifications,
.windowed-fullscreen #WikiaBar,
.windowed-fullscreen .mw-editform,
.windowed-fullscreen .right-rail-wrapper,
.windowed-fullscreen .global-top-navigation {
display: none !important;
}
/* Since the map exists in the main-container, only set its visibility instead of using display:none */
/* This way we can override the visibility on the map itself, which means no need to move around the element */
.windowed-fullscreen .main-container {
visibility: hidden !important;
}
/* Restyle the lightbox to take advantage of the added space */
.fullscreen .skin-fandomdesktop .LightboxModal,
.windowed-fullscreen .skin-fandomdesktop .LightboxModal {
margin-left: initial;
}
.fullscreen .LightboxModal {
height: 90vh !important;
}
.fullscreen .LightboxModal .modalContent,
.fullscreen .LightboxModal .WikiaLightbox {
position: absolute;
width: 100%;
height: 100%;
}
.fullscreen .LightboxModal .LightboxCarousel {
height: 135px;
}
.fullscreen .LightboxModal .LightboxCarousel .LightboxCarouselContainer li {
list-style: none;
}
.fullscreen .LightboxModal .LightboxCarousel .LightboxCarouselContainer ul {
margin: 0;
}
.fullscreen .LightboxModal .media {
max-height: 100% !important;
}
.fullscreen .LightboxModal.pinned-mode .media {
margin: 0;
}
.fullscreen .LightboxModal .user-details .avatar {
top: 0;
}
/* Fullscreen filters */
/* Move the filters dropdown to within the map body when in fullscreen */
:is(.fullscreen, .windowed-fullscreen) .mapsExtended_fullscreen .interactive-maps__filters-list,
.mapsExtended_minimalLayout .interactive-maps__filters-list {
width: fit-content;
margin: 12px 0 0 12px;
position: absolute;
z-index: 2;
}
/* Add background back to pill buttons */
:is(.fullscreen, .windowed-fullscreen) .mapsExtended_fullscreen .interactive-maps__filters-list .wds-pill-button,
.mapsExtended_minimalLayout .interactive-maps__filters-list .wds-pill-button {
background-color: rgba(var(--theme-page-background-color--rgb), 0.75);
box-shadow: 0 1px 3px 0 rgb(14 25 26 / 30%);
color: var(--theme-page-text-color);
border: 1px solid var(--theme-border-color);
}
:is(.fullscreen, .windowed-fullscreen) .mapsExtended_fullscreen .interactive-maps__filters-list .wds-pill-button:hover,
.mapsExtended_minimalLayout .interactive-maps__filters-list .wds-pill-button:hover {
box-shadow: inset 0 0 18px 36px hsl(0deg 0% 100% / 10%);
}
/* Slightly brighter buttons using accent color
:is(.fullscreen, .windowed-fullscreen) .mapsExtended_fullscreen .interactive-maps__filters-list .wds-pill-button {
color: var(--theme-accent-label-color);
background-color: var(--theme-accent-color);
box-shadow: 0 1px 3px 0 rgb(14 25 26 / 30%);
border: none;
}
:is(.fullscreen, .windowed-fullscreen) .mapsExtended_fullscreen .interactive-maps__filters-list .wds-pill-button:hover {
background-color: var(--theme-accent-color--hover);
box-shadow: inset 0 0 18px 36px hsl(0deg 0% 100% / 10%);
}
*/
/* === Search styles === */
/* Keep search dropdown open when search box is focused */
.mapsExtended_searchDropdown.wds-dropdown:focus-within .wds-dropdown__content,
.mapsExtended_searchDropdown.wds-dropdown:focus-within:not(.wds-no-chevron):after,
.mapsExtended_searchDropdown.wds-dropdown:focus-within:not(.wds-no-chevron):before {
display: block;
}
/* Search root styling */
.mapsExtended_searchDropdown > .wds-dropdown__content {
width: 250px;
}
.mapsExtended_search {
display: flex;
flex-direction: column;
max-height: inherit;
}
/* Search box */
.mapsExtended_searchBox {
width: 100%;
padding: 18px 12px;
margin: 0 !important;
}
/* Don't allow input hint to wrap, instead use ellipsis */
.mapsExtended_searchBox > .wds-input__hint-container > .wds-input__hint,
.mapsExtended_sidebarSearchBox > .mapsExtended_sidebarSearchBody > .wds-input__hint-container > .wds-input__hint {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 1em;
}
/* Search results */
.mapsExtended_searchResults {
width: 100%;
font-size: 14px;
font-weight: normal;
line-height: 1em;
user-select: none;
position: relative;
flex-grow: 1;
overflow-y: auto;
overscroll-behavior: contain;
}
/* Search results container/category */
.mapsExtended_searchResults_container {
margin: 8px 0;
}
/* Grey out when the category is filtered out */
.mapsExtended_searchResults_container.filtered {
opacity: 0.5;
cursor: default;
}
/* Items shouldn't respond to pointer events when a category is filtered */
.mapsExtended_searchResults_container.filtered > .mapsExtended_searchResults_items > .mapsExtended_searchResults_item {
cursor: default;
pointer-events: none;
}
/* Hide items when the container is collapsed */
.mapsExtended_searchResults_container.collapsed > .mapsExtended_searchResults_items {
display: none;
}
/* Search results category header */
.mapsExtended_searchResults_headerWrapper {
position: sticky;
top: -0.5px;
background-color: var(--theme-page-background-color--secondary);
}
/* Search results category header content */
.mapsExtended_searchResults_header {
padding: 12px;
display: flex;
align-items: center;
cursor: pointer;
background-color: rgba(var(--theme-page-text-color--rgb), 0.2);
}
.mapsExtended_searchResults_header:hover {
background-color: rgba(var(--theme-page-text-color--rgb), 0.25);
}
/* Search results items container */
.mapsExtended_searchResults_items:not(:empty) {
overflow-y: hidden;
padding: 8px 0;
border-bottom: 1px solid var(--theme-border-color);
}
/* Search results item */
.mapsExtended_searchResults_item {
padding: 12px 24px;
padding-bottom: 10px;
cursor: pointer;
}
/* 10% white (or black on light mode) overlay on hover of a on-selected item in a non-filtered category */
.mapsExtended_searchResults_container:not(.filtered) .mapsExtended_searchResults_item:not(.selected):hover {
background-color: rgba(var(--theme-page-text-color--rgb), 0.1);
}
/* 15% white (or black on light mode) overlay on mouse down of item in non-filtered category */
.mapsExtended_searchResults_container:not(.filtered) .mapsExtended_searchResults_item:not(.selected):hover:active {
background-color: rgba(var(--theme-page-text-color--rgb), 0.15);
}
/* Change to accent colors when the item is selected */
.mapsExtended_searchResults_item.selected {
background-color: var(--theme-accent-color);
color: var(--theme-accent-label-color);
}
/* Selected item mousedown */
.mapsExtended_searchResults_item.selected:hover:active {
background-color: var(--theme-accent-color--hover);
}
/* Search results item subtitle */
.mapsExtended_searchResults_item > div:last-of-type {
font-size: 10px;
color:var(--theme-page-text-mix-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mapsExtended_searchResults_item.selected > div:last-of-type {
color: var(--theme-accent-dynamic-color-2);
}
/* Highlighting circle around leaflet markers when their item is hovered in the search */
.leaflet-marker-icon.search-result-highlight:before,
.leaflet-marker-icon.search-result-highlight-fixed:before {
content: '';
width: 64px;
height: 64px;
border-width: 2px;
border-style: solid;
border-color: var(--theme-accent-color);
border-radius: 50%;
background-color: rgba(var(--theme-accent-color--rgb), 65%);
transition-property: filter, border-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
z-index: -1 !important;
}
/* Adding a brighter highlight when the search item is clicked */
.leaflet-marker-icon.search-result-highlight-fixed:before {
border-color: var(--theme-page-dynamic-color-1);
filter: drop-shadow(0px 0px 8px var(--theme-page-dynamic-color-1));
}
/* When mapsExtended_searchFiltered is applied to the root leaflet-container, any markers not with the search-result class will be hidden */
.mapsExtended_searchFiltered .leaflet-marker-icon:not(.search-result) {
visibility: hidden !important; /* Use visibility for performance */
}
/* When mapsExtended_searchFiltered is applied to the root leaflet-container, search items not with the search-result class will be removed */
.mapsExtended_searchFiltered .mapsExtended_searchResults .mapsExtended_searchResults_item:not(.search-result),
.mapsExtended_searchFiltered .mapsExtended_searchResults .mapsExtended_searchResults_container:not(.search-result) {
display: none !important;
}
/* === Dropdowns (both category group and search) === */
/* Change some of the scroll up/down shadows to work a bit better, since
currently the bottom shadow is always shown even if scrolled to the bottom */
/* Pre-render shadows, but just change opacity when we should show them */
.interactive-maps__filters-dropdown-list::before,
.interactive-maps__filters-dropdown-list::after {
content: "";
position: sticky;
display: block;
width: 100%;
transition: opacity 0.2s linear;
opacity: 0;
}
.can-scroll-up::before, .can-scroll-down::after {
opacity: 1;
}
.interactive-maps__filters-dropdown-list::before {
box-shadow: rgb(0 0 0 / 20%) 0px -20px 12px 8px;
}
.interactive-maps__filters-dropdown-list::after {
box-shadow: rgb(0 0 0 / 20%) 0px 0px 12px 8px;
}
.interactive-maps__filters-dropdown-list {
padding: 18px 12px;
max-height: inherit; /* Inherit max-height set on parent */
max-width: none !important; /* Override inline max-width set by Maps */
overscroll-behavior: contain;
}
/* .interactive-maps__filters-list isn't related to the filters list specifically, it houses the buttons at the top of the map */
.interactive-maps .interactive-maps__filters-list {
margin-bottom: 12px;
}
.interactive-maps__filters-list > * {
margin-right: 6px;
}
.interactive-maps__filters-list > .disabled {
opacity: 0.5;
pointer-events: none;
}
.interactive-maps__filters-list .wds-dropdown__content {
padding: 0;
overflow: hidden;
background-color: rgba(var(--theme-page-background-color--secondary--rgb), 0.95);
}
/* === Category groups === */
.mapsExtended_categoryGroup {
overflow-y: hidden;
}
.mapsExtended_categoryGroup .wds-checkbox {
width: 100%;
}
.mapsExtended_categoryGroupHeader {
position: relative;
user-select: none;
}
.mapsExtended_categoryGroupHeader > .wds-checkbox > label {
margin-right: 1em;
}
.mapsExtended_categoryGroupHeaderLabel {
align-self: center;
cursor: pointer;
line-height: 1;
}
.mapsExtended_categoryGroupHeaderArrow {
color: rgba(var(--theme-page-text-color--rgb), 0.5);
width: 12px;
margin-left: auto;
cursor: pointer;
align-self: center;
}
.mapsExtended_categoryGroupHeaderArrow:hover {
color: var(--theme-page-text-color);
}
.mapsExtended_categoryGroupHeaderArrow--collapsed > svg {
transform: rotate(180deg);
}
.mapsExtended_categoryGroupChildren {
margin-left: 16px;
transition: max-height 0.25s ease-in-out;
max-height: fit-content;
overflow-y: hidden;
}
/* Negates the margin-bottom on filters */
.interactive-maps__filter-all,
.interactive-maps__filter:not(:last-child) {
margin-bottom: 0;
}
/* Tightens the padding on filters */
.interactive-maps__filter,
.interactive-maps__filter-all {
padding: 4px 3px;
}
/* Add indeterminate support on checkbox */
.wds-checkbox input[type=checkbox]:indeterminate+label:after {
background-color: var(--wds-checkbox-check-color);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 18 18'%3E%3Cpath d='M 3 15 L 15 15 L 15 3 L 3 3 L 3 15 Z M 16 1 L 2 1 C 1.447 1 1 1.447 1 2 L 1 16 C 1 16.552 1.447 17 2 17 L 16 17 C 16.552 17 17 16.552 17 16 L 17 2 C 17 1.447 16.552 1 16 1 Z' fill-rule='evenodd'/%3E%3Crect x='3.733' y='6.172' width='8.5' height='2.25' rx='1' ry='1' style='fill-rule: evenodd;' transform='matrix(1, -0.000663, 0, 1, 1.017, 1.708293)'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 18 18'%3E%3Cpath d='M 3 15 L 15 15 L 15 3 L 3 3 L 3 15 Z M 16 1 L 2 1 C 1.447 1 1 1.447 1 2 L 1 16 C 1 16.552 1.447 17 2 17 L 16 17 C 16.552 17 17 16.552 17 16 L 17 2 C 17 1.447 16.552 1 16 1 Z' fill-rule='evenodd'/%3E%3Crect x='3.733' y='6.172' width='8.5' height='2.25' rx='1' ry='1' style='fill-rule: evenodd;' transform='matrix(1, -0.000663, 0, 1, 1.017, 1.708293)'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
}
.wds-checkbox input[type=checkbox]:indeterminate:hover:not(:disabled)+label:after {
background-color: var(--wds-checkbox-check-color--hover);
}
/* === Sidebar === */
/* Change map-module-container to flex layout */
.Map-module_container__dn27- {
display: flex;
position: relative;
container: map-module-container / inline-size;
overflow: hidden;
}
.mapsExtended_sidebar {
width: 400px;
height: 100%;
position: absolute;
color: var(--theme-page-text-color);
background-color: var(--theme-page-background-color);
}
/* The sidebar wrapper is what actually pushes the map out of the way */
.mapsExtended_sidebarWrapper {
min-width: 0px;
z-index: 3;
}
.mapsExtended_sidebarWrapperLeft {
order: -1;
}
.mapsExtended_sidebarWrapperRight {
order: 1;
}
.mapsExtended_sidebarContent {
height: inherit;
padding: 20px;
padding-bottom: 0;
overflow: hidden scroll;
overscroll-behavior: contain;
}
@container map-module-container (min-width: 600px) {
/* Resize the wrapper when it has the expanded class set */
.mapsExtended_sidebarWrapper.expanded:not(.overlay) {
min-width: 400px;
}
/* When expanded is set on the wrapper, the sidebar is translated into view */
.mapsExtended_sidebarWrapper.expanded > .mapsExtended_sidebar {
transform: translateX(0px);
}
.mapsExtended_sidebarWrapperLeft:not(.expanded) > .mapsExtended_sidebar {
transform: translateX(-400px);
}
.mapsExtended_sidebarWrapperRight:not(.expanded) > .mapsExtended_sidebar {
transform: translateX(400px);
}
}
/* Container query for the map module container, these rules apply at 600px and below */
@container map-module-container (max-width: 600px) {
.mapsExtended_sidebar {
width: 100%;
}
.mapsExtended_sidebarWrapper.expanded:not(.overlay) {
min-width: 0;
}
.mapsExtended_sidebarWrapperLeft:not(.expanded) > .mapsExtended_sidebar,
.mapsExtended_sidebarWrapperRight.expanded > .mapsExtended_sidebar {
transform: translateX(-100%);
}
.mapsExtended_sidebarWrapperRight:not(.expanded) > .mapsExtended_sidebar ,
.mapsExtended_sidebarWrapperLeft.expanded > .mapsExtended_sidebar {
transform: translateX(0);
}
}
/* General sidebar element class */
.mapsExtended_sidebarControl {
display: flex;
align-items: center;
height: 42px;
padding: 12px;
font-size: 16px;
cursor: pointer;
background: rgba(var(--theme-page-text-color--rgb), 0.1);
border: 1px solid var(--theme-border-color);
transition: border-color 0.1s linear;
}
.mapsExtended_sidebarControl:active {
border-color: var(--theme-page-text-color);
}
.mapsExtended_sidebarControl:hover {
border-color: rgba(var(--theme-page-text-color--rgb), 0.75);
}
/* Sidebar header rules */
.mapsExtended_sidebarHeader {
font-size: 18px;
font-weight: 400;
margin-bottom: 12px;
padding-right: 32px;
}
.mapsExtended_sidebarFloatingToggle {
position: absolute;
top: 16px;
right: 20px;
-webkit-box-pack: center;
-webkit-box-align: center;
align-items: center;
background-color: var(--theme-page-background-color);
border: none;
border-radius: 50%;
color: var(--theme-page-text-color);
cursor: pointer;
display: flex;
height: 36px;
justify-content: center;
margin-bottom: 9px;
outline: none;
width: 36px;
transition-property: right, background-color, color, box-shadow;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.mapsExtended_sidebarFloatingToggle:hover {
color: var(--theme-page-text-color--hover);
}
.mapsExtended_sidebarWrapper.expanded .mapsExtended_sidebarFloatingToggleScrolled {
right: -10px;
background-color: var(--theme-page-background-color--secondary);
color: var(--theme-link-color);
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 12px 0px;
}
.mapsExtended_sidebarWrapper.expanded .mapsExtended_sidebarFloatingToggleScrolled:hover {
color: var(--theme-link-color--hover);
}
/* Sidebar search rules */
.mapsExtended_sidebarSearchBox {
margin: 0;
}
.mapsExtended_sidebarSearchBox > .mapsExtended_sidebarControl {
position: relative;
cursor: text;
background-color: transparent;
padding-right: 36px;
}
/* This button is overlayed over the sidebar input, and shifts to the side when it is clicked */
.mapsExtended_sidebarSearchDropdownButton {
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 42px;
padding: 12px;
cursor: pointer;
}
.mapsExtended_sidebarSearchDropdownButton.expanded {
left: initial;
right: 0px;
width: initial;
}
/* Shown over the search input, used to clear the search term with one click */
.mapsExtended_sidebarSearchClearButton {
position: absolute;
right: 36px;
top: 0;
height: 42px;
padding: 12px;
display: flex;
align-items: center;
}
.mapsExtended_sidebarSearchClearButton > svg {
color: rgba(var(--theme-page-text-color--rgb), 0.5);
cursor: pointer;
}
.mapsExtended_sidebarSearchClearButton > svg:hover {
color: var(--theme-page-text-color);
}
/* sidebarSearchBody wraps the results and hint */
.mapsExtended_sidebarSearchBody {
display: flex;
flex-direction: column;
margin-bottom: 12px;
height: 0px;
overflow: hidden;
resize: vertical;
}
.mapsExtended_sidebarSearchBody > .wds-input__hint-container {
margin-bottom: 6px;
}
.mapsExtended_sidebarSearchResults {
border: 1px solid var(--theme-border-color);
overscroll-behavior: contain;
flex-grow: 0;
}
/* Sidebar categories "Hide All" and "Show All" button */
.mapsExtended_sidebarCategoryToggleButtons {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-auto-rows: 42px;
grid-gap: 12px;
margin-bottom: 12px;
}
.mapsExtended_sidebarCategoryToggleButtons > div {
justify-content: center;
}
/* Sidebar categories section */
.mapsExtended_sidebarCategorySectionBody {
padding: 6px;
overflow: hidden;
transition: max-height 0.35s ease;
}
/* Sidebar category groups */
.mapsExtended_sidebarCategory_header {
font-size: 16px;
width: 100%;
cursor: pointer;
margin-bottom: 6px;
}
.mapsExtended_sidebarCategory_list {
column-count: 2;
column-gap: 12px;
margin-top: 6px;
margin-bottom: 12px;
}
.mapsExtended_sidebarCategory_list:empty {
margin: 0;
}
/* Sidebar category items */
.mapsExtended_sidebarCategory_listItem {
display: flex;
align-items: baseline;
width: 100%;
height: 30px;
padding: 3px 0;
font-size: 14px;
cursor: pointer;
user-select: none;
break-inside: avoid-column;
}
.mapsExtended_sidebarCategory_listItem > .MarkerIcon-module_icon__dNELM > svg {
vertical-align: middle;
}
/* Refers to the count label on category group items */
.mapsExtended_sidebarCategory_listItem span:nth-of-type(3) {
margin-left: auto;
padding-left: 10px;
color: var(--theme-page-text-mix-color);
}
.mapsExtended_sidebarCategory_listItem:hover {
color: var(--theme-body-text-color);
backface-visibility: hidden;
}
/* Half the opacity of hidden categories */
.mapsExtended_sidebarCategory_listItem.hidden {
opacity: 0.5;
}
/* Strikethrough the label of hidden categories */
.mapsExtended_sidebarCategory_listItem.hidden span:nth-of-type(2) {
text-decoration: line-through;
}
/* === Custom scrollbars === */
:is(.mapsExtended_sidebarContent, .mapsExtended_searchResults, .interactive-maps__filters-dropdown-list)::-webkit-scrollbar {
width: 12px;
}
:is(.mapsExtended_sidebarContent, .mapsExtended_searchResults, .interactive-maps__filters-dropdown-list)::-webkit-scrollbar-track {
border-radius: 3px;
}
:is(.mapsExtended_sidebarContent, .mapsExtended_searchResults, .interactive-maps__filters-dropdown-list)::-webkit-scrollbar-thumb {
background-color: rgb(var(--theme-page-text-color--rgb), 0.75); border-radius: 6px; background-clip: content-box; border: 3.5px solid transparent;
}
:is(.mapsExtended_sidebarContent, .mapsExtended_searchResults, .interactive-maps__filters-dropdown-list)::-webkit-scrollbar-thumb:vertical:active {
background-color: rgba(var(--theme-page-text-color--rgb), 0.6);
}
/* === Ruler === */
.mapsExtended_rulerDot {
width: 11px;
position: absolute;
left: 0px;
top: 0px;
}
.mapsExtended_rulerDot:hover {
width: 16px;
}
.mapsExtended_rulerDot > svg {
transform: translate(-50%, -50%);
vertical-align: top;
}
.mapsExtended_rulerDot > svg > circle {
fill: var(--theme-page-accent-color);
stroke: var(--theme-page-text-color);
}
/* === Collectibles === */
.mapsExtended_collectedMarker {
opacity: 0.5;
}
.mapsExtended_collectibleClearButton {
display: block;
font-weight: 700;
letter-spacing: .25px;
text-transform: uppercase;
text-align: right;
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
cursor: pointer;
user-select: none;
-webkit-user-select: none
}
.interactive-maps__categories-section .mapsExtended_collectibleClearButton {
padding-bottom: 0;
}
.interactive-maps__filters-dropdown.wds-dropdown:hover > .wds-dropdown__content {
display: flex !important;
flex-direction: column;
}
/* === Built-in collectibles === */
/* Styles marked ! are fill-in styles from the styles that will only be present on wikis that
have the March 2024 experiment enabled. They should be removed when the experiment is released */
.interactive-maps__section:not(:last-child) {
margin-bottom: 12px;
}
.interactive-maps__section:not(:first-child) {
margin-top: 12px;
}
.interactive-maps__section-label {
display: flex;
font-size: 14px;
font-weight: 500;
justify-content: space-between;
margin-bottom: 12px;
cursor: pointer;
}
.interactive-maps__section-label-icon {
width: 1em;
height: 12px;
fill: var(--theme-page-text-color);
}
.interactive-maps__section.interactive-maps__section--hidden:last-child > .interactive-maps__section-label {
margin-bottom: 0;
}
.interactive-maps__section.interactive-maps__section--hidden .interactive-maps__section-content {
max-height: 0;
overflow: hidden;
}
.interactive-maps__section.interactive-maps__section--hidden .interactive-maps__section-label-icon {
transform: rotate(180deg);
}
.MarkerPopup-module_progressMarkerButton__mEkXG:not(.MarkerPopup-module_progressMarkerButtonCompleted__KQRMh) #IconCheckbox__a,
.MarkerPopup-module_progressMarkerButton__mEkXG.MarkerPopup-module_progressMarkerButtonCompleted__KQRMh #IconCheckboxEmpty__a {
display: none;
}
/* ! */
.MarkerPopup-module_progressMarkerButton__mEkXG {
--wds-primary-button-background-color: var(--theme-page-background-color--secondary);
--wds-primary-button-background-color--hover: var(--theme-page-background-color--secondary);
--wds-primary-button-label-color: var(--theme-page-text-color);
grid-gap: 9px;
box-sizing: border-box;
justify-content: flex-start;
margin-top: 12px;
width: 100%;
}
.MarkerPopup-module_progressMarkerButtonCompleted__KQRMh {
--wds-primary-button-background-color: var(--theme-success-color);
--wds-primary-button-background-color--hover: var(--theme-success-color);
--wds-primary-button-label-color: var(--theme-success-label);
}
/* ! */
.MarkerPopup-module_progressMarkerButton__mEkXG.wds-button {
font-size: 16px;
font-weight: 500;
line-height: 1.25;
padding: 12px;
text-transform: none;
}
/* === Validation === */
.mw-json-value {
background: rgba(var(--theme-page-background-color--secondary--rgb),0.6) !important;
}
.mw-json-value-warning {
background: rgba(var(--theme-warning-color--rgb),0.6) !important;
}
.mw-json-value-error {
background: rgba(var(--theme-alert-color--rgb),.6) !important;
}
.mw-json-value-success {
background: rgba(var(--theme-success-color--rgb),0.6) !important;
}
.mw-json {
border-collapse: collapse;
border-spacing: 0;
font-style: normal;
}
.mw-json th,.mw-json td {
border: 1px solid #72777d;
font-size: 16px;
padding: 0.5em 1em;
}
.mw-json tr {
background-color: #eaecf0;
margin-bottom: 0.5em;
}
.mw-json-row-empty :is(th, .mw-json-empty, .mw-json-value) {
background-color: rgba(var(--theme-page-background-color--secondary--rgb), 0.5) !important;
color: rgba(var(--theme-page-text-color--rgb), 0.5);
}
.mw-json th {
background-color: #fff;
font-weight: normal;
vertical-align: top;
}
.mw-json th span {
position: sticky;
top: calc(0.5em + 46px);
}
.mw-json-value,.mw-json-single-value {
background-color: #dcfae3;
font-family: monospace,monospace;
white-space: pre-wrap
}
.mw-json-value > .mw-json-extra-value {
font-size: small;
}
.mw-json-single-value {
background-color: #eaecf0
}
.mw-json-empty {
background-color: #fff;
font-style: italic;
}