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

Версия от 23:58, 3 марта 2026

/* ===== Teplee Vmeste: Clean Edition ===== */

:root {
  --tv-page: #f4f4f7;      /* Общий мягкий фон всей страницы */
  --tv-surface: #d2deec;   /* Цвет сайдбара */
  --tv-surface-2: #E2D6E6; 
  --tv-border: #DCDCEB;
  --tv-accent: #8283c5;
  --tv-accent-2: #8d79ae;
  --tv-text: #241B23;
}

/* 1. Единый фон для всего, что за пределами контента */
body, 
.off-canvas-wrap, 
.inner-wrap, 
#content {
  background-color: var(--tv-page) !important;
  color: var(--tv-text) !important;
}

/* 2. Сайдбар: закрашиваем его и все его обертки в один цвет */
#sidebar, 
.left-off-canvas-menu,
.inner-wrap > .row > .sidebar {
  background-color: var(--tv-surface) !important;
  border-right: 1px solid var(--tv-border) !important;
}

/* 3. Контентная область: делаем её "листом" на фоне */
.mw-body, #mw-content-text {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 4. Верхняя панель */
.tab-bar {
  background: var(--tv-accent-2) !important;
}
.tab-bar a { color: #fff !important; }

/* 5. Настройка плиток (Интерактив) */
div[style*="box-shadow"][style*="border-radius"] {
    transition: all 0.3s ease !important;
    position: relative;
    cursor: pointer;
    background: #fff !important; /* Белый фон плиток всегда */
}

div[style*="box-shadow"][style*="border-radius"]:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
    border-bottom-color: #ccc !important;
    border-left-color: #ccc !important;
    border-right-color: #ccc !important;
}

/* Кликабельность всей плитки */
div[style*="box-shadow"][style*="border-radius"] a::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
}

/* Эмодзи и заголовки в плитках */
div[style*="box-shadow"]:hover div[style*="font-size: 4rem"] {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
div[style*="box-shadow"]:hover div[style*="font-weight: bold"] {
    text-decoration: underline;
    color: var(--tv-accent);
}

/* 6. Сайдбар: ссылки и заголовки */
#sidebar a, #sidebar label { color: var(--tv-text) !important; }
#sidebar ul.side-nav label.sidebar {
  background: var(--tv-accent-2) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
#sidebar .side-nav li a:hover {
  background: var(--tv-surface-2) !important;
}