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

Страница интерфейса MediaWiki
(Отмена правки 18712, сделанной Dantes (обсуждение))
Метка: отмена
Нет описания правки
Строка 7: Строка 7:
   display: inline-block;
   display: inline-block;
   vertical-align: top;
   vertical-align: top;
   background-color: #1e1e1e; /* Под тёмную тему */
   background-color: #1e1e1e;
   border: 2px solid #4fc3f7;
   border: 2px solid #4fc3f7;
   border-radius: 8px;
   border-radius: 8px;
Строка 14: Строка 14:
}
}


/* Обводка по data-border */
.recipe-card[data-border] {
.recipe-card[data-border] {
   border-color: attr(data-border color, #4fc3f7);
   border-color: attr(data-border color, #4fc3f7);
}
}


/* Заголовки */
.collapsible-block {
  margin-top: 0.5em;
  border-bottom: 1px solid #444; /* Линия под заголовком */
  padding-bottom: 0.3em;
}
 
/* Заголовок с кнопкой справа */
.collapsible-header {
.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2b2b2b;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: #81d4fa;
   cursor: pointer;
   cursor: pointer;
  font-weight: bold;
  margin: 0.5em 0 0.2em 0;
  color: #81d4fa;
}
}


/* Содержимое */
/* Кнопка развернуть/свернуть */
.collapsible-content {
.toggle-button {
   display: none;
   font-size: 13px;
  transition: transform 0.2s ease;
}
}


/* Адаптация для 4 блоков в строку */
/* Повернуть стрелку при раскрытии (добавляется JS) */
@media (max-width: 1000px) {
.collapsible-header.open .toggle-button {
  .recipe-card {
  transform: rotate(90deg);
    width: 45%;
  }
}
@media (max-width: 600px) {
  .recipe-card {
    width: 100%;
  }
}
}

Версия от 02:49, 3 мая 2025

.recipe-card {
  width: 22%;
  min-width: 200px;
  box-sizing: border-box;
  padding: 8px;
  margin: 1%;
  display: inline-block;
  vertical-align: top;
  background-color: #1e1e1e;
  border: 2px solid #4fc3f7;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 12px;
}

/* Обводка по data-border */
.recipe-card[data-border] {
  border-color: attr(data-border color, #4fc3f7);
}

.collapsible-block {
  margin-top: 0.5em;
  border-bottom: 1px solid #444; /* Линия под заголовком */
  padding-bottom: 0.3em;
}

/* Заголовок с кнопкой справа */
.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2b2b2b;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: #81d4fa;
  cursor: pointer;
}

/* Кнопка развернуть/свернуть */
.toggle-button {
  font-size: 13px;
  transition: transform 0.2s ease;
}

/* Повернуть стрелку при раскрытии (добавляется JS) */
.collapsible-header.open .toggle-button {
  transform: rotate(90deg);
}