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

Текущая версия от 11:48, 29 сентября 2026

/* Размещённый здесь CSS будет применяться ко всем темам оформления */

@view-transition {
	navigation: auto;
}
::view-transition {
	background-color: var(--color-surface-1);
}

/* Отключить отображение обсуждений */
#ca-talk { display:none!important; }

/*.citizen-animations-ready .citizen-page-container {
    background-image: url(/resources/assets/cover-low-3.png);
    background-position-y: -22vw;
}
.citizen-page-container {
    background-size: contain;
    background-repeat: no-repeat;
}*/

/* Цвет выделения текста */
::selection,
.ve-ce-attachedRootNode::selection, .ve-ce-attachedRootNode *::selection {
	background-color: var(--color-primary);
    color: white;
}
.CodeMirror-line::selection, 
.CodeMirror-line > span::selection, 
.CodeMirror-line > span > span::selection {
	background-color: var(--color-primary);
}
.skin-theme-clientpref-night::selection {
	background-color: var(--color-primary);
    color: white;
}

/* Цвет скроллбара для светлой и темной темы */
:root {
	scrollbar-color: rgb(125 112 90 / 50%) transparent;
}
:root.skin-theme-clientpref-night {
	scrollbar-color: rgb(132 120 100 / 50%) transparent;
}

/* Цвет маркеров в списках */
::marker {
    color: var(--background-color-icon);
}

/* Иконка внешних ссылок */
.mw-parser-output a.external::after {
    margin-left: 0.3em;
    opacity: 0.75;
}

/* Пространство между пунктами списка */
.mw-parser-output li:not(.page-Мир_Времелиста li) {
    margin-block-end: var(--space-xs);
}

.citizen-search__card {
    top: 6px;
    left: 57px;
}
@media screen and (max-width: 1119px) { 
	.citizen-search__card {
    left: 0;
	}
}
.citizen-search {
    --width-search-bar: 720px;
}

/* Размер текста */
:root {
	--font-size-x-small: 0.8125rem;
	--font-size-large: 1.125rem;
	--font-size-x-large: 1.25rem;
	--font-size-xx-large: 1.375rem;
	--font-size-xxx-large: 1.75rem;
}
@media screen and (max-width: 720px) { 
	:root {
		--font-size-xxx-large: 1.5rem;
	}
}
/* Сброс размера текста в редакторе */
.ve-ui-surface.oo-ui-widget,
.oo-ui-widget {
    font-size: unset;
}

:root {
	/* Цветовая схема сайта */
	--color-primary__h: 37;
	--color-primary__s: 50%;
	--color-primary__l: 46%;
	/* Некоторые ховеры */
	--background-color-quiet--hover: hsla(var(--color-primary__h),80%,25%,0.07);
	--background-color-quiet--active: hsla(var(--color-primary__h),80%,25%,0.1);
	/* Зеленые ссылки-кнопки */
	--color-primary: hsl(162.11deg 35% 40%);
    --color-primary--hover: hsl(162.11deg 40% 33%);
    --color-primary--active: hsl(162.11deg 35% 30%);
    /* Красные ссылки */
    --color-link-new: hsl(0deg 50% 50%);
    --color-link-new--hover: hsl(0deg 60% 38%);
    --color-link-new--active: hsl(0deg 65% 28%);
    /* Цвет основного текста, светлая тема */
    --color-base: hsl(var(--color-primary__h), 30%, 15%);
    --color-base--emphasized: hsl(var(--color-primary__h), 85%, 5%);
    /* Шрифт */
    --font-family-citizen-base: 'Golos-Text';
    --font-family-citizen-serif: 'Vollkorn-VF';
    --font-family-citizen-monospace: 'JetBrainsMono';
    --line-height: 1.55;
}

/* Расстояния между абзацами */
p {
    margin: var(--space-lg) 0;
}
h1, h2 {
    margin-top: var(--space-xxl);
}
    
