MediaWiki:Timeless.css

Материал из Respiral Wiki

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
/* === Страница === */
#searchButton,
.tools-inline li:not(.selected) a,
.tools-inline li.selected a {
	filter: var(--invert-100);
}

.tools-inline ul li:hover {
	border-bottom-width: 2px;
}

.tools-inline ul li.selected {
	background: transparent;
	border-bottom-width: 2px;
	border-color: var(--color-contrast);
}

.tools-inline ul li.selected span {
	filter: var(--invert-100);
	color: var(--ooui-text-color);
	font-weight: bold;
}

.tools-inline span {
	filter: var(--invert-100);
	margin-left: 2px;
	font-family: var(--font-family-heading);
}

.tools-inline .selected span {
	filter: var(--invert-0);
}

.tools-inline li a:not(.new) {
	color: var(--text-color-link);
}

.mediawiki {
	background: var(--theme-bg-color-base);
	color: var(--theme-text-color);
}

#mw-page-base {
	background: var(--theme-bg-color-base);
	color: var(--theme-text-color);
}

#mw-header-nav-hack {
	background: var(--theme-bg-color-base);
	border-color: var(--theme-bg-color-200);
}

#mw-panel {
	background: var(--theme-bg-color-base);
	color: var(--theme-text-color);
}

#mw-content {
	padding: 0;
	padding-top: 2em;
	background: transparent;
	border: unset;
}

#mw-content-container {
	background: transparent;
	border: unset;
}

#mw-wrapper {
    position: relative;
    overflow: hidden;
}

#mw-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 200%;
    height: 100%;
    background-image: url("/replica-assets/eb3452259ae54cd6.png");
    z-index: -2;
    animation: starsMove 400s linear infinite;
    will-change: transform;
}

#mw-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 200%;
    height: 100%;
    background-image: url("/replica-assets/8fb410907599abcc.png");
    z-index: -1;
    animation: starsMove2 400s linear infinite;
    will-change: transform;
}

body.wgl-space-animation-off #mw-wrapper::after,
body.wgl-space-animation-off #mw-wrapper::before,
.wgl-theme-light #mw-wrapper::after,
.wgl-theme-light #mw-wrapper::before {
    content: unset;
}

@keyframes starsMove {
    to {
        transform: translate3d(-50%,0,0)
    }
}

@keyframes starsMove2 {
    to {
        transform: translate3d(-100%,0,0)
    }
}

@keyframes clownMove {
    from {
        transform: rotate(0deg);
        left: 120%;
        top: 10%;
    }
    to {
        transform: rotate(3000deg);
        left: -500%;
        top: 5%;
    }
}

#mw-header-container {
	background: var(--theme-bg-color-base);
	color: var(--theme-text-color);
}

#mw-changeslist-links {
	background: var(--theme-bg-color-100);
	color: var(--theme-text-color);
}

#simpleSearch {
	background: var(--ooui-bg-color);
	border-color: var(--ooui-border-color-light);
	color: var(--ooui-text-color);
	border-radius: var(--border-radius-low);
}

#simpleSearch::hover {
	border-color: var(--color-contrast);
}

#searchInput {
	color: var(--ooui-text-color-light);
}

#pt-createaccount {
	display: none !important;
}

/* Затемнение на телефонах */
#menus-cover {
	background: black;
	opacity: var(--alpha-s);
	z-index: var(--index-static);
}

@media screen and (max-width: 850px) {
	#mw-content-block {
		background: transparent;
	}

	#mw-wrapper {
		overflow: unset;
	}

	#mw-wrapper::after,
	#mw-wrapper::before {
		content: unset;
	}
}

/* === Категория внизу === */
#catlinks-sidebar {
	display: none;
}

#catlinks {
	display: block;
	padding: 0.5em;
	font-family: var(--font-family-oswald);
	margin-top: 6px;
	border-radius: var(--border-radius-low);
	border: none;
	border-top: 1px solid var(--color-lighter-alpha-x);
	box-shadow: var(--box-shadow-outline);
	background: var(--theme-bg-color-100);
}

