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

нема опису редагування
Немає опису редагування
Немає опису редагування
Рядок 4: Рядок 4:
/* ЗАГАЛЬНІ СТИЛІ ТА UI */
/* ЗАГАЛЬНІ СТИЛІ ТА UI */
/* ==================================================== */
/* ==================================================== */
@media screen and (min-width: 1000px) {
    /* Головна сторінка - без відступу зліва */
    .page-Головна_сторінка .banner-container,
    .page-Головна_сторінка .minerva-anon-talk-message,
    .page-Головна_сторінка .minerva-header,
    .page-Головна_сторінка .page-header-bar,
    .page-Головна_сторінка .overlay-header,
    .page-Головна_сторінка .content,
    .page-Головна_сторінка .overlay-content,
    .page-Головна_сторінка .content-unstyled,
    .page-Головна_сторінка .pre-content,
    .page-Головна_сторінка .post-content,
    .page-Головна_сторінка #mw-content-text > form {
        margin-left: 0 !important;
    }
}


@media (max-width: 720px) {
@media (max-width: 720px) {
Рядок 34: Рядок 17:


.page-Main_Page .mw-first-heading { display: none!important; }
.page-Main_Page .mw-first-heading { display: none!important; }
.page-Головна_сторінка .mw-first-heading { display: none!important; }


.overlay.search-overlay .search-content .caption { padding-left: 30px!important; }
.overlay.search-overlay .search-content .caption { padding-left: 30px!important; }
Рядок 42: Рядок 26:


.mw-ui-icon-mf-articlesSearch { visibility: hidden!important; display:none!important; background-image:none!important; }
.mw-ui-icon-mf-articlesSearch { visibility: hidden!important; display:none!important; background-image:none!important; }
.header-container.header-chrome {
    background-color: #1e1e2a !important; /* трохи світліший за #15151f */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 0 20px !important;
}


body {
body {
Рядок 68: Рядок 41:
.overlay.search-overlay .results { box-shadow: none!important; }
.overlay.search-overlay .results { box-shadow: none!important; }


.minerva-header .branding-box a {
.minerva-header .branding-box a { color: #b7b4bf!important; }
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}
 
.minerva-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    padding: 10px 0 !important;
    gap: 20px !important;
}
 
/* Branding box - логотип + назва зліва */
.minerva-header .branding-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}
 
.minerva-header .branding-box a::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    background-image: url('/images/MafiaClosedCircleLogo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}
 
.minerva-header .branding-box a span {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    white-space: nowrap !important;
}
 
.minerva-header .minerva-search-form {
    flex-grow: 1 !important;
    max-width: 400px !important;
    margin-left: auto !important;
}
 
.minerva-header .search-box {
    width: 100% !important;
}
 
.minerva-header .search-box .search {
    width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    background-color: #15151f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
 
.minerva-header .search-box .search:focus {
    border-color: #a19ce0 !important;
    outline: none !important;
}
 
/* Ховаємо кнопку пошуку (іконка вже є в полі) */
.minerva-header #searchIcon {
    display: none !important;
}
 
/* Ховаємо меню та user navigation */
.minerva-header .navigation-drawer {
    display: none !important;
}
 
.minerva-user-navigation {
    display: none !important;
}
 
/* Відступ для контенту щоб не перекривався header */
.mw-body {
    padding-top: 70px !important;
}
 
@media (max-width: 767px) {
    .minerva-header .branding-box a span {
        font-size: 14px !important;
    }
   
    .minerva-header .branding-box a::before {
        width: 28px !important;
        height: 28px !important;
    }
   
    .minerva-header .minerva-search-form {
        max-width: 200px !important;
    }
   
    .header-container.header-chrome {
        padding: 0 12px !important;
    }
   
    .mw-body {
        padding-top: 60px !important;
    }
}
 
/* Ще менші екрани - пошук під назвою */
@media (max-width: 480px) {
    .minerva-header {
        flex-wrap: wrap !important;
        padding: 8px 0 !important;
    }
   
    .minerva-header .minerva-search-form {
        order: 3 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
}
 
 


.minerva-header .branding-box { opacity: 1.0!important; }


.minerva-icon--menu-base20, .minerva-icon--menu {
.minerva-icon--menu-base20, .minerva-icon--menu {
Рядок 202: Рядок 52:
     background-color: #15151f!important;
     background-color: #15151f!important;
     color: #b7b4bf!important;
     color: #b7b4bf!important;
     padding-top: 0px!important;
     padding-top: 70px!important;
     padding-bottom: 140px!important;
     padding-bottom: 140px!important;
}
}
Рядок 208: Рядок 58:
@media (max-width: 767px) {
@media (max-width: 767px) {
     .overlay-enabled, .mw-body {
     .overlay-enabled, .mw-body {
         padding-top: 20px!important;
         padding-top: 60px!important;
         padding-bottom: 80px!important;
         padding-bottom: 80px!important;
     }
     }
Рядок 280: Рядок 130:


.page-Main_Page #page-secondary-actions a { display:none!important; }
.page-Main_Page #page-secondary-actions a { display:none!important; }
.page-Головна_сторінка #page-secondary-actions a { display:none!important; }


.mw-ui-icon-mf-expand { background-image:none!important; }
.mw-ui-icon-mf-expand { background-image:none!important; }
Рядок 311: Рядок 162:


.minerva-user-navigation > *:last-child { display: none!important; }
.minerva-user-navigation > *:last-child { display: none!important; }
/* ==================================================== */
/* HEADER - ФІКСОВАНИЙ НА ВСЮ ШИРИНУ */
/* ==================================================== */
.header-container.header-chrome {
    background-color: #1e1e2a !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 0 20px !important;
    margin-left: 0 !important;
}
.minerva-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    padding: 10px 0 !important;
    gap: 20px !important;
    margin-left: 0 !important;
}
/* Branding box - логотип + назва зліва */
.minerva-header .branding-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}
.minerva-header .branding-box a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}
/* Логотип */
.minerva-header .branding-box a::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    background-image: url('/images/MafiaClosedCircleLogo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}
/* Назва сайту */
.minerva-header .branding-box a span {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    white-space: nowrap !important;
}
/* Пошук - розтягується праворуч */
.minerva-header .minerva-search-form {
    flex-grow: 1 !important;
    max-width: 400px !important;
    margin-left: auto !important;
}
.minerva-header .search-box {
    width: 100% !important;
}
.minerva-header .search-box .search {
    width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    background-color: #15151f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.minerva-header .search-box .search::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.minerva-header .search-box .search:focus {
    border-color: #a19ce0 !important;
    outline: none !important;
}
/* Ховаємо кнопку пошуку */
.minerva-header #searchIcon {
    display: none !important;
}
/* Ховаємо меню та user navigation */
.minerva-header .navigation-drawer {
    display: none !important;
}
.minerva-user-navigation {
    display: none !important;
}


/* ==================================================== */
/* ==================================================== */
Рядок 767: Рядок 723:
   }
   }
}
}


