☰

Sleazy Fork is available in English.

JavDB 美化

为 JavDB 网站添加圆角、阴影效果、标签按钮间距调整，以及详细页面优化。

  1. // ==UserScript==
  2. // @name         JavDB 美化
  3. // @namespace    http://tampermonkey.net/
  4. // @description  为 JavDB 网站添加圆角、阴影效果、标签按钮间距调整，以及详细页面优化。
  5. // @version      1.0
  6. // @author       kitawa
  7. // @match        *://*.javdb.com/*
  8. // @license      MIT
  9. // ==/UserScript==
  10. (function () {
  11.   "use strict";
  12.   // 替换逗号为空格
  13.   const metaSpans = document.querySelectorAll("span.meta");
  14.   metaSpans.forEach((span) => {
  15.     if (span.textContent) {
  16.       console.log(`原始文本: ${span.textContent}`); // 打印原始文本
  17.       span.textContent = span.textContent.replace(/,/g, " "); // 替换逗号为空格
  18.       console.log(`替换后文本: ${span.textContent}`); // 打印替换后的文本
  19.     }
  20.   });
  21.   // 定义隐藏包含 'male' 的行的函数
  22.   function hideMaleLines() {
  23.     document.querySelectorAll("strong.symbol.male").forEach((element) => {
  24.       // 隐藏 <strong> 的前一个 <a> 元素
  25.       const previousLink = element.previousElementSibling;
  26.       if (previousLink && previousLink.tagName === "A") {
  27.         previousLink.classList.add("hidden");
  28.       }
  29.       // 隐藏 <strong> 元素
  30.       element.classList.add("hidden");
  31.     });
  32.   }
  33.   // 添加隐藏样式（CSS 类）
  34.   const style = document.createElement("style");
  35.   style.textContent = `
  36.         .hidden {
  37.             display: none !important;
  38.         }
  39.     `;
  40.   document.head.appendChild(style);
  41.   // 初次执行隐藏逻辑
  42.   hideMaleLines();
  43.   // 如果页面是动态生成的，使用 MutationObserver 监听 DOM 变化
  44.   const observer = new MutationObserver(() => {
  45.     hideMaleLines(); // 在 DOM 变化时重新执行隐藏逻辑
  46.   });
  47.   // 开始观察，监听整个文档的子节点变化
  48.   observer.observe(document.body, {
  49.     childList: true,
  50.     subtree: true,
  51.   });
  52. })();
  53. (function () {
  54.   "use strict";
  55.   // 创建 <style> 并立即注入
  56.   const style = document.createElement("style");
  57.   style.textContent = `
  58. /* 全局背景色 */
  59.     body {
  60.         background-color: #FFF0F6 !important; /* 修改为你想要的背景色 */
  61.         text-decoration: none !important;
  62.     }
  63. /* 全局圆角 */
  64.         * {
  65.             border-radius: 8px !important;
  66.         }
  67. /* 全局阴影 */
  68.         .cover, .video-meta-panel, .tag, .button, .item, .message.video-panel {
  69.             box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1) !important;
  70.         }
  71. /* 全局卡片白底 */
  72.        .item {
  73.             background-color:#fff !important;
  74.         }
  75. /* 全局按钮 */
  76.         .button {
  77.             background-color: #fff;
  78.             border-color: #Ed7676 ;
  79.             border-width: 1px;
  80.             border-radius: 6px!important;
  81.             color: #888;
  82.             box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
  83.         }
  84.        /* 全局按钮（hover） */
  85.         .button:hover {
  86.             background-color: #Ed7676 !important; /* 当鼠标悬停时，背景颜色保持为浅红色 */
  87.             border-color: transparent !important; /* 鼠标悬停时，边框颜色保持为透明 */
  88.             color: #fff !important;/* 鼠标悬停时，文字颜色保持为白色 */
  89.         }
  90.        /* 全局按钮点击效果 */
  91.         .button.is-info:active {
  92.             transform: scale(1.5);
  93.         }
  94. /*  ---- ---- ---- ----顶部导航栏 ---- ---- ---- ---- */
  95.         .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-dropdown {
  96.             box-shadow: none;
  97.             top: 100%;
  98.             transform: none;
  99.             box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) !important;
  100.         }
  101.         .navbar-dropdown {
  102.             border-top: none;
  103.         }
  104.       .navbar {
  105.           background-color: #e14859e0 !important;
  106.           border-radius: 0px !important;
  107.           box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
  108.           backdrop-filter: blur(50px) !important;
  109.       }
  110.         .document.querySelector {
  111.            background-color: #CE5966 !important;
  112.         }
  113.         /* 鼠标悬停时改变导航项和下拉菜单项的背景色 */
  114.         .navbar-item:hover,
  115.         .navbar-item.has-dropdown:hover .navbar-link {
  116.            background-color: #e45e6b !important; /* 修改为你想要的背景色 */
  117.         }
  118.         /* 鼠标悬停时改变下拉菜单项的背景色 */
  119.         .navbar-item.has-dropdown:hover .navbar-dropdown .navbar-item:hover {
  120.             background-color: #F6F6F6 !important; /* 修改为你想要的背景色 */
  121.             border-radius: 0px !important;
  122.         }
  123.         /* SVG 修改 */
  124.         rect[fill="#2F80ED"] {
  125.             fill: #e45e6b !important;
  126.         }
  127.        /* 隐藏广告 */
  128.         .list-tab,
  129.         .navbar-item[href='/rankings/playback'],  /* 热播 */
  130.         .movie-list .item .cover .tag-can-play.cnsub, /* 中字可播放 */
  131.         .sub-header, /* 广告 */
  132.         .navbar.is-dark.is-fluid {
  133.             display: none !important;
  134.         }
  135.        /* 去除蓝色线 */
  136.         .has-left-sep {
  137.             border: none !important;
  138.         }
  139.        /* 背景 */
  140.         .navbar.is-blackcusbar,
  141.         .navbar.is-black,
  142.         .navbar.is-blackcusbar:hover,
  143.         .navbar.is-black:hover {
  144.             background-color: #e45e6b !important;
  145.         }
  146. .navbar-dropdown a.navbar-item,
  147. .navbar-dropdown .navbar-item {
  148.   padding: 0 !important;
  149.   text-align: center !important;
  150.   display: flex;
  151.   flex-direction: column;
  152.   align-items: center;
  153. }
  154.  
  155. #navbar-menu-hero > div > div:nth-child(n+1) > div {
  156.     display: flex;
  157.     flex-direction: column;
  158.     align-items: center;
  159.     padding: 15px 10px 15px 10px;
  160.     gap: 10px;
  161.     position: absolute;
  162.     left: 37%;
  163.     top: 100%;
  164.     transform: translate(-50%, 0%);
  165. }
  166.  
  167. .navbar-dropdown:hover a.navbar-item:hover,
  168. .navbar-dropdown:hover .navbar-item:hover {
  169.   display: flex;
  170.   flex-direction: column;
  171.   align-items: center;
  172. }
  173.  
  174. .navbar-item:hover, .navbar-item.has-dropdown:hover .navbar-link {
  175.   background-color: #e45e6b !important;
  176.   border-radius: 6px !important;
  177. }
  178. .navbar-dropdown .navbar-item,
  179. .navbar-dropdown a.navbar-item {
  180.   padding-right: 0rem !important;
  181.   padding-left: 0rem !important;
  182. }
  183. .navbar-dropdown.is-right {
  184.   display: none;  /* 默认隐藏菜单 */
  185.   flex-direction: column;
  186.   align-items: center;
  187.   gap: 10px;
  188.   padding: 10px;
  189.   position: absolute;  /* 让菜单浮动 */
  190. }
  191.  
  192. .navbar-item.has-dropdown:hover .navbar-dropdown.is-right {
  193.   display: flex;  /* 鼠标悬停时显示菜单 */
  194. }
  195. /* ---- ---- ---- ---- 搜索---- ---- --- ---- -------*/
  196.  /* 影片和小箭头（左边）*/
  197.         /* 下拉框样式 */
  198.         .search-bar-wrap .search-type select {
  199.             height: 40px !important;            /* 下拉框高度，与其他控件一致 */
  200.             border: none !important;   /* 去除边框 */
  201.             color: #7367B6 !important;           /* 悬停文字颜色 */
  202.         }
  203.         /* 小箭头 */
  204.         .select:not(.is-multiple):not(.is-loading):after {
  205.             border-color: #7367B6 !important;
  206.             right: 1.125em;
  207.             z-index: 4;
  208.         }
  209.         /* 鼠标悬停时改变箭头颜色 */
  210.         .select:not(.is-multiple):not(.is-loading):hover:after {
  211.             border-color: #7367B6 !important;
  212.         }
  213.         /* 搜索框背景 */
  214.         .search-bar-wrap {
  215.             background-color: #AC86C5 !important;  /* 紫色 */
  216.             padding: 0.8rem; /* 内间距 */
  217.             box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1) !important;
  218.             margin-top: 30px !important;  /* 和顶部距离 */
  219.             height: 70px;                  /* 高度 */
  220.         }
  221.         /* 搜索框内输入框样式 */
  222.         .search-bar-wrap .search-input .input {
  223.             box-shadow: none !important; /* 移除内阴影 */
  224.             border: none !important;     /* 去除边框 */
  225.             height: 40px;                /* 高度 */
  226.         }
  227.         /* 控件整体间距 */
  228.         .search-bar-wrap .control {
  229.             display: flex !important;           /* 使用 Flex 布局 */
  230.             align-items: center !important;     /* 垂直方向居中对齐 */
  231.             transform: translateY(-4px); /* 向下移动按钮组 10 像素 */
  232.             margin: 4px !important;             /* 控件之间的间距 */
  233.         }
  234.         /* 检索按钮组 */
  235.         .search-bar-wrap .control .button {
  236.             background-color: #9473aa !important; /* 按钮背景色 */
  237.             margin: 2px !important;              /* 按钮之间的间距 */
  238.             height: 40px !important;             /* 设置按钮高度，保证与搜索框一致 */
  239.             border: 1px solid #9473aa !important; /* 边框 */
  240.          }
  241.         /* 鼠标悬停按钮效果 */
  242.         .search-bar-wrap .control .button:hover {
  243.             background-color: #CE5966 !important; /* 悬停背景色 */
  244.             border: 1px solid #CE5966 !important; /* 边框 */
  245.         }
  246.         /* 弹出气泡 */
  247.         .tooltip::before {
  248.             border-radius: 6px !important;
  249.             top: -5px !important;
  250.             box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
  251.         }
  252.         /* 删除泡泡小箭头 */
  253.         [data-tooltip]:not(.is-disabled):after,
  254.         [data-tooltip]:not(.is-loading):after,
  255.         [data-tooltip]:not([disabled]):after {
  256.             content: none !important;
  257.         }
  258. /* ----猜你喜欢，全部，有码，无码 ----  ---- ------- ---- --- ---- -------*/
  259.       /* 按钮样式 */
  260.         .pagination-link.is-current,
  261.         .float-buttons a {
  262.             color: #fff !important;
  263.             background-color: #AC86C5 !important; /* 设置背景颜色为紫色 */
  264.             border: none !important; /* 无边框*/
  265.             box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
  266.         }
  267.          /* 激活按钮的样式 */
  268.         .tabs li.is-active a {
  269.            color: #fff !important;
  270.            border: none !important; /* 无边框 */
  271.            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
  272.            background-color: #AC86C5 !important; /* 设置背景颜色为紫色 */
  273.         }
  274.         /* 激活按钮的鼠标悬停样式（不改变任何效果） */
  275.         .tabs li.is-active a:hover {
  276.           color: #fff !important; /* 保持文字颜色 */
  277.           background-color: #AC86C5 !important; /* 保持背景颜色 */
  278.         }
  279.         /* 鼠标悬停时的样式（其他按钮） */
  280.         .tabs li a:hover {
  281.           color: #AC86C5 !important; /* 鼠标悬停时的文字颜色 */
  282.         }
  283.         /* 按钮*/
  284.         .tabs.main-tabs.is-boxed {
  285.             margin-left: -18px !important; /* 左对齐*/
  286.             margin-bottom: 10px !important;/* 上下间距*/
  287.         }
  288. /* ----删除  -------*/
  289.         /* 移除tab底部边框 */
  290.         .tabs ul {
  291.             border-bottom: none !important;
  292.         }
  293.         /* 移除主页顶部和详细页tab蓝色分隔线 */
  294.         .tabs.is-boxed,
  295.         .tabs.no-bottom {
  296.             border-bottom: 0 !important;
  297.             margin-bottom: 10px !important;
  298.         }
  299. /* ----大封面，小封面 ----  ---- ------- ---- --- ---- -------*/
  300.        /* 按钮组 hover 样式 */
  301.         .buttons.has-addons :hover {
  302.             color: #Ed7676 !important; /* 鼠标悬停时的字体颜色 */
  303.             border-color: #Ed7676 !important; /* 鼠标悬停时的边框颜色 */
  304.             background-color: #fff !important;  /* 保持背景颜色不变（可选） */
  305.         }
  306. /* 激活按钮 */
  307.         .buttons.has-addons .button.is-selected {
  308.             background-color: #Ed7676 !important; /* 默认背景颜色 */
  309.             border-color: #Ed7676; /* 默认边框颜色 */
  310.             border-width: 1px;
  311.             color: #fff; /* 默认字体颜色 */
  312.         }
  313.         /* 鼠标悬停时的样式 */
  314.         .buttons.has-addons .button.is-selected:hover {
  315.             color: #fff !important; /* 鼠标悬停时的字体颜色 */
  316.             border-color: #Ed7676 !important; /* 鼠标悬停时的边框颜色 */
  317.             background-color: #Ed7676; /* 保持背景颜色不变（可选） */
  318.         }
  319.       /* 按钮组样式调整 */
  320.         .buttons.has-addons > .button {
  321.             margin: 0 !important; /* 去除按钮之间的间距 */
  322.             border-radius: 0 !important; /* 移除单独按钮的圆角 */
  323.          }
  324.         /* 调整按钮组首尾按钮圆角 */
  325.         .buttons.has-addons > .button:first-child {
  326.             border-top-left-radius: 6px !important;
  327.             border-bottom-left-radius: 6px !important;
  328.         }
  329.         .buttons.has-addons > .button:last-child {
  330.             border-top-right-radius: 6px !important;
  331.             border-bottom-right-radius: 6px !important;
  332.             border-left-width: 1px !important; /* 确保最后一个按钮和前一个按钮显示正常边框 */
  333.         }
  334.         .buttons.has-addons > .button:not(:first-child) {
  335.             border-left: none !important; /* 移除中间按钮的左边框 */
  336.             /* border-right: none !important; /* 移除中间按钮的左边框 */
  337.         }
  338. /*  ---- ---- ---- ---- ---- 主页更新页面 ---- ---- ---- ---- ----*/
  339.  /* 1.卡片 */
  340.         /*整体布局*/
  341.         .item {
  342.             border: 0px solid #fff !important; /* 设置边框 */
  343.             margin-left: 0 !important; /* 左对齐 */
  344.             margin-right: 0 !important; /* 右对齐 */
  345.             transform: translateY(10px); /* 向下移动 */
  346.         }
  347.         /*卡片间距*/
  348.         .movie-list {
  349.             display: grid;
  350.             grid-column-gap: .4rem;
  351.             -moz-column-gap: .4rem;
  352.             column-gap: .8rem;
  353.             grid-row-gap: 1rem;
  354.             row-gap: 1.6rem;
  355.             grid-template-columns: repeat(4,minmax(0,1fr));
  356.             padding-bottom: .5rem;
  357.         }
  358.         /* 鼠标指向卡片边框 */
  359.         a.box:focus, a.box:hover {
  360.            outline: 4px solid #Ed7676; /* 修改为橙色边框 */
  361.            box-shadow: 0 0 12px 5px rgba(238, 149, 149, 0.5);
  362.          }
  363. /* 2.封面 */
  364.           /* 封面填充 */
  365.           .movie-list .item .cover.contain img {
  366.               width: 100%;
  367.               object-fit: cover;
  368.           }
  369.          /* 封面圆角 */
  370.         .item .cover img {
  371.             border-radius: 6px !important; /* 保证图片顶部圆角 */
  372.             border-bottom-left-radius: 0 !important;  /* 默认移除底部圆角 */
  373.             border-bottom-right-radius: 0 !important; /* 默认移除底部圆角 */
  374.         }
  375.         /* 封面图背景 */
  376.           .movie-list .item .cover {
  377.               background: #fff;
  378.               border-bottom-left-radius: 0 !important;  /* 默认移除底部圆角 */
  379.               border-bottom-right-radius: 0 !important; /* 默认移除底部圆角 */
  380.           }
  381.         /* 鼠标悬停状态*/
  382.         .item .cover img:hover {
  383.             border-radius: 6px !important; /* 保证放大时四个角有圆角 */
  384.             border-bottom-left-radius: 6px !important;  /* 恢复底部左角圆角 */
  385.             border-bottom-right-radius: 6px !important; /* 恢复底部右角圆角 */
  386.         }
  387.         .item .video-title {
  388.             border-radius: 0 !important;  /* 免疫标题部分的圆角 */
  389.         }
  390. /* 3.标题 */
  391.         /* 修改未访问链接的颜色 */
  392.         .movie-list .box .video-title {
  393.             color: #444444 !important;  /* 修改未访问链接的标题颜色为灰色 */
  394.         }
  395.         /* 两行显示*/
  396.         .movie-list .item .video-title {
  397.             font-size: 14px !important;               /* 设置字体大小 */
  398.             padding-top: 0.2rem;                      /* 控制顶部间距 */
  399.             padding-bottom: 0.2rem;                   /* 控制底部间距 */
  400.             white-space: normal;                      /* 允许换行 */
  401.             overflow: hidden;                         /* 隐藏超出容器的内容 */
  402.             text-overflow: ellipsis;                  /* 超出部分显示省略号 */
  403.             line-height: 1.5rem;                      /* 每行文字高度 */
  404.             height: 3.5rem;                           /* 设置容器高度为两行文字略多 */
  405.             display: -webkit-box;                     /* Flex 布局，支持多行截断 */
  406.             -webkit-box-orient: vertical;             /* 垂直布局 */
  407.             -webkit-line-clamp: 2;                    /* 限制最多显示两行 */
  408.          }
  409. /* 4.评分 */
  410.          .movie-list .item .score {
  411.             padding-top: 0.4rem;                 /* 设置顶部边距 */
  412.             padding-bottom: .2rem;              /* 设置底部边距 */
  413.             color: #777;
  414.             font-size: 12px;
  415.           }
  416. /* 5.日期 */
  417.           .movie-list .item .meta {
  418.               padding-bottom: .2rem;
  419.               color: #777;
  420.               font-size: 12px;
  421.           }
  422. /* 6.标签 */
  423.        /* 标签间距 */
  424.         .tags.has-addons .tag, .tags.is-right .tag:not(:last-child) {
  425.             margin-right: 10px; /* 恢复默认值 */
  426.         }
  427.         .tag:not(body).is-info {
  428. 	background-color: #3e8ed0;
  429. 	color: #fff;
  430. }
  431.        /* 含中字磁链 */
  432.         .tag.is-warning {
  433.             color: #fff !important; /* 设置字体颜色 */
  434.             background-color: #f4b16b !important; /* 背景色为黑色 */
  435.         }
  436.         /* 昨日新种 */
  437.         .tag:not(body) {
  438.             background-color: #b4b4b8;
  439.             color: #fff;
  440.         }
  441.         .tags .tag {
  442.             margin-bottom: .3rem;
  443.         }
  444. /*  ---- 底部翻页按钮----*/
  445.  /* 去横线 */
  446.           nav.pagination {
  447.               margin-top: 1.5rem;
  448.               padding-top: 1.5rem;
  449.               border-top: 0px solid hsla(0,0%,85.9%,.5);
  450.           }
  451.         /* 底部当前页激活时的翻页按钮颜色 */
  452.         .pagination-link.is-current:active {
  453.             background-color: transparent;
  454.             border: none !important; /* 无边框*/
  455.  
  456.         }
  457.  /* 底部按钮（还包括部分顶部按钮） */
  458. .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea {
  459.     color: #AC86C5 !important;
  460.     border: none; /* 移除边框 */
  461. }
  462.  /* 底部按钮 */
  463.               .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea {
  464.                   color: #AC86C5 !important;
  465.                   font-size: .85em;
  466.                }
  467.                .pagination-link, .pagination-next, .pagination-previous {
  468.                     background-color: transparent;
  469. }
  470.             /* 去掉省略号阴影 */
  471.             .pagination-ellipsis {
  472.                 box-shadow: none !important;
  473.             }
  474.  /* 底部按浮动按钮 */
  475.           .float-buttons {
  476.               padding: 0.2rem!important;
  477.               display: flex!important;
  478.               gap: 10px!important; /* 间距 */
  479.           }
  480. .tags .tag {
  481.     border-radius: 6px !important;
  482. }
  483. .movie-list .item .cover.contain img, .movie-list .item .cover img {
  484.     transition: transform .5s ease;
  485. }
  486. .pagination-link:active, .pagination-next:active, .pagination-previous:active {
  487.     box-shadow: none;
  488.     color: #E45E6B !important;
  489. }
  490. .app-desktop-banner .container {
  491.     display: none !important;
  492. }
  493. /* ---- ---- ---- ---- ---- --- ---- ---- ---2.详细页 ---- ---- --- ---- ---- --- ---- ---- ---- -------*/
  494. /*  ---- ----2.0 封面 ---- ---- -*/
  495.         .column-video-cover img {
  496.             outline: 6px solid #fff; !important;
  497.             box-shadow: 0 1px 16px rgba(0, 0, 0, 0.3) !important;
  498.             margin-top: 5px;
  499.         }
  500. /*  ---- ---- ---- ---- 2.1 封面右边详细信息---- ---- ---- ---- -*/
  501. /* 卡片背景色 */
  502.         .message-body {
  503.             background-color: #fffcfc !important;
  504.         }
  505. /* 行高 */
  506.         .movie-panel-info .panel-block {
  507.             line-height: 1.5;     /* 设置行内间距 */
  508.             margin-bottom: 10px; /* 设置行间距 */
  509.         }
  510.         .movie-panel-info .panel-block:last-child {
  511.             margin-bottom: 0; /* 移除最后一行的额外间距 */
  512.         }
  513. /* 隐藏指定的元素 */
  514.         /* 去分隔线 */
  515.         .panel-block {
  516.             border-bottom: none !important; /* 番号，日期，时长，片商 */
  517.         }
  518.         /* 其他 */
  519.         .buttons.are-small.review-buttons,  /* 下载，修正 */
  520.         .play-button,
  521.         .list-tab,
  522.         .is-size-7.has-text-grey, /* 多少人想看 */
  523.         .sub-header, /* 广告 */
  524.         .top-meta, /* 官方app，telegram频道 */
  525.         .search-recent-keywords,
  526.         .navbar.is-dark.is-fluid {
  527.             display: none !important;
  528.         }
  529. /* 右边文字 */
  530.         /* 复制按钮 */
  531.        .button.is-white.copy-to-clipboard {
  532.            box-shadow: none !important; /* 去阴影 */
  533.          }
  534.        .button.is-white.copy-to-clipboard:hover{
  535.            background-color: #fff !important; /* hover 背景色 */
  536.          }
  537. /* 其他 */
  538.        .panel.movie-panel-info .panel-block {
  539.            font-size: 14px !important; /* 示例字体大小 */
  540.          }
  541.         .panel.movie-panel-info .panel-block a {
  542.             color: #777777 !important; /* 超链接的颜色 */
  543.         }
  544.         .panel.movie-panel-info a:hover {
  545.             color: #ef9595 !important; /* 修改鼠标悬停时的超链接颜色为浅番茄红 */
  546.         }
  547.         .score-stars [class^=icon-] {
  548.             color: #ED7676 !important; /* 星星得分 */
  549.         }
  550.         .score-stars .gray {
  551.             color:#E2E2E2 !important;  /* 星星 */
  552.         }
  553.         .video-panel .magnet-links .item .magnet-name .name {
  554.             font-weight: 700;
  555.             word-break: break-all;
  556.             font-size: 13px !important;
  557.         }
  558. /*  ---- ---- ---- ---- 2.2 预览图框格---- ---- ---- ---- ----*/
  559.   /*整体布局*/
  560.         .preview-images {
  561.             display: grid !important; /* 使用grid布局 */
  562.             grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; /* 根据屏幕大小自动等分，保证每个框格的宽度至少为100px */
  563.             grid-template-rows: 1fr 1fr !important; /* 确保每一行的高度相等 */
  564.             grid-gap: 16px !important; /* 每个框格之间的间距 */
  565.         }
  566.         /* 确保每个框格的图片按原始比例展示，且黑色填充空白 */
  567.         .preview-images img {
  568.             width: 100% !important; /* 让图片宽度填满框格 */
  569.             height: 100% !important; /* 让图片高度填满框格 */
  570.             object-fit: contain !important; /* 强制图片填满框格 */
  571.             background-color: #000 !important; /* 背景色为黑色 */
  572.             display: block !important; /* 图片作为块级元素显示 */
  573.             aspect-ratio: 16 / 10 !important; /* 设置 16:9 的固定长宽比 */
  574.             box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;  /* 阴影效果 */
  575.             outline: 4px solid #000 !important;  /* 设置边框，5px 白色边框 */
  576.         }
  577.         /* 确保每个框格的容器用黑色背景填满整个区域 */
  578.         .preview-images .item {
  579.             background-color: black !important; /* 背景色为黑色 */
  580.             display: flex !important; /* 使用flex布局来让图片居中 */
  581.             justify-content: center !important; /* 水平居中 */
  582.             align-items: center !important; /* 垂直居中 */
  583.             height: 100% !important; /* 确保框格的高度填满容器 */
  584.             width: 100% !important; /* 让图片宽度填满框格 */
  585.         }
  586.  /* 视频预览 */
  587.         /* 修改 preview-video-container 字体大小和颜色 */
  588.         .preview-video-container span {
  589.             font-size: 11px !important; /* 设置字体大小 */
  590.             border-radius: 3px !important;
  591.             color: #FFFFFF !important; /* 设置字体颜色 */
  592.             position: absolute !important; /* 按钮绝对定位 */
  593.             top: 10% !important; /* 相对于父容器的垂直居中 */
  594.             left: 5% !important; /* 距离左侧 */
  595.         }
  596.          /* 去掉视频预览遮罩 */
  597.         .preview-video-container:after {
  598.             background-color: rgba(0,0,0,.0);
  599.         }
  600.       .tag.is-dark {
  601.                   background-color:#000 !important; /* 背景色为黑色 */
  602.               }
  603.       .tag.is-warning.tooltip {
  604.                   background-color:#ff90bc !important; /* 背景色为黑色 */
  605.               }
  606. /*  ---- ---- ---- ---- ---- 2.3 下载页 ---- ---- ---- ---- ----*/
  607.         /* 移除边框残影 */
  608.         .tabs a {
  609.             border-bottom: none !important;
  610.             margin-bottom: 0px;
  611.         }
  612.        /* 列居中 */
  613.         .item.columns.is-desktop,
  614.         .item.columns.is-desktop.odd {
  615.             margin: 6px !important;
  616.             transform: translateY(-4px); /* 向下移动按钮组 10 像素 */
  617.         }
  618.         .item.columns.is-desktop:hover,
  619.         .item.columns.is-desktop.odd:hover {
  620.             background-color: #fff !important;
  621.         }
  622.         /* 按钮组 */
  623.         .tabs.is-boxed, .tabs.no-bottom {
  624.             border-bottom: 0 !important;
  625.             margin-bottom: 0px !important;
  626.             overflow: visible;
  627.         }
  628.         /* 背景透明 */
  629.         .tabs.is-boxed a {
  630.             background-color: transparent !important;
  631.         }
  632.         /* name、meta 和 tags 列整体右移 20px */
  633.         .magnet-links .item .magnet-name,
  634.         .magnet-links .item .magnet-meta,
  635.         .magnet-links .item .magnet-tags {
  636.             margin-left: 10px !important; /* 向右移动 20px */
  637.         }
  638.          /* 高清 */
  639.         .tag.is-primary.is-small.is-light {
  640.             color: #fff !important; /* 设置字体颜色 */
  641.             background-color: #49C78E !important; /* 背景色为黑色 */
  642.         }
  643.           /* 字幕 */
  644.         .tag.is-warning.is-small.is-light {
  645.             color: #fff !important; /* 设置字体颜色 */
  646.             background-color: #f4b16b !important; /* 背景色 */
  647.         }
  648.           /* meta(大小，文件个数）) */
  649.         .video-panel .magnet-links .item .magnet-name .meta {
  650.             color: #888888 !important; /* 设置字体颜色 */
  651.             font-size: 11px !important;
  652.         }
  653.         /* 磁力链接按钮位置，颜色 */
  654.         .magnet-links .item .buttons {
  655.             position: absolute !important; /* 按钮绝对定位 */
  656.             top: 50% !important; /* 相对于父容器的垂直居中 */
  657.             right: 120px !important; /* 距离右侧调整至 120px，可根据需要手动调整 */
  658.             transform: translateY(-50%) !important; /* 确保垂直方向真正居中 */
  659.             display: flex !important; /* 使用 flex 布局方便调整间距 */
  660.             gap: 0px !important; /* 复制和下载按钮之间的间距，调整为 10px */
  661.             color: #888888 !important; /* 设置字体颜色 */
  662.         }
  663.  /*----复制，下载 ----*/
  664.           /*按钮（复制，下载，赞，收藏）  */
  665.           .button.is-info {
  666.               background-color: #Ed7676 !important;
  667.               color: #fff;
  668.               transition: transform 0.8s ease;
  669.           }
  670.           /*按钮居中 */
  671.           .buttons.column {
  672.               display: flex;
  673.               flex-wrap: wrap; /* 确保按钮不重叠，并且能换行 */
  674.               justify-content: flex-start; /* 按钮的排列方式 */
  675.               align-items: center; /* 按钮垂直居中 */
  676.           }
  677.           .buttons.column > .button.is-info.is-small {
  678.               color: #fff;
  679.               margin: 6px;
  680.           }
  681.         /*按钮（复制，下载，赞，收藏）  */
  682.         .button.is-info.is-small:hover {
  683.             border-color: transparent;
  684.             color: #fff;
  685.         }
  686.         /* 日期 */
  687.         .magnet-links .item .date {
  688.             position: absolute !important; /* 日期列绝对定位 */
  689.             top: 50% !important; /* 垂直居中 */
  690.             right: 15px !important; /* 距离右侧调整至 10px */
  691.             transform: translateY(-50%) !important; /* 确保垂直方向真正居中 */
  692.         }
  693.         /* 短评 */
  694.         .review-items .review-item {
  695.             padding: .8rem 0;
  696.             border-bottom: 1px dashed #ddd;
  697.             border-radius: 0px !important; /* 保证图片顶部圆角 */
  698.             font-size: 14px !important;
  699.         }
  700.         /* 隐藏更多短评 */
  701.         .review-item.more.has-text-link {
  702.               display: none !important;
  703.         }
  704. /*  -------- ---- ---- ----  2.5 其他---- ---- ---- ----  ----*/
  705. /* header颜色 */
  706.         .video-panel .message-header {
  707.             background-color: #AC86C5 !important;
  708.             border-radius: 6px !important; /* 保证放大时四个角有圆角 */
  709.             border-bottom-left-radius: 0px !important;
  710.             border-bottom-right-radius: 0px !important;
  711.         }
  712. /* 链接颜色 */
  713.         .video-panel .tile-images .tile-item .video-number, .video-panel .tile-images .tile-item .video-title {
  714.             color: #888 !important;
  715.             font-size: .7rem;
  716.         }
  717. /* 卡片化 */
  718.   .tile-images.tile-small .tile-item  {
  719.     border: 0px solid #ccc; /* 添加浅灰色边框 */
  720.     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important; /* 阴影*/
  721.     padding: 10px;         /* 内部内容的间距 */
  722.     background-color: #fff; /* 可选，背景颜色 */
  723.   }
  724. /* ---- ---- ---- ---- ---- --- ---- ---- ---3.女优主页---- ---- --- ---- ---- --- ---- ---- ---- -------*/
  725. /* 头像 */
  726.      .avatar {
  727.             object-fit: cover !important; /* 强制图片填满框格 */
  728.             background-color: #Ed7676 !important; /* 背景色为黑色 */
  729.             display: block !important; /* 图片作为块级元素显示 */
  730.             aspect-ratio: 16 / 16 !important; /* 设置 16:9 的固定长宽比 */
  731.             box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;  /* 阴影效果 */
  732.             outline: 5px solid #fff !important;
  733.             border-radius: 12px !important; /* 保证图片顶部圆角 */
  734.         }
  735.         .has-text-justified {
  736.             font-size: 1.5rem;
  737.             text-align: justify!important;
  738.             margin-left: 16px;
  739. }
  740. /* 收藏，twitter,instagram. */
  741.           /*按钮左对齐，增加间距 */
  742.           .column.section-addition > .field.has-addons {
  743.               display: flex;        /* 启用 Flexbox 布局 */
  744.               align-items: center;  /* 垂直方向居中对齐 */
  745.               justify-content: flex-start; /* 保证按钮组左对齐 */
  746.           }
  747.           .column.section-addition > .field.has-addons > .control:not(:first-child) {
  748.               margin-left: 10px; /* 从第二个按钮开始设置水平间距 */
  749.           }
  750.         /* 心形图标 */
  751.         .icon-heart-o {
  752.             display: flex;
  753.             justify-content: flex-end;
  754.             align-items: center;
  755.             width: 20px;
  756.             height: 20px;
  757.         }
  758.         /* twitter */
  759.         a.button.is-info[href*="twitter.com"] {
  760.             background-color: #028FD6 !important;
  761.         }
  762.         /* instagramr */
  763.         a.button.is-info[href*="instagram.com"] {
  764.             background-color: #b547a3 !important;
  765.         }
  766. /* 标签组 */
  767.         .actor-tags.tags {
  768.             border: none; !important; /* 移除tag底部边框 */
  769.             transform: translateY(20px); /* 向下移动 */
  770.         }
  771.  /* 下移 */
  772.         .actor-tags .collapse {
  773.             height: 30px !important;
  774.         }
  775.  /* 标签文字大小…（全局）  */
  776.         .tag:not(body).is-medium {
  777.             font-size: 0.8rem;
  778.             border: 1px solid #999 !important;
  779.             box-shadow: none !important;  /* 阴影效果 */
  780.         }
  781.  /* “全部”*/
  782.         .tag:not(body).is-link {
  783.             background-color: #AC86C5 !important;
  784.             border: 1px solid #AC86C5 !important;
  785.             color: #fff !important;
  786.         }
  787.          div.actor-tags.tags > div > a.button.is-link.tag-expand > span.text:hover {
  788.             color: #fff !important;
  789. }
  790.  /* “可播放，单体作品……”  */
  791.         .actor-tags .tag {
  792.             color: #888 !important;
  793.             background-color: #fff !important;
  794.             }
  795.  
  796.          .actor-tags .tag:hover,
  797.          .actor-tags .button:hover {
  798.            text-decoration: none !important;
  799.            color: #Ed7676 !important;
  800.          }
  801. .tag.is-medium.is-link:hover,
  802. .button.is-link.tag-expand.is-outlined:hover,
  803. .button.is-link.tag-expand:hover {
  804.            color: #fff !important;
  805.          }
  806.          .tag:not(body) .delete {
  807.             border-radius: 50% !important;
  808. }
  809. .tags .tag:not(:last-child) {
  810.     margin-right: .4rem;
  811. }
  812. /* 更多 */
  813.         /* 按钮大小 */
  814.         .actor-tags .content .tag-expand {
  815.             padding: calc(.9em - 6px) 0.5em;
  816.             font-size: .75rem;
  817.             float: right;
  818.         }
  819.         /* 按钮颜色 */
  820.         .button.is-link.is-outlined,
  821.         .button.is-link {
  822.            background-color:#AC86C5 !important;
  823.            border: none; !important;
  824.            color: #fff !important;
  825.         }
  826.         .button.is-link.is-outlined.tag-expand:hover {
  827.             background-color: #AC86C5 !important; /* 设置背景色为紫色 */
  828.             color: white !important; /* 设置文字颜色为白色 */
  829.         }
  830. }
  831. /* ---- ---- ---- ---- ---- --- ---- ---- ---4.女优主页---- ---- --- ---- ---- --- ---- ---- ---- -------*/
  832. #tags dt a.tag-expand {
  833.     float: right;
  834.     margin-top: .6rem;
  835.     font-size: .6rem;
  836.     padding: 2px 5px;
  837.     border-color: #e45e6b !important;
  838.     color: #fff;
  839. }
  840. .actors .box img {
  841.     min-width: 3rem;
  842.     height: auto;
  843.     transition: all .2s ease-in-out;
  844.     box-shadow: none !important;
  845.     border: none !important;
  846.     border-radius: 0 !important;
  847. }
  848. .actors .box {
  849.     display: inline-block;
  850.     text-align: center;
  851.     margin: 2px;
  852.     font-size: .8rem;
  853.     overflow: hidden !important;
  854.     margin-bottom: .4rem;
  855.     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  856. }
  857. .actor-box a:visited strong {
  858.     color: #ac86c5 !important;
  859. }
  860. .actor-box a strong {
  861.     padding-top: .6rem;
  862.     padding-bottom: .4rem;
  863.     display: block;
  864.     line-height: 1rem;
  865.     overflow-x: hidden;
  866.     text-overflow: ellipsis;
  867.     white-space: nowrap;
  868.     color: #009e86;
  869. }
  870. body > section > div > h3:nth-child(6) {
  871.     font-size: 1.5rem;
  872.     margin-top: 16px;
  873. }
  874. .section-container .box {
  875.     margin-bottom: 0;
  876.     padding: 1rem 1.2rem;
  877.     color: #3273dc;
  878.     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
  879.     word-wrap: break-word;
  880. }
  881.     `;
  882.   document.head.appendChild(style); // 将其添加到 <head> 中
  883. })();