MediaWiki:Common.css: различия между версиями
Адаптивный дизайн RAMBA Wiki |
Компактное оформление мобильной главной |
||
| (не показаны 3 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* ========================================================= | |||
RAMBA Wiki | |||
Common styles for Vector 2022 + Minerva | |||
========================================================= */ | |||
/* ---------- Portal header ---------- */ | |||
.portal-header { | .portal-header { | ||
text-align: center; | text-align: center; | ||
| Строка 12: | Строка 19: | ||
color: #666; | color: #666; | ||
} | } | ||
/* ---------- Desktop portal cards ---------- */ | |||
.portal-grid { | .portal-grid { | ||
| Строка 26: | Строка 36: | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: 18px; | padding: 18px; | ||
box-sizing: border-box; | |||
box-shadow: 0 2px 6px rgba(0,0,0,.08); | box-shadow: 0 2px 6px rgba(0,0,0,.08); | ||
transition: transform .2s ease, box-shadow .2s ease; | transition: transform .2s ease, box-shadow .2s ease; | ||
} | } | ||
| Строка 39: | Строка 49: | ||
margin-top: 0; | margin-top: 0; | ||
} | } | ||
/* ---------- Tablet ---------- */ | |||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
| Строка 45: | Строка 58: | ||
} | } | ||
} | } | ||
/* ---------- Generic small screens ---------- */ | |||
@media (max-width: 720px) { | @media (max-width: 720px) { | ||
| Строка 61: | Строка 77: | ||
.portal-card { | .portal-card { | ||
padding: 16px; | padding: 16px; | ||
border-radius: 10px; | border-radius: 10px; | ||
| Строка 70: | Строка 85: | ||
} | } | ||
} | } | ||
/* ========================================================= | |||
Minerva / MobileFrontend | |||
Do not depend on viewport width here. | |||
If Minerva is active, cards are always vertical. | |||
========================================================= */ | |||
.skin-minerva .mw-parser-output .portal-grid { | |||
display: block; | |||
width: 100%; | |||
margin: 0 0 20px; | |||
} | |||
.skin-minerva .mw-parser-output .portal-card { | |||
display: block; | |||
width: 100%; | |||
min-width: 0; | |||
max-width: 100%; | |||
margin: 0 0 14px; | |||
padding: 16px; | |||
box-sizing: border-box; | |||
overflow: hidden; | |||
} | |||
.skin-minerva .mw-parser-output .portal-card h3 { | |||
margin-top: 0; | |||
word-break: normal; | |||
overflow-wrap: normal; | |||
} | |||
.skin-minerva .mw-parser-output .portal-card p, | |||
.skin-minerva .mw-parser-output .portal-card li, | |||
.skin-minerva .mw-parser-output .portal-card a { | |||
word-break: normal; | |||
overflow-wrap: break-word; | |||
} | |||
.skin-minerva .portal-header { | |||
margin: 8px 0 22px; | |||
} | |||
.skin-minerva .portal-header h1 { | |||
font-size: 1.7em; | |||
} | |||
/* ---------- Source code ---------- */ | |||
.mw-highlight, | .mw-highlight, | ||
| Строка 78: | Строка 142: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
/* ---------- Tables ---------- */ | |||
.mw-parser-output table { | .mw-parser-output table { | ||
| Строка 83: | Строка 150: | ||
} | } | ||
/* ========================================================= | |||
. | RAMBA Wiki — mobile polish | ||
========================================================= */ | |||
} | |||
.skin-minerva.page-Заглавная_страница .firstHeading { | |||
display: none; | |||
} | |||
.skin-minerva .portal-header { | |||
margin: 12px 0 24px; | |||
} | |||
.skin-minerva .portal-header h1 { | |||
font-size: 28px; | |||
line-height: 1.2; | |||
margin: 0 0 10px; | |||
} | |||
.skin-minerva .portal-header p { | |||
font-size: 16px; | |||
line-height: 1.45; | |||
margin: 0; | |||
color: #54595d; | |||
} | |||
.skin-minerva .portal-card { | |||
padding: 18px; | |||
margin-bottom: 14px; | |||
border-radius: 12px; | |||
} | |||
.skin-minerva .portal-card h3, | |||
.skin-minerva .portal-card h2 { | |||
font-size: 22px; | |||
line-height: 1.25; | |||
margin: 0 0 12px; | |||
} | |||
.skin-minerva .portal-card p { | |||
font-size: 16px; | |||
line-height: 1.4; | |||
margin: 8px 0 12px; | |||
} | |||
.skin-minerva .portal-card ul { | |||
margin-top: 8px; | |||
margin-bottom: 0; | |||
} | |||
.skin-minerva .portal-card li { | |||
font-size: 17px; | |||
line-height: 1.4; | |||
margin: 6px 0; | |||
} | |||
.skin-minerva .portal-card li a { | |||
font-size: inherit; | |||
} | } | ||