MediaWiki:Dark.css
Перейти до навігації
Перейти до пошуку
Увага: Після публікування слід очистити кеш браузера, щоб побачити зміни.
- Firefox / Safari: тримайте Shift, коли натискаєте Оновити, або натисніть Ctrl-F5 чи Ctrl-Shift-R (⌘-R на Apple Mac)
- Google Chrome: натисніть Ctrl-Shift-R (⌘-Shift-R на Apple Mac)
- Edge: тримайте Ctrl, коли натискаєте Оновити, або натисніть Ctrl-F5.
/* =========================
Повна темна тема для MediaWiki 1.44 (Vector)
========================= */
/* =========================
Фон сторінки та шапка
========================= */
html, body, .mw-body {
background-color: #121212;
color: #ffffff;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
min-height: 100%;
}
#mw-head {
background-color: #1a1a1a;
color: #ffffff;
}
#mw-head h1, #mw-head h2 {
color: #ffcc00;
}
/* =========================
Панелі навігації
========================= */
#p-personal, #p-navigation, #p-tb, #p-lang, #p-cactions {
background-color: #1a1a1a;
color: #ffffff;
}
#p-personal a, #p-navigation a, #p-tb a, #p-lang a, #p-cactions a {
color: #ffffff;
}
#p-personal a:hover, #p-navigation a:hover, #p-tb a:hover,
#p-lang a:hover, #p-cactions a:hover {
text-decoration: underline;
}
/* =========================
Приховати вкладку Інструменти для неавторизованих користувачів
========================= */
body:not(.logged-in) #p-tb {
display: none !important;
}
/* =========================
Приховати бічні блоки для незареєстрованих користувачів
========================= */
body:not(.logged-in) #p-navigation,
body:not(.logged-in) #p-specialpages {
display: none !important;
}
/* Приховати політику конфіденційності та відмову від відповідальності у футері */
#footer-places-privacy,
#footer-places-disclaimers {
display: none !important;
}
/* =========================
Вкладки сторінки
========================= */
#ca-nstab-main, #ca-nstab-talk, #ca-view, #ca-edit, #ca-viewsource, #ca-history {
background-color: #1c1c1c !important;
border: 1px solid #333;
border-radius: 4px 4px 0 0;
}
#ca-nstab-main a,
#ca-nstab-talk a,
#ca-view a,
#ca-edit a,
#ca-viewsource a,
#ca-history a {
color: #ffffff !important;
text-decoration: none;
padding: 4px 10px;
display: inline-block;
background-color: #1c1c1c !important;
box-shadow: none !important;
outline: none !important;
border-radius: 4px 4px 0 0;
}
/* Hover / Focus / Active для вкладок */
#ca-nstab-main a:hover,
#ca-nstab-talk a:hover,
#ca-view a:hover,
#ca-edit a:hover,
#ca-viewsource a:hover,
#ca-history a:hover,
#ca-nstab-main a:focus,
#ca-nstab-talk a:focus,
#ca-view a:focus,
#ca-edit a:focus,
#ca-viewsource a:focus,
#ca-history a:focus,
#ca-nstab-main a:active,
#ca-nstab-talk a:active,
#ca-view a:active,
#ca-edit a:active,
#ca-viewsource a:active,
#ca-history a:active {
background-color: #2a2a2a !important;
color: #ffcc00 !important;
box-shadow: none !important;
outline: none !important;
}
/* Активна вкладка */
#ca-nstab-main.mw-selected a,
#ca-nstab-talk.mw-selected a,
#ca-view.mw-selected a,
#ca-edit.mw-selected a,
#ca-viewsource.mw-selected a,
#ca-history.mw-selected a {
background-color: #2a2a2a !important;
color: #ffcc00 !important;
font-weight: bold;
box-shadow: none !important;
outline: none !important;
}
/* Vector специфіка */
.mw-vectorTabs a,
.mw-vectorTabs a:focus,
.mw-vectorTabs a:active {
background-color: #1c1c1c !important;
color: #ffffff !important;
box-shadow: none !important;
outline: none !important;
}
/* =========================
Основний контент
========================= */
.mw-parser-output {
background-color: #1c1c1c;
padding: 20px;
border-radius: 6px;
}
p, li, span, a {
color: #ffffff;
text-decoration: none;
}
p a:hover, li a:hover, span a:hover {
color: #ffcc00;
text-decoration: underline;
}
/* Таблиці */
.mw-parser-output table {
border: 1px solid #555;
background-color: #1c1c1c;
color: #ffffff;
}
.mw-parser-output th {
background-color: #2a2a2a;
color: #ffcc00;
padding: 6px;
}
.mw-parser-output td {
background-color: #1c1c1c;
padding: 6px;
}
/* =========================
Кнопки та форми
========================= */
button, input[type="submit"], input[type="button"] {
background-color: #333 !important;
border: 1px solid #555 !important;
color: #ffffff !important;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
box-shadow: none !important;
outline: none !important;
}
button:hover, button:focus, button:active,
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active {
background-color: #444 !important;
color: #ffcc00 !important;
box-shadow: none !important;
outline: none !important;
}
/* Завжди білі посилання, навіть після відвідування */
a:visited {
color: #ffffff !important;
}
/* =========================
ЗМІСТ (TOC) - ТЕМНА ТЕМА
========================= */
#toc {
background-color: #1c1c1c !important;
color: #ffffff !important;
border: 1px solid #444 !important;
padding: 10px !important;
border-radius: 6px !important;
}
#toc a {
color: #ffffff !important;
text-decoration: none !important;
}
#toc a:hover {
color: #ffcc00 !important;
text-decoration: underline !important;
}
/* =========================
ЗАГОЛОВКИ - ТЕМНА ТЕМА
========================= */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
color: #ffffff !important;
border-color: #444 !important;
}
/* =========================
Підвал сайту
========================= */
#footer {
background-color: #121212;
color: #888;
padding: 10px;
}
/* =========================
Приховати вкладки для неавторизованих користувачів
========================= */
body:not(.logged-in) #ca-nstab-talk, /* Обговорення вкладка поряд із Головна */
body:not(.logged-in) #ca-talk, /* Вкладка праворуч від Головна (Vector) */
body:not(.logged-in) #ca-viewsource,
body:not(.logged-in) #ca-history {
display: none !important;
}
/* =========================
УНІВЕРСАЛЬНИЙ РЕЖИМ ДОСТУПНОСТІ ДЛЯ ТЕМНОЇ ТЕМИ
========================= */
body.accessibility-mode {
/* Поліпшена читабельність */
line-height: 1.8 !important;
letter-spacing: 0.5px !important;
word-spacing: 1px !important;
}
/* ВИСОКОКОНТРАСТНИЙ РЕЖИМ ДЛЯ ТЕМНОЇ ТЕМИ */
body.accessibility-mode .mw-body,
body.accessibility-mode .mw-parser-output {
background-color: #000000 !important;
color: #ffffff !important;
border: 3px solid #ffff00 !important;
}
/* НАВІГАЦІЯ */
body.accessibility-mode #mw-head,
body.accessibility-mode #p-personal,
body.accessibility-mode #p-navigation,
body.accessibility-mode #p-tb,
body.accessibility-mode #p-lang {
background-color: #222222 !important;
border: 2px solid #ffff00 !important;
color: #ffffff !important;
}
/* ПОСИЛАННЯ */
body.accessibility-mode a {
color: #ff6b6b !important;
font-weight: bold !important;
text-decoration: underline !important;
padding: 2px 4px !important;
}
body.accessibility-mode a:hover,
body.accessibility-mode a:focus {
color: #000000 !important;
background-color: #ff6b6b !important;
text-decoration: none !important;
}
/* КНОПКИ */
body.accessibility-mode button,
body.accessibility-mode input[type="submit"],
body.accessibility-mode input[type="button"] {
font-size: 16px !important;
padding: 14px 20px !important;
border: 3px solid #ffffff !important;
border-radius: 8px !important;
min-height: 50px !important;
background-color: #4d4dff !important;
color: #ffffff !important;
font-weight: bold !important;
}
body.accessibility-mode button:hover,
body.accessibility-mode input[type="submit"]:hover,
body.accessibility-mode input[type="button"]:hover {
background-color: #ff6b6b !important;
border-color: #ff6b6b !important;
}
/* ПОЛЯ ВВОДУ */
body.accessibility-mode input[type="text"],
body.accessibility-mode input[type="search"],
body.accessibility-mode textarea,
body.accessibility-mode select {
font-size: 16px !important;
padding: 12px !important;
border: 3px solid #ffffff !important;
border-radius: 6px !important;
min-height: 44px !important;
background-color: #000000 !important;
color: #ffffff !important;
}
/* ФОКУСИ */
body.accessibility-mode *:focus {
outline: 4px solid #ffff00 !important;
outline-offset: 3px !important;
}
/* АКТИВНІ ВКЛАДКИ */
body.accessibility-mode .mw-vectorTabs .mw-selected a,
body.accessibility-mode #ca-nstab-main.mw-selected a,
body.accessibility-mode #ca-nstab-talk.mw-selected a {
background-color: #ffff00 !important;
color: #000000 !important;
font-weight: bold !important;
border: 3px solid #ff6b6b !important;
}
/* ТАБЛИЦІ */
body.accessibility-mode table {
border: 3px solid #ffffff !important;
}
body.accessibility-mode th {
background-color: #4d4dff !important;
color: #ffffff !important;
font-weight: bold !important;
padding: 12px !important;
}
body.accessibility-mode td {
background-color: #222222 !important;
color: #ffffff !important;
padding: 10px !important;
border: 2px solid #444444 !important;
}
/* ЗАГОЛОВКИ */
body.accessibility-mode h1,
body.accessibility-mode h2,
body.accessibility-mode h3 {
color: #ff6b6b !important;
border-left: 5px solid #4d4dff !important;
padding-left: 15px !important;
}
/* =========================
СТИЛІ ДЛЯ БАНЕРІВ
========================= */
.bottom-banner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
padding: 25px 0 !important;
margin-top: 40px !important;
font-family: Arial, sans-serif !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
position: relative !important;
z-index: 10000 !important;
}
.banner-content {
max-width: 1200px !important;
margin: 0 auto !important;
text-align: center !important;
}
.banner-title {
font-size: 24px !important;
margin-bottom: 10px !important;
font-weight: bold !important;
color: white !important;
}
.banner-buttons {
margin-top: 15px !important;
}
.banner-btn {
background: rgba(255,255,255,0.2) !important;
color: white !important;
border: 1px solid white !important;
padding: 10px 20px !important;
margin: 0 10px !important;
text-decoration: none !important;
border-radius: 25px !important;
display: inline-block !important;
transition: all 0.3s !important;
}
.banner-btn:hover {
background: white !important;
color: #667eea !important;
}
/* footer */
#footer .bottom-banner,
.mw-footer .bottom-banner,
.footer .bottom-banner {
display: block !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
/* accessibility mode */
body.accessibility-mode .bottom-banner {
border: 3px solid #ffff00 !important;
background: #000000 !important;
}
body.accessibility-mode .banner-btn {
border: 3px solid #ffffff !important;
background: #4d4dff !important;
color: #ffffff !important;
font-size: 16px !important;
padding: 14px 20px !important;
}
/* =========================
МОБІЛЬНА ВЕРСІЯ (MINERVA) - ТЕМНА ТЕМА
========================= */
/* Темна тема для мобільної шапки */
@media screen and (max-width: 768px) {
.header-container.header-chrome,
.minerva-header {
background-color: #1a1a1a !important;
border-bottom: 1px solid #333 !important;
}
.navigation-drawer {
background-color: #1a1a1a !important;
}
.branding-box a {
color: #ffffff !important;
}
/* Темна тема для мобільного підвалу */
.mw-footer.minerva-footer {
background-color: #1a1a1a !important;
border-top: 1px solid #333 !important;
color: #ffffff !important;
}
.last-modified-bar {
background-color: #2d2d2d !important;
border-color: #333 !important;
color: #ffffff !important;
}
.footer-content {
color: #cccccc !important;
}
/* Посилання в мобільному підвалі */
.mw-footer a {
color: #4da6ff !important;
}
.mw-footer a:hover {
color: #80bfff !important;
}
/* Кнопки меню в мобільній версії */
.cdx-button--weight-quiet {
background-color: transparent !important;
color: #ffffff !important;
}
/* Пошукова форма в мобільній версії */
.minerva-search-form input {
background-color: #2d2d2d !important;
color: #ffffff !important;
border-color: #444 !important;
}
/* Основний контент мобільної версії */
.mw-body {
background-color: #121212 !important;
color: #ffffff !important;
}
.mw-body-content {
background-color: #1c1c1c !important;
color: #ffffff !important;
}
/* Заголовки мобільної версії */
.firstHeading {
color: #ffcc00 !important;
}
/* Навігація мобільної версії */
.toggle-list__list {
background-color: #1a1a1a !important;
}
.toggle-list-item__anchor {
color: #ffffff !important;
}
.toggle-list-item__anchor:hover {
color: #ffcc00 !important;
background-color: #2a2a2a !important;
}
}
/* =========================
ЗАГАЛЬНІ СТИЛІ ДЛЯ MINERVA ТЕМИ
========================= */
/* Класи для мобільної теми Minerva */
.skin-minerva .header-container,
.skin-minerva .minerva-header {
background-color: #1a1a1a !important;
}
.skin-minerva .mw-footer.minerva-footer {
background-color: #1a1a1a !important;
color: #ffffff !important;
}
.skin-minerva .last-modified-bar {
background-color: #2d2d2d !important;
}
/* Іконки в мобільній версії */
.minerva-icon {
filter: brightness(0) invert(1) !important;
}
/* Кнопка меню в мобільній версії */
#mw-mf-main-menu-button {
background-color: transparent !important;
color: #ffffff !important;
}
/* Пошук в мобільній версії */
.minerva-search-form {
background-color: #1a1a1a !important;
}
.minerva-search-form input {
background-color: #2d2d2d !important;
color: #ffffff !important;
}
/* Мобільне меню */
#mw-mf-page-left {
background-color: #1a1a1a !important;
color: #ffffff !important;
}
.menu__item--home,
.menu__item--random,
.menu__item--login,
.menu__item--settings {
color: #ffffff !important;
}
.menu__item--home:hover,
.menu__item--random:hover,
.menu__item--login:hover,
.menu__item--settings:hover {
color: #ffcc00 !important;
background-color: #2a2a2a !important;
}
/* =========================
РЕЖИМ ДОСТУПНОСТІ ДЛЯ МОБІЛЬНОЇ ВЕРСІЇ
========================= */
@media screen and (max-width: 768px) {
body.accessibility-mode .header-container,
body.accessibility-mode .minerva-header {
background-color: #000000 !important;
border: 3px solid #ffff00 !important;
}
body.accessibility-mode .mw-footer.minerva-footer {
background-color: #000000 !important;
border: 3px solid #ffff00 !important;
}
body.accessibility-mode .toggle-list-item__anchor {
font-size: 18px !important;
padding: 15px !important;
border: 2px solid #ffffff !important;
margin: 5px 0 !important;
}
body.accessibility-mode .minerva-search-form input {
font-size: 18px !important;
padding: 15px !important;
border: 3px solid #ffffff !important;
min-height: 50px !important;
}
}
/* =========================
ПЕРЕМИКАННЯ МІЖ DESKTOP ТА MOBILE
========================= */
/* Посилання перемикання на десктопну версію */
#footer-places-desktop-toggle a {
color: #4da6ff !important;
background-color: #2d2d2d !important;
padding: 8px 12px !important;
border-radius: 4px !important;
display: inline-block !important;
margin: 5px 0 !important;
}
#footer-places-desktop-toggle a:hover {
color: #80bfff !important;
background-color: #3d3d3d !important;
}
/* =========================
ПРИХОВАННЯ ЕЛЕМЕНТІВ У МОБІЛЬНІЙ ВЕРСІЇ
========================= */
/* Приховати пункт "Налаштування" в мобільному меню */
@media screen and (max-width: 768px) {
#pt-preferences,
.menu__item--settings,
a[href*="Налаштування_мобільної_версії"],
a[href*="Special:MobileOptions"] {
display: none !important;
}
/* Приховати "Відмова від відповідальності" в підвалі */
#footer-places-disclaimers,
a[href*="Відмова_від_відповідальності"],
a[href*="Відмова"] {
display: none !important;
}
/* Приховати "Політика конфіденційності" якщо потрібно */
#footer-places-privacy,
a[href*="Політика_конфіденційності"] {
display: none !important;
}
}
/* Альтернативний спосіб через класи Minerva */
.skin-minerva #pt-preferences,
.skin-minerva #footer-places-disclaimers,
.skin-minerva #footer-places-privacy {
display: none !important;
}
/* Приховати конкретні елементи меню за текстом */
@media screen and (max-width: 768px) {
.toggle-list-item__label:contains("Налаштування"),
.toggle-list-item__label:contains("Відмова"),
.toggle-list-item__label:contains("Політика") {
display: none !important;
}
/* Більш конкретний селектор для пунктів меню */
.toggle-list-item:has(.menu__item--settings),
.toggle-list-item:has(a[href*="Відмова"]),
.toggle-list-item:has(a[href*="Політика"]) {
display: none !important;
}
}
/* Якщо не працюють вищезазначені селектори, спробуйте ці */
@media screen and (max-width: 768px) {
/* Приховати налаштування */
li:has(a[title="Налаштування"]),
li:has(a[href*="Special:MobileOptions"]),
.toggle-list-item:nth-child(3) { /* часто налаштування третій пункт */
display: none !important;
}
/* Приховати в підвалі */
#footer-places li:nth-child(3), /* Відмова */
#footer-places li:nth-child(2) { /* Політика */
display: none !important;
}
}
/* =========================
КОРЕКТУВАННЯ МОБІЛЬНОЇ ВЕРСІЇ
========================= */
/* Приховати відмову від відповідальності в меню */
@media screen and (max-width: 768px) {
/* Приховати відмову від відповідальності в меню */
a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0_%D0%B2%D1%96%D0%B4_%D0%B2%D1%96%D0%B4%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%96"],
a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"],
.menu__item--disclaimers,
.toggle-list-item:has(a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"]) {
display: none !important;
}
/* Приховати відмову в підвалі */
#footer-places-disclaimers,
#footer-places li:has(a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"]) {
display: none !important;
}
}
/* Стилі для кнопки Випадкова сторінка (якщо вона вже є) */
.menu__item--random {
display: block !important; /* Забезпечити відображення */
color: #ffffff !important;
}
.menu__item--random:hover {
color: #ffcc00 !important;
background-color: #2a2a2a !important;
}
/* =========================
ПРИХОВАННЯ ЕЛЕМЕНТІВ У БІЧНОМУ МЕНЮ MINERVA
========================= */
/* Приховати "Відмову від відповідальності" в бічному меню */
@media screen and (max-width: 768px) {
.toggle-list-item:has(a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0_%D0%B2%D1%96%D0%B4_%D0%B2%D1%96%D0%B4%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%96"]),
.toggle-list-item:has(a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"]),
.toggle-list-item:has(.menu__item--disclaimers) {
display: none !important;
}
/* Альтернативний спосіб - приховати за текстом */
.toggle-list-item__label:contains("Відмова"),
li:has(a:contains("Відмова")) {
display: none !important;
}
}
/* Специфічні селектори для елементів меню */
.skin-minerva .toggle-list-item a[href*="%D0%92%D1%96%D0%B4%D0%BC%D0%BE%D0%B2%D0%B0"],
.skin-minerva .menu__item--disclaimers {
display: none !important;
}
/* Приховати конкретний список з відмовою */
.hlist .toggle-list-item:last-child { /* часто відмова останній елемент */
display: none !important;
}
/* Приховати весь блок з відмовою та політикою */
.hlist .toggle-list-item:nth-child(2), /* Відмова */
.hlist .toggle-list-item:nth-child(1) { /* Політика (якщо потрібно) */
display: none !important;
}
/* =========================
ДОДАВАННЯ ЕЛЕМЕНТІВ У БІЧНЕ МЕНЮ
========================= */
/* Стилі для нових елементів меню */
.menu__item--mainpage,
.menu__item--randompage {
display: flex !important;
align-items: center !important;
padding: 12px 15px !important;
color: #ffffff !important;
text-decoration: none !important;
border-bottom: 1px solid #333 !important;
}
.menu__item--mainpage:hover,
.menu__item--randompage:hover {
background-color: #2a2a2a !important;
color: #ffcc00 !important;
}
.menu__item--mainpage .minerva-icon,
.menu__item--randompage .minerva-icon {
filter: brightness(0) invert(1) !important;
margin-right: 12px !important;
width: 20px !important;
height: 20px !important;
}