MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Vynnix (обсуждение | вклад) Редизайн темы Voris: самохост-шрифты Oswald/Spectral, звёздное небо, таблицы, пилюли |
Vynnix (обсуждение | вклад) Стиль .jmap-note (лор-сноска карты) |
||
| (не показано 7 промежуточных версий этого же участника) | |||
| Строка 315: | Строка 315: | ||
} | } | ||
/* ============================================================ | /* ============================================================ | ||
Junction Wiki — тема | Junction Wiki — тема «Voris / Космос» поверх Citizen 3.x | ||
Ревизия 2026-07-23: единый арт-дирекшн с главной сайта — | |||
фон #03030a, пиксельные звёзды, цвет как навигационная | |||
семантика (кромки карточек портала, планеты миров). | |||
Ссылки в тексте — белые (решение 2026-07-19, не трогать). | |||
Шрифты самохост (/resources/assets/junction/fonts). | |||
============================================================ */ | ============================================================ */ | ||
/* ---------- 1. Палитра ---------- */ | /* ---------- 1. Палитра ---------- */ | ||
:root, html, .skin-citizen { | :root, html, .skin-citizen { | ||
--jv-bg: # | --jv-bg: #03030a; | ||
--jv-surface: # | --jv-surface: #0d0d16; | ||
--jv-surface-2: # | --jv-surface-2: #12121e; | ||
--jv-border: # | --jv-border: #232338; | ||
--jv-border-soft: # | --jv-border-soft: #1a1a2a; | ||
--jv-violet: #9d6ee0; | --jv-violet: #9d6ee0; | ||
--jv-violet-deep: #5a3b8c; | --jv-violet-deep: #5a3b8c; | ||
--jv-gold: #e8c06b; | --jv-gold: #e8c06b; | ||
--jv-text: #e8e6ee; | --jv-text: #e8e6ee; | ||
--jv-muted: # | --jv-white: #ffffff; | ||
--jv-muted: #a3a0ae; | |||
/* палитра PLANET_COLORS мода */ | |||
--jv-p-green: #55FF55; | |||
--jv-p-ice: #A0E0FF; | |||
--jv-p-orange: #FFA500; | |||
--jv-p-red: #FF5555; | |||
--color-primary: var(--jv-violet); | --color-primary: var(--jv-violet); | ||
--color-primary--hover: | --color-primary--hover: #b088e8; | ||
--color-progressive: var(--jv-violet); | --color-progressive: var(--jv-violet); | ||
--color-progressive--hover: | --color-progressive--hover: #b088e8; | ||
--color-progressive--active: #c7a6f0; | --color-progressive--active: #c7a6f0; | ||
--color-link: var(--jv- | --color-link: var(--jv-white); | ||
--color-link-- | --color-link--visited: var(--jv-white); | ||
--color-link--active: var(--jv-white); | |||
--border-color-base: var(--jv-border); | --border-color-base: var(--jv-border); | ||
--font-family-heading: 'Oswald', 'Arial Narrow', sans-serif; | --font-family-heading: 'Oswald', 'Arial Narrow', sans-serif; | ||
} | } | ||
/* ---------- 2. | /* ---------- 2. Фон: космос главной сайта ---------- */ | ||
body.skin-citizen { | body.skin-citizen { | ||
background-color: var(--jv-bg); | |||
background-image: | background-image: | ||
radial-gradient( | radial-gradient(900px 420px at 22% -140px, #16112a 0%, transparent 62%), | ||
radial-gradient(760px 520px at 88% 112%, #100d1c 0%, transparent 55%), | |||
radial-gradient(500px 300px at 70% 30%, rgba(90,59,140,.07) 0%, transparent 70%); | |||
radial-gradient( | |||
radial-gradient( | |||
background-attachment: fixed; | background-attachment: fixed; | ||
} | |||
/* пиксельные звёзды: два слоя квадратов, еле заметный дрейф. | |||
z-index:-1 — за контентом, поверх фона body; не ловят клики. */ | |||
body.skin-citizen::before, | |||
body.skin-citizen::after { | |||
content: ""; | |||
position: fixed; | |||
top: 0; left: 0; | |||
width: 2px; height: 2px; | |||
z-index: -1; | |||
pointer-events: none; | |||
} | |||
body.skin-citizen::before { | |||
background: #fff; | |||
opacity: .8; | |||
box-shadow: | |||
17vw 12vh #fff, 33vw 4vh rgba(255,255,255,.69), 51vw 21vh #fff, | |||
68vw 8vh rgba(255,255,255,.56), 84vw 17vh #fff, 8vw 33vh rgba(255,255,255,.63), | |||
26vw 44vh #fff, 47vw 37vh rgba(255,255,255,.5), 62vw 48vh #fff, | |||
91vw 39vh rgba(255,255,255,.69), 14vw 61vh #fff, 38vw 57vh rgba(255,255,255,.56), | |||
57vw 69vh #fff, 76vw 62vh rgba(255,255,255,.63), 95vw 71vh #fff, | |||
5vw 83vh rgba(255,255,255,.56), 29vw 91vh #fff, 49vw 79vh rgba(255,255,255,.69), | |||
71vw 88vh #fff, 88vw 94vh rgba(255,255,255,.5); | |||
animation: jv-drift 260s linear infinite; | |||
} | |||
body.skin-citizen::after { | |||
background: #AA00FF; | |||
opacity: .5; | |||
box-shadow: | |||
11vw 27vh #AA00FF, 41vw 14vh rgba(170,0,255,.5), 59vw 31vh #AA00FF, | |||
79vw 24vh rgba(170,0,255,.56), 22vw 52vh rgba(170,0,255,.44), 66vw 55vh #AA00FF, | |||
86vw 47vh rgba(170,0,255,.5), 12vw 74vh #AA00FF, 35vw 68vh rgba(170,0,255,.56), | |||
55vw 87vh #AA00FF, 81vw 78vh rgba(170,0,255,.44), 44vw 96vh rgba(170,0,255,.56); | |||
animation: jv-drift 180s linear infinite reverse; | |||
} | |||
@keyframes jv-drift { | |||
from { transform: translate(0, 0); } | |||
to { transform: translate(-60px, 60px); } | |||
} | |||
@media (prefers-reduced-motion: reduce) { | |||
body.skin-citizen::before, | |||
body.skin-citizen::after { animation: none; } | |||
} | } | ||
| Строка 366: | Строка 410: | ||
#firstHeading { | #firstHeading { | ||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
font-weight: | font-weight: 600; | ||
letter-spacing: . | letter-spacing: .05em; | ||
color: var(--jv-white); | |||
} | } | ||
.citizen-page-heading { | .citizen-page-heading { | ||
position: relative; | position: relative; | ||
border-bottom: 1px solid var(--jv-border-soft); | |||
padding-bottom: .45rem; | padding-bottom: .45rem; | ||
} | } | ||
.citizen-page-heading::after { | .citizen-page-heading::after { | ||
content: ""; | content: ""; | ||
position: absolute; left: 0; bottom: | position: absolute; | ||
width: | left: 0; bottom: -1px; | ||
background: | width: 72px; height: 2px; | ||
background: var(--jv-violet); | |||
} | } | ||
.mw-parser-output h2, | .mw-parser-output h2, | ||
| Строка 383: | Строка 430: | ||
.mw-parser-output h4 { | .mw-parser-output h4 { | ||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
font-weight: | font-weight: 600; | ||
letter-spacing: . | letter-spacing: .04em; | ||
color: var(--jv-white); | |||
} | } | ||
.mw-parser-output h2 { | .mw-parser-output h2 { | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--jv-border-soft); | ||
padding-bottom: .25rem; | padding-bottom: .25rem; | ||
} | } | ||
/* пиксель-квадрат перед h2 статьи */ | |||
.mw-parser-output h2 .mw-headline::before { | .mw-parser-output h2 .mw-headline::before { | ||
content: " | content: ""; | ||
display: inline-block; | |||
width: 6px; height: 6px; | |||
background: var(--jv-violet); | |||
margin-right: .55rem; | |||
vertical-align: .18em; | vertical-align: .18em; | ||
} | } | ||
/* Ссылки: | /* Ссылки: белые, в тексте статьи — с тонким подчёркиванием */ | ||
.mw-parser-output a { | |||
color: var(--jv-white); | |||
text-decoration: underline; | |||
text-underline-offset: 3px; | |||
text-decoration-thickness: 1px; | |||
text-decoration-color: rgba(255,255,255,.3); | |||
} | |||
.mw-parser-output a:hover { | .mw-parser-output a:hover { | ||
text- | text-decoration-color: var(--jv-violet); | ||
} | } | ||
/* Красные ссылки — | /* Красные ссылки — приглушённая терракота */ | ||
.mw-parser-output a.new { color: #d98d7a; } | .mw-parser-output a.new, | ||
.mw-parser-output a.new:visited { color: #d98d7a; } | |||
/* ---------- 4. Таблицы ---------- */ | /* ---------- 4. Таблицы ---------- */ | ||
.mw-parser-output .wikitable { | .mw-parser-output .wikitable { | ||
background: rgba( | background: rgba(13,13,22,.82); | ||
border: 1px solid var(--jv-border); | border: 1px solid var(--jv-border); | ||
border-radius: .45rem; | |||
border-radius: . | |||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.mw-parser-output .wikitable > * > tr > th { | .mw-parser-output .wikitable > * > tr > th { | ||
background: | background: var(--jv-surface-2); | ||
color: var(--jv- | color: var(--jv-white); | ||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
font-weight: 500; | font-weight: 500; | ||
| Строка 434: | Строка 489: | ||
.mw-parser-output .wikitable > * > tr:last-child > td { border-bottom: 0; } | .mw-parser-output .wikitable > * > tr:last-child > td { border-bottom: 0; } | ||
.mw-parser-output .wikitable > * > tr:nth-child(even) > td { background: rgba(255,255,255,.018); } | .mw-parser-output .wikitable > * > tr:nth-child(even) > td { background: rgba(255,255,255,.018); } | ||
/* ---------- 5. Лор-цитата ---------- */ | /* ---------- 5. Лор-цитата ---------- */ | ||
.lore-quote { | .lore-quote { | ||
font-family: 'Spectral', Georgia, serif; | font-family: 'Spectral', Georgia, serif; | ||
font-style: italic; | font-style: italic; | ||
font-size: 1.12em; | font-size: 1.12em; | ||
color: # | color: #cfcadf; | ||
background: linear-gradient(90deg, rgba( | border-left: 2px solid var(--jv-violet-deep); | ||
background: linear-gradient(90deg, rgba(157,110,224,.06), transparent 70%); | |||
margin: 0 0 1.1em; | margin: 0 0 1.1em; | ||
padding: .55em 1em .55em | padding: .55em 1.1em .55em 1.2em; | ||
} | } | ||
/* ---------- 6. Инфобокс ---------- */ | /* ---------- 6. Инфобокс ---------- */ | ||
.infobox { | .infobox { | ||
background: linear-gradient(180deg, | background: linear-gradient(180deg, var(--jv-surface-2), var(--jv-surface)); | ||
border: 1px solid var(--jv-border); | border: 1px solid var(--jv-border); | ||
border-radius: .6rem; | border-radius: .6rem; | ||
color: var(--jv-text); | color: var(--jv-text); | ||
float: right; clear: right; | float: right; clear: right; | ||
| Строка 471: | Строка 514: | ||
} | } | ||
.infobox .infobox-title { | .infobox .infobox-title { | ||
background: | background: linear-gradient(90deg, rgba(157,110,224,.12), transparent); | ||
border-bottom: 1px solid var(--jv-border-soft); | |||
color: var(--jv-white); | |||
color: | |||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
font-size: 1. | font-size: 1.12em; font-weight: 600; letter-spacing: .1em; | ||
padding: . | padding: .6em .8em; text-align: center; | ||
} | } | ||
.infobox th { text-align: left; color: var(--jv- | .infobox th { text-align: left; color: var(--jv-muted); font-weight: 500; padding: .4em .8em; width: 38%; vertical-align: top; } | ||
.infobox td { padding: . | .infobox td { padding: .4em .8em; } | ||
.infobox tr + tr th, .infobox tr + tr td { border-top: 1px solid var(--jv-border-soft); } | .infobox tr + tr th, .infobox tr + tr td { border-top: 1px solid var(--jv-border-soft); } | ||
/* ---------- 7. Код и прочее ---------- */ | /* ---------- 7. Код и прочее ---------- */ | ||
.mw-parser-output code { | .mw-parser-output code { | ||
background: | background: var(--jv-surface-2); | ||
border: 1px solid var(--jv-border-soft); | border: 1px solid var(--jv-border-soft); | ||
border-radius: .3rem; | border-radius: .3rem; | ||
color: | color: var(--jv-text); | ||
padding: .1em .35em; | padding: .1em .35em; | ||
} | } | ||
.mw-parser-output pre { | .mw-parser-output pre { | ||
background: rgba( | background: rgba(13,13,22,.85); | ||
border: 1px solid var(--jv-border-soft); | border: 1px solid var(--jv-border-soft); | ||
border-radius: .45rem; | border-radius: .45rem; | ||
color: # | color: #d4d0de; | ||
} | } | ||
.mw-parser-output hr { | .mw-parser-output hr { | ||
border: 0; height: 1px; | border: 0; height: 1px; | ||
background: | background: var(--jv-border); | ||
margin: 1.6em 0; | margin: 1.6em 0; | ||
} | } | ||
| Строка 519: | Строка 558: | ||
.catlinks li a { | .catlinks li a { | ||
display: inline-block; | display: inline-block; | ||
background: rgba( | background: rgba(255,255,255,.04); | ||
border: 1px solid var(--jv-border); | border: 1px solid var(--jv-border); | ||
border-radius: 99px; | border-radius: 99px; | ||
padding: .12em .8em; | padding: .12em .8em; | ||
font-size: .92em; | font-size: .92em; | ||
transition: border-color | text-decoration: none; | ||
transition: border-color .2s; | |||
} | } | ||
.catlinks li a:hover { | .catlinks li a:hover { | ||
border-color: var(--jv- | border-color: var(--jv-muted); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
/* ---------- 8. Главная: портал ---------- */ | /* ---------- 8. Главная: портал «Космос» ---------- */ | ||
.portal-hero { text-align: center; padding: | .portal-hero { text-align: center; padding: 2.2rem 0 .5rem; } | ||
.portal-hero .lore-quote { | .portal-hero .lore-quote { | ||
background: none; border: 0; text-align: center; | background: none; border: 0; text-align: center; | ||
font-size: 1. | font-size: 1.42em; color: #cfcadf; | ||
max-width: 680px; margin: 0 auto . | max-width: 680px; margin: 0 auto .8em; padding: 0; | ||
} | } | ||
.portal-sub { | .portal-sub { | ||
color: var(--jv-muted); | color: var(--jv-muted); | ||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
letter-spacing: . | letter-spacing: .22em; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
font-size: . | font-size: .88em; | ||
} | |||
.portal-sub::after { | |||
content: ""; | |||
display: block; | |||
width: 180px; height: 1px; | |||
margin: 1.2rem auto 0; | |||
background: linear-gradient(90deg, transparent, var(--jv-violet-deep), transparent); | |||
} | } | ||
.portal-grid { | .portal-grid { | ||
display: grid; grid-template-columns: repeat(auto-fit, minmax( | display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
gap: | gap: .9rem; margin: 1.5rem 0; | ||
counter-reset: jv-portal; | |||
} | } | ||
.portal-box { | .portal-box { | ||
--hue: var(--jv-violet); | |||
position: relative; | position: relative; | ||
background: | counter-increment: jv-portal; | ||
background: linear-gradient(180deg, var(--jv-surface-2), var(--jv-surface)); | |||
border: 1px solid var(--jv-border); | border: 1px solid var(--jv-border); | ||
border-radius: . | border-radius: .7rem; | ||
padding: 1rem 1.15rem .85rem; | padding: 1rem 1.15rem .85rem; | ||
overflow: hidden; | overflow: hidden; | ||
transition: border-color . | transition: border-color .2s; | ||
} | } | ||
/* тонкая цветная кромка сверху — вся сема цвета тут */ | |||
.portal-box::before { | .portal-box::before { | ||
content: ""; | content: ""; | ||
position: absolute; top: 0; left: 0; right: 0; height: 2px; | position: absolute; | ||
background: linear-gradient(90deg, var(-- | top: 0; left: 0; right: 0; | ||
opacity: . | height: 2px; | ||
background: linear-gradient(90deg, var(--hue), transparent 78%); | |||
opacity: .85; | |||
} | } | ||
.portal-box: | /* номер раздела */ | ||
.portal-box::after { | |||
content: "0" counter(jv-portal); | |||
position: absolute; | |||
top: .5rem; right: .8rem; | |||
font-family: var(--font-family-heading); | |||
font-size: 1.7rem; font-weight: 600; | |||
letter-spacing: .05em; | |||
color: var(--hue); | |||
opacity: .16; | |||
} | } | ||
.portal-box:hover { border-color: var(--jv-muted); } | |||
/* цвет = смысл раздела */ | |||
.portal-box:nth-child(1) { --hue: var(--jv-gold); } /* Начало */ | |||
.portal-box:nth-child(2) { --hue: var(--jv-violet); } /* Магия */ | |||
.portal-box:nth-child(3) { --hue: var(--jv-p-ice); } /* Путешествия */ | |||
.portal-box:nth-child(4) { --hue: var(--jv-p-red); } /* Угрозы */ | |||
.portal-box:nth-child(5) { --hue: var(--jv-p-green); } /* База */ | |||
.portal-box:nth-child(6) { --hue: #d9d5e6; } /* Легенды */ | |||
.portal-box:nth-child(7) { --hue: #8a8a9a; } /* Вне игры */ | |||
.portal-box .ph { | .portal-box .ph { | ||
display: block; | display: block; | ||
color: var(--jv- | color: var(--jv-white); | ||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
font-size: 1. | font-size: 1.02em; font-weight: 600; | ||
letter-spacing: . | letter-spacing: .1em; text-transform: uppercase; | ||
margin-bottom: .55rem; | margin-bottom: .55rem; | ||
} | } | ||
.portal-box ul { margin: 0; padding-left: | /* пиксель-квадрат вместо эмодзи */ | ||
.portal-box li { margin: . | .portal-box .ph::before { | ||
.portal-box li:: | content: ""; | ||
display: inline-block; | |||
width: 8px; height: 8px; | |||
background: var(--hue); | |||
box-shadow: 0 0 8px var(--hue); | |||
margin-right: .55rem; | |||
vertical-align: .08em; | |||
} | |||
.portal-box ul { margin: 0; padding-left: .2em; list-style: none; } | |||
.portal-box li { margin: .26em 0; font-size: .95em; } | |||
.portal-box li a { | |||
color: #c9c5d6; | |||
text-decoration: none; | |||
border-bottom: 1px solid rgba(255,255,255,.13); | |||
} | |||
.portal-box li a:hover { color: var(--jv-white); border-bottom-color: var(--hue); } | |||
/* ---------- 8а. Миры — планеты как на главной сайта ---------- */ | |||
.world-grid { | |||
display: grid; | |||
grid-template-columns: repeat(6, 1fr); | |||
gap: 12px; | |||
margin: 1.1rem 0 1.4rem; | |||
} | |||
/* MediaWiki оборачивает строки в <p> — растворяем, чтобы grid видел спаны */ | |||
.world-grid > p { display: contents; margin: 0; } | |||
.world-grid .world { display: block; } | |||
.world-grid .world a { | |||
display: flex; flex-direction: column; align-items: center; gap: .55rem; | |||
padding: .85rem .3rem .7rem; | |||
border: 1px solid transparent; | |||
border-radius: .6rem; | |||
font-family: var(--font-family-heading); | |||
letter-spacing: .08em; | |||
font-size: .88em; | |||
color: #c9c5d6; | |||
text-decoration: none; | |||
transition: border-color .18s, background .18s; | |||
} | |||
.world-grid .world a::before { | |||
content: ""; | |||
width: 26px; height: 26px; | |||
background: var(--pc, var(--jv-violet)); | |||
box-shadow: 0 0 14px var(--pc, var(--jv-violet)), inset -6px -6px 0 rgba(0,0,0,.35); | |||
} | |||
.world-grid .world a:hover { | |||
border-color: var(--jv-border); | |||
background: rgba(255,255,255,.02); | |||
color: var(--jv-white); | |||
text-decoration: none; | |||
} | |||
/* | /* ---------- 8б. Интерактивная карта миров («Карта миров») ---------- */ | ||
. | .jmap-wrap { | ||
overflow-x: auto; | |||
margin: 1.2rem 0; | |||
border: 1px solid var(--jv-border); | border: 1px solid var(--jv-border); | ||
border-radius: | border-radius: .7rem; | ||
background: | |||
margin: . | repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px), | ||
radial-gradient(70% 90% at 50% 40%, #0b0b16 0%, #05050c 100%); | |||
} | |||
.jmap { | |||
position: relative; | |||
width: 940px; | |||
height: 600px; | |||
margin: 0 auto; | |||
} | |||
/* MediaWiki оборачивает строки в <p> — растворяем */ | |||
.jmap > p { display: contents; margin: 0; } | |||
/* нить связи; поворот от левого конца (центр мира-источника) */ | |||
.jmap-edge { | |||
position: absolute; | |||
height: 0; | |||
border-top: 1px solid rgba(157,110,224,.32); | |||
transform-origin: 0 0; | |||
pointer-events: none; | |||
} | |||
/* стрелка направления открытия — у конца нити, сразу за планетой */ | |||
.jmap-edge::after { | |||
content: ""; | |||
position: absolute; | |||
right: 26px; top: -4px; | |||
border: 4px solid transparent; | |||
border-left: 7px solid rgba(157,110,224,.6); | |||
} | |||
.jmap-node { | |||
position: absolute; | |||
transform: translate(-50%, -50%); | |||
z-index: 1; | |||
} | |||
.jmap-node a { | |||
display: flex; flex-direction: column; align-items: center; gap: .45rem; | |||
padding: .5rem .6rem; | |||
border: 1px solid transparent; | |||
border-radius: .55rem; | |||
font-family: var(--font-family-heading); | font-family: var(--font-family-heading); | ||
letter-spacing: . | font-size: .85em; | ||
transition: border-color . | letter-spacing: .08em; | ||
color: #c9c5d6; | |||
text-decoration: none; | |||
transition: border-color .18s, background .18s; | |||
} | |||
.jmap-node a::before { | |||
content: ""; | |||
width: 22px; height: 22px; | |||
background: var(--pc, var(--jv-violet)); | |||
box-shadow: 0 0 14px var(--pc, var(--jv-violet)), inset -5px -5px 0 rgba(0,0,0,.35); | |||
} | } | ||
. | .jmap-node a:hover { | ||
border-color: var(--jv- | border-color: var(--jv-border); | ||
background: rgba( | background: rgba(255,255,255,.03); | ||
color: var(--jv-white); | |||
text-decoration: none; | text-decoration: none; | ||
} | |||
/* корень графа — крупнее и подписан белым */ | |||
.jmap-node--start a { color: var(--jv-white); } | |||
.jmap-node--start a::before { width: 28px; height: 28px; } | |||
/* Крайний мир — пунктирное кольцо Скверны */ | |||
.jmap-node--extreme a::before { | |||
outline: 1px dashed rgba(255,255,255,.4); | |||
outline-offset: 3px; | |||
} | |||
.jmap-legend { | |||
color: var(--jv-muted); | |||
font-size: .88em; | |||
margin: .5rem 0 1.2rem; | |||
} | |||
/* лор-сноска под картой («иллюстрация Терцера») */ | |||
.jmap-note { | |||
font-family: 'Spectral', Georgia, serif; | |||
font-style: italic; | |||
color: #8f8b9c; | |||
font-size: .92em; | |||
margin: .4rem 0 1.1rem; | |||
} | } | ||
/* Изображения и галереи */ | |||
.mw-parser-output .thumbinner, | |||
.mw-parser-output figure[typeof~="mw:File/Thumb"] { | |||
background: var(--jv-surface); | |||
border: 1px solid var(--jv-border); | |||
border-radius: .45rem; | |||
} | |||
.mw-parser-output figcaption, | |||
.mw-parser-output .thumbcaption { color: var(--jv-muted); font-size: .9em; } | |||
/* ---------- 9. Мобильная адаптация ---------- */ | /* ---------- 9. Мобильная адаптация ---------- */ | ||
.infobox code { white-space: normal; overflow-wrap: anywhere; } | |||
/* Широкий контент не должен распирать grid-колонки Citizen */ | |||
.citizen-body-container, .citizen-body, .mw-body, #mw-content-text { min-width: 0; } | |||
@media (max-width: 900px) { | |||
.world-grid { grid-template-columns: repeat(4, 1fr); } | |||
} | |||
@media (max-width: 640px) { | @media (max-width: 640px) { | ||
.infobox { float: none; width: 100%; margin: 0 0 1em; } | .infobox { float: none; width: 100%; margin: 0 0 1em; table-layout: fixed; } | ||
.infobox th { width: 34%; } | |||
.mw-parser-output .wikitable { display: block; overflow-x: auto; } | .mw-parser-output .wikitable { display: block; overflow-x: auto; } | ||
.mw-parser-output { max-width: 100%; overflow-x: hidden; } | |||
.world-grid { grid-template-columns: repeat(3, 1fr); } | |||
} | |||
/* ---------- 10. Медиа-заглушки ({{Медиа}}) — «кадр Гляденя» ---------- */ | |||
.media-slot { | |||
position: relative; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: .35rem; | |||
min-height: 130px; | |||
margin: 1.1rem 0; | |||
padding: 1.2rem 1.4rem; | |||
border: 1px solid var(--jv-border); | |||
border-radius: .4rem; | |||
background: | |||
repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px), | |||
radial-gradient(60% 90% at 50% 50%, #0e0e1a 0%, #08080f 100%); | |||
text-align: center; | |||
} | |||
.media-slot::before, | |||
.media-slot::after { | |||
content: ""; | |||
position: absolute; | |||
width: 14px; height: 14px; | |||
border: 1px solid var(--jv-violet-deep); | |||
} | |||
.media-slot::before { top: 8px; left: 8px; border-right: none; border-bottom: none; } | |||
.media-slot::after { bottom: 8px; right: 8px; border-left: none; border-top: none; } | |||
.media-slot-eye { | |||
color: var(--jv-violet); | |||
opacity: .6; | |||
font-size: 1.3em; | |||
line-height: 1; | |||
} | |||
.media-slot-cap { | |||
font-family: var(--font-family-heading); | |||
letter-spacing: .18em; | |||
font-size: .78em; | |||
color: var(--jv-muted); | |||
text-transform: uppercase; | |||
} | } | ||
.media-slot-sub { font-size: .85em; color: #6d6a7a; line-height: 1.4; } | |||
Текущая версия от 15:44, 23 июля 2026
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/resources/assets/junction/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCt-xNNww_2s0amA9M8onfmTMuk.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCt-xNNww_2s0amA9M8on7mTMuk.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCt-xNNww_2s0amA9M8onXmTMuk.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCt-xNNww_2s0amA9M8onTmTMuk.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCt-xNNww_2s0amA9M8onrmTA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCr-xNNww_2s0amA9M0knj-SA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCr-xNNww_2s0amA9M9knj-SA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCr-xNNww_2s0amA9M2knj-SA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCr-xNNww_2s0amA9M3knj-SA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCr-xNNww_2s0amA9M5kng.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCs-xNNww_2s0amA9vKsW3MafadWQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCs-xNNww_2s0amA9vKsW3FafadWQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCs-xNNww_2s0amA9vKsW3OafadWQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCs-xNNww_2s0amA9vKsW3PafadWQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/resources/assets/junction/fonts/rnCs-xNNww_2s0amA9vKsW3BafY.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
Junction Wiki — тема «Voris / Космос» поверх Citizen 3.x
Ревизия 2026-07-23: единый арт-дирекшн с главной сайта —
фон #03030a, пиксельные звёзды, цвет как навигационная
семантика (кромки карточек портала, планеты миров).
Ссылки в тексте — белые (решение 2026-07-19, не трогать).
Шрифты самохост (/resources/assets/junction/fonts).
============================================================ */
/* ---------- 1. Палитра ---------- */
:root, html, .skin-citizen {
--jv-bg: #03030a;
--jv-surface: #0d0d16;
--jv-surface-2: #12121e;
--jv-border: #232338;
--jv-border-soft: #1a1a2a;
--jv-violet: #9d6ee0;
--jv-violet-deep: #5a3b8c;
--jv-gold: #e8c06b;
--jv-text: #e8e6ee;
--jv-white: #ffffff;
--jv-muted: #a3a0ae;
/* палитра PLANET_COLORS мода */
--jv-p-green: #55FF55;
--jv-p-ice: #A0E0FF;
--jv-p-orange: #FFA500;
--jv-p-red: #FF5555;
--color-primary: var(--jv-violet);
--color-primary--hover: #b088e8;
--color-progressive: var(--jv-violet);
--color-progressive--hover: #b088e8;
--color-progressive--active: #c7a6f0;
--color-link: var(--jv-white);
--color-link--visited: var(--jv-white);
--color-link--active: var(--jv-white);
--border-color-base: var(--jv-border);
--font-family-heading: 'Oswald', 'Arial Narrow', sans-serif;
}
/* ---------- 2. Фон: космос главной сайта ---------- */
body.skin-citizen {
background-color: var(--jv-bg);
background-image:
radial-gradient(900px 420px at 22% -140px, #16112a 0%, transparent 62%),
radial-gradient(760px 520px at 88% 112%, #100d1c 0%, transparent 55%),
radial-gradient(500px 300px at 70% 30%, rgba(90,59,140,.07) 0%, transparent 70%);
background-attachment: fixed;
}
/* пиксельные звёзды: два слоя квадратов, еле заметный дрейф.
z-index:-1 — за контентом, поверх фона body; не ловят клики. */
body.skin-citizen::before,
body.skin-citizen::after {
content: "";
position: fixed;
top: 0; left: 0;
width: 2px; height: 2px;
z-index: -1;
pointer-events: none;
}
body.skin-citizen::before {
background: #fff;
opacity: .8;
box-shadow:
17vw 12vh #fff, 33vw 4vh rgba(255,255,255,.69), 51vw 21vh #fff,
68vw 8vh rgba(255,255,255,.56), 84vw 17vh #fff, 8vw 33vh rgba(255,255,255,.63),
26vw 44vh #fff, 47vw 37vh rgba(255,255,255,.5), 62vw 48vh #fff,
91vw 39vh rgba(255,255,255,.69), 14vw 61vh #fff, 38vw 57vh rgba(255,255,255,.56),
57vw 69vh #fff, 76vw 62vh rgba(255,255,255,.63), 95vw 71vh #fff,
5vw 83vh rgba(255,255,255,.56), 29vw 91vh #fff, 49vw 79vh rgba(255,255,255,.69),
71vw 88vh #fff, 88vw 94vh rgba(255,255,255,.5);
animation: jv-drift 260s linear infinite;
}
body.skin-citizen::after {
background: #AA00FF;
opacity: .5;
box-shadow:
11vw 27vh #AA00FF, 41vw 14vh rgba(170,0,255,.5), 59vw 31vh #AA00FF,
79vw 24vh rgba(170,0,255,.56), 22vw 52vh rgba(170,0,255,.44), 66vw 55vh #AA00FF,
86vw 47vh rgba(170,0,255,.5), 12vw 74vh #AA00FF, 35vw 68vh rgba(170,0,255,.56),
55vw 87vh #AA00FF, 81vw 78vh rgba(170,0,255,.44), 44vw 96vh rgba(170,0,255,.56);
animation: jv-drift 180s linear infinite reverse;
}
@keyframes jv-drift {
from { transform: translate(0, 0); }
to { transform: translate(-60px, 60px); }
}
@media (prefers-reduced-motion: reduce) {
body.skin-citizen::before,
body.skin-citizen::after { animation: none; }
}
/* ---------- 3. Типографика ---------- */
.citizen-page-heading .mw-page-title-main,
#firstHeading {
font-family: var(--font-family-heading);
font-weight: 600;
letter-spacing: .05em;
color: var(--jv-white);
}
.citizen-page-heading {
position: relative;
border-bottom: 1px solid var(--jv-border-soft);
padding-bottom: .45rem;
}
.citizen-page-heading::after {
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 72px; height: 2px;
background: var(--jv-violet);
}
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
font-family: var(--font-family-heading);
font-weight: 600;
letter-spacing: .04em;
color: var(--jv-white);
}
.mw-parser-output h2 {
border-bottom: 1px solid var(--jv-border-soft);
padding-bottom: .25rem;
}
/* пиксель-квадрат перед h2 статьи */
.mw-parser-output h2 .mw-headline::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
background: var(--jv-violet);
margin-right: .55rem;
vertical-align: .18em;
}
/* Ссылки: белые, в тексте статьи — с тонким подчёркиванием */
.mw-parser-output a {
color: var(--jv-white);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255,255,255,.3);
}
.mw-parser-output a:hover {
text-decoration-color: var(--jv-violet);
}
/* Красные ссылки — приглушённая терракота */
.mw-parser-output a.new,
.mw-parser-output a.new:visited { color: #d98d7a; }
/* ---------- 4. Таблицы ---------- */
.mw-parser-output .wikitable {
background: rgba(13,13,22,.82);
border: 1px solid var(--jv-border);
border-radius: .45rem;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.mw-parser-output .wikitable > * > tr > th {
background: var(--jv-surface-2);
color: var(--jv-white);
font-family: var(--font-family-heading);
font-weight: 500;
letter-spacing: .04em;
border: 0;
border-bottom: 1px solid var(--jv-border);
padding: .5em .8em;
}
.mw-parser-output .wikitable > * > tr > td {
border: 0;
border-bottom: 1px solid var(--jv-border-soft);
padding: .48em .8em;
}
.mw-parser-output .wikitable > * > tr:last-child > td { border-bottom: 0; }
.mw-parser-output .wikitable > * > tr:nth-child(even) > td { background: rgba(255,255,255,.018); }
/* ---------- 5. Лор-цитата ---------- */
.lore-quote {
font-family: 'Spectral', Georgia, serif;
font-style: italic;
font-size: 1.12em;
color: #cfcadf;
border-left: 2px solid var(--jv-violet-deep);
background: linear-gradient(90deg, rgba(157,110,224,.06), transparent 70%);
margin: 0 0 1.1em;
padding: .55em 1.1em .55em 1.2em;
}
/* ---------- 6. Инфобокс ---------- */
.infobox {
background: linear-gradient(180deg, var(--jv-surface-2), var(--jv-surface));
border: 1px solid var(--jv-border);
border-radius: .6rem;
color: var(--jv-text);
float: right; clear: right;
margin: 0 0 1em 1.2em; padding: 0;
width: 300px; max-width: 92vw;
font-size: .9em; overflow: hidden;
}
.infobox .infobox-title {
background: linear-gradient(90deg, rgba(157,110,224,.12), transparent);
border-bottom: 1px solid var(--jv-border-soft);
color: var(--jv-white);
font-family: var(--font-family-heading);
font-size: 1.12em; font-weight: 600; letter-spacing: .1em;
padding: .6em .8em; text-align: center;
}
.infobox th { text-align: left; color: var(--jv-muted); font-weight: 500; padding: .4em .8em; width: 38%; vertical-align: top; }
.infobox td { padding: .4em .8em; }
.infobox tr + tr th, .infobox tr + tr td { border-top: 1px solid var(--jv-border-soft); }
/* ---------- 7. Код и прочее ---------- */
.mw-parser-output code {
background: var(--jv-surface-2);
border: 1px solid var(--jv-border-soft);
border-radius: .3rem;
color: var(--jv-text);
padding: .1em .35em;
}
.mw-parser-output pre {
background: rgba(13,13,22,.85);
border: 1px solid var(--jv-border-soft);
border-radius: .45rem;
color: #d4d0de;
}
.mw-parser-output hr {
border: 0; height: 1px;
background: var(--jv-border);
margin: 1.6em 0;
}
/* Категории → пилюли */
.catlinks {
background: transparent;
border: 0;
padding-left: 0;
}
.catlinks li {
border: 0;
margin: .15rem .3rem .15rem 0;
padding: 0;
}
.catlinks li a {
display: inline-block;
background: rgba(255,255,255,.04);
border: 1px solid var(--jv-border);
border-radius: 99px;
padding: .12em .8em;
font-size: .92em;
text-decoration: none;
transition: border-color .2s;
}
.catlinks li a:hover {
border-color: var(--jv-muted);
text-decoration: none;
}
/* ---------- 8. Главная: портал «Космос» ---------- */
.portal-hero { text-align: center; padding: 2.2rem 0 .5rem; }
.portal-hero .lore-quote {
background: none; border: 0; text-align: center;
font-size: 1.42em; color: #cfcadf;
max-width: 680px; margin: 0 auto .8em; padding: 0;
}
.portal-sub {
color: var(--jv-muted);
font-family: var(--font-family-heading);
letter-spacing: .22em;
text-transform: uppercase;
font-size: .88em;
}
.portal-sub::after {
content: "";
display: block;
width: 180px; height: 1px;
margin: 1.2rem auto 0;
background: linear-gradient(90deg, transparent, var(--jv-violet-deep), transparent);
}
.portal-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: .9rem; margin: 1.5rem 0;
counter-reset: jv-portal;
}
.portal-box {
--hue: var(--jv-violet);
position: relative;
counter-increment: jv-portal;
background: linear-gradient(180deg, var(--jv-surface-2), var(--jv-surface));
border: 1px solid var(--jv-border);
border-radius: .7rem;
padding: 1rem 1.15rem .85rem;
overflow: hidden;
transition: border-color .2s;
}
/* тонкая цветная кромка сверху — вся сема цвета тут */
.portal-box::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--hue), transparent 78%);
opacity: .85;
}
/* номер раздела */
.portal-box::after {
content: "0" counter(jv-portal);
position: absolute;
top: .5rem; right: .8rem;
font-family: var(--font-family-heading);
font-size: 1.7rem; font-weight: 600;
letter-spacing: .05em;
color: var(--hue);
opacity: .16;
}
.portal-box:hover { border-color: var(--jv-muted); }
/* цвет = смысл раздела */
.portal-box:nth-child(1) { --hue: var(--jv-gold); } /* Начало */
.portal-box:nth-child(2) { --hue: var(--jv-violet); } /* Магия */
.portal-box:nth-child(3) { --hue: var(--jv-p-ice); } /* Путешествия */
.portal-box:nth-child(4) { --hue: var(--jv-p-red); } /* Угрозы */
.portal-box:nth-child(5) { --hue: var(--jv-p-green); } /* База */
.portal-box:nth-child(6) { --hue: #d9d5e6; } /* Легенды */
.portal-box:nth-child(7) { --hue: #8a8a9a; } /* Вне игры */
.portal-box .ph {
display: block;
color: var(--jv-white);
font-family: var(--font-family-heading);
font-size: 1.02em; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
margin-bottom: .55rem;
}
/* пиксель-квадрат вместо эмодзи */
.portal-box .ph::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
background: var(--hue);
box-shadow: 0 0 8px var(--hue);
margin-right: .55rem;
vertical-align: .08em;
}
.portal-box ul { margin: 0; padding-left: .2em; list-style: none; }
.portal-box li { margin: .26em 0; font-size: .95em; }
.portal-box li a {
color: #c9c5d6;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.13);
}
.portal-box li a:hover { color: var(--jv-white); border-bottom-color: var(--hue); }
/* ---------- 8а. Миры — планеты как на главной сайта ---------- */
.world-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin: 1.1rem 0 1.4rem;
}
/* MediaWiki оборачивает строки в <p> — растворяем, чтобы grid видел спаны */
.world-grid > p { display: contents; margin: 0; }
.world-grid .world { display: block; }
.world-grid .world a {
display: flex; flex-direction: column; align-items: center; gap: .55rem;
padding: .85rem .3rem .7rem;
border: 1px solid transparent;
border-radius: .6rem;
font-family: var(--font-family-heading);
letter-spacing: .08em;
font-size: .88em;
color: #c9c5d6;
text-decoration: none;
transition: border-color .18s, background .18s;
}
.world-grid .world a::before {
content: "";
width: 26px; height: 26px;
background: var(--pc, var(--jv-violet));
box-shadow: 0 0 14px var(--pc, var(--jv-violet)), inset -6px -6px 0 rgba(0,0,0,.35);
}
.world-grid .world a:hover {
border-color: var(--jv-border);
background: rgba(255,255,255,.02);
color: var(--jv-white);
text-decoration: none;
}
/* ---------- 8б. Интерактивная карта миров («Карта миров») ---------- */
.jmap-wrap {
overflow-x: auto;
margin: 1.2rem 0;
border: 1px solid var(--jv-border);
border-radius: .7rem;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
radial-gradient(70% 90% at 50% 40%, #0b0b16 0%, #05050c 100%);
}
.jmap {
position: relative;
width: 940px;
height: 600px;
margin: 0 auto;
}
/* MediaWiki оборачивает строки в <p> — растворяем */
.jmap > p { display: contents; margin: 0; }
/* нить связи; поворот от левого конца (центр мира-источника) */
.jmap-edge {
position: absolute;
height: 0;
border-top: 1px solid rgba(157,110,224,.32);
transform-origin: 0 0;
pointer-events: none;
}
/* стрелка направления открытия — у конца нити, сразу за планетой */
.jmap-edge::after {
content: "";
position: absolute;
right: 26px; top: -4px;
border: 4px solid transparent;
border-left: 7px solid rgba(157,110,224,.6);
}
.jmap-node {
position: absolute;
transform: translate(-50%, -50%);
z-index: 1;
}
.jmap-node a {
display: flex; flex-direction: column; align-items: center; gap: .45rem;
padding: .5rem .6rem;
border: 1px solid transparent;
border-radius: .55rem;
font-family: var(--font-family-heading);
font-size: .85em;
letter-spacing: .08em;
color: #c9c5d6;
text-decoration: none;
transition: border-color .18s, background .18s;
}
.jmap-node a::before {
content: "";
width: 22px; height: 22px;
background: var(--pc, var(--jv-violet));
box-shadow: 0 0 14px var(--pc, var(--jv-violet)), inset -5px -5px 0 rgba(0,0,0,.35);
}
.jmap-node a:hover {
border-color: var(--jv-border);
background: rgba(255,255,255,.03);
color: var(--jv-white);
text-decoration: none;
}
/* корень графа — крупнее и подписан белым */
.jmap-node--start a { color: var(--jv-white); }
.jmap-node--start a::before { width: 28px; height: 28px; }
/* Крайний мир — пунктирное кольцо Скверны */
.jmap-node--extreme a::before {
outline: 1px dashed rgba(255,255,255,.4);
outline-offset: 3px;
}
.jmap-legend {
color: var(--jv-muted);
font-size: .88em;
margin: .5rem 0 1.2rem;
}
/* лор-сноска под картой («иллюстрация Терцера») */
.jmap-note {
font-family: 'Spectral', Georgia, serif;
font-style: italic;
color: #8f8b9c;
font-size: .92em;
margin: .4rem 0 1.1rem;
}
/* Изображения и галереи */
.mw-parser-output .thumbinner,
.mw-parser-output figure[typeof~="mw:File/Thumb"] {
background: var(--jv-surface);
border: 1px solid var(--jv-border);
border-radius: .45rem;
}
.mw-parser-output figcaption,
.mw-parser-output .thumbcaption { color: var(--jv-muted); font-size: .9em; }
/* ---------- 9. Мобильная адаптация ---------- */
.infobox code { white-space: normal; overflow-wrap: anywhere; }
/* Широкий контент не должен распирать grid-колонки Citizen */
.citizen-body-container, .citizen-body, .mw-body, #mw-content-text { min-width: 0; }
@media (max-width: 900px) {
.world-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
.infobox { float: none; width: 100%; margin: 0 0 1em; table-layout: fixed; }
.infobox th { width: 34%; }
.mw-parser-output .wikitable { display: block; overflow-x: auto; }
.mw-parser-output { max-width: 100%; overflow-x: hidden; }
.world-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- 10. Медиа-заглушки ({{Медиа}}) — «кадр Гляденя» ---------- */
.media-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .35rem;
min-height: 130px;
margin: 1.1rem 0;
padding: 1.2rem 1.4rem;
border: 1px solid var(--jv-border);
border-radius: .4rem;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
radial-gradient(60% 90% at 50% 50%, #0e0e1a 0%, #08080f 100%);
text-align: center;
}
.media-slot::before,
.media-slot::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--jv-violet-deep);
}
.media-slot::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.media-slot::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.media-slot-eye {
color: var(--jv-violet);
opacity: .6;
font-size: 1.3em;
line-height: 1;
}
.media-slot-cap {
font-family: var(--font-family-heading);
letter-spacing: .18em;
font-size: .78em;
color: var(--jv-muted);
text-transform: uppercase;
}
.media-slot-sub { font-size: .85em; color: #6d6a7a; line-height: 1.4; }