MediaWiki:Common.css: различия между версиями

мНет описания правки
Нет описания правки
 
(не показаны 2 промежуточные версии этого же участника)
Строка 607: Строка 607:
/* Апрельская тема  
/* Апрельская тема  
:root body.mediawiki:not(.wgl-theme-light) {
:root body.mediawiki:not(.wgl-theme-light) {
    --brightness-hsl: -1%;
--brightness-hsl: -1%;
    --theme-bg--hsl: 300deg 28%;
--theme-bg--hsl: 300deg 28%;
    --theme-bg--hsl-alpha: 12%;
--theme-bg--hsl-alpha: 12%;
    --color-contrast: #4d2aa7;
--color-contrast: #4d2aa7;
    --bg-color-code: #271a27;
--bg-color-code: #271a27;
    --bg-color-code-light: #2d1e2c;
--bg-color-code-light: #2d1e2c;
    --border-color-code: #412f3d;
--border-color-code: #412f3d;
    --theme-bg-color-base: #100910;
--theme-bg-color-base: #100910;
    --theme-bg-color-100: #19141f;
--theme-bg-color-100: #19141f;
    --ooui-bg--hsl: 185deg 40%;
--ooui-bg--hsl: 185deg 40%;
    --ooui-bg--hsl-alpha: 13%;
--ooui-bg--hsl-alpha: 13%;
}*/
}*/
/* #endregion */
/* #endregion */
Строка 1010: Строка 1010:
.mw-body h2 {
.mw-body h2 {
font-size: var(--font-size-huge);
font-size: var(--font-size-huge);
    font-weight: 500;
font-weight: 500;
    font-family: var(--font-family-heading);
font-family: var(--font-family-heading);
    margin-top: 1em;
margin-top: 1em;
    border-bottom: 2px solid var(--color-contrast);
border-bottom: 2px solid var(--color-contrast);
    margin-bottom: 0.33rem;
margin-bottom: 0.33rem;
    padding: 0.25rem 0.25rem 0.1rem;
padding: 0.25rem 0.25rem 0.1rem;
    line-height: 1.25;
line-height: 1.25;
}
}


.mw-body h3 {
.mw-body h3 {
font-size: var(--font-size-xxl);
font-size: var(--font-size-xxl);
    font-weight: 500;
font-weight: 500;
    font-family: var(--font-family-heading);
font-family: var(--font-family-heading);
    margin-top: 0.3em;
margin-top: 0.3em;
    margin-bottom: 0.3em;
margin-bottom: 0.3em;
    padding-bottom: 0.3em;
padding-bottom: 0.3em;
    padding-top: 0.5em;
padding-top: 0.5em;
}
}


.mw-body h3 .mw-headline {
.mw-body h3 .mw-headline {
    display: inline-block;
display: inline-block;
    position: relative;
position: relative;
}
}


.mw-body h3 .mw-headline:before {
.mw-body h3 .mw-headline:before {
content: '';
content: '';
    position: absolute;
position: absolute;
    bottom: -0.2em;
bottom: -0.2em;
    height: 2px;
height: 2px;
    width: calc(100% + 2em);
width: calc(100% + 2em);
    max-width: 85cqw;
max-width: 85cqw;
    background: linear-gradient(to right, hsl(from var(--color-contrast) h s l / 0.75) calc(100% - 2em), transparent 100%);
background: linear-gradient(to right, hsl(from var(--color-contrast) h s l / 0.75) calc(100% - 2em), transparent 100%);
}
}


Строка 1049: Строка 1049:
font-weight: 500;
font-weight: 500;
font-family: var(--font-family-heading);
font-family: var(--font-family-heading);
    padding-top: 0.5em;
padding-top: 0.5em;
    margin: 0;
margin: 0;
    margin-bottom: 0.3em;
margin-bottom: 0.3em;
}
}
/* #endregion */
/* #endregion */
Строка 1157: Строка 1157:
/*=== Шаблон:Сущность ===*/
/*=== Шаблон:Сущность ===*/
.ts-Сущность {
.ts-Сущность {
    display: grid;
display: grid;
    gap: 6px;
gap: 6px;
    grid-template-columns: 1fr auto;
grid-template-columns: 1fr auto;
    justify-content: space-between;
justify-content: space-between;
    align-items: start;
align-items: start;
margin: 0.5em 0;
margin: 0.5em 0;
}
}
Строка 1183: Строка 1183:
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
    justify-content: center;
