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

Версия от 00:25, 4 марта 2026

/* ===== Teplee Vmeste: Pastel lavender theme (Pivot) ===== */

/* Палитра: твои 5 пастельных + добавлены почти белый фон и 2 тёмных акцента */
:root{
  /* Base / backgrounds */
  --tv-page: #FCFBFD;      /* почти белый фон страницы */
  --tv-surface: #d2deec;   /* панель 1 (твой цвет)#E8D1E0 */
  --tv-surface-2: #E2D6E6; /* панель 2 / hover (твой цвет) */
  --tv-border: #DCDCEB;    /* границы (твой цвет) */

  /* Extra soft blues (можешь использовать дальше по желанию) */
  --tv-soft-blue-1: #D8E2F1; /* твой цвет */
  --tv-soft-blue-2: #D8E7F5; /* твой цвет */

  /* Text */
  --tv-text: #241B23;      /* тёплый почти чёрный */
  --tv-muted: #5C4F5B;     /* вторичный текст */

  /* Accent (darker, same vibe) */
  --tv-accent: #8283c5;    /* сиренево‑сливовый */
  --tv-accent-2: #8d79ae;  /* темнее для hover/верхней панели/плашек */
}

/* ===== Page background / general text ===== */
body{
  background: var(--tv-page) !important;
  color: var(--tv-text) !important;
}
.mw-body{
  background: transparent !important;
}

/* ===== Top bar (Pivot) ===== */
.tab-bar{
  background: var(--tv-accent-2) !important;
}
.tab-bar, .tab-bar a{
  color: #fff !important;
}
.tab-bar a:hover{
  color: #fff !important;
  text-decoration: underline;
}

/* ===== Sidebar ===== */
#sidebar{
  background: var(--tv-surface) !important;
  border-right: 1px solid var(--tv-border) !important;
}

#sidebar, #sidebar a, #sidebar label{
  color: var(--tv-text) !important;
}

#sidebar .side-nav li a{
  border-radius: 8px;
}

#sidebar .side-nav li a:hover{
  background: var(--tv-surface-2) !important;
  color: var(--tv-text) !important;
}

/* Sidebar section headers: "Навигация", "Инструменты" */
#sidebar ul.side-nav label.sidebar{
  background: var(--tv-accent-2) !important;
  color: #fff !important;
  padding: .25em .5em !important;
  border-radius: 8px !important;
}

/* Sidebar search */
#sidebar input[type="search"],
#sidebar .mw-searchInput{
  background: #FFFFFF !important;
  color: var(--tv-text) !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 10px !important;
}

/* ===== Content links ===== */
.mw-body-content a{
  color: var(--tv-accent) !important;
}
.mw-body-content a:visited{
  color: var(--tv-accent-2) !important;
}
.mw-body-content a:hover{
  text-decoration: underline;
}

/* ===== Headings ===== */
h1, h2, h3, h4{
  color: var(--tv-text) !important;
}
.mw-body-content h2{
  border-bottom: 1px solid var(--tv-border) !important;
}

/* ===== Buttons ===== */
button,
.mw-ui-button,
input[type="submit"],
input[type="button"]{
  background: var(--tv-accent) !important;
  border: 1px solid var(--tv-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

button:hover,
.mw-ui-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background: var(--tv-accent-2) !important;
  border-color: var(--tv-accent-2) !important;
}

/* ===== Inputs / forms ===== */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select{
  background: #fff !important;
  color: var(--tv-text) !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 10px !important;
}

/* ===== Message boxes ===== */
.mw-message-box,
.errorbox,
.successbox,
.warningbox{
  border: 1px solid var(--tv-border) !important;
  background: var(--tv-surface-2) !important;
  color: var(--tv-text) !important;
  border-radius: 10px !important;
}

/* ===== Namespace label ("Служебная", "MediaWiki" и т.п.) ===== */
.namespace.label{
  background: var(--tv-accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: .15em .45em !important;
}

/* Находим блоки с тенями и скруглением (твои плитки) */
div[style*="box-shadow"][style*="border-radius"] {
    transition: all 0.3s ease !important;
    position: relative;
    cursor: pointer;
}

/* ИСПРАВЛЕННЫЙ эффект всплытия: убираем серый цвет границ */
div[style*="box-shadow"][style*="border-radius"]:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
    /* Вместо border-color меняем только 3 стороны, оставляя верх (линию) нетронутой */
    border-bottom-color: #ccc !important;
    border-left-color: #ccc !important;
    border-right-color: #ccc !important;
}

/* ФИКС ФОНА: Закрашиваем область под сайдбаром, чтобы не было белого куска */
.off-canvas-wrap, 
.inner-wrap, 
#sidebar, 
.left-off-canvas-menu {
    background-color: var(--tv-surface) !important;
}

/* Чтобы основной контент справа оставался на своем светлом фоне */
#content {
    background-color: var(--tv-page) !important;
    min-height: 100vh;
}

/* Делаем ссылку внутри плитки (текст и область) растянутой */
div[style*="box-shadow"][style*="border-radius"] a {
    color: inherit !important;
    text-decoration: none !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, #7A4C73);
}