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

Версия от 20:57, 6 мая 2026

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

/* Палитра: твои 5 пастельных + добавлены почти белый фон и 2 тёмных акцента */
:root{
  /* Base / backgrounds */

  --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;
  font-size: 1em !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);
}

/* === Инфобокс (карточка льготы) === */
.tv-infobox {
    float: right;
    width: 300px;
    margin: 0 0 20px 20px;
    background: #ffffff;
    border: 1px solid #DCDCEB;
    border-top: 10px solid #8283c5; /* сиреневый акцент */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    font-size: 0.9rem;
}

.tv-infobox-title {
    background: #f8f9fa;
    padding: 15px;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    color: #241B23;
    border-bottom: 1px solid #eee;
}

.tv-infobox-image {
    text-align: center;
    padding: 10px;
    background: #fff;
}

.tv-infobox-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse;
}

.tv-infobox-table th {
    background: #fdfdfd;
    width: 35%;
    text-align: left;
    padding: 8px 12px;
    font-weight: bold;
    color: #5C4F5B;
    border-bottom: 1px solid #f0f0f0;
}

.tv-infobox-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.tv-infobox-section {
    background: #E2D6E6; /* Твоя пастель */
    padding: 5px 12px;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #5C4F5B;
}

.tv-infobox-docs {
    padding: 10px 12px;
    line-height: 1.4;
    background: #fff;
}

/* === Оформление списка статей внутри категории === */
.mw-category-generated ul {
    list-style: none !important;
    margin-left: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.mw-category-generated li {
    background: #fff;
    border: 1px solid #e1e1e8;
    border-radius: 8px;
    padding: 0 !important;
    transition: all 0.2s ease;
}

.mw-category-generated li:hover {
    border-color: #8283c5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.mw-category-generated li a {
    display: block;
    padding: 15px 15px 15px 45px;
    font-weight: 500;
    color: #333 !important;
    position: relative;
    text-decoration: none !important;
}

/* Иконка документа перед каждой ссылкой */
.mw-category-generated li a::before {
    content: "📄";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

/* Полное удаление подзаголовка "Материал из..." */
#siteSub, 
.tagline, 
#contentSub, 
#contentSub2,
.mw-body-content #siteSub {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Подчеркивание пункта навигации "Заглавная страница" */
#sidebar .side-nav li:nth-child(4) a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #ff9900 !important;
}