MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Admin (обсуждение | вклад) Нет описания правки |
Admin (обсуждение | вклад) Нет описания правки |
||
| (не показаны 124 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
/* Основной цвет фона */ | |||
. | .crownstore-announ img { | ||
max-width:100%; | |||
height:auto; | |||
} | |||
} | .citizen-overflow-content > .motif { | ||
height: 600px; | |||
overflow: auto; | |||
} | |||
body { | |||
background-color: var(--background-color-base, #fff); | |||
} | |||
.nav__link.active { | |||
opacity: 0.3; | |||
} | |||
.textbox { | |||
overflow: auto; | |||
border-radius: var(--border-radius-large); | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
color: var(--color-emphasized); | |||
background-color: var(--color-surface-2); | |||
border: var(--border-width-base) solid var(--border-color-base); | |||
} | |||
.admin-only { | |||
display:none; | |||
} | |||
span.itemmythic { | |||
color: rgb(255, 130, 0) !important; | |||
} | |||
span.itemlegendary { | |||
color: rgb(228, 193, 41) !important; | |||
} | |||
span.itemepic { | |||
color: #A02EF7 !important; | |||
} | |||
span.itemfine { | |||
color: #2DC50E !important; | |||
} | |||
span.itemsuperior { | |||
color: #3A92FF !important; | |||
} | |||
.itemmythic a { | |||
color: rgb(255, 130, 0) !important; | |||
} | |||
.itemlegendary a { | |||
color: rgb(228, 193, 41) !important; | |||
} | |||
.itemepic a { | |||
color: #A02EF7 !important; | |||
} | |||
.itemfine a { | |||
color: #2DC50E !important; | |||
} | |||
.itemsuperior a { | |||
color: #3A92FF !important; | |||
} | } | ||
table.overview { | table.overview { | ||
background-color:#eaecf0; | background-color:#eaecf0; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
} | } | ||
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { | |||
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); | |||
cursor: pointer; | |||
background-repeat: no-repeat; | |||
background-position: center right; | |||
padding-right: 21px; | |||
} | |||
.RadiantApexRewards { | .RadiantApexRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #FF6F50 !important; | |||
border-bottom: 1px solid #FF6F50 !important; | |||
min-width: 150px; | |||
} | } | ||
.ApexRewards { | .ApexRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #E58B27 !important; | |||
border-bottom: 1px solid #E58B27 !important; | |||
min-width: 150px; | |||
} | |||
.LegendaryRewards { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #CCAA1A !important; | |||
border-bottom: 1px solid #CCAA1A !important; | |||
min-width: 150px; | |||
} | |||
.EpicRewards { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #A02EF7 !important; | |||
border-bottom: 1px solid #A02EF7 !important; | |||
min-width: 150px; | |||
} | } | ||
.SuperiorRewards { | .SuperiorRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #3A92FF !important; | |||
border-bottom: 1px solid #3A92FF !important; | |||
min-width: 150px; | |||
} | } | ||
. | .FineRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #2DC50E !important; | |||
border-bottom: 1px solid #2DC50E !important; | |||
min-width: 150px; | |||
} | } | ||
. | .CommonRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #888888 !important; | |||
border-bottom: 1px solid #888888 !important; | |||
min-width: 150px; | |||
} | } | ||
.Drops { | .Drops { | ||
background-color: | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | |||
.Datamine { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--background-color-error) !important; | |||
border-bottom: 1px solid var(--background-color-error) !important; | |||
min-width: 150px; | |||
} | |||
.PS { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | } | ||
.Applied { | .Applied { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | |||
.Craft { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | } | ||
#skin-client-pref-skin-theme-value-os { display:none!important; } | #skin-client-pref-skin-theme-value-os { display:none!important; } | ||
#ca-talk { display:none!important; } | #ca-talk { display:none!important; } | ||
.mw-body h1,.mw-body-content h1,.mw-body-content h2 { | .mw-body h1,.mw-body-content h1,.mw-body-content h2 { | ||
| Строка 108: | Строка 229: | ||
.smw-highlighter { | .smw-highlighter { | ||
cursor: help; | cursor: help; | ||
} | } | ||
| Строка 249: | Строка 369: | ||
table.jquery-tablesorter th.headerSort { | table.jquery-tablesorter th.headerSort { | ||
background- | background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); | ||
position: sticky; | position: sticky; | ||
z-index: 1 | z-index: 1 | ||
} | } | ||
table-wrap { | |||
table | text-align: center; | ||
display: inline-block; | |||
background-color: #fff; | |||
padding: 2rem 2rem; | |||
color: #000; | |||
} | } | ||
| Строка 358: | Строка 466: | ||
} | } | ||
.menu_cont-cards { | |||
display:flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
} | |||
.menu_cont { | .menu_cont { | ||
display:flex; | display:flex; | ||
| Строка 483: | Строка 596: | ||
} | } | ||
.tippy-tooltip { | .tippy-tooltip { | ||
| Строка 649: | Строка 757: | ||
.last-update { | .last-update { | ||
width: 300px; | width: 300px; | ||
background: rgba(var(--color-base-rgb),0.02); | |||
border: 1px solid rgba(var(--color-base-rgb),0.1); | |||
margin-bottom: 2rem | |||
} | } | ||
.last-update-header { | .last-update-header { | ||
background-color: | background-color: var(--color-surface-2); | ||
padding: | border: 1px solid var(--border-color-base); | ||
font-weight: 600 | border-radius: 10px 10px 0px 0px; | ||
padding: 1rem; | |||
font-weight: 600; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis | |||
} | } | ||
.last-update-body { | .last-update-body { | ||
border: 1px solid | border: 1px solid var(--border-color-base); | ||
border-radius: 0px 0px 10px 10px; | |||
border-top: 0px; | border-top: 0px; | ||
padding: | height: 220px; | ||
padding: 0 1rem 1rem 1rem; | |||
box-sizing: border-box; | |||
overflow: hidden | |||
} | } | ||
| Строка 1104: | Строка 1222: | ||
} | } | ||
/* Cached 20250402115902 */ | /* Cached 20250402115902 */ | ||
.ivent { | |||
. | |||
position: relative; | position: relative; | ||
top: 0; | top: 0; | ||
| Строка 1111: | Строка 1228: | ||
} | } | ||
. | .ivent-notactive { | ||
position: | position: absolute; | ||
top: 120px; | |||
color: red; | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.ivent-active { | |||
position: absolute; | |||
top: 120px; | |||
color: #00fc5c; | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.showcase1 { | |||
position: relative; | |||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
} | } | ||
.showcase2 { | |||
position: absolute; | |||
top: 110px; | |||
color: gold; | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
border-radius: 0px 20px 20px 0px; | |||
padding: 0.2em; | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.showcase3 { | |||
position: absolute; | |||
top: 110px; | |||
color: red; | |||
padding: 0.2em; | |||
border-radius: 0px 20px 20px 0px; | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | |||
.showcase4 { | |||
position: absolute; | |||
top: 100px; | |||
padding: 0.2em; | |||
border-radius: 0px 20px 20px 0px; | |||
font-family: var(--font-family-monospace); | |||
font-size: var(--font-size-small); | |||
left: 0px; | |||
background-color: rgb(16 18 19 / 80%); | |||
} | } | ||
.imgthumb { | .card1 { | ||
position: relative; | |||
top: 0; | |||
left: 0; | |||
z-index: 1; | |||
} | |||
.card2 { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
z-index: 2; | |||
} | |||
.card3 { | |||
position: absolute; | |||
top: 165px; | |||
left: 0px; | |||
right:0px; | |||
color: #ffffff; | |||
text-align:center; | |||
z-index: 3; | |||
text-shadow: 2px 2px 1px #000; | |||
} | |||
.card4 { | |||
position: absolute; | |||
top: 185px; | |||
left: 0px; | |||
right:0px; | |||
color: #ffffff; | |||
text-align:center; | |||
z-index: 4; | |||
text-shadow: 2px 2px 1px #000; | |||
} | |||
crateico { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 20%; | |||
height: auto; | |||
} | |||
.imgthumb { | |||
background: #F9F9F9; | background: #F9F9F9; | ||
border: #CCCCCC; | border: #CCCCCC; | ||
| Строка 1796: | Строка 1994: | ||
/* Темная тема */ | /* Темная тема */ | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { | |||
background-image: url(/w/resources/src/jquery.tablesorter.styles/images/sort_both_inverted.svg?d764d); | |||
html.skin-theme-clientpref-night | } | ||
html.skin-theme-clientpref-night table.overview { | |||
} | |||
html.skin-theme-clientpref-night table.overview { | |||
background-color: #1C1D21; | background-color: #1C1D21; | ||
border: 1px solid #162f4d; | border: 1px solid #162f4d; | ||
| Строка 1887: | Строка 2046: | ||
min-height: 40px; | min-height: 40px; | ||
} | } | ||
html.skin-theme-clientpref-night .Drops { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | |||
html.skin-theme-clientpref-night .Applied { | |||
background-color:#13b4a7; | |||
} | |||
html.skin-theme-clientpref-night .Video { | |||
background-color:#1b71b7; | |||
} | |||
html.skin-theme-clientpref-night .Craft { | |||
background-color:#a3a634; | |||
} | |||
html.skin-theme-clientpref-night .itemepic a { | |||
color: #b662f5 !important; | |||
html.skin-theme-clientpref-night . | |||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .itemfine a { | ||
color: #4ef62c !important; | |||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .itemsuperior a { | ||
color: #64a9ff !important; | |||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night span.itemepic { | ||
color: #b662f5 !important; | |||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night span.itemfine { | ||
color: #4ef62c !important; | |||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night span.itemsuperior { | ||
color: #64a9ff !important; | |||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .embedvideo.frame { | ||
border: 1pt solid #212836; | |||
padding: 0.5em; | |||
} | } | ||
} | } | ||
| Строка 1981: | Строка 2089: | ||
/* Автоматический режим */ | /* Автоматический режим */ | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os table.overview { | |||
background-color: #1C1D21; | |||
html.skin-theme-clientpref-os table.overview { | |||
background-color: #1C1D21; | |||
border: 1px solid #162f4d; | border: 1px solid #162f4d; | ||
background-image: url(/resources/css/grunge.png); | background-image: url(/resources/css/grunge.png); | ||
| Строка 2032: | Строка 2098: | ||
background: transparent; | background: transparent; | ||
} | } | ||
html.skin-theme-clientpref-os .Drops { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: var(--color-progressive) !important; | |||
border-bottom: 1px solid var(--color-progressive) !important; | |||
min-width: 150px; | |||
} | |||
html.skin-theme-clientpref-os .Applied { | |||
background-color:#13b4a7; | |||
} | } | ||
html.skin-theme-clientpref-os .Applied { | |||
background-color:#1b71b7; | |||
} | |||
html.skin-theme-clientpref-os .Video { | |||
background-color:#1b71b7; | |||
} | |||
html.skin-theme-clientpref-os .Craft { | |||
background-color:#a3a634; | |||
} | } | ||
html.skin-theme-clientpref-os .itemepic a { | |||
color: #b662f5 !important; | |||
} | } | ||
html.skin-theme-clientpref-os .itemfine a { | |||
color: #4ef62c !important; | |||
} | } | ||
html.skin-theme-clientpref-os .itemsuperior a { | |||
color: #64a9ff !important; | |||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os span.itemepic { | ||
color: #b662f5 !important; | |||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os span.itemfine { | ||
color: #4ef62c !important; | |||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os span.itemsuperior { | ||
color: #64a9ff !important; | |||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .embedvideo.frame { | ||
border: 1pt solid #212836; | |||
padding: 0.5em; | |||
} | } | ||
} | } | ||
background-color: | /* Стили для инфобокса */ | ||
.infobox { | |||
width: 100%; | |||
max-width: 350px; | |||
box-sizing: border-box; | |||
background: var(--color-surface-2); | |||
border-color: transparent; | |||
border-radius: var(--border-radius-base); | |||
padding: 1.5rem; | |||
height: fit-content; | |||
float: right; | |||
margin: 0 0 2rem 2rem; | |||
} | |||
.infobox-overview { | |||
width: 100%; | |||
max-width: 350px; | |||
box-sizing: border-box; | |||
background: #eaecf0; | |||
border: 1px solid #ECE6E7; | |||
padding: 1.5rem; | |||
height: fit-content; | |||
float: right; | |||
margin: 0 0 2rem 2rem; | |||
} | |||
.infobox-section { | |||
margin-bottom: 1.5rem; | |||
} | |||
.infobox-section:last-child { | |||
margin-bottom: 0; | |||
} | |||
.infobox-row { | |||
display: flex; | |||
align-items: flex-start; | |||
justify-content: space-between; | |||
gap: 5px; | |||
position: relative; | |||
padding: 0.5rem 0; | |||
} | |||
.infobox-row-overview { | |||
display: block; | |||
align-items: flex-start; | |||
justify-content: space-between; | |||
gap: 5px; | |||
position: relative; | |||
padding: 0.5rem 0; | |||
} | |||
.infobox-row::after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
height: 1px; | |||
background-color: var(--color-progressive); | |||
opacity: 0.1; | |||
} | |||
.infobox-row-overview::after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 60%; | |||
height: 1px; | |||
background-color: var(--color-progressive); | |||
opacity: 0.1; | |||
} | |||
.infobox-row:last-child::after { | |||
display: none; | |||
} | |||
.infobox-row-nested { | |||
display: flex; | |||
align-items: flex-start; | |||
justify-content: space-between; | |||
gap: 5px; | |||
position: relative; | |||
padding: 0.2rem 0; | |||
} | |||
.infobox-row--no-flex { | |||
display: block; | |||
} | |||
.infobox-row--overflow-x { | |||
overflow-x: auto; | |||
} | |||
.infobox-row--wrap { | |||
flex-wrap: wrap; | |||
} | |||
.infobox-title { | |||
display: flex; | |||
align-items: center; | |||
position: relative; | |||
font-size: 1.2em; | |||
font-weight: 600; | |||
justify-content: left; | |||
color: var(--color-progressive); | |||
} | |||
.infobox-title::after { | |||
opacity: 0.3; | |||
} | |||
.infobox-title--icon { | |||
font-size: 0.875em; | |||
} | |||
.infobox-overview-title { | |||
display: block; | |||
align-items: center; | |||
position: relative; | |||
font-size: 0.9em; | |||
font-weight: 600; | |||
justify-content: left; | |||
color: var(--color-progressive); | |||
} | |||
.infobox-label { | |||
color: var(--color-subtle); | |||
} | |||
.infobox-label.smw-highlighter { | |||
border-bottom: 1px dotted var(--color-subtle); | |||
} | |||
.infobox-value { | |||
color: var(--color-base); | |||
text-align: right; | |||
} | |||
.infobox-quest--list--chapter { | |||
overflow-x: auto; | |||
white-space: nowrap; | |||
} | |||
.overview_box { | |||
justify-content: space-between; | |||
gap: 10px 20px; | |||
align-items: start; | |||
} | |||
.overview_block { | |||
display: grid; | |||
grid-template-columns: 96px auto; | |||
grid-template-rows: auto auto; | |||
align-content: start; | |||
grid-column: 1 / 2; | |||
grid-row: auto; | |||
} | |||
.overview_icon { | |||
flex: 0 0 96px; | |||
height: 96px; | |||
} | |||
.overview_info { | |||
grid-template-columns: min-content auto; | |||
height: min-content; | |||
flex: 1 1 auto; | |||
} | |||
@media screen and (max-width:450px){ | |||
.infobox { | |||
max-width: 100%; | |||
margin: 0 0 2rem 0; | |||
} | |||
} | |||
/* Цвета кнопок */ | |||
/* Оформление кнопок */ | |||
.mw-parser-output .home-card--row4 { | |||
grid-row: span 4; | |||
} | |||
.mw-parser-output .home-card--col2 { | |||
grid-column: span 2; | |||
} | |||
.mw-parser-output .home-card { | |||
position: relative; | |||
padding: var(--space-md); | |||
border: 1px solid var(--border-color-base); | |||
background: var(--color-surface-1); | |||
border-radius: var(--border-radius-medium); | |||
font-size: var(--font-size-small); | |||
} | |||
.mw-parser-output .home-card__badge, .mw-parser-output .home-card__label { | |||
color: var(--color-subtle); | |||
font-size: var(--font-size-small); | |||
letter-spacing: 0.05em; | |||
} | |||
.mw-parser-output .home-link { | |||
display: grid; | |||
margin-top: var(--space-xs); | |||
font-size: var(--font-size-small); | |||
font-weight: var(--font-weight-medium); | |||
grid-gap: var(--space-xs); | |||
text-align: center; | |||
} | |||
.mw-parser-output .home-link__button { | |||
display: flex; | |||
} | |||
.mw-parser-output .home-link__button a { | |||
flex-grow: 1; | |||
padding: var(--space-xs); | |||
border: 1px solid var(--border-color-base); | |||
background: var(--color-surface-2); | |||
border-radius: var(--border-radius-medium); | |||
color: var(--color-emphasized)!important; | |||
line-height: var(--line-height-xxx-small); | |||
text-decoration: none!important; | |||
} | |||
.mw-parser-output .home-link__button a:hover { | |||
background: var(--color-surface-2--hover) | |||
} | } | ||
.mw-parser-output .home-link__button a:active { | |||
background: var(--color-surface-2--active) | |||
} | } | ||