MediaWiki:Minerva.css: различия между версиями
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) Нет описания правки Метка: ручная отмена |
||
| (не показано 30 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
/*=== Цветовая тема (переменные) ===*/ | |||
/* Основные переменные для темной и инвертированной темы */ | |||
:root body, .skin-invert, .notheme { | :root body, .skin-invert, .notheme { | ||
--background-color-base: var(--theme-bg-color-100); | |||
--background-color-neutral: var(--background-color-interactive); | |||
--background-color-neutral-subtle: var(--background-color-interactive-subtle); | |||
--background-color-interactive: var(--theme-bg-color-base); | |||
--background-color-interactive--hover: var(--theme-bg-color-150); | |||
--background-color-interactive--active: var(--theme-bg-color-200); | |||
--background-color-interactive-subtle: var(--ooui-bg-color-dark); | |||
--background-color-interactive-subtle--hover: var(--ooui-bg-color); | |||
--background-color-interactive-subtle--active: var(--ooui-bg-color-light); | |||
--background-color-disabled: var(--background-color-interactive--hover); | |||
--background-color-disabled-subtle: var(--background-color-interactive); | |||
--border-color-base: var(--theme-border-color-100); | |||
--border-color-subtle: var(--theme-border-color-base); | |||
--border-subtle: var(--border-color-subtle); | |||
--border-color-muted: var(--theme-bg-color-300); | |||
--border-color-interactive--hover: var(--theme-bg-color-250); | |||
--border-color-interactive--active: var(--theme-bg-color-300); | |||
--border-color-disabled: var(--border-color-subtle); | |||
--border-color-inverted: var(--background-color-base); | |||
} | } | ||
/* Переменные для темных темы */ | |||
:root body:not(.wgl-theme-light), body:not(.wgl-theme-light) .skin-invert, body:not(.wgl-theme-light) .notheme { | :root body:not(.wgl-theme-light), body:not(.wgl-theme-light) .skin-invert, body:not(.wgl-theme-light) .notheme { | ||
color-scheme: dark; | |||
--color-base: var(--theme-text-color); | |||
--color-base--hover: var(--theme-text-color-light); | |||
--color-emphasized: var(--color-base--hover); | |||
--color-subtle: #a2a9b1; | --color-subtle: #a2a9b1; | ||
--color-disabled: #54595d; | |||
--color-disabled-emphasized: var(--theme-text-color-dark); | |||
--color-inverted: #101418; | |||
--color-progressive: #88a3e8; | |||
--color-progressive--hover: #b0c1f0; | |||
--color-progressive--active: #cbd6f6; | |||
--color-visited: #a799cd; | |||
--color-visited--hover: #c5b9dd; | |||
--color-visited--active: #d9d0e9; | |||
--color-destructive: #fd7865; | |||
--color-destructive--hover: #fea898; | |||
--color-destructive--active: #ffc8bd; | |||
--color-destructive--visited: #c99391; | |||
--color-destructive--visited--hover: #dcb5b3; | |||
--color-destructive--visited--active: #e8cecd; | |||
--color-error: #fd7865; | |||
--color-error--hover: #fea898; | |||
--color-error--active: #ffc8bd; | |||
--color-warning: #ca982e; | |||
--color-success: #2cb491; | |||
--color-notice: #a2a9b1; | |||
--color-content-added: #80cdb3; | |||
--color-content-removed: #fd7865; | |||
--color-base--subtle: #a2a9b1; | |||
--box-shadow-color-base: #72777d; | |||
--box-shadow-color-progressive--focus: #6485d1; | |||
--box-shadow-color-progressive-selected: var(--color-progressive); | |||
--box-shadow-color-progressive-selected--hover: var(--color-progressive--hover); | |||
--box-shadow-color-progressive-selected--active: var(--color-progressive--active); | |||
--box-shadow-color-destructive--focus: var(--box-shadow-color-progressive--focus); | |||
--box-shadow-color-inverted: #000; | |||
--box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87); | |||
--mix-blend-mode-blend: screen; | |||
--background-color-inverted: #f8f9fa; | |||
--background-color-progressive: var(--color-contrast-dark); | |||
--background-color-progressive--focus: var(--color-contrast-dark); | |||
--background-color-progressive-subtle: var(--color-contrast2-dark); | |||
--background-color-progressive-subtle--hover: var(--color-contrast2); | |||
--background-color-progressive-subtle--active: var(--color-contrast); | |||
--background-color-destructive--focus: var(--color-contrast-dark); | |||
--background-color-destructive-subtle: var(--background-color-error-subtle); | |||
--background-color-destructive-subtle--hover: var(--background-color-error-subtle--hover); | |||
--background-color-destructive-subtle--active: var(--background-color-error-subtle--active); | |||
--background-color-error-subtle: var(--bg-color-error-subtle); | |||
--background-color-error-subtle--hover: var(--bg-color-error); | |||
--background-color-error-subtle--active: var(--border-color-error); | |||
--background-color-warning-subtle: var(--bg-color-warning-subtle); | |||
--background-color-success-subtle: var(--bg-color-success-subtle); | |||
--background-color-notice-subtle: var(--bg-color-notice-subtle); | |||
--background-color-content-added: var(--background-color-progressive-subtle--hover); | |||
--background-color-content-removed: #453217; | |||
--background-color-backdrop-light: rgba(var(--color-darkened--rgb), 0.65); | |||
--background-color-backdrop-dark: rgba(var(--color-lighter--rgb), 0.65); | |||
--border-color-progressive--hover: #88a3e8; | |||
--border-color-progressive--active: #b0c1f0; | |||
--border-color-progressive--focus: #6485d1; | |||
--border-color-destructive--hover: #fd7865; | |||
--border-color-destructive--active: #fea898; | |||
--border-color-destructive--focus: #6485d1; | |||
--border-color-error--hover: #fd7865; | |||
--border-color-error--active: #fea898; | |||
--border-color-content-added: #233566; | |||
--border-color-content-removed: #987027; | |||
} | } | ||
/*=== Логотип и шапка ===*/ | |||
.minerva-header .branding-box a { | .minerva-header .branding-box a { | ||
--size: 30px; | |||
background-image: url(/images/logo.svg); | |||
background-position: 50% 50%; | |||
background-size: var(--size); | |||
background-repeat: no-repeat; | |||
height: var(--size); | |||
width: var(--size); | |||
filter: var(--filter-drop-shadow); | |||
} | } | ||
| Строка 105: | Строка 121: | ||
} | } | ||
. | .header-container.header-chrome { | ||
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); | |||
} | } | ||
. | /*=== Верхняя шапка страницы ===*/ | ||
.minerva-user-navigation .minerva-notifications { | |||
display: flex; | |||
flex-direction: row-reverse; | |||
align-items: center; | |||
} | } | ||
.minerva- | .minerva-search-form { | ||
justify-content: space-between; | |||
} | } | ||
/*=== Выпадающее меню темы ===*/ | |||
.theme-dropdown-details { | .theme-dropdown-details { | ||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
box-sizing: border-box; | |||
min-height: 44px; | |||
min-width: 44px; | |||
border-width: 1px; | |||
border-style: solid; | |||
border-radius: 2px; | |||
transition-property: background-color, color, border-color, box-shadow; | |||
transition-duration: .1s; | |||
padding: 0; | |||
background-color: var(--background-color-transparent, transparent); | |||
border-color: var(--border-color-transparent, transparent); | |||
} | } | ||
.theme-dropdown-summary { | .theme-dropdown-summary { | ||
mask-size: calc(max(1.25rem, 20px)); | |||
mask-repeat: no-repeat; | mask-repeat: no-repeat; | ||
mask-position: center; | |||
background: var(--color-subtle); | |||
list-style: none; | |||
} | } | ||
.minerva-user-navigation .minerva-notifications ul.theme-menu__content-list { | .minerva-user-navigation .minerva-notifications ul.theme-menu__content-list { | ||
display: block; | |||
} | |||
/*=== Основной контент ===*/ | |||
.mw-body { | |||
border-top: 1px solid rgba(var(--color-lighter--rgb), 0.025); | |||
} | |||
.heading-holder { | |||
padding: 14px 0 0; | |||
} | |||
.content li { | |||
margin-bottom: unset; | |||
} | |||
.content kbd, .content samp, .content code, .content pre { | |||
font-family: var(--font-family-monospace); | |||
} | |||
.content .mw-parser-output > .mw-heading2, .content .mw-parser-output > h2, .content .mw-parser-output[data-mw-parsoid-version] > section > .mw-heading2, .content .section-heading { | |||
border-bottom: 2px solid var(--color-contrast); | |||
padding: 0.3em 0; | |||
line-height: 1.3; | |||
margin-top: 0.8em; | |||
} | |||
.overlay-enabled, .overlay-content { | |||
background: var(--theme-bg-color-100); | |||
} | |||
@media screen and (min-width: 993.3px) { | |||
.banner-container, .minerva-anon-talk-message, .minerva-header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form { | |||
width: 70%; | |||
max-width: 100%; | |||
} | |||
} | |||
@media screen and (max-width: 640px) { | |||
.image-list, .minerva-anon-talk-message, .pre-content, #mw-content-text > form > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body, #mw-content-text > form > .oo-ui-widget, .content, .post-content { | |||
margin: 0 12px; | |||
} | |||
} | |||
/*=== Табуляция и панель вкладок ===*/ | |||
.minerva__tab-container .minerva__tab.selected { | |||
border-bottom: 2px solid var(--color-contrast); | |||
background: transparent; | |||
} | |||
/*=== Шрифты ===*/ | |||
.mf-font-size-clientpref-small { | |||
font-size: 1rem; | |||
} | |||
.mf-font-size-clientpref-regular { | |||
font-size: 1.1rem; | |||
} | |||
.mf-font-size-clientpref-large { | |||
font-size: 1.2rem; | |||
} | |||
/*=== Расширение:VisualEditor ===*/ | |||
.ve-ui-mobileContext { | |||
background: var(--ooui-bg-color); | |||
} | |||
.ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .ve-ui-toolbar-group-back, | |||
.ve-ui-mobileContext .ve-ui-linearContextItem-body-action-wrapper, | |||
.ve-ui-contextItem + .ve-ui-contextItem { | |||
border-color: var(--ooui-border-color); | |||
} | } | ||
. | /*=== Расширение:GrowthExperiments ===*/ | ||
.growthexperiments-homepage-module-suggested-edits.growthexperiments-homepage-module-mobile-summary { | |||
background-color: var(--ooui-bg-color); | |||
} | } | ||
/*=== Прочее ===*/ | |||
.gradient-header-frame-sub__content .cdx-message { | .gradient-header-frame-sub__content .cdx-message { | ||
display: none; | display: none; | ||
} | |||
.oo-ui-window-body.mw-mobile-pref-dialog-body [class^='mw-htmlform-field'] { | |||
border-color: var(--border-color-base); | |||
} | |||
table th > .mw-collapsible-toggle { | |||
margin: 0 8px; | |||
} | |||
.content table { | |||
margin: unset; | |||
} | |||
.toc { | |||
display: none; /* TODO: настроить стили */ | |||
} | } | ||