6369
редагувань
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування |
Admin (обговорення | внесок) Немає опису редагування |
||
| Рядок 1053: | Рядок 1053: | ||
.r-box { float: none !important; margin-left: 0 !important; } | .r-box { float: none !important; margin-left: 0 !important; } | ||
.content table { display: table !important; } | .content table { display: table !important; } | ||
} | |||
/* ============================================================ | |||
ДОДАТОК — вставити в кінець Common.css | |||
============================================================ */ | |||
/* ── ТАБЛИЦЯ — обводка навколо всієї таблиці ── */ | |||
.content .mw-parser-output .wikitable { | |||
box-shadow: 0 0 0 1px rgba(161,156,224,0.15), 0 2px 12px rgba(0,0,0,0.3) !important; | |||
border-radius: 8px !important; | |||
overflow: hidden !important; | |||
} | |||
/* Перший th — заокруглення лівого верхнього кута */ | |||
.content .mw-parser-output .wikitable > * > tr:first-child > th:first-child { | |||
border-radius: 8px 0 0 0 !important; | |||
} | |||
/* Останній th — заокруглення правого верхнього кута */ | |||
.content .mw-parser-output .wikitable > * > tr:first-child > th:last-child { | |||
border-radius: 0 8px 0 0 !important; | |||
} | |||
/* ── РОЛІ В ТАБЛИЦІ ІГОР — замінюємо inline white color на пілюлі ── */ | |||
/* FetchData генерує: <span style="color:#fff;">Мир</span> */ | |||
/* Ми перебиваємо їх і додаємо pill-стиль */ | |||
.content .mw-parser-output .wikitable td span[style*="color:#fff"], | |||
.content .mw-parser-output .wikitable td span[style*="color: #fff"], | |||
.content .mw-parser-output .wikitable td span[style*="color:white"] { | |||
display: inline-block !important; | |||
padding: 2px 10px !important; | |||
border-radius: 4px !important; | |||
font-size: 12.5px !important; | |||
font-weight: 600 !important; | |||
font-family: 'Manrope', sans-serif !important; | |||
} | |||
/* Мирний / Шер — зелений */ | |||
.content .mw-parser-output .wikitable td span[style*="color:#fff"]:not(:empty) { | |||
background: rgba(76,175,125,0.12) !important; | |||
color: #7dd4a6 !important; | |||
border: 1px solid rgba(76,175,125,0.20) !important; | |||
} | |||
/* ── СТАТИСТИКА НА ФОТО В R-BOX — overlay ── */ | |||
/* Додається JS, але стилі тут */ | |||
.rp-stats-overlay { | |||
position: absolute; | |||
bottom: 10px; | |||
left: 0; right: 0; | |||
display: grid; | |||
grid-template-columns: 1fr 1fr 1fr; | |||
gap: 5px; | |||
padding: 0 10px; | |||
z-index: 2; | |||
} | |||
.rp-stat-box { | |||
background: rgba(9,9,13,0.80); | |||
backdrop-filter: blur(8px); | |||
border: 1px solid rgba(255,255,255,0.08); | |||
border-radius: 6px; | |||
padding: 6px 4px; | |||
text-align: center; | |||
} | |||
.rp-stat-box .rp-sv { | |||
display: block; | |||
font-size: 14px; | |||
font-weight: 700; | |||
color: #e4e1d8; | |||
font-family: 'Manrope', sans-serif; | |||
} | |||
.rp-stat-box .rp-sl { | |||
font-size: 9px; | |||
font-weight: 700; | |||
letter-spacing: .07em; | |||
text-transform: uppercase; | |||
color: #b7b4bf; | |||
opacity: .55; | |||
} | |||
/* Фото позиція — треба relative для overlay */ | |||
.r-box figure { position: relative !important; } | |||
/* ── ФІЛЬТРИ НАД ТАБЛИЦЕЮ ІГОР — JS додає, CSS стилізує ── */ | |||
.mcc-games-filters { | |||
display: flex; | |||
gap: 10px; | |||
flex-wrap: wrap; | |||
align-items: flex-end; | |||
padding: 16px 0 14px; | |||
margin-bottom: 4px; | |||
border-bottom: 1px solid rgba(255,255,255,0.06); | |||
font-family: 'Manrope', sans-serif; | |||
} | |||
.mcc-filter-group { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 4px; | |||
} | |||
.mcc-filter-label { | |||
font-size: 10px; | |||
font-weight: 700; | |||
letter-spacing: .10em; | |||
text-transform: uppercase; | |||
color: #b7b4bf; | |||
opacity: .45; | |||
} | |||
.mcc-filter-select { | |||
background: rgba(24,21,30,0.8); | |||
border: 1px solid #232b3a; | |||
color: #ebebeb; | |||
border-radius: 6px; | |||
padding: 7px 26px 7px 10px; | |||
font-size: 13px; | |||
font-family: 'Manrope', sans-serif; | |||
cursor: pointer; | |||
outline: none; | |||
transition: border-color .15s; | |||
appearance: none; | |||
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='%23777' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |||
background-repeat: no-repeat; | |||
background-position: right 7px center; | |||
} | |||
.mcc-filter-select:focus { border-color: #a19ce0; } | |||
.mcc-duration-group { min-width: 180px; } | |||
.mcc-slider-wrap { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
margin-top: 1px; | |||
} | |||
.mcc-slider-val { | |||
font-size: 12px; | |||
color: #a19ce0; | |||
min-width: 40px; | |||
font-weight: 600; | |||
font-family: 'Manrope', sans-serif; | |||
} | |||
.mcc-duration-range { | |||
-webkit-appearance: none; | |||
appearance: none; | |||
width: 120px; | |||
height: 3px; | |||
background: #232b3a; | |||
border-radius: 2px; | |||
outline: none; | |||
cursor: pointer; | |||
background-image: linear-gradient(#a19ce0, #a19ce0); | |||
background-size: 100% 100%; | |||
background-repeat: no-repeat; | |||
} | |||
.mcc-duration-range::-webkit-slider-thumb { | |||
-webkit-appearance: none; | |||
width: 13px; height: 13px; | |||
border-radius: 50%; | |||
background: #a19ce0; | |||
cursor: pointer; | |||
box-shadow: 0 0 6px rgba(161,156,224,0.4); | |||
} | |||
.mcc-duration-range::-moz-range-thumb { | |||
width: 13px; height: 13px; | |||
border: none; border-radius: 50%; | |||
background: #a19ce0; cursor: pointer; | |||
} | |||
.mcc-filter-count { | |||
margin-left: auto; | |||
font-size: 12px; | |||
color: #b7b4bf; | |||
opacity: .45; | |||
align-self: flex-end; | |||
padding-bottom: 2px; | |||
font-family: 'Manrope', sans-serif; | |||
} | |||
@media (max-width: 768px) { | |||
.mcc-games-filters { gap: 8px; } | |||
.mcc-duration-range { width: 90px; } | |||
.mcc-filter-select { font-size: 12px; } | |||
} | } | ||