MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Admin (обсуждение | вклад) Нет описания правки Метка: отменено |
Admin (обсуждение | вклад) Нет описания правки |
||
(не показано 12 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
/* | /* Поиск */ | ||
.home- | .home-header__search { | ||
color: var( --color- | --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-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- | .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-card__header a { | .home-header__searchIcon img { | ||
display: flex; | margin-right: var( --space-md ); | ||
opacity: var( --opacity-icon-base ); | |||
} | |||
/* Fix vertical alignment problem */ | |||
.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-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; | align-items: center; | ||
justify-content: space-between; | justify-content: space-between; | ||
Строка 30: | Строка 69: | ||
font-size: var( --font-size-small ); | font-size: var( --font-size-small ); | ||
} | } | ||
.home-card__foreground { | |||
.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; | position: absolute; | ||
top: 0; | top: 0; | ||
Строка 66: | Строка 132: | ||
font-size: var( --font-size-small ); | font-size: var( --font-size-small ); | ||
} | } | ||
.home- | |||
.home-card2.home-card--button { | |||
overflow: hidden; | |||
padding: 0; | |||
border: 0; | |||
} | } | ||
.home- | .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- | .home-card--button .home-card__background a { | ||
.home-card__background | padding: 0; | ||
} | } | ||
.home- | .home-card--button img { | ||
transition: transform 250ms ease; | |||
} | } | ||
. | |||
.home-card--button:hover img { | |||
transform: scale( 1.1 ); | |||
} | } | ||
.home- | .home-card2 { | ||
position: relative; | |||
padding: var( --space-md ); | |||
border: 1px solid var( --border-color-base ); | border: 1px solid var( --border-color-base ); | ||
background: var( --color-surface-1 ); | |||
border-radius: var( --border-radius-medium ); | border-radius: var( --border-radius-medium ); | ||
background: var( --color-surface-1 ); | 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 ); | |||
} | } | ||
Строка 140: | Строка 209: | ||
} | } | ||
.home-event .home- | .home-event .home-card2 { | ||
height: 5rem; | height: 5rem; | ||
border-top-left-radius: 0; | border-top-left-radius: 0; | ||
Строка 2584: | Строка 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 { | ||
Строка 2616: | Строка 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; | |||
} | } |