MediaWiki:Common.css
Перейти к навигации
Перейти к поиску
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* ----- Импорты ----- */
/* - Шрифты - */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
/* - Переменные - */
@import url("/ru/wiki/MediaWiki:Variables.css?ctype=text/css&action=raw");
/* - Заглавная - */
@import url("/ru/wiki/MediaWiki:Mainpage.css?ctype=text/css&action=raw");
/* - Инфобоксы -
@import url("/ru/wiki/MediaWiki:Infobox.css?ctype=text/css&action=raw"); */
/* - Таблицы и шаблоны - */
@import url("/ru/wiki/MediaWiki:TablesAndTemplates.css?ctype=text/css&action=raw");
/* - Галереи - */
@import url("/ru/wiki/MediaWiki:Gallery.css?ctype=text/css&action=raw");
/* - Комментарии - */
@import url("/ru/wiki/MediaWiki:Comments.css?ctype=text/css&action=raw");
/* - Страница сообщества - */
@import url("/ru/wiki/MediaWiki:CommunityPage.css?ctype=text/css&action=raw");
/* - Поиск - */
@import url("/ru/wiki/MediaWiki:Search.css?ctype=text/css&action=raw");
/* - Профайлы - */
@import url("/ru/wiki/MediaWiki:Profile.css?ctype=text/css&action=raw");
/* - Подсветка кода - */
@import url("/ru/wiki/MediaWiki:Highlight.css?ctype=text/css&action=raw");
/* - Категории - */
@import url("/ru/wiki/MediaWiki:Categories.css?ctype=text/css&action=raw");
/* - Просмотр изображений - */
@import url("/ru/wiki/MediaWiki:Lightbox.css?ctype=text/css&action=raw");
/* Global definitions */
:root {
--site-logo: url(/images/e/e6/Site-logo.png) center/contain;
--site-background: #000000 url(/images/9/9a/Site-background.webp) fixed no-repeat center center/cover;
--theme-text-color: #2f1c13;
--theme-link-color: #046df6;
--theme-link-color--visited: #027797;
--outer-text-color: #fff;
--outer-link-color: #64A6FC;
--outer-link-color--visited: #02AFDE;
--outer-link-color--redlink: #FF5252;
--footer-text-color: #E2B99C;
--theme-background: #fff;
--theme-box-border-color: #2f1c13;
--theme-box-background: #f6ebe3;
--theme-accent-color: #5d3f1c;
--template-color: 32 39%;
--template-subcolor: 45 39%;
--template-text: hsl(var(--template-color) var(--lightness-text, 70%));
--template-primary: hsl(var(--template-color) var(--lightness-primary, 70%));
--template-secondary: hsl(var(--template-color) var(--lightness-secondary, 85%));
--template-tertiary: hsl(var(--template-color) var(--lightness-tertiary, 90%));
--template-shadow: hsl(var(--template-color) var(--lightness-shadow, 40%));
--template-sub-primary: hsl(var(--template-subcolor,var(--template-color,0 0%)) var(--lightness-primary, 70%));
--template-sub-secondary: hsl(var(--template-subcolor,var(--template-color,0 0%)) var(--lightness-secondary, 85%));
--template-sub-tertiary: hsl(var(--template-subcolor,var(--template-color,0 0%)) var(--lightness-tertiary, 90%));
--lightness-text: 20%;
--lightness-primary: 70%;
--lightness-secondary: 85%;
--lightness-tertiary: 90%;
--lightness-shadow: 40%;
--header-icon-color: #fff;
}
/* General */
body {
background: var(--site-background);
}
.mw-wiki-logo {
background: var(--site-logo);
}
#content {
border: 0;
margin-top: 0;
margin-right: 0.5em;
margin-left: 11em;
color: var(--theme-text-color);
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
}
a,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs-legacy li a,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
color: var(--theme-link-color);
}
a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs-legacy li a:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited {
color: var(--theme-link-color--visited);
}
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited {
color: var(--outer-text-color);
}
.mw-footer li {
color: var(--footer-text-color);
}
.vector-menu-tabs-legacy li a,
.vector-menu-dropdown .vector-menu-heading,
#footer a {
color: var(--outer-link-color);
}
.vector-menu-tabs-legacy li a:visited {
color: var(--outer-link-color--visited);
}
.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited {
color: var(--outer-link-color--redlink);
}
.nostyle-list ul,
ul.nostyle-list {
list-style: none;
margin: 0;
}
@media only screen and (max-width: 961px) {
#content {
margin-left: 0.5em;
}
}
/* Top navigation */
#mw-page-base {
height: 0;
}
#mw-head-base {
height: 35px;
margin: 0;
}
#mw-navigation,
#mw-head {
height: 45px;
}
#mw-head {
position: relative;
display: grid;
align-items: center;
grid-template-columns: auto auto;
}
#mw-head .mw-list-item {
background: none;
}
#left-navigation,
#right-navigation {
margin-top: 0;
margin-bottom: 0;
}
#ca-view {
display: none;
}
.vector-menu-tabs {
background: none;
height: unset;
}
#p-namespaces li {
margin-right: 1em;
}
#p-views li, #p-cactions {
margin-left: 1em;
}
#mw-head li {
padding-top: 4px;
border-bottom: 4px solid transparent;
}
#mw-head #p-cactions-label {
padding-top: 4px;
}
#mw-head li.selected, #mw-head li.selected:hover {
border-bottom-color: var(--template-primary);
}
#mw-head li:hover {
border-bottom-color: var(--template-shadow);
}
#mw-head li a {
text-decoration: none;
}
#mw-navigation li.mw-list-item a, #mw-head #p-cactions-label {
border: none;
height: unset;
padding: 0;
background: none;
}
#right-navigation {
justify-self: end;
display: grid;
grid-template-columns: auto auto auto;
align-items: center;
}
.vector-search-box form {
margin: 0;
}
.vector-menu-tabs .mw-watchlink.icon a {
text-indent: -99999px;
padding: 0;
width: 16px;
height: 18px;
}
.vector-menu-tabs .mw-watchlink.icon a::before {
top: 0;
left: 0;
}
.vector-menu-dropdown .vector-menu-content {
left: unset;
right: 0;
}
@media only screen and (max-width: 961px) {
.content-wrapper {
flex-direction: column;
}
#mw-navigation {
height: 78px;
padding: 0 0.5em;
display: grid;
grid-template: 44px 34px auto / 0px 44px 1fr;
}
#mw-navigation > #mw-panel {
width: unset;
position: relative;
display: grid;
}
#p-logo {
width: unset;
height: unset;
margin: 6px 0 40px 0;
pointer-events: none;
}
#p-logo > a {
width: 32px;
height: 32px;
padding: 0 6px;
background-size: contain;
pointer-events: auto;
}
#mw-navigation > h2 {
text-indent: -99999px;
grid-area: 2 / 2;
position: unset;
width: 30px;
height: 24px;
padding: 0;
margin: 0 auto;
background: white url(https://backpackbattles.wiki.gg/images/3/3a/Site-icon-nav.svg) no-repeat center;
background-size: 12px;
cursor: pointer;
}
#left-navigation {
margin-left: 0;
}
/* This combination of rules is required for the correct hover behavior. */
#mw-navigation > h2:hover ~ #mw-panel > div:not(#p-logo),
#mw-panel:hover > div:not(#p-logo) {
display: block;
}
#mw-panel > #p-logo:hover ~ div {
display: none;
}
#mw-panel > div:not(#p-logo) {
display: none;
z-index: 9999;
width: 100%;
margin: -10px 0 0 6px;
white-space: nowrap;
}
#mw-head {
grid-area: 1 / 3 / 3;
position: relative;
top: 0;
height: 78px;
box-sizing: border-box;
padding: 8px 0px 8px 1em;
grid-template-rows: 1fr 1fr;
}
#left-navigation,
#right-navigation {
grid-row: 2;
}
#p-search {
position: absolute;
right: 0;
top: 0;
margin: 0;
width: 100%;
}
#p-search > div {
padding: 8px 0px 8px 1em;
}
#simpleSearch {
width: 100%;
max-width: 100%;
}
#mw-head #ca-nstab-main > a,
#mw-head #ca-nstab-mediawiki > a {
mask: url(/images/f/f1/Site-icon-read.svg) center/16px no-repeat;
}
#mw-head #ca-talk > a {
mask: url(/images/f/f2/Site-icon-talk.svg) center/16px no-repeat;
}
#mw-head #ca-edit > a {
mask: url(/images/2/2e/Site-icon-edit.svg) center/16px no-repeat;
}
#mw-head #ca-history > a {
mask: url(/images/e/ea/Site-icon-history.svg) center/16px no-repeat;
}
#mw-head #p-cactions-label > span {
mask: url(/images/0/0b/Site-icon-actions.svg) center/16px no-repeat;
}
#mw-head #ca-nstab-main > a,
#mw-head #ca-nstab-mediawiki > a,
#mw-head #ca-talk > a,
#mw-head #ca-edit > a,
#mw-head #ca-history > a,
#mw-head #p-cactions-label > span {
background: var(--header-icon-color);
text-indent: -9999px;
width: 20px;
height: 20px;
}
}
@media screen and (min-width: 962px) {
#mw-panel {
padding-left: 0.5em;
}
.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
margin-left: 11em;
}
.mw-body {
padding: 1.25em 1.5em 1.5em;
}
}
@media screen and (min-width: 982px) {
.vector-search-box {
margin-right: 0.5em;
}
}
/* Sidebar */
.portal {
border: 5px solid var(--template-primary);
background: var(--template-secondary);
margin: 5px 0;
padding: 0;
}
#mw-panel .portal > .vector-menu-heading {
display: block;
background: var(--template-tertiary);
margin: 0;
padding: 0.5em;
}
#mw-panel .portal > .vector-menu-content > ul {
padding: 0;
}
/* Footer */
#footer {
margin-left: 0;
}
#footer-info-copyright {
position: relative;
}
#footer-info-copyright > div > img {
position: absolute;
bottom: 0;
right: 0;
width: 88px;
height: 31px;
}
@media only screen and (max-width: 720px) {
#footer-poweredbyico,
#footer-info-copyright > div > img {
display: none;
}
}
/* Tables */
table {
display: table;
white-space: normal;
border-collapse: separate;
border-spacing: revert;
}
table:is(.styled, .cargoTable) {
background: var(--template-primary);
border: 5px solid var(--template-tertiary);
border-collapse: separate;
display: block;
overflow-x: auto;
max-width: -moz-fit-content;
max-width: fit-content;
}
table:is(.styled, .cargoTable) tr:first-child th {
font-weight: normal;
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
font-size: 1.0em;
height: 40px;
padding: 0 20px;
text-align: center;
background-color: var(--template-sub-secondary);
color: var(--template-text);
}
table:is(.styled, .cargoTable) th {
background: var(--template-sub-tertiary);
border-bottom: 1px solid var(--template-shadow);
}
table:is(.styled, .cargoTable, .cargoTable.mergeSimilarCells) td:is(td, .even, .odd) {
background: var(--template-tertiary);
padding: 0 5px 0;
border: 0;
border-bottom: 1px solid var(--template-shadow);
}
table.items tbody tr {
height: 100px;
}
@media only screen and (max-width: 720px) {
table.items .image {
display: block;
max-width: 100px;
max-height: 100px;
}
table.items .image img {
width: 100%;
height: 100%;
}
}
/*-- navbox -- example: https://backpackbattles.wiki.gg/wiki/Template:Items --
.navbox {
border: 1px solid var(--theme-box-border-color);
border-radius: 8px;
display: table;
width: 100%;
margin: 0.5em auto;
}
.navbox th, .navbox td {
border: 0;
}
.navbox .navbox-vde {
position: absolute;
left: 0.5em;
font-size: 10px;
}
.navbox > .mw-collapsible-toggle {
position: absolute;
right: 0.5em;
}
.navbox .navbox-list {
white-space: normal;
}
.navbox .navbox-title,
.navbox .navbox-row {
background: #f5e2d5;
}
/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */
.portable-infobox img{
width: auto;
}
.portable-infobox {
font-family: 'Pangolin', cursive;
}
.portable-infobox a {
color: white;
}
/* ------------------ Обычная карточка ------------------ */
.portable-infobox.pi-theme-Обычный {
border-image-slice: 77 86 80 73;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("https://media.discordapp.net/attachments/1087064861575487510/1176163400586379384/TooltipBase_Common.png");
border-style: solid;
background-image: url(https://media.discordapp.net/attachments/1174814578304102400/1175550620283973642/Speckles.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 300% auto;
background-color: #a78063eb;
background-blend-mode: hard-light;
background-clip: content-box;
padding: 19px 19px 19px 19px;
color: #fff6c7;
text-shadow: 0 0 6px #000; /* тень текста */
}
/* Цвет заголовков */
.portable-infobox.pi-theme-Обычный h2{
color: #fff6c7;
}
/* Цвет описания изображения */
.portable-infobox.pi-theme-Обычный figcaption{
color: #fff6c7;
}
.portable-infobox.pi-theme-Обычный li.wds-tabs__tab.wds-is-current {
color: #fff6c7;
}
.portable-infobox.pi-theme-Обычный li.wds-tabs__tab {
color: #fff6c778;
}
.portable-infobox.pi-theme-Обычный section:not(:last-child) table.pi-horizontal-group{
border-bottom: 2px solid #fff6c7;
}
/* ------------------ Редкая карточка ------------------ */
.portable-infobox.pi-theme-Редкий{
border-image-slice: 72 57 87 42;
border-image-width: 40px 22px 41px 22px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("https://media.discordapp.net/attachments/1087064861575487510/1176168472506536036/TooltipBase_Rare.png");
border-style: solid;
background-image: url(https://media.discordapp.net/attachments/1174814578304102400/1175550620283973642/Speckles.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 485% auto;
background-color: #004995db;
background-blend-mode: hard-light;
background-clip: content-box;
padding: 39px 21px 40px 21px;
color: #84cbff;
text-shadow: 0 0 6px #000; /* тень текста */
font-family: 'Pangolin', cursive;
}
/* Цвет заголовков */
.portable-infobox.pi-theme-Редкий h2{
color: #84cbff;
font-family: 'Pangolin', cursive;
}
/* Цвет описания изображения */
.portable-infobox.pi-theme-Редкий figcaption{
color: #84cbff;
font-family: 'Pangolin', cursive;
}
.portable-infobox.pi-theme-Редкий li.wds-tabs__tab.wds-is-current {
color: #84cbff;
}
.portable-infobox.pi-theme-Редкий li.wds-tabs__tab {
color: #86ccff85;
}
.portable-infobox.pi-theme-Редкий section:not(:last-child) table.pi-horizontal-group{
border-bottom: 2px solid #84cbff;
}
/* ------------------ Эпическая карточка ------------------ */
.portable-infobox.pi-theme-Эпический{
border-image-slice: 155 69 131 53;
border-image-width: 65px 28px 65px 28px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("https://media.discordapp.net/attachments/1087064861575487510/1175866408383557752/TooltipBase_Epic.png");
border-style: solid;
background-image: url(https://media.discordapp.net/attachments/1174814578304102400/1175550620283973642/Speckles.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 282% auto;
background-color: #a16697;
background-blend-mode: hard-light;
background-clip: content-box;
padding: 64px 26px 64px 26px;
color: #ffe247;
text-shadow: 0 0 6px #000; /* тень текста */
}
/* Цвет заголовков */
.portable-infobox.pi-theme-Эпический h2{
color: #ffe247;
}
/* Цвет описания изображения */
.portable-infobox.pi-theme-Эпический figcaption{
color: #ffe247;
}
.portable-infobox.pi-theme-Эпический li.wds-tabs__tab.wds-is-current {
color: #ffe247;
}
.portable-infobox.pi-theme-Эпический li.wds-tabs__tab {
color: #ffe24794;
}
.portable-infobox.pi-theme-Эпический section:not(:last-child) table.pi-horizontal-group{
border-bottom: 2px solid #ffe247;
}
/* ------------------ Легендарная карточка ------------------ */
.portable-infobox.pi-theme-Легендарный{
border-image-slice: 146 80 164 60;
border-image-width: 65px 30px 65px 30px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url("https://media.discordapp.net/attachments/1087064861575487510/1175866425089458277/TooltipBase_Legendary.png");
border-style: solid;
background-image: url(https://media.discordapp.net/attachments/1174814578304102400/1175550620283973642/Speckles.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 333% auto;
background-color: #6d4040de;
background-blend-mode: hard-light;
padding: 64px 28px 64px 28px;
color: #ed9e37;
border-radius: 20px;
background-clip: content-box;
text-shadow: 0 0 6px #000; /* тень текста */
}
/* Цвет заголовков */
.portable-infobox.pi-theme-Легендарный h2{
color: #ed9e37;
}
/* Цвет описания изображения */
.portable-infobox.pi-theme-Легендарный figcaption{
color: #ed9e37;
}
.portable-infobox.pi-theme-Легендарный li.wds-tabs__tab.wds-is-current {
color: #ed9e37;
}
.portable-infobox.pi-theme-Легендарный li.wds-tabs__tab {
color: #ed9e377a;
}
.portable-infobox.pi-theme-Легендарный section:not(:last-child) table.pi-horizontal-group{
border-bottom: 2px solid #ed9e37;
}
/* ------------------ Божественная карточка ------------------ */
.portable-infobox.pi-theme-Божественный{
border-image-slice: 155 87 125 73;
border-image-width: 64px 24px 41px 24px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("https://media.discordapp.net/attachments/1087064861575487510/1175866440545489017/TooltipBase_Godly.png");
border-style: solid;
background-image: url(https://media.discordapp.net/attachments/1174814578304102400/1175550620283973642/Speckles.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 355% auto;
background-color: #48484869;
background-blend-mode: hard-light;
background-clip: content-box;
padding: 63px 23px 40px 22px;
color: #fff8d3;
text-shadow: 0 0 6px #000; /* тень текста */
}
/* Цвет заголовков */
.portable-infobox.pi-theme-Божественный h2{
color: #fff8d3;
}
/* Цвет описания изображения */
.portable-infobox.pi-theme-Божественный figcaption{
color: #fff8d3;
}
.portable-infobox.pi-theme-Божественный li.wds-tabs__tab.wds-is-current {
color: #fff8d3;
}
.portable-infobox.pi-theme-Божественный li.wds-tabs__tab {
color: #fff8d380;
}
.portable-infobox.pi-theme-Божественный section:not(:last-child) table.pi-horizontal-group{
border-bottom: 2px solid #fff8d3;
}
/* ------------------ Уникальная карточка ------------------ */
.portable-infobox.pi-theme-Уникальный{
border-image-slice: 12% 16% 15% 13%; /* обрезка изображения на бордер */
border-image-width: 1.5em 1.5em 1.5em 1.5em; /* ширина изображения-бордера */
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url("https://media.discordapp.net/attachments/1087064861575487510/1175866464041963661/TooltipBase_Unique.png");
border-style: solid; /* изображение рамкм */
padding: 20px; /* отступы от рамки */
background-image: url(https://media.discordapp.net/attachments/1174814578304102400/1175550620283973642/Speckles.png); /* маска */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 300% auto; /* размер фонового изображения. Можно поиграть, например с такими параметрами: 355% auto */
background-color: #33794e; /* цвет фона */
background-blend-mode: hard-light; /* режим наложения маски */
border-radius: 20px; /* скругление углов */
color: #b6db1f; /* цвет текста */
background-clip: content-box; /* подгонка фона под размеры контента */
text-shadow: 0 0 6px #000; /* тень текста */
}
/* Цвет заголовков */
.portable-infobox.pi-theme-Уникальный h2{
color: #b6db1f;
}
/* Цвет описания изображения */
.portable-infobox.pi-theme-Уникальный figcaption{
color: #b6db1f;
}
.portable-infobox.pi-theme-Уникальный li.wds-tabs__tab.wds-is-current {
color: #b6db1f;
}
.portable-infobox.pi-theme-Уникальный li.wds-tabs__tab {
color: #b6db1f80;
}
.portable-infobox.pi-theme-Уникальный section:not(:last-child) table.pi-horizontal-group{
border-bottom: 2px solid #b6db1f;
}
/* ------------------ Конец уникальной карточки ------------------ */
/* Прозрачный фон и бордер */
.pi-secondary-background {
background-color: transparent;
}
.portable-infobox.pi-theme-Обычный, .portable-infobox.pi-theme-Редкий, .portable-infobox.pi-theme-Эпический, .portable-infobox.pi-theme-Легендарный, .portable-infobox.pi-theme-Божественный, .portable-infobox.pi-theme-Уникальный {
--pi-border-color: transparent;
}
ul.wds-tabs {
display: flex;
justify-content: center;
}
section[data-item-name="Используется в рецептах"] div.pi-data-value {
text-align: center;
}