MediaWiki:Common.css: различия между версиями
Pok (обсуждение | вклад) Нет описания правки |
Pok (обсуждение | вклад) Нет описания правки Метки: с мобильного устройства из мобильной версии через расширенный мобильный режим |
||
| (не показаны 3 промежуточные версии этого же участника) | |||
| Строка 16: | Строка 16: | ||
* 12. SOURCE EDITOR → SYNTAX HIGHLIGHTING | * 12. SOURCE EDITOR → SYNTAX HIGHLIGHTING | ||
* 13. DRUID Infoboxes | * 13. DRUID Infoboxes | ||
* 14. | * 14. JS | ||
*/ | */ | ||
| Строка 2186: | Строка 2186: | ||
/* ============ */ | /* ============ */ | ||
. | /* Складной списки с кнопкой в ширину всего блока */ | ||
display: | .collapsible-title { | ||
display: grid; | |||
} | } | ||
. | .collapsible-title > *:not(.mw-collapsible-content) { | ||
grid-row: 1; | |||
grid-column: 1 / 3; | |||
} | |||
} | |||
. | .collapsible-title > .mw-collapsible-content { | ||
grid-row: 2; | |||
grid-column: 1 / 3; | |||
} | } | ||
. | /* Делает кнопку раскрытия складного списка в виде стрелочки */ | ||
. | .collapsible-toggle-arrow::before { | ||
--wh-ratio: 1.5; | |||
--w: 0.9em; | |||
--h: calc(var(--w) / var(--wh-ratio)); | |||
content: ""; | |||
background-image: url(/images/1/12/Inverted_triangle.svg); | |||
display: inline-block; | |||
background-size: cover; | |||
width: var(--w); | |||
height: var(--h); | |||
margin: 0 0.1em; | |||
transition: transform 60ms ease; | |||
} | } | ||
. | .mw-collapsible:has(.mw-collapsible-toggle-collapsed) > .collapsible-toggle-arrow::before { | ||
transform: rotate(-90deg); | |||
} | } | ||
. | .mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle *, | ||
.mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle::after, | |||
.mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle::before { | |||
display: none; | |||
} | } | ||
. | /* Ссылка на весь контейнер кнопки */ | ||
a:has(.StupidButton) { | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
z-index: var(--index-overlay); | |||
} | } | ||
. | /* Тег p без отступов */ | ||
.p-no-margin p { | |||
margin: 0; | |||
} | } | ||
. | /* Подсветка при наведении */ | ||
.backlight:hover { | |||
box-shadow: 0 0 4px 2px var(--color-contrast); | |||
} | } | ||
. | /* Key press */ | ||
.keyboard-key, | |||
border- | .ve-ui-commandHelpDialog-shortcut > kbd, .ve-ui-commandHelpDialog-sequence > kbd { | ||
background: var(--bg-color- | border: 1px solid var(--theme-border-color-100); | ||
border-radius: var(--border-radius-low); | |||
background-image: linear-gradient(to bottom, var(--theme-bg-color-100), var(--theme-bg-color-250), var(--theme-bg-color-100)); | |||
color: var(--theme--text-color); | |||
padding: 0.1em 0.3em; | |||
font-family: inherit; | |||
font-size: 0.8em; | |||
} | } | ||
. | /* Кнопка вверх [[Файл:AnomalyElectricityPulse.png]] */ | ||
#scroll-top { | |||
display: none !important; | |||
background: url(https://station14.ru/images/0/00/AnomalyElectricityPulse.png) 0% 0%/57px 57px no-repeat; | |||
opacity: 0.5; | |||
width: 57px; | |||
height: 57px; | |||
cursor: pointer; | |||
position: fixed; | |||
right: calc(0.95em + 6px); | |||
bottom: 30px; | |||
z-index: 10000; | |||
image-rendering: pixelated; | |||
filter: var(--filter-drop-shadow-medium); | |||
} | } | ||
#scroll-top:hover { | |||
opacity: 0.8; | |||
} | } | ||
@media screen and (max-width: 850px) { | |||
#scroll-top { | |||
transform: translate(-50%, -50%); | |||
left: 50%; | |||
right: 50%; | |||
bottom: 15px; | |||
opacity: 0.3; | |||
} | |||
} | } | ||
/* | /* Необходим для использования fonts.google.com/icons */ | ||
. | .material-symbols-outlined { | ||
-- | font-family: 'Material Symbols Outlined'; | ||
- | font-weight: normal; | ||
- | font-style: normal; | ||
font-size: 24px; | |||
line-height: 1; | |||
letter-spacing: normal; | |||
text-transform: none; | |||
display: inline-block; | display: inline-block; | ||
white-space: nowrap; | |||
word-wrap: normal; | |||
direction: ltr; | |||
-webkit-font-feature-settings: 'liga'; | |||
-webkit-font-smoothing: antialiased | |||
} | } | ||
#mw-indicator-mw-helplink a { | |||
background-image: none; | |||
} | } | ||
.mw- | .mw-body-content sub,.mw-body-content sup,span.reference { | ||
font-size: 80% | |||
} | } | ||
.ns-talk .mw-body-content dd { | |||
margin-top: 0.4em; | |||
margin-bottom: 0.4em | |||
bottom: 0 | |||
} | } | ||
#interwiki-completelist { | |||
font-weight: bold | |||
} | } | ||
.hatnote { | |||
. | font-style: italic; | ||
padding-left: 1.6em; | |||
} | } | ||
.biglink { | |||
. | font-family: var(--font-family-oswald); | ||
font-style: oblique 10deg; | |||
font-variant-caps: small-caps; | |||
text-shadow: var(--theme-bg-color-base) 1px 2px,#595959dd 2px 2px 1px | |||
} | } | ||
.client-js .mw-special-Watchlist #watchlist-message,.client-js .collapsible:not(.mw-made-collapsible).collapsed>tbody>tr:not(:first-child),#editpage-specialchars { | |||
# | display: none | ||
} | } | ||
.mw-rcfilters-enabled .mw-specialpage-summary { | |||
margin-top: 1em | |||
} | } | ||
.citation:target { | |||
background: rgba(0, 127, 255, 0.133) | |||
} | } | ||
.citation { | |||
word-wrap: break-word | |||
word-wrap: | |||
} | } | ||
ol.references { | |||
font-size: 90%; | |||
margin-bottom: 0.5em | |||
} | } | ||
. | .hlist dl,.hlist ol,.hlist ul { | ||
margin: 0; | |||
padding: 0 | |||
} | } | ||
. | .hlist dd,.hlist dt,.hlist li { | ||
margin | margin: 0; | ||
display: inline | |||
} | } | ||
.hlist.inline,.hlist.inline dl,.hlist.inline ol,.hlist.inline ul,.hlist dl dl,.hlist dl ol,.hlist dl ul,.hlist ol dl,.hlist ol ol,.hlist ol ul,.hlist ul dl,.hlist ul ol,.hlist ul ul { | |||
display: inline | |||
} | } | ||
. | .hlist .mw-empty-li { | ||
display: none | |||
} | } | ||
. | .hlist dt:after { | ||
content: ":" | |||
} | } | ||
. | .hlist dd:after,.hlist li:after { | ||
content: " · "; | |||
font-weight: bold | |||
} | } | ||
. | .hlist dd:last-child:after,.hlist dt:last-child:after,.hlist li:last-child:after { | ||
content: none | |||
} | } | ||
. | .hlist dd dd:first-child:before,.hlist dd dt:first-child:before,.hlist dd li:first-child:before,.hlist dt dd:first-child:before,.hlist dt dt:first-child:before,.hlist dt li:first-child:before,.hlist li dd:first-child:before,.hlist li dt:first-child:before,.hlist li li:first-child:before { | ||
content: " ("; | |||
font-weight: normal | |||
} | } | ||
. | .hlist dd dd:last-child:after,.hlist dd dt:last-child:after,.hlist dd li:last-child:after,.hlist dt dd:last-child:after,.hlist dt dt:last-child:after,.hlist dt li:last-child:after,.hlist li dd:last-child:after,.hlist li dt:last-child:after,.hlist li li:last-child:after { | ||
content: ")"; | |||
font-weight: normal | |||
} | } | ||
ol | .hlist ol { | ||
counter-reset: listitem | |||
} | } | ||
.hlist ol>li { | |||
counter-increment: listitem | |||
} | } | ||
.hlist | .hlist ol>li:before { | ||
content: " " counter(listitem) "\a0" | |||
} | } | ||
.hlist | .hlist dd ol>li:first-child:before,.hlist dt ol>li:first-child:before,.hlist li ol>li:first-child:before { | ||
content: " (" counter(listitem) "\a0" | |||
} | } | ||
. | .plainlist ol,.plainlist ul { | ||
line-height: inherit; | |||
list-style: none none; | |||
margin: 0 | |||
} | } | ||
. | .plainlist ol li,.plainlist ul li { | ||
margin-bottom: 0 | |||
} | } | ||
@media (max-width: 800px) { | |||
.grid-adaptive { | |||
grid-template-columns: 1fr !important; | |||
} | |||
} | } | ||
. | .grid-item-adaptive { | ||
display: grid; | |||
gap: 8px; | |||
grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 300px), 1fr)); | |||
} | } | ||
. | .grid-big-item-adaptive { | ||
display: grid; | |||
gap: 10px; | |||
grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 400px), 1fr)); | |||
} | } | ||
. | .grid-small-item-adaptive { | ||
display: grid; | |||
gap: 8px; | |||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |||
} | } | ||
. | .grid-item-compressed { | ||
display: grid; | |||
gap: 10px; | |||
grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30vw, 350px), 0fr)); | |||
} | } | ||
. | .grid-item-compressed { | ||
display: grid; | |||
gap: 10px; | |||
grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30vw, 350px), 0fr)); | |||
} | } | ||
. | .link-card__flex-container { | ||
content: | display: flex; | ||
gap: 10px; | |||
justify-content: center; | |||
flex-grow: 1; | |||
align-items: flex-start; | |||
flex-wrap: wrap; | |||
align-content: center; | |||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
. | .link-card__flex-container { | ||
gap: 8px; | |||
} | } | ||
} | } | ||
. | /* Удаление верхних и нижних отступов для первого и последнего дочернего элемента */ | ||
.no-margin-edges > :first-child, | |||
.tabs-content > :first-child, | |||
.doc > :first-child { | |||
margin-top: 0 !important; | |||
} | } | ||
. | .no-margin-edges > :last-child, | ||
.tabs-content > :last-child, | |||
.doc > :last-child { | |||
margin-bottom: 0 !important; | |||
} | } | ||
. | /* Сброс и настройка отступов для списков */ | ||
.list-reset-margin ol { | |||
margin: 0 0 0 24px; | |||
padding: 0; | |||
} | } | ||
. | .list-reset-margin > ol > li:not(:first-child), | ||
.list-reset-margin > ul:nth-of-type(n+2) { | |||
margin-top: 10px; | |||
} | } | ||
. | /* Кнопка копирования текста */ | ||
.copy-icon { | |||
cursor: pointer; | |||
} | } | ||
. | /* Кнопка копирования текста */ | ||
.brightness-overlay::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
z-index: -1; | |||
background: var(--background-color); | |||
} | } | ||
/* | /* Псевдоэлемент для добавления фона, который изменяет яркость при наведении */ | ||
.brightness-overlay::before { | .brightness-overlay::before { | ||
content: ""; | content: ""; | ||
| Строка 2595: | Строка 2526: | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
z-index: | z-index: 0; | ||
background: var(--background-color); | background: var(--background-color); | ||
} | } | ||
.brightness-overlay:hover::before { | |||
filter: brightness(105%); | |||
} | |||
/* Уменьшеная полоса прокрутки */ | |||
@media not all and (hover: none) and (pointer: coarse) { | |||
/* Уменьшеная полоса прокрутки */ | |||
@media not all and (hover: none) and (pointer: coarse) { | |||
body:not(.wgl-theme-light) .short-scrollbar::-webkit-scrollbar { | body:not(.wgl-theme-light) .short-scrollbar::-webkit-scrollbar { | ||
width: 13px; | width: 13px; | ||
| Строка 3738: | Строка 3656: | ||
/* ============ */ | /* ============ */ | ||
/* #region | /* #region JS */ | ||
/* ============ */ | /* ============ */ | ||
/* Переключатель проекта */ | |||
.js-project-menu { | |||
display: inline-flex; | |||
gap: 6px; | |||
font-size: var(--font-size-s); | |||
flex-wrap: wrap; | |||
padding-bottom: 6px; | |||
} | |||
.js-project-menu label { | |||
user-select: none; | |||
-webkit-user-drag: none; | |||
transition-property: background,box-shadow; | |||
transition-duration: var(--transition-time); | |||
cursor: pointer; | |||
padding: 0.2em 0.4em; | |||
font-weight: bold; | |||
border-bottom: solid 2px var(--theme-text-color-dark); | |||
border-radius: var(--border-radius-low) var(--border-radius-low) 0 0; | |||
color: var(--theme-text-color-dark); | |||
opacity: 0.75; | |||
} | |||
.js-project-menu input { | |||
display: none; | |||
} | |||
.js-project-menu input:checked + label, | |||
.js-project-menu label:hover { | |||
opacity: 1; | |||
} | |||
.js-project-menu input:not(:checked) + label { | |||
background: unset !important; | |||
} | |||
.js-project-menu input#project-Corvax + label { | |||
color: var(--text-color-crimson); | |||
border-bottom-color: var(--text-color-crimson); | |||
background: var(--bg-color-pastel-red-dark); | |||
} | |||
.js-project-menu input#project-WL + label { | |||
color: var(--text-color-dark-salmon); | |||
border-bottom-color: var(--text-color-dark-salmon); | |||
background: var(--bg-color-rust-dark); | |||
} | |||
.js-project-menu input#project-CM + label { | |||
color: var(--text-color-turquoise); | |||
border-bottom-color: var(--text-color-turquoise); | |||
background: var(--bg-color-emerald-dark); | |||
} | |||
.js-project-menu input#project-Frontier + label { | |||
color: var(--text-color-violet); | |||
border-bottom-color: var(--text-color-violet); | |||
background: var(--bg-color-violet-dark); | |||
} | |||
.js-project-menu input#project-Fallout + label { | |||
color: var(--text-color-silver); | |||
border-bottom-color: var(--text-color-silver); | |||
background: var(--bg-color-grey-dark); | |||
} | |||
.js-project-menu input#project-SW + label { | |||
color: var(--text-color-crimson); | |||
border-bottom-color: var(--text-color-crimson); | |||
background: var(--bg-color-pastel-red-dark); | |||
} | |||
.js-project-menu input#project-Wega + label { | |||
color: var(--text-color-pink); | |||
border-bottom-color: var(--text-color-pink); | |||
background: var(--bg-color-pink-dark); | |||
} | |||
.js-project-menu input#project-Goob + label { | |||
color: var(--text-color-blue); | |||
border-bottom-color: var(--text-color-blue); | |||
background: var(--bg-color-blue-dark); | |||
} | |||
@media screen and (max-width: 850px) { | |||
.js-project-menu { | |||
font-size: var(--font-size-xs); | |||
} | |||
} | |||
/* Меню настроек темы */ | |||
.theme-dropdown { | .theme-dropdown { | ||
position: relative; | position: relative; | ||