网页页面样式美化

指向文字加粗, 指向图片发光, 指向图片放大动画, 输入框美化, 去除下划线, 选择文字高亮颜色, 链接更改颜色, 图片圆角, 指向链接增加边框

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        网页页面样式美化
// @namespace   网页页面样式小美化
// @description 指向文字加粗, 指向图片发光, 指向图片放大动画, 输入框美化, 去除下划线, 选择文字高亮颜色, 链接更改颜色, 图片圆角, 指向链接增加边框
// @version     0.41
// @match       *://*/*
// @run-at       document-start
// ==/UserScript==

(function() {

    // 选择文字背景色, 输入框颜色
    var textarea = '#D96396';

    // 链接颜色
    var Urlcolor = '#87CEFF';

    // 已访问链接颜色
    var visited = '#90EE90';

    // 指向链接高亮颜色
    var Urlhovercolor = '#FA8072';

    // 指向链接边框颜色
    var bordercolor = '#D96396';

    // 指向链接边框圆角
    var borderradius = '5px';

    /* 虚线下划线 */
    // underline dotted
    /* 普通下划线 */
    // underline
    /* 双下划线 */
    // underline double
    /* 波浪线下划线 */
    // underline wavy
    // 下划线样式 none为去掉
    var decoration = 'none';

    // 输入框, 图片圆角
    var imgborder = '8px';

    // 图片放大
    var imgtransform = '1.02';

    // 图片放大动画速度
    var imgtransition = '0.2s';

let css = `
    /* 已访问链接颜色 */
    a:visited {
      color: ${visited} !important;
    }

    /* 图片 */
    img {
      /* 放大图片动画 */
      transition: transform ${imgtransition} ease !important;
      /* 添加圆角 */
      border-radius: ${imgborder} !important;
      /* 添加阴影效果 */
      box-shadow: 2px 2px rgba(0, 0, 0, 0.2) !important;
      -webkit-transition-property: box-shadow;
    }
    /* 指向图片 */
    img:hover {
      /* 放大图片 */
      transform: scale(${imgtransform});
      /* 粉色边框 */
      box-shadow: 0px 0px 4px 4px rgba(217, 99, 150, 0.6) !important;
      -webkit-transition-property: box-shadow;
    }

    /* 输入框 */
    textarea:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="checkbox"]:focus,
    input[type="submit"]:focus,
    input[type="reset"]:focus,
    input[type="radio"]:focus { 
      /* 颜色 */
      outline: 2px solid ${textarea} !important; 
      -webkit-box-shadow:0px 0px 0px #D96396 !important;
      /* 圆角度数 */
      border-radius: ${imgborder} !important;
    }

    /* 选择文字自定义高亮颜色 */
    ::selection {
      /* 背景颜色 */
      background-color: ${textarea} !important;
      /* 文本颜色 */
      color: #fff !important;
    }

    a * {
      /* 下划线 */
      text-decoration: ${decoration} !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.2s;
   }

    /* 链接 */
    a, strong, span.highlight-style, .mobile-subcategories-item.flex-row-center {
      /* 下划线 */
      text-decoration: ${decoration} !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.2s;
      /* 链接颜色 */
      color: ${Urlcolor} !important;
    }

    /* 指向链接 */
    a:hover {
      /* 下划线 */
      text-decoration: ${decoration} !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.2s;
      /* 指向链接颜色 */
      color: ${Urlhovercolor} !important;
      /* 指向文字加粗 */
      text-shadow: 0em 0em 0.1em !important;
      font-weight: bold !important;
      /* 增加边框 */
      /* border: 1px solid ${bordercolor}; */
      /* 边框圆角 */
      border-radius: ${borderradius};
   }
`;

    function addStyle(cssstyle) {
        let styleNode = document.createElement("style");
        styleNode.appendChild(document.createTextNode(cssstyle));
        (document.querySelector("head") || document.documentElement).appendChild(styleNode);
    }

   addStyle(css);

})();