MediaWiki:DataMaps.css

From ARK Wiki
Jump to navigation Jump to search

In other languages: DeutschEspañolFrançaisItaliano日本語PolskiPortuguês do BrasilРусскийไทย


Note: After saving, 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)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* #region Notice */
.map-notice {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.5em;
    border: 1px solid var(--datamaps-notice-border-color);
    border-radius: 8px;
    font-size: 110%;
    background: var(--datamaps-notice-background-color);
    margin-bottom: 1em;
}
  
.map-notice-image {
    width: 100px;
    height: 100px;
    background: url(/images/thumb/c/cc/Note.png/100px-Note.png);
}
  
.map-notice a {
    font-weight: bold;
}
/* #endregion */  

.ext-datamaps-container {
    background: var(--datamaps-container-background-color);
}
.ext-datamaps-container-leaflet.leaflet-container {
    background: #0b0b0b4d;
}

/* #region Controls */
.ext-datamaps-container .leaflet-control {
    color: var(--wmui-color-base);
}
.ext-datamaps-container .leaflet-bar {
    background-color: var(--wmui-background-color-base);
    border-color: var(--wmui-border-color-base);
}
.ext-datamaps-container .leaflet-bar button {
    color: var(--wmui-color-base);
    border-color: var(--wmui-border-color-base);
}
.ext-datamaps-container .ext-datamaps-control-expandable[aria-expanded="true"] {
    background-color: var(--wmui-background-color-framed);
    border-color: var(--wmui-border-color-base--active);
    opacity: 0.98;
}
.ext-datamaps-control button > span[class*="oo-ui-icon-"] {
    filter: var(--oo-ui-icon-filter--normal);
}
.ext-datamaps-container .leaflet-bar button:hover {
    background-color: var(--wmui-background-color-base--hover);
}
.ext-datamaps-container .leaflet-bar button:focus {
    background-color: var(--wmui-background-color-base--active);
}
/* #endregion */

/* #region Popups */
.ext-datamaps-container .leaflet-popup-content-wrapper,
.ext-datamaps-container .leaflet-popup-tip {
    background: var(--datamaps-popup-background-color);
    color: var(--datamaps-popup-text-color);
    border: 1px solid var(--wmui-border-color-toolbar);
}
.ext-datamaps-container-leaflet .ext-datamaps-popup .ext-datamaps-popup-location {
    color: inherit;
    opacity: 0.8;
}
.ext-datamaps-popup-header .ext-datamaps-popup-title {
    color: var(--wmui-color-base--emphasized);
}
.ext-datamaps-container .ext-datamaps-popup .ext-datamaps-popup-subtitle {
    color: var(--datamaps-popup-subtitle-text-color);
}
html[ class*="theme-dark" ] .ext-datamaps-popup-link,
html[ class*="theme-dark" ] .leaflet-container .leaflet-popup-close-button {
    filter: invert(1) brightness(55%);
}
/* #endregion */

/* #region Search */
.ext-datamaps-container .ext-datamaps-control-search ul.ext-datamaps-control-search-results {
    background-color: var(--wmui-background-color-base);
    border-color: var(--wmui-border-color-base);
}
.ext-datamaps-container .ext-datamaps-control-search ul.ext-datamaps-control-search-results li:focus,
.ext-datamaps-container .ext-datamaps-control-search ul.ext-datamaps-control-search-results li[data-highlighted="true"] {
    background: var(--wmui-background-color-base--active);
    color: var(--wmui-color-accessory);
}
/* #endregion */

.ext-datamaps-container .leaflet-marker-icon {
    filter: drop-shadow(0 0 2px #fff);
}
.leaflet-container a {
    color: var(--datamaps-popup-text-link-color)
}

/* #region Tabbers */
.map-notice ~ .tabber .tabber__tab {
    padding: 0.7em 1em;
    font-size: 110%;
    background: var(--datamaps-tabber-background-color);
}
.map-notice ~ .tabber .tabber__tab--active {
    background: var(--datamaps-tabber-background-active-color);
}
/* Scroll animation may be laggy on some devices */
.map-notice ~ .tabber .tabber__section {
    scroll-behavior: revert;
}
/* #endregion */

/* 7b3509f backport */
@media screen and (max-width: 720px) {
    .ext-datamaps-control-expandable .ext-datamaps-control-expandable-content > .oo-ui-menuLayout {
        height: 56vh;
    }
}

/* #region Spawn maps */
.datamap-csm-legend-rect {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    box-shadow: 0 0 1px 1px #0002;
    width: 16px;
    height: 16px
}
.datamap-csm-rarities {
    margin: 6px 0 6px;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 3px 4px;
}
.datamap-csm-rarities .oo-ui-fieldLayout.oo-ui-labelElement,
.datamap-csm-rarities .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
    margin-top: 0;
}
.datamap-csm-rarities .oo-ui-fieldLayout {
    font-size: 94%
}
.datamap-csm-groups .oo-ui-panelLayout-padded { padding: 6px 7px }
.datamap-csm-groups > .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { margin: 6px 0; padding: 6px 7px }
.datamap-csm-groups > .oo-ui-layout > ul { margin: 4px 0 -6px; list-style: none }
.datamap-csm-groups ul .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { margin: 6px 0 }
.datamap-csm-groups > .oo-ui-layout > .oo-ui-fieldLayout .oo-ui-labelElement-label { font-weight: 500 }
.datamap-csm-groups .is-detail { display: none }
.datamap-csm-legend.with-details .is-detail { display: block }
.datamap-csm-legend .csm-is-hidden ul { display: none; }
.datamap-csm-legend > .oo-ui-comboBoxInputWidget { margin-top: 4px; }
.datamap-csm-groups ul ul { font-size: 95%; }
.datamap-csm-legend {
    min-height: 300px;
}
.oo-ui-csm-last-matched-item {
    border-bottom: 2px double #0003;
    margin-bottom: 0.3em;
}

.datamap-explorer-note-id {
	opacity: 0.4;
}
/* #endregion */