/** * vi.css v2 | novorosteatr.ru * Версия для слабовидящих — CSS-классы на */ /* ═══════════════════════════════════════════════════ Кнопка-триггер (всегда видна) ═══════════════════════════════════════════════════ */ #vi-trigger { position: fixed; bottom: 88px; right: 24px; z-index: 10000; width: 56px; height: 56px; border-radius: 50%; border: none; background: #1a0a10; color: #c9a227; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; } #vi-trigger:hover { background: #7a0b3a; transform: scale(1.08); } #vi-trigger.vi-trigger-active { background: #7a0b3a; } /* ═══════════════════════════════════════════════════ Панель настроек ═══════════════════════════════════════════════════ */ #vi-panel { position: fixed; bottom: 140px; right: 24px; z-index: 9999; background: #fff; border: 2px solid #333; border-radius: 10px; padding: 0; width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,.22); font-family: Arial, sans-serif; font-size: 14px; color: #111; display: none; } #vi-panel.vi-open { display: block; } .vi-panel-header { background: #1a0a10; color: #c9a227; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 15px; justify-content: space-between; padding: 12px 16px !important; } .vi-close { background: none; border: none; color: #c9a227; cursor: pointer; font-size: 18px; line-height: 1; } .vi-panel-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eee; } .vi-panel-row:last-child { border-bottom: none; } .vi-label { width: 120px; flex-shrink: 0; font-size: 13px; color: #444; } .vi-btn-group { display: flex; gap: 5px; flex-wrap: wrap; } .vi-btn-group button { padding: 5px 10px; font-size: 13px; font-weight: 600; border: 2px solid #ccc; border-radius: 5px; cursor: pointer; background: #f5f5f5; color: #333; transition: .15s; font-family: Arial, sans-serif; } .vi-btn-group button:hover { border-color: #7a0b3a; } .vi-btn-group button.vi-btn-active { border-color: #7a0b3a; background: #7a0b3a; color: #fff; } .vi-panel-footer { justify-content: center; padding: 12px 16px; } .vi-btn-reset { background: none; border: 1px solid #aaa; color: #555; padding: 6px 18px; border-radius: 5px; cursor: pointer; font-size: 13px; } .vi-btn-reset:hover { background: #f5f5f5; } /* ═══════════════════════════════════════════════════ АКТИВНЫЙ РЕЖИМ: html.vi-active ═══════════════════════════════════════════════════ */ /* Базовые свойства при включении */ html.vi-active body, html.vi-active p, html.vi-active span, html.vi-active div, html.vi-active li, html.vi-active td, html.vi-active a, html.vi-active label, html.vi-active h1, html.vi-active h2, html.vi-active h3, html.vi-active h4, html.vi-active h5, html.vi-active h6 { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.03em; } /* ── Размер шрифта ── */ html.vi-font-0 body { font-size: 16px !important; } html.vi-font-1 body { font-size: 20px !important; } html.vi-font-2 body { font-size: 24px !important; } html.vi-font-0 * { font-size: inherit; } html.vi-font-1 p, html.vi-font-1 span, html.vi-font-1 li, html.vi-font-1 td, html.vi-font-1 a { font-size: 20px !important; } html.vi-font-1 h1 { font-size: 28px !important; } html.vi-font-1 h2 { font-size: 24px !important; } html.vi-font-1 h3 { font-size: 22px !important; } html.vi-font-2 p, html.vi-font-2 span, html.vi-font-2 li, html.vi-font-2 td, html.vi-font-2 a { font-size: 24px !important; } html.vi-font-2 h1 { font-size: 34px !important; } html.vi-font-2 h2 { font-size: 28px !important; } html.vi-font-2 h3 { font-size: 26px !important; } /* ── Межстрочный интервал ── */ html.vi-line-0 * { line-height: 1.5 !important; } html.vi-line-1 * { line-height: 1.9 !important; } html.vi-line-2 * { line-height: 2.4 !important; } /* ── Изображения: скрыть ── */ html.vi-noimg img, html.vi-noimg .bx-image, html.vi-noimg figure, html.vi-noimg [style*="background-image"] { display: none !important; } /* Но иконки и логотип в шапке не скрываем чтобы не ломать навигацию */ html.vi-noimg #vi-trigger, html.vi-noimg #vi-panel, html.vi-noimg .fa { display: revert !important; } /* ── Цветовые схемы ── */ /* Ч/Б — чёрный на белом */ html.vi-scheme-bw, html.vi-scheme-bw * { background: #fff !important; background-image: none !important; background-color: #fff !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; } html.vi-scheme-bw a, html.vi-scheme-bw a:visited { color: #000 !important; text-decoration: underline !important; } html.vi-scheme-bw a:hover { color: #333 !important; } html.vi-scheme-bw #vi-trigger { background: #000 !important; color: #fff !important; } html.vi-scheme-bw .vi-btn-group button.vi-btn-active { background: #000 !important; color: #fff !important; } /* Б/Ч — белый на чёрном */ html.vi-scheme-wb, html.vi-scheme-wb * { background: #000 !important; background-image: none !important; background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; } html.vi-scheme-wb a, html.vi-scheme-wb a:visited { color: #fff !important; text-decoration: underline !important; } html.vi-scheme-wb a:hover { color: #ccc !important; } html.vi-scheme-wb #vi-panel { background: #111 !important; border-color: #fff !important; } /* Ж/С — жёлтый на синем */ html.vi-scheme-yb, html.vi-scheme-yb * { background: #00008b !important; background-image: none !important; background-color: #00008b !important; color: #ffff00 !important; border-color: #ffff00 !important; text-shadow: none !important; box-shadow: none !important; } html.vi-scheme-yb a, html.vi-scheme-yb a:visited { color: #ffff00 !important; text-decoration: underline !important; } html.vi-scheme-yb a:hover { color: #ffffa0 !important; } html.vi-scheme-yb #vi-panel { background: #00008b !important; border-color: #ffff00 !important; } /* ── Панель и кнопки всегда видны в любой схеме ── */ html.vi-active #vi-panel .vi-panel-header { background: #1a0a10 !important; color: #c9a227 !important; } html.vi-active #vi-panel .vi-label { color: #444; } html.vi-active #vi-trigger { position: fixed !important; } html.vi-active #vi-panel { position: fixed !important; font-size: 14px !important; } /* Кнопки схем сохраняют свои цвета */ html.vi-active #vi-scheme-1 { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; } html.vi-active #vi-scheme-2 { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html.vi-active #vi-scheme-3 { background: #00f !important; color: #ff0 !important; border: 2px solid #ff0 !important; } /* Мобилка — версия для слабовидящих недоступна */ @media (max-width: 767px) { #vi-trigger, #vi-panel { display: none !important; } }