Mafia Closed Circle

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

Повідомлення Обговорення

MediaWiki:Common.css (переглянути вихідний код)

Версія за 00:40, 7 квітня 2026

11 615 байтів додано ,  7 квітень
нема опису редагування
Немає опису редагування
Немає опису редагування
Рядок 1988: Рядок 1988:
     display: block !important;  /* Override display:none від JS fadeOut */
     display: block !important;  /* Override display:none від JS fadeOut */
     opacity: 1 !important;
     opacity: 1 !important;
}
/* ── CSS — вставити в кінець Common.css ── */
/* ════════════════════════════════════════
  1. МОБІЛЬНА: L-BOX — ховаємо на мобільних
  (JS додає клас .l-box-open при потребі)
  ════════════════════════════════════════ */
@media (max-width: 999px) {
    .l-box {
        display: none !important;
    }
}
/* ════════════════════════════════════════
  2. NAV — фікс <p> всередині player-nav
  ════════════════════════════════════════ */
.player-nav > p,
.tournament-nav > p,
.series-nav > p,
.championship-nav > p {
    display: contents !important;
    margin: 0 !important; padding: 0 !important;
}
/* Переконуємось що nav — flex */
.player-nav,
.tournament-nav,
.series-nav,
.championship-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
}
.player-nav-name,
.tournament-nav-name,
.series-nav-name,
.championship-nav-name {
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* ════════════════════════════════════════
  3. МОБІЛЬНА: відступи від країв
  ════════════════════════════════════════ */
@media (max-width: 999px) {
    .content,
    .pre-content,
    .post-content,
    .mw-parser-output {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* Таблиці не виходять за межі */
    .mw-parser-output table,
    .mw-parser-output .wikitable {
        max-width: 100% !important;
    }
}
/* ════════════════════════════════════════
  5. ТАБЛИЦІ — повна ширина
  ════════════════════════════════════════ */
@media screen and (min-width: 1000px) {
    /* Сторінки з r-box: контент між l-box і r-box */
    .banner-container,
    .content,
    .pre-content,
    .post-content {
        margin-left: 250px !important;
        margin-right: 310px !important;
        max-width: none !important;
    }
    /* Таблиці займають всю ширину блоку */
    .mw-parser-output .wikitable {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ════════════════════════════════════════
  6. PAGE-ACTIONS-MENU — мінімалістичний
  ════════════════════════════════════════ */
.page-actions-menu {
    display: flex !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 0 0 0 0 !important;
    margin-top: -1px !important;
}
.page-actions-menu__list {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: none !important;
}
.page-actions-menu__list-item {
    border-bottom: none !important;
}
/* Кнопки в меню */
.page-actions-menu .cdx-button {
    color: rgba(255,255,255,0.35) !important;
    background: transparent !important;
    border: none !important;
    font-size: 12px !important;
    font-family: 'Manrope', sans-serif !important;
    padding: 4px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 4px !important;
    transition: color .15s, background .15s !important;
}
.page-actions-menu .cdx-button:hover {
    color: rgba(255,255,255,0.75) !important;
    background: rgba(255,255,255,0.06) !important;
}
/* Іконки — ховаємо, лишаємо тільки текст */
.page-actions-menu .minerva-icon { display: none !important; }
.page-actions-menu span:not(.minerva-icon) {
    display: inline !important;
    font-size: 12px !important;
}
/* Роздільники — прибираємо */
.page-actions-menu li::before,
.page-actions-menu li::after { display: none !important; }
/* "Більше" dropdown */
.toggle-list__list {
    background: rgba(20,18,28,0.97) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    padding: 4px !important;
}
.toggle-list-item__anchor {
    color: rgba(255,255,255,0.65) !important;
    font-size: 13px !important;
    font-family: 'Manrope', sans-serif !important;
    padding: 7px 12px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.toggle-list-item__anchor:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* ════════════════════════════════════════
  7. НАГОРОДИ — вирівнювання колонок
  ════════════════════════════════════════ */
/* Дата — компактна */
.wikitable td.col-date,
.wikitable th.col-date {
    width: 88px !important;
    min-width: 80px !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    text-align: center !important;
}
/* Турнір — ліве вирівнювання */
.wikitable td.td-main,
.wikitable th:nth-child(2) {
    text-align: left !important;
}
/* Приз — праве */
.wikitable td.col-prize,
.wikitable th.col-prize {
    text-align: right !important;
    width: 80px !important;
}
/* Всі th в таблиці нагород */
.wikitable thead th {
    text-align: center !important;
}
.wikitable thead th:nth-child(2) {
    text-align: left !important;
}
/* ════════════════════════════════════════
  8. R-BOX — рядки без переносу
  ════════════════════════════════════════ */
.r-box-info-table tr,
.r-box table tr {
    vertical-align: middle !important;
}
.r-box-info-table th {
    white-space: nowrap !important;
    font-size: 12px !important;
    width: 52% !important;
}
.r-box-info-table td {
    font-size: 12px !important;
    text-align: right !important;
    white-space: nowrap !important;
    width: 48% !important;
    word-break: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 130px !important;
}
/* Дата приєднання і % ігор — розбиваємо на два рядки красиво */
.r-box-info-table td small {
    display: block !important;
    font-size: 10.5px !important;
    opacity: .55 !important;
    font-weight: 400 !important;
}
/* ════════════════════════════════════════
  4. ФІЛЬТРИ ДЛЯ ЗАПИСІВ ІГОР — повний стиль
  ════════════════════════════════════════ */
.mcc-games-filters {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    padding: 14px 0 16px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-family: 'Manrope', sans-serif !important;
}
.mcc-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}
.mcc-filter-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: #b7b4bf !important;
    opacity: .45 !important;
    font-family: 'Manrope', sans-serif !important;
}
.mcc-filter-select {
    background: rgba(22,20,30,0.9) !important;
    border: 1px solid #232b3a !important;
    color: #e0dce8 !important;
    border-radius: 6px !important;
    padding: 7px 26px 7px 10px !important;
    font-size: 13px !important;
    font-family: 'Manrope', sans-serif !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color .15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
}
.mcc-filter-select:focus { border-color: #a19ce0 !important; }
.mcc-duration-group { min-width: 175px !important; }
.mcc-slider-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 1px !important;
}
.mcc-slider-val {
    font-size: 12px !important;
    color: #a19ce0 !important;
    min-width: 42px !important;
    font-weight: 600 !important;
    font-family: 'Manrope', sans-serif !important;
}
.mcc-duration-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 115px !important;
    height: 3px !important;
    background: #232b3a !important;
    border-radius: 2px !important;
    outline: none !important;
    cursor: pointer !important;
    background-image: linear-gradient(#a19ce0, #a19ce0) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}
.mcc-duration-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 13px !important; height: 13px !important;
    border-radius: 50% !important;
    background: #a19ce0 !important;
    cursor: pointer !important;
    box-shadow: 0 0 5px rgba(161,156,224,0.4) !important;
}
.mcc-duration-range::-moz-range-thumb {
    width: 13px !important; height: 13px !important;
    border: none !important; border-radius: 50% !important;
    background: #a19ce0 !important; cursor: pointer !important;
}
.mcc-filter-count {
    margin-left: auto !important;
    font-size: 12px !important;
    color: #b7b4bf !important;
    opacity: .4 !important;
    align-self: flex-end !important;
    padding-bottom: 2px !important;
    font-family: 'Manrope', sans-serif !important;
}
@media (max-width: 768px) {
    .mcc-games-filters { gap: 8px !important; }
    .mcc-duration-range { width: 90px !important; }
    .mcc-filter-select { font-size: 12px !important; padding: 6px 22px 6px 8px !important; }
    .mcc-filter-count { display: none !important; }
}
}
Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/6278