4pda.ru Forum Tweaks

makes the forum more compact, convenient and interactive

  1. /* ==UserStyle==
  2. @name:ru 4pda.ru Forum Tweaks
  3. @name 4pda.ru Forum Tweaks
  4. @namespace almaceleste
  5. @version 0.2.5
  6. @description makes the forum more compact, convenient and interactive
  7. @description:ru делает форум более компактным, удобным и интерактивным
  8. @author 🄯 almaceleste (https://almaceleste.github.io)
  9. @license AGPL-3.0-or-later; http://www.gnu.org/licenses/agpl.txt
  10.  
  11. @homepageURL https://greatest.deepsurf.us/en/scripts/404161-4pda-ru-forum-tweaks
  12. @homepageURL https://userstyles.org/styles/184315/4pda-ru-forum-tweaks
  13. @homepageURL https://github.com/almaceleste/userstyles
  14. @supportURL https://github.com/almaceleste/userstyles/issues
  15.  
  16. @preprocessor uso
  17. @var select highlight-color 'highlight color' [
  18. 'transparent',
  19. 'black',
  20. 'darkgreen',
  21. 'deepskyblue*',
  22. 'gold',
  23. 'indigo',
  24. 'lime',
  25. 'magenta',
  26. 'navy',
  27. 'orangered',
  28. 'white'
  29. ]
  30. @var select background-color 'filling color' {
  31. 'transparent:transparent': 'transparent',
  32. 'deepgray:deepgray (#111)': '#111',
  33. 'darkgray:darkgray (#333)*': '#333',
  34. 'middlegray:middlegray (#555)': '#555',
  35. 'dimgray:dimgray': 'dimgray',
  36. 'gray:gray': 'gray',
  37. 'lightgray:lightgray': 'lightgray',
  38. 'darkslategray:darkslategray': 'darkslategray',
  39. 'slategray:slategray': 'slategray',
  40. 'whitesmoke:whitesmoke': 'whitesmoke',
  41. 'white:white': 'white'
  42. }
  43. @var select postbuttons-position 'post buttons position' {
  44. 'old:old style': `
  45. .borderwrap .ipbtable tbody tr:nth-of-type(3) {
  46. box-shadow: none !important;
  47. }
  48. `,
  49. 'middle*': `
  50. .borderwrap .ipbtable tbody tr:nth-of-type(3) {
  51. bottom: 0;
  52. position: absolute;
  53. right: 50%;
  54. transform: translateX(50%);
  55. }
  56. .borderwrap .ipbtable:hover tbody tr:nth-of-type(3) {
  57. display: inline-block !important;
  58. }
  59. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(1) {
  60. width: 170px;
  61. }
  62. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(2) {
  63. width: 450px;
  64. }
  65. `,
  66. 'left:left (may overlap some elements)': `
  67. .borderwrap .ipbtable tbody tr:nth-of-type(3) {
  68. bottom: 0;
  69. position: absolute;
  70. left: 0;
  71. }
  72. .borderwrap .ipbtable:hover tbody tr:nth-of-type(3) {
  73. display: inline-block !important;
  74. }
  75. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(1) {
  76. width: 170px;
  77. }
  78. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(2) {
  79. width: 450px;
  80. }
  81. `,
  82. 'right': `
  83. .borderwrap .ipbtable tbody tr:nth-of-type(3) {
  84. bottom: 0;
  85. position: absolute;
  86. right: 0;
  87. }
  88. .borderwrap .ipbtable:hover tbody tr:nth-of-type(3) {
  89. display: inline-block !important;
  90. }
  91. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(1) {
  92. width: 170px;
  93. }
  94. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(2) {
  95. width: 450px;
  96. }
  97. `
  98. }
  99. @var text qr_open-height 'bottom indentation' 275
  100. ==/UserStyle== */
  101.  
  102. /* main page */
  103. @-moz-document regexp('https?://4pda\\.ru/forum.*') {
  104. /* signed as */
  105. .user_home {
  106. background-color: /*[[background-color]]*/;
  107. display: block !important;
  108. position: sticky !important;
  109. top: 0 !important;
  110. width: 100% !important;
  111. z-index: 99 !important;
  112. }
  113. /* usermenu and links top panel */
  114. #userlinks {
  115. position: sticky !important;
  116. top: 14px !important;
  117. z-index: 99 !important;
  118. }
  119. .popupmenu > .popupmenu-item,
  120. .popupmenu > .popupmenu-item-last,
  121. .popupmenu-new > .popupmenu-item-last > .popupmenu-item,
  122. .popupmenu-new > .popupmenu-item-last > .popupmenu-item-last {
  123. padding-left: 0 !important;
  124. position: relative !important;
  125. }
  126. .popupmenu > .popupmenu-item > a,
  127. .popupmenu > .popupmenu-item-last > a,
  128. .popupmenu-new > .popupmenu-item-last > .popupmenu-item > a,
  129. .popupmenu-new > .popupmenu-item-last > .popupmenu-item-last > a,
  130. .popupmenu-new > .popupmenu-item-last > .popupmenu-item-last > b > a {
  131. display: block !important;
  132. padding-left: 25px !important;
  133. }
  134. .popupmenu > .popupmenu-item > img,
  135. .popupmenu > .popupmenu-item-last > img,
  136. .popupmenu-new > .popupmenu-item-last > .popupmenu-item > img,
  137. .popupmenu-new > .popupmenu-item-last > .popupmenu-item-last > img,
  138. .popupmenu-new > .popupmenu-item-last > .popupmenu-item-last > b > img {
  139. left: 5px !important;
  140. position: absolute !important;
  141. top: 50% !important;
  142. transform: translateY(-50%) !important;
  143. }
  144.  
  145. }
  146. /* tree page & forum page */
  147. @-moz-document regexp('https?://4pda\\.ru/forum/index\\.php\\?act.*'),
  148. regexp('https?://4pda\\.ru/forum/index\\.php\\?showforum.*') {
  149. /* subforum section header */
  150. body > div > .borderwrap > .maintitle {
  151. position: sticky !important;
  152. top: 43px !important;
  153. z-index: 98 !important;
  154. }
  155. /* subforum options menu */
  156. body > div > .borderwrap > .maintitle .popupmenu {
  157. position: absolute !important;
  158. top: 22px !important;
  159. transform: translateX(-16px) !important;
  160. }
  161. /* topic list header */
  162. body > div > .borderwrap > .ipbtable > tbody > tr:first-child > th {
  163. position: sticky !important;
  164. top: 68px !important;
  165. z-index: 97 !important;
  166. }
  167. }
  168. /* topic page */
  169. @-moz-document regexp('https?://4pda\\.ru/forum/index\\.php\\?showtopic.*') {
  170. /* top paging nav and search panel */
  171. body > div > .ipbtable:nth-of-type(1) {
  172. background-color: /*[[background-color]]*/;
  173. position: sticky;
  174. top: 44px;
  175. z-index: 99;
  176. }
  177. /* paging go-to menu */
  178. #page-jump-1_menu {
  179. display: inline-block;
  180. position: absolute !important;
  181. top: -34px !important;
  182. transform: translateX(-15px) !important;
  183. }
  184. #page-jump-1_menu .popupmenu-category,
  185. #page-jump-1_menu .popupmenu-item-last {
  186. display: inline-block;
  187. }
  188. /* topic title bar with options menu */
  189. .maintitle {
  190. position: sticky;
  191. top: 77px;
  192. z-index: 99;
  193. }
  194. .maintitle .popupmenu {
  195. position: absolute !important;
  196. top: 22px !important;
  197. transform: translateX(-32px) !important;
  198. }
  199. /* topic message */
  200. .borderwrap .ipbtable {
  201. margin-bottom: 5px !important;
  202. }
  203. .borderwrap .ipbtable .catend {
  204. display: none !important;
  205. }
  206. /* topic message user information */
  207. .borderwrap .ipbtable tbody tr:nth-of-type(2) td:nth-of-type(1) .postdetails center {
  208. font-size: 9px;
  209. line-height: 12px;
  210. transform: scale(1.1);
  211. }
  212. /* topic message user reputation */
  213. .borderwrap .ipbtable tbody tr:nth-of-type(2) td:nth-of-type(1) .postdetails a:nth-last-child(-n+3):hover img {
  214. animation: postdetails-zoom .1s;
  215. transform: scale(1.5);
  216. }
  217. /* topic message user avatar */
  218. .borderwrap .ipbtable .postdetails center .user-avatar {
  219. display: block;
  220. height: 40px;
  221. position: relative;
  222. }
  223. .borderwrap .ipbtable .postdetails center .user-avatar img {
  224. left: 50%;
  225. position: absolute;
  226. top: 7px;
  227. transform: translateX(-50%);
  228. }
  229. .borderwrap .ipbtable .postdetails center .user-avatar img {
  230. height: 45px;
  231. max-height: unset !important;
  232. max-width: unset !important;
  233. transition: all .1s ease;
  234. }
  235. .borderwrap .ipbtable .postdetails center .user-avatar:hover img {
  236. animation: avatar-zoom .1s;
  237. height: 150px;
  238. }
  239. /* topic message user menu button */
  240. .borderwrap .ipbtable tbody tr:nth-of-type(1) td:nth-of-type(1) {
  241. position: relative;
  242. }
  243. .borderwrap .ipbtable tbody tr:nth-of-type(1) td:nth-of-type(1) .popupmenu-new {
  244. position: absolute !important;
  245. top: 26px !important;
  246. transform: translateX(100px) !important;
  247. }
  248. /* topic message buttons bottom panel */
  249. .borderwrap .ipbtable tbody tr:nth-of-type(3) {
  250. display: none !important;
  251. }
  252. .borderwrap .ipbtable:hover tbody tr:nth-of-type(3) {
  253. display: table-row !important;
  254. }
  255.  
  256.  
  257. /* topic message floating buttons panel */
  258. .borderwrap .ipbtable tbody tr:nth-of-type(3) {
  259. box-shadow: 0 0 5px 1px /*[[highlight-color]]*/ !important;
  260. }
  261. /*[[postbuttons-position]]*/
  262.  
  263.  
  264. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(1) {
  265. width: 170px;
  266. }
  267. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(2) {
  268. width: 450px;
  269. }
  270. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(2) div:nth-of-type(3) {
  271. float: right;
  272. position: relative;
  273. }
  274. .borderwrap .ipbtable tbody tr:nth-of-type(3) .formbuttonrow:nth-of-type(2) div:nth-of-type(3) .popupmenu {
  275. position: absolute;
  276. left: unset !important;
  277. right: 13px !important;
  278. top: -50px !important;
  279. }
  280. /* whole topic message */
  281. .borderwrap .ipbtable tbody {
  282. box-shadow: none !important;
  283. filter: brightness(90%) !important;
  284. }
  285. .borderwrap .ipbtable:hover tbody {
  286. box-shadow: 0 0 5px 1px /*[[highlight-color]]*/ !important;
  287. filter: brightness(100%) !important;
  288. }
  289. /* topic message buttons and links highlighting */
  290. .borderwrap .ipbtable a:hover,
  291. .borderwrap .ipbtable .formbuttonrow a.g-btn:hover {
  292. filter: drop-shadow(0 0 2px /*[[highlight-color]]*/) !important
  293. }
  294. /* reply section */
  295. #qr_open {
  296. height: /*[[qr_open-height]]*/px;
  297. }
  298. #qr_open #qr-form-default {
  299. bottom: 0 !important;
  300. position: fixed !important;
  301. width: 98%;
  302. }
  303. #qr_open #ed--1_textarea {
  304. resize: vertical !important;
  305. }
  306.  
  307. /* animations */
  308. @keyframes postdetails-zoom {
  309. from {
  310. transform: scale(1);
  311. }
  312. to {
  313. transform: scale(1.5);
  314. }
  315. }
  316. @keyframes avatar-zoom {
  317. from {
  318. height: 55px;
  319. }
  320. to {
  321. height: 150px;
  322. }
  323. }
  324. }