MediaWiki:Fandomdesktop.css

/* ----- Импорты ----- */
/* - Шрифты - */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
/* - Заглавная - */
@import "/ru/load.php?articles=MediaWiki:Mainpage.css&only=styles&mode=articles";
/* - Инфобоксы - */
@import "/ru/load.php?articles=MediaWiki:Infobox.css&only=styles&mode=articles";
/* - Таблицы и шаблоны - */
@import "/ru/load.php?articles=MediaWiki:TablesAndTemplates.css&only=styles&mode=articles";
/* - Галереи - */
@import "/ru/load.php?articles=MediaWiki:Gallery.css&only=styles&mode=articles";
/* - Комментарии - */
@import "/ru/load.php?articles=MediaWiki:Comments.css&only=styles&mode=articles";
/* - История - */
@import "/ru/load.php?articles=MediaWiki:History.css&only=styles&mode=articles";
/* - Профайлы - */
@import "/ru/load.php?articles=MediaWiki:Profile.css&only=styles&mode=articles";
/* - Служебная:Поиск - */
@import "/ru/load.php?articles=MediaWiki:Search.css&only=styles&mode=articles";
/* - Служебная:Сообщество - */
@import "/ru/load.php?articles=MediaWiki:CommunityPage.css&only=styles&mode=articles";
/* - Переменные - */
@import "/ru/load.php?articles=MediaWiki:Variables.css&only=styles&mode=articles";


/* ----- Фиксы ----- */
/* - Навигация - */
.fandom-community-header__local-navigation .wds-dropdown__content, .fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content {
  max-width: initial;
  padding: 9px 0;
}