/* Зеленые ссылки-текст */
a {
    --color-link: hsl(162.11deg 70% 28%);
    --color-link--hover: hsl(162.11deg 75% 18%);
    --color-link--active: hsl(162.11deg 80% 8%);
}

:root {
	/* Фоновые цвета */
	--color-surface-1: hsl(var(--color-primary__h),40%,97%);
    --color-surface-2: hsl(var(--color-primary__h),30%,91%);
    --color-surface-2--hover: hsl(var(--color-primary__h), 30%, 88%);
    --color-surface-2--active: hsl(var(--color-primary__h), 30%, 84%);
}

:root.skin-theme-clientpref-night {
	/* Зеленые ссылки-кнопки для темной темы */
	--color-primary: hsl(162.11deg 35% 35%);
    --color-primary--hover: hsl(162.11deg 35% 40%);
    --color-primary--active: hsl(162.11deg 35% 30%);
	/* Красные ссылки для темной темы */
    --color-link-new: hsl(0deg 80% 70%);
    --color-link-new--hover: hsl(0deg 85% 75%);
    --color-link-new--active: hsl(0deg 80% 65%);
    /* Цвет основного текста, темная тема */
    --color-base: hsl(var(--color-primary__h), 25%, 80%);
    --color-base--emphasized: hsl(var(--color-primary__h), 80%, 92%);
    /* Некоторые хаверы для темной темы */
    --color-surface-2--hover: hsl(var(--color-primary__h), 25%, 17%);
    --color-surface-2--active: hsl(var(--color-primary__h), 25%, 19%);
}
	/* Зеленые ссылки-текст для темной темы */
:root.skin-theme-clientpref-night a {
    --color-link: hsl(162.11deg 35% 60%);
    --color-link--hover: hsl(162.11deg 40% 70%);
    --color-link--active: hsl(162.11deg 35% 50%);
}

:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
	/* Фоновые цвета для черной темы */
	--background-color-overlay: hsla(var(--color-primary__h), 20%, 10%, 0.4);
	--background-color-overlay--lighter: hsla(var(--color-primary__h), 20%, 10%, 0.8);
    --color-surface-2: hsl(var(--color-primary__h), 25%, 8%);
    --color-surface-3: hsl(var(--color-primary__h), 25%, 12%);
    --color-surface-4: hsl(var(--color-primary__h), 15%, 14%);
    --color-surface-2--hover: hsl(var(--color-primary__h), 25%, 12%);
    --color-surface-2--active: hsl(var(--color-primary__h), 25%, 16%);
}

/*:root.skin-citizen-light {
    --color-surface-2--hover: hsl(var(--color-primary__h), 30%, 89%);
    --color-surface-2--active: hsl(var(--color-primary__h), 30%, 85%);
}*/

/* Ширина контента при стандартном и широком режимах */
:root.citizen-feature-custom-width-clientpref-standard {
    --width-layout: 780px;
}
:root.citizen-feature-custom-width-clientpref-wide {
    --width-layout: 1080px;
}
@media screen and (max-width: 720px) {
	#skin-client-prefs-citizen-feature-custom-width {
    display: none;
	}
}

/* Меню сайта */
.citizen-drawer__card {
    right: unset;
    min-width: 18rem;
}
.citizen-drawer__card .citizen-ui-icon {
    display: none;
}
.citizen-menu .mw-list-item a {
    font-weight: unset;
}

/* Отключение отображения элементов на главной странице */
.page-Мир_Времелиста .mw-side,
.page-Мир_Времелиста .firstHeading,
.page-Мир_Времелиста #siteSub,
.page-Мир_Времелиста .citizen-page-header--sticky,
.page-Мир_Времелиста .citizen-jumptotop {
	display: none!important;
}

/* Ограничение ширины главной страницы + уменьшение отступов */
.page-Мир_Времелиста .citizen-body-container {
	grid-template-areas:
		'content'
		'header'
		'footer';
	grid-template-columns: minmax(0, 1280px);
}
.citizen-body-container {
	margin: var(--space-md) 0;
	gap: var(--space-xs) var(--space-xl);
}
@media screen and (max-width: 720px) {
	.citizen-body-container {
		margin: var(--space-md) 0;
	}
}

