Постописцы недели

Имя участника 1 Имя участника 2 Имя участника 3

Активисты недели

Имя участника 1 Имя участника 2 Имя участника 3

пиши посты,радуй соигроков ©

we need you

Тест дизайнов

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Тест дизайнов » Дизы » Темно-белый восторг


Темно-белый восторг

Сообщений 1 страница 4 из 4

1

https://upforme.ru/uploads/000f/09/5e/16842/942331.jpg  https://upforme.ru/uploads/000f/09/5e/16842/471283.jpg

0

2

хтмл верх
Код:
<script>
(function () {
  'use strict';
  var viewport = document.querySelector('meta[name="viewport"]');
  if (!viewport) {
    viewport = document.createElement('meta');
    viewport.name = 'viewport';
    document.head.appendChild(viewport);
  }
  viewport.content = 'width=1200';
  window.RVContourConfig = {
    captions: {
      'pun-category1': 'Истории начинаются со знакомства',
      'pun-category2': 'Место для новых глав',
      'pun-category3': 'Длинное описание длинное описание длинное описание длинное описание длинное описание'
    }
  };
  try {
    document.documentElement.dataset.rvTone = localStorage.getItem('rv-contour-tone') === 'dark' ? 'dark' : 'light';
  } catch (error) {}

  function configure() {
    if (window.RusffCore && RusffCore.sets) {
      RusffCore.sets.show_reportBtn = 0;
      RusffCore.sets.share = false;
      if (RusffCore.sets.files) RusffCore.sets.files.button = false;
      RusffCore.sets.realtimeTopicReaders = false;
    }
    if (window.rusffLive) rusffLive.enable = false;
    if (window.ReactionsPlugin && typeof ReactionsPlugin.setConfig === 'function') {
      ReactionsPlugin.setConfig({ disable: true });
    }
  }
  configure();
  document.addEventListener('DOMContentLoaded', configure, { once: true });
  window.addEventListener('load', configure, { once: true });
})();
</script>

<!-- Быстроплюсы v.2 РЕНО, Deff -->
<script src="https://forumstatic.ru/files/0012/d8/04/58219.js" addcomment="1"></script>

<!-- скрытие профиля -->
<style>
#pun .post.hideprofile > .container {
  grid-template-columns: minmax(0, 1fr);
}

#pun .post.hideprofile .post-author,
#pun .post.hideprofile .pl-email,
#pun .post.hideprofile .pl-website,
#pun .post.hideprofile .post-sig {
  display: none !important;
}

#pun .post.hideprofile .post-body,
#pun .post.hideprofile .post-links,
#pun .post.hideprofile .post-links ul,
#pun .post.hideprofile h3 > span {
  margin-left: 0 !important;
}
</style>

<!-- Смена аватара в теме, Deff и Alex_63 -->
<script src="https://forumstatic.ru/files/0015/c4/3f/67169.js"></script>
хтмл низ
Код:
<div class="rv-scroll">
  <button type="button" class="rv-icon-button" data-rv-top aria-label="В начало страницы" title="В начало страницы"></button>
  <button type="button" class="rv-icon-button" data-rv-bottom aria-label="В конец страницы" title="В конец страницы"></button>
