Открыть меню
Переключить меню настроек
Открыть персональное меню
Вы не представились системе
Ваш IP-адрес будет виден всем, если вы внесёте какие-либо изменения.

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

Страница интерфейса MediaWiki
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/* Навигация с использованием возможностей Citizen */
.home-header {
.citizen-menu .navbar {
position: relative;
    background: var(--background-color-primary);
padding-block: 3.5rem;
    border-radius: 8px;
line-height: var( --line-height-xx-small );
    padding: 10px 20px;
text-align: center;
    margin: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
}


.nav-container {
.home-header__pretitle {
     display: flex;
margin-bottom: var( --space-xxs );
    justify-content: space-between;
     color: var( --color-subtle );
    align-items: center;
font-size: var( --font-size-small );
letter-spacing: 0.05em;
}
}


.nav-logo {
.home-header__title {
    font-weight: bold;
--display-font-size: min( calc( 2.5rem + 3.9vw ), 4.5rem );
    font-size: 1.2em;
margin: 0;
font-size: var( --display-font-size );
text-transform: uppercase;
line-height: 0.9;
font-weight: var( --font-weight-semi-bold );
}
}


.nav-links {
.home-header__subtitle {
    display: flex;
margin-top: var( --space-xxs );
    gap: 20px;
color: var( --color-subtle );
font-size: var( --font-size-small );
}
}


.nav-link {
.home-header__search {
    padding: 8px 16px;
--gradient: #87bfdb, #77abC8, #6797b5, #577f9d, #476684, #43668a, #3e668f, #304a66, #212e3d, #304a66, #3e668f, #43668a, #476684, #577f9d, #6797b5, #77abC8, #87bfdb;
    border-radius: 4px;
--gradient-blur: 4px;
    transition: background-color 0.3s;
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;
}
}


.nav-link:hover {
.home-header__search .desktoponly {
    background: var(--background-color-secondary);
margin-left: var( --space-xs );
}
}


/* Выпадающее меню */
.home-header__search:hover {
.nav-dropdown {
--gradient: #120d0e, #321d13, #512d19, #713d1e, #90571d, #b0701b, #cf8a1a, #de9822, #eeA529, #fdb331, #eeA529, #de9822, #cf8a1a, #b0701b, #90571d, #713d1e, #512d19, #321d13, #120d0e;
    position: relative;
--gradient-blur: 8px;
background: var( --color-surface-0 );
}
}


.dropdown-content {
.home-header__searchIcon img {
    display: none;
margin-right: var( --space-md );
    position: absolute;
     opacity: var( --opacity-icon-base );
    background: var(--background-color-primary);
     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    min-width: 200px;
    z-index: 1000;
    padding: 10px;
}
}


.nav-dropdown:hover .dropdown-content {
/* Fix vertical alignment problem */
    display: block;
.home-header__search .keyboard-key {
display: inline;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
}


.dropdown-content div {
.home-header:before,
    padding: 8px 12px;
.home-header__searchIcon img {
    margin: 2px 0;
filter: var( --filter-invert );
    border-radius: 4px;
}
}


.dropdown-content div:hover {
@media ( hover: none ) {
    background: var(--background-color-secondary);
.home-header__search .desktoponly {
display: none;
}
}
}

Версия от 21:45, 27 ноября 2025

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.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 {
	--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 );
}

/* 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;
	}
}