/* Ограничение ширины на страницах с .css */
.page-MediaWiki_Common_css .citizen-body-container,
.page-MediaWiki_Citizen_css .citizen-body-container {
	grid-template-columns: minmax(0, 1280px);
}

/* Отключение подписей под заголовками */
#siteSub, #contentSub, #contentSub2 {
    display: none;
}

/* Иконки кнопок редактирования раздела */
.citizen-editsection-icon:not(.mw-editsection-visualeditor)::before {
    background-image: url(/load.php?modules=skins.citizen.icons&image=wikiText&format=original&lang=ru&skin=citizen&version=1pr6k);
    background-size: unset;
}
.citizen-editsection-icon {
    transition: none;
}
.citizen-editsection-icon::before {
    opacity: 50%;
}

/* Отключение надписи «Участник:» на странице об авторе */
.page-Участник_Sagrades .mw-page-title-namespace,
.page-Участник_Sagrades .mw-page-title-separator {
    display: none;
}

/* Настройки меню */
.citizen-drawer__logo img {
        height: 3rem;
    }
@media screen and (max-width: 1119px) {
	.citizen-drawer__menu {
    	max-width: 92vw !important;
	}    
}
.citizen-drawer__menu {
    grid-template-columns: repeat(auto-fit, minmax(14rem, auto));
    max-width: 45vw;
}

