MediaWiki:Timeless.css: различия между версиями
Tfmb (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| (не показано 19 промежуточных версий 2 участников) | |||
| Строка 1: | Строка 1: | ||
/* | /* === Страница === */ | ||
. | #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); | |||
border: var(--theme-bg-color-base); | |||
} | |||
#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); | |||
border: var(--theme-bg-color-base); | |||
} | |||
#mw-content { | |||
padding: 2em 0 0; | |||
} | |||
#mw-content-container, | |||
#mw-header-container, | |||
#mw-content { | |||
background: var(--theme-bg-color-base); | |||
color: var(--theme-text-color); | |||
border: var(--theme-bg-color-base); | |||
} | |||
#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); | |||
} | |||
/* === Категория внизу === */ | |||
#catlinks-sidebar { | #catlinks-sidebar { | ||
display: none; | |||
} | } | ||
#catlinks { | #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 { | |||
padding: 0; | |||
margin: 0.5em 8px 2px 6px !important; | |||
border-radius: 0.2em; | |||
box-shadow: var(--box-shadow); | |||
} | |||
} | |||
/* Дополнительные отступы портлетов на экранах ≥ 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 { | |||
margin: 0; | |||
padding: calc(0.4em + 2px); | |||
border-top: 2px solid var(--color-lighter-alpha-x); | |||
border-bottom: 2px solid var(--color-darkened-border); | |||
border-radius: var(--border-radius-low) var(--border-radius-low) 0 0; | |||
background: var(--ooui-bg-color); | |||
font-size: var(--font-size-ml); | |||
font-weight: bold; | |||
} | |||
} | |||
@media (min-width: 1100px) { | |||
#mw-site-navigation .sidebar-chunk .mw-portlet-body, | |||
#mw-related-navigation .sidebar-chunk .mw-portlet-body { | |||
margin: 0; | |||
padding: 0.3em 0.5em; | |||
border: 2px solid var(--ooui-bg-color); | |||
border-top: 0; | |||
border-radius: 0 0 var(--border-radius-low) var(--border-radius-low); | |||
background: var(--theme-bg-color-100); | |||
box-shadow: | |||
inset 0 2px 4px rgba(0, 0, 0, 0.15), | |||
inset 0 -2px 4px rgba(0, 0, 0, 0.15); | |||
} | |||
} | |||
/* Сайдбар для телефонов (≤ 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; | |||
} | |||
} | |||
@media screen and (max-width: 850px) { | |||
#mw-content-block { | |||
background: var(--theme-bg-color-100); | |||
} | |||
} | |||
/* === Верхняя панель === */ | |||
/* Контейнер и сетка заголовка */ | |||
#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; | |||
} | |||
} | } | ||