☰

8chan Reports Page Enhancer

Enhances the usability and appearance of the 8chan board moderation reports page.

当前为 2025-04-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         8chan Reports Page Enhancer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Enhances the usability and appearance of the 8chan board moderation reports page.
  6. // @author       Grok
  7. // @match        *://8chan.moe/openReports.js*
  8. // @grant        GM_addStyle
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Inject CSS styles
  16.     GM_addStyle(`
  17.         /* General Layout */
  18.         body {
  19.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  20.             background-color: #f5f6f5;
  21.             color: #333;
  22.             line-height: 1.5;
  23.         }
  24.  
  25.         .titleWrapper {
  26.             max-width: 1200px;
  27.             margin: 20px auto;
  28.             padding: 0 15px;
  29.         }
  30.  
  31.         .titleFieldset {
  32.             background: #fff;
  33.             border: 1px solid #ddd;
  34.             border-radius: 8px;
  35.             padding: 20px;
  36.             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  37.         }
  38.  
  39.         legend {
  40.             font-size: 1.5em;
  41.             font-weight: 600;
  42.             color: #222;
  43.             padding: 0 10px;
  44.         }
  45.  
  46.         /* Report Cells */
  47.         #reportDiv {
  48.             display: grid;
  49.             grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  50.             gap: 15px;
  51.             margin-top: 20px;
  52.         }
  53.  
  54.         .reportCell {
  55.             background: #fff;
  56.             border: 1px solid #e0e0e0;
  57.             border-radius: 6px;
  58.             padding: 15px;
  59.             transition: box-shadow 0.2s;
  60.         }
  61.  
  62.         .reportCell:hover {
  63.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  64.         }
  65.  
  66.         .reportCell label {
  67.             display: block;
  68.             margin-bottom: 8px;
  69.             font-size: 0.95em;
  70.         }
  71.  
  72.         .boardLabel, .totalLabel, .categoryLabel, .reasonLabel {
  73.             font-weight: 500;
  74.             color: #1a73e8;
  75.         }
  76.  
  77.         .reasonLabel {
  78.             background: #f1f3f4;
  79.             padding: 4px 8px;
  80.             border-radius: 4px;
  81.             display: inline-block;
  82.         }
  83.  
  84.         .closureCheckbox {
  85.             margin-right: 8px;
  86.             vertical-align: middle;
  87.         }
  88.  
  89.         .link {
  90.             color: #d32f2f;
  91.             font-weight: 500;
  92.             text-decoration: none;
  93.             padding: 4px 8px;
  94.             border-radius: 4px;
  95.             transition: background 0.2s;
  96.         }
  97.  
  98.         .link:hover {
  99.             background: #ffebee;
  100.             text-decoration: none;
  101.         }
  102.  
  103.         /* Post Content */
  104.         .postingDiv .innerPost {
  105.             background: #fafafa;
  106.             padding: 10px;
  107.             border-radius: 4px;
  108.             margin-top: 10px;
  109.         }
  110.  
  111.         .labelBoard {
  112.             font-size: 1.1em;
  113.             color: #0288d1;
  114.             margin: 0 0 10px;
  115.         }
  116.  
  117.         .postInfo {
  118.             font-size: 0.9em;
  119.             color: #555;
  120.         }
  121.  
  122.         .labelId {
  123.             padding: 2px 6px;
  124.             border-radius: 3px;
  125.             color: #fff;
  126.         }
  127.  
  128.         .panelIp, .panelASN, .panelBypassId {
  129.             font-size: 0.85em;
  130.             color: #666;
  131.             margin-top: 5px;
  132.             word-break: break-all;
  133.         }
  134.  
  135.         .divMessage {
  136.             margin-top: 10px;
  137.             font-size: 0.95em;
  138.             color: #333;
  139.             padding: 8px;
  140.             background: #f5f5f5;
  141.             border-radius: 4px;
  142.         }
  143.  
  144.         .quoteLink {
  145.             color: #388e3c;
  146.             text-decoration: none;
  147.             font-weight: 500;
  148.         }
  149.  
  150.         .quoteLink:hover {
  151.             text-decoration: underline;
  152.         }
  153.  
  154.         /* Uploads */
  155.         .panelUploads {
  156.             margin-top: 10px;
  157.         }
  158.  
  159.         .uploadCell {
  160.             margin-bottom: 10px;
  161.         }
  162.  
  163.         .imgLink img {
  164.             border-radius: 4px;
  165.             max-width: 150px;
  166.             height: auto;
  167.         }
  168.  
  169.         .originalNameLink {
  170.             color: #0288d1;
  171.             text-decoration: none;
  172.         }
  173.  
  174.         .originalNameLink:hover {
  175.             text-decoration: underline;
  176.         }
  177.  
  178.         /* Forms */
  179.         #filterForm, form[action="/closeReports.js"] {
  180.             background: #f9f9f9;
  181.             padding: 15px;
  182.             border-radius: 6px;
  183.             margin-bottom: 20px;
  184.         }
  185.  
  186.         #filterForm label, form[action="/closeReports.js"] label {
  187.             display: block;
  188.             margin-bottom: 10px;
  189.             font-weight: 500;
  190.             color: #444;
  191.         }
  192.  
  193.         #filterCategoriesDiv {
  194.             margin: 10px 0;
  195.         }
  196.  
  197.         .categoryCheckbox {
  198.             margin-right: 8px;
  199.         }
  200.  
  201.         input[type="text"], select {
  202.             padding: 8px;
  203.             border: 1px solid #ccc;
  204.             border-radius: 4px;
  205.             font-size: 0.95em;
  206.             width: 200px;
  207.             margin-left: 10px;
  208.         }
  209.  
  210.         input[type="text"]:focus, select:focus {
  211.             border-color: #1a73e8;
  212.             outline: none;
  213.             box-shadow: 0 0 0 2px rgba(26,115,232,0.2);
  214.         }
  215.  
  216.         button, #filterSubmitButton, #closeReportsFormButton {
  217.             background: #1a73e8;
  218.             color: #fff;
  219.             border: none;
  220.             padding: 8px 16px;
  221.             border-radius: 4px;
  222.             font-size: 0.95em;
  223.             cursor: pointer;
  224.             transition: background 0.2s;
  225.         }
  226.  
  227.         button:hover, #filterSubmitButton:hover, #closeReportsFormButton:hover {
  228.             background: #1565c0;
  229.         }
  230.  
  231.         /* Checkboxes */
  232.         .closeReportsField, .deletionCheckBox {
  233.             margin-right: 8px;
  234.             vertical-align: middle;
  235.         }
  236.  
  237.         /* Navigation */
  238.         .navHeader {
  239.             background: #fff;
  240.             border-bottom: 1px solid #ddd;
  241.             padding: 10px 20px;
  242.             position: sticky;
  243.             top: 0;
  244.             z-index: 1000;
  245.         }
  246.  
  247.         .navLinkSpan a {
  248.             color: #0288d1;
  249.             text-decoration: none;
  250.             margin: 0 5px;
  251.         }
  252.  
  253.         .navLinkSpan a:hover {
  254.             text-decoration: underline;
  255.         }
  256.  
  257.         /* Responsive Adjustments */
  258.         @media (max-width: 768px) {
  259.             #reportDiv {
  260.                 grid-template-columns: 1fr;
  261.             }
  262.  
  263.             input[type="text"], select {
  264.                 width: 100%;
  265.             }
  266.         }
  267.     `);
  268. })();