Fullchan X

8chan features script

当前为 2025-04-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Fullchan X
  3. // @namespace Violentmonkey Scripts
  4. // @match *://8chan.moe/*
  5. // @match *://8chan.se/*
  6. // @match *://8chan.cc/*
  7. // @match *://8chan.cc/*
  8. // @run-at document-end
  9. // @grant none
  10. // @version 1.12.12
  11. // @author vfyxe
  12. // @description 8chan features script
  13. // ==/UserScript==
  14.  
  15.  
  16. class fullChanX extends HTMLElement {
  17. constructor() {
  18. super();
  19. }
  20.  
  21. init() {
  22. this.settingsEl = document.querySelector('fullchan-x-settings');
  23. this.settingsAll = this.settingsEl.settings;
  24. this.settings = this.settingsAll.main;
  25.  
  26. this.settingsThreadBanisher = this.settingsAll.threadBanisher;
  27. this.settingsMascot = this.settingsAll.mascot;
  28. this.isThread = !!document.querySelector('.opCell');
  29. this.isDisclaimer = window.location.href.includes('disclaimer');
  30. Object.keys(this.settings).forEach(key => {
  31. this[key] = this.settings[key]?.value;
  32. });
  33.  
  34. this.settingsButton = this.querySelector('#fcx-settings-btn');
  35. this.settingsButton.addEventListener('click', () => this.settingsEl.toggle());
  36. this.handleBoardLinks();
  37. if (!this.isThread) {
  38. if (this.settingsThreadBanisher.enableThreadBanisher.value) this.banishThreads(this.settingsThreadBanisher);
  39. return;
  40. }
  41. this.quickReply = document.querySelector('#quick-reply');
  42. this.qrbody = document.querySelector('#qrbody');
  43. this.threadParent = document.querySelector('#divThreads');
  44. this.threadId = this.threadParent.querySelector('.opCell').id;
  45. this.thread = this.threadParent.querySelector('.divPosts');
  46. this.posts = [...this.thread.querySelectorAll('.postCell')];
  47. this.postOrder = 'default';
  48. this.postOrderSelect = this.querySelector('#thread-sort');
  49. this.myYousLabel = this.querySelector('.my-yous__label');
  50. this.yousContainer = this.querySelector('#my-yous');
  51.  
  52. this.gallery = document.querySelector('fullchan-x-gallery');
  53. this.galleryButton = this.querySelector('#fcx-gallery-btn');
  54.  
  55. this.updateYous();
  56. this.observers();
  57.  
  58. if (this.enableFileExtensions) this.handleTruncatedFilenames();
  59. if (this.settingsMascot.enableMascot.value) this.showMascot(this.settingsMascot);
  60.  
  61. this.styleUI();
  62. }
  63.  
  64. styleUI () {
  65. this.style.setProperty('--top', this.uiTopPosition);
  66. this.style.setProperty('--right', this.uiRightPosition);
  67. this.classList.toggle('fcx-in-nav', this.moveToNav)
  68. this.classList.toggle('fcx--dim', this.uiDimWhenInactive && !this.moveToNave);
  69. this.classList.toggle('page-thread', this.isThread);
  70. const style = document.createElement('style');
  71.  
  72. if (this.hideDefaultBoards !== '' && this.hideDefaultBoards.toLowerCase() !== 'all') {
  73. style.textContent += '#navTopBoardsSpan{display:block!important;}'
  74. }
  75. document.body.appendChild(style);
  76. }
  77.  
  78. checkRegexList(string, regexList) {
  79. const regexObjects = regexList.map(r => {
  80. const match = r.match(/^\/(.*)\/([gimsuy]*)$/);
  81. return match ? new RegExp(match[1], match[2]) : null;
  82. }).filter(Boolean);
  83.  
  84. return regexObjects.some(regex => regex.test(string));
  85. }
  86.  
  87. banishThreads(banisher) {
  88. this.threadsContainer = document.querySelector('#divThreads');
  89. if (!this.threadsContainer) return;
  90. this.threadsContainer.classList.add('fcx-threads');
  91.  
  92. const currentBoard = document.querySelector('#labelBoard')?.textContent.replace(/\//g,'');
  93. const boards = banisher.boards.value?.split(',') || [''];
  94. if (!boards.includes(currentBoard)) return;
  95.  
  96. const minCharacters = banisher.minimumCharacters.value || 0;
  97. const banishTerms = banisher.banishTerms.value?.split('\n') || [];
  98. const banishAnchored = banisher.banishAnchored.value;
  99. const wlCyclical = banisher.whitelistCyclical.value;
  100. const wlReplyCount = parseInt(banisher.whitelistReplyCount.value);
  101.  
  102. const banishSorter = (thread) => {
  103. if (thread.querySelector('.pinIndicator') || thread.classList.contains('fcx-sorted')) return;
  104. let shouldBanish = false;
  105.  
  106. const isAnchored = thread.querySelector('.bumpLockIndicator');
  107. const isCyclical = thread.querySelector('.cyclicIndicator');
  108. const replyCount = parseInt(thread.querySelector('.labelReplies')?.textContent?.trim()) || 0;
  109. const threadSubject = thread.querySelector('.labelSubject')?.textContent?.trim() || '';
  110. const threadMessage = thread.querySelector('.divMessage')?.textContent?.trim() || '';
  111. const threadContent = threadSubject + ' ' + threadMessage;
  112.  
  113. const hasMinChars = threadMessage.length > minCharacters;
  114. const hasWlReplyCount = replyCount > wlReplyCount;
  115.  
  116. if (!hasMinChars) shouldBanish = true;
  117. if (isAnchored && banishAnchored) shouldBanish = true;
  118. if (isCyclical && wlCyclical) shouldBanish = false;
  119. if (hasWlReplyCount) shouldBanish = false;
  120.  
  121. // run heavy regex process only if needed
  122. if (!shouldBanish && this.checkRegexList(threadContent, banishTerms)) shouldBanish = true;
  123. if (shouldBanish) thread.classList.add('shit-thread');
  124. thread.classList.add('fcx-sorted');
  125. };
  126.  
  127. const banishThreads = () => {
  128. this.threads = this.threadsContainer.querySelectorAll('.catalogCell');
  129. this.threads.forEach(thread => banishSorter(thread));
  130. };
  131. banishThreads();
  132.  
  133. const observer = new MutationObserver((mutationsList) => {
  134. for (const mutation of mutationsList) {
  135. if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
  136. banishThreads();
  137. break;
  138. }
  139. }
  140. });
  141.  
  142. observer.observe(this.threadsContainer, { childList: true });
  143. }
  144.  
  145. handleBoardLinks () {
  146. const navBoards = document.querySelector('#navTopBoardsSpan');
  147. const customBoardLinks = this.customBoardLinks?.toLowerCase().replace(/\s/g,'').split(',');
  148. let hideDefaultBoards = this.hideDefaultBoards?.toLowerCase().replace(/\s/g,'') || '';
  149. const urlCatalog = this.catalogBoardLinks ? '/catalog.html' : '';
  150.  
  151. if (hideDefaultBoards === 'all') {
  152. document.body.classList.add('hide-navboard');
  153. } else {
  154. const waitForNavBoards = setInterval(() => {
  155. const navBoards = document.querySelector('#navTopBoardsSpan');
  156. if (!navBoards || !navBoards.querySelector('a')) return;
  157.  
  158. clearInterval(waitForNavBoards);
  159.  
  160. hideDefaultBoards = hideDefaultBoards.split(',');
  161. const defaultLinks = [...navBoards.querySelectorAll('a')];
  162. defaultLinks.forEach(link => {
  163. link.href += urlCatalog;
  164. const linkText = link.textContent;
  165. const shouldHide = hideDefaultBoards.includes(linkText) || customBoardLinks.includes(linkText);
  166. link.classList.toggle('hidden', shouldHide);
  167. });
  168. }, 50);
  169. }
  170.  
  171. if (this.customBoardLinks.length > 0) {
  172. const customNav = document.createElement('span');
  173. customNav.classList = 'nav-boards nav-boards--custom';
  174. customNav.innerHTML = '<span>[</span>';
  175.  
  176. customBoardLinks.forEach((board, index) => {
  177. const link = document.createElement('a');
  178. link.href = '/' + board + urlCatalog;
  179. link.textContent = board;
  180. customNav.appendChild(link);
  181. if (index < customBoardLinks.length - 1) customNav.innerHTML += '<span>/</span>';
  182. });
  183.  
  184. customNav.innerHTML += '<span>]</span>';
  185. navBoards?.parentNode.insertBefore(customNav, navBoards);
  186. }
  187. }
  188.  
  189. observers () {
  190. this.postOrderSelect.addEventListener('change', (event) => {
  191. this.postOrder = event.target.value;
  192. this.assignPostOrder();
  193. });
  194.  
  195. const observerCallback = (mutationsList, observer) => {
  196. for (const mutation of mutationsList) {
  197. if (mutation.type === 'childList') {
  198. this.posts = [...this.thread.querySelectorAll('.postCell')];
  199. if (this.postOrder !== 'default') this.assignPostOrder();
  200. this.updateYous();
  201. this.gallery.updateGalleryImages();
  202. if (this.settings.enableFileExtensions) this.handleTruncatedFilenames();
  203. }
  204. }
  205. };
  206.  
  207. const threadObserver = new MutationObserver(observerCallback);
  208. threadObserver.observe(this.thread, { childList: true, subtree: false });
  209.  
  210. if (this.enableNestedQuotes) {
  211. this.threadParent.addEventListener('click', event => {
  212. this.handleClick(event);
  213. });
  214. }
  215.  
  216. this.galleryButton.addEventListener('click', () => this.gallery.open());
  217. this.myYousLabel.addEventListener('click', (event) => {
  218. if (this.myYousLabel.classList.contains('unseen')) {
  219. this.yousContainer.querySelector('.unseen').click();
  220. }
  221. });
  222. }
  223.  
  224. handleClick (event) {
  225. const clicked = event.target;
  226.  
  227. const innerOP = clicked.closest('.innerOP');
  228. const post = innerOP || clicked.closest('.innerPost');
  229. if (!post) return;
  230.  
  231. const isNested = !!post.closest('.innerNested');
  232. const nestQuote = clicked.closest('.quoteLink') || clicked.closest('.panelBacklinks a');
  233. const postMedia = clicked.closest('a[data-filemime]');
  234. const postId = clicked.closest('.linkQuote');
  235. const anonId = clicked.closest('.labelId');
  236.  
  237. if (nestQuote) {
  238. if (event.target.closest('.fcx-prevent-nesting')) return;
  239. event.preventDefault();
  240. if (innerOP && nestQuote.textContent.includes('OP')) return;
  241. this.nestQuote(nestQuote, post, innerOP);
  242. } else if (postMedia && isNested) {
  243. this.handleMediaClick(event, postMedia);
  244. } else if (postId && isNested) {
  245. this.handleIdClick(postId);
  246. } else if (anonId) {
  247. this.handleAnonIdClick(anonId, event);
  248. }
  249. }
  250.  
  251. handleAnonIdClick (anonId, event) {
  252. this.anonIdPosts?.remove();
  253. if (anonId === this.anonId) {
  254. this.anonId = null;
  255. return;
  256. }
  257.  
  258. this.anonId = anonId;
  259. const anonIdText = anonId.textContent.split(' ')[0];
  260. this.anonIdPosts = document.createElement('div');
  261. this.anonIdPosts.classList = 'fcx-id-posts fcx-prevent-nesting';
  262.  
  263. const match = window.location.pathname.match(/^\/[^/]+\/res\/\d+\.html/);
  264. const prepend = match ? `${match[0]}#` : '';
  265.  
  266. const selector = `.postInfo:has(.labelId[style="background-color: #${anonIdText}"]) .linkQuote`;
  267.  
  268. const postIds = [...this.threadParent.querySelectorAll(selector)].map(link => {
  269. const postId = link.getAttribute('href').split('#q').pop();
  270. const newLink = document.createElement('a');
  271. newLink.className = 'quoteLink';
  272. newLink.href = prepend + postId;
  273. newLink.textContent = `>>${postId}`;
  274. return newLink;
  275. });
  276.  
  277. postIds.forEach(postId => this.anonIdPosts.appendChild(postId));
  278. anonId.insertAdjacentElement('afterend', this.anonIdPosts);
  279.  
  280. this.setPostListeners(this.anonIdPosts);
  281. }
  282.  
  283.  
  284. handleMediaClick (event, postMedia) {
  285. if (postMedia.dataset.filemime === "video/webm") return;
  286. event.preventDefault();
  287. const imageSrc = `${postMedia.href}`;
  288. const imageEl = postMedia.querySelector('img');
  289. if (!postMedia.dataset.thumbSrc) postMedia.dataset.thumbSrc = `${imageEl.src}`;
  290.  
  291. const isExpanding = imageEl.src !== imageSrc;
  292.  
  293. if (isExpanding) {
  294. imageEl.src = imageSrc;
  295. imageEl.classList
  296. }
  297. imageEl.src = isExpanding ? imageSrc : postMedia.dataset.thumbSrc;
  298. imageEl.classList.toggle('imgExpanded', isExpanding);
  299. }
  300.  
  301. handleIdClick (postId) {
  302. const idNumber = '>>' + postId.textContent;
  303. this.quickReply.style.display = 'block';
  304. this.qrbody.value += idNumber + '\n';
  305. }
  306.  
  307. handleTruncatedFilenames () {
  308. this.postFileNames = [...this.threadParent.querySelectorAll('.originalNameLink[download]:not([data-file-ext])')];
  309. this.postFileNames.forEach(fileName => {
  310. if (!fileName.textContent.includes('.')) return;
  311. const strings = fileName.textContent.split('.');
  312. const typeStr = `.${strings.pop()}`;
  313. const typeEl = document.createElement('a');
  314. typeEl.classList = ('file-ext originalNameLink');
  315. typeEl.textContent = typeStr;
  316. fileName.dataset.fileExt = typeStr;
  317. fileName.textContent = strings.join('.');
  318. fileName.parentNode.insertBefore(typeEl, fileName.nextSibling);
  319. });
  320. }
  321.  
  322. assignPostOrder () {
  323. const postOrderReplies = (post) => {
  324. const replyCount = post.querySelectorAll('.panelBacklinks a').length;
  325. post.style.order = 100 - replyCount;
  326. }
  327.  
  328. const postOrderCatbox = (post) => {
  329. const postContent = post.querySelector('.divMessage').textContent;
  330. const matches = postContent.match(/catbox\.moe/g);
  331. const catboxCount = matches ? matches.length : 0;
  332. post.style.order = 100 - catboxCount;
  333. }
  334.  
  335. if (this.postOrder === 'default') {
  336. this.thread.style.display = 'block';
  337. return;
  338. }
  339.  
  340. this.thread.style.display = 'flex';
  341.  
  342. if (this.postOrder === 'replies') {
  343. this.posts.forEach(post => postOrderReplies(post));
  344. } else if (this.postOrder === 'catbox') {
  345. this.posts.forEach(post => postOrderCatbox(post));
  346. }
  347. }
  348.  
  349. updateYous () {
  350. this.yous = this.posts.filter(post => post.querySelector('.quoteLink.you'));
  351. this.yousLinks = this.yous.map(you => {
  352. const youLink = document.createElement('a');
  353. youLink.textContent = '>>' + you.id;
  354. youLink.href = '#' + you.id;
  355. return youLink;
  356. })
  357.  
  358. let hasUnseenYous = false;
  359. this.setUnseenYous();
  360.  
  361. this.yousContainer.innerHTML = '';
  362. this.yousLinks.forEach(you => {
  363. const youId = you.textContent.replace('>>', '');
  364. if (!this.seenYous.includes(youId)) {
  365. you.classList.add('unseen');
  366. hasUnseenYous = true
  367. }
  368. this.yousContainer.appendChild(you)
  369. });
  370.  
  371. this.myYousLabel.classList.toggle('unseen', hasUnseenYous);
  372.  
  373. if (this.replyTabIcon === '') return;
  374. const icon = this.replyTabIcon;
  375. document.title = hasUnseenYous
  376. ? document.title.startsWith(`${icon} `)
  377. ? document.title
  378. : `${icon} ${document.title}`
  379. : document.title.replace(new RegExp(`^${icon} `), '');
  380. }
  381.  
  382. observeUnseenYou(you) {
  383. you.classList.add('observe-you');
  384.  
  385. const observer = new IntersectionObserver((entries, observer) => {
  386. entries.forEach(entry => {
  387. if (entry.isIntersecting) {
  388. const id = you.id;
  389. you.classList.remove('observe-you');
  390.  
  391. if (!this.seenYous.includes(id)) {
  392. this.seenYous.push(id);
  393. localStorage.setItem(this.seenKey, JSON.stringify(this.seenYous));
  394. }
  395.  
  396. observer.unobserve(you);
  397. this.updateYous();
  398.  
  399. }
  400. });
  401. }, { rootMargin: '0px', threshold: 0.1 });
  402.  
  403. observer.observe(you);
  404. }
  405.  
  406. setUnseenYous() {
  407. this.seenKey = `${this.threadId}-seen-yous`;
  408. this.seenYous = JSON.parse(localStorage.getItem(this.seenKey));
  409.  
  410. if (!this.seenYous) {
  411. this.seenYous = [];
  412. localStorage.setItem(this.seenKey, JSON.stringify(this.seenYous));
  413. }
  414.  
  415. this.unseenYous = this.yous.filter(you => !this.seenYous.includes(you.id));
  416.  
  417. this.unseenYous.forEach(you => {
  418. if (!you.classList.contains('observe-you')) {
  419. this.observeUnseenYou(you);
  420. }
  421. });
  422. }
  423.  
  424. nestQuote(quoteLink, parentPost, innerOP) {
  425. const parentPostMessage = parentPost.querySelector('.divMessage');
  426. const quoteId = quoteLink.href.split('#').pop();
  427. const quotePost = document.getElementById(quoteId);
  428. if (!quotePost) return;
  429.  
  430. if (!quoteLink.textContent.includes('OP') && quoteLink.closest(`#${CSS.escape(quoteId)}`)) return;
  431.  
  432. const quotePostContent = quotePost.querySelector('.innerOP') || quotePost.querySelector('.innerPost');
  433. if (!quotePostContent) return;
  434.  
  435. const existing = parentPost.querySelector(`.nestedPost[data-quote-id="${quoteId}"]`);
  436. if (existing) {
  437. quoteLink.classList.remove('active');
  438. existing.remove();
  439. return;
  440. }
  441.  
  442. const isReply = !quoteLink.classList.contains('quoteLink');
  443.  
  444. const wrapper = document.createElement('div');
  445. wrapper.classList.add('nestedPost');
  446. wrapper.setAttribute('data-quote-id', quoteId);
  447.  
  448. const clone = quotePostContent.cloneNode(true);
  449. clone.style.whiteSpace = 'unset';
  450. clone.classList.add('innerNested');
  451. wrapper.appendChild(clone);
  452.  
  453. if (!isReply) {
  454. quoteLink.insertAdjacentElement('afterend', wrapper);
  455. } else {
  456. parentPostMessage.insertBefore(wrapper, parentPostMessage.firstChild);
  457. quoteLink.classList.add('active');
  458. }
  459.  
  460. this.setPostListeners(wrapper);
  461. }
  462.  
  463. setPostListeners(parentPost) {
  464. const postLinks = [
  465. ...parentPost.querySelectorAll('.quoteLink'),
  466. ...parentPost.querySelectorAll('.panelBacklinks a')
  467. ];
  468.  
  469. const hoverPost = (event, link) => {
  470. const quoteId = link.href.split('#')[1];
  471.  
  472. let existingPost = document.querySelector(`.nestedPost[data-quote-id="${quoteId}"]`)
  473. || link.closest(`.postCell[id="${quoteId}"]`);
  474.  
  475. if (existingPost) {
  476. this.markedPost = existingPost.querySelector('.innerPost') || existingPost.querySelector('.innerOP');
  477. this.markedPost?.classList.add('markedPost');
  478. return;
  479. }
  480.  
  481. const quotePost = document.getElementById(quoteId);
  482.  
  483. tooltips.removeIfExists();
  484.  
  485. const tooltip = document.createElement('div');
  486. tooltip.className = 'quoteTooltip';
  487. document.body.appendChild(tooltip);
  488.  
  489. const rect = link.getBoundingClientRect();
  490. if (!api.mobile) {
  491. if (rect.left > window.innerWidth / 2) {
  492. const right = window.innerWidth - rect.left - window.scrollX;
  493. tooltip.style.right = `${right}px`;
  494. } else {
  495. const left = rect.right + 10 + window.scrollX;
  496. tooltip.style.left = `${left}px`;
  497. }
  498. }
  499.  
  500. tooltip.style.top = `${rect.top + window.scrollY}px`;
  501. tooltip.style.display = 'inline';
  502.  
  503. tooltips.loadTooltip(tooltip, link.href, quoteId);
  504. tooltips.currentTooltip = tooltip;
  505. }
  506.  
  507. const unHoverPost = (event, link) => {
  508. if (!tooltips.currentTooltip) {
  509. this.markedPost?.classList.remove('markedPost');
  510. return false;
  511. }
  512.  
  513. if (tooltips.unmarkReply) {
  514. tooltips.currentTooltip.classList.remove('markedPost');
  515. Array.from(tooltips.currentTooltip.getElementsByClassName('replyUnderline'))
  516. .forEach((a) => a.classList.remove('replyUnderline'))
  517. tooltips.unmarkReply = false;
  518. } else {
  519. tooltips.currentTooltip.remove();
  520. }
  521.  
  522. tooltips.currentTooltip = null;
  523. }
  524.  
  525. const addHoverPost = (link => {
  526. link.addEventListener('mouseenter', (event) => hoverPost(event, link));
  527. link.addEventListener('mouseleave', (event) => unHoverPost(event, link));
  528. });
  529.  
  530. postLinks.forEach(link => addHoverPost(link));
  531. }
  532.  
  533. showMascot(settings) {
  534. const mascot = document.createElement('img');
  535. mascot.classList.add('fcx-mascot');
  536. mascot.src = settings.image.value;
  537. mascot.style.opacity = settings.opacity.value * 0.01;
  538. mascot.style.top = settings.top.value;
  539. mascot.style.left = settings.left.value;
  540. mascot.style.right = settings.right.value;
  541. mascot.style.bottom = settings.bottom.value;
  542. mascot.style.height = settings.height.value;
  543. mascot.style.width = settings.width.value;
  544. document.body.appendChild(mascot);
  545. }
  546. };
  547.  
  548. window.customElements.define('fullchan-x', fullChanX);
  549.  
  550.  
  551. class fullChanXGallery extends HTMLElement {
  552. constructor() {
  553. super();
  554. }
  555.  
  556. init() {
  557. this.fullchanX = document.querySelector('fullchan-x');
  558. this.imageContainer = this.querySelector('.gallery__images');
  559. this.mainImageContainer = this.querySelector('.gallery__main-image');
  560. this.mainImage = this.mainImageContainer.querySelector('img');
  561. this.sizeButtons = [...this.querySelectorAll('.gallery__scale-options .scale-option')];
  562. this.closeButton = this.querySelector('.gallery__close');
  563. this.listeners();
  564. this.addGalleryImages();
  565. this.initalized = true;
  566. }
  567.  
  568. addGalleryImages () {
  569. this.thumbs = [...this.fullchanX.threadParent.querySelectorAll('.imgLink')].map(thumb => {
  570. return thumb.cloneNode(true);
  571. });
  572.  
  573. this.thumbs.forEach(thumb => {
  574. this.imageContainer.appendChild(thumb);
  575. });
  576. }
  577.  
  578. updateGalleryImages () {
  579. if (!this.initalized) return;
  580.  
  581. const newThumbs = [...this.fullchanX.threadParent.querySelectorAll('.imgLink')].filter(thumb => {
  582. return !this.thumbs.find(thisThumb.href === thumb.href);
  583. }).map(thumb => {
  584. return thumb.cloneNode(true);
  585. });
  586.  
  587. newThumbs.forEach(thumb => {
  588. this.thumbs.push(thumb);
  589. this.imageContainer.appendChild(thumb);
  590. });
  591. }
  592.  
  593. listeners () {
  594. this.addEventListener('click', event => {
  595. const clicked = event.target;
  596.  
  597. let imgLink = clicked.closest('.imgLink');
  598. if (imgLink?.dataset.filemime === 'video/webm') return;
  599.  
  600. if (imgLink) {
  601. event.preventDefault();
  602. this.mainImage.src = imgLink.href;
  603. }
  604.  
  605. this.mainImageContainer.classList.toggle('active', !!imgLink);
  606.  
  607. const scaleButton = clicked.closest('.scale-option');
  608. if (scaleButton) {
  609. const scale = parseFloat(getComputedStyle(this.imageContainer).getPropertyValue('--scale')) || 1;
  610. const delta = scaleButton.id === 'fcxg-smaller' ? -0.1 : 0.1;
  611. const newScale = Math.max(0.1, scale + delta);
  612. this.imageContainer.style.setProperty('--scale', newScale.toFixed(2));
  613. }
  614.  
  615. if (clicked.closest('.gallery__close')) this.close();
  616. });
  617. }
  618.  
  619. open () {
  620. if (!this.initalized) this.init();
  621. this.classList.add('open');
  622. document.body.classList.add('fct-gallery-open');
  623. }
  624.  
  625. close () {
  626. this.classList.remove('open');
  627. document.body.classList.remove('fct-gallery-open');
  628. }
  629. }
  630.  
  631. window.customElements.define('fullchan-x-gallery', fullChanXGallery);
  632.  
  633.  
  634.  
  635. class fullChanXSettings extends HTMLElement {
  636. constructor() {
  637. super();
  638. this.settingsKey = 'fullchan-x-settings';
  639. this.inputs = [];
  640. this.settings = {};
  641. this.settingsTemplate = {
  642. main: {
  643. moveToNav: {
  644. info: 'Move Fullchan-X controls into the navbar.',
  645. type: 'checkbox',
  646. value: true
  647. },
  648. enableNestedQuotes: {
  649. info: 'Nest posts when clicking backlinks.',
  650. type: 'checkbox',
  651. value: true
  652. },
  653. enableFileExtensions: {
  654. info: 'Always show filetype on shortened file names.',
  655. type: 'checkbox',
  656. value: true
  657. },
  658. customBoardLinks: {
  659. info: 'List of custom boards in nav (seperate by comma)',
  660. type: 'input',
  661. value: 'v,a,b'
  662. },
  663. hideDefaultBoards: {
  664. info: 'List of boards to remove from nav (seperate by comma). Set as "all" to remove all.',
  665. type: 'input',
  666. value: 'interracial,mlp'
  667. },
  668. catalogBoardLinks: {
  669. info: 'Redirect nav board links to catalog pages.',
  670. type: 'checkbox',
  671. value: true
  672. },
  673. uiTopPosition: {
  674. info: 'Position from top of screen e.g. 100px',
  675. type: 'input',
  676. value: '50px'
  677. },
  678. uiRightPosition: {
  679. info: 'Position from right of screen e.g. 100px',
  680. type: 'input',
  681. value: '25px'
  682. },
  683. uiDimWhenInactive: {
  684. info: 'Dim UI when not hovering with mouse.',
  685. type: 'checkbox',
  686. value: true
  687. },
  688. replyTabIcon: {
  689. info: 'Set the icon/text added to tab title when you get a new (You).',
  690. type: 'input',
  691. value: '❗'
  692. }
  693. },
  694. mascot: {
  695. enableMascot: {
  696. info: 'Enable mascot image.',
  697. type: 'checkbox',
  698. value: false
  699. },
  700. image: {
  701. info: 'Image URL (8chan image recommended).',
  702. type: 'input',
  703. value: '/.static/logo.png'
  704. },
  705. opacity: {
  706. info: 'Opacity (1 to 100)',
  707. type: 'input',
  708. inputType: 'number',
  709. value: '75'
  710. },
  711. width: {
  712. info: 'Width of image.',
  713. type: 'input',
  714. value: '300px'
  715. },
  716. height: {
  717. info: 'Height of image.',
  718. type: 'input',
  719. value: 'auto'
  720. },
  721. bottom: {
  722. info: 'Bottom position.',
  723. type: 'input',
  724. value: '0px'
  725. },
  726. right: {
  727. info: 'Right position.',
  728. type: 'input',
  729. value: '0px'
  730. },
  731. top: {
  732. info: 'Top position.',
  733. type: 'input',
  734. value: ''
  735. },
  736. left: {
  737. info: 'Left position.',
  738. type: 'input',
  739. value: ''
  740. }
  741. },
  742. threadBanisher: {
  743. enableThreadBanisher: {
  744. info: 'Banish shit threads to the bottom of the calalog.',
  745. type: 'checkbox',
  746. value: true
  747. },
  748. boards: {
  749. info: 'Banish theads on these boards (seperated by comma).',
  750. type: 'input',
  751. value: 'v,a'
  752. },
  753. minimumCharacters: {
  754. info: 'Minimum character requirements',
  755. type: 'input',
  756. inputType: 'number',
  757. value: 100
  758. },
  759. banishTerms: {
  760. info: `<p>Banish threads with these terms to the bottom of the catalog (new line per term).</p>
  761. <p>How to use regex: <a href="https://www.datacamp.com/cheat-sheet/regular-expresso" target="__blank">Regex Cheatsheet</a>.</p>
  762. <p>NOTE: word breaks (\\b) MUST be entered as double escapes (\\\\b), they will appear as (\\b) when saved.</p>
  763. `,
  764. type: 'textarea',
  765. value: '/\\bcuck\\b/i\n/\\bchud\\b/i\n/\\bblacked\\b/i\n/\\bnormie\\b/i\n/\\bincel\\b/i\n/\\btranny\\b/i\n/\\bslop\\b/i\n'
  766. },
  767. whitelistCyclical: {
  768. info: 'Whitelist cyclical threads.',
  769. type: 'checkbox',
  770. value: true
  771. },
  772. banishAnchored: {
  773. info: 'Banish anchored threads that are under minimum reply count.',
  774. type: 'checkbox',
  775. value: true
  776. },
  777. whitelistReplyCount: {
  778. info: 'Threads above this reply count (excluding those with banish terms) will be whitelisted.',
  779. type: 'input',
  780. inputType: 'number',
  781. value: 100
  782. },
  783. }
  784. };
  785. }
  786.  
  787. init() {
  788. this.fcx = document.querySelector('fullchan-x');
  789. this.settingsMain = this.querySelector('.fcxs-main');
  790. this.settingsThreadBanisher = this.querySelector('.fcxs-thread-banisher');
  791. this.settingsMascot = this.querySelector('.fcxs-mascot');
  792. this.getSavedSettings();
  793. if (this.settings.main) {
  794. this.fcx.init();
  795. this.loaded = true;
  796. };
  797. this.buildSettingsOptions('main', this.settingsMain);
  798. this.buildSettingsOptions('threadBanisher', this.settingsThreadBanisher);
  799. this.buildSettingsOptions('mascot', this.settingsMascot);
  800. this.listeners();
  801. this.querySelector('.fcx-settings__close').addEventListener('click', () => this.close());
  802.  
  803. if (!this.loaded) this.fcx.init();
  804. this.fcx.styleUI();
  805. }
  806.  
  807. setSavedSettings(updated) {
  808. localStorage.setItem(this.settingsKey, JSON.stringify(this.settings));
  809. if (updated) this.classList.add('fcxs-updated');
  810. }
  811.  
  812. getSavedSettings() {
  813. let saved = JSON.parse(localStorage.getItem(this.settingsKey));
  814. if (!saved) return;
  815.  
  816. // Ensure all top-level keys exist
  817. for (const key in this.settingsTemplate) {
  818. if (!saved[key]) saved[key] = {};
  819. }
  820.  
  821. this.settings = saved;
  822. }
  823.  
  824. listeners() {
  825. this.inputs.forEach(input => {
  826. input.addEventListener('change', () => {
  827. const section = input.dataset.section;
  828. const key = input.name;
  829. const value = input.type === 'checkbox' ? input.checked : input.value;
  830. this.settings[section][key].value = value;
  831. this.setSavedSettings(true);
  832. });
  833. });
  834. }
  835.  
  836. buildSettingsOptions(subSettings, parent) {
  837. if (!this.settings[subSettings]) this.settings[subSettings] = {}
  838.  
  839. Object.entries(this.settingsTemplate[subSettings]).forEach(([key, config]) => {
  840. const wrapper = document.createElement('div');
  841. const infoWrapper = document.createElement('div');
  842. wrapper.classList.add('fcx-setting');
  843. infoWrapper.classList.add('fcx-setting__info');
  844. wrapper.appendChild(infoWrapper);
  845.  
  846. const label = document.createElement('label');
  847. label.textContent = key
  848. .replace(/([A-Z])/g, ' $1')
  849. .replace(/^./, str => str.toUpperCase());
  850. label.setAttribute('for', key);
  851. infoWrapper.appendChild(label);
  852.  
  853. if (config.info) {
  854. const info = document.createElement('p');
  855. info.innerHTML = config.info;
  856. infoWrapper.appendChild(info);
  857. }
  858.  
  859. const savedValue = this.settings[subSettings][key]?.value ?? config.value;
  860. let input;
  861.  
  862. if (config.type === 'checkbox') {
  863. input = document.createElement('input');
  864. input.type = 'checkbox';
  865. input.checked = savedValue;
  866. } else if (config.type === 'textarea') {
  867. input = document.createElement('textarea');
  868. input.value = savedValue;
  869. } else if (config.type === 'input') {
  870. input = document.createElement('input');
  871. input.type = config.inputType || 'text';
  872. input.value = savedValue;
  873. } else if (config.type === 'select' && config.options) {
  874. input = document.createElement('select');
  875. const options = config.options.split(',');
  876. options.forEach(opt => {
  877. const option = document.createElement('option');
  878. option.value = opt;
  879. option.textContent = opt;
  880. if (opt === savedValue) option.selected = true;
  881. input.appendChild(option);
  882. });
  883. }
  884.  
  885. if (input) {
  886. input.id = key;
  887. input.name = key;
  888. input.dataset.section = subSettings;
  889. wrapper.appendChild(input);
  890. this.inputs.push(input);
  891. this.settings[subSettings][key] = {
  892. value: input.type === 'checkbox' ? input.checked : input.value
  893. };
  894. }
  895.  
  896. parent.appendChild(wrapper);
  897. });
  898. }
  899.  
  900. open() {
  901. this.classList.add('open');
  902. }
  903.  
  904. close() {
  905. this.classList.remove('open');
  906. }
  907.  
  908. toggle() {
  909. this.classList.toggle('open');
  910. }
  911. }
  912.  
  913. window.customElements.define('fullchan-x-settings', fullChanXSettings);
  914.  
  915.  
  916.  
  917. class ToggleButton extends HTMLElement {
  918. constructor() {
  919. super();
  920. const data = this.dataset;
  921. this.onclick = () => {
  922. const target = data.target ? document.querySelector(data.target) : this;
  923. const value = data.value || 'active';
  924. !!data.set ? target.dataset[data.set] = value : target.classList.toggle(value);
  925. }
  926. }
  927. }
  928.  
  929. window.customElements.define('toggle-button', ToggleButton);
  930.  
  931.  
  932.  
  933. // Create fullchan-x gallery
  934. const fcxg = document.createElement('fullchan-x-gallery');
  935. fcxg.innerHTML = `
  936. <div class="fcxg gallery">
  937. <button id="fcxg-close" class="gallery__close fullchan-x__option">Close</button>
  938. <div class="gallery__scale-options">
  939. <button id="fcxg-smaller" class="scale-option fullchan-x__option">-</button>
  940. <button id="fcxg-larger" class="scale-option fullchan-x__option">+</button>
  941. </div>
  942. <div id="fcxg-images" class="gallery__images" style="--scale:1.0"></div>
  943. <div id="fcxg-main-image" class="gallery__main-image">
  944. <img src="" />
  945. </div>
  946. </div>
  947. `;
  948. document.body.appendChild(fcxg);
  949.  
  950.  
  951.  
  952. // Create fullchan-x element
  953. const fcx = document.createElement('fullchan-x');
  954. fcx.innerHTML = `
  955. <div class="fcx__controls">
  956. <button id="fcx-settings-btn" class="fullchan-x__option fcx-settings-toggle">
  957. <a>⚙️</a><span>Settings</span>
  958. </button>
  959.  
  960. <div class="fullchan-x__option fullchan-x__sort thread-only">
  961. <a>☰</a>
  962. <select id="thread-sort">
  963. <option value="default">Default</option>
  964. <option value="replies">Replies</option>
  965. <option value="catbox">Catbox</option>
  966. </select>
  967. </div>
  968.  
  969. <button id="fcx-gallery-btn" class="gallery__toggle fullchan-x__option thread-only">
  970. <a>🖼️</a><span>Gallery</span>
  971. </button>
  972.  
  973. <div class="fcx__my-yous thread-only">
  974. <p class="my-yous__label fullchan-x__option"><a>💬</a><span>My (You)s</span></p>
  975. <div class="my-yous__yous fcx-prevent-nesting" id="my-yous"></div>
  976. </div>
  977. </div>
  978. `;
  979. (document.querySelector('.navHeader') || document.body).appendChild(fcx);
  980.  
  981.  
  982.  
  983. // Create fullchan-x settings
  984. const fcxs = document.createElement('fullchan-x-settings');
  985. fcxs.innerHTML = `
  986. <div class="fcx-settings fcxs" data-tab="main">
  987. <header>
  988. <div class="fcxs__heading">
  989. <span class="fcx-settings__title">
  990. <img class="fcxs_logo" src="/.static/logo/logo_blue.png" height="25px" width="auto">
  991. <span>
  992. Fullchan-X Settings
  993. </span>
  994. </span>
  995. <button class="fcx-settings__close fullchan-x__option">Close</button>
  996. </div>
  997.  
  998. <div class="fcx-settings__tab-buttons">
  999. <toggle-button data-target=".fcxs" data-set="tab" data-value="main">
  1000. Main
  1001. </toggle-button>
  1002. <toggle-button data-target=".fcxs" data-set="tab" data-value="catalog">
  1003. catalog
  1004. </toggle-button>
  1005. <toggle-button data-target=".fcxs" data-set="tab" data-value="mascot">
  1006. Mascot
  1007. </toggle-button>
  1008. </div>
  1009. </header>
  1010.  
  1011. <main>
  1012. <div class="fcxs__updated-message">
  1013. <p>Settings updated, refresh page to apply</p>
  1014. <button class="fullchan-x__option" onClick="location.reload()">Reload page</button>
  1015. </div>
  1016.  
  1017. <div class="fcx-settings__settings">
  1018. <div class="fcxs-main fcxs-tab"></div>
  1019. <div class="fcxs-mascot fcxs-tab"></div>
  1020. <div class="fcxs-catalog fcxs-tab">
  1021. <div class="fcxs-thread-banisher"></div>
  1022. </div>
  1023. </div>
  1024. </main>
  1025.  
  1026. <footer>
  1027. </footer>
  1028. </div>
  1029. `;
  1030. document.body.appendChild(fcxs);
  1031. fcxs.init();
  1032.  
  1033.  
  1034.  
  1035. // Styles
  1036. const style = document.createElement('style');
  1037. style.innerHTML = `
  1038. .hide-navboard #navTopBoardsSpan {
  1039. display: none!important;
  1040. }
  1041.  
  1042. fullchan-x {
  1043. --top: 50px;
  1044. --right: 25px;
  1045. background: var(--background-color);
  1046. border: 1px solid var(--navbar-text-color);
  1047. color: var(--link-color);
  1048. font-size: 14px;
  1049. z-index: 3;
  1050. }
  1051.  
  1052. toggle-button {
  1053. cursor: pointer;
  1054. }
  1055.  
  1056. /* Fullchan-X in nav styles */
  1057. .fcx-in-nav {
  1058. padding: 0;
  1059. border-width: 0;
  1060. line-height: 20px;
  1061. margin-right: 2px;
  1062. background: none;
  1063. }
  1064.  
  1065. .fcx-in-nav .fcx__controls:before,
  1066. .fcx-in-nav .fcx__controls:after {
  1067. color: var(--navbar-text-color);
  1068. font-size: 85%;
  1069. }
  1070.  
  1071. .fcx-in-nav .fcx__controls:before {
  1072. content: "]";
  1073. }
  1074.  
  1075. .fcx-in-nav .fcx__controls:after {
  1076. content: "[";
  1077. }
  1078.  
  1079. .fcx-in-nav .fcx__controls,
  1080. .fcx-in-nav:hover .fcx__controls:hover {
  1081. flex-direction: row-reverse;
  1082. }
  1083.  
  1084. .fcx-in-nav .fcx__controls .fullchan-x__option {
  1085. padding: 0!important;
  1086. justify-content: center;
  1087. background: none;
  1088. line-height: 0;
  1089. max-width: 20px;
  1090. min-width: 20px;
  1091. translate: 0 1px;
  1092. border: solid var(--navbar-text-color) 1px !important;
  1093. }
  1094.  
  1095. .fcx-in-nav .fcx__controls .fullchan-x__option:hover {
  1096. border: solid var(--subject-color) 1px !important;
  1097. }
  1098.  
  1099. .fcx-in-nav .fullchan-x__sort > a {
  1100. margin-bottom: 1px;
  1101. }
  1102.  
  1103. .fcx-in-nav .fcx__controls > * {
  1104. position: relative;
  1105. }
  1106.  
  1107. .fcx-in-nav .fcx__controls .fullchan-x__option > span,
  1108. .fcx-in-nav .fcx__controls .fullchan-x__option:not(:hover) > select {
  1109. display: none;
  1110. }
  1111.  
  1112. .fcx-in-nav .fcx__controls .fullchan-x__option > select {
  1113. appearance: none;
  1114. position: absolute;
  1115. left: 0;
  1116. top: 0;
  1117. width: 100%;
  1118. height: 100%;
  1119. font-size: 0;
  1120. }
  1121.  
  1122. .fcx-in-nav .fcx__controls .fullchan-x__option > select option {
  1123. font-size: 12px;
  1124. }
  1125.  
  1126. .fcx-in-nav .my-yous__yous {
  1127. position: absolute;
  1128. left: 50%;
  1129. translate: -50%;
  1130. background: var(--background-color);
  1131. border: 1px solid var(--navbar-text-color);
  1132. padding: 14px;
  1133. }
  1134.  
  1135. .bottom-header .fcx-in-nav .my-yous__yous {
  1136. top: 0;
  1137. translate: -50% -100%;
  1138. }
  1139.  
  1140. /* Fullchan-X main styles */
  1141. fullchan-x:not(.fcx-in-nav) {
  1142. top: var(--top);
  1143. right: var(--right);
  1144. display: block;
  1145. padding: 10px;
  1146. position: fixed;
  1147. display: block;
  1148. }
  1149.  
  1150. fullchan-x:not(.page-thread) .thread-only,
  1151. fullchan-x:not(.page-catalog) .catalog-only {
  1152. display: none!important;
  1153. }
  1154.  
  1155. fullchan-x:hover {
  1156. z-index: 1000!important;
  1157. }
  1158.  
  1159. .navHeader:has(fullchan-x:hover) {
  1160. z-index: 1000!important;
  1161. }
  1162.  
  1163. fullchan-x.fcx--dim:not(:hover) {
  1164. opacity: 0.6;
  1165. }
  1166.  
  1167. .divPosts {
  1168. flex-direction: column;
  1169. }
  1170.  
  1171. .fcx__controls {
  1172. display: flex;
  1173. flex-direction: column;
  1174. gap: 6px;
  1175. }
  1176.  
  1177. fullchan-x:not(:hover):not(:has(select:focus)) span,
  1178. fullchan-x:not(:hover):not(:has(select:focus)) select {
  1179. display: none;
  1180. margin-left: 5px;
  1181. z-index:3;
  1182. }
  1183.  
  1184. .fcx__controls span,
  1185. .fcx__controls select {
  1186. margin-left: 5px;
  1187. }
  1188.  
  1189. .fcx__controls select {
  1190. cursor: pointer;
  1191. }
  1192.  
  1193. #thread-sort {
  1194. border: none;
  1195. background: none;
  1196. }
  1197.  
  1198. .my-yous__yous {
  1199. display: none;
  1200. flex-direction: column;
  1201. padding-top: 10px;
  1202. max-height: calc(100vh - 220px - var(--top));
  1203. overflow: auto;
  1204. }
  1205.  
  1206. .fcx__my-yous:hover .my-yous__yous {
  1207. display: flex;
  1208. }
  1209.  
  1210. .fullchan-x__option {
  1211. display: flex;
  1212. padding: 6px 8px;
  1213. background: white;
  1214. border: none !important;
  1215. border-radius: 0.2rem;
  1216. transition: all ease 150ms;
  1217. cursor: pointer;
  1218. margin: 0;
  1219. text-align: left;
  1220. min-width: 18px;
  1221. min-height: 18px;
  1222. align-items: center;
  1223. }
  1224.  
  1225. .fullchan-x__option,
  1226. .fullchan-x__option select {
  1227. font-size: 12px;
  1228. font-weight: 400;
  1229. color: #374369;
  1230. }
  1231.  
  1232. fullchan-x:not(:hover):not(:has(select:focus)) .fullchan-x__option {
  1233. display: flex;
  1234. justify-content: center;
  1235. }
  1236.  
  1237. #thread-sort {
  1238. padding-right: 0;
  1239. }
  1240.  
  1241. #thread-sort:hover {
  1242. display: block;
  1243. }
  1244.  
  1245. .innerPost:has(.quoteLink.you) {
  1246. border-left: solid #dd003e 6px;
  1247. }
  1248.  
  1249. .innerPost:has(.youName) {
  1250. border-left: solid #68b723 6px;
  1251. }
  1252.  
  1253. /* --- Nested quotes --- */
  1254. .divMessage .nestedPost {
  1255. display: inline-block;
  1256. width: 100%;
  1257. margin-bottom: 14px;
  1258. white-space: normal!important;
  1259. overflow-wrap: anywhere;
  1260. margin-top: 0.5em;
  1261. border: 1px solid var(--navbar-text-color);
  1262. }
  1263.  
  1264. .nestedPost .innerPost,
  1265. .nestedPost .innerOP {
  1266. width: 100%;
  1267. }
  1268.  
  1269. .nestedPost .imgLink .imgExpanded {
  1270. width: auto!important;
  1271. height: auto!important;
  1272. }
  1273.  
  1274. .my-yous__label.unseen {
  1275. background: var(--link-hover-color)!important;
  1276. color: white;
  1277. }
  1278.  
  1279. .my-yous__yous .unseen {
  1280. font-weight: 900;
  1281. color: var(--link-hover-color);
  1282. }
  1283.  
  1284. .panelBacklinks a.active {
  1285. color: #dd003e;
  1286. }
  1287.  
  1288. /*--- Settings --- */
  1289. .fcx-settings {
  1290. display: block;
  1291. position: fixed;
  1292. top: 50vh;
  1293. left: 50vw;
  1294. translate: -50% -50%;
  1295. padding: 20px 0;
  1296. background: var(--background-color);
  1297. border: 1px solid var(--navbar-text-color);
  1298. color: var(--link-color);
  1299. font-size: 14px;
  1300. max-width: 480px;
  1301. max-height: 80vh;
  1302. overflow: scroll;
  1303. min-width: 500px;
  1304. z-index: 1000;
  1305. }
  1306.  
  1307. fullchan-x-settings:not(.open) {
  1308. display: none;
  1309. }
  1310.  
  1311. .fcxs__heading,
  1312. .fcxs-tab,
  1313. .fcxs footer {
  1314. padding: 0 20px;
  1315. }
  1316.  
  1317. .fcx-settings header {
  1318. margin: 0 0 15px;
  1319. border-bottom: 1px solid var(--navbar-text-color);
  1320. }
  1321.  
  1322. .fcxs__heading {
  1323. display: flex;
  1324. align-items: center;
  1325. justify-content: space-between;
  1326. padding-bottom: 20px;
  1327. }
  1328.  
  1329. .fcx-settings__title {
  1330. display: flex;
  1331. align-items: center;
  1332. gap: 10px;
  1333. font-size: 24px;
  1334. font-size: 24px;
  1335. letter-spacing: 0.04em;
  1336. }
  1337.  
  1338. .fcxs_logo {
  1339. .margin-top: -2px;
  1340. }
  1341.  
  1342. .fcx-settings__tab-buttons {
  1343. border-top: 1px solid var(--navbar-text-color);
  1344. display: flex;
  1345. align-items: center;
  1346. }
  1347.  
  1348. .fcx-settings__tab-buttons toggle-button {
  1349. flex: 1;
  1350. padding: 15px;
  1351. font-size: 14px;
  1352. }
  1353.  
  1354. .fcx-settings__tab-buttons toggle-button + toggle-button {
  1355. border-left: 1px solid var(--navbar-text-color);
  1356. }
  1357.  
  1358. .fcx-settings__tab-buttons toggle-button:hover {
  1359. color: var(--role-color);
  1360. }
  1361.  
  1362. fullchan-x-settings:not(.fcxs-updated) .fcxs__updated-message {
  1363. display: none;
  1364. }
  1365.  
  1366. .fcxs:not([data-tab="main"]) .fcxs-main,
  1367. .fcxs:not([data-tab="catalog"]) .fcxs-catalog,
  1368. .fcxs:not([data-tab="mascot"]) .fcxs-mascot {
  1369. display: none;
  1370. }
  1371.  
  1372. .fcxs[data-tab="main"] [data-value="main"],
  1373. .fcxs[data-tab="catalog"] [data-value="catalog"],
  1374. .fcxs[data-tab="mascot"] [data-value="mascot"] {
  1375. font-weight: 700;
  1376. }
  1377.  
  1378. .fcx-setting {
  1379. display: flex;
  1380. justify-content: space-between;
  1381. align-items: center;
  1382. padding: 12px 0;
  1383. }
  1384.  
  1385. .fcx-setting__info {
  1386. max-width: 60%;
  1387. }
  1388.  
  1389. .fcx-setting input[type="text"],
  1390. .fcx-setting input[type="number"],
  1391. .fcx-setting select,
  1392. .fcx-setting textarea {
  1393. padding: 4px 6px;
  1394. min-width: 35%;
  1395. }
  1396.  
  1397. .fcx-setting textarea {
  1398. min-height: 100px;
  1399. }
  1400.  
  1401. .fcx-setting label {
  1402. font-weight: 600;
  1403. }
  1404.  
  1405. .fcx-setting p {
  1406. margin: 6px 0 0;
  1407. font-size: 12px;
  1408. }
  1409.  
  1410. .fcx-setting + .fcx-setting {
  1411. border-top: 1px solid var(--navbar-text-color);
  1412. }
  1413.  
  1414. .fcxs__updated-message {
  1415. margin: 10px 0;
  1416. text-align: center;
  1417. }
  1418.  
  1419. .fcxs__updated-message p {
  1420. font-size: 14px;
  1421. color: var(--error);
  1422. }
  1423.  
  1424. .fcxs__updated-message button {
  1425. margin: 14px auto 0;
  1426. }
  1427.  
  1428. /* --- Gallery --- */
  1429. .fct-gallery-open,
  1430. body.fct-gallery-open,
  1431. body.fct-gallery-open #mainPanel {
  1432. overflow: hidden!important;
  1433. }
  1434.  
  1435. body.fct-gallery-open fullchan-x:not(.fcx-in-nav),
  1436. body.fct-gallery-open #quick-reply {
  1437. display: none!important;
  1438. }
  1439.  
  1440. fullchan-x-gallery {
  1441. position: fixed;
  1442. top: 0;
  1443. left: 0;
  1444. width: 100%;
  1445. background: rgba(0,0,0,0.9);
  1446. display: none;
  1447. height: 100%;
  1448. overflow: auto;
  1449. }
  1450.  
  1451. fullchan-x-gallery.open {
  1452. display: block;
  1453. }
  1454.  
  1455. fullchan-x-gallery .gallery {
  1456. padding: 50px 10px 0
  1457. }
  1458.  
  1459. fullchan-x-gallery .gallery__images {
  1460. --scale: 1.0;
  1461. display: flex;
  1462. width: 100%;
  1463. height: 100%;
  1464. justify-content: center;
  1465. align-content: flex-start;
  1466. gap: 4px 8px;
  1467. flex-wrap: wrap;
  1468. }
  1469.  
  1470. fullchan-x-gallery .imgLink {
  1471. float: unset;
  1472. display: block;
  1473. zoom: var(--scale);
  1474. }
  1475.  
  1476. fullchan-x-gallery .imgLink img {
  1477. border: solid white 1px;
  1478. }
  1479.  
  1480. fullchan-x-gallery .imgLink[data-filemime="video/webm"] img {
  1481. border: solid #68b723 4px;
  1482. }
  1483.  
  1484. fullchan-x-gallery .gallery__close {
  1485. border: solid 1px var(--background-color)!important;
  1486. position: fixed;
  1487. top: 60px;
  1488. right: 35px;
  1489. padding: 6px 14px;
  1490. min-height: 30px;
  1491. z-index: 10;
  1492. }
  1493.  
  1494. .fcxg .gallery__scale-options {
  1495. position: fixed;
  1496. bottom: 30px;
  1497. right: 35px;
  1498. display: flex;
  1499. gap: 14px;
  1500. z-index: 10;
  1501. }
  1502.  
  1503. .fcxg .gallery__scale-options .fullchan-x__option {
  1504. border: solid 1px var(--background-color)!important;
  1505. width: 35px;
  1506. height: 35px;
  1507. font-size: 18px;
  1508. display: flex;
  1509. justify-content: center;
  1510. }
  1511.  
  1512. .gallery__main-image {
  1513. display: none;
  1514. position: fixed;
  1515. top: 0;
  1516. left: 0;
  1517. width: 100%;
  1518. height: 100%;
  1519. justify-content: center;
  1520. align-content: center;
  1521. background: rgba(0,0,0,0.5);
  1522. }
  1523.  
  1524. .gallery__main-image img {
  1525. padding: 40px 10px 15px;
  1526. height: auto;
  1527. max-width: calc(100% - 20px);
  1528. object-fit: contain;
  1529. }
  1530.  
  1531. .gallery__main-image.active {
  1532. display: flex;
  1533. }
  1534.  
  1535. /*-- Truncated file extentions --*/
  1536. .originalNameLink[data-file-ext] {
  1537. display: inline-block;
  1538. overflow: hidden;
  1539. white-space: nowrap;
  1540. text-overflow: ellipsis;
  1541. max-width: 65px;
  1542. }
  1543.  
  1544. .originalNameLink[data-file-ext]:hover {
  1545. max-width: unset;
  1546. white-space: normal;
  1547. display: inline;
  1548. }
  1549.  
  1550. a[data-file-ext]:hover:after {
  1551. content: attr(data-file-ext);
  1552. }
  1553.  
  1554. a[data-file-ext] + .file-ext {
  1555. pointer-events: none;
  1556. }
  1557.  
  1558. a[data-file-ext]:hover + .file-ext {
  1559. display: none;
  1560. }
  1561.  
  1562. /*-- Nav Board Links --*/
  1563. .nav-boards--custom {
  1564. display: flex;
  1565. gap: 3px;
  1566. }
  1567.  
  1568. #navTopBoardsSpan.hidden ~ #navBoardsSpan,
  1569. #navTopBoardsSpan.hidden ~ .nav-fade,
  1570. #navTopBoardsSpan a.hidden + span {
  1571. display: none;
  1572. }
  1573.  
  1574. /*-- Anon Unique ID posts --*/
  1575. .postInfo .spanId {
  1576. position: relative;
  1577. }
  1578.  
  1579. .fcx-id-posts {
  1580. position: absolute;
  1581. top: 0;
  1582. left: 20px;
  1583. translate: 0 calc(-100% - 5px);
  1584. display: flex;
  1585. flex-direction: column;
  1586. padding: 10px;
  1587. background: var(--background-color);
  1588. border: 1px solid var(--navbar-text-color);
  1589. width: max-content;
  1590. max-width: 500px;
  1591. max-height: 500px;
  1592. overflow: auto;
  1593. z-index: 1000;
  1594. }
  1595.  
  1596. .fcx-id-posts .nestedPost {
  1597. pointer-events: none;
  1598. width: auto;
  1599. }
  1600.  
  1601. /* mascot */
  1602. .fcx-mascot {
  1603. position: fixed;
  1604. z-index: -1;
  1605. }
  1606.  
  1607. .fct-gallery-open .fcx-mascot {
  1608. display: none;
  1609. }
  1610.  
  1611. /*-- Thread sorting --*/
  1612. #divThreads.fcx-threads {
  1613. display: flex!important;
  1614. flex-wrap: wrap;
  1615. justify-content: center;
  1616. }
  1617.  
  1618. .catalogCell.shit-thread {
  1619. order: 10;
  1620. filter: sepia(0.17);
  1621. }
  1622.  
  1623. .catalogCell.shit-thread .labelPage:after {
  1624. content: " 💩";
  1625. }
  1626. `;
  1627.  
  1628. document.head.appendChild(style);
  1629.  
  1630.  
  1631. // Asuka and Eris (fantasy Asuka) are best girls