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. })();