网页页面样式美化

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

目前為 2024-03-09 提交的版本,檢視 最新版本

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

(function() {
  let css = `
    /* 图片 */
    img {
      /* 放大图片动画 */
      transition: transform 0.3s ease !important;
      /* 添加圆角 */
      border-radius: 8px !important;
      /* 添加阴影效果 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
      -webkit-transition-property: box-shadow;
      -webkit-transition-duration: .31s;
    }
    /* 指向图片 */
    img:hover {
      /* 放大图片 */
      transform: scale(1.05);
      /* 粉色边框 */
      box-shadow: 0px 0px 4px 4px rgba(217, 99, 150, 0.6) !important;
      -webkit-transition-property: box-shadow;
      -webkit-transition-duration: .31s;
    }

    /* 输入框 */
    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 #D96396 !important; 
      -webkit-box-shadow:0px 0px 0px #D96396 !important;
      /* 圆角度数 */
      border-radius: 8px !important;
    }

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

    STRONG {
      color: #5D87A6 !important;
    }

    a * {
      /* 去除下划线 */
      text-decoration: none !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.0s;
      /* 链接颜色 */
      color: #5D87A6 !important;
   }

    /* 链接 */
    a {
      /* 去除下划线 */
      text-decoration: none !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.0s;
      /* 链接颜色 */
      color: #5D87A6 !important;
      /* 链接颜色变化动画 */
      transition: color 0.3s ease;

      /* 虚线下划线 */
      // text-decoration:underline dotted;
      /* 普通下划线 */
      // underline; 
      /* 双下划线 */
      // underline double;
      /* 波浪线下划线 */
      // underline wavy;
    }

    /* 指向链接 */
    a:hover {
      /* 去除下划线 */
      text-decoration: none !important;
      -webkit-transition-property: color;
      -webkit-transition-duration: 0.0s;
      /* 指向链接颜色 */
      color: #fff !important;
      /* 指向文字加粗 */
      text-shadow: 0em 0em 0.1em !important;
      font-weight: bold !important;
   }

 `;

  if (typeof GM_addStyle !== "undefined") {
    GM_addStyle(css);
  } else {
    let styleNode = document.createElement("style");
    styleNode.appendChild(document.createTextNode(css));
    (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  }

})();