MediaWiki:Timeless.css

Материал из Space Station 14 Вики

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

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
/* === Страница === */
.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-size: 15px;
    font-family: "noto sans";
}

#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-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-dark);
    border-color: var(--ooui-border-color);
    color: var(--ooui-text-color);
    border-radius: var(--border-radius-low);
}

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

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

#mw-footer-container {
    border-top: solid 4px #14866d;
    background: var(--theme-bg-color-100);
}

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

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

@media (min-width: 1340px) {
    #mw-content-block {
        display: block;
    }

    #mw-content {
        margin-left: 14em;
        padding: 2em 0 0;
    }

    #mw-content-wrapper {
        float: right;
        margin-left: -14em;
        background: transparent;
        width: 100%;
    }

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

    .color-middle {
        margin-right: 0;
    }

    .mw-wiki-logo {
        display: inline-block;
    }

    #catlinks {
        margin-left: 14em;
    }
}

/* === Заголовок страницы === */
.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 {
        padding: 6px;
    }
}

/* === Заглавный поисковик (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: 1340px) {
    #mw-site-navigation .sidebar-chunk .mw-portlet > div,
    #mw-site-navigation .sidebar-chunk .mw-portlet-body {
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1339px) {
    #mw-site-navigation .sidebar-chunk .mw-portlet > div,
    #mw-related-navigation .sidebar-chunk .mw-portlet > div,
    #mw-site-navigation .sidebar-chunk .mw-portlet-body,
    #mw-related-navigation .sidebar-chunk .mw-portlet-body {
        margin-bottom: 1em;
    }
}

/* Заголовки портлетов на ≥ 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: 1.05em;
        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: 1.3em;
    font-weight: bold;
    font-style: italic;
    font-family: unset;
}

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

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

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

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

#personal h2 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: unset;
    font-family: unset;
    background-image: none;
}

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

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

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

#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;
    }
}
Источник — https://station14.ru/index.php?title=MediaWiki:Timeless.css&oldid=100073