/* === Заголовок страницы === */
.mw-body h1.firstHeading {
	border-width: 3px;
}

/* === Содержание страницы === */
.mw-body {
	background: var(--theme-bg-color-100);
	color: var(--theme-text-color);
	padding: 12px 14px;
	border-radius: var(--border-radius-low);
	box-shadow: var(--box-shadow-outline);
	border: none;
	border-top: 1px solid var(--color-lighter-alpha-x);
}

@media screen and (max-width: 850px) {
	.mw-body,
	#mw-content {
		padding: 0.45em;
	}
}

/* === Заглавный поисковик (Suggest-box) === */
/* Выдвижной блок */
.suggestions {
	box-shadow: var(--box-shadow-high);
	border-radius: 0 0 0.3em 0.3em;
	background: var(--theme-bg-color-100);
	border: 1px solid var(--ooui-border-color);
	border-top: 2px solid var(--color-contrast);
	padding-top: 4px;
}

/* Блок результатов и специального поиска */
.suggestions .suggestions-results,
.suggestions .suggestions-special {
	border-radius: 0.4em;
	margin: 0.5em;
	background: var(--ooui-bg-color);
	border: 1px outset rgb(0 0 0 / 20%);
}

/* Отдельный результат страницы */
.suggestions .suggestions-result {
	color: var(--ooui-text-color-light);
	margin: 6px;
}

/* Если нет результатов */
.suggestions .suggestions-results:empty {
	display: none;
}

/* Этикетки специального поиска */
.suggestions-special .special-label {
	color: var(--ooui-text-color);
}

.suggestions-special .special-query {
	color: var(--ooui-text-color-light);
}

/* Подсветка результата при наведении */
.suggestions .suggestions-result-current {
	background: var(--color-contrast-dark);
	outline: 1px solid var(--color-contrast);
	border-radius: var(--border-radius-low);
	border-color: var(--color-contrast-dark);
}

/* Общие отступы для результатов */
.suggestions .suggestions-result,
.suggestions .suggestions-special {
	padding: 0.5em 0.5em 0.35em;
}

/* === Боковая панель === */
/* Основной блок сайдбара */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
body.skin--responsive .portlet,
body.skin--responsive .pBody {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Навигационный блок на широких экранах */
@media (min-width: 1100px) {
	#mw-related-navigation {
		margin-top: 0;
	}

	.sidebar-inner .mw-portlet {
		margin: 0.5em 8px 2px 6px !important;
		border: 2px solid var(--ooui-bg-color-light);
		border-top: 2px solid var(--ooui-border-color);
		border-radius: var(--border-radius-low);
		padding: 0.2em;
	}
}

/* Дополнительные отступы портлетов на экранах ≥ 1340px */
@media screen and (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk .mw-portlet > div,
	#mw-site-navigation .sidebar-chunk .mw-portlet-body,
	#mw-related-navigation .sidebar-chunk .mw-portlet > div, 
	#mw-related-navigation .sidebar-chunk .mw-portlet-body{
		margin-bottom: 1em;
	}
	
	#mw-related-navigation .sidebar-chunk {
		margin: 2em 0;
	}
}

/* Заголовки портлетов на ≥ 1100px */
@media (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk h3,
	#mw-related-navigation .sidebar-chunk h3 {
		background: var(--ooui-bg-color-light);
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: var(--font-size-ml);
        border-radius: var(--border-radius-low);
        font-weight: bold;
        padding: 0.5em;
        border-bottom: 2px solid var(--color-darkened-border);
        flex-direction: row;
        margin: 0;
	}
}

@media (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk .mw-portlet-body,
	#mw-related-navigation .sidebar-chunk .mw-portlet-body {
		margin: 0 !important;
		margin-top: 0.25em !important;
		padding: 0.25em;
		background-color: var(--theme-bg-color-100);
		border-radius: var(--border-radius-low);
	}
}

