MediaWiki:Common.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
  .spoiler {
    background-color: D3D3D3; /* Or any other color to obscure the text */
    color: transparent;
    user-select: none; /* Prevents text selection while hidden */
  }

  .spoiler:hover {
    background-color: inherit; /* Reverts to parent background */
    color: inherit; /* Reveals the text color */
  }

/* Основной контейнер: будет подстраиваться под ширину картинки */
figure.cimg {
  display: inline-block;        /* shrink-wrap по контенту */
  clear: both;
  margin: 0.6em 0.6em;
  border: 1px solid #c8ccd1;
  background-color: #fbfcfd;
  font-size: 0.95em;
  line-height: 1.2;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
  vertical-align: top;
  padding: 0.25em;
}

/* Картинка — адаптивна внутри контейнера */
figure.cimg img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Подпись */
figcaption.cimgcaption,
figcaption.cimgcaption p {
  padding: 0.25em 0.35em 0.35em;
  text-align: left;
  color: #222;
  font-size: 0.92em;
  margin: 0;
}

/* Плавающие выравнивания — используем простые классы, похожие на MW */
figure.cimg.tright {
  float: right;
  margin-left: 1em;
  margin-bottom: 0.6em;
}

figure.cimg.tleft {
  float: left;
  margin-right: 1em;
  margin-bottom: 0.6em;
}

/* Центрирование: блок по центру с подписью по центру */
figure.cimg.tcenter {
  display: block;           /* центрируем как блочный элемент */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Отключить float (встроенный) */
figure.cimg.tnone {
  float: none;
  display: block;
  margin-left: 0;
  margin-right: 0;
}

/* Небольшая адаптивная логика: при узком экране картинка занимает максимум ширины */
@media (max-width: 560px) {
  figure.cimg, figure.cimg.tcenter, figure.cimg.tnone {
    display: block;
    width: auto !important;
    max-width: 100%;
    margin-left: 0.25em;
    margin-right: 0.25em;
  }
}

figure.cimg img.tcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* float-fallback — когда класс на img, плавающий эффект всё равно применяется */
figure.cimg img.tright {
  float: right;
  margin-left: 1em;
  margin-bottom: 0.6em;
}

figure.cimg img.tleft {
  float: left;
  margin-right: 1em;
  margin-bottom: 0.6em;
}

/* если вы захотите, чтобы при наличии tcenter на img и узком экране фигура вела себя как block */
@media (max-width: 560px) {
  figure.cimg img.tcenter { max-width: 100%; }
}