</div>
<script>
(function () {
  'use strict';
  if (window.RVWinter2026) return;
  window.RVWinter2026 = true;

  function init() {
    var root = document.documentElement;
    var forum = document.getElementById('pun');
    if (!forum) return;
    var config = window.RVContourConfig || { captions: {} };
    var admin = !!document.getElementById('pun-admain');

    var ambience = document.createElement('div');
    ambience.className = 'rv-fireflies';
    ambience.setAttribute('aria-hidden', 'true');
    for (var particle = 0; particle < 5; particle++) ambience.appendChild(document.createElement('i'));
    document.body.prepend(ambience);

    /* Управление страницей */
    var title = document.getElementById('pun-title');
    if (title && !title.querySelector('[data-rv-tone]')) {
      var tone = document.createElement('button');
      tone.type = 'button';
      tone.className = 'rv-icon-button rv-tone';
      tone.setAttribute('data-rv-tone', '');
      title.appendChild(tone);
      function updateTone() {
        var dark = root.dataset.rvTone === 'dark';
        tone.title = dark ? 'Включить светлую тему' : 'Включить тёмную тему';
        tone.setAttribute('aria-label', tone.title);
        tone.setAttribute('aria-pressed', String(dark));
      }
      tone.addEventListener('click', function () {
        root.dataset.rvTone = root.dataset.rvTone === 'dark' ? 'light' : 'dark';
        try { localStorage.setItem('rv-contour-tone', root.dataset.rvTone); } catch (error) {}
        updateTone();
      });
      updateTone();
    }
    forum.querySelectorAll('[data-rv-top], [data-rv-bottom]').forEach(function (button) {
      button.addEventListener('click', function () {
        window.scrollTo({
          top: button.hasAttribute('data-rv-bottom') ? document.documentElement.scrollHeight : 0,
          behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'
        });
      });
    });

    /* Закреплённое меню */
var navigation = document.getElementById('pun-navlinks');
var userLinks = document.getElementById('pun-ulinks');
var forumTitle = document.getElementById('pun-title');

if (!admin && navigation && userLinks && forumTitle) {
  var menuDock = document.createElement('div');
  menuDock.className = 'rv-menu-dock';

  forumTitle.before(menuDock);
  menuDock.appendChild(navigation);
  forumTitle.after(userLinks);

  var menuFrame = 0;

  function updateMenuPosition() {
    menuFrame = 0;

    var menuHeight = menuDock.offsetHeight;
    var subHeight = userLinks.offsetHeight;
    var joined = userLinks.getBoundingClientRect().top <= menuHeight + 1;

    menuDock.classList.toggle('is-joined', joined);

var themeButton = document.querySelector('#pun .rv-tone');

if (themeButton) {
  var themeTarget = joined ? menuDock : forumTitle;

  if (themeButton.parentElement !== themeTarget) {
    themeTarget.appendChild(themeButton);
  }
}

    document.documentElement.style.setProperty(
      '--rv-nav-height',
      (menuHeight + (joined ? subHeight : 0)) + 'px'
    );
  }

  function scheduleMenuPosition() {
    if (!menuFrame) {
      menuFrame = requestAnimationFrame(updateMenuPosition);
    }
  }

  function measureMenus() {
    document.documentElement.style.setProperty(
      '--rv-menu-height',
      menuDock.offsetHeight + 'px'
    );

    scheduleMenuPosition();
  }

  var menuObserver = new ResizeObserver(measureMenus);
  menuObserver.observe(menuDock);
  menuObserver.observe(userLinks);

  window.addEventListener('scroll', scheduleMenuPosition, {
    passive: true
  });

  window.addEventListener('resize', measureMenus);
  window.addEventListener('pageshow', measureMenus);

  measureMenus();
}

    /* Категории */
    if (!admin) forum.querySelectorAll('.category').forEach(function (category, index) {
      var heading = category.querySelector('h2');
      var container = category.querySelector('.container');
      if (!heading || !container || category.dataset.rvReady) return;
      category.dataset.rvReady = 'true';
      var compact = true;
      container.querySelectorAll('table > tbody > tr').forEach(function (row) {
        var cell = row.querySelector('td.tcl');
        var layout = cell && cell.querySelector('.intd');
        var content = cell && cell.querySelector('.tclcon');
        var name = content && content.querySelector('h3');
        var topics = row.querySelector('td.tc2');
        var posts = row.querySelector('td.tc3');
        if (!name || !topics || !posts) { compact = false; return; }
        var counts = document.createElement('p');
        counts.className = 'rv-counts';
        counts.textContent = 'Тем: ' + topics.textContent.trim() + ' · Сообщений: ' + posts.textContent.trim();
        name.after(counts);
        var links = cell.querySelector('.rv-forum-links, .podfl');
        if (links) content.appendChild(links);
        content.querySelectorAll('strong, span, em').forEach(function (label) {
          if (/^\s*\[\s*Новые сообщения\s*\]\s*$/i.test(label.textContent)) {
            label.classList.add('rv-unread-label');
            row.classList.add('inew');
          }
        });
        var state = document.createElement('i');
        state.className = 'rv-forum-state';
        state.setAttribute('role', 'img');
        state.title = row.matches('.inew, .inewclosed') ? 'Есть непрочитанные сообщения' : 'Нет непрочитанных сообщений';
        state.setAttribute('aria-label', state.title);
        name.prepend(state);
      });
      if (compact) category.classList.add('rv-compact');
      var caption = config.captions && config.captions[category.id];
      if (caption) {
        var description = document.createElement('p');
        description.className = 'rv-caption';
        description.textContent = caption;
        heading.after(description);
      }
      var fold = document.createElement('div');
      var inner = document.createElement('div');
      fold.className = 'rv-fold';
      fold.id = 'rv-fold-' + index;
      inner.className = 'rv-fold-inner';
      container.before(fold);
      fold.appendChild(inner);
      inner.appendChild(container);
      var toggle = document.createElement('button');
      toggle.type = 'button';
      toggle.className = 'rv-toggle';
      toggle.setAttribute('aria-controls', fold.id);
      var categoryName = heading.textContent.trim();
      heading.appendChild(toggle);
      var key = location.host + ':rv-contour:' + (category.id || index);
      var closed = false;
      try { closed = localStorage.getItem(key) === 'closed'; } catch (error) {}
      function updateFold() {
        fold.classList.toggle('is-closed', closed);
        fold.inert = closed;
        fold.setAttribute('aria-hidden', String(closed));
        toggle.setAttribute('aria-expanded', String(!closed));
        toggle.setAttribute('aria-label', (closed ? 'Развернуть: ' : 'Свернуть: ') + categoryName);
      }
      toggle.addEventListener('click', function () {
        closed = !closed;
        updateFold();
        try { localStorage.setItem(key, closed ? 'closed' : 'open'); } catch (error) {}
      });
      updateFold();
    });

    /* Непрочитанные сообщения */
    function updateUnread() {
      forum.querySelectorAll('.category tbody tr').forEach(function (row) {
        row.querySelectorAll('.tclcon *').forEach(function (node) {
          if (node.children.length || !/^\s*\[?\s*Новы[еxх] сообщения\s*\]?\s*$/i.test(node.textContent)) return;
          node.classList.add('rv-unread-label');
          row.classList.add('inew');
        });
        var state = row.querySelector('.rv-forum-state');
        if (state) {
          state.title = row.matches('.inew, .inewclosed') ? 'Есть непрочитанные сообщения' : 'Нет непрочитанных сообщений';
          state.setAttribute('aria-label', state.title);
        }
      });
    }
    updateUnread();

    /* Посты */
    function preparePosts() {
    forum.querySelectorAll('.post').forEach(function (post) {
      if (post.dataset.rvPostReady || !post.querySelector('.post-body')) return;
      post.dataset.rvPostReady = 'true';
      var author = post.querySelector('.post-author');
      var body = post.querySelector('.post-body');
      var header = post.querySelector(':scope > h3');
      if (header && body) {
        var original = header.textContent.trim();
        var numberLink = Array.from(header.querySelectorAll('a')).find(function (a) {
          return /^\s*[#№]?\d+\s*$/.test(a.textContent);
        });
        var numberNode = header.querySelector('.post-num, .post-number');
        var number = numberLink ? numberLink.textContent : numberNode ? numberNode.textContent : '';
        if (!number) {
          var walker = document.createTreeWalker(header, NodeFilter.SHOW_TEXT);
          while (walker.nextNode()) {
            if (/^\s*[#№]?\d+\s*$/.test(walker.currentNode.textContent)) {
              number = walker.currentNode.textContent;
              break;
            }
          }
        }
        var dateLink = Array.from(header.querySelectorAll('a')).find(function (a) {
          return a !== numberLink && /\d{1,2}:\d{2}/.test(a.textContent);
        });
        var date = document.createElement('span');
        date.className = 'rv-post-date';
        if (dateLink) date.appendChild(dateLink);
        else date.textContent = original.replace(/^\s*(?:Сообщение\s*)?[#№]?\d+\s*(?=\d{4}-|Сегодня|Вчера)/i, '').replace(/^Сообщение\s*/i, '');
        var index = document.createElement('span');
        index.className = 'rv-post-number';
        if (numberLink) { numberLink.textContent = '#' + number.replace(/\D/g, ''); index.appendChild(numberLink); }
        else if (number) index.textContent = '#' + number.replace(/\D/g, '');
        header.replaceChildren(date, index);
        header.className = 'rv-post-heading';
        body.prepend(header);
      }
      var actions = post.querySelector('.post-links');
      if (actions) {
        post.appendChild(actions);
        var firstAction = false;
        actions.querySelectorAll('a').forEach(function (a) {
          var text = a.textContent.trim();
          var match = text.match(/^(Профиль|ЛС|E-mail|Удалить|Редактировать|Цитировать|Ответить)(?=\s|$)/i);
          if (!match) return;
          a.textContent = match[1];
          a.classList.add('rv-link-label');
          if (!firstAction && /^(Удалить|Редактировать|Цитировать|Ответить)$/i.test(match[1])) {
            var item = a.closest('li');
            if (item) item.classList.add('rv-action-start');
            firstAction = true;
          }
        });
      }
      if (author) {
        author.querySelectorAll('li').forEach(function (row) {
          if (/gift|user.?agent/i.test(row.className) || /^(Подарк(?:и|ов)|User[ -]?Agent)\s*:/i.test(row.textContent.trim())) row.hidden = true;
        });
        var status = author.querySelector('.pa-online');
        var active = author.classList.contains('online') || post.classList.contains('online') || !!(status && /Активен|В сети|Онлайн/i.test(status.textContent));
        if (status && /Не в сети|Оффлайн/i.test(status.textContent)) active = false;
        if (!status) {
          status = document.createElement('li');
          status.className = 'pa-online';
          (author.querySelector('ul') || author).appendChild(status);
        }
        var nickname = author.querySelector('.pa-author');
        if (nickname) {
          var badge = document.createElement('span');
          badge.className = status.className;
          status.remove();
          status = badge;
          nickname.appendChild(status);
        }
        status.classList.add('rv-presence');
        status.classList.toggle('is-online', active);
        status.textContent = '';
        status.title = active ? 'В сети' : 'Не в сети';
        status.setAttribute('role', 'img');
        status.setAttribute('aria-label', status.title);
      }
    });

    }
    preparePosts();

    /* Навигация */
    function prepareTopicLists() {
      forum.querySelectorAll('#pun-main .forum > h2, #pun-main .topic > h2, #pun-main .searchresults > h2, #pun-main h2:has(.item2)').forEach(function (heading) {
        if (heading.closest('.category, #post-form') || heading.dataset.rvSummary) return;
        heading.dataset.rvSummary = 'true';
        heading.classList.add('rv-list-summary');
        var meta = heading.querySelector('.item2');
        if (meta) {
          meta.classList.add('rv-list-meta');
          var value = meta.textContent.replace(/\s+/g, ' ').trim();
          value = value.replace(/(\d+)\s*страниц[аы]?/i, 'Страница $1 · ');
          meta.textContent = value;
        }
        var label = heading.querySelector('.item1');
        if (label && /^Тем$/i.test(label.textContent.trim())) label.textContent = 'Темы';
      });
      forum.querySelectorAll('#pun-main tr').forEach(function (row) {
        if (row.closest('.category, .post-content, #viewprofile') || !row.querySelector('.tcl')) return;
        var cell = row.querySelector('.tcl');
        var icon = cell.querySelector('.icon');
        if (!icon) return;
        if (icon.parentElement === cell) {
          var layout = document.createElement('div');
          layout.className = 'intd';
          var content = document.createElement('div');
          content.className = 'tclcon';
          layout.appendChild(icon);
          while (cell.firstChild) content.appendChild(cell.firstChild);
          layout.appendChild(content);
          cell.appendChild(layout);
        }
        row.classList.add('rv-topic-row');
        icon.classList.add('rv-topic-icon');
        var pinned = row.matches('.isticky, .sticky, .pinned') || !!cell.querySelector('.stickytext');
        var closed = row.matches('.iclosed, .inewclosed, .closed') || !!cell.querySelector('.closedtext');
        var unread = row.matches('.inew, .inewclosed') || !!cell.querySelector('.newtext');
        icon.dataset.rvKind = pinned && closed ? 'pinned-closed' : closed ? 'closed' : pinned ? 'pinned' : 'normal';
        icon.classList.toggle('is-unread', unread);
        var label = pinned && closed ? 'Важная закрытая тема' : closed ? 'Закрытая тема' : pinned ? 'Важная тема' : 'Обычная тема';
        if (unread) label += ', есть новые сообщения';
        icon.setAttribute('role', 'img');
        icon.setAttribute('aria-label', label);
        icon.title = label;
      });
    }
    if (!admin) prepareTopicLists();
    forum.querySelectorAll('#pun-crumbs1, #pun-crumbs2').forEach(function (bar) {
      var line = bar.querySelector('p') || bar;
      var result = document.createElement('div');
      result.className = 'rv-crumb-list';
      Array.from(line.childNodes).forEach(function (node) {
        if (node.nodeType === 1 && node.tagName === 'A') {
          node.classList.add('rv-crumb');
          result.appendChild(node);
        } else {
          var value = node.textContent.replace(/Вы здесь/gi, '').replace(/[»›]/g, '').trim();
          if (!value) return;
          var current = document.createElement('span');
          current.className = 'rv-crumb';
          current.textContent = value;
          result.appendChild(current);
        }
      });
      Array.from(result.children).slice(1).forEach(function (item) {
        var separator = document.createElement('i');
        separator.className = 'rv-crumb-separator';
        separator.setAttribute('aria-hidden', 'true');
        item.before(separator);
      });
      line.replaceChildren(result);
    });
    if (/search.php/.test(location.pathname) || forum.querySelector('[id*="search"]')) {
      forum.querySelectorAll('#pun-main .container > table').forEach(function (table) { table.classList.add('rv-search-table'); });
    }
    forum.querySelectorAll('#viewprofile li, #profile-right tr').forEach(function (row) {
      var label = row.querySelector('span, th, dt');
      var text = (label || row).textContent.trim();
      if (/gift|user.?agent/i.test(row.id) || /^(Подарк(?:и|ов)|Gifts|User[ -]?Agent)(?:\s*:|$)/i.test(text)) row.hidden = true;
    });

    /* Карточка профиля */
    var profile = document.getElementById('viewprofile');
    var profileLeft = document.getElementById('profile-left');
    var profileRight = document.getElementById('profile-right');
    if (profile && profileLeft && profileRight && profile.contains(profileLeft)) {
      var profileTable = profileLeft.closest('table');
      if (profileTable && profileTable !== profile) {
        var grid = document.createElement('div');
        grid.className = 'rv-profile-grid';
        [profileLeft, profileRight].forEach(function (cell) {
          var panel = document.createElement('div');
          panel.id = cell.id;
          while (cell.firstChild) panel.appendChild(cell.firstChild);
          grid.appendChild(panel);
        });
        profileTable.replaceWith(grid);
      }
    }
    forum.querySelectorAll('#pun-adnav li').forEach(function (item) {
      var link = item.querySelector('a');
      if (!link || !/^Формы(?:\s|$)/i.test(link.textContent.trim())) return;
      item.querySelectorAll('sup, .new').forEach(function (badge) { badge.remove(); });
      var walker = document.createTreeWalker(link, NodeFilter.SHOW_TEXT);
      while (walker.nextNode()) walker.currentNode.textContent = walker.currentNode.textContent.replace(/\(?новое\)?/gi, '');
    });
    forum.querySelectorAll('#pun-admain fieldset').forEach(function (fieldset) {
      var legend = fieldset.querySelector('legend');
      if (legend && /расположение полей под аватаром/i.test(legend.textContent)) fieldset.classList.add('rv-author-fields');
    });

    /* Личные сообщения и редактирование профиля */
    var navigationPanel = document.getElementById('profilenav');
    if (navigationPanel && !profile && !navigationPanel.closest('#viewprofile') && !navigationPanel.parentElement.classList.contains('rv-account-layout')) {
      var parent = navigationPanel.parentElement;
      if (!/^(TABLE|TBODY|TR|UL)$/.test(parent.tagName)) {
        var content = document.createElement('div');
        content.className = 'rv-account-content';
        Array.from(parent.childNodes).forEach(function (node) {
          if (node !== navigationPanel) content.appendChild(node);
        });
        parent.classList.add('rv-account-layout');
        parent.appendChild(content);
      }
    }
    function prepareMessageTables() {
      forum.querySelectorAll('#pun-messages table').forEach(function (table) {
        if (table.closest('#tags, #form-buttons, .post-content, #viewprofile')) return;
        if (table.querySelector('th') && table.querySelector('td.tcl, input[type="checkbox"]')) {
          table.classList.add('rv-pm-table');
        }
      });
    }
    prepareMessageTables();

    var stats = document.querySelector('#pun-stats h2');
    if (stats) {
      var caption = document.createElement('p');
      caption.className = 'rv-stats-caption';
      caption.textContent = 'Сообщество в цифрах';
      stats.after(caption);
    }

    /* Последние сообщения */
    forum.querySelectorAll('.category td.tcr, .forum td.tcr').forEach(function (cell) {
      if (cell.querySelector('.rv-lastpost')) return;
      var layout = document.createElement('div');
      var text = document.createElement('div');
      layout.className = 'rv-lastpost';
      text.className = 'rv-lastpost-text';
      var avatar = cell.querySelector('.user-avatar');
      if (avatar) layout.appendChild(avatar);
      while (cell.firstChild) text.appendChild(cell.firstChild);
      text.querySelectorAll('.lastpost br').forEach(function (br) { br.replaceWith(document.createTextNode(' · ')); });
      text.querySelectorAll('.byuser').forEach(function (author) {
        var previous = author.previousSibling;
        while (previous && previous.nodeType === 3 && !previous.textContent.trim()) previous = previous.previousSibling;
        if (previous && previous.nodeName === 'BR') previous.replaceWith(document.createTextNode(' '));
      });
      layout.appendChild(text);
      cell.appendChild(layout);
    });

    /* Метаданные автора */
    var metrics = {
      'pa-reg': 'Зарегистрирован',
      'pa-invites': 'Приглашений',
      'pa-posts': 'Сообщений',
      'pa-respect': 'Уважение',
      'pa-positive': 'Позитив',
      'pa-reputation': 'Репутация',
      'pa-awards': 'Наград',
      'pa-time-visit': 'На форуме',
      'pa-ip': 'IP'
    };
    function prepareAuthorFields() {
      forum.querySelectorAll('.post-author li').forEach(function (row) {
        var key = Object.keys(metrics).find(function (name) { return row.classList.contains(name); });
        if (!key || row.classList.contains('rv-metric')) return;
        var label = row.querySelector('.fld-name');
        var link = !label && row.querySelector('a');
        if (!label && link && /^(Наград|Уважение|Позитив|Репутация|Приглашений)/i.test(link.textContent.trim())) label = link;
        if (!label) {
          var firstText = Array.from(row.childNodes).find(function (node) {
            return node.nodeType === 3 && node.textContent.includes(':');
          });
          label = document.createElement('span');
          if (firstText) {
            var parts = firstText.textContent.split(':');
            label.textContent = parts.shift();
            firstText.textContent = parts.join(':').trim();
            firstText.before(label);
          } else {
            label.textContent = metrics[key];
            row.prepend(label);
          }
        }
        row.classList.add('rv-metric');
        label.classList.add('rv-metric-label');
        label.title = metrics[key];
        label.setAttribute('aria-label', metrics[key]);
        row.title = metrics[key] + ': ' + row.textContent.replace(label.textContent, '').replace(/^\s*:\s*/, '').trim();
        var next = label.nextSibling;
        if (next && next.nodeType === 3) next.textContent = next.textContent.replace(/^\s*:\s*/, '');
      });
    }
    prepareAuthorFields();

    /* Цитирование и копирование */
    function prepareTextTools() {
      forum.querySelectorAll('.quote-box cite').forEach(function (cite) {
        var walker = document.createTreeWalker(cite, NodeFilter.SHOW_TEXT);
        while (walker.nextNode()) walker.currentNode.textContent = walker.currentNode.textContent.replace(/написал(?:\(а\)|а)?/gi, 'пишет');
      });
      forum.querySelectorAll('.code-box').forEach(function (box) {
        var code = box.querySelector('pre');
        if (!code || box.querySelector('.rv-copy-code')) return;
        var copy = document.createElement('button');
        copy.type = 'button';
        copy.className = 'rv-copy-code';
        copy.textContent = 'Скопировать код';
        copy.setAttribute('aria-live', 'polite');
        copy.addEventListener('click', async function () {
          try {
            if (!navigator.clipboard) throw new Error('Clipboard unavailable');
            await navigator.clipboard.writeText(code.innerText);
            copy.textContent = 'Скопировано';
          } catch (error) {
            var range = document.createRange();
            range.selectNodeContents(code);
            var selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            copy.textContent = 'Нажмите Ctrl+C / ⌘C';
          }
          setTimeout(function () { copy.textContent = 'Скопировать код'; }, 2500);
        });
        box.prepend(copy);
      });
    }
    prepareTextTools();

    /* Динамические элементы платформы */
    var updateQueued = false;
    var dynamicObserver = new MutationObserver(function (records) {
      if (!records.some(function (record) { return record.addedNodes.length; }) || updateQueued) return;
      updateQueued = true;
      requestAnimationFrame(function () {
        dynamicObserver.disconnect();
        if (!admin) prepareTopicLists();
        prepareMessageTables();
        preparePosts();
        prepareAuthorFields();
        prepareTextTools();
        updateUnread();
        updateQueued = false;
        if (!admin) dynamicObserver.observe(forum, { childList: true, subtree: true });
      });
    });

    /* Редактор */
    var tags = document.getElementById('tags');
    var toolbar = document.getElementById('form-buttons');
    if (tags && toolbar) {
      function positionPalettes() {
        var tagsRect = tags.getBoundingClientRect();
        var toolbarRect = toolbar.getBoundingClientRect();
        tags.style.setProperty('--rv-editor-top', Math.max(0, toolbarRect.bottom - tagsRect.top + 8) + 'px');
      }
      new ResizeObserver(positionPalettes).observe(toolbar);
      window.addEventListener('resize', positionPalettes);
      positionPalettes();
    }
    /* Размер текста при чтении */
    if (forum.querySelector('.post-content')) {
      var reading = document.createElement('div');
      reading.className = 'rv-reading-size';
      var label = document.createElement('label');
      label.htmlFor = 'rv-reading-range';
      label.textContent = 'Размер текста';
      var slider = document.createElement('input');
      slider.type = 'range'; slider.id = 'rv-reading-range';
      slider.min = '12'; slider.max = '24'; slider.step = '1'; slider.value = '14';
      try { var saved = Number(localStorage.getItem('rv-reading-size')); if (saved >= 12 && saved <= 24) slider.value = saved; } catch (error) {}
      var output = document.createElement('output');
      output.htmlFor = slider.id;
      var reset = document.createElement('button');
      reset.type = 'button'; reset.textContent = 'Сброс';
      function resizeText() {
        root.style.setProperty('--rv-reading-size', slider.value + 'px');
        output.textContent = slider.value + ' px';
        try { localStorage.setItem('rv-reading-size', slider.value); } catch (error) {}
      }
      slider.addEventListener('input', resizeText);
      reset.addEventListener('click', function () { slider.value = '14'; resizeText(); });
      reading.append(label, slider, output, reset);
      var main = document.getElementById('pun-main');
      if (main) main.prepend(reading);
      resizeText();
    }
    var area = document.getElementById('main-reply');
    if (area) {
      forum.querySelectorAll('[data-rv-reply]').forEach(function (bar) {
        var counter = bar.querySelector('[data-rv-count]');
        var focus = bar.querySelector('[data-rv-focus]');
        if (!counter) return;
        bar.hidden = false;
        function count() { counter.textContent = Array.from(area.value).length + ' символов'; }
        area.addEventListener('input', count);
        if (focus) focus.remove();
        count();
      });
    }

    /* Приветствие и декорации */
    if (!admin && title) {
      var status = document.getElementById('pun-status');
      if (status) {
        status.querySelectorAll('a').forEach(function (link) {
          if (/улучшить\s+(?:аккаунт|профиль)/i.test(link.textContent)) link.remove();
        });
        var statusText = document.createTreeWalker(status, NodeFilter.SHOW_TEXT);
        while (statusText.nextNode()) {
          statusText.currentNode.nodeValue = statusText.currentNode.nodeValue.replace(/(?:ваш\s+)?последний\s+визит\s*:/gi, 'Виделись:');
        }
        title.appendChild(status);
      }
      if (!title.querySelector('.rv-header-weather')) {
        var weather = document.createElement('div');
        weather.className = 'rv-header-weather';
        weather.setAttribute('aria-hidden', 'true');
        weather.innerHTML = '<span class="rv-header-weather__snow"></span><span class="rv-header-weather__steam"></span>';
        title.prepend(weather);
      }
    }
    if (!admin) dynamicObserver.observe(forum, { childList: true, subtree: true });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();
})();
</script>

<div class="rv-footer-art">
  <nav class="rv-banners">
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
<a href="https://imagiart.ru/profile.php?id=16842" target="_blank" rel="noopener noreferrer"><img src="https://forumstatic.ru/files/001c/c7/69/50124.png" width="88" height="31" loading="lazy"></a>
  </nav>

  <div class="rv-design-credit">
    <a href="https://imagiart.ru/profile.php?id=16842">
      design by <span>кешью.</span>
    </a>
  </div>
</div>


<script>
(function () {
  'use strict';
  if (window.RVEditorExtras) return;
  window.RVEditorExtras = true;
var fonts = [
  'Arial',
  'Arial Black',
  'Comic Sans MS',
  'Courier New',
  'Georgia',
  'Impact',
  'Tahoma',
  'Times New Roman',
  'Trebuchet MS',
  'Verdana',
  'Amatic SC',
  'Bellota',
  'Caveat',
  'Comforter',
  'Cuprum',
  'Great Vibes',
  'Hachi Maru Pop',
  'Libre Barcode 39 Extended',
  'Montserrat Underline',
  'Neucha',
  'Play',
  'Roboto',
  'Rubik Glitch',
  'Rubik Pixels',
  'Rubik Scribble',
  'Stalinist One',
  'Train One',
  'Yanone Kaffeesatz',
  'Yeseva One'
];

  function init() {
    var forum = document.getElementById('pun');
    if (!forum) return;

    function addButton(id, after, title, action) {
      if (document.getElementById(id)) return;
      var anchor = document.querySelector('#form-buttons #' + after);
      if (!anchor) return;
      var cell = document.createElement('td');
      cell.id = id;
      cell.title = title;
      var image = document.createElement('img');
      image.src = '/i/blank.gif';
      image.alt = title;
      image.tabIndex = 0;
      image.setAttribute('role', 'button');
      image.addEventListener('click', action);
      image.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          action();
        }
      });
      cell.appendChild(image);
      anchor.after(cell);
    }

    function changeLayout() {
      var field = document.getElementById('main-reply');
      if (!field) return;
      var start = field.selectionStart;
      var end = field.selectionEnd;
      if (start === end) return;
      var selected = field.value.slice(start, end);
      var latin = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`";
      var russian = 'йцукенгшщзхъфывапролджэячсмитьбюё';
      var from = /[а-яё]/i.test(selected) ? russian : latin;
      var to = from === russian ? latin : russian;
      var converted = Array.from(selected).map(function (letter) {
        var lower = letter.toLowerCase();
        var index = from.indexOf(lower);
        if (index < 0) return letter;
        return letter !== lower ? to[index].toUpperCase() : to[index];
      }).join('');
      field.setRangeText(converted, start, end, 'select');
      field.dispatchEvent(new Event('input', { bubbles: true }));
      field.focus();
    }

    function prepareEditor() {
      addButton('button-transL', 'button-font', 'Сменить раскладку выделенного текста', changeLayout);
      addButton('button-indent', 'button-strike', 'Абзац', function () {
        if (typeof window.insert === 'function') window.insert('[indent]');
      });
      addButton('button-justify', 'button-center', 'По ширине', function () {
        if (typeof window.bbcode === 'function') window.bbcode('[align=justify]', '[/align]');
      });

      /* Нормализация дополнительной кнопки изображения */
      var imageButtons = document.querySelectorAll('#form-buttons td[id="button-image"], #form-buttons td[id="button-image-bbcode"]');
      var custom = null;
      imageButtons.forEach(function (cell) {
        var image = cell.querySelector('img');
        var action = image ? image.getAttribute('onclick') || '' : '';
        if (cell.id !== 'button-image-bbcode' && !/bbcode\s*\(\s*['"]\[img\]/.test(action)) return;
        if (custom) { cell.remove(); return; }
        custom = cell;
        cell.id = 'button-image-bbcode';
        cell.title = 'Изображение по ссылке';
        cell.querySelectorAll('b, p').forEach(function (badge) { badge.remove(); });
      });

      addButton('button-image-bbcode', 'button-image', 'Вставить тег изображения', function () {
        if (typeof window.bbcode === 'function') window.bbcode('[img]', '[/img]');
      });

var area = document.getElementById('font-area');
if (!area) return;

if (area.dataset.rvUnifiedFonts !== 'true') {
  area.dataset.rvUnifiedFonts = 'true';
  area.replaceChildren();
}

fonts.forEach(function (font) {
        if (Array.from(area.querySelectorAll('[data-rv-font]')).some(function (item) { return item.dataset.rvFont === font; })) return;
        var button = document.createElement('button');
        button.type = 'button';
        button.className = 'rv-font-option';
        button.dataset.rvFont = font;
        button.style.fontFamily = '"' + font + '"';
        button.textContent = font;
        area.appendChild(button);
      });
    }

    /* Выбор шрифта */
forum.addEventListener('mousedown', function (event) {
  if (!(event.target instanceof Element)) return;

  if (event.target.closest('#font-area [data-rv-font]')) {
    event.preventDefault();
  }
});

forum.addEventListener('click', function (event) {
  if (!(event.target instanceof Element)) return;

  var option = event.target.closest('#font-area [data-rv-font]');
  if (!option || typeof window.bbcode !== 'function') return;

  event.preventDefault();
  event.stopImmediatePropagation();

  window.bbcode(
    '[font=' + option.dataset.rvFont + ']',
    '[/font]'
  );

  option.closest('#font-area').style.display = 'none';
}, true);

    /* Обработка текста без пересоздания содержимого сообщений */
    function preparePosts() {
      forum.querySelectorAll('.post-content').forEach(function (content) {
        var walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
        var nodes = [];
        while (walker.nextNode()) nodes.push(walker.currentNode);
        nodes.forEach(function (node) {
          if (!node.parentElement || node.parentElement.closest('pre, code, .code-box, script, style, textarea')) return;
          var value = node.nodeValue.replace(/[-–]\s/g, '— ');
          if (value.indexOf('[indent]') < 0) {
            if (value !== node.nodeValue) node.nodeValue = value;
            return;
          }
          var fragment = document.createDocumentFragment();
          value.split('[indent]').forEach(function (part, index) {
            if (index) {
              var indent = document.createElement('span');
              indent.className = 'rv-text-indent';
              fragment.appendChild(indent);
            }
            fragment.appendChild(document.createTextNode(part));
          });
          node.replaceWith(fragment);
        });
        content.querySelectorAll('p').forEach(function (p) {
          while (p.firstChild && p.firstChild.nodeName === 'BR') p.firstChild.remove();
          if (!p.childNodes.length) p.remove();
        });
      });
      forum.querySelectorAll('#pun-viewtopic li.pa-respect span:last-child').forEach(function (item) {
        Array.from(item.childNodes).forEach(function (node) {
          if (node.nodeType === 3 && /^\s*\+/.test(node.nodeValue)) node.nodeValue = node.nodeValue.replace('+', '');
        });
      });
    }

    window.to = function (username) {
      if (typeof window.insert === 'function') window.insert('[b]' + username + '[/b], ');
    };
    if (window.FORUM && typeof FORUM.set === 'function') {
      FORUM.set('editor.link.short_url', function () { return false; });
    }

    prepareEditor();
    preparePosts();
    var queued = false;
    var observer = new MutationObserver(function (records) {
      if (queued || !records.some(function (r) { return r.addedNodes.length || r.removedNodes.length; })) return;
      queued = true;
      requestAnimationFrame(function () {
        observer.disconnect();
        prepareEditor();
        preparePosts();
        queued = false;
        observer.observe(forum, { childList: true, subtree: true });
      });
    });
    observer.observe(forum, { childList: true, subtree: true });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();
})();
</script>

<script>
(function () {
  'use strict';

  function hideProfiles() {
    document.querySelectorAll('#pun .post-content').forEach(function (content) {
      var post = content.closest('.post');
      var walker = document.createTreeWalker(
        content,
        NodeFilter.SHOW_TEXT
      );
      var matches = [];
      var node;

      while ((node = walker.nextNode())) {
        if (node.parentElement.closest(
          '.quote-box, .code-box, pre, code, textarea, script, style'
        )) {
          continue;
        }

        if (/\[hideprofile\]/i.test(node.nodeValue)) {
          matches.push(node);
        }
      }

      if (!post || !matches.length) return;

      post.classList.add('hideprofile');

      matches.forEach(function (textNode) {
        textNode.nodeValue = textNode.nodeValue.replace(
          /\[hideprofile\]/gi,
          ''
        );
      });
    });

    if (window.FORUM && typeof window.FORUM.set === 'function') {
      window.FORUM.set('editor.addition.tags.hideprofile', {
        name: 'Скрыть минипрофиль',
        onclick: function () {
          insert('[hideprofile]');
        }
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', hideProfiles, {
      once: true
    });
  } else {
    hideProfiles();
  }
})();
</script>
хтмл в форме ответа
Код:
<div class="rv-reply-tools" data-rv-reply hidden>
  <span data-rv-count>0 символов</span>
</div>

0

3

Цвета style_cs.css
Код:
#pun :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 3px;
}

#pun :is(h1, h2, h3, h4),
#pun .category h3 a,
#pun .quote-box:not(.spoiler-box) blockquote,
#pun :is(.quote-box:not(.spoiler-box) cite, .code-box strong) {
  color: var(--rv-text);
}

#pun img,
#pun .category :is(table, tbody, tr, td) {
  border: 0px;
}

#pun #pun-title a,
#pun :is(#pun-navlinks, #pun-ulinks) a:hover,
#pun #pun-ulinks a {
  color: var(--rv-on-dark);
}

#pun #pun-crumbs2,
#pun .post-links,
#pun #pun-stats #onlinelist,
#pun #pun-stats :is(#onlinelist2, .rv-visitors) {
  border-top: 1px solid var(--rv-line);
}

#pun :where(.main, #messages) .container > table > tbody > tr:hover,
#pun #pun-adnav a:hover,
#pun .category tr:hover,
#pun .category tr:focus-within,
#pun .spoiler-box > div,
#pun #pun-stats li:not(#onlinelist):not(#onlinelist2):not(.rv-visitors) {
  background: var(--rv-accent-soft);
}

#pun :is(.inew, .inewclosed) .icon {
  border-color: var(--rv-accent);
  background: var(--rv-accent);
}

#pun .iclosed .icon {
  border-radius: 1px;
}

#pun .pagelink strong,
#pun #profilenav .isactive > a,
#pun #pun-adnav .isactive > a {
  background: var(--rv-dark);
  color: var(--rv-on-dark);
}

#pun .category tr:last-child td,
#pun #pun-admain .adfs-box > p:last-child {
  border-bottom: 0px;
}

#pun .post-content td,
#pun .spoiler-box {
  border: 1px solid var(--rv-line);
}

#pun .post-content .highlight-text {
  background: var(--rv-accent-soft);
  color: var(--rv-text);
}

#pun legend span {
  background: var(--rv-panel);
  color: var(--rv-link);
}

#pun :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--rv-accent);
}

#pun :is(input[type="submit"], input[type="button"], button.rv-button):hover,
#pun #tags #table-area td.selected {
  background: var(--rv-accent);
}

#pun #tags .container {
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-raised);
  color: var(--rv-text);
  box-shadow: 0 8px 24px var(--rv-shadow);
}

#pun #form-buttons td[id^="button-"]:hover {
  background-color: var(--rv-accent-soft);
  color: var(--rv-link);
}

#pun .rv-icon-button:hover,
#pun .rv-copy-code:hover,
#pun .rv-reading-size button:hover,
#pun ::selection {
  background: var(--rv-accent);
  color: var(--rv-dark);
}

#pun .category tr > td,
#pun #pun-adnav,
#pun #pun-admain :is(.adfs-box, .adlabel, .adinput, .adsubmitfield, .adsubmit),
#pun .post-author ul {
  background: var(--rv-clear);
}

.jGrowl .jGrowl-message,
.jGrowl .jGrowl-header {
  color: var(--rv-text) !important;
}

.jGrowl .jGrowl-message a {
  color: var(--rv-link) !important;
}

#pun #tags #table-area td {
  background: var(--rv-panel);
  border: 1px solid var(--rv-line) !important;
}

.jGrowl .jGrowl-message :is(a, button, input) {
  border-color: var(--rv-line);
  background: var(--rv-clear) !important;
  color: var(--rv-link) !important;
  text-shadow: none !important;
}

#pun .forum tr:is(.inew, .inewclosed) .icon {
  background: var(--rv-clear);
  color: var(--rv-link);
}

#pun tr.inew .rv-forum-state,
#pun tr.inewclosed .rv-forum-state {
  color: var(--rv-text);
  opacity: 1;
}

#pun #pun-navlinks {
  background: none;
  border: 0px;
  box-shadow: none;
}

#pun #pun-navlinks a:hover,
#pun #pun-navlinks a:focus-visible,
#pun #pun-ulinks a:hover,
#pun #pun-title #pun-status a:hover {
  color: var(--rv-accent);
}

#pun #pun-title #pun-status a {
  color: inherit;
}

#pun .rv-menu-dock.is-joined,
#pun .rv-menu-dock.is-joined #pun-navlinks::before,
#pun:has(#pun-admain) #pun-navlinks::before {
  background: var(--rv-bg);
}

#pun .category:has(tr:is(.inew, .inewclosed)),
#pun .post-author:hover .pa-ip,
#pun .post-author:focus-within .pa-ip,
#pun .rv-fold,
#pun .category {
  opacity: 1;
}

#pun .category:has(tr:is(.inew, .inewclosed)) .container::before {
  background-color: var(--rv-category-art-active);
  opacity: 1;
  filter: none;
}

#pun .category:has(tr:is(.inew, .inewclosed)) .container {
  box-shadow: none;
  background-color: var(--rv-raised);
}

#pun .post-author .pa-author a {
  color: var(--rv-author-ink);
}

#pun .post-author .pa-author a:hover,
#pun a:hover,
#pun a:focus-visible {
  color: var(--rv-hover);
}

body {
  background-color: var(--rv-bg);
  background-image: linear-gradient(180deg, var(--rv-bg), var(--rv-bg-bottom));
  color: var(--rv-text);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

#pun hr {
  border: 0px;
  background: var(--rv-line);
}

#pun #pun-title :is(table, tbody, tr, td),
#pun #pun-adnav :is(.adcontainer, #adnav-standard),
#pun #pun-admain .adcontainer {
  border: 0px;
  background: var(--rv-clear);
}

#pun :is(#pun-navlinks, #pun-ulinks) {
  background: var(--rv-dark);
}

#pun :is(#pun-status, #pun-crumbs1, #pun-crumbs2),
#pun th,
#pun :is(.byuser, .lastpost),
#pun .category :is(.tc2, .tc3),
#pun .rv-counts,
#pun .post-author :is(.pa-reg, .pa-posts, .pa-respect, .pa-positive, .pa-last-visit),
#pun .post-links a,
#pun :is(.post-edit, .lastedit),
#pun #profile-right li > span,
#pun .rv-reply-tools,
#pun #pun-adnav .adsubnav a,
#pun .rv-presence,
#pun .rv-presence::before,
#pun .rv-results-meta,
#pun .rv-results-heading .item2,
#pun .post-author .pa-title,
#pun .post-author :is(.pa-reg, .pa-registered, .pa-time-visit, .pa-ip),
#pun #pun-viewtopic #pun-main > h1::before,
#pun .rv-list-summary .rv-list-meta {
  color: var(--rv-muted);
}

#pun #pun-announcement {
  background: var(--rv-panel);
  border-left: 3px solid var(--rv-accent);
}

#pun table {
  border-collapse: collapse;
}

#pun :is(th, td),
#pun #profile-right li,
#pun #pun-admain .adfs-box > p {
  border-bottom: 1px solid var(--rv-line);
}

#pun :where(.main, #messages) .container > table,
#pun #messages .container {
  background: var(--rv-panel);
}

#pun :is(.user-avatar img, .avatar-image) {
  background-size: cover;
  background-position: center center;
  border-radius: var(--rv-radius);
}

#pun :where(.main, #messages) .icon {
  border: 1px solid var(--rv-muted);
  border-radius: 50%;
}

#pun .pagelink :is(a, strong),
#pun :is(.rv-forum-links, .podfl) a {
  border-radius: 6px;
}

#pun :is(.postlink, .subscribelink) a,
#pun #form-buttons {
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-raised);
}

#pun .category > .container,
#pun .category .rv-fold-inner > .container {
  border-top: 0px;
  background-color: var(--rv-panel);
  border-radius: 0 0 var(--rv-radius) var(--rv-radius);
}

#pun :is(.podfl, .rv-forum-links) a,
#pun #pun-adnav li > sup {
  border-radius: 3px;
  background: var(--rv-accent-soft);
  color: var(--rv-link);
}

#pun .isonline {
  border-radius: 50%;
  background: var(--rv-online);
}

#pun .rv-toggle {
  border: 1px solid var(--rv-line);
  border-radius: 50%;
  background: var(--rv-clear);
  color: var(--rv-accent);
}

#pun .rv-toggle::before {
  border-right: 2px solid var(--rv-accent);
  border-bottom: 2px solid var(--rv-accent);
}

#pun .rv-fold.is-closed,
#pun #form-buttons td[id^="button-"] img {
  opacity: 0;
}

#pun .post > h3,
#pun .rv-post-heading {
  border-bottom: 1px solid var(--rv-line);
  color: var(--rv-muted);
}

#pun .post-author .pa-online,
#pun .rv-presence.is-online::before {
  color: var(--rv-online);
}

#pun .spoiler-box > div::before,
#pun legend,
#pun a,
#pun .rv-topic-row .rv-topic-icon[data-rv-kind="pinned"]::before,
#pun .rv-topic-row .rv-topic-icon.is-unread::after {
  color: var(--rv-link);
}

#pun #viewprofile,
#pun #pun-stats {
  background: var(--rv-clear);
  border: 0px;
}

#pun #profile-left,
#pun #profile-right {
  background: var(--rv-panel);
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
}

#pun #profile-left img {
  border-radius: 3px;
}

#pun #profilenav a {
  border-radius: var(--rv-radius);
}

#pun fieldset,
#pun #pun-admain fieldset {
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-panel);
}

#pun :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], select, textarea) {
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-raised);
  color: var(--rv-text);
}

#pun :is(input[type="submit"], input[type="button"], input[type="reset"], button.rv-button) {
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-dark);
  color: var(--rv-on-dark);
}

#pun :is(input, button):disabled,
#pun #pun-main:has(.forum) > h1::before,
#pun #pun-main > h1::before,
#pun #pun-main .formal > h2::before,
#pun #post-form > h2::before,
#pun #pun-userlist h1::before {
  opacity: 0.5;
}

#pun #pun-admain {
  background: var(--rv-paper);
}

#pun #pun-adnav a {
  border: 0px;
  border-radius: var(--rv-radius);
  color: var(--rv-link);
}

#pun #pun-admain :is(.adformal, .adsection, .adinfo) > h2,
#pun #pun-adnav > h2 {
  border: 0px;
  background: var(--rv-dark);
  color: var(--rv-on-dark);
}

#pun #form-buttons td[id^="button-"] {
  border: 0px;
  border-radius: var(--rv-radius);
  background: var(--rv-clear);
  color: var(--rv-muted);
}

#pun .rv-footer-brand {
  color: var(--rv-on-dark-muted);
}

#pun .rv-icon-button {
  border: 1px solid var(--rv-accent);
  border-radius: 50%;
  background: var(--rv-dark);
  color: var(--rv-accent);
}

#pun .rv-forum-state {
  color: var(--rv-muted);
  opacity: 0.8;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
  border-left: 3px solid var(--rv-accent);
  border-radius: var(--rv-radius);
  box-shadow: 0 8px 24px var(--rv-shadow);
  opacity: 1;
  background: var(--rv-raised) !important;
  color: var(--rv-text) !important;
}

.jGrowl .jGrowl-close,
#pun .forum .icon {
  background: var(--rv-clear);
  color: var(--rv-muted);
  border: 0px;
}

#pun .post-sig::before {
  background: linear-gradient(90deg, var(--rv-clear), var(--rv-muted), var(--rv-clear));
}

#pun #tags :is(#color-area, #table-area) table {
  border-collapse: separate;
  border-spacing: 4px;
}

#pun #tags :is(#color-area, #table-area) td {
  border-radius: 4px;
}

#pun #keyboard-span input {
  border-radius: 5px;
}

#pun .rv-crumb {
  background: var(--rv-accent-soft);
  color: var(--rv-link);
  border: 1px solid var(--rv-line);
  border-radius: 7px;
}

#pun .rv-crumb::after,
#pun :is(.rv-forum-links, .podfl) a::after {
  background: linear-gradient(90deg, var(--rv-clear), var(--rv-shine), var(--rv-clear));
}

#pun #pun-crumbs2 .rv-crumb {
  opacity: 0.7;
}

#pun #pun-admain .rv-author-fields .adfs-box > p {
  border-bottom: 1px solid var(--rv-line);
  background-image: none !important;
}

#pun .rv-reading-size input {
  accent-color: var(--rv-accent);
  background: var(--rv-clear);
  border: 0px;
}

#pun .rv-copy-code,
#pun .rv-reading-size button {
  background: var(--rv-accent-soft);
  color: var(--rv-link);
  border: 1px solid var(--rv-line);
  border-radius: 6px;
}

#pun .rv-crumb-separator {
  color: var(--rv-muted);
  opacity: 0.6;
}

.rv-fireflies i {
  background: var(--rv-firefly);
  border-radius: 50%;
  opacity: 0;
}

#pun #pun-stats > :is(.container, .statscon) {
  background: var(--rv-panel);
  border-radius: 0 0 var(--rv-radius) var(--rv-radius);
}

#pun #pun-main:has(.rv-search-table) > h1,
#pun #pun-main:has(.forum) > h1,
#pun #pun-main > h1,
#pun #post-form > h2,
#pun #pun-main .formal > h2,
#pun #pun-viewtopic #pun-main > h1 {
  border: 0px;
  border-radius: 0px;
  background: none;
  box-shadow: none;
  color: var(--rv-text);
}

#pun #pun-main:has(.forum) > h1::after,
#pun #post-form > h2::after,
#pun #pun-main > h1::after,
#pun #pun-main .formal > h2::after,
#pun #pun-userlist h1::after {
  background: var(--rv-line);
}

#pun :is(#post-form, #pun-post .formal, #pun-edit .formal) legend {
  background: none;
  color: var(--rv-muted);
}

#pun #pun-main > h1 > span,
#pun #post-form > h2 > span,
#pun #pun-main .formal > h2 > span,
#pun #pun-main fieldset > legend > span,
#pun #pun-admain fieldset > legend > span {
  background: none;
  color: inherit;
}

#pun #pun-main fieldset > legend {
  border: 0px;
  background: none;
  color: var(--rv-muted);
}

#pun #pun-userlist h1 {
  border: 0px;
  background: none;
  box-shadow: none;
  color: var(--rv-text);
}

#pun #html-footer {
  border-radius: 0 0 var(--rv-banner-radius) var(--rv-banner-radius);
  background-color: var(--rv-dark);
  color: var(--rv-on-dark);
}

#pun #html-footer .rv-footer-art {
  background-image: var(--rv-image-footer);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0 0 var(--rv-banner-radius) var(--rv-banner-radius);
}

#pun #pun-navlinks a {
  background: none;
  color: var(--rv-bookmark-text);
}

#pun .rv-menu-dock #pun-navlinks a,
#pun .rv-menu-dock,
#pun .rv-menu-dock #pun-navlinks {
  background: none;
}

#pun #pun-ulinks {
  box-shadow: none;
  border: 0;
  background: var(--rv-menu-glass);
}

#pun #pun-title {
  background-color: var(--rv-dark);
  background-image: var(--rv-image-header-top);
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--rv-on-dark);
  border-radius: var(--rv-banner-radius) var(--rv-banner-radius) 0 0;
  background-position: center center;
}

#pun .rv-menu-dock #pun-navlinks::before,
#pun .punbb > #pun-navlinks::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: none;
  border-radius: 0 0 16px 16px;
  background: var(--rv-menu-glass);
  pointer-events: none;
}

#pun #pun-title #pun-status {
  border: 0px;
  background: var(--rv-brand-bg);
  color: var(--rv-on-dark);
  border-radius: 4px 0px 0px 4px;
}

#pun .category > h2,
#pun #pun-stats > h2 {
  color: var(--rv-text);
  -webkit-text-stroke: 0px;
}

#pun .rv-caption,
#pun .rv-stats-caption {
  background: var(--rv-caption);
  color: var(--rv-on-dark);
}

#pun .category .container::before {
  background-color: var(--rv-category-art);
  background-image: var(--rv-image-category);
  opacity: 0.8;
  background-repeat: repeat-y;
  filter: none;
  background-position: center top;
  background-size: 100% 256px;
}

#pun .post {
  border: 1px solid var(--rv-line);
  background-color: var(--rv-panel);
}

#pun .post-author {
  border: 1px solid var(--rv-author-border);
  border-radius: 14px;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--rv-author-top) 20%, var(--rv-clear)),
      var(--rv-author-top) 240px
    ),
    var(--rv-author-art) center top / 100% auto no-repeat;
  background-color: var(--rv-author-top);
  box-shadow:
    inset 0 0 0 4px var(--rv-panel),
    0 4px 14px var(--rv-author-shadow);
}

#pun .post-author .pa-avatar img {
  border-radius: 9px;
  box-shadow:
    0 0 0 3px var(--rv-raised),
    0 0 0 4px var(--rv-author-border),
    0 5px 12px var(--rv-author-shadow);
}

#pun .post-author .pa-fld1 {
  border: 0;
  background:
    linear-gradient(
      90deg,
      var(--rv-clear),
      var(--rv-author-border),
      var(--rv-clear)
    ) bottom center / 76% 1px no-repeat;
}

#pun :is(.quote-box:not(.spoiler-box), .code-box) {
  background: var(--rv-raised);
  border: 1px solid var(--rv-line);
  border-radius: 8px;
}

#pun .quote-box:not(.spoiler-box) {
  background: linear-gradient(
    125deg,
    var(--rv-quote-start),
    var(--rv-quote-end)
  );
  border: 1px solid var(--rv-line);
  border-left: 4px solid var(--rv-post-link);
}

#pun .quote-box:not(.spoiler-box) .quote-box:not(.spoiler-box) {
  background: var(--rv-panel);
  border: 0;
  border-left: 3px solid var(--rv-accent);
}

#pun .quote-box:not(.spoiler-box)::before {
  opacity: 0.55;
  color: var(--rv-muted);
}

#pun .post-sig {
  border-top: 0px;
  color: var(--rv-muted);
}

#pun #pun-navlinks :is(.notify-bubble, #navpm .unreads, #notify-link .unreads) {
  border-radius: 5px;
  border: 0px !important;
  background: var(--rv-accent) !important;
  color: var(--rv-dark) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#pun .post-author .pa-ip {
  opacity: 0.6;
}

#pun_wrap,
#pun > .punbb {
  border-radius: var(--rv-banner-radius);
}

#pun {
  background-color: var(--rv-paper);
  box-shadow: 0 18px 56px var(--rv-shadow);
  color: var(--rv-text);
  border-radius: var(--rv-banner-radius);
}

#pun #pun-title h1 :is(a, span) {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

#pun #pun-viewtopic #pun-main > h1::after {
  background: linear-gradient(
    90deg,
    var(--rv-line),
    var(--rv-clear)
  );
}

#pun #pun-navlinks #navpm .num_msg {
  border: 0px;
  border-radius: 5px;
  box-shadow: none;
  text-shadow: none;
  background: var(--rv-counter-bg) !important;
  color: var(--rv-counter-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  #pun #pun-title h1 {
    text-shadow: none;
  }
}

#pun #pun-title h1 {
  opacity: 1;
  color: var(--rv-on-dark);
  -webkit-text-fill-color: var(--rv-on-dark);
  background: none !important;
}

#pun #pun-title h1::before {
  background: linear-gradient(
    90deg,
    var(--rv-brand-bg) 0,
    var(--rv-brand-bg) calc(100% - var(--rv-brand-fade)),
    var(--rv-clear) 100%
  );
  opacity: 1;
}

#pun-title > .rv-header-weather {
  border-radius: inherit;
}

.rv-header-weather__snow::before {
  background-image: radial-gradient(
    circle,
    var(--rv-snow-color) 0 1.5px,
    var(--rv-effect-clear) 2.5px
  ),
  radial-gradient(
    circle,
    var(--rv-snow-color) 0 2.5px,
    var(--rv-effect-clear) 3.5px
  ),
  radial-gradient(
    circle,
    var(--rv-snow-color) 0 1px,
    var(--rv-effect-clear) 2px
  );
  background-size: 173px 113px, 281px 157px, 359px 191px;
  background-position: 17px 9px, 93px 61px, 211px 37px;
  opacity: 0;
}

.rv-header-weather__steam::before,
.rv-header-weather__steam::after {
  background: var(--rv-steam-color);
  filter: blur(3px);
  opacity: 0;
}

#pun .post-author .rv-metric-label::before {
  color: var(--rv-author-accent);
}

#pun #pun-admain fieldset > legend {
  background: none;
  color: var(--rv-text);
}

#pun .rv-topic-row .rv-topic-icon {
  border: 0px;
  background: none;
  color: var(--rv-muted);
}

#pun .rv-topic-row .rv-topic-icon[data-rv-kind="pinned-closed"] {
  border-bottom: 2px solid var(--rv-accent);
}

#pun .rv-list-summary {
  color: var(--rv-text);
  background: none;
  border: 0px;
}

#pun .post-rating,
#pun .post-rating .container {
  background: var(--rv-clear);
  border: 0;
  box-shadow: none;
  color: var(--rv-muted);
}

#pun :is(.post-rating, .post-vote) a {
  background: var(--rv-panel);
  border: 1px solid var(--rv-line);
  border-radius: 7px;
  color: var(--rv-link);
}

#pun :is(.post-rating, .post-vote) a:hover {
  background: var(--rv-accent-soft);
  color: var(--rv-text);
}

#pun .rv-forum-state::after {
  color: var(--rv-snowflake-back);
  opacity: 0.22;
}

#pun .rv-menu-dock.is-joined ~ #pun-ulinks {
  background: var(--rv-bg);
}

#pun #font-area .rv-font-option {
  background: var(--rv-clear);
  color: var(--rv-text);
}

#pun #font-area .rv-font-option:is(:hover, :focus-visible) {
  background: var(--rv-accent-soft);
  color: var(--rv-hover);
}

#pun .rv-design-credit a {
  color: var(--rv-muted);
  background: color-mix(in srgb, var(--rv-panel) 25%, var(--rv-clear));
  border: 1px solid var(--rv-line);
}

#pun .rv-design-credit a:is(:hover, :focus-visible) {
  color: var(--rv-post-link);
  background: color-mix(in srgb, var(--rv-panel) 55%, var(--rv-clear));
}

#pun .rv-design-credit a:hover,
#pun .rv-design-credit a:focus-visible {
  color: var(--rv-post-link);
  background-color: var(--rv-raised);
}

#pun .rv-banners {
  background: color-mix(
    in srgb,
    var(--rv-panel) 25%,
    var(--rv-clear)
  );
  border: 1px solid var(--rv-line);
  scrollbar-color: var(--rv-accent) var(--rv-clear);
}

#pun .rv-banners a {
  opacity: 0.45;
  filter: grayscale(0.85);
}

#pun .rv-banners a:is(:hover, :focus-visible) {
  opacity: 1;
  filter: grayscale(0);
}

0

4

Структура style.css
Код:
@import url("style_cs.css");

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&family=Golos+Text:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Kristi&family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&family=Bellota&family=Caveat&family=Comforter&family=Cuprum&family=Great+Vibes&family=Hachi+Maru+Pop&family=Libre+Barcode+39+Extended&family=Montserrat+Underline&family=Neucha&family=Play&family=Roboto&family=Rubik+Glitch&family=Rubik+Pixels&family=Rubik+Scribble&family=Stalinist+One&family=Train+One&family=Yanone+Kaffeesatz&family=Yeseva+One&display=swap");

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/solid.min.css");

/* design by кешью. */

:root {
  --rv-brand-highlight: #ffffff;
  --rv-category-font: "Cormorant Garamond", Georgia, serif;
  --rv-category-size: 38px;
  --rv-category-sink: 7px;
  --rv-banner-radius: 12px;
  --rv-bookmark-text: var(--rv-on-dark);
  --rv-brand-bg: color-mix(in srgb, var(--rv-bg) 78%, var(--rv-clear));
  --rv-clear: transparent;
  --rv-dark: #343436;
  --rv-menu-glass: color-mix(in srgb, var(--rv-bg) 88%, var(--rv-clear));
  --rv-shine: #ffffff38;
  --rv-author: 206px;
  --rv-brand-fade: 70px;
  --rv-button-icon: "\f141";
  --rv-ease: cubic-bezier(.22, .61, .36, 1);
  --rv-editor-top: 48px;
  --rv-gap: 24px;
  --rv-menu-height: 50px;
  --rv-nav-height: 72px;
  --rv-radius: 12px;
  --rv-sidebar: 204px;
  --rv-width: 1120px;
  --rv-brand-font: "Kristi", cursive;
  --rv-brand-size: 68px;
  --rv-brand-strip-height: 46px;
  --rv-font: "Golos Text", Arial, sans-serif;
  --rv-forum-font: "Golos Text", Arial, sans-serif;
  --rv-icon-font: "Font Awesome 6 Free";
  --rv-mono: "IBM Plex Mono", Consolas, monospace;
  --rv-nick: "Literata", Georgia, serif;
  --rv-reading-size: 14px;
  --rv-title: "Literata", Georgia, serif;
  --rv-snow-color: #ffffff;
  --rv-effect-clear: #ffffff00;
  --rv-steam-left: 80%;
  --rv-steam-top: 51%;
  --rv-steam-width: 110px;
  --rv-steam-height: 140px;
  --rv-steam-color: #ffffffd9;
  --rv-accent: #858589;
  --rv-accent-soft: #88888c14;
  --rv-bg: #353334;
  --rv-bg-bottom: #414041;
  --rv-caption: #505054;
  --rv-category-art: #d9d9dc;
  --rv-category-art-active: #e5e5e7;
  --rv-firefly: #eeeeef;
  --rv-hover: #303034;
  --rv-line: #36363c24;
  --rv-link: #606066;
  --rv-muted: #6b6b70;
  --rv-on-dark: #f7f7f5;
  --rv-on-dark-muted: #ceced2;
  --rv-online: #696971;
  --rv-panel: #f5f5f3;
  --rv-paper: #e9e9e8;
  --rv-quote-end: #ededee;
  --rv-quote-start: #fafaf8;
  --rv-raised: #fcfcfa;
  --rv-text: #343436;
  --rv-shadow: #20202418;
  --rv-night-accent: #bcbcc4;
  --rv-night-accent-soft: #bcbcc414;
  --rv-night-line: #eeeeef22;
  --rv-night-link: #d0d0d6;
  --rv-night-muted: #b0b0b8;
  --rv-night-online: #c0c0c8;
  --rv-night-panel: #38383d;
  --rv-night-paper: #2e2e32;
  --rv-night-raised: #424248;
  --rv-night-text: #eeeeef;
  --rv-author-top: #fafaf8;
  --rv-author-bottom: #e2e2e5;
  --rv-author-border: #c6c6cc;
  --rv-author-accent: #74747c;
  --rv-author-ink: #3e3e45;
  --rv-author-shadow: #30303812;
  --rv-counter-bg: #dedee2;
  --rv-counter-text: #44444b;
  --rv-footer-height: 120px;
  --rv-header-height: 300px;
  --rv-category-art-width: 64px;
  --rv-image-author: linear-gradient(155deg, var(--rv-author-top), var(--rv-author-bottom));
  --rv-steam-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath d='M50 154 C12 128 16 105 50 82 C86 58 86 34 50 6' fill='none' stroke='white' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
--rv-snowflake-back: #777780;
--rv-submenu-overlap: 24px;
--rv-post-link: #79566d;
--rv-post-link-hover: #54384b;
--rv-post-link-bg: #79566d12;

--rv-image-header-top: url("https://forumstatic.ru/files/001c/c7/69/49922.png?v=1");
  --rv-image-footer: url("https://forumstatic.ru/files/001c/c7/69/69364.png?v=1");
  --rv-image-category: url("https://forumstatic.ru/files/001c/c7/69/17888.png");
--rv-author-art: url("https://forumstatic.ru/files/001c/c7/69/46159.png");
}

:root[data-rv-tone="dark"] {
  --rv-accent: var(--rv-night-accent);
  --rv-accent-soft: var(--rv-night-accent-soft);
  --rv-hover: var(--rv-night-accent);
  --rv-line: var(--rv-night-line);
  --rv-link: var(--rv-night-link);
  --rv-muted: var(--rv-night-muted);
  --rv-online: var(--rv-night-online);
  --rv-panel: var(--rv-night-panel);
  --rv-paper: var(--rv-night-paper);
  --rv-quote-end: var(--rv-night-panel);
  --rv-quote-start: var(--rv-night-raised);
  --rv-raised: var(--rv-night-raised);
  --rv-text: var(--rv-night-text);
  --rv-category-art: #3c3c42;
  --rv-category-art-active: #4b4b52;
  --rv-caption: #26262b;
  --rv-author-top: #48484f;
  --rv-author-bottom: #36363c;
  --rv-author-border: #606069;
  --rv-author-accent: #bbbbc5;
  --rv-author-ink: #eeeeef;
  --rv-counter-bg: #bdbdc7;
  --rv-counter-text: #303036;
  --rv-steam-top: 44%;
--rv-snowflake-back: #d5d5dd;
--rv-post-link: #d7b8cc;
--rv-post-link-hover: #f0dce8;
--rv-post-link-bg: #d7b8cc14;

  --rv-image-header-top: url("https://forumstatic.ru/files/001c/c7/69/83329.png");
  --rv-image-footer: url("https://forumstatic.ru/files/001c/c7/69/70256.png");
  --rv-image-category: url("https://forumstatic.ru/files/001c/c7/69/55802.png");
}

/* Основа */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rv-nav-height, 72px) + 12px);
}

body {
  margin: 0px;
  padding: 28px 16px 48px;
  font: 13px/1.6 var(--rv-font);
  overflow-wrap: break-word;
  min-height: 100vh;
}

#pun *,
#pun ::before,
#pun ::after {
  box-sizing: border-box;
}

#pun .punbb,
#pun .container,
#pun .category :is(.intd, .tclcon),
#pun #messages,
#pun :is(.inform, .fs-box, .adfs-box) {
  min-width: 0px;
}

#pun :is(h1, h2, h3, h4, p, ul, ol, dl, blockquote),
#pun .rv-account-content fieldset:first-child {
  margin-top: 0px;
}

#pun h1 {
  margin-bottom: 16px;
  font: 500 20px/1.4 var(--rv-title);
}

#pun h2 {
  font: 600 16px/1.4 var(--rv-title);
}

#pun h3 {
  font-size: 15px;
  line-height: 1.4;
}

#pun :is(img, video) {
  max-width: 100%;
  height: auto;
}

#pun abbr,
#pun :is(#pun-navlinks, #pun-ulinks) a:hover,
#pun .post-content a {
  text-decoration: none;
}

#pun hr {
  height: 1px;
  margin: 20px 0px;
}

#pun .clearer {
  clear: both;
  height: 0px;
  overflow: hidden;
}

#pun .hidden,
#pun [hidden],
#pun-live-rusff,
#pun .sharelink,
.post-share-tip,
#pun .pl-share,
#pun #button-smile,
#pun #smilies-area,
#pun #smilies,
#pun .modmenu a[href*="export.php"][href*="type=rss"],
#pun .modmenu a[href*="export.php"][href*="type=atom"],
#pun .modmenu span:has(> a[href*="export.php"]):not(:has(select, input, button)),
#pun .post h3 .item,
#pun .post h3 .item-num,
#pun .post h3 .post-title,
#pun .post-author .pa-author > span,
#pun .post-links a > span,
#pun .pagelink .pages,
#pun .tcl .item-num,
#pun #pun-index .isonline,
#pun #button-graffiti,
#pun #button-graffiti-box,
#pun #profile-gifts,
#pun #profile-useragent,
#pun #profile-user-agent,
#pun .rv-remove,
#pun #pun-about,
#pun #button-graffiti_rusff,
#pun :is(.pa-gifts, #pa-gifts, .pa-ua, #pa-ua, .pa-useragent, #pa-useragent, .pa-user-agent, #pa-user-agent, .user-agent),
#pun :is(#pun-messages, #pun-userlist) .isonline,
.jGrowl .jGrowl-notification:empty,
.jGrowl .jGrowl-notification:has(> .jGrowl-message:empty),
.jGrowl .jGrowl-closer:empty,
#pun .rv-unread-label,
#pun .tclcon > .acchide,
#pun .forum .isonline,
#pun #pun-main .forum td.tcl .byuser {
  display: none !important;
}

#pun :is(code, pre) {
  font-family: var(--rv-mono);
  font-size: 12px;
}

#pun #pun-title :is(table, tbody, tr, td) {
  display: block;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#pun :is(#pun-navlinks, #pun-ulinks) {
  position: static;
  float: none;
  clear: both;
  transform: none;
  width: auto;
  margin: 0px;
  padding: 0px;
}

#pun :is(#pun-navlinks, #pun-ulinks) ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  position: static;
  margin: 0px;
  padding: 9px 18px;
  list-style: none;
  transition: padding 0.2s, gap 0.2s;
}

#pun :is(#pun-navlinks, #pun-ulinks) li {
  float: none;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#pun :is(#pun-status, #pun-crumbs1, #pun-crumbs2) {
  position: static;
  clear: both;
  margin: 0px;
  padding: 12px 24px;
  font-size: 11px;
}

#pun :is(#pun-status, #pun-crumbs1, #pun-crumbs2) p,
#pun .formsubmit input,
#pun .post-sig dd {
  margin: 0px;
}

#pun #pun-status {
  padding-bottom: 0px;
}

#pun :is(#pun-navlinks, #pun-ulinks, #pun-status, #pun-crumbs1, #pun-crumbs2) h2,
#pun :is(#pun-break1, #pun-break2, #pun-break3, #pun-break4, #pun-pagelinks),
#pun #pun-index #pun-main > h1,
#pun :is(#html-header, #html-footer, #pun-announcement):empty,
#pun .category :is(.catleft, .catright),
#pun .category .icon,
#pun .category.rv-compact :is(thead, .tc2, .tc3),
#pun .rv-toggle span,
#pun .post-sig hr,
#pun :is(#pun-crumbs1, #pun-crumbs2) strong:first-child,
#pun .rv-partners:empty,
#pun .rv-metric br,
#pun .post-sig > hr,
#pun .rv-results-heading .acchide,
#pun .rv-reply-tools [data-rv-focus],
#pun .post-sig dt,
#pun #pun-navlinks :is(.notify-bubble, #navpm .unreads, #notify-link .unreads)::after,
#pun:has(#pun-admain) #pun-ulinks,
#pun:has(#pun-admain) #pun-title,
#pun .rv-topic-row .rv-topic-icon > img,
#pun:has(#pun-admain) .rv-footer-art {
  display: none;
}

#pun #pun-main {
  margin: 0px;
  padding: 12px 24px 28px;
  min-width: 0px;
  display: flow-root;
}

#pun #pun-announcement {
  margin: 12px 24px;
  padding: 16px 20px;
}

#pun table {
  width: 100%;
  font: inherit;
}

#pun :is(th, td) {
  padding: 12px;
  vertical-align: top;
  text-align: left;
}

#pun th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#pun td p:last-child,
#pun .post-content p:last-child {
  margin-bottom: 0px;
}

#pun :where(.main, #messages) .container > table,
#pun .category table,
#pun .post-content table,
#pun #pun-admain table {
  table-layout: fixed;
}

#pun :where(.main, #messages) .container > table .tcl,
#pun #pun-messages .rv-pm-table :is(th, td):nth-child(1) {
  width: 48%;
}

#pun :where(.main, #messages) .container > table :is(.tc2, .tc3) {
  width: 10%;
  text-align: center;
  font-size: 11px;
}

#pun :where(.main, #messages) .container > table .tcr {
  width: 32%;
  font-size: 11px;
}

#pun :where(.main, #messages) .tcl a {
  font-weight: 600;
}

#pun :is(.byuser, .lastpost),
#pun #profile-right li > span {
  font-size: 11px;
}

#pun .byuser {
  display: block;
  margin-top: 3px;
}

#pun .user-avatar {
  float: left;
  margin-right: 10px;
}

#pun :is(.user-avatar img, .avatar-image) {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: cover;
}

#pun :where(.main, #messages) .icon {
  float: left;
  width: 7px;
  height: 7px;
  margin: 7px 10px 0px 0px;
}

#pun :is(.linkst, .linksb) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0px;
  padding: 0px;
  font-size: 11px;
  min-height: 0px;
}

#pun :is(.pagelink, .postlink, .subscribelink) {
  float: none;
  margin: 0px;
}

#pun .pagelink :is(a, strong) {
  display: inline-block;
  min-width: 24px;
  padding: 3px 7px;
  text-align: center;
}

#pun :is(.postlink, .subscribelink) a {
  display: inline-block;
  padding: 6px 12px;
}

#pun :is(.modmenu, #pun-qjump) {
  clear: both;
  margin: 12px 0px;
  font-size: 11px;
}

#pun .modmenu .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0px;
  padding: 0px;
}

#pun .category > .container,
#pun .category .rv-fold-inner > .container {
  padding: 0 0 0 var(--rv-category-art-width);
  position: relative;
  overflow: hidden;
}

#pun .category td {
  padding: 0px;
  vertical-align: middle;
}

#pun .category .tcl {
  width: 58%;
}

#pun .category :is(.tc2, .tc3) {
  width: 7%;
  text-align: center;
  font-size: 10px;
}

#pun .category .tcr {
  width: 28%;
  font-size: 11px;
  padding: 12px;
}

#pun .category h3 {
  margin: 0px 0px 5px;
  font: 600 18px/1.4 var(--rv-forum-font);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

#pun .category :is(.info, .forumdesc) {
  font-size: 12px;
  line-height: 1.65;
}

#pun .category :is(.info, .forumdesc) > p {
  margin: 8px 0px 0px;
}

#pun .rv-counts {
  margin: 0px 0px 12px;
  font-size: 10px;
  line-height: 1.4;
}

#pun .category.rv-compact .tcl {
  width: 68%;
}

#pun .category.rv-compact .tcr {
  width: 32%;
}

#pun :is(.podfl, .rv-forum-links) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

#pun :is(.podfl, .rv-forum-links) a {
  display: inline-block;
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1.5;
}

#pun .isonline {
  display: inline-block;
  width: 6px;
  height: 6px;
}

#pun .rv-toggle {
  position: absolute;
  right: 0px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0px;
  transform: translateY(-50%);
  font-size: 0px;
  cursor: pointer;
}

#pun .rv-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--rv-ease);
}

#pun .rv-toggle[aria-expanded="false"]::before {
  transform: translateX(-2px) rotate(-45deg);
}

#pun .rv-fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s var(--rv-ease), opacity .2s;
}

#pun .rv-fold.is-closed {
  grid-template-rows: 0fr;
}

#pun .rv-fold-inner {
  min-height: 0px;
  overflow: hidden;
}

#pun .post > h3 {
  display: flex;
  margin: 0px;
  padding: 10px 18px;
  font: 400 11px/1.5 var(--rv-font);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#pun .post > h3 .post-num {
  float: none;
  order: 2;
  margin-left: auto;
  flex-shrink: 0;
}

#pun .post > h3 strong,
#pun #pun-title #pun-status strong {
  font-weight: 500;
}

#pun .post-author :is(.pa-reg, .pa-posts, .pa-respect, .pa-positive, .pa-last-visit),
#pun .post-author .pa-online,
#pun .rv-search-table th,
#pun .post-author :is(.pa-reg, .pa-registered, .pa-time-visit, .pa-ip) {
  font-size: 10px;
}

#pun .post-box {
  margin: 0px;
  padding: 0px;
  min-width: 0px;
}

#pun .post-content {
  font-size: var(--rv-reading-size);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

#pun .post-content p {
  margin: 0px 0px 1em;
  padding: 0px;
}

#pun .post-content :is(ul, ol) {
  padding-left: 24px;
}

#pun .post-content img.postimg {
  margin: 8px 0px;
  vertical-align: middle;
}

#pun .code-box pre {
  max-height: 420px;
  margin: 0px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#pun .spoiler-box {
  margin: 14px 0px;
}

#pun .spoiler-box > div {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
}

#pun .spoiler-box > div::before {
  content: "\f013";
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  font: 900 13px/1 var(--rv-icon-font);
  text-align: center;
  vertical-align: middle;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 550ms var(--rv-ease);
  pointer-events: none;
}

#pun .spoiler-box > div.visible::before {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  #pun .spoiler-box > div::before {
    transition: none;
  }
}

#pun .spoiler-box > blockquote {
  display: none;
  margin: 0px;
  padding: 14px;
}

#pun .spoiler-box > blockquote.visible,
#pun #pun-adnav .isactive > .adsubnav,
#pun #pun-admain .adinput {
  display: block;
}

#pun .post-links {
  clear: both;
  padding: 10px 18px;
  font-size: 10px;
  width: 100%;
}

#pun .post-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px 16px;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#pun .post-links li,
#pun #profile-left ul,
#pun #profile-right ul,
#pun #profilenav :is(ul, li) {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#pun .post-links a {
  display: inline-block;
  padding: 4px 0px;
}

#pun :is(.post-edit, .lastedit) {
  margin-top: 12px;
  font-size: 10px;
}

#pun #viewprofile {
  display: block;
  width: 100%;
  min-width: 0px;
  padding: 0px;
}

#pun #viewprofile > .container,
#pun #viewprofile > .container > ul {
  width: 100%;
  min-width: 0px;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#pun #viewprofile:has(> #profile-left),
#pun table#viewprofile,
#pun #viewprofile table:has(> tbody > tr > #profile-left) {
  display: grid;
  grid-template-columns: var(--rv-author) minmax(0, 1fr);
  align-items: start;
  gap: var(--rv-gap);
  width: 100%;
  min-width: 0px;
}

#pun table#viewprofile > tbody,
#pun table#viewprofile > tbody > tr,
#pun #viewprofile table:has(> tbody > tr > #profile-left) > tbody,
#pun #viewprofile table:has(> tbody > tr > #profile-left) > tbody > tr {
  display: contents;
}

#pun #profile-left {
  display: block;
  min-width: 0px;
  align-self: start;
  float: none;
  width: auto;
  margin: 0px;
  text-align: center;
  overflow: visible;
  padding: 16px !important;
}

#pun #profile-left li {
  padding: 5px 0px;
  list-style: none;
}

#pun #profile-left img {
  display: block;
  width: auto;
  max-width: 100%;
  margin: auto;
}

#pun #profile-right {
  display: block;
  float: none;
  width: auto;
  min-width: 0px;
  margin: 0px;
  padding: 12px 18px;
  overflow: visible;
}

#pun #profile-name {
  font: 700 24px/1.2 var(--rv-nick);
  margin: 0px 0px 8px;
}

#pun #profile-right li {
  display: grid;
  grid-template-columns: minmax(105px, 30%) minmax(0px, 1fr);
  gap: 12px;
  padding: 10px 0px;
  width: 100%;
  min-width: 0px;
  margin: 0px;
  list-style: none;
  font: 12px/1.5 var(--rv-font);
}

#pun #profile-right strong {
  padding-left: 0px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

#pun #profilenav {
  float: left;
  width: var(--rv-sidebar);
  margin: 0px;
  padding: 0px;
}

#pun #profilenav h2 {
  font: 600 13px/1.5 var(--rv-font);
}

#pun #profilenav a {
  display: block;
  padding: 7px 10px;
  font-size: 11px;
}

#pun #profile {
  margin-left: 0px;
  min-width: 0px;
}

#pun #messages .container {
  padding: 12px;
}

#pun #pun-messages #post-form div.container {
  padding: 0px;
}

#pun #profile-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 0px;
  list-style: none;
}

#pun fieldset {
  min-width: 0px;
  margin: 16px 0px;
  padding: 18px;
}

#pun legend {
  padding: 0px 7px;
  font: 600 12px/1.5 var(--rv-font);
}

#pun label {
  font-size: 12px;
}

#pun :is(input, select, textarea, button) {
  font-family: var(--rv-font);
}

#pun :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], select, textarea) {
  max-width: 100%;
  min-width: 0px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
}

#pun textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
}

#pun #main-reply {
  width: 100%;
  min-height: 280px;
  padding: 18px;
  font-size: 14px;
  line-height: 1.8;
}

#pun :is(input[type="submit"], input[type="button"], input[type="reset"], button.rv-button) {
  padding: 8px 14px;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}

#pun :is(input, button):disabled {
  cursor: not-allowed;
}

#pun :is(.formsubmit, .submitend, .submittop) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0px;
}

#pun #post-form h2 {
  margin: 22px 0px 12px;
  font: 600 18px/1.4 var(--rv-title);
}

#pun #tags {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

#pun .rv-reply-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0px;
  font-size: 11px;
}

#pun .rv-reply-tools button,
#pun #pun-stats li:not(#onlinelist):not(#onlinelist2):not(.rv-visitors) {
  padding: 5px 10px;
}

/* Администрирование */

#pun #pun-admain {
  display: flow-root;
  position: static;
  float: none;
  clear: both;
  width: auto;
  min-width: 0px;
  margin: 0px;
  padding: 18px 24px 28px;
}

#pun #pun-admain > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#pun #pun-adnav {
  position: static;
  float: left;
  clear: none;
  transform: none;
  width: var(--rv-sidebar);
  margin: 0px;
  padding: 0px;
}

#pun #pun-adnav :is(.adcontainer, #adnav-standard) {
  position: static;
  margin: 0px;
  padding: 0px;
}

#pun #pun-adnav ul {
  display: block;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#pun #pun-adnav li {
  position: relative;
  display: block;
  float: none;
  min-height: 0px;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#pun #pun-adnav a {
  display: block;
  min-height: 0px;
  padding: 3px 9px;
  font: 500 12px/1.5 var(--rv-font);
  text-transform: none;
  text-decoration: none;
}

#pun #pun-adnav .adsubnav {
  display: none;
  padding: 2px 0px 4px 10px;
}

#pun #pun-adnav .adsubnav a {
  min-height: 0px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
}

#pun #pun-adnav li > sup {
  position: absolute;
  top: 7px;
  right: 6px;
  padding: 2px 4px;
  font: 500 8px/12px var(--rv-font);
  white-space: nowrap;
}

#pun #pun-admain > :is(.adformal, .adsection, .adinfo) {
  position: static;
  float: none;
  clear: none;
  width: auto;
  min-width: 0px;
  margin: 0 0 20px calc(var(--rv-sidebar) + var(--rv-gap));
  padding: 0px;
}

#pun #pun-admain :is(.adformal, .adsection, .adinfo) > h2,
#pun #pun-adnav > h2 {
  margin: 0px 0px 14px;
  padding: 9px 12px;
  font: 600 14px/1.45 var(--rv-font);
  overflow-wrap: anywhere;
}

#pun #pun-admain .adcontainer {
  margin: 0px;
  padding: 0px;
}

#pun #pun-admain :is(.adfs-box, .adlabel, .adinput, .adsubmitfield, .adsubmit) {
  position: static;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0px;
}

#pun #pun-admain .adlabel {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

#pun #pun-admain .adfs-box > p {
  margin: 0px;
  padding: 12px 0px;
}

#pun #pun-admain :is(.adsubmit, .adsubmitfield) {
  margin-top: 10px;
}

#pun #pun-admain textarea {
  width: 100%;
  min-height: 300px;
  font: 12px/1.6 var(--rv-mono);
  tab-size: 2;
}

#pun #pun-admain th {
  width: 28%;
}

#pun #pun-admain :is(th, td) {
  overflow-wrap: anywhere;
}

#pun #pun-stats {
  margin: 0px 24px 24px;
  padding: 0px;
}

#pun #pun-stats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0px;
  padding: 0px;
  list-style: none;
  justify-content: center;
}

#pun #pun-stats li {
  list-style: none;
  font-size: 11px;
}

#pun #pun-stats #onlinelist,
#pun #pun-stats :is(#onlinelist2, .rv-visitors) {
  flex-basis: 100%;
  padding: 16px 0px 0px;
  font-size: 12px;
  line-height: 1.8;
}

#pun .post-content a[href]:not(:has(img)) {
  color: var(--rv-post-link);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
  border-radius: 3px;
  transition: color 180ms ease, background-color 180ms ease;
}

#pun .post-content a[href]:not(:has(img)):is(:hover, :focus-visible) {
  color: var(--rv-post-link-hover);
  background-color: var(--rv-post-link-bg);
}

/* Редактор */

#pun #form-buttons {
  margin-bottom: 10px;
  padding: 6px;
}

#pun #form-buttons table,
#pun #form-buttons tbody {
  display: block;
  width: 100%;
}

#pun #form-buttons tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

#pun #form-buttons td[id^="button-"] {
  position: relative;
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  padding: 0px !important;
}

#pun #form-buttons td[id^="button-"]::before {
  content: var(--rv-button-icon, "\f141");
  position: absolute;
  inset: 0px;
  display: grid;
  place-items: center;
  font-family: var(--rv-icon-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

#pun #form-buttons td[id^="button-"] img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0px;
  cursor: pointer;
}

#pun #button-font {
  --rv-button-icon: "\f031";
}

#pun #button-size {
  --rv-button-icon: "\f034";
}

#pun #button-bold {
  --rv-button-icon: "\f032";
}

#pun #button-italic {
  --rv-button-icon: "\f033";
}

#pun #button-underline {
  --rv-button-icon: "\f0cd";
}

#pun #button-strike {
  --rv-button-icon: "\f0cc";
}

#pun #button-left {
  --rv-button-icon: "\f036";
}

#pun #button-center {
  --rv-button-icon: "\f037";
}

#pun #button-right {
  --rv-button-icon: "\f038";
}

#pun #button-link {
  --rv-button-icon: "\f0c1";
}

#pun #button-spoiler {
  --rv-button-icon: "\f518";
}

#pun #button-image {
  --rv-button-icon: "\f03e";
}

#pun #button-video {
  --rv-button-icon: "\f03d";
}

#pun #button-hide {
  --rv-button-icon: "\f023";
}

#pun #button-quote {
  --rv-button-icon: "\f10e";
}

#pun #button-code {
  --rv-button-icon: "\f121";
}

#pun #button-color {
  --rv-button-icon: "\f53f";
}

#pun #button-keyboard {
  --rv-button-icon: "\f11c";
}

#pun #button-table {
  --rv-button-icon: "\f0ce";
}

#pun #button-addition {
  --rv-button-icon: "\f0c9";
}

#pun #button-transL {
  --rv-button-icon: "\f1ab";
}

#pun #button-indent {
  --rv-button-icon: "\f03c";
}

#pun #button-justify {
  --rv-button-icon: "\f039";
}

#pun #button-files_rusff {
  --rv-button-icon: "\f0c6";
}

#pun .rv-results-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  font: 500 12px/1.5 var(--rv-font);
  margin: 8px 0px 12px;
}

#pun .pagelink {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font: 11px/1.5 var(--rv-font);
  margin: 0px;
}

#pun .post > h3 > :not(.post-num) {
  order: 1;
}

#pun .post-links .rv-link-label {
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
}

#pun .rv-presence {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0px;
}

#pun .rv-presence::before {
  content: "\f056";
  font: 900 13px/1 var(--rv-icon-font);
}

#pun .rv-account-layout {
  display: grid;
  grid-template-columns: var(--rv-sidebar) minmax(0, 1fr);
  gap: var(--rv-gap);
  align-items: start;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#pun .rv-account-layout > #profilenav,
#pun .rv-account-content > :is(#profile, form, .container, .formal) {
  float: none;
  width: auto;
  margin: 0px;
  padding: 0px;
}

#pun .rv-account-content {
  min-width: 0px;
  margin: 0px;
  padding: 0px;
}

#pun #profile-right li > :is(div, strong) {
  min-width: 0px;
  padding: 0px;
  overflow-wrap: anywhere;
  display: block;
  float: none;
  width: auto;
  margin: 0px;
  white-space: normal;
  word-break: normal;
}

#pun #profile-signature {
  grid-column: 1 / -1;
  padding: 14px 0px 0px;
}

#pun .rv-search-table .tc2 {
  width: 20%;
  text-align: left;
}

#pun .rv-search-table .tc3 {
  width: 8%;
  text-align: center;
}

#pun .rv-search-table .tcl {
  width: 42%;
  font-size: 12px;
}

#pun .rv-search-table .tcr {
  width: 30%;
  font-size: 11px;
}

#pun .rv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 0px;
  font-size: 11px;
}

#pun .rv-partners {
  display: flex;
  flex: 1 1 0%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0px;
}

#pun .rv-footer-brand {
  margin-left: auto;
  text-align: right;
  font: italic 20px/1.4 var(--rv-title);
}

#pun .rv-icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0px;
  cursor: pointer;
}

#pun .rv-icon-button::before {
  font: 900 14px/1 var(--rv-icon-font);
}

#pun .rv-tone {
  position: absolute;
  top: 22px;
  right: 20px;

  .rv-menu-dock.is-joined > & {
    top: 50%;
    right: 10px;
    width: 26px;
    height: 26px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    z-index: 2;
  }
}

#pun .rv-tone::before {
  content: "\f186";
}

:root[data-rv-tone="dark"] #pun .rv-tone::before {
  content: "\f185";
}

#pun .rv-scroll {
  position: fixed;
  right: max(8px, calc((100vw - var(--rv-width)) / 2 - 48px));
  bottom: auto;
  z-index: 100;
  display: grid;
  gap: 8px;
  top: 50%;
  transform: translateY(-50%);
}

#pun [data-rv-top]::before {
  content: "\f062";
}

#pun [data-rv-bottom]::before {
  content: "\f063";
}

/* Состояния форумов */

#pun .rv-forum-state {
  display: grid;
  place-items: center;
  width: var(--rv-category-art-width);
  height: 32px;
  margin: 0px;
  flex: 0 0 18px;
  font-style: normal;
  position: absolute;
  left: calc(-1 * var(--rv-category-art-width));
  top: 50%;
  transform: translateY(-50%);
  font-size: 21px;
}

#pun .rv-forum-state::before {
  display: block;
  transform-origin: 50% 50%;
  content: "\f2dc";
  font: 900 16px/1 var(--rv-icon-font);
position: relative;
z-index: 1;
}

#pun .rv-post-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0px 0px 16px;
  padding: 0px 0px 12px;
  font: 500 11px/1.5 var(--rv-mono);
}

#pun .rv-post-heading .rv-post-date {
  min-width: 0px;
  order: 0;
}

#pun .rv-post-heading .rv-post-number {
  flex-shrink: 0;
  margin-left: auto;
  order: 1;
  font-weight: 400;
}

#pun .post-links li.rv-action-start {
  margin-left: auto;
}

#pun .category > h2 > span,
#pun #pun-stats > h2 > span {
  display: block;
  min-width: 0px;
  overflow-wrap: anywhere;
  transform: translateY(var(--rv-category-sink));
}

#pun .category .tclcon {
  padding: 12px;
  min-width: 0px;
  position: relative;
}

#pun .category tr {
  transition: background-color 0.18s;
  position: relative;
}

#pun tr:is(.inew, .inewclosed) .rv-forum-state::before {
  animation: 16s linear 0s infinite normal none running rv-snow-turn;
}

#pun .rv-lastpost {
  display: grid;
  grid-template-columns: minmax(0px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0px;
}

#pun .rv-lastpost:has(> .user-avatar) {
  grid-template-columns: 34px minmax(0px, 1fr);
}

#pun .rv-lastpost > .user-avatar {
  float: none;
  margin: 0px;
  grid-column: 1;
}

#pun .rv-lastpost-text {
  min-width: 0px;
  overflow-wrap: anywhere;
}

#pun .rv-lastpost-text .byuser {
  display: inline;
  margin: 0px;
  white-space: nowrap;
}

#pun .rv-lastpost-text .lastpost {
  display: inline;
}

#pun #navpm,
#pun #navpm > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#pun .rv-presence.is-online::before {
  content: "\f058";
}

#pun .rv-metric-label {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0px;
}

#pun .rv-metric-label::before {
  content: var(--rv-metric-icon);
  font: 900 11px/1 var(--rv-icon-font);
}

#pun .post-author .pa-reg {
  --rv-metric-icon: "\f073";
}

#pun .post-author .pa-invites {
  --rv-metric-icon: "\f234";
}

#pun .post-author .pa-posts {
  --rv-metric-icon: "\f075";
}

#pun .post-author .pa-respect {
  --rv-metric-icon: "\f164";
}

#pun .post-author .pa-positive {
  --rv-metric-icon: "\f51e";
}

#pun .post-author .pa-reputation {
  --rv-metric-icon: "\f521";
}

#pun .post-author .pa-awards {
  --rv-metric-icon: "\f091";
}

#pun #pun-messages .rv-pm-table {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  margin: 0px;
  float: none;
}

#pun #pun-messages .rv-pm-table thead {
  display: table-header-group;
  position: static;
  float: none;
  transform: none;
  height: auto;
}

#pun #pun-messages .rv-pm-table tbody {
  display: table-row-group;
  position: static;
  float: none;
  transform: none;
  height: auto;
}

#pun #pun-messages .rv-pm-table tfoot {
  display: table-footer-group;
  position: static;
  float: none;
  transform: none;
  height: auto;
}

#pun #pun-messages .rv-pm-table tr {
  display: table-row;
  position: static;
  float: none;
  transform: none;
  height: auto;
}

#pun #pun-messages .rv-pm-table th,
#pun #pun-messages .rv-pm-table td {
  display: table-cell;
  position: static;
  float: none;
  transform: none;
  height: auto;
}

#pun #pun-messages .rv-pm-table :is(th, td) {
  padding: 12px 8px;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: middle;
  font-size: 12px;
}

#pun #pun-messages .rv-pm-table :is(th, td):nth-child(2) {
  width: 24%;
}

#pun #pun-messages .rv-pm-table :is(th, td):nth-child(3) {
  width: 23%;
}

#pun #pun-messages .rv-pm-table :is(th, td):nth-child(4) {
  width: 5%;
}

#pun #pun-messages .rv-pm-table :is(th, td):last-child:has(input[type="checkbox"]) {
  width: 32px;
  text-align: center;
}

#pun #pun-messages .rv-pm-table td .user-avatar {
  float: left;
  margin: 0px 8px 0px 0px;
}

#pun #pun-messages fieldset {
  height: auto;
  min-height: 0px;
  overflow: visible;
}

#pun #tags > .container {
  position: absolute;
  top: var(--rv-editor-top);
  left: 0px;
  right: auto;
  z-index: 50;
  width: max-content;
  min-width: 180px;
  max-width: min(640px, 100%);
  max-height: min(360px, 55vh);
  overflow: auto;
  padding: 12px;
  margin: 0px;
}

#pun #post-form :is(fieldset, .fs-box, .fs-box > p) {
  overflow: visible;
}

.jGrowl {
  z-index: 1000;
  font: 12px/1.5 var(--rv-font);
  position: fixed !important;
  top: calc(var(--rv-nav-height) + 16px) !important;
  bottom: auto !important;
  right: 12px !important;
  left: auto !important;
  width: auto !important;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
  box-sizing: border-box;
  min-height: 0px;
  margin: 12px 16px;
  position: relative;
  overflow-wrap: anywhere;
  width: min(340px, -32px + 100vw) !important;
  padding: 16px 42px 16px 18px !important;
}

.jGrowl .jGrowl-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0px;
  font: 600 18px/1 var(--rv-font);
  cursor: pointer;
}

.jGrowl .jGrowl-header {
  margin-bottom: 5px;
  font-weight: 600;
}

#pun a {
  text-underline-offset: 3px;
  transition: color 0.18s, background-color 0.18s;
  text-decoration: none !important;
}

#pun a:hover,
#pun a:focus-visible,
.jGrowl a {
  text-decoration: none !important;
}

#pun .rv-post-date::before {
  content: "\f017";
  font: 900 11px/1 var(--rv-icon-font);
  margin-right: 7px;
}

#pun .rv-copy-code::before {
  content: "\f0c5";
  font: 900 10px/1 var(--rv-icon-font);
  margin-right: 6px;
}

#pun .post-sig::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 25%;
  width: 50%;
  height: 1px;
}

#pun #viewprofile .rv-profile-grid {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(0px, 1fr);
  gap: 20px;
  width: 100%;
  place-items: start stretch;
}

#pun #profile-right li > :is(span, strong, div) {
  min-width: 0px;
  width: auto;
  padding: 0px;
  float: none;
}

#pun #tags :is(#color-area, #table-area) table {
  display: table;
  table-layout: auto;
  margin: 0px;
  width: auto !important;
}

#pun #tags :is(#color-area, #table-area) tr {
  display: table-row;
}

#pun #tags :is(#color-area, #table-area) :is(tbody, thead) {
  display: table-row-group;
}

#pun #tags :is(#color-area, #table-area) td {
  display: table-cell;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0px;
  line-height: 0;
}

#pun #tags :is(#color-area, #table-area) td img {
  display: block;
  width: 22px;
  height: 22px;
  max-width: none;
}

#pun #keyboard-span input {
  font: 500 11px/1 var(--rv-font);
  height: 28px;
  min-width: 28px;
  padding: 4px 6px;
  margin: 2px;
}

#pun #keyboard-area {
  max-width: min(620px, 100%);
}

#pun #post-form fieldset {
  margin-top: 18px;
  padding-top: 16px;
}

#pun #post-form legend {
  position: static;
  float: none;
  transform: none;
  padding: 0px 8px;
  font: 500 11px/1.5 var(--rv-font);
}

#pun .rv-crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0px;
  padding: 0px;
}

#pun .rv-crumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 6px 11px;
  font: 500 12px/1.5 var(--rv-font);
}

#pun .rv-crumb::after,
#pun :is(.rv-forum-links, .podfl) a::after {
  content: "";
  position: absolute;
  inset: 0px;
  transform: translateX(-130%) skewX(-20deg);
  pointer-events: none;
}

#pun .rv-crumb:is(:hover, :focus-visible, :active)::after,
#pun :is(.rv-forum-links, .podfl) a:is(:hover, :focus-visible, :active)::after {
  transform: translateX(130%) skewX(-20deg);
  transition: transform .55s var(--rv-ease);
}

#pun #pun-crumbs2 .rv-crumb {
  font-size: 10px;
  padding: 4px 8px;
}

#pun .rv-results-meta {
  font: 400 10px/1.5 var(--rv-mono);
}

#pun #pun-admain .rv-author-fields .adfs-box > p {
  display: grid;
  grid-template-columns: minmax(110px, 40%) minmax(0px, 1fr);
  gap: 12px;
  align-items: center;
  position: relative;
  min-height: 44px;
  padding: 10px 32px 10px 12px !important;
  margin: 0px !important;
}

#pun #pun-admain .rv-author-fields .adlabel {
  margin: 0px;
  padding: 0px;
  left: auto;
  display: block;
  width: auto !important;
  position: static !important;
  float: none !important;
}

#pun #pun-admain .rv-author-fields .adinput {
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#pun .rv-reading-size {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: 0px 0px 16px;
  font: 11px/1.5 var(--rv-font);
}

#pun .rv-reading-size input {
  width: 130px;
  height: 20px;
  padding: 0px;
  cursor: pointer;
}

#pun #pun-admain .rv-author-fields .adfs-box > p::after {
  content: "\f0b2";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font: 900 12px/1 var(--rv-icon-font);
  pointer-events: none;
}

#pun .rv-results-heading > span {
  display: inline-block;
  margin-right: 8px;
}

#pun .post-author .pa-author > .rv-presence {
  width: 14px;
  height: 14px;
  font-size: 0px;
  display: inline-flex !important;
}

#pun .rv-copy-code {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 5px 9px;
  font: 500 10px/1.5 var(--rv-font);
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

#pun .rv-reading-size button {
  padding: 4px 8px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

#pun .forum .icon {
  width: 18px;
  height: 18px;
  font: 900 11px/18px var(--rv-icon-font);
  text-align: center;
}

#pun .forum .icon::before {
  content: "\f15c";
}

#pun .rv-results-heading .item2 {
  font: 400 10px/1.5 var(--rv-mono);
  margin-left: auto;
}

#pun #viewprofile-next,
#pun .rv-account-content > #viewprofile-next {
  display: block;
  width: 100%;
  min-width: 0px;
  max-width: none;
  float: none;
  margin: 0px;
  padding: 0px;
}

#pun #viewprofile .rv-profile-grid > #profile-right {
  width: 100%;
  min-width: 0px;
  max-width: none;
  justify-self: stretch;
  float: none;
}

#pun #viewprofile .rv-profile-grid > #profile-left {
  width: 100%;
  min-width: 0px;
  max-width: none;
}

#pun .rv-crumb-separator {
  font: 900 8px/1 var(--rv-icon-font);
  flex: 0 0 auto;
}

#pun .rv-crumb-separator::before {
  content: "\f105";
}

#pun :is(.rv-forum-links, .podfl) a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 4px 9px;
}

.rv-fireflies {
  position: fixed;
  inset: 0px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.rv-fireflies i {
  position: absolute;
  width: 2px;
  height: 2px;
  animation: 17s ease-in-out 0s infinite normal none running rv-firefly;
}

.rv-fireflies i:nth-child(1) {
  left: 4%;
  top: 22%;
  animation-delay: -1s;
}

.rv-fireflies i:nth-child(2) {
  left: 94%;
  top: 38%;
  animation-delay: -7s;
}

.rv-fireflies i:nth-child(3) {
  left: 9%;
  top: 77%;
  animation-delay: -12s;
}

.rv-fireflies i:nth-child(4) {
  left: 89%;
  top: 88%;
  animation-delay: -4s;
}

.rv-fireflies i:nth-child(5) {
  left: 52%;
  top: 7%;
  animation-delay: -10s;
}

#pun #pun-stats > :is(.container, .statscon) {
  padding: 20px;
  overflow: hidden;
}

#pun #pun-main:has(.rv-search-table) > h1 {
  display: block;
  margin: 6px 0px 14px;
  padding: 0px;
  font: 500 16px/1.5 var(--rv-font);
  letter-spacing: normal;
  text-transform: none;
}

#pun #pun-main:has(.rv-search-table) > h1::before,
#pun #pun-navlinks a::before {
  content: none;
}

#pun #pun-viewtopic #pun-main > h1 > span,
#pun #pun-main:has(.rv-search-table) > h1 > span {
  font: inherit;
  overflow-wrap: anywhere;
}

#pun #pun-main:has(.forum) > h1,
#pun #pun-userlist h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0px 16px;
  padding: 0px;
  font: 500 16px/1.5 var(--rv-font);
  letter-spacing: 0.02em;
  text-transform: none;
}

#pun #pun-main:has(.forum) > h1 > span,
#pun #pun-userlist h1 > span {
  min-width: 0px;
  font: inherit;
}

#pun #pun-main:has(.forum) > h1::before,
#pun #pun-main > h1::before,
#pun #pun-main .formal > h2::before {
  content: "\f03a";
  flex: 0 0 auto;
  font: 900 11px/1 var(--rv-icon-font);
}

#pun #pun-main:has(.forum) > h1::after,
#pun #pun-userlist h1::after {
  content: "";
  flex: 1 1 0%;
  height: 1px;
}

#pun #pun-main .forum > h2 {
  margin: 8px 0px 12px;
  font: 400 12px/1.5 var(--rv-font);
}

#pun #pun-main .forum > h2 > span {
  font: inherit;
}

#pun :is(#post-form, #pun-post .formal, #pun-edit .formal) fieldset {
  min-width: 0px;
  padding: 18px;
}

#pun :is(#post-form, #pun-post .formal, #pun-edit .formal) legend {
  float: left;
  position: static;
  width: 100%;
  box-sizing: border-box;
  margin: 0px 0px 14px;
  padding: 0px;
  transform: none;
  font: 400 12px/1.5 var(--rv-font);
  white-space: normal;
}

#pun :is(#post-form, #pun-post .formal, #pun-edit .formal) legend + *,
#pun #pun-main fieldset > legend + *,
#pun #pun-admain fieldset > legend + * {
  clear: both;
}

#pun .post-author ul > li {
  text-align: center;
}

#pun .post-author ul > :is(.pa-reg, .pa-registered, .pa-time-visit, .pa-ip) {
  flex-basis: 100%;
}

#pun #pun-main > h1,
#pun #post-form > h2,
#pun #pun-main .formal > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0px 16px;
  padding: 0px;
  font: 500 16px/1.5 var(--rv-font);
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
}

#pun #pun-main > h1 > span,
#pun #post-form > h2 > span,
#pun #pun-main .formal > h2 > span {
  min-width: 0px;
  padding: 0px;
  font: inherit;
  overflow-wrap: anywhere;
}

#pun #post-form > h2::before {
  flex: 0 0 auto;
  font: 900 11px/1 var(--rv-icon-font);
  content: "\f4ad";
}

#pun #post-form > h2::after,
#pun #pun-main > h1::after,
#pun #pun-main .formal > h2::after,
#pun #pun-viewtopic #pun-main > h1::after {
  content: "";
  flex: 1 1 24px;
  height: 1px;
}

#pun #pun-main fieldset {
  min-width: 0px;
  box-sizing: border-box;
  padding: 18px;
}

#pun #pun-main fieldset > legend {
  float: left;
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0px 0px 14px;
  padding: 0px;
  font: 500 12px/1.5 var(--rv-font);
  white-space: normal;
  overflow-wrap: anywhere;
  transform: none;
}

#pun #pun-main fieldset > legend > span {
  position: static;
  padding: 0px;
  font: inherit;
}

#pun #pun-main .forum tbody > tr > td {
  vertical-align: middle;
}

#pun #pun-main .forum td.tcl .intd {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0px;
  padding-left: 0px;
}

#pun #pun-main .forum td.tcl .icon {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  transform: none;
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

#pun #pun-main .forum td.tcl .tclcon {
  flex: 1 1 auto;
  min-width: 0px;
  margin: 0px;
  padding: 0px;
  line-height: 1.45;
}

#pun #pun-search .forum table {
  width: 100%;
  table-layout: fixed;
}

#pun #pun-search .forum :is(th, td).tcl {
  width: 38%;
}

#pun #pun-search .forum :is(th, td).tc2 {
  width: 24%;
  white-space: nowrap;
}

#pun #pun-search .forum :is(th, td).tc3 {
  width: 8%;
}

#pun #pun-search .forum :is(th, td).tcr {
  width: 30%;
}

#pun #pun-search .forum td.tc2 > a,
#pun #pun-main .forum td.tc2 a {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

#pun #pun-main .forum :is(th, td).tc2 {
  width: 24%;
  min-width: 180px;
  white-space: nowrap;
}

#pun #pun-userlist h1::before {
  content: "\f0c0";
  flex: 0 0 auto;
  font: 900 12px/1 var(--rv-icon-font);
}

#pun form input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]),
#pun form select,
#pun form textarea {
  margin-top: 6px;
}

#pun #html-footer {
  clear: both;
  padding: 0px 24px;
  height: auto;
  min-height: 0px;
  padding-block: 0px;
}

#pun #html-footer .rv-footer-art {
  display: block;
position: relative;
  width: calc(100% + 48px);
  margin-inline: -24px;
  box-sizing: border-box;
  height: var(--rv-footer-height);
  min-height: 0px;
  aspect-ratio: auto;
}



#pun #pun-navlinks li {
  position: relative;
  flex: 0 0 auto;
}

#pun #pun-navlinks a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0px;
padding: 4px 0;
  font: 600 10px/1.2 var(--rv-font);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  transition: color 0.2s;
}

#pun #pun-ulinks ul {
  justify-content: center;
  gap: 3px 12px;
  margin: calc(-1 * var(--rv-submenu-overlap)) 0 0;
  padding: 4px 16px;
}

#pun #pun-ulinks a {
  display: block;
  padding: 2px 0;
  font-size: 10px;
  line-height: 1.2;
}

#pun .rv-menu-dock #pun-navlinks a {
  min-height: 0px;
padding: 4px 0;
}

#pun #pun-ulinks {
  position: sticky;
  top: var(--rv-menu-height);
  z-index: 209;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#pun .rv-menu-dock {
  position: sticky;
  top: 0px;
  z-index: 210;
  display: flow-root;
  margin-bottom: calc(-1 * var(--rv-menu-height));
}

#pun .rv-menu-dock #pun-navlinks {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

#pun #pun-navlinks ul,
#pun .rv-menu-dock #pun-navlinks ul {
  margin: 0;
  padding: 5px 22px;
  align-items: center;
  justify-content: center;
  gap: 3px 12px;
}

#pun #pun-title {
  width: 100%;
  padding-right: 70px;
  padding-bottom: 24px;
  box-sizing: border-box;
  height: var(--rv-header-height);
  min-height: 0px;
  aspect-ratio: auto;
  padding-left: 0px;
  position: relative;
  padding-top: calc(var(--rv-menu-height) + 18px);
  overflow: hidden;
  isolation: isolate;
}

#pun #pun-index #pun-crumbs1 {
  padding-top: 8px;
  padding-bottom: 4px;
}

#pun #pun-index #pun-main {
  padding-top: 0px;
}

#pun #pun-index .category {
  margin-top: 0px;
  margin-bottom: 14px;
}

#pun .rv-menu-dock.is-joined #pun-navlinks::before,
#pun:has(#pun-admain) #pun-navlinks::before {
  clip-path: none;
  border-radius: 0;
}

#pun .rv-menu-dock.is-joined #pun-navlinks::before,
#pun:has(#pun-admain) #pun-navlinks::before {
  clip-path: none;
  border-radius: 0;
}

#pun #pun-title #pun-status {
  position: absolute;
  box-sizing: border-box;
  margin: 0px;
  inset: auto 0 calc(var(--rv-submenu-overlap) + 8px) auto;
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 0px;
  padding: 3px 12px;
  font: 400 10px/1.3 var(--rv-font);
  text-align: right;
}

#pun #pun-title #pun-status p {
  margin: 0px;
  padding: 0px;
  font: inherit;
}

#pun #pun-title #pun-status :is(a, span, strong) {
  font-size: inherit;
  line-height: inherit;
}

#pun .category {
  margin: 4px 0px 20px;
  transition: none;
}

#pun .category > h2,
#pun #pun-stats > h2 {
  position: relative;
  display: flex;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  justify-content: center;
  text-align: center;
  min-height: 0px;
  align-items: center;
  padding: 10px 38px 0px;
  font: italic 600 var(--rv-category-size)/1.05 var(--rv-category-font);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-bottom: calc(-1 * var(--rv-category-sink));
}

#pun #pun-index .category > h2 {
  min-height: 0px;
  padding-top: 10px;
}

#pun .rv-caption {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0px;
  padding: 3px 16px;
  font: 400 10px/1.35 var(--rv-font);
  letter-spacing: 0.035em;
}

#pun .rv-stats-caption {
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0px;
  padding: 3px 16px;
  font: 400 10px/1.35 var(--rv-font);
  letter-spacing: 0.035em;
}

#pun .category .container::before {
  content: "";
  position: absolute;
  inset: 0px auto 0px 0px;
  width: var(--rv-category-art-width);
  pointer-events: none;
  transition: opacity 0.25s, filter 0.25s;
}

#pun .post {
  position: relative;
  margin: 0px 0px 16px;
}

#pun .post > .container {
  display: grid;
  grid-template-columns: var(--rv-author) minmax(0, 1fr);
  margin: 0px;
  gap: 18px;
  padding: 12px;
}

#pun .post-author {
  position: sticky;
  float: none;
  width: auto;
  margin: 0px;
  align-self: start;
  text-align: center;
  top: calc(var(--rv-nav-height) + 12px);
  max-height: calc(100dvh - var(--rv-nav-height) - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 12px;
  font-size: 11px;
}

#pun .post-author li {
  margin: 0px;
  list-style: none;
  flex: 0 0 100%;
  padding: 0px;
  line-height: 1.4;
}

#pun .post-author .pa-author {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 0 0;
  overflow-wrap: anywhere;
  font: italic 500 24px/1.15 var(--rv-nick);
}

#pun .post-author .pa-title {
  margin: 0 0 8px;
  font: 400 10px/1.4 var(--rv-font);
  letter-spacing: 0.025em;
}

#pun .post-author .pa-avatar {
  padding: 0;
  margin: 0 0 8px;
}

#pun .post-author .pa-avatar img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: auto;
}

#pun .post-author .pa-fld1 {
  padding: 6px 0px;
  margin: 0px 0px 4px;
}

#pun .post-author .rv-metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 0px;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
}

#pun .post-author .rv-presence {
  display: inline-flex;
  margin: 0px;
  flex: 0 0 auto;
  animation: none;

&.is-online {
  animation: rv-online-pulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}

#pun .post-body {
  float: none;
  min-width: 0px;
  margin: 0px;
  padding: 0px;
  min-height: 0px;
}

#pun :is(.quote-box:not(.spoiler-box), .code-box) {
  position: relative;
  margin: 12px 0;
  padding: 13px 16px;
}

#pun .quote-box:not(.spoiler-box) {
  padding-left: 40px;
}

#pun .quote-box:not(.spoiler-box)::before {
  content: "\f10d";
  position: absolute;
  left: 13px;
  top: 17px;
  font: 900 12px/1 var(--rv-icon-font);
  pointer-events: none;
}

#pun :where(.quote-box:not(.spoiler-box)) blockquote {
  margin: 0;
  padding: 0;
  font-size: inherit;
}

#pun :is(.quote-box:not(.spoiler-box) cite, .code-box strong) {
  display: block;
  font: 600 11px/1.5 var(--rv-font);
  margin-bottom: 7px;
}


#pun .code-box {
  padding-top: 39px;
}

#pun .post-sig {
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  position: relative;
  margin-top: 20px;
  padding-top: 14px;
}

#pun #pun-navlinks :is(.notify-bubble, #navpm .unreads, #notify-link .unreads) {
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 16px;
  height: 16px;
  padding: 0px 4px;
  letter-spacing: normal;
  vertical-align: middle;
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  display: inline-flex !important;
  margin: 0px 0px 0px 4px !important;
  font: 600 10px/1 var(--rv-font) !important;
}

#pun #pun-navlinks :is(#navpm, #notify-link) > a > span:not(.unreads):not(.notify-bubble) {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#pun .post-author ul {
  margin: 0px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: 0px;
  gap: 3px 6px;
}

#pun .post-author :is(.pa-reg, .pa-registered) {
  order: 10;
}

#pun .post-author :is(.pa-invites, .pa-posts, .pa-respect, .pa-positive, .pa-reputation, .pa-awards) {
  flex: 0 0 auto;
  width: auto;
  padding: 2px 0px;
  font-size: 12px;
  justify-content: center;
  order: 11;
}

#pun .post-author .pa-time-visit {
  --rv-metric-icon: "\f017";
  order: 12;
}

#pun .post-author .pa-ip {
  --rv-metric-icon: "\f233";
  transition: opacity 0.18s;
  order: 13;
}

#pun .punbb > #pun-navlinks {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  z-index: 210;
  isolation: isolate;
}



@media (hover: none) and (prefers-reduced-motion: no-preference) {
  #pun .rv-crumb::after,
  #pun :is(.rv-forum-links, .podfl) a::after {
    animation: rv-touch-shine 14s var(--rv-ease) infinite;
  }
}

@media (hover: none) and (prefers-reduced-motion: no-preference) {
  #pun :is(.rv-forum-links, .podfl) a:nth-child(2)::after {
    animation-delay: 0.4s;
  }
}

@media (hover: none) and (prefers-reduced-motion: no-preference) {
  #pun :is(.rv-forum-links, .podfl) a:nth-child(3)::after {
    animation-delay: 0.8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pun *,
  #pun ::before,
  #pun ::after {
    animation: auto ease 0s 1 normal none running none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pun tr:is(.inew, .inewclosed) .rv-forum-state::before,
  #pun .rv-presence,
  #pun #pun-title h1::before,
  #pun #pun-title h1 {
    animation: auto ease 0s 1 normal none running none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-fireflies {
    display: none;
  }
}

#pun_wrap {
  width: 100%;
  max-width: var(--rv-width);
  margin-inline: auto;
}

#pun {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: 0px;
  max-width: var(--rv-width);
  margin-inline: auto;
  font: 13px/1.6 var(--rv-font);
}

#pun #pun-title h1 :is(a, span) {
  font: inherit;
  letter-spacing: inherit;
}

#pun #pun-viewtopic #pun-main > h1 {
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0px 16px;
  padding: 0px;
  font: 500 16px/1.5 var(--rv-font);
  letter-spacing: 0.02em;
}

#pun #pun-viewtopic #pun-main > h1::before {
  content: "\f02d";
  flex: 0 0 auto;
  font: 900 12px/1 var(--rv-icon-font);
}

#pun #pun-navlinks #navpm .num_msg {
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  order: 1;
  letter-spacing: normal;
  vertical-align: middle;
  min-width: 11px;
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  display: inline-flex !important;
  height: 11px !important;
  padding: 0px 3px !important;
  margin: 0px 0px 0px 3px !important;
  font: 500 8px/1 var(--rv-font) !important;
}

#pun #pun-navlinks #navpm .num_msg::before,
#pun #pun-navlinks #navpm .num_msg::after {
  content: none !important;
  display: none !important;
}

#pun #pun-title h1 {
  isolation: isolate;
  display: block;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  position: absolute;
  top: 50%;
  left: 0px;
  box-sizing: border-box;
  width: fit-content;
  max-width: calc(100% - 70px);
  margin: 0px;
  transform: translateY(-50%);
  padding: 0 var(--rv-brand-fade) 0 24px;
  font-family: var(--rv-brand-font);
  font-size: var(--rv-brand-size);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0px;
  overflow: visible;
  animation: none;
text-shadow: none;
}

#pun #pun-title h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  animation: auto ease 0s 1 normal none running none;
  inset: 50% 0px auto;
  height: var(--rv-brand-strip-height);
  transform: translateY(-50%);
}

#pun #pun-title h1::after {
  content: "\f2dc";
  display: inline-block;
  margin-left: 19px;
  font: 900 20px/1 var(--rv-icon-font);
  vertical-align: middle;
  color: var(--rv-brand-highlight);
  transform-origin: center;
  animation: rv-snow-turn 16s linear infinite;
  pointer-events: none;
position: relative;
top: -19px;
}

/* Снег и пар */

#pun-title > .rv-header-weather {
  position: absolute;
  inset: 0px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.rv-header-weather__snow {
  position: absolute;
  inset: 0px;
  overflow: hidden;
  clip-path: polygon(0px 0px, 83% 0px, 83% 40%, 73% 40%, 73% 60%, 0px 80%);
}

.rv-header-weather__snow::before {
  content: "";
  position: absolute;
  inset: -100px -20px;
  animation: 18s linear 0s infinite normal none running rv-header-snow;
}

.rv-header-weather__steam {
  position: absolute;
  left: var(--rv-steam-left);
  top: var(--rv-steam-top);
  width: var(--rv-steam-width);
  height: var(--rv-steam-height);
  transform: translate(-50%, -100%);
}

.rv-header-weather__steam::before {
  content: "";
  position: absolute;
  inset: 0px;
  mask-image: var(--rv-steam-shape);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  transform-origin: center bottom;
  animation: 7s ease-out 0s infinite normal none running rv-cup-steam;
}

.rv-header-weather__steam::after {
  content: "";
  position: absolute;
  mask-image: var(--rv-steam-shape);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  transform-origin: center bottom;
  animation: 7s ease-out -3.5s infinite normal none running rv-cup-steam;
  inset: 12% 20% -5%;
}

#pun:has(#pun-admain) .rv-menu-dock {
  position: relative;
  top: auto;
  margin-bottom: 0px;
}

#pun:has(#pun-admain) #pun-navlinks {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

#pun #pun-admain fieldset {
  position: relative;
  min-width: 0px;
  margin: 0px 0px 14px;
  padding: 14px 16px;
}

#pun #pun-admain fieldset > legend {
  position: static;
  float: left;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0px 0px 10px;
  padding: 0px;
  transform: none;
  font: 600 13px/1.5 var(--rv-font);
  white-space: normal;
}

#pun #pun-admain fieldset > legend > span {
  padding: 0px;
  font: inherit;
}

#pun .rv-topic-row .rv-topic-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  float: left;
  width: 24px;
  height: 24px;
  margin: 0px 12px 0px 0px;
  font: 900 13px/1 var(--rv-icon-font);
}

#pun .rv-topic-row .rv-topic-icon::before {
  content: "\f15c";
}

#pun .rv-topic-row .rv-topic-icon[data-rv-kind="pinned"]::before {
  content: "\f08d";
}

#pun .rv-topic-row .rv-topic-icon[data-rv-kind="closed"]::before,
#pun .rv-topic-row .rv-topic-icon[data-rv-kind="pinned-closed"]::before {
  content: "\f023";
}

#pun .rv-topic-row .rv-topic-icon.is-unread::after {
  content: "\f2dc";
  position: absolute;
  right: -5px;
  top: -4px;
  font: 900 10px/1 var(--rv-icon-font);
  animation: 16s linear 0s infinite normal none running rv-snow-turn;
}

#pun .rv-topic-row .tclcon {
  min-height: 24px;
  min-width: 0px;
}

#pun .rv-list-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 8px 0px 12px;
  padding: 0px;
  font: 500 12px/1.5 var(--rv-font);
}

#pun .rv-list-summary .rv-list-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  font: 400 10px/1.5 var(--rv-mono);
}

#pun .forum th {
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: 10px;
}

/* Анимация */

@keyframes rv-snow-turn {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rv-firefly {
  0%,
  65%,
  100% {
    opacity: 0;
    transform: translate(0px, 0px);
  }

  78% {
    opacity: 0.5;
  }

  92% {
    opacity: 0;
    transform: translate(14px, -38px);
  }
}

@keyframes rv-touch-shine {
  0%,
  8% {
    opacity: 0;
    transform: translateX(-130%) skewX(-20deg);
  }

  10% {
    opacity: 0.8;
    transform: translateX(-130%) skewX(-20deg);
  }

  20% {
    opacity: 0.8;
    transform: translateX(130%) skewX(-20deg);
  }

  22%,
  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-20deg);
  }
}

@keyframes rv-header-snow {
  0% {
    opacity: 0;
    transform: translate3d(-8px, -45px, 0px);
  }

  15%,
  85% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate3d(12px, 65px, 0px);
  }
}

@keyframes rv-cup-steam {
  0% {
    opacity: 0;
    transform: translate3d(0px, 8px, 0px) scale(0.45, 0.65) rotate(-8deg);
  }

  25% {
    opacity: 0.85;
  }

  60% {
    opacity: 0.55;
    transform: translate3d(8px, -18px, 0px) scale(0.8, 1.1) rotate(7deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(-5px, -45px, 0px) scale(1.1, 1.3) rotate(-5deg);
  }
}

@keyframes rv-online-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Скрыть кнопку плюса рядом с уважением */
#pun .post-author .pa-respect a[href*="relation.php"][href*="v=1"] {
    display: none !important;
}

#pun .post-box:has(> .post-rating) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
}

#pun .post-box > .post-content {
  flex: 0 0 100%;
  min-width: 0;
}

#pun .post-box > .post-rating {
  margin-left: auto;
}

#pun .post-box > :is(.post-rating, .post-vote) {
  position: static;
  float: none;
  clear: none;
  flex: 0 0 auto;
  width: auto;
  margin-top: 12px;
  margin-bottom: 0;
  padding: 0;
}

#pun :is(.post-rating, .post-vote) > .container {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 0;
}

#pun .post-rating :is(p, span, a) {
  float: none;
  margin: 0;
}

#pun :is(.post-rating, .post-vote) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 3px 8px;
  box-sizing: border-box;
  font: 500 12px/1 var(--rv-font);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

#pun .rv-forum-state::after {
  content: "\f2dc";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 13px), calc(-50% - 15px)) rotate(15deg);
  font: 900 30px/1 var(--rv-icon-font);
  pointer-events: none;
  z-index: 0;
}

#pun #button-image-bbcode {
  --rv-button-icon: "\f03e";
}

#pun #form-buttons #button-graffiti_rusff {
  display: none !important;
}

#pun #form-buttons #button-image-bbcode::after {
  content: "2";
  position: absolute;
  right: 3px;
  bottom: 2px;
  z-index: 2;
  font: 600 8px/1 var(--rv-font);
  pointer-events: none;
}

/* Дополнительные шрифты редактора */
#pun #font-area .rv-font-option {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  text-align: left;
  font-size: 17px;
  line-height: 1.4;
  cursor: pointer;
}

#pun #font-area {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#pun .rv-text-indent {
  display: inline-block;
  width: 2.1em;
}

#pun .rv-design-credit {
  position: absolute;
  right: 16px;
  bottom: calc(50% - 44px);
  display: flex;
  padding: 0;
  z-index: 1;
}

#pun .rv-design-credit a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  font: 400 10px/1.4 var(--rv-font);
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}

#pun .rv-design-credit span {
  font-weight: 600;
}

#pun .rv-banners {
  position: absolute;
  left: 16px;
  right: 140px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(auto-fit, 88px);
  grid-auto-rows: 31px;
  justify-content: center;
  align-content: start;
  gap: 8px;
  height: 88px;
  padding: 8px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  border-radius: 12px;
}

#pun .rv-banners a {
  display: block;
  flex: 0 0 88px;
  width: 88px;
  height: 31px;
  border-radius: 4px;
  overflow: hidden;
transition:
  opacity 300ms var(--rv-ease),
  filter 300ms var(--rv-ease);
}

#pun .rv-banners img {
  display: block;
  width: 88px;
  height: 31px;
  object-fit: contain;
}

#pun #formkey {
  display: none;
}

0


Вы здесь » Тест дизайнов » Дизы » Темно-белый восторг


Рейтинг форумов | Создать форум бесплатно