MediaWiki:Vector.css
Jump to navigation
Jump to search
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.
/* === Bridgerpedia — Fextralife-style Dark Theme (v3, cleaned) === */
:root {
--bp-bg: #16181c;
--bp-bg-panel: #1e2126;
--bp-bg-elevated: #262a30;
--bp-border: #34383f;
--bp-text: #d4d4d4;
--bp-text-dim: #9a9a9a;
--bp-link: #6fa8dc; /* голубой — акцентный цвет ссылок */
--bp-link-hover: #8fc8f0;
--bp-accent: #4a4f57;
--bp-red-link: #d16a5a;
/* размеры, вынесенные из хардкода */
--bp-bg-pattern-size: 500px;
--bp-infobox-width: 280px;
--bp-tile-min-width: 120px;
--bp-tile-img-height: 90px;
--bp-tile-min-height: 70px;
--bp-bg-pattern-url: url('/images/e/ee/Background1.webp');
--bp-bg-overlay: linear-gradient(rgba(10, 11, 13, 0.9), rgba(10, 11, 13, 0.9));
}
/* === Базовые контейнеры интерфейса === */
html, body,
#mw-head, #mw-head *,
.mw-header, .mw-header *,
.vector-header, .vector-header *,
.vector-header-container, .vector-header-container *,
#p-personal, #p-personal *,
.vector-user-links, .vector-user-links *,
#left-navigation, #left-navigation *,
#right-navigation, #right-navigation *,
.vector-page-tabs, .vector-page-tabs *,
.vector-menu-tabs, .vector-menu-tabs *,
#p-views, #p-views *,
#p-namespaces, #p-namespaces *,
#p-cactions, #p-cactions *,
.vector-dropdown, .vector-dropdown *,
#simpleSearch, #simpleSearch *,
.vector-search-box, .vector-search-box *,
.cdx-search-input, .cdx-search-input *,
.mw-page-container,
.vector-column-start, .vector-column-start *,
.vector-column-end,
.mw-footer-container, .mw-footer-container *,
#footer, #footer *,
.vector-body,
#mw-panel, #mw-panel *,
.vector-menu-content, .vector-menu-content * {
background-color: transparent !important;
color: var(--bp-text) !important;
border-color: var(--bp-border) !important;
}
#content, .mw-body, .mw-body-content, .vector-body-before-content {
background-color: var(--bp-bg-panel) !important;
color: var(--bp-text) !important;
}
#mw-panel, .vector-menu-content {
color: var(--bp-text-dim) !important;
}
/* Прицельно гасим дефолтный серый фон Vector у пунктов меню (Navigation, Tools) и личного меню (user links) */
.vector-menu-content-list,
.vector-menu-content-list li,
.vector-menu-content-list li a:not(.mw-echo-notifications-badge),
.vector-menu-content-list li a span,
#p-personal .vector-menu-content-list,
#p-personal .vector-menu-content-list li,
#p-personal .vector-menu-content-list li a:not(.mw-echo-notifications-badge),
.vector-user-links .vector-menu-content-list,
.vector-user-links .vector-menu-content-list li,
.vector-user-links .vector-menu-content-list li a:not(.mw-echo-notifications-badge) {
background-color: transparent !important;
background: none !important;
}
.vector-menu-content-list li a:hover,
.vector-menu-content-list li a:focus {
background-color: var(--bp-bg-elevated) !important;
}
/* === Единый фон с тигровым паттерном (было продублировано 3 раза — оставлен один финальный вариант) === */
html, body,
.mw-page-container,
#mw-head, .vector-header, .vector-header-container,
#mw-panel, .vector-legacy-sidebar {
background-image: var(--bp-bg-overlay), var(--bp-bg-pattern-url) !important;
background-repeat: repeat, repeat !important;
background-size: cover, var(--bp-bg-pattern-size) var(--bp-bg-pattern-size) !important;
background-attachment: fixed, scroll !important; /* scroll вместо fixed — избегаем перформанс-проблем на мобильных/футере */
background-color: transparent !important;
}
#footer, .mw-footer, #footer *, .mw-footer * {
background-image: var(--bp-bg-overlay), var(--bp-bg-pattern-url) !important;
background-repeat: repeat, repeat !important;
background-size: cover, var(--bp-bg-pattern-size) var(--bp-bg-pattern-size) !important;
background-attachment: scroll, scroll !important;
background-color: transparent !important;
color: var(--bp-text) !important;
}
#footer a, .mw-footer a {
color: var(--bp-link) !important;
}
/* === Ссылки === */
a, #mw-head a, #p-personal a, #mw-panel a {
color: var(--bp-link) !important;
}
a.new, a.new span {
color: var(--bp-red-link) !important;
}
/* === Заголовки === */
#firstHeading,
h1, h2, h3, h4, h5, h6,
.mw-headline,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
color: var(--bp-text) !important;
border-bottom-color: var(--bp-accent) !important;
}
#firstHeading, h1, h2 {
border-bottom: 1px solid var(--bp-accent) !important;
}
.mw-parser-output hr {
background-color: var(--bp-accent) !important;
border-color: var(--bp-accent) !important;
}
/* === Кнопки === */
.cdx-button, .mw-ui-button {
background-color: var(--bp-accent) !important;
color: var(--bp-bg) !important;
border: none !important;
}
/* === Вкладки (Discussion, Edit, View history и т.д.) === */
#p-views li, #p-views li a,
#p-namespaces li, #p-namespaces li a,
#p-cactions li, #p-cactions li a,
.vector-tab-noicon, .vector-tab-noicon a,
li.selected, li.selected a,
li.new, li.new a {
background-color: transparent !important;
background: none !important;
color: var(--bp-text-dim) !important;
}
li.selected a {
color: var(--bp-accent) !important;
}
/* === Таблицы (объединено — раньше было два конфликтующих блока) === */
table.wikitable {
background-color: transparent !important;
border: none !important;
outline: none !important;
border-collapse: separate !important;
border-spacing: 2px !important;
width: 100%;
margin: 1em 0;
font-size: 0.95em;
color: var(--bp-text) !important;
}
table.wikitable td,
table.wikitable th {
padding: 8px 12px;
background-color: var(--bp-bg-panel) !important;
border: 1px solid #3a3f47 !important;
color: var(--bp-text) !important;
}
table.wikitable th {
background-color: var(--bp-bg-elevated) !important;
color: #e0e0e0 !important;
font-weight: 600;
text-align: center;
letter-spacing: 0.3px;
}
table.wikitable tr:nth-child(even) td {
background-color: #22252b !important;
}
table.wikitable a:hover {
color: var(--bp-link-hover) !important;
text-decoration: underline;
}
table.wikitable td *,
table.wikitable th * {
background-color: transparent !important;
}
/* === Инфобокс === */
.bp-infobox {
background-color: var(--bp-bg-elevated);
border: 1px solid var(--bp-border);
border-top: 3px solid var(--bp-accent);
border-radius: 4px;
padding: 10px;
float: right;
width: var(--bp-infobox-width);
margin: 0 0 1em 1em;
color: var(--bp-text);
}
.bp-infobox-title {
color: var(--bp-accent);
font-weight: 700;
text-align: center;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid var(--bp-border);
}
/* === Плиточный грид (теперь адаптивный вместо жёстких 4 колонок) === */
.bp-tile-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 12px;
background: var(--bp-bg);
border: 1px solid var(--bp-border);
}
.bp-tile a {
display: flex;
flex-direction: column;
background: var(--bp-bg-elevated);
border: 1px solid var(--bp-border);
border-top: 2px solid var(--bp-accent);
text-decoration: none !important;
overflow: hidden;
min-height: var(--bp-tile-min-height);
position: relative;
transition: border-color 0.2s ease;
}
.bp-tile a:hover {
border-top-color: var(--bp-link);
}
.bp-tile-img {
width: 100%;
height: var(--bp-tile-img-height);
object-fit: cover;
object-position: top center; /* для портретных иконок персонажей */
display: block;
}
.bp-tile-label {
font-size: 12px;
font-weight: 600;
color: var(--bp-text);
text-align: center;
padding: 6px;
background: var(--bp-bg-elevated);
}
.bp-tile-construction {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
opacity: 0.9;
}
/* === Заменить блок .bp-tile-simple на этот (объёмный изометрический пьедестал) === */
.bp-tile-simple {
--bp-depth: 14px; /* насколько "уходит вглубь" — глубина верхней и боковой граней */
position: relative;
min-height: 110px;
background: linear-gradient(180deg, var(--bp-bg-elevated), #23262b); /* лицевая грань */
border: 1px solid var(--bp-border);
border-bottom: 2px solid #0a0b0d; /* граница "с землёй", утяжеляет низ */
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35); /* тень, будто пьедестал стоит на полу */
padding: calc(var(--bp-depth) + 12px) 10px 12px calc(var(--bp-depth) + 10px);
text-align: center;
}
/* Верхняя грань — светлая, "уходит вглубь" (параллелограмм) */
.bp-tile-simple::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, #4a5058, #34383f);
clip-path: polygon(
var(--bp-depth) var(--bp-depth),
100% var(--bp-depth),
calc(100% - var(--bp-depth)) 0,
0 0
);
border-top: 1px solid var(--bp-accent);
z-index: 0;
pointer-events: none;
transition: border-color 0.2s ease;
}
/* Левая боковая грань — тёмная, эффект тени сбоку */
.bp-tile-simple::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, #17191c, #0b0c0e);
clip-path: polygon(
var(--bp-depth) var(--bp-depth),
0 0,
0 calc(100% - var(--bp-depth)),
var(--bp-depth) 100%
);
z-index: 0;
pointer-events: none;
}
.bp-tile-simple a {
position: relative;
z-index: 1;
display: block;
color: var(--bp-text) !important;
font-weight: 600;
text-decoration: none !important;
font-size: 14px;
}
.bp-tile-simple:hover::before {
border-top-color: var(--bp-link);
}
/* Картинка на лицевой грани пьедестала (кладите <img class="bp-tile-simple-img"> внутрь ссылки) */
.bp-tile-simple-img {
display: block;
width: 100%;
height: 70px;
object-fit: contain;
margin-bottom: 6px;
}
.bp-construction-badge {
display: block;
font-size: 10px;
color: var(--bp-text-dim);
margin-top: 4px;
letter-spacing: 0.5px;
}
/* === Приветственный блок и нижние блоки ссылок === */
.bp-welcome {
background: var(--bp-bg);
border: 1px solid var(--bp-border);
padding: 16px 20px;
margin-bottom: 16px;
line-height: 1.6;
}
.bp-bottom-row {
display: flex;
flex-wrap: wrap; /* чтобы не ломалось на узких экранах */
gap: 16px;
margin-top: 16px;
align-items: stretch;
}
.bp-links-block {
background: var(--bp-bg);
border: 1px solid var(--bp-border);
padding: 14px 20px;
flex: 1;
min-width: 240px;
}
.bp-right-column {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 240px;
}
.bp-links-compact {
background: var(--bp-bg);
border: 1px solid var(--bp-border);
padding: 14px 20px;
}
.bp-links-block ul,
.bp-links-compact ul {
margin: 6px 0 0 0;
padding-left: 18px;
}
.bp-links-block li,
.bp-links-compact li {
margin: 4px 0;
}
.bp-statusbar-compact {
background: var(--bp-bg);
border: 1px solid var(--bp-border);
padding: 10px 20px;
font-size: 13px;
color: var(--bp-text-dim);
}
.bp-statusbar-compact #bp-online,
.bp-statusbar-compact #bp-updated {
color: var(--bp-text);
font-weight: 600;
}
/* === Оглавление (TOC) === */
div.toc, #toc, .toc {
background-color: var(--bp-bg-panel) !important;
color: var(--bp-text) !important;
border: 1px solid var(--bp-border) !important;
border-radius: 4px;
padding: 10px;
margin: 16px 0;
}
div.toc h2, #toc h2, .toc h2, #mw-toc-heading {
color: var(--bp-text) !important;
border-bottom: 1px solid var(--bp-border) !important;
font-size: 1.1em;
padding-bottom: 4px;
}
div.toc a, #toc a, .toc a, .toctext {
color: var(--bp-link) !important;
text-decoration: none;
}
div.toc a:hover, #toc a:hover, .toc a:hover {
color: var(--bp-link-hover) !important;
text-decoration: underline;
}
.tocnumber {
color: var(--bp-text-dim) !important;
}
.toctogglelabel {
color: var(--bp-link) !important;
}
/* === Блоки кода === */
pre, .mw-code {
background-color: var(--bp-bg-elevated) !important;
color: var(--bp-text) !important;
border: 1px solid var(--bp-border) !important;
padding: 8px 12px;
border-radius: 4px;
font-family: monospace;
overflow-x: auto;
}
pre a, .mw-code a {
color: var(--bp-link) !important;
}
/* === Категории === */
#mw-normal-catlinks, .mw-normal-catlinks, .catlinks {
background-color: transparent !important;
color: var(--bp-text) !important;
border: none !important;
padding: 4px 0 !important;
margin-top: 8px !important;
}
#mw-normal-catlinks a, .mw-normal-catlinks a, .catlinks a {
color: var(--bp-link) !important;
}
#mw-normal-catlinks a.new, .mw-normal-catlinks a.new, .catlinks a.new {
color: var(--bp-red-link) !important;
}
/* === Системные уведомления MediaWiki (не были покрыты в v2 — оставались светлыми) === */
.cdx-message, .mw-message-box,
.errorbox, .warningbox, .successbox {
background-color: var(--bp-bg-elevated) !important;
color: var(--bp-text) !important;
border: 1px solid var(--bp-border) !important;
}
.cdx-message--error, .errorbox {
border-left: 4px solid #d16a5a !important;
}
.cdx-message--warning, .warningbox {
border-left: 4px solid var(--bp-accent) !important;
}
.cdx-message--success, .successbox {
border-left: 4px solid #6fbf73 !important;
}
.cdx-message a, .mw-message-box a,
.errorbox a, .warningbox a, .successbox a {
color: var(--bp-link) !important;
}
/* === Адаптивность для мобильных === */
@media (max-width: 600px) {
.bp-infobox {
float: none;
width: 100%;
margin: 0 0 1em 0;
}
.bp-tile-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Keep the browser canvas dark while background tiles are being painted. */
html {
background-color: var(--bp-bg) !important;
}
/* Touch devices also use the site's 1120px desktop layout viewport. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
html,
body,
.mw-page-container,
#mw-head,
.vector-header,
.vector-header-container,
#mw-panel,
.vector-legacy-sidebar {
background-attachment: scroll, scroll !important;
}
}
/* === Diff (просмотр правок) — тёмный текст на светлом фоне === */
table.diff td.diff-deletedline {
background-color: #ffe49c !important; /* стандартный жёлтый */
color: #16181c !important; /* тёмный текст */
}
table.diff td.diff-addedline {
background-color: #a3d3ff !important; /* стандартный голубой */
color: #16181c !important; /* тёмный текст */
}
table.diff td.diff-context {
background-color: #f8f9fa !important; /* стандартный серый */
color: #16181c !important; /* тёмный текст */
}
/* На случай, если тема перебивает цвет дочерних элементов ссылок */
table.diff td.diff-addedline a,
table.diff td.diff-deletedline a {
color: #16181c !important;
text-decoration: underline;
}
/* === Infobox: restrained reference panel === */
#infoboxborder {
box-sizing: border-box;
width: var(--bp-infobox-width);
max-width: 100%;
float: right;
margin: 0 0 1.2em 1.2em;
padding: 0;
background: var(--bp-bg-panel) !important;
border: 1px solid var(--bp-border) !important;
border-radius: 0;
box-shadow: none;
color: var(--bp-text) !important;
font-size: 0.9em;
line-height: 1.5;
}
#infoboxtable {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background: transparent !important;
}
#infoboxtable td {
padding: 7px 12px;
border: none;
background: transparent !important;
color: var(--bp-text) !important;
vertical-align: top;
overflow-wrap: anywhere;
}
#infoboxtable #infoboxheader {
padding: 11px 12px !important;
background: var(--bp-bg) !important;
border-bottom: 1px solid var(--bp-border) !important;
color: #eeeeee !important;
font-size: 1.1em;
font-weight: 600;
text-align: left;
}
#infoboxtable #infoboxdesc {
padding: 8px 12px !important;
color: #aeb3ba !important;
font-size: 0.95em;
font-style: normal;
text-align: left;
}
#infoboxtable td[id="infoboxsection"][colspan="2"] {
padding: 6px 12px !important;
background: var(--bp-bg-elevated) !important;
border-top: 1px solid var(--bp-border) !important;
border-bottom: 1px solid var(--bp-border) !important;
color: #aeb3ba !important;
font-size: 0.8em;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
text-align: left !important;
}
#infoboxtable #infoboxlabel {
width: 42%;
color: #aeb3ba !important;
font-size: 0.95em;
font-weight: 400;
white-space: normal;
}
#infoboxtable #infoboxdetail {
font-size: 0.95em;
font-weight: 500;
}
#infoboxtable tr + tr > td {
border-top: 1px solid var(--bp-border);
}
#infoboxborder img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
margin: 0 auto;
}
#infoboxborder a {
color: var(--bp-link) !important;
text-decoration: none;
}
#infoboxborder a:hover {
color: var(--bp-link-hover) !important;
text-decoration: underline;
}
@media (max-width: 600px) {
#infoboxborder {
float: none;
width: 100%;
margin: 0 0 1em;
}
}
/* Footer badge: white artwork with no button or patterned rectangle. */
#footer #footer-poweredbyico > a.cdx-button,
#footer #footer-poweredbyico > a.cdx-button:hover,
#footer #footer-poweredbyico > a.cdx-button:focus,
#footer #footer-poweredbyico > a.cdx-button:active {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
#footer #footer-poweredbyico img {
background: transparent !important;
background-image: none !important;
filter: grayscale(1) brightness(0) invert(1);
opacity: 0.5 !important;
}
/* Explicit white Echo icons: the transparent-menu reset removes their default backgrounds. */
#pt-notifications-alert.mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {
background-image: url('/resources/lib/ooui/themes/wikimediaui/images/icons/bell-invert.svg') !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
filter: none !important;
opacity: 1 !important;
}
#pt-notifications-notice.mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
background-image: url('/resources/lib/ooui/themes/wikimediaui/images/icons/tray-invert.svg') !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
filter: none !important;
opacity: 1 !important;
}
/* Interactive map */
.bp-map {
margin: 1rem 0 1.5rem;
}
.bp-map-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.bp-map-hint {
color: var(--bp-text-dim);
font-size: 0.9rem;
}
.bp-map-reset {
appearance: none;
border: 1px solid var(--bp-border);
border-radius: 4px;
padding: 6px 10px;
color: var(--bp-text);
background: var(--bp-bg-elevated);
font: inherit;
cursor: pointer;
}
.bp-map-reset:hover:not(:disabled),
.bp-map-reset:focus-visible {
border-color: var(--bp-accent);
color: var(--bp-link-hover);
}
.bp-map-reset:disabled {
cursor: default;
opacity: 0.45;
}
.bp-map-viewport {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--bp-border);
background: var(--bp-bg-elevated);
cursor: zoom-in;
touch-action: manipulation;
}
.bp-map-viewport:focus-visible {
outline: 2px solid var(--bp-accent);
outline-offset: 2px;
}
.bp-map-scene {
position: relative;
width: 100%;
height: 100%;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform 240ms ease;
will-change: transform;
}
.bp-map-scene .mw-file-element,
.bp-map-scene .bp-map-image {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.bp-map-markers {
position: absolute;
inset: 0;
pointer-events: none;
}
.bp-map-marker {
position: absolute;
z-index: 2;
width: 18px;
height: 18px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--bp-accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
transform: translate(-50%, -50%);
pointer-events: auto;
}
.bp-map-marker:hover,
.bp-map-marker:focus-visible {
transform: translate(-50%, -50%) scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
.bp-map-scene {
transition: none;
}
}
@media (max-width: 600px) {
.bp-map-toolbar {
align-items: flex-start;
}
.bp-map-hint {
font-size: 0.82rem;
}
}
/* Normalize MediaWiki's generated file wrappers inside the map. */
.bp-map-scene > p {
width: 100%;
height: 100%;
margin: 0;
}
.bp-map-scene .bp-map-image,
.bp-map-scene .bp-map-image > span {
display: block;
width: 100%;
height: 100%;
}
/* Keep the map and its generated MediaWiki wrappers inside article bounds. */
.mw-parser-output .bp-map {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
.mw-parser-output .bp-map-viewport {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden !important;
box-sizing: border-box;
contain: layout paint;
}
.mw-parser-output .bp-map-scene,
.mw-parser-output .bp-map-scene > p,
.mw-parser-output .bp-map-scene .bp-map-image,
.mw-parser-output .bp-map-scene .bp-map-image > span {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
box-sizing: border-box;
}
.mw-parser-output .bp-map-scene img.mw-file-element {
display: block;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
box-sizing: border-box;
object-fit: contain;
}
/* Never let the interactive map create document-level horizontal scrolling. */
body.page-Locations_and_NPCs,
body.page-Locations_and_NPCs #content,
body.page-Locations_and_NPCs .mw-body-content,
body.page-Locations_and_NPCs .mw-parser-output {
max-width: 100%;
overflow-x: clip;
}
body.page-Locations_and_NPCs .bp-map,
body.page-Locations_and_NPCs .bp-map-viewport {
display: block;
position: relative;
width: auto;
max-width: 100%;
min-width: 0;
overflow: hidden !important;
}
body.page-Locations_and_NPCs .bp-map-scene {
position: absolute;
inset: 0;
width: 100% !important;
max-width: 100% !important;
}
/* Final map sizing: one centered row, never wider than the article. */
body.page-Locations_and_NPCs .bp-map {
clear: both;
display: block;
width: calc(100% - 2px);
max-width: 900px;
margin: 1rem auto 1.5rem;
padding: 0;
box-sizing: border-box;
}
body.page-Locations_and_NPCs .bp-map-toolbar,
body.page-Locations_and_NPCs .bp-map-viewport {
width: 100%;
max-width: 900px;
box-sizing: border-box;
}
body.page-Locations_and_NPCs .bp-map-viewport {
height: auto;
aspect-ratio: 16 / 9;
}
/* Background-based map: no intrinsic image width can affect page layout. */
body.page-Locations_and_NPCs .bp-map {
clear: both;
display: block;
width: 100%;
max-width: 900px;
margin: 1rem auto 1.5rem;
overflow: visible;
}
body.page-Locations_and_NPCs .bp-map-viewport {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
box-sizing: border-box;
background-color: var(--bp-bg-elevated);
background-image: url('/images/0/08/Map1.png');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% auto;
transition: background-size 240ms ease, background-position 240ms ease;
}
body.page-Locations_and_NPCs .bp-map-scene {
position: absolute;
inset: 0;
width: auto !important;
height: auto;
max-width: none !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
body.page-Locations_and_NPCs .bp-map-viewport {
transition: none;
}
}
/* 16:9 fallback that works even when aspect-ratio is unavailable. */
body.page-Locations_and_NPCs .bp-map-viewport {
height: 0 !important;
padding: 0 0 56.25% !important;
aspect-ratio: auto;
background-size: 100% 100%;
}
body.page-Locations_and_NPCs .bp-map-viewport.is-zoomed {
cursor: zoom-out;
}
/* NPC interaction access borders. */
.bp-access-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 0.5rem 0 0.75rem;
color: var(--bp-text-dim);
font-size: 0.9rem;
}
.bp-access-legend > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bp-access-swatch {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid transparent;
box-sizing: border-box;
}
.bp-access-swatch-outlaw { background: #a51f2d; }
.bp-access-swatch-inlaw { background: #1456a0; }
.bp-access-swatch-vampire { background: #712889; }
.npc-gallery .gallerybox.bp-access-card {
position: relative;
border: 3px solid transparent;
padding: 2px;
box-sizing: border-box;
}
.npc-gallery .gallerybox.bp-access-card > .thumb {
max-width: 100%;
box-sizing: border-box;
}
.npc-gallery .gallerybox.bp-access-outlaw { border-color: #a51f2d; }
.npc-gallery .gallerybox.bp-access-inlaw { border-color: #1456a0; }
.npc-gallery .gallerybox.bp-access-vampire { border-color: #712889; }
.npc-gallery .gallerybox.bp-access-outlaw-inlaw {
border-image: linear-gradient(135deg, #a51f2d 0 50%, #1456a0 50% 100%) 1;
}
.npc-gallery .gallerybox.bp-access-outlaw-inlaw-vampire {
border-image: linear-gradient(135deg,
#a51f2d 0 33.333%,
#1456a0 33.333% 66.666%,
#712889 66.666% 100%) 1;
}
/* Access color belongs to the square NPC image only, not the whole card. */
.npc-gallery .gallerybox.bp-access-card {
border: 0 !important;
padding: 0;
}
.npc-gallery .gallerybox.bp-access-card > .thumb {
border: 3px solid transparent;
box-sizing: border-box;
}
.npc-gallery .gallerybox.bp-access-outlaw > .thumb {
border-color: #a51f2d;
}
.npc-gallery .gallerybox.bp-access-inlaw > .thumb {
border-color: #1456a0;
}
.npc-gallery .gallerybox.bp-access-vampire > .thumb {
border-color: #712889;
}
.npc-gallery .gallerybox.bp-access-outlaw-inlaw > .thumb {
border-image: linear-gradient(135deg, #a51f2d 0 50%, #1456a0 50% 100%) 1;
}
.npc-gallery .gallerybox.bp-access-outlaw-inlaw-vampire > .thumb {
border-image: linear-gradient(135deg,
#a51f2d 0 33.333%,
#1456a0 33.333% 66.666%,
#712889 66.666% 100%) 1;
}
/* NPC section hierarchy and centered labels. */
body.page-Locations_and_NPCs #NPCs {
display: block;
text-align: center;
}
body.page-Locations_and_NPCs h3 {
text-align: center;
}
body.page-Locations_and_NPCs .bp-access-legend {
justify-content: center;
}
/* Keep the main NPCs heading in the normal article alignment. */
body.page-Locations_and_NPCs #NPCs {
display: inline;
text-align: inherit;
}
/* Metadata marker emitted by Template:NPC access. */
.bp-npc-access {
display: none !important;
}
.npc-gallery .gallerybox.bp-access-outlaw-vampire > .thumb {
border-image: linear-gradient(135deg, #a51f2d 0 50%, #712889 50% 100%) 1;
}
.npc-gallery .gallerybox.bp-access-inlaw-vampire > .thumb {
border-image: linear-gradient(135deg, #1456a0 0 50%, #712889 50% 100%) 1;
}
/* Larger interactive map on desktop screens. */
@media (min-width: 901px) {
body.page-Locations_and_NPCs .bp-map,
body.page-Locations_and_NPCs .bp-map-toolbar,
body.page-Locations_and_NPCs .bp-map-viewport {
max-width: 1350px;
}
}
/* Smooth map zoom: scale a contained background layer around the click point. */
body.page-Locations_and_NPCs .bp-map-viewport {
background-image: none !important;
background-color: var(--bp-bg-elevated);
}
body.page-Locations_and_NPCs .bp-map-scene {
position: absolute;
inset: 0;
width: 100% !important;
height: 100%;
max-width: 100% !important;
background-image: url('/images/0/08/Map1.png');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;
transform: scale(var(--bp-map-scale, 1)) !important;
transform-origin: 50% 50%;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
body.page-Locations_and_NPCs .bp-map-scene {
transition-duration: 1ms;
}
}
/* Cleaner NPC access treatment: neutral frame plus segmented faction rail. */
.npc-gallery .gallerybox.bp-access-card > .thumb {
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.16) !important;
border-image: none !important;
background: var(--bp-bg-elevated);
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
.npc-gallery .gallerybox.bp-access-card > .thumb::after {
content: "";
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
height: 6px;
background: var(--bp-access-rail);
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.npc-gallery .gallerybox.bp-access-outlaw {
--bp-access-rail: #c72838;
}
.npc-gallery .gallerybox.bp-access-inlaw {
--bp-access-rail: #e0b52f;
}
.npc-gallery .gallerybox.bp-access-vampire {
--bp-access-rail: #a92c9f;
}
.npc-gallery .gallerybox.bp-access-outlaw-inlaw {
--bp-access-rail: linear-gradient(90deg, #c72838 0 50%, #e0b52f 50% 100%);
}
.npc-gallery .gallerybox.bp-access-outlaw-vampire {
--bp-access-rail: linear-gradient(90deg, #c72838 0 50%, #a92c9f 50% 100%);
}
.npc-gallery .gallerybox.bp-access-inlaw-vampire {
--bp-access-rail: linear-gradient(90deg, #e0b52f 0 50%, #a92c9f 50% 100%);
}
.npc-gallery .gallerybox.bp-access-outlaw-inlaw-vampire {
--bp-access-rail: linear-gradient(90deg,
#c72838 0 33.333%,
#e0b52f 33.333% 66.666%,
#a92c9f 66.666% 100%);
}
.bp-access-swatch-outlaw { background: #c72838; }
.bp-access-swatch-inlaw { background: #e0b52f; }
.bp-access-swatch-vampire { background: #a92c9f; }
/* Dark gaps keep multiple faction colors visually separate. */
.npc-gallery .gallerybox.bp-access-outlaw-inlaw {
--bp-access-rail: linear-gradient(90deg,
#c72838 0 calc(50% - 2px),
#151820 calc(50% - 2px) calc(50% + 2px),
#e0b52f calc(50% + 2px) 100%);
}
.npc-gallery .gallerybox.bp-access-outlaw-vampire {
--bp-access-rail: linear-gradient(90deg,
#c72838 0 calc(50% - 2px),
#151820 calc(50% - 2px) calc(50% + 2px),
#a92c9f calc(50% + 2px) 100%);
}
.npc-gallery .gallerybox.bp-access-inlaw-vampire {
--bp-access-rail: linear-gradient(90deg,
#e0b52f 0 calc(50% - 2px),
#151820 calc(50% - 2px) calc(50% + 2px),
#a92c9f calc(50% + 2px) 100%);
}
.npc-gallery .gallerybox.bp-access-outlaw-inlaw-vampire {
--bp-access-rail: linear-gradient(90deg,
#c72838 0 calc(33.333% - 2px),
#151820 calc(33.333% - 2px) calc(33.333% + 2px),
#e0b52f calc(33.333% + 2px) calc(66.666% - 2px),
#151820 calc(66.666% - 2px) calc(66.666% + 2px),
#a92c9f calc(66.666% + 2px) 100%);
}
/* Compact access indicators in the thumbnail corner. */
.npc-gallery .gallerybox.bp-access-card > .thumb::after {
display: none;
}
.bp-access-cubes {
position: absolute;
z-index: 4;
top: 6px;
right: 6px;
display: inline-flex;
gap: 3px;
padding: 3px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 3px;
background: rgba(10, 12, 16, 0.82);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
.bp-access-cube {
display: block;
width: 10px;
height: 10px;
box-sizing: border-box;
}
.bp-access-cube-outlaw { background: #c72838; }
.bp-access-cube-inlaw { background: #e0b52f; }
.bp-access-cube-vampire { background: #a92c9f; }
.bp-access-cube-outlaw-inlaw {
background: linear-gradient(90deg, #c72838 0 50%, #e0b52f 50% 100%);
}
.bp-access-cube-outlaw-vampire {
background: linear-gradient(90deg, #c72838 0 50%, #a92c9f 50% 100%);
}
.bp-access-cube-inlaw-vampire {
background: linear-gradient(90deg, #e0b52f 0 50%, #a92c9f 50% 100%);
}
.bp-access-cube-outlaw-inlaw-vampire {
background: linear-gradient(90deg,
#c72838 0 33.333%,
#e0b52f 33.333% 66.666%,
#a92c9f 66.666% 100%);
}
/* Strict, utilitarian NPC access indicators. */
.npc-gallery .gallerybox.bp-access-card > .thumb {
border-color: #343942 !important;
box-shadow: none;
}
.bp-access-cubes {
top: 0;
right: 0;
gap: 2px;
padding: 4px;
border: 0;
border-bottom: 1px solid #343942;
border-left: 1px solid #343942;
border-radius: 0;
background: #111419;
box-shadow: none;
}
.bp-access-cube {
width: 9px;
height: 9px;
}
/* Keep the faction legend directly after the NPCs heading text. */
body.page-Locations_and_NPCs h2 .bp-access-legend {
display: inline-flex;
margin: 0 0 0 16px;
vertical-align: middle;
}
/* Legend is a separate row below NPCs, not part of the heading. */
body.page-Locations_and_NPCs h2 + .bp-access-legend {
display: flex;
justify-content: flex-start;
margin: 8px 0 14px;
vertical-align: initial;
}