MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Admin (обсуждение | вклад) Нет описания правки |
Admin (обсуждение | вклад) Нет описания правки |
||
| (не показана 41 промежуточная версия этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
/* Основной цвет фона */ | /* Бар */ | ||
body { | .home-card__header { | ||
background-color: var(--background-color-base, #fff); | color: var( --color-emphasized ); | ||
font-size: 1rem; | |||
font-weight: var( --font-weight-semi-bold ); | |||
line-height: var( --line-height-xxx-small ); | |||
} | |||
.home-card__header a { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
} | |||
.home-card__header a:after { | |||
content: '▶'; | |||
font-size: var( --font-size-small ); | |||
} | |||
.home-card__background { | |||
position: absolute; | |||
inset: 0; | |||
} | |||
.home-card__background:after { | |||
position: absolute; | |||
pointer-events: none; | |||
inset: 0; | |||
display: block; | |||
background: linear-gradient(to right,#000,transparent); | |||
content: ""; | |||
transition: transform 250ms ease; | |||
} | |||
.home-card__background picture, | |||
.home-card__background img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.home-card__background img { | |||
object-fit: cover; | |||
object-position: center; | |||
} | |||
.home-card__foreground { | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
padding: var( --space-md ); | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
gap: var( --space-xxs ); | |||
color: #fff; | |||
line-height: var( --line-height-xxx-small ); | |||
pointer-events: none; | |||
} | |||
.home-card__foreground .home-card__badge { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
border-top-left-radius: 0; | |||
border-bottom-right-radius: 0; | |||
} | |||
.home-card__foreground .home-card__header { | |||
color: #fff; | |||
} | |||
.home-card__foreground .home-card__label { | |||
color: #bababa; | |||
} | |||
.home-card p { | |||
margin-top: var( --space-xs ); | |||
font-size: var( --font-size-small ); | |||
} | |||
.home-card2.home-card--button { | |||
overflow: hidden; | |||
padding: 0; | |||
border: 0; | |||
} | |||
.home-card--button a { | |||
display: flex; | |||
height: 100%; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0 var( --space-md ); | |||
background: transparent; | |||
color: #fff; | |||
font-weight: var( --font-weight-medium ); | |||
} | |||
.home-card--button .home-card__background a { | |||
padding: 0; | |||
} | |||
.home-card--button img { | |||
transition: transform 250ms ease; | |||
} | |||
.home-card--button:hover img { | |||
transform: scale( 1.1 ); | |||
} | |||
.home-card2 { | |||
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 ); | |||
} | |||
.home-event { | |||
border: 1px solid var( --border-color-base ); | |||
border-radius: var( --border-radius-medium ); | |||
background: var( --color-surface-1 ); | |||
} | |||
.home-gameinfo { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: var( --space-xs ) var( --space-md ); | |||
white-space: nowrap; | |||
line-height: 1; | |||
overflow-x: auto; | |||
font-size: var( --font-size-small ); | |||
gap: var( --space-xl ); | |||
} | |||
.home-gameinfo-label { | |||
color: var( --color-subtle ); | |||
} | |||
.home-gameinfo-list { | |||
display: flex; | |||
} | |||
.home-gameinfo-list-item { | |||
display: flex; | |||
align-items: center; | |||
gap: var( --space-xs ); | |||
font-weight: var( --font-weight-medium ); | |||
} | |||
.home-gameinfo-list-item + .home-gameinfo-list-item { | |||
margin-left: var( --space-sm ); | |||
border-left: 1px solid var( --border-color-base ); | |||
padding-left: var( --space-sm ); | |||
} | |||
.home-event .home-card2 { | |||
height: 5rem; | |||
border-top-left-radius: 0; | |||
border-top-right-radius: 0; | |||
} | |||
.home-event .home-card__background:after { | |||
/* | |||
* Theme gradient color | |||
* FIXME: Find a way to make customize it through wikitext | |||
*/ | |||
background: linear-gradient(to right,#101e3c 1%,transparent 33.3%); | |||
} | |||
/* Главная */ | |||
.home-header { | |||
position: relative; | |||
padding-block: 3.5rem; | |||
line-height: var( --line-height-xx-small ); | |||
text-align: center; | |||
} | |||
.home-header__pretitle { | |||
margin-bottom: var( --space-xxs ); | |||
color: var( --color-subtle ); | |||
font-size: var( --font-size-small ); | |||
letter-spacing: 0.05em; | |||
} | |||
.home-header__title { | |||
--display-font-size: min( calc( 2.5rem + 3.9vw ), 4.5rem ); | |||
margin: 0; | |||
font-size: var( --display-font-size ); | |||
text-transform: uppercase; | |||
line-height: 0.9; | |||
font-weight: var( --font-weight-semi-bold ); | |||
} | |||
.home-header__subtitle { | |||
margin-top: var( --space-xxs ); | |||
color: var( --color-subtle ); | |||
font-size: var( --font-size-small ); | |||
} | |||
/* Поиск на главной */ | |||
.home-header__search .keyboard-key { | |||
display: inline; | |||
padding-top: 0.1em; | |||
padding-bottom: 0.1em; | |||
} | |||
.home-header:before, | |||
.home-header__searchIcon img { | |||
filter: var( --filter-invert ); | |||
} | |||
@media ( hover: none ) { | |||
.home-header__search .desktoponly { | |||
display: none; | |||
} | |||
} | |||
.home-header__search { | |||
--gradient: #87bfdb, #77abC8, #6797b5, #577f9d, #476684, #43668a, #3e668f, #304a66, #212e3d, #304a66, #3e668f, #43668a, #476684, #577f9d, #6797b5, #77abC8, #87bfdb; | |||
--gradient-blur: 4px; | |||
padding: var( --space-md ); | |||
margin-top: var( --space-xl ); | |||
margin-left: auto; | |||
margin-right: auto; | |||
max-width: 600px; | |||
border: var( --border-base ); | |||
border-radius: var( --border-radius-pill ); | |||
background-color: var( --color-surface-1 ); | |||
cursor: pointer; | |||
font-size: var( --font-size-small ); | |||
font-weight: var( --font-weight-medium ); | |||
text-align: center; | |||
} | |||
.home-header__search .desktoponly { | |||
margin-left: var( --space-xs ); | |||
} | |||
.home-header__search:hover { | |||
--gradient: #120d0e, #321d13, #512d19, #713d1e, #90571d, #b0701b, #cf8a1a, #de9822, #eeA529, #fdb331, #eeA529, #de9822, #cf8a1a, #b0701b, #90571d, #713d1e, #512d19, #321d13, #120d0e; | |||
--gradient-blur: 8px; | |||
background: var( --color-surface-0 ); | |||
} | |||
.home-header__searchIcon img { | |||
margin-right: var( --space-md ); | |||
opacity: var( --opacity-icon-base ); | |||
} | |||
@property --gradient-angle { | |||
syntax: '<angle>'; | |||
initial-value: 0deg; | |||
inherits: false; | |||
} | |||
.scw-gradient-glow { | |||
position: relative; | |||
--clr-3: var( --color-progressive ); | |||
--clr-4: var( --border-color-base ); | |||
--clr-5: var( --border-color-subtle ); | |||
--gradient: var( --clr-3 ), var( --clr-4 ), var( --clr-5 ), var( --clr-4 ), var( --clr-3 ); | |||
--gradient-blur: 4px; | |||
--gradient-time: 5s; | |||
} | |||
.scw-gradient-glow::before { | |||
position: absolute; | |||
inset: 0px; | |||
z-index: -1; | |||
content: ''; | |||
background: conic-gradient( from var( --gradient-angle ), var( --gradient ) ); | |||
border-radius: inherit; | |||
animation: scw-gradient-rotate var( --gradient-time ) linear infinite; | |||
filter: blur( var( --gradient-blur ) ); | |||
transition: filter 100ms ease; | |||
} | |||
@keyframes scw-gradient-rotate { | |||
0% { | |||
--gradient-angle: 0deg; | |||
} | |||
100% { | |||
--gradient-angle: 360deg; | |||
} | |||
} | |||
/* Основной цвет фона */ | |||
.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 { | |||
background-color:#eaecf0; | |||
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 { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #FF6F50 !important; | |||
border-bottom: 1px solid #FF6F50 !important; | |||
min-width: 150px; | |||
} | } | ||
. | .ApexRewards { | ||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #E58B27 !important; | |||
border-bottom: 1px solid #E58B27 !important; | |||
min-width: 150px; | |||
} | } | ||
.LegendaryRewards { | |||
color: | 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; | color: #A02EF7 !important; | ||
border-bottom: 1px solid #A02EF7 !important; | |||
min-width: 150px; | |||
} | } | ||
.SuperiorRewards { | |||
padding: 10px !important; | |||
margin-top: 2rem !important; | |||
color: #3A92FF !important; | color: #3A92FF !important; | ||
border-bottom: 1px solid #3A92FF !important; | |||
min-width: 150px; | |||
} | } | ||
. | .FineRewards { | ||
color: | padding: 10px !important; | ||
margin-top: 2rem !important; | |||
color: #2DC50E !important; | |||
border-bottom: 1px solid #2DC50E !important; | |||
min-width: 150px; | |||
} | } | ||
. | .CommonRewards { | ||
padding: 10px !important; | padding: 10px !important; | ||
margin-top: 2rem !important; | margin-top: 2rem !important; | ||
color: # | color: #888888 !important; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #888888 !important; | ||
min-width: 150px; | min-width: 150px; | ||
} | } | ||
. | .Drops { | ||
padding: 10px !important; | padding: 10px !important; | ||
margin-top: 2rem !important; | margin-top: 2rem !important; | ||
color: | color: var(--color-progressive) !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--color-progressive) !important; | ||
min-width: 150px; | min-width: 150px; | ||
} | } | ||
. | .Datamine { | ||
padding: 10px !important; | padding: 10px !important; | ||
margin-top: 2rem !important; | margin-top: 2rem !important; | ||
color: | color: var(--background-color-error) !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--background-color-error) !important; | ||
min-width: 150px; | min-width: 150px; | ||
} | } | ||
. | .PS { | ||
padding: 10px !important; | padding: 10px !important; | ||
margin-top: 2rem !important; | margin-top: 2rem !important; | ||
color: | color: var(--color-progressive) !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--color-progressive) !important; | ||
min-width: 150px; | min-width: 150px; | ||
} | } | ||
. | .Applied { | ||
padding: 10px !important; | padding: 10px !important; | ||
margin-top: 2rem !important; | margin-top: 2rem !important; | ||
color: | color: var(--color-progressive) !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--color-progressive) !important; | ||
min-width: 150px; | min-width: 150px; | ||
} | } | ||
. | .Craft { | ||
padding: 10px !important; | padding: 10px !important; | ||
margin-top: 2rem !important; | margin-top: 2rem !important; | ||
color: | color: var(--color-progressive) !important; | ||
border-bottom: 1px solid | border-bottom: 1px solid var(--color-progressive) !important; | ||
min-width: 150px; | min-width: 150px; | ||
} | } | ||
#skin-client-pref-skin-theme-value-os { display:none!important; } | |||
#ca-talk { display:none!important; } | |||
.mw-body h1,.mw-body-content h1,.mw-body-content h2 { | |||
font-family: sans-serif | |||
} | } | ||
h1,h2 { | |||
border-bottom: 1px solid rgba(156,191,235,.5) | |||
border-bottom: 1px solid | |||
} | } | ||
. | |||
.color_h3 { | |||
background-color: #b0c4de; | |||
padding: 10px; | |||
box-shadow: 0 0 0 0px rgba(255,255,255,0.6) inset,0 0 7px rgba(0,0,0,0.4),0 0 0 rgba(0,0,0,0.33); | |||
-webkit-transition: box-shadow 0.1s; | |||
transition: box-shadow 0.1s | |||
} | } | ||
body.page-Заглавная_страница * h1 { | |||
display: none | |||
. | |||
} | } | ||
. | .catlinks { | ||
display: none | |||
} | } | ||
.smw-datatable-toolbar { | |||
display: none | |||
} | } | ||
.creature tr:hover { | |||
.creature tr:hover { | |||
background-color: #e0e8ff; | background-color: #e0e8ff; | ||
-webkit-transition: all 0.3s ease; | -webkit-transition: all 0.3s ease; | ||
| Строка 1237: | Строка 1539: | ||
.showcase2 { | .showcase2 { | ||
position: absolute; | position: absolute; | ||
top: | top: 110px; | ||
color: gold; | 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; | left: 0px; | ||
background-color: rgb(16 18 19 / 80%); | background-color: rgb(16 18 19 / 80%); | ||
| Строка 1244: | Строка 1550: | ||
.showcase3 { | .showcase3 { | ||
position: absolute; | position: absolute; | ||
top: | top: 110px; | ||
color: red; | 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; | left: 0px; | ||
background-color: rgb(16 18 19 / 80%); | background-color: rgb(16 18 19 / 80%); | ||
| Строка 1268: | Строка 1588: | ||
left: 0px; | left: 0px; | ||
right:0px; | right:0px; | ||
color: #ffffff; | |||
text-align:center; | text-align:center; | ||
z-index: 3; | z-index: 3; | ||
| Строка 1277: | Строка 1598: | ||
left: 0px; | left: 0px; | ||
right:0px; | right:0px; | ||
color: #ffffff; | |||
text-align:center; | text-align:center; | ||
z-index: 4; | z-index: 4; | ||
| Строка 2265: | Строка 2587: | ||
} | } | ||
/* Цвета кнопок */ | /* Цвета кнопок */ | ||
/* Оформление кнопок */ | /* Оформление кнопок */ | ||
. | .mw-parser-output .home-card--row4 { | ||
grid-row: span 4; | |||
} | } | ||
.home-card--col2 { | .mw-parser-output .home-card--col2 { | ||
grid-column: span 2; | grid-column: span 2; | ||
} | } | ||
.home-card { | .mw-parser-output .home-card { | ||
position: relative; | position: relative; | ||
padding: var(--space-md); | padding: var(--space-md); | ||
| Строка 2290: | Строка 2602: | ||
border-radius: var(--border-radius-medium); | border-radius: var(--border-radius-medium); | ||
font-size: var(--font-size-small); | font-size: var(--font-size-small); | ||
} | |||
.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) | |||
} | } | ||