MediaWiki:Dark.css: відмінності між версіями

/* =========================
   Повна темна тема для 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;
}

/* =========================
   Підвал сайту
   ========================= */
#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;
}

/* =========================
   Dark Theme для Vector-2022 (мобильные устройства)
   ========================= */
@media (max-width: 768px) {

    /* =========================
       Основная страница
       ========================= */
    html, body, .mw-body {
        padding: 0 12px; /* боковые отступы */
        margin: 0;
        min-height: 100%;
        background-color: #121212;
        color: #ffffff;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    /* =========================
       Хедер
       ========================= */
    .vector-header, #mw-head {
        padding: 10px 12px; /* верх и низ */
        background-color: #1a1a1a;
        color: #ffffff;
    }

    .vector-header a {
        color: #ffffff;
        text-decoration: none;
    }

    .vector-header a:hover {
        color: #ffcc00;
    }

    /* =========================
       Гамбургер меню
       ========================= */
    .vector-menu, .vector-menu-content {
        background-color: #1a1a1a;
        color: #ffffff;
        padding: 10px;
    }

    .vector-menu a {
        color: #ffffff;
        display: block;
        padding: 8px 0;
    }

    .vector-menu a:hover {
        color: #ffcc00;
        text-decoration: underline;
    }

    /* =========================
       Вкладки сторінки
       ========================= */
    .vector-page-tabs__tab, .vector-page-tabs__tab a {
        background-color: #1c1c1c !important;
        color: #ffffff !important;
        border-radius: 6px 6px 0 0;
        padding: 8px 12px;
        display: block;
        margin-bottom: 2px;
        text-align: center;
    }

    .vector-page-tabs__tab--selected, 
    .vector-page-tabs__tab--selected a {
        background-color: #2a2a2a !important;
        color: #ffcc00 !important;
        font-weight: bold;
    }

    .vector-page-tabs__tab a:hover,
    .vector-page-tabs__tab a:focus {
        background-color: #2a2a2a !important;
        color: #ffcc00 !important;
    }

    /* =========================
       Основний контент
       ========================= */
    .mw-parser-output {
        padding: 15px 12px;
        border-radius: 8px;
        background-color: #1c1c1c;
        margin-bottom: 20px;
    }

    p, li, span, a {
        color: #ffffff;
    }

    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;
        width: 100%;
        display: block;
        overflow-x: auto;
        margin-bottom: 15px;
    }

    .mw-parser-output th, .mw-parser-output td {
        padding: 8px;
        color: #ffffff;
        background-color: #1c1c1c;
        border: 1px solid #444;
    }

    .mw-parser-output th {
        background-color: #2a2a2a;
        color: #ffcc00;
        font-weight: bold;
    }

    /* =========================
       Кнопки та форми
       ========================= */
    button, input[type="submit"], input[type="button"] {
        width: 100%;
        margin-bottom: 10px;
        font-size: 16px;
        padding: 12px;
        border-radius: 6px;
        background-color: #333 !important;
        border: 1px solid #555 !important;
        color: #ffffff !important;
        cursor: pointer;
    }

    button:hover, input[type="submit"]:hover, input[type="button"]:hover {
        background-color: #444 !important;
        color: #ffcc00 !important;
    }

    /* =========================
       Футер
       ========================= */
    #footer {
        padding: 15px 12px;
        background-color: #121212;
        color: #888;
        margin-top: 20px;
    }

    /* =========================
       Банери
       ========================= */
    .bottom-banner {
        padding: 20px 12px !important;
        margin: 20px 0 !important;
        font-size: 16px !important;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .banner-content {
        text-align: center !important;
    }

    .banner-btn {
        width: 100%;
        margin: 5px 0;
        padding: 12px;
        border-radius: 25px;
        display: inline-block;
        text-decoration: none !important;
        background: rgba(255,255,255,0.2);
        color: white !important;
        border: 1px solid white;
        transition: all 0.3s;
        box-sizing: border-box;
    }

    .banner-btn:hover {
        background: white !important;
        color: #667eea !important;
    }

    /* =========================
       Accessibility Mode
       ========================= */
    body.accessibility-mode .mw-parser-output {
        border: 3px solid #ffff00 !important;
    }

    body.accessibility-mode table {
        border: 3px solid #ffffff !important;
    }

    body.accessibility-mode th {
        background-color: #4d4dff !important;
        color: #ffffff !important;
        font-weight: bold;
        padding: 12px !important;
    }

    body.accessibility-mode td {
        background-color: #222222 !important;
        color: #ffffff !important;
        padding: 10px !important;
        border: 2px solid #444444 !important;
    }
}