/* Стилізація кнопки запису гри */
/* Стилізація кнопки запису гри */
Рядок 1059: Рядок 1012:
         display: none !important;
         display: none !important;
     }
     }
}
@media (max-width: 900px) {
}
}


Рядок 1100: Рядок 1049:
}
}


.header-container.header-chrome {
/* ==================================================== */
/* КОНТЕНТ - MARGIN-LEFT ДЛЯ СТОРІНОК З МЕНЮ */
/* ==================================================== */


@media screen and (min-width: 1000px) {
    /* Базовий margin-left для всіх сторінок КРІМ header */
    .banner-container,
    .minerva-anon-talk-message,
    .page-header-bar,
    .overlay-header,
    .content,
    .overlay-content,
    .content-unstyled,
    .pre-content,
    .post-content,
    #mw-content-text > form {
        margin-left: 300px !important;
    }
   
    /* Головна сторінка - БЕЗ margin-left, контент по центру */
    .page-Головна_сторінка .banner-container,
    .page-Головна_сторінка .minerva-anon-talk-message,
    .page-Головна_сторінка .page-header-bar,
    .page-Головна_сторінка .overlay-header,
    .page-Головна_сторінка .content,
    .page-Головна_сторінка .overlay-content,
    .page-Головна_сторінка .content-unstyled,
    .page-Головна_сторінка .pre-content,
    .page-Головна_сторінка .post-content,
    .page-Головна_сторінка #mw-content-text > form {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1200px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
}


@media screen and (min-width: 1000px)  
/* ==================================================== */
{
/* МОБІЛЬНА ВЕРСІЯ HEADER */
.banner-container, .minerva-anon-talk-message, .minerva-header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form {
/* ==================================================== */
margin-left: 300px!important;
 
@media (max-width: 767px) {
    .minerva-header .branding-box a span {
        font-size: 14px !important;
    }
   
    .minerva-header .branding-box a::before {
        width: 28px !important;
        height: 28px !important;
    }
   
    .minerva-header .minerva-search-form {
        max-width: 200px !important;
    }
   
    .header-container.header-chrome {
        padding: 0 12px !important;
    }
}
}
@media (max-width: 480px) {
    .minerva-header {
        flex-wrap: wrap !important;
        padding: 8px 0 !important;
    }
   
    .minerva-header .minerva-search-form {
        order: 3 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
}
}