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

Текущая версия от 00:55, 23 сентября 2025

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

/* CloudImage thumb — основной контейнер */
figure.cimg {
  display: inline-block;
  clear: both;
  margin: 0.6em 0.6em;
  border: 1px solid #c8ccd1;
  background-color: #fbfcfd;
  padding: 0.25em;
  vertical-align: top;
}

/* Убедимся, что картинка растягивается правильно внутри контейнера */
figure.cimg img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

/* --- Выравнивание: применяем float/центрирование к фигуре (высокая специфичность) --- */
figure.cimg.tright {
  float: right !important;
  margin-left: 1em !important;
  margin-bottom: 0.6em !important;
}

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

figure.cimg.tcenter {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* none */
figure.cimg.tnone {
  float: none !important;
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Небольшой fallback: если по каким-то причинам класс остался на <img> --- */
figure.cimg img.tcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

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