☰

8chan Reports Page Enhancer

Enhances the usability and appearance of the 8chan board moderation reports page with a dynamic, compact grid layout.

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

  1. // ==UserScript==
  2. // @name         8chan Reports Page Enhancer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Enhances the usability and appearance of the 8chan board moderation reports page with a dynamic, compact grid layout.
  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.4; /* Slightly tighter line height */
  23.             margin: 0; /* Reset body margin */
  24.             font-size: 0.9em; /* Slightly smaller base font */
  25.         }
  26.  
  27.         .titleWrapper {
  28.             max-width: 100%; /* Allow full width */
  29.             margin: 15px auto; /* Reduced margin */
  30.             padding: 0 10px;
  31.             box-sizing: border-box;
  32.         }
  33.  
  34.         .titleFieldset {
  35.             background: #fff;
  36.             border: 1px solid #ddd;
  37.             border-radius: 6px;
  38.             padding: 15px; /* Reduced padding */
  39.             box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  40.         }
  41.  
  42.         legend {
  43.             font-size: 1.3em; /* Smaller legend */
  44.             font-weight: 600;
  45.             color: #222;
  46.             padding: 0 8px;
  47.         }
  48.  
  49.         /* Report Cells */
  50.         #reportDiv {
  51.             display: flex !important; /* Force flexbox */
  52.             flex-wrap: wrap !important;
  53.             gap: 10px; /* Reduced gap */
  54.             margin-top: 15px;
  55.             justify-content: space-between;
  56.             width: 100%; /* Ensure full container width */
  57.             box-sizing: border-box;
  58.         }
  59.  
  60.         .reportCell {
  61.             background: #fff;
  62.             border: 1px solid #e0e0e0;
  63.             border-radius: 5px;
  64.             padding: 10px; /* Reduced padding */
  65.             transition: box-shadow 0.2s;
  66.             flex: 1 1 calc(50% - 8px); /* Default to 2 columns */
  67.             box-sizing: border-box;
  68.             min-width: 250px; /* Smaller minimum width */
  69.             font-size: 0.85em; /* Smaller font size for report content */
  70.         }
  71.  
  72.         .reportCell:hover {
  73.             box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  74.         }
  75.  
  76.         .reportCell label {
  77.             display: block;
  78.             margin-bottom: 5px; /* Reduced margin */
  79.             font-size: 0.9em;
  80.         }
  81.  
  82.         .boardLabel, .totalLabel, .categoryLabel, .reasonLabel {
  83.             font-weight: 500;
  84.             color: #1a73e8;
  85.         }
  86.  
  87.         .reasonLabel {
  88.             background: #f1f3f4;
  89.             padding: 3px 6px; /* Smaller padding */
  90.             border-radius: 3px;
  91.             display: inline-block;
  92.             font-size: 0.9em;
  93.         }
  94.  
  95.         /* Checkbox Styles */
  96.         .closureCheckbox {
  97.             margin-right: 6px;
  98.             vertical-align: middle;
  99.             width: 16px; /* Smaller checkbox */
  100.             height: 16px;
  101.             cursor: pointer;
  102.             accent-color: #1a73e8;
  103.             box-shadow: 0 0 6px rgba(26, 115, 232, 0.6);
  104.         }
  105.  
  106.         .deletionCheckBox {
  107.             margin-right: 6px;
  108.             vertical-align: middle;
  109.             width: 14px; /* Smaller checkbox */
  110.             height: 14px;
  111.             cursor: pointer;
  112.             accent-color: #d32f2f;
  113.         }
  114.  
  115.         .link {
  116.             color: #d32f2f;
  117.             font-weight: 500;
  118.             text-decoration: none;
  119.             padding: 3px 6px; /* Smaller padding */
  120.             border-radius: 3px;
  121.             transition: background 0.2s;
  122.             font-size: 0.9em;
  123.         }
  124.  
  125.         .link:hover {
  126.             background: #ffebee;
  127.             text-decoration: none;
  128.         }
  129.  
  130.         /* Post Content */
  131.         .postingDiv .innerPost {
  132.             background: #fafafa;
  133.             padding: 8px; /* Reduced padding */
  134.             border-radius: 3px;
  135.             margin-top: 8px;
  136.             font-size: 0.9em;
  137.         }
  138.  
  139.         .labelBoard {
  140.             font-size: 1em; /* Smaller font */
  141.             color: #0288d1;
  142.             margin: 0 0 8px;
  143.         }
  144.  
  145.         .postInfo {
  146.             font-size: 0.85em;
  147.             color: #555;
  148.         }
  149.  
  150.         .labelId {
  151.             padding: 2px 5px;
  152.             border-radius: 3px;
  153.             color: #fff;
  154.             font-size: 0.85em;
  155.         }
  156.  
  157.         .panelIp, .panelASN, .panelBypassId {
  158.             font-size: 0.8em;
  159.             color: #666;
  160.             margin-top: 4px;
  161.             word-break: break-all;
  162.         }
  163.  
  164.         .divMessage {
  165.             margin-top: 8px;
  166.             font-size: 0.9em;
  167.             color: #333;
  168.             padding: 6px; /* Reduced padding */
  169.             background: #f5f5f5;
  170.             border-radius: 3px;
  171.         }
  172.  
  173.         .quoteLink {
  174.             color: #388e3c;
  175.             text-decoration: none;
  176.             font-weight: 500;
  177.             font-size: 0.9em;
  178.         }
  179.  
  180.         .quoteLink:hover {
  181.             text-decoration: underline;
  182.         }
  183.  
  184.         /* Uploads */
  185.         .panelUploads {
  186.             margin-top: 8px;
  187.         }
  188.  
  189.         .uploadCell {
  190.             margin-bottom: 8px;
  191.         }
  192.  
  193.         .imgLink img {
  194.             border-radius: 3px;
  195.             max-width: 100px; /* Smaller thumbnail */
  196.             max-height: 100px;
  197.             height: auto;
  198.             object-fit: contain;
  199.             display: block;
  200.         }
  201.  
  202.         .originalNameLink, .nameLink {
  203.             color: #0288d1;
  204.             text-decoration: none;
  205.             font-size: 0.85em;
  206.         }
  207.  
  208.         .originalNameLink:hover, .nameLink:hover {
  209.             text-decoration: underline;
  210.         }
  211.  
  212.         .uploadDetails, .divHash, .sizeLabel, .dimensionLabel {
  213.             font-size: 0.8em;
  214.             color: #555;
  215.         }
  216.  
  217.         .unlinkLink, .unlinkAndDeleteLink {
  218.             font-size: 0.85em;
  219.         }
  220.  
  221.         /* Forms */
  222.         #filterForm, form[action="/closeReports.js"] {
  223.             background: #f9f9f9;
  224.             padding: 10px; /* Reduced padding */
  225.             border-radius: 5px;
  226.             margin-bottom: 15px;
  227.         }
  228.  
  229.         #filterForm label, form[action="/closeReports.js"] label {
  230.             display: block;
  231.             margin-bottom: 8px;
  232.             font-weight: 500;
  233.             color: #444;
  234.             font-size: 0.9em;
  235.         }
  236.  
  237.         #filterCategoriesDiv {
  238.             margin: 8px 0;
  239.         }
  240.  
  241.         .categoryCheckbox {
  242.             margin-right: 6px;
  243.             width: 14px;
  244.             height: 14px;
  245.         }
  246.  
  247.         input[type="text"], select {
  248.             padding: 6px; /* Smaller padding */
  249.             border: 1px solid #ccc;
  250.             border-radius: 3px;
  251.             font-size: 0.9em;
  252.             width: 180px; /* Slightly smaller */
  253.             margin-left: 8px;
  254.         }
  255.  
  256.         input[type="text"]:focus, select:focus {
  257.             border-color: #1a73e8;
  258.             outline: none;
  259.             box-shadow: 0 0 0 2px rgba(26,115,232,0.2);
  260.         }
  261.  
  262.         button, #filterSubmitButton, #closeReportsFormButton {
  263.             background: #1a73e8;
  264.             color: #fff;
  265.             border: none;
  266.             padding: 6px 12px; /* Smaller padding */
  267.             border-radius: 3px;
  268.             font-size: 0.9em;
  269.             cursor: pointer;
  270.             transition: background 0.2s;
  271.         }
  272.  
  273.         button:hover, #filterSubmitButton:hover, #closeReportsFormButton:hover {
  274.             background: #1565c0;
  275.         }
  276.  
  277.         /* Checkboxes */
  278.         .closeReportsField {
  279.             margin-right: 6px;
  280.             vertical-align: middle;
  281.             width: 14px;
  282.             height: 14px;
  283.         }
  284.  
  285.         /* Navigation */
  286.         .navHeader {
  287.             background: #fff;
  288.             border-bottom: 1px solid #ddd;
  289.             padding: 8px 15px; /* Reduced padding */
  290.             position: sticky;
  291.             top: 0;
  292.             z-index: 1000;
  293.         }
  294.  
  295.         .navLinkSpan a {
  296.             color: #0288d1;
  297.             text-decoration: none;
  298.             margin: 0 4px;
  299.             font-size: 0.9em;
  300.         }
  301.  
  302.         .navLinkSpan a:hover {
  303.             text-decoration: underline;
  304.         }
  305.  
  306.         /* Responsive Adjustments for More Columns */
  307.         @media (min-width: 900px) {
  308.             .reportCell {
  309.                 flex: 1 1 calc(33.33% - 8px); /* 3 columns */
  310.             }
  311.         }
  312.  
  313.         @media (min-width: 1200px) {
  314.             .reportCell {
  315.                 flex: 1 1 calc(25% - 8px); /* 4 columns */
  316.             }
  317.         }
  318.  
  319.         @media (max-width: 600px) {
  320.             .reportCell {
  321.                 flex: 1 1 100% !important; /* Single column on small screens */
  322.                 min-width: 100% !important;
  323.                 max-width: 100% !important;
  324.             }
  325.  
  326.             input[type="text"], select {
  327.                 width: 100%;
  328.             }
  329.         }
  330.     `);
  331. })();