.fandom-community-header__local-navigation .wds-dropdown__content .navigation-item-icon {
  margin-right: 9px
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li {
  padding: 0 9px;
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a {
  line-height: 1em;
  padding: 11px 9px;
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content .wds-list.wds-is-linked > li > a {
  font-size: 12px;
  line-height: 14px;
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:not(.wds-is-sticked-to-parent) .wds-dropdown-level-2__content {
  position: fixed;
  top: -1px;
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-sticked-to-parent .wds-dropdown-level-2__content {
  bottom: -1px;
  position: fixed;
  top: -1px;
}

.page-counter {
  font-weight: bold;
  margin-right: 8px;
}

.page-counter .page-counter__value {
  font-size: inherit;
}

.page-counter__label {
  font-size: 10px;
}

/* - Содержание - */
.toc .toctitle h2 {
  margin: 0 !important;
}

.toc .toctitle h2 .wds-icon + .wds-icon {
  display: none;
}

/* - Размеры и отступы - */
.page {
  font-size: 15px;
  line-height: 22px;
}

.page-header__title {
  font-family: Amatic SC;
  font-weight: bold;
}

.page-content aside h2 {
  margin: 0 !important;
}

.page-content h2 {
  font-weight: normal;
  font-size: 20px;
  margin: 1em 0 .2em !important;
  line-height: 1;
  padding: 0 0 3px;
}

.page-content h3 {
  font-weight: normal;
  margin: .5em 0 .2em;
}

.mw-parser-output p:first-of-type {
  margin: 0;
}

.page-content p {
  line-height: 22px;
  margin: .4em 0 .5em;
}

.page-content p+p {
  margin: 1em 0;
}

.page-content dl {
  margin: 6px 0 3px;
}

.page-content dl+ul {
  margin: 0 0 24px 24px;
}

.mw-parser-output a {
  font-weight: normal !important;
}

h1.mcf-header {
  color: var(--theme-page-text-color) !important;
}

.mw-editsection,
.community-page-todo-list-module-edit {
  font-size: 0;
  float: right;
}

/* - Таблицы - */
.wikitable {
  margin: 0;
}

.table-is-wide:before {
  content: none;
}

.table-is-wide .wikitable {
  box-sizing: border-box;
}

.mw-datatable th {
  background-color: var(--theme-page-background-color--secondary);
  color: var(--theme-page-text-color);
  border-color: var(--theme-border-color);
}

.mw-datatable td {
  background-color: transparent;
  color: var(--theme-page-text-color);
  border-color: var(--theme-border-color);
}

.mw-datatable tr:hover td {
  background: var(--theme-page-background-color--secondary);
}

/* - Примечания - */
ol.references li:target, sup.reference:target {
  background-color: rgba(var(--theme-page-text-color--rgb),.1);
}

/* - Правая колонка - */
.rail-module {
  background-color: transparent;
}

.right-rail-wrapper #WikiaRail center {
  font-size: .9em;
  line-height: 1.4;
}

/* - Популярные страницы - */
.right-rail-wrapper .premium-recirculation-rail ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 6px;
}

.right-rail-wrapper .premium-recirculation-rail li {
  margin: 0;
}

.right-rail-wrapper .premium-recirculation-rail a {
  align-items: center;
  gap: 12px;
}

.right-rail-wrapper .premium-recirculation-rail p {
  font-size: 14px;
  margin: 0;
}

.right-rail-wrapper .premium-recirculation-rail .rail-sponsored-content-desc,
.right-rail-wrapper .premium-recirculation-rail .rail-sponsored-content p {
  margin: 0;
}

.right-rail-wrapper .premium-recirculation-rail .rail-sponsored-content span {
  font-size: 14px
}

.mw-special-AdminDashboard .right-rail-wrapper {
  margin: 0;
  padding: 0 18px;
}

.fandom-desktop-ready-widget {
  margin-top: 18px;
}

/* - Файлы - */
#filetoc {
  background: var(--srw-gray-tr);
  border: 1px solid var(--srw-blue-50);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}

#file.fullImageLink {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#file.fullImageLink > a {
  display: flex;
  justify-content: center;
}

.mw-filepage-resolutioninfo {
  margin-top: 10px;
  text-align: center;
}

.mw-filepage-resolutioninfo::after {
  background: var(--theme-border-color);
  content: "";
  display: block;
  height: 1px;
  margin: 10px auto;
  width: 180px;
}


/* ----- Базовые стили ----- */
/* - Фон - */
.page__main {
  background-color: rgba(var(--theme-page-background-color--rgb), 87%);
}

/* - Табберы - */
.tabber {
  font-family: "Rubik";
}

.tabber .wds-tabs__wrapper.with-bottom-border {
  border-bottom: none;
}

.tabber .wds-tabs__tab {
  padding: 3px 0.5em;
}

.tabber .wds-tabs__tab.wds-is-current {
  background: var(--srw-color--2);
  border-radius: 5px 5px 0px 0px;
  box-shadow: none;
  color: var(--srw-gray);
}

.tabber .wds-tabs__tab-label {
  font-size: 8pt;
  height: auto;
  margin: 0;
}

.tabber .wds-tabs__tab-label>a {
  color: var(--srw-gray);
  text-decoration: none;
}

.tabber .wds-tab__content {
  padding: 5px;
}

/* - Замена аватаров анонимов - */
.EntityHeader_avatar__2TDnq svg {
  background: url(https://slimerancher.fandom.com/ru/wiki/Special:FilePath/Anonymous_avatar.png);
  background-size: 26px;
  border: 2px solid var(--wds-avatar-border-color);
  fill: transparent !important;
  position: absolute;
  transition: .3s;
}

.EntityHeader_avatar__2TDnq svg:hover {
  border: 2px solid var(--wds-avatar-border-color--hover);
}

img[src="https://static.wikia.nocookie.net/663e53f7-1e79-4906-95a7-2c1df4ebbada/thumbnail/width/400/height/400"] {
  background: url(https://slimerancher.fandom.com/ru/wiki/Special:FilePath/Anonymous_avatar.png);
  background-size: 138px;
  padding-left: 134px;
}


/* ----- Фиксы и стили светлой темы ----- */
/* - Страница - */
body.theme-fandomdesktop-light .page__right-rail {
  background-color: rgb(224 231 234 / 87%);
}

/* - Шаблон:Kbd - */
body.theme-fandomdesktop-light kbd > span {
  background-color: #F8F9FA;
  border: 1px solid #C8CCD1;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 20%), 0 0 0 2px #FFF inset;
  color: #222;
  display: inline-block;
  font-family: monospace;
  line-height: 1.4;
  margin: .1em;
  padding: .1em .4em .1em;
  text-align: center;
  text-shadow: 0 1px 0 #FFF;
}


/* ----- Фиксы и стили тёмной темы ----- */
/* - Страница - */
body.theme-fandomdesktop-dark .page__right-rail {
  background-color: rgb(59 58 69 / 87%);
}

/* - Шаблон:Kbd - */
body.theme-fandomdesktop-dark kbd > span {
  background-color: #2E2B41;
  border: 1px solid #3F3C52;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 20%), 0 0 0 2px #2E2B41 inset;
  color: #DDD;
  display: inline-block;
  font-family: monospace;
  line-height: 1.4;
  margin: .1em;
  padding: .1em .4em .1em;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}

/* - Подсветка синтаксиса CSS/JS - */
body.theme-fandomdesktop-dark .mw-highlight {
  background: transparent;
}

body.theme-fandomdesktop-dark .mw-highlight pre {
  background: rgb(0 0 0 / 20%);
  border-color: rgb(0 0 0 / 20%);
}

body.theme-fandomdesktop-dark .mw-highlight .c {
  color: #5F5A60;
}

body.theme-fandomdesktop-dark .mw-highlight .cp {
  color: white;
}

body.theme-fandomdesktop-dark .mw-highlight .err,
body.theme-fandomdesktop-dark .mw-highlight .k,
body.theme-fandomdesktop-dark .mw-highlight .kp,
body.theme-fandomdesktop-dark .mw-highlight .n,
body.theme-fandomdesktop-dark .mw-highlight .n + .o,
body.theme-fandomdesktop-dark .mw-highlight .o + .kc,
body.theme-fandomdesktop-dark .mw-highlight .p + .o,
body.theme-fandomdesktop-dark .mw-highlight .kc + .o,
body.theme-fandomdesktop-dark .mw-highlight .kc + .mi {
  color: #9B859D;
  font-weight: normal;
}

body.theme-fandomdesktop-dark .mw-highlight .kc,
body.theme-fandomdesktop-dark .mw-highlight .mf,
body.theme-fandomdesktop-dark .mw-highlight .mh,
body.theme-fandomdesktop-dark .mw-highlight .mi,
body.theme-fandomdesktop-dark .mw-highlight .nt {
  color: #CF6A4C;
}

body.theme-fandomdesktop-dark .mw-highlight .kt,
body.theme-fandomdesktop-dark .mw-highlight .nn,
body.theme-fandomdesktop-dark .mw-highlight .p {
  color: #CDA869;
}

body.theme-fandomdesktop-dark .mw-highlight .nb,
body.theme-fandomdesktop-dark .mw-highlight .nf {
  color: #DAD085;
}

body.theme-fandomdesktop-dark .mw-highlight .nc {
  color: #7587A6;
}

body.theme-fandomdesktop-dark .mw-highlight .nd,
body.theme-fandomdesktop-dark .mw-highlight .s1,
body.theme-fandomdesktop-dark .mw-highlight .s2 {
  color: #8F9D6A;
}


/* ----- Анимации ----- */
@-webkit-keyframes wiggly1 {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes wiggly1 {
  50% {
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    transform: translateX(-3px) rotate(-2deg);
  }
}

.wiggly1 {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wiggly1:hover, .wiggly1:focus, .wiggly1:active {
  -webkit-animation: .15s linear infinite wiggly1;
  animation: .15s linear infinite wiggly1;
}



@-webkit-keyframes soul-jelly {
  16.65% {
    -webkit-transform: skew(-12deg) scale(1.1, .8);
  }

  33.3% {
    -webkit-transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
  }
}

@keyframes soul-jelly {
  16.65% {
    transform: skew(-12deg) scale(1.1, .8);
  }

  33.3% {
    transform: skew(10deg);
  }

  49.95% {
    transform: skew(-6deg);
  }

  66.6% {
    transform: skew(4deg);
  }

  83.25% {
    transform: skew(-2deg);
  }

  100% {
    transform: skew(0);
  }
}

.soul-jelly {
  display: inline-block;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.soul-jelly:hover, .soul-jelly:focus, .soul-jelly:active {
  -webkit-animation: 1s ease-in-out 1 soul-jelly;
  animation: 1s ease-in-out 1 soul-jelly;
}


@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(-6px);
  }
}


@-webkit-keyframes wiggly2 {
  0% {
    -webkit-transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    opacity: .4;
  }
}

@keyframes wiggly2 {
  0% {
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    transform: translateY(6px);
    opacity: .4;
  }
}

.wiggly2 {
  display: inline-block;
  position: relative;
  transition: transform .3s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wiggly2:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 80%);
  transition: transform .3s, opacity .3s;
}

.wiggly2:hover, .wiggly2:focus, .wiggly2:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation: 1.5s linear .3s infinite alternate hover;
  animation: 1.5s linear .3s infinite alternate hover;
}

.wiggly2:hover:before, .wiggly2:focus:before, .wiggly2:active:before {
  opacity: .4;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation: 1.5s linear .3s infinite alternate wiggly2;
  animation: 1.5s linear .3s infinite alternate wiggly2;
}