/* Сайдбар для телефонов (≤ 1099px) */
@media screen and (max-width: 1099px) {
	#mw-site-navigation .sidebar-inner,
	#mw-related-navigation .sidebar-inner {
		padding: 1em 2em;
		background: var(--ooui-bg-color);
		border-color: var(--ooui-border-color);
	}

	#mw-related-navigation .sidebar-inner::before,
	#mw-related-navigation .sidebar-inner::after {
		display: none;
	}
}

/* === Верхняя панель === */
/* Контейнер и сетка заголовка */
#mw-header-container {
	/* Пусто */
}

#mw-header {
	display: grid;
	align-items: center;
	grid-template-columns: auto 1fr auto;
	gap: 6px;
	grid-template-areas:
		"a c b";
}

/* Логотип */
#p-logo-text {
	grid-area: a;
	padding: 0;
	position: unset;
}

#p-logo-text a.long {
	color: var(--ooui-text-color);
	font-size: var(--font-size-xxl);
	font-weight: bold;
	font-style: italic;
	font-family: unset;
}

/* Пользовательские инструменты */
#personal-extra ul,
#user-tools {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	grid-area: b;
}

#user-tools ul {
	list-style: none;
	margin: 0;
}

/* Поиск */
#p-search {
	grid-area: c;
}

/* Персональный блок внутри пользовательских инструментов */
#personal {
	padding: 0;
}

#personal h2 {
	font-size: var(--font-size-m);
	font-weight: bold;
	display: flex;
	align-items: center;
	font-family: unset;
	background-image: unset;
	position: unset;
}

#personal h2::before {
	mask-image: var(--icon-personal);
}

#personal h2::after {
	display: none;
}

#personal h2 span {
	margin-left: 3px;
}

#site-navigation h2 {
	mask-image: var(--icon-menu-large);
	background: var(--theme-text-color-light) !important;
}

@media screen and (max-width: 850px) {
	#mw-header-container {
		padding: 0.7em 0.45em 0.35em;
	}

	#mw-header {
		grid-template-columns: 1fr 0.6fr;
		grid-template-areas:
			"a b"
			"c c";
	}

	#p-logo-text {
		margin-left: calc(30px + 6px + 0.3em);
	}

	#user-tools {
		justify-content: flex-start;
		flex-direction: row-reverse;
	}

	#user-tools h2::after,
	.sidebar-chunk h2::after {
		display: none;
	}

	#user-tools h2 span {
		display: none;
	}
}

/* === Нижняя часть страницы === */
#mw-footer-container {
	border-top: solid 4px #14866d;
	background: var(--theme-bg-color-100);
}

.mw-footer .footer-icons a {
	background: var(--theme-bg-color-100);
	border: 1px solid var(--theme-border-color-base);
	padding-right: 15px;
	padding-left: 15px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.mw-footer-container a {
	color: var(--text-color-link--visited);
}

.mw-footer-container a:hover {
	color: var(--theme-text-color-light);
}

.mw-footer-container a:visited {
	color: var(--text-color-link--visited);
}

.mw-footer-container a:visited:hover {
	color: var(--theme-text-color-light);
}

/* === При режиме увеличенного размера страницы === */
@media (min-width: 1340px) {
	#mw-content-block {
		display: block;
	}
	
	#mw-content-wrapper {
		float: right;
		margin-left: -14em;
		width: 100%;
	}

	#mw-content,
	#catlinks {
		margin-left: 14em;
	}

	#mw-related-navigation {
		width: 14em;
		padding: 0 1em 0 0;
	}

	.color-middle {
		margin-right: 1em;
	}

	.mw-wiki-logo {
		display: inline-block;
	}
}
/* Respiral: upstream short wiki title needs the same styling as .long. */
#p-logo-text a.mw-wiki-title {
 color:var(--ooui-text-color);font-size:var(--font-size-xxl);
 font-weight:bold;font-style:italic;font-family:var(--font-family-heading);
}