☰

Forum Enhancement

Enhance forum UI with animations and effects

  1. // ==UserScript==
  2. // @name         Forum Enhancement
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1
  5. // @description  Enhance forum UI with animations and effects
  6. // @match        https://lolz.live/*
  7. // @match        https://zelenka.guru/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Основные стили
  15.     GM_addStyle(`
  16.         /* Основные категории */
  17.         .nodeTitle {
  18.             transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
  19.             position: relative;
  20.             padding-bottom: 2px;
  21.             border-bottom: 2px solid transparent;
  22.  
  23.         }
  24.  
  25.         .node .nodeTitle .expandSubForumList {
  26.             right: 7px;
  27.         }
  28.  
  29.          /* Анимация нажатия на элемент discussionListItem--Wrapper */
  30.         .discussionListItem--Wrapper {
  31.             transition: transform 0.15s ease;
  32.         }
  33.  
  34.         .discussionListItem--Wrapper:hover {
  35.             transform: scale(1.005);
  36.         }
  37.  
  38.         .discussionListItem--Wrapper:active {
  39.             transform: scale(0.99);
  40.         }
  41.  
  42.  
  43.              /* юзер профиль и ава профиль  */
  44.             .memberCardInner {
  45.             background: rgba(255, 255, 255, 0.1); /* White background with 10% opacity */
  46.             border-radius: 10px; /* Rounded corners */
  47.             padding: 16px; /* Padding inside the card */
  48.             backdrop-filter: blur(10px); /* Blur effect for glassmorphism */
  49.             border: 1px solid rgba(255, 255, 255, 0.2); /* Optional: semi-transparent border */
  50.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow */
  51.             color: rgb(214, 214, 214); /* Text color */
  52.              .bottom {
  53.             background: none !important;
  54.         }
  55.         .top {
  56.             border-radius: 15px
  57.         }
  58.         }
  59.  
  60.           /* Основной стиль для поля ввода */
  61.         #searchBar .textCtrl.QuickSearchQuery {
  62.             border-radius: 15px; /* Круглые углы для стилизации */
  63.             padding-right: 30px; /* Отступ для иконки очистки */
  64.             /* Остальные стили не изменяются */
  65.         }
  66.  
  67.         /* Стили для кнопки обновления ленты */
  68.         .UpdateFeedButton {
  69.             position: relative;
  70.             display: inline-block;
  71.             text-decoration: none; /* Если нужно, можно удалить, если текстовое оформление не требуется */
  72.             border-radius: 4px;
  73.             transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  74.         }
  75.  
  76.         .UpdateFeedButton:hover {
  77.             transform: scale(1.05);
  78.         }
  79.  
  80.         .UpdateFeedButton:active {
  81.             opacity: 0.7;
  82.             transform: scale(0.95);
  83.         }
  84.  
  85.         /* Стили для ссылки настройки ленты */
  86.         .SelectExcludedForumsLink {
  87.             position: relative;
  88.             display: inline-block;
  89.             text-decoration: none;
  90.             border-radius: 4px;
  91.             transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  92.         }
  93.  
  94.         .SelectExcludedForumsLink:hover {
  95.             transform: scale(1.05);
  96.         }
  97.  
  98.         .SelectExcludedForumsLink:active {
  99.             opacity: 0.7;
  100.             transform: scale(0.95);
  101.         }
  102.  
  103.  
  104.           /* !!!Меню с аватаркой */
  105.  
  106.            .secondaryContent.blockLinksList li a {
  107.             position: relative;
  108.             display: block;
  109.             transition: background-color 0.3s, transform 0.3s;
  110.             border-radius: 6px;
  111.  
  112.         }
  113.  
  114.         .secondaryContent.blockLinksList li a:hover {
  115.             background-color: rgba(0, 186, 120, 0.5);
  116.             transform: translateX(5px);
  117.         }
  118.  
  119.         .secondaryContent.blockLinksList li a:active {
  120.             background-color: rgba(0, 186, 120, 0.5);
  121.             transform: scale(0.98);
  122.         }
  123.  
  124.   /* Стили для кнопок input */
  125.         .button.primary.mbottom {
  126.             font-size: 13px;
  127.             color: white;
  128.             text-decoration: none;
  129.             background-color: rgb(34, 142, 93);
  130.             padding: 0px 15px;
  131.             border-style: none;
  132.             border-radius: 8px;
  133.             user-select: none;
  134.             font-style: normal;
  135.             text-align: center;
  136.             outline: none;
  137.             line-height: 34px;
  138.             display: inline-block;
  139.             cursor: pointer;
  140.             box-sizing: border-box;
  141.             vertical-align: top;
  142.             -webkit-appearance: none !important;
  143.             font-weight: 600;
  144.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  145.             overflow: hidden;
  146.             height: 34px;
  147.         }
  148.  
  149.         .PreviewButton.JsOnly {
  150.             font-size: 13px;
  151.             color: white;
  152.             text-decoration: none;
  153.             background-color: rgb(54, 54, 54);
  154.             padding: 0px 15px;
  155.             border-style: none;
  156.             border-radius: 6px;
  157.             user-select: none;
  158.             font-style: normal;
  159.             text-align: center;
  160.             outline: none;
  161.             line-height: 34px;
  162.             display: inline-block;
  163.             cursor: pointer;
  164.             box-sizing: border-box;
  165.             vertical-align: top;
  166.             -webkit-appearance: none !important;
  167.             font-weight: 600;
  168.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  169.             overflow: hidden;
  170.             height: 34px;
  171.         }
  172.  
  173.         /* Эффект увеличения при наведении */
  174.         .button.primary.mbottom:hover,
  175.         .PreviewButton.JsOnly:hover {
  176.             transform: scale(1.05);
  177.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  178.         }
  179.  
  180.         /* Эффект нажатия */
  181.         .button.primary.mbottom:active,
  182.         .PreviewButton.JsOnly:active {
  183.             transform: scale(0.95);
  184.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  185.         }
  186.  
  187.         .nodeTitle:hover,
  188.         .nodeTitle.active {
  189.             background-color: rgba(0, 186, 120, 0.1);
  190.             color: rgb(0, 186, 120);
  191.             border-bottom: 2px solid rgb(0, 186, 120);
  192.         }
  193.  
  194.         .node {
  195.             transition: color 0.3s ease;
  196.         }
  197.  
  198.         .node:hover {
  199.             color: rgb(0, 186, 120);
  200.         }
  201.  
  202.         .nodeTitle.active ~ .node {
  203.             color: rgb(0, 186, 120);
  204.         }
  205.  
  206.         /* Стили для кнопки "Создать тему" */
  207.         .CreateThreadButton {
  208.             display: inline-block;
  209.             background-color: rgb(34, 142, 93);
  210.             color: white;
  211.             font-size: 13px;
  212.             font-weight: bold;
  213.             text-align: center;
  214.             text-decoration: none;
  215.             cursor: pointer;
  216.             position: relative;
  217.             overflow: hidden;
  218.             transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  219.             line-height: 34px;
  220.             border-radius: 8px;
  221.             height: 34px;
  222.             border: none;
  223.             padding: 0;
  224.         }
  225.  
  226.         .CreateThreadButton:hover {
  227.             background-color: rgb(26, 114, 67);
  228.             transform: scale(1.05);
  229.             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  230.         }
  231.  
  232.         .CreateThreadButton:active {
  233.             transform: scale(0.95);
  234.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  235.         }
  236.  
  237.         .CreateThreadButton::before {
  238.             content: "";
  239.             position: absolute;
  240.             top: 0;
  241.             left: -100%;
  242.             height: 100%;
  243.             width: 100%;
  244.             background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  245.             transition: transform 0.5s ease;
  246.             z-index: 1;
  247.             transform: translateX(-100%);
  248.         }
  249.  
  250.         .CreateThreadButton:hover::before {
  251.             transform: translateX(100%);
  252.         }
  253.  
  254.         .CreateThreadButton span {
  255.             position: relative;
  256.             z-index: 2;
  257.         }
  258.  
  259.         /* Стили для иконки лайка */
  260.         .LikeLink {
  261.             position: relative;
  262.             display: inline-block;
  263.         }
  264.  
  265.         .LikeLink .icon.like2Icon {
  266.             fill: rgb(140, 140, 140);
  267.             transition: fill 0.3s ease, transform 0.2s ease;
  268.         }
  269.  
  270.         .LikeLink:hover .icon.like2Icon {
  271.             transform: scale(1.1);
  272.         }
  273.  
  274.         .LikeLink:active .icon.like2Icon {
  275.             transform: scale(0.95);
  276.         }
  277.  
  278.         /* Стили для иконок счетчика и скрытых ответов */
  279.         .PostCommentButton .icon.postCounterIcon,
  280.         ._hiddenReplyButton .icon.hiddenReplyIcon,
  281.         .LikeLink .icon.likeCounterIcon {
  282.             fill: rgb(140, 140, 140);
  283.             transition: fill 0.3s ease, transform 0.2s ease;
  284.         }
  285.  
  286.         .PostCommentButton:hover .icon.postCounterIcon,
  287.         ._hiddenReplyButton:hover .icon.hiddenReplyIcon,
  288.         .LikeLink:hover .icon.likeCounterIcon {
  289.             transform: scale(1.1);
  290.         }
  291.  
  292.         .PostCommentButton:active .icon.postCounterIcon,
  293.         ._hiddenReplyButton:active .icon.hiddenReplyIcon,
  294.         .LikeLink:active .icon.likeCounterIcon {
  295.             transform: scale(0.95);
  296.         }
  297.  
  298.         /* Колокольчик и личные сообщения */
  299.         .navTabs .navTab.Popup .navLink .counter-container svg,
  300.         .navTabs .navTab.PopupOpen .navLink .counter-container svg {
  301.             transition: transform 0.3s ease;
  302.         }
  303.  
  304.         .navTabs .navTab.Popup .navLink:hover .counter-container svg,
  305.         .navTabs .navTab.PopupOpen .navLink .counter-container svg:hover {
  306.             transform: rotate(-15deg);
  307.         }
  308.  
  309.         /* Наклон SVG значков при наведении */
  310.         .nodeText .nodeTitle a::before {
  311.             transition: transform 0.3s ease;
  312.         }
  313.  
  314.         .nodeTitle:hover a::before {
  315.             transform: rotate(-15deg);
  316.         }
  317.  
  318.         /* Стили для логотипа */
  319.         #lzt-logo {
  320.             display: inline-block;
  321.             transition: transform 0.2s ease, opacity 0.2s ease;
  322.         }
  323.  
  324.         /* Эффект увеличения при наведении */
  325.         #lzt-logo:hover {
  326.             transform: scale(1.05);
  327.         }
  328.  
  329.         /* Эффект нажатия */
  330.         #lzt-logo:active {
  331.             transform: scale(0.95);
  332.             opacity: 0.7;
  333.         }
  334.  
  335.         /* Стили для кнопки чата */
  336.         .chat2-button {
  337.             background-color: rgb(0, 186, 120);
  338.             border-radius: 50%;
  339.             transition: transform 0.3s ease, background-color 0.3s ease;
  340.             cursor: pointer;
  341.         }
  342.  
  343.         .chat2-button:hover {
  344.             transform: scale(1.1) rotate(5deg);
  345.             background-color: rgb(0, 200, 130);
  346.         }
  347.  
  348.         .chat2-button:active {
  349.             transform: scale(0.95) rotate(-5deg);
  350.             background-color: rgb(0, 160, 100);
  351.         }
  352.  
  353.         .chat2-button:focus {
  354.             outline: none;
  355.         }
  356.  
  357.         /* Анимация значков визитор панели */
  358.         .likeCounterIcon {
  359.             transition: transform 0.3s ease;
  360.         }
  361.  
  362.         .likeCounterIcon:hover {
  363.             transform: scale(1.1);
  364.             transition: transform 0.3s ease;
  365.         }
  366.  
  367.         .postCounterIcon {
  368.             transition: transform 0.3s ease;
  369.         }
  370.  
  371.         .postCounterIcon:hover {
  372.             transform: scale(1.1);
  373.             transition: transform 0.3s ease;
  374.         }
  375.  
  376.         .button.primary.block {
  377.             transition: transform 0.3s ease;
  378.  
  379.         }
  380.         .button.primary.block:hover {
  381.             transform: scale(1.05);
  382.             transition: transform 0.3s ease;
  383.         }
  384.  
  385.         /* Анимация тултип панели в профиле */
  386.         .page_counter.Tooltip {
  387.             transition: transform 0.15s ease;
  388.         }
  389.  
  390.         .page_counter.Tooltip:hover {
  391.             transform: scale(1.05);
  392.             transition: transform 0.15s ease;
  393.         }
  394.  
  395.         .page_counter {
  396.             transition: transform 0.15s ease;
  397.         }
  398.  
  399.         .page_counter:hover {
  400.             transform: scale(1.05);
  401.             transition: transform 0.15s ease;
  402.  
  403.     `);
  404.  
  405.  
  406.  
  407.  
  408.     // Ловим нажатие на логотип
  409.     const logo = document.querySelector('#lzt-logo');
  410.     if (logo) {
  411.         logo.addEventListener('click', () => {
  412.             window.location.href = 'https://lolz.live';
  413.         });
  414.     }
  415.  
  416.     // Ловим клик на кнопку создания темы
  417.     const createThreadButton = document.querySelector('.CreateThreadButton');
  418.     if (createThreadButton) {
  419.         createThreadButton.addEventListener('click', () => {
  420.             // Действия при нажатии на кнопку создания темы
  421.         });
  422.     }
  423.  
  424.  
  425. (function() {
  426.     'use strict';
  427.  
  428.     // CSS для зеленого кружочка
  429.     const style = document.createElement('style');
  430.     style.innerHTML = `
  431.         .green-circle {
  432.             position: absolute;
  433.             right: 10px;
  434.             top: 50%;
  435.             transform: translateY(-50%);
  436.             width: 10px;
  437.             height: 10px;
  438.             background-color: rgb(34, 142, 93);
  439.             border-radius: 50%;
  440.             opacity: 0;
  441.             transition: opacity 0.2s ease-in-out;
  442.         }
  443.         .discussionListItem:hover .green-circle {
  444.             opacity: 1;
  445.         }
  446.     `;
  447.     document.head.appendChild(style);
  448.  
  449.     // Функция для добавления зеленого кружочка
  450.     function addGreenCircle(element) {
  451.         const circle = document.createElement('div');
  452.         circle.classList.add('green-circle');
  453.         element.appendChild(circle);
  454.     }
  455.  
  456.     // Найти все посты и добавить зеленые кружочки
  457.     const threads = document.querySelectorAll('.discussionListItem');
  458.     threads.forEach(thread => {
  459.         addGreenCircle(thread);
  460.     });
  461.  
  462.     // Функция для замены текста плейсхолдера
  463.     function replacePlaceholderText() {
  464.         const searchInput = document.querySelector('#searchBar .textCtrl.QuickSearchQuery');
  465.         if (searchInput) {
  466.             searchInput.placeholder = "Что будем искать?";
  467.         }
  468.     }
  469.  
  470.     // Запуск функции замены текста
  471.     replacePlaceholderText();
  472.  
  473. })();
  474. })();