justify-content: center;
gap: 8px;
gap: 8px;
padding: 10px 18px;
padding: 10px 18px;
Строка 1189: Строка 1189:
background-color: var(--bg-color); /* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-200) */
background-color: var(--bg-color); /* --bg-color из стилей шаблона; по умолчанию: var(--theme-bg-color-200) */
border-radius: var(--border-radius-low);
border-radius: var(--border-radius-low);
    height: inherit;
height: inherit;
    box-sizing: border-box;
box-sizing: border-box;
   
--clip: 1em;  
--clip: 1em;  
clip-path: polygon(0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)));
clip-path: polygon(0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)));
Строка 1199: Строка 1199:
display: flex;
display: flex;
justify-content: space-between;
justify-content: space-between;
    align-items: center;
align-items: center;
gap: 8px;
gap: 8px;
}
}


.ts-Cut-layout__header-arrow {
.ts-Cut-layout__header-arrow {
    display: grid;
display: grid;
    grid-template-columns: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
    text-align: center;
text-align: center;
}
}


Строка 1270: Строка 1270:
/*=== VisualEditor ===*/
/*=== VisualEditor ===*/
.ve-ui-diffElement-hasDescriptions .ve-ui-diffElement-content {
.ve-ui-diffElement-hasDescriptions .ve-ui-diffElement-content {
    border-right: 1px solid var(--border-color-hr);
border-right: 1px solid var(--border-color-hr);
}
}


.ve-ui-diffElement-attributeChange ins {
.ve-ui-diffElement-attributeChange ins {
    background-color: rgba(0, 174, 136, 0.5) !important;
background-color: rgba(0, 174, 136, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(0, 174, 136, 0.5) !important;
box-shadow: 0 0 0 1px rgba(0, 174, 136, 0.5) !important;
}
}


.ve-ui-diffElement-attributeChange del {
.ve-ui-diffElement-attributeChange del {
    background-color: rgba(209, 29, 19, 0.5) !important;
background-color: rgba(209, 29, 19, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(209, 29, 19, 0.5) !important;
box-shadow: 0 0 0 1px rgba(209, 29, 19, 0.5) !important;
}
}


Строка 1885: Строка 1885:
/*=== Gallery ===*/
/*=== Gallery ===*/
.mw-body li.gallerybox {
.mw-body li.gallerybox {
    padding: 0.33em;
padding: 0.33em;
    margin: 0.33em;
margin: 0.33em;
    background-color: var(--theme-bg-color-150);
background-color: var(--theme-bg-color-150);
    border: var(--border-outset-light);
border: var(--border-outset-light);
    border-radius: var(--border-radius-medium);
border-radius: var(--border-radius-medium);
}
}


.mw-body li.gallerybox div.thumb {
.mw-body li.gallerybox div.thumb {
    background: #f8f9fa;
background: #f8f9fa;
    border: solid #eaecf0;
border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
border-width: 1px 1px 0.2em;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
    padding: 0;
padding: 0;
    overflow: hidden;
overflow: hidden;
    background-color: var(--theme-bg-color-175);
background-color: var(--theme-bg-color-175);
    border-color: transparent;
border-color: transparent;
    border-radius: var(--border-radius-low);
border-radius: var(--border-radius-low);
}
}


div.gallerytext {
div.gallerytext {
padding: 0;
padding: 0;
    letter-spacing: 0.025em;
letter-spacing: 0.025em;
    text-align: center;
text-align: center;
}
}


Строка 2077: Строка 2077:
ul#filetoc, .toc, .toccolours, .mw-warning {
ul#filetoc, .toc, .toccolours, .mw-warning {
border-radius: var(--border-radius-high);
border-radius: var(--border-radius-high);
    background: var(--theme-bg-color-150);
background: var(--theme-bg-color-150);
    padding: 8px 12px;
padding: 8px 12px;
    margin: 12px 0;
margin: 12px 0;
    min-width: 12em;
min-width: 12em;
    box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
    line-height: 1.3;
line-height: 1.3;
    border: var(--border-outset-light);
border: var(--border-outset-light);
    box-sizing: border-box;
box-sizing: border-box;
}
}


Строка 2116: Строка 2116:
content: "";
content: "";
display: block;
display: block;
    width: 16px;