/* Загрузка шрифтов */
@font-face {
font-family: "JetBrainsMono";
src: url("/resources/assets/fonts/JetBrainsMono-Regular.ttf") format("truetype");
src: url("/resources/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Golos-Text";
src: url("/resources/assets/fonts/golos-text_regular.ttf") format("truetype");
src: url("/resources/assets/fonts/golos-text_regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Golos-Text";
src: url("/resources/assets/fonts/golos-text_medium.ttf") format("truetype");
src: url("/resources/assets/fonts/golos-text_medium.woff2") format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Golos-Text";
src: url("/resources/assets/fonts/golos-text_demibold.ttf") format("truetype");
src: url("/resources/assets/fonts/golos-text_demibold.woff2") format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Golos-Text";
src: url("/resources/assets/fonts/golos-text_bold.ttf") format("truetype");
src: url("/resources/assets/fonts/golos-text_bold.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Golos-Text";
src: url("/resources/assets/fonts/golos-text_black.ttf") format("truetype");
src: url("/resources/assets/fonts/golos-text_black.woff2") format("woff2");
font-style: normal;
font-weight: 900;
font-display: swap;
}
@font-face {
font-family: "Vollkorn-VF";
src: url("/resources/assets/fonts/vollkorn-vf.ttf") format("truetype");
font-display: swap;
}

.citizen-drawer__siteinfo .mw-logo-wordmark {
        font-size: 1.75rem;
        color: var(--color-base);
}

/* Отключение дефолтного подчеркивания ссылок */
a:hover, a:focus {
	text-decoration: none;
}

.citizen-toc a:hover, .citizen-toc a:focus {
	color: unset;
}

.mw-editsection a {
    color: var(--background-color-icon);
    font-weight: 500;
}

.mw-editsection a:hover {
    color: var(--background-color-icon--hover);
    background: none;
}

.mw-editsection a:active {
    color: var(--background-color-icon--active);
    background: none;
}

.citizen-body a:not(.mw-editsection a):not(figure > a):not(#pt-userpage-2 span > a):not(.wikiEditor-ui a):not(.wikiEditor-ui-toolbar a):not(.mw-editform a):not(.home-link__button a):not(.oo-ui-buttonElement-button):hover,
.page-info a:hover
{
	border-bottom: 1px solid;
}

/* Исправление цвета иконок поп-апов на темной теме */
.popups-icon {
	filter: var(--filter-invert);
	opacity: var(--opacity-icon-base);
}
.popups-extract,
.popups-container {
	border-radius: var(--border-radius--small) !important;
}

/*.citizen-body div > a:hover
{
	border-bottom: none;
}*/

@media screen and (max-width: 1119px){
	.citizen-menu-checkbox-button {
    	height: var(--toolbar-size);
	}
}

/* Содержание страницы */
.citizen-toc {
    line-height: var(--line-height-sm);
}
.citizen-toc__link {
    font-weight: var(--font-weight-normal);
}
@media screen and (min-width: 1120px) {
    .citizen-page-sidebar {
    	opacity: 50%;
    	transition: var(--transition-hover);
    }
}
@media screen and (min-width: 1120px) {
    :hover.citizen-page-sidebar {
    	opacity: 100%;
    }
}
.citizen-toc__listItem--active > .citizen-toc__link {
    color: var(--color-link);
}

/* КАТЕГОРИИ */

.mw-category-group li {
    display: flex;
    padding: var(--space-xs);
    padding-inline-start: 0;
    line-height: var(--line-height);
    padding-bottom: unset;
}
@media screen and (min-width: 680px) { 
	.mw-category-group li:not(#mw-subcategories li) {
    	flex-basis: calc(100% / 3);
	}
}
@media screen and (max-width: 680px) { 
	.mw-category-group li:not(#mw-subcategories li) {
    	flex-basis: 50%;
	}
}

.mw-category h3 {
    margin: 0;
    padding-inline: var(--space-unit);
    line-height: var(--line-height);
}

.mw-category a:not(#mw-subcategories a), 
.mw-category a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a) {
    width: 100%;
	}

.mw-category span,
.CategoryTreeItem span {
    opacity: 0.65;
}


.CategoryTreeSection {
	min-width: 24vw;
}
.CategoryTreeItem {
    padding-block-end: var(--space-xs);
    margin-inline-start: 18px;
}

@media screen and (max-width: 540px) { 
	#mw-subcategories a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a),
	.CategoryTreeItem a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a) {
		width: 12em;
	}
}
@media screen and (min-width: 540px) { 
	#mw-subcategories a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a),
	.CategoryTreeItem a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a) {
    	width: 19em;
	}
}

.mw-category a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a),
.CategoryTreeItem a:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a) {
    display: inline-flex;
    color: var(--color-base);
    background: var(--color-surface-2);
    padding: var(--space-sm);
    padding-inline: var(--space-unit);
    border-radius: var(--border-radius--medium);
}
.mw-category a:hover:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a),
.CategoryTreeItem a:hover:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a) {
    border: none !important;
    background-color: var(--color-surface-2--hover);
}
.mw-category a:active:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a),
.CategoryTreeItem a:active:not(.CategoryTreeToggle a):not(.CategoryTreeBullet a) {
    background: var(--color-surface-2--active);
}

.mw-content-ltr .CategoryTreeEmptyBullet,
.mw-content-ltr .CategoryTreeToggle[data-ct-state='collapsed'],
.mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet,
.mw-content-rtl .mw-content-ltr .CategoryTreeToggle[data-ct-state='collapsed'],
.CategoryTreeToggle[data-ct-state='expanded'] {
    margin-right: 4px;
    margin-bottom: 1px;
	scale: 1.2;
}

.client-js #mw-subcategories .mw-content-ltr ul {
    margin-left: 0;
}


.mw-category .mw-category-group ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    margin-block-end: var(--space-lg);
}
.mw-category.mw-category-columns {
	display: grid;
    max-width: 1080px;
}

#mw-indicator-mw-helplink {
    display: none;
} 


/* Стрелка для раскрытия категорий */

.CategoryTreeToggle {
    background-color: var(--background-color-icon);
}
.CategoryTreeToggle:hover {
    background-color: var(--background-color-icon--hover);
}
.CategoryTreeToggle:active {
    background-color: var(--background-color-icon--active);
}
.CategoryTreeEmptyBullet {
    color: var(--color-surface-4);
}
.CategoryTreeToggle:visited {
    background-color: unset;
}


