Перейти к содержанию

MediaWiki:Common.css: различия между версиями

Материал из Wiki Sestrica
Нет описания правки
Нет описания правки
 
(не показано 19 промежуточных версий этого же участника)
Строка 1: Строка 1:
/* Скрываем вкладку "Статья / Обсуждение" для всех*/
#left-navigation {
    display: none !important;
}


/* Скрываем ссылку "Обсуждение"*/
/* Скрываем правый блок ссылок "Править/История etc" неавторизованным */
body.anon#ca-talk,
body:not(.mw-editable)
body.anon #ca-talk {
#right-navigation {
     display: none !important;
     display: none !important;
}
}


/* Скрываем правый блок ссылок "Править/История etc"*/
/* =========================================================
body.anon#right-navigation,  
  Wiki Sestrica — оформление главной страницы
body.anon#right-navigation {
  Добавить в конец страницы MediaWiki:Common.css
    display: none !important;
  ========================================================= */
 
.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;
}