width: 16px;
    height: 14px;
height: 14px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
-webkit-mask: var(--mask);
Строка 2187: Строка 2187:


.js-project-menu {
.js-project-menu {
    display: inline-flex;
display: inline-flex;
    gap: 6px;
gap: 6px;
    font-size: var(--font-size-s);
font-size: var(--font-size-s);
    flex-wrap: wrap;
flex-wrap: wrap;
}
}


.js-project-menu label {
.js-project-menu label {
    user-select: none;
user-select: none;
    -webkit-user-drag: none;
-webkit-user-drag: none;
    transition-property: background,box-shadow;
transition-property: background,box-shadow;
    transition-duration: var(--transition-time);
transition-duration: var(--transition-time);
    cursor: pointer;
cursor: pointer;
    padding: 0.2em 0.4em;
padding: 0.2em 0.4em;
    font-weight: bold;
font-weight: bold;
    border-bottom: solid 2px var(--theme-text-color-dark);
border-bottom: solid 2px var(--theme-text-color-dark);
    border-radius: var(--border-radius-low) var(--border-radius-low) 0 0;
border-radius: var(--border-radius-low) var(--border-radius-low) 0 0;
    color: var(--theme-text-color-dark);
color: var(--theme-text-color-dark);
    opacity: 0.75;
opacity: 0.75;
}
}


.js-project-menu input {
.js-project-menu input {
    display: none;
display: none;
}
}


.js-project-menu input:checked + label,
.js-project-menu input:checked + label,
.js-project-menu label:hover {
.js-project-menu label:hover {
    opacity: 1;
opacity: 1;
}
}


.js-project-menu input:not(:checked) + label {
.js-project-menu input:not(:checked) + label {
    background: unset !important;
background: unset !important;
}
}


.js-project-menu input#project-Corvax + label {
.js-project-menu input#project-Corvax + label {
    color: var(--text-color-crimson);
color: var(--text-color-crimson);
    border-bottom-color: var(--text-color-crimson);
border-bottom-color: var(--text-color-crimson);
    background: var(--bg-color-pastel-red-dark);
background: var(--bg-color-pastel-red-dark);
}
}


.js-project-menu input#project-WL + label {
.js-project-menu input#project-WL + label {
    color: var(--text-color-dark-salmon);
color: var(--text-color-dark-salmon);
    border-bottom-color: var(--text-color-dark-salmon);
border-bottom-color: var(--text-color-dark-salmon);
    background: var(--bg-color-rust-dark);
background: var(--bg-color-rust-dark);
}
}


.js-project-menu input#project-CM + label {
.js-project-menu input#project-CM + label {
    color: var(--text-color-turquoise);
color: var(--text-color-turquoise);
    border-bottom-color: var(--text-color-turquoise);
border-bottom-color: var(--text-color-turquoise);
    background: var(--bg-color-emerald-dark);
background: var(--bg-color-emerald-dark);
}
}


.js-project-menu input#project-Frontier + label {
.js-project-menu input#project-Frontier + label {
    color: var(--text-color-violet);
color: var(--text-color-violet);
    border-bottom-color: var(--text-color-violet);
border-bottom-color: var(--text-color-violet);
    background: var(--bg-color-violet-dark);
background: var(--bg-color-violet-dark);
}
}


.js-project-menu input#project-Fallout + label {
.js-project-menu input#project-Fallout + label {
    color: var(--text-color-silver);
color: var(--text-color-silver);
    border-bottom-color: var(--text-color-silver);
border-bottom-color: var(--text-color-silver);
    background: var(--bg-color-grey-dark);
background: var(--bg-color-grey-dark);
}
}


.js-project-menu input#project-SW + label {
.js-project-menu input#project-SW + label {
    color: var(--text-color-crimson);
color: var(--text-color-crimson);
    border-bottom-color: var(--text-color-crimson);
border-bottom-color: var(--text-color-crimson);
    background: var(--bg-color-pastel-red-dark);
background: var(--bg-color-pastel-red-dark);
}
}


.js-project-menu input#project-Wega + label {
.js-project-menu input#project-Wega + label {
    color: var(--text-color-pink);
color: var(--text-color-pink);
    border-bottom-color: var(--text-color-pink);
border-bottom-color: var(--text-color-pink);
    background: var(--bg-color-pink-dark);
