Перейти к содержанию

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

Материал из Helix
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/* Размещённый здесь CSS будет применяться ко всем темам оформления */


/* Flex Table System - Enhanced Borders */
/* Основные стили для таблицы */
.flex-table-container {
.table-container {
   width: 70%;
   width: 60%;
  max-width: 1000px;
  min-width: 320px;
   margin: 2em auto;
   margin: 2em auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
}


.table-header {
.wikitable.hover-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  background: transparent;
}
 
.table-header-cell {
   text-align: center;
   text-align: center;
   padding: 15px;
   padding: 15px;
   font-size: 1.8em;
   font-size: 1.5em;
   font-weight: 700;
   font-weight: bold;
  color: #2c3e50;
   border: 1px solid #3a3a3a;
   border-bottom: 2px solid #ddd;
   border-radius: 8px;
  margin: -10px -10px 20px -10px;
  background: #f8f9fa;
   border-radius: 6px 6px 0 0;
}
}


.table-header span {
.table-group-header {
   color: #1a5fb4;
   text-align: center;
  padding: 10px;
  font-weight: bold;
  border-bottom: 2px solid #4d4d4d;
  margin-bottom: 10px;
}
}


.flex-table {
/* Стили для ячеек с эффектом при наведении */
  display: flex;
.hover-cell {
  flex-wrap: wrap;
  gap: 15px;
}
 
.table-column {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}
 
.column-header {
   text-align: center;
   text-align: center;
   padding: 12px;
   padding: 12px;
  font-weight: 600;
   border: 1px solid #4d4d4d;
  font-size: 1.2em;
   border-radius: 6px;
  color: #2c3e50;
  background: #f0f3f5;
   border-bottom: 1px solid #ddd;
}
 
.table-cell {
  flex: 1;
  text-align: center;
  padding: 15px;
   border-bottom: 1px solid #eee;
   transition: all 0.3s ease;
   transition: all 0.3s ease;
  background: rgba(40, 40, 40, 0.5);
   display: block;
   display: block;
}
}


.table-cell:last-child {
.hover-cell:hover {
   border-bottom: none;
   transform: scale(1.03);
}
  border-color: #4d9de0;
 
   background: rgba(30, 60, 90, 0.7);
.table-cell:hover {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: #f8fbff;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(26, 95, 180, 0.1);
  z-index: 2;
}
 
/* Адаптивность */
@media (max-width: 768px) {
  .flex-table-container {
    width: 90%;
    padding: 15px;
  }
}
 
@media (max-width: 480px) {
  .table-column {
    min-width: 100%;
  }
}
}

Версия от 13:22, 1 июля 2025

/* Размещённый здесь CSS будет применяться ко всем темам оформления */

/* Основные стили для таблицы */
.table-container {
  width: 60%;
  margin: 2em auto;
}

.wikitable.hover-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  background: transparent;
}

.table-header-cell {
  text-align: center;
  padding: 15px;
  font-size: 1.5em;
  font-weight: bold;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
}

.table-group-header {
  text-align: center;
  padding: 10px;
  font-weight: bold;
  border-bottom: 2px solid #4d4d4d;
  margin-bottom: 10px;
}

/* Стили для ячеек с эффектом при наведении */
.hover-cell {
  text-align: center;
  padding: 12px;
  border: 1px solid #4d4d4d;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: rgba(40, 40, 40, 0.5);
  display: block;
}

.hover-cell:hover {
  transform: scale(1.03);
  border-color: #4d9de0;
  background: rgba(30, 60, 90, 0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}