/* ВСЕ КАТЕГОРИИ */

.mw-spcontent ul,
ol.special {
    display: grid;
    grid: auto-flow dense / repeat(auto-fit, minmax(33%, 1fr));
    margin-inline: 0;
}
@media screen and (max-width: 680px) { 
	.mw-spcontent ul,
	ol.special {
    	grid: auto-flow dense / repeat(auto-fit, minmax(50%, 1fr));
	}
}
.mw-spcontent li:not(li.gallerybox) {
    display: grid;
    padding-block: var(--space-xs);
    color: var(--color-base--subtle);
}
.mw-spcontent li > bdi a:not(.mw-watch-link),
.mw-spcontent li > a:not(.mw-watch-link) {
    display: flex;
    margin-inline-end: var(--space-xl);
    color: var(--color-base);
    background: var(--color-surface-2);
    padding: var(--space-sm);
    padding-inline: var(--space-unit);
    border-radius: var(--border-radius--medium);
    word-break: break-word;
}
.mw-spcontent li > bdi a:hover,
.mw-spcontent li > a:hover {
    border: none !important;
    background-color: var(--color-surface-2--hover);
}
.mw-spcontent li > bdi a:active,
.mw-spcontent li > a:active {
    background-color: var(--color-surface-2--active);
}
.mw-watch-link {
    display: contents;
}
.page-Служебная_Требуемые_страницы .special li > a:not(.new),
.page-Служебная_Требуемые_шаблоны .special li > a:not(.new) {
    display: contents;
	color: var(--color-link);
}
.page-Служебная_Требуемые_страницы .special li > a:not(.new):hover,
.page-Служебная_Требуемые_шаблоны .special li > a:not(.new):hover {
    color: var(--color-link--hover);
}

/* Эффекты для галереи */
li.gallerybox div.thumb img {
    transition: var(--transition-hover);
}
li.gallerybox div.thumb img:hover {
    scale: 1.1;
}
#file > a:hover {
    border: none !important;
}
.galleryfilename-truncate {
    color: var(--color-base);
}
a.galleryfilename.galleryfilename-truncate:hover {
    border: none !important;
    color: var(--color-base--emphasized);
}
ul.gallery.gallery.gallery {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
}

/* Футер */

.citizen-footer__container {
    max-width: 1280px;
}

#footer-sitetitle img.mw-logo-wordmark {
    filter: invert(0.5) sepia(0.7);
}
.skin-citizen-light #footer-sitetitle img.mw-logo-wordmark {
    filter: sepia(1);
    opacity: 40%;
}
.skin-citizen-dark #footer-sitetitle img.mw-logo-wordmark {
	filter: invert(1) hue-rotate(180deg) sepia(0.6);
    opacity: 75%;
}

#footer-icons a, #footer-tagline a {
	filter: invert(0.5);
    opacity: var(--opacity-icon-base);
    display: flex;
    align-items: center;
    background: none;
    border:none;
}
.skin-citizen-light #footer-icons a,
.skin-citizen-light #footer-tagline a{
	filter: invert(1);
}
.skin-citizen-dark #footer-icons a, 
.skin-citizen-dark #footer-tagline a {
	filter: invert(0);
}
#footer-icons a:hover,
#footer-tagline a:hover {
    opacity: var(--opacity-icon-base--hover);
}
#footer-icons img {
    width: auto;
    height: 32px;
}
#footer-tagline img {
    width: auto;
    height: 26px;
    margin-inline-end: var(--space-md);
}
#footer-icons ul, #footer-icons li, #footer-tagline li {
/*    gap: var(--space-md);*/
	gap: 0;
}

#footer-tagline {
    opacity: 0.8;
}
.citizen-footer a {
    font-weight: var(--font-weight-normal);
}
#footer-desc a {
    font-weight: unset;
    color: var(--color-base);
}
#footer-desc a:hover {
    border-bottom: 1px solid var(--color-base--subtle);
    color: var(--color-base--emphasized);
}