background: var(--bg-color-pink-dark);
}
}


.js-project-menu input#project-Goob + label {
.js-project-menu input#project-Goob + label {
    color: var(--text-color-blue);
color: var(--text-color-blue);
    border-bottom-color: var(--text-color-blue);
border-bottom-color: var(--text-color-blue);
    background: var(--bg-color-blue-dark);
background: var(--bg-color-blue-dark);
}
}


/* Складной списки с кнопкой в ширину всего блока */
/* Складной списки с кнопкой в ширину всего блока */
.collapsible-title {
.collapsible-title {
    display: grid;
display: grid;
}
}


.collapsible-title > *:not(.mw-collapsible-content) {
.collapsible-title > *:not(.mw-collapsible-content) {
    grid-row: 1;
grid-row: 1;
    grid-column: 1 / 3;
grid-column: 1 / 3;
}  
}  


.collapsible-title > .mw-collapsible-content {
.collapsible-title > .mw-collapsible-content {
    grid-row: 2;
grid-row: 2;
    grid-column: 1 / 3;
grid-column: 1 / 3;
}
}


/* Делает кнопку раскрытия складного списка в виде стрелочки */
/* Делает кнопку раскрытия складного списка в виде стрелочки */
.collapsible-toggle-arrow::before {
.collapsible-toggle-arrow::before {
    --wh-ratio: 1.5;
--wh-ratio: 1.5;
    --w: 0.9em;
--w: 0.9em;
    --h: calc(var(--w) / var(--wh-ratio));
--h: calc(var(--w) / var(--wh-ratio));
    content: "";
content: "";
    background-image: url(/images/1/12/Inverted_triangle.svg);
background-image: url(/images/1/12/Inverted_triangle.svg);
    display: inline-block;
display: inline-block;
    background-size: cover;
background-size: cover;
    width: var(--w);
width: var(--w);
    height: var(--h);
height: var(--h);
    margin: 0 0.1em;
margin: 0 0.1em;
    transition: transform 60ms ease;
transition: transform 60ms ease;
}
}


.mw-collapsible:has(.mw-collapsible-toggle-collapsed) > .collapsible-toggle-arrow::before {
.mw-collapsible:has(.mw-collapsible-toggle-collapsed) > .collapsible-toggle-arrow::before {
    transform: rotate(-90deg);
transform: rotate(-90deg);
}
}


Строка 2305: Строка 2305:
.mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle::after,
.mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle::after,
.mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle::before {
.mw-collapsible:has(.collapsible-toggle-arrow) > .mw-collapsible-toggle::before {
    display: none;
display: none;
}
}


Строка 3651: Строка 3651:


.druid-container td {
.druid-container td {
    max-width: 0;
max-width: 0;
}
}


Строка 3762: Строка 3762:
#personal .dropdown,
#personal .dropdown,
.theme-dropdown .theme-window,
.theme-dropdown .theme-window,
.oo-ui-popupWidget-popup {
.mw-echo-ui-overlay .oo-ui-popupWidget-popup {
top: unset;
top: unset;
user-select: none;
user-select: none;
Строка 3956: Строка 3956:


#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: var(--color-contrast);
background-color: var(--color-contrast);
}
}


Строка 4147: Строка 4147:
.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
.mw-notification,
.mw-notification,
.oo-ui-popupWidget-popup,
.ui-widget-header,
.ui-widget-header,
.ui-widget-content,
.ui-widget-content,
Строка 4457: Строка 4458:
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-popupWidget-popup,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-windowManager-modal:not(.oo-ui-windowManager-size-full) > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal:not(.oo-ui-windowManager-size-full) > .oo-ui-dialog > .oo-ui-window-frame,
Строка 4879: Строка 4881:
.ace_search_field,
.ace_search_field,
#pagehistory li.selected,
#pagehistory li.selected,
.oo-ui-popupWidget-popup,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget,
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
Строка 5016: Строка 5019:
/* Остальное */
/* Остальное */
.mw-twocolconflict-single-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade, .mw-twocolconflict-split-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade {
.mw-twocolconflict-single-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade, .mw-twocolconflict-split-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade {
    background-image: linear-gradient(rgba(255, 255, 255, 0), var(--ooui-bg-color-light));
background-image: linear-gradient(rgba(255, 255, 255, 0), var(--ooui-bg-color-light));
}
}