MediaWiki:Citizen.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
Opera: Нажмите Ctrl+F5.
/* Размещённый здесь CSS-код будет загружаться для пользователей, использующих тему оформления Citizen */

.skin-citizen-dark .mw-logo-icon {
    filter: invert(1) hue-rotate(180deg) saturate(10);
}

/* Общий стиль контейнера кнопок */
.wiki-buttons-container {
  text-align: center; 
}

/* Стили для инфобокса */
.infobox {
    background-color: #f9f9f9; 
    border: 1px solid #aaa; 
    border-radius: 10px; 
    padding: 10px; 
}

/* Стили для заголовка инфобокса */
.infobox-title {
    font-size: 1.2em; 
    font-weight: bold; 
}

/* Стили для изображения в инфобоксе */
.infobox-image {
    max-width: 100%; 
    border-radius: 5px;
    margin-bottom: 10px; 
}

/* Стили для подписи изображения в инфобоксе */
.infobox-caption {
    font-style: italic; 
    color: #666; 
}
#p-navigation .pBody ul li#n-createpage a:before {
    content: "\f15b"; 
    font-family: FontAwesome; 
    margin-right: 5px; 
}
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.parallax-bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

.parallax-content {
    position: relative;
    z-index: 1;
}


/* Общий стиль контейнера кнопок */
.wiki-buttons-container {
  text-align: center; 
}

/* Общий стиль кнопок */
.wiki-button {
  position: relative;
  display: inline-block;
  width: calc(100% / 5 - 20px); /* ширина с учетом отступов */
  height: 100px;
  margin: 10px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 17px; 
  line-height: 80px;
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out;
}

/* Стиль для фона при наведении */
.wiki-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(0%);
  transition: filter 0.3s ease-in-out;
}

/* Анимация чёрно-белого фона при наведении */
.wiki-button:hover::before {
  filter: grayscale(100%);
}

/* Специфичные стили для каждой кнопки */
.wiki-button.multfilms::before { background-image: url('https://static.miraheze.org/lostmediaruwiki/d/d1/Dedek_%282%29.jpg'); }
.wiki-button.games::before { background-image: url('https://static.miraheze.org/lostmediaruwiki/d/df/2TW2001_%281%29.png'); }
.wiki-button.movies::before { background-image: url('https://static.miraheze.org/lostmediaruwiki/d/d0/472578478578477.jpg'); }
.wiki-button.shows::before { background-image: url('https://static.miraheze.org/lostmediaruwiki/1/1d/Категория_телепередачи.png'); }
.wiki-button.cultmedia::before { background-image: url('https://static.miraheze.org/lostmediaruwiki/9/95/Screenshot_420.png'); }

/* Стиль для текста внутри кнопок */
.wiki-button .button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  font-weight: bold; 
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); 
}


/* Медиа-запрос для смартфонов */
@media only screen and (max-width: 767px) {
  .wiki-button {
    width: 97%; /* ширина кнопок для смартфонов */
    height: 90px; /* высота кнопок для смартфонов */
    line-height: 60px; /* выравниваем по вертикали */
    font-size: 21px;
    margin: 10px auto; /* выравнивание по центру */
  }
}

/* Стиль для контейнера кнопок на смартфонах */
@media only screen and (max-width: 767px) {
  .wiki-buttons-container {
    text-align: center;
  }
}



/* Общий стиль контейнера кнопок */
.wiki-buttons-container {
  text-align: center; 
  margin: 10px -10px 10px; 
}

/* Общий стиль кнопок */
.wiki-button2 {
  position: relative;
  display: inline-block;
  width: calc(20% - 20px); 
  height: 50px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 17px; 
  line-height: 80px;
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out;
  margin: 10px; 
}

/* Стиль фона при наведении */
.wiki-button2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(0%);
  transition: filter 0.3s ease-in-out;
}

/* Анимация фона при наведении */
.wiki-button2:hover::before {
  filter: grayscale(100%);
}

/* стили для каждой кнопки */
.wiki-button2.oth::before { background-image: linear-gradient(to bottom right, #6A7C85 0%,  #2f4147 100%); }
.wiki-button2.discord::before { background-image: linear-gradient(to bottom right, #5865F2 0%, #341dcc 100%); }
.wiki-button2.youtube::before { background-image: linear-gradient(to bottom right, #FF0000 0%, #CB2027 100%); }
.wiki-button2.vk::before { background-image: linear-gradient(to bottom right, #4A76A8 0%, #4A76A8 100%); }
.wiki-button2.tg::before { background-image: linear-gradient(to bottom right, #0088cc 0%, #00a5df 100%); }


/* Стиль для текста кнопок */
.wiki-button2 .button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  font-weight: bold; 
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); 
}

.page-Заглавная_страница .plainlinks a {
  color: white !important; 
}

.page-Заглавная_страница .plainlinks a:hover {
  color: #ededed !important; 
}

figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'] {
  display: table;
  margin: var(--space-xs) auto var(--space-md) auto;
  font-size: 0.8125rem;
  text-align: center;
}

figure {
  margin: 0;
}

*, *::before, *::after {
  box-sizing: inherit;
}

 body.page-Заглавная_страница .mw-body-header {
  display: none;
}

@media only screen and (max-width: 767px) {
	
	  figure[typeof~='mw:File/Thumb'],
  figure[typeof~='mw:File/Frame'] {
    display: block;
    margin: 10px auto;
  }

  figure[typeof~='mw:File/Thumb'] img,
  figure[typeof~='mw:File/Frame'] img {
    width: 100%; 
    margin: 10px 0; 
    height: auto; 
    max-width: initial; 
  }
	
  .wiki-button2 {
    width: 97%; /* ширина кнопок */
    height: 50px; /* высота кнопок */
    line-height: 60px;
    font-size: 21px;
    font-size: 16px;
    margin: 10px auto 3px auto; 
  }

	
  .page-Заглавная_страница #unique-heading {
  margin-top: 0;
}
}

@media only screen and (max-width: 767px) {
  .wiki-buttons-container {
    text-align: center;
  }
}