MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Admin (обсуждение | вклад) Нет описания правки Метка: отменено |
Admin (обсуждение | вклад) Нет описания правки |
||
| (не показано 13 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
/* | /* Поиск */ | ||
.home- | .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 ); | padding: var( --space-md ); | ||
margin-top: var( --space-xl ); | |||
margin-left: auto; | |||
margin-right: auto; | |||
max-width: 600px; | |||
color: | 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- | .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- | .home-header__searchIcon img { | ||
margin-right: var( --space-md ); | |||
opacity: var( --opacity-icon-base ); | |||
} | } | ||
.home- | /* Fix vertical alignment problem */ | ||
.home-header__search .keyboard-key { | |||
display: inline; | |||
padding-top: 0.1em; | |||
padding-bottom: 0.1em; | |||
} | } | ||
.home- | .home-header:before, | ||
.home-header__searchIcon img { | |||
filter: var( --filter-invert ); | |||
} | } | ||
.home-card__background { | |||
position: absolute; | @media ( hover: none ) { | ||
inset: 0; | .home-header__search .desktoponly { | ||
display: none; | |||
} | |||
} | |||
/* Бар */ | |||
.home-card__header { | |||
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; | |||
} | } | ||
| Строка 61: | Строка 94: | ||
object-fit: cover; | object-fit: cover; | ||
object-position: center; | object-position: center; | ||
} | } | ||
.home- | .home-card__foreground { | ||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
padding: | 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- | .home-card__foreground .home-card__badge { | ||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
border-top-left-radius: 0; | |||
border-bottom-right-radius: 0; | |||
} | } | ||
.home- | .home-card__foreground .home-card__header { | ||
color: #fff; | |||
} | } | ||
.home- | .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; | display: flex; | ||
height: 100%; | |||
justify-content: center; | |||
align-items: center; | align-items: center; | ||
padding: 0 var( --space-md ); | |||
background: transparent; | |||
color: #fff; | |||
font-weight: var( --font-weight-medium ); | font-weight: var( --font-weight-medium ); | ||
} | } | ||
.home- | .home-card--button .home-card__background a { | ||
padding: 0; | |||
padding | |||
} | } | ||
.home-card--button img { | |||
transition: transform 250ms ease; | |||
} | } | ||
.home- | .home-card--button:hover img { | ||
transform: scale( 1.1 ); | |||
} | } | ||
.home-card2 { | |||
.home- | |||
position: relative; | position: relative; | ||
padding- | 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- | .home-event { | ||
border: 1px solid var( --border-color-base ); | |||
border-radius: var( --border-radius-medium ); | |||
background: var( --color-surface-1 ); | |||
} | } | ||
.home- | .home-gameinfo { | ||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: var( --space-xs ) var( --space-md ); | |||
line-height: | white-space: nowrap; | ||
font- | line-height: 1; | ||
overflow-x: auto; | |||
font-size: var( --font-size-small ); | |||
gap: var( --space-xl ); | |||
} | } | ||
.home- | .home-gameinfo-label { | ||
color: var( --color-subtle ); | color: var( --color-subtle ); | ||
} | } | ||
.home- | .home-gameinfo-list { | ||
display: | display: flex; | ||
} | } | ||
.home- | .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- | |||
.home-event .home-card2 { | |||
height: 5rem; | |||
border-top-left-radius: 0; | |||
border-top-right-radius: 0; | |||
border | |||
} | } | ||
.home- | .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- | /* Главная */ | ||
.home-header { | |||
- | position: relative; | ||
padding-block: 3.5rem; | |||
line-height: var( --line-height-xx-small ); | |||
text-align: center; | |||
} | } | ||
.home- | .home-header__pretitle { | ||
margin- | 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 { | |||
background | --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; | |||
} | } | ||
.itemlegendary a { | .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; | color: rgb(228, 193, 41) !important; | ||
} | } | ||
| Строка 2555: | Строка 2653: | ||
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 { | .mw-parser-output .home-link { | ||
| Строка 2587: | Строка 2680: | ||
.mw-parser-output .home-link__button a:active { | .mw-parser-output .home-link__button a:active { | ||
background: var(--color-surface-2--active) | background: var(--color-surface-2--active) | ||
} | |||
/* Таймлайн таблица */ | |||
table.timeline { | |||
box-shadow: none; | |||
font-size: var( --font-size-small ); | |||
} | |||
table.timeline, table.timeline tbody { | |||
display: block; | |||
} | |||
table.timeline tr { | |||
position: relative; | |||
margin-left: 8px; | |||
padding: var( --space-xs ) var( --space-xs ) var( --space-xs ) 20px; | |||
display: flex; | |||
flex-direction: column; | |||
border-top-right-radius: var( --border-radius-small ); | |||
border-bottom-right-radius: var( --border-radius-small ); | |||
} | |||
table.timeline tr:before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: -1px; | |||
display: block; | |||
width: 2px; | |||
background-color: var( --border-color-base ); | |||
} | |||
table.timeline tr td:first-child { | |||
font-size: var( --font-size-medium ); | |||
font-weight: var( --font-weight-semi-bold ); | |||
color: var( --color-emphasized ); | |||
} | |||
table.timeline tr td:first-child:before { | |||
content: ""; | |||
width: 8px; | |||
height: 8px; | |||
display: block; | |||
background-color: var( --color-subtle ); | |||
border-radius: 100%; | |||
position: absolute; | |||
left: -4px; | |||
margin-top: 8px; | |||
} | |||
table.timeline tr td { | |||
padding: 0; | |||
border: 0 !important; | |||
} | |||
.iconbadger { | |||
padding: var( --space-xxs ) var( --space-xs ); | |||
border-radius: var( --border-radius-base ); | |||
background-color: var( --color-surface-2 ); | |||
color: var( --color-emphasized ); | |||
font-size: var( --font-size-small ); | |||
font-weight: var( --font-weight-medium ); | |||
line-height: 1; | |||
letter-spacing: 0.025em; | |||
} | } | ||