MediaWiki:Common.css: различия между версиями
Внешний вид
Нет описания правки |
Нет описания правки |
||
| (не показано 13 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* Скрываем вкладку "Обсуждение" */ | /* Скрываем вкладку "Статья / Обсуждение" для всех*/ | ||
# | #left-navigation { | ||
display: none !important; | display: none !important; | ||
} | } | ||
/* Скрываем правый блок ссылок "Править/История etc"*/ | /* Скрываем правый блок ссылок "Править/История etc" неавторизованным */ | ||
body:not(.mw-editable) | |||
#right-navigation { | #right-navigation { | ||
display: none !important; | display: none !important; | ||
} | |||
/* ========================================================= | |||
Wiki Sestrica — оформление главной страницы | |||
Добавить в конец страницы MediaWiki:Common.css | |||
========================================================= */ | |||
.ws-main { | |||
--ws-deep: #0e4a6e; /* глубокая вода — шапка */ | |||
--ws-aqua: #1b8fa6; /* акцент */ | |||
--ws-aqua-rgb: 27, 143, 166; | |||
--ws-ink: #16283a; /* основной текст */ | |||
--ws-muted: #5a6b7b; /* второстепенный текст */ | |||
--ws-surface: #ffffff; /* фон плитки */ | |||
--ws-line: #d9e3ea; /* рамки */ | |||
--ws-soon: #8a97a3; /* разделы в разработке */ | |||
--ws-soft: .10; /* прозрачность подложек */ | |||
color: var(--ws-ink); | |||
} | |||
/* Тёмная тема Vector 2022 (ручное включение) */ | |||
html.skin-theme-clientpref-night .ws-main { | |||
--ws-deep: #0b3a57; | |||
--ws-aqua: #5cc4d8; | |||
--ws-aqua-rgb: 92, 196, 216; | |||
--ws-ink: #e6edf3; | |||
--ws-muted: #a3b1bd; | |||
--ws-surface: #16202a; | |||
--ws-line: #2c3b48; | |||
--ws-soon: #7d8b97; | |||
--ws-soft: .16; | |||
} | |||
/* Тёмная тема Vector 2022 (как в системе) */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .ws-main { | |||
--ws-deep: #0b3a57; | |||
--ws-aqua: #5cc4d8; | |||
--ws-aqua-rgb: 92, 196, 216; | |||
--ws-ink: #e6edf3; | |||
--ws-muted: #a3b1bd; | |||
--ws-surface: #16202a; | |||
--ws-line: #2c3b48; | |||
--ws-soon: #7d8b97; | |||
--ws-soft: .16; | |||
} | |||
} | |||
/* ---------- Шапка с волной ---------- */ | |||
.ws-hero { | |||
position: relative; | |||
overflow: hidden; | |||
background-color: var(--ws-deep); | |||
color: #fff; | |||
border-radius: 20px; | |||
padding: 36px 40px 68px; | |||
margin: 4px 0 32px; | |||
} | |||
.ws-hero::after { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
height: 60px; | |||
pointer-events: none; | |||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C150 6 300 46 450 26 S750 6 900 26 S1050 46 1200 26 V60 H0Z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M0 40 C200 22 380 58 600 40 S1000 22 1200 40 V60 H0Z' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; | |||
} | |||
.ws-hero__title { | |||
font-size: 2em; | |||
font-weight: 700; | |||
line-height: 1.15; | |||
letter-spacing: -0.01em; | |||
margin: 0 0 10px; | |||
} | |||
.ws-hero__text { | |||
font-size: 1.05em; | |||
line-height: 1.55; | |||
max-width: 36em; | |||
color: rgba(255, 255, 255, .85); | |||
} | |||
/* ---------- Группы разделов ---------- */ | |||
.ws-group { | |||
margin: 0 0 30px; | |||
} | |||
.ws-group__title { | |||
font-size: 1.2em; | |||
font-weight: 700; | |||
line-height: 1.3; | |||
color: var(--ws-ink); | |||
margin: 0 0 2px; | |||
} | |||
.ws-group__text { | |||
font-size: .92em; | |||
color: var(--ws-muted); | |||
margin: 0 0 14px; | |||
} | |||
.ws-tiles { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |||
gap: 14px; | |||
} | |||
/* ---------- Плитка ---------- */ | |||
.ws-tile { | |||
position: relative; | |||
display: flex; | |||
flex-direction: column; | |||
background: var(--ws-surface); | |||
border: 1px solid var(--ws-line); | |||
border-radius: 12px; | |||
padding: 18px 18px 16px; | |||
transition: border-color .15s ease, box-shadow .15s ease; | |||
} | |||
.ws-tile:hover { | |||
border-color: var(--ws-aqua); | |||
box-shadow: 0 8px 20px -12px rgba(var(--ws-aqua-rgb), .7); | |||
} | |||
.ws-tile:focus-within { | |||
outline: 2px solid var(--ws-aqua); | |||
outline-offset: 2px; | |||
} | |||
.ws-tile__icon { | |||
width: 44px; | |||
height: 44px; | |||
border-radius: 10px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 24px; | |||
line-height: 1; | |||
background: rgba(var(--ws-aqua-rgb), var(--ws-soft)); | |||
margin-bottom: 14px; | |||
} | |||
.ws-tile__title { | |||
font-size: 1.08em; | |||
font-weight: 700; | |||
line-height: 1.3; | |||
margin-bottom: 4px; | |||
} | |||
.ws-main .ws-tile__title a, | |||
.ws-main .ws-tile__title a:visited, | |||
.ws-main .ws-tile__title a.new, | |||
.ws-main .ws-tile__title a.new:visited { | |||
color: var(--ws-ink); | |||
text-decoration: none; | |||
} | |||
.ws-main .ws-tile:hover .ws-tile__title a { | |||
color: var(--ws-aqua); | |||
} | |||
/* Кликабельна вся плитка, а не только заголовок */ | |||
.ws-tile__title a::after { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
border-radius: inherit; | |||
} | |||
.ws-tile__text { | |||
flex-grow: 1; | |||
font-size: .9em; | |||
line-height: 1.5; | |||
color: var(--ws-muted); | |||
} | |||
.ws-tile__badge { | |||
align-self: flex-start; | |||
margin-top: 14px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: .8em; | |||
font-weight: 600; | |||
color: var(--ws-aqua); | |||
background: rgba(var(--ws-aqua-rgb), var(--ws-soft)); | |||
} | |||
.ws-tile__text:empty, | |||
.ws-tile__badge:empty { | |||
display: none; | |||
} | |||
/* Раздел в разработке: {{Плитка раздела|статус=скоро}} */ | |||
.ws-tile--скоро { | |||
border-style: dashed; | |||
background: transparent; | |||
} | |||
.ws-tile--скоро .ws-tile__icon { | |||
filter: grayscale(1); | |||
opacity: .7; | |||
} | |||
.ws-tile--скоро .ws-tile__badge { | |||
color: var(--ws-soon); | |||
background: transparent; | |||
border: 1px solid var(--ws-line); | |||
} | |||
/* ---------- Адаптивность и доступность ---------- */ | |||
@media screen and (max-width: 720px) { | |||
.ws-hero { | |||
padding: 26px 22px 56px; | |||
border-radius: 16px; | |||
} | |||
.ws-hero__title { | |||
font-size: 1.6em; | |||
} | |||
} | |||
@media (prefers-reduced-motion: reduce) { | |||
.ws-tile { | |||
transition: none; | |||
} | |||
} | |||
/* Скрыть заголовок «Заглавная страница» (только на главной) */ | |||
body.page-Заглавная_страница.action-view .vector-page-titlebar, | |||
body.page-Заглавная_страница.action-view #firstHeading { | |||
display: none; | |||
} | } | ||
Текущая версия от 13:10, 17 сентября 2026
/* Скрываем вкладку "Статья / Обсуждение" для всех*/
#left-navigation {
display: none !important;
}
/* Скрываем правый блок ссылок "Править/История etc" неавторизованным */
body:not(.mw-editable)
#right-navigation {
display: none !important;
}
/* =========================================================
Wiki Sestrica — оформление главной страницы
Добавить в конец страницы MediaWiki:Common.css
========================================================= */
.ws-main {
--ws-deep: #0e4a6e; /* глубокая вода — шапка */
--ws-aqua: #1b8fa6; /* акцент */
--ws-aqua-rgb: 27, 143, 166;
--ws-ink: #16283a; /* основной текст */
--ws-muted: #5a6b7b; /* второстепенный текст */
--ws-surface: #ffffff; /* фон плитки */
--ws-line: #d9e3ea; /* рамки */
--ws-soon: #8a97a3; /* разделы в разработке */
--ws-soft: .10; /* прозрачность подложек */
color: var(--ws-ink);
}
/* Тёмная тема Vector 2022 (ручное включение) */
html.skin-theme-clientpref-night .ws-main {
--ws-deep: #0b3a57;
--ws-aqua: #5cc4d8;
--ws-aqua-rgb: 92, 196, 216;
--ws-ink: #e6edf3;
--ws-muted: #a3b1bd;
--ws-surface: #16202a;
--ws-line: #2c3b48;
--ws-soon: #7d8b97;
--ws-soft: .16;
}
/* Тёмная тема Vector 2022 (как в системе) */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .ws-main {
--ws-deep: #0b3a57;
--ws-aqua: #5cc4d8;
--ws-aqua-rgb: 92, 196, 216;
--ws-ink: #e6edf3;
--ws-muted: #a3b1bd;
--ws-surface: #16202a;
--ws-line: #2c3b48;
--ws-soon: #7d8b97;
--ws-soft: .16;
}
}
/* ---------- Шапка с волной ---------- */
.ws-hero {
position: relative;
overflow: hidden;
background-color: var(--ws-deep);
color: #fff;
border-radius: 20px;
padding: 36px 40px 68px;
margin: 4px 0 32px;
}
.ws-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60px;
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C150 6 300 46 450 26 S750 6 900 26 S1050 46 1200 26 V60 H0Z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M0 40 C200 22 380 58 600 40 S1000 22 1200 40 V60 H0Z' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.ws-hero__title {
font-size: 2em;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.ws-hero__text {
font-size: 1.05em;
line-height: 1.55;
max-width: 36em;
color: rgba(255, 255, 255, .85);
}
/* ---------- Группы разделов ---------- */
.ws-group {
margin: 0 0 30px;
}
.ws-group__title {
font-size: 1.2em;
font-weight: 700;
line-height: 1.3;
color: var(--ws-ink);
margin: 0 0 2px;
}
.ws-group__text {
font-size: .92em;
color: var(--ws-muted);
margin: 0 0 14px;
}
.ws-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
/* ---------- Плитка ---------- */
.ws-tile {
position: relative;
display: flex;
flex-direction: column;
background: var(--ws-surface);
border: 1px solid var(--ws-line);
border-radius: 12px;
padding: 18px 18px 16px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ws-tile:hover {
border-color: var(--ws-aqua);
box-shadow: 0 8px 20px -12px rgba(var(--ws-aqua-rgb), .7);
}
.ws-tile:focus-within {
outline: 2px solid var(--ws-aqua);
outline-offset: 2px;
}
.ws-tile__icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
background: rgba(var(--ws-aqua-rgb), var(--ws-soft));
margin-bottom: 14px;
}
.ws-tile__title {
font-size: 1.08em;
font-weight: 700;
line-height: 1.3;
margin-bottom: 4px;
}
.ws-main .ws-tile__title a,
.ws-main .ws-tile__title a:visited,
.ws-main .ws-tile__title a.new,
.ws-main .ws-tile__title a.new:visited {
color: var(--ws-ink);
text-decoration: none;
}
.ws-main .ws-tile:hover .ws-tile__title a {
color: var(--ws-aqua);
}
/* Кликабельна вся плитка, а не только заголовок */
.ws-tile__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.ws-tile__text {
flex-grow: 1;
font-size: .9em;
line-height: 1.5;
color: var(--ws-muted);
}
.ws-tile__badge {
align-self: flex-start;
margin-top: 14px;
padding: 2px 10px;
border-radius: 999px;
font-size: .8em;
font-weight: 600;
color: var(--ws-aqua);
background: rgba(var(--ws-aqua-rgb), var(--ws-soft));
}
.ws-tile__text:empty,
.ws-tile__badge:empty {
display: none;
}
/* Раздел в разработке: {{Плитка раздела|статус=скоро}} */
.ws-tile--скоро {
border-style: dashed;
background: transparent;
}
.ws-tile--скоро .ws-tile__icon {
filter: grayscale(1);
opacity: .7;
}
.ws-tile--скоро .ws-tile__badge {
color: var(--ws-soon);
background: transparent;
border: 1px solid var(--ws-line);
}
/* ---------- Адаптивность и доступность ---------- */
@media screen and (max-width: 720px) {
.ws-hero {
padding: 26px 22px 56px;
border-radius: 16px;
}
.ws-hero__title {
font-size: 1.6em;
}
}
@media (prefers-reduced-motion: reduce) {
.ws-tile {
transition: none;
}
}
/* Скрыть заголовок «Заглавная страница» (только на главной) */
body.page-Заглавная_страница.action-view .vector-page-titlebar,
body.page-Заглавная_страница.action-view #firstHeading {
display: none;
}