☰

gz_ui_css-v1

个人自用样式

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/517928/1514836/gz_ui_css-v1.js 

  1. // ==UserScript==
  2. // @name        gz_ui_css-v1
  3. // @namespace   http://tampermonkey.net/
  4. // @homepageURL  https://space.bilibili.com/473239155
  5. // @license     Apache-2.0
  6. // @version     0.5
  7. // @author      byhgz
  8. // @description 个人自用样式
  9. // @noframes
  10. // ==/UserScript==
  11. (function () {
  12.     'use strict';
  13.  
  14.     var css = `button[gz_type] {
  15.     display: inline-block;
  16.     line-height: 1;
  17.     white-space: nowrap;
  18.     cursor: pointer;
  19.     background: #fff;
  20.     border: 1px solid #dcdfe6;
  21.     color: #606266;
  22.     -webkit-appearance: none;
  23.     text-align: center;
  24.     box-sizing: border-box;
  25.     outline: none;
  26.     margin: 0;
  27.     transition: .1s;
  28.     font-weight: 500;
  29.     -moz-user-select: none;
  30.     -webkit-user-select: none;
  31.     -ms-user-select: none;
  32.     padding: 12px 20px;
  33.     font-size: 14px;
  34.     border-radius: 8px;
  35. }
  36.  
  37. button[gz_type="primary"] {
  38.     color: #fff;
  39.     background-color: #409eff;
  40.     border-color: #409eff;
  41. }
  42.  
  43. button[gz_type="success"] {
  44.     color: #fff;
  45.     background-color: #67c23a;
  46.     border-color: #67c23a;
  47. }
  48.  
  49. button[gz_type="info"] {
  50.     color: #fff;
  51.     background-color: #909399;
  52.     border-color: #909399;
  53. }
  54.  
  55. button[gz_type="warning"] {
  56.     color: #fff;
  57.     background-color: #e6a23c;
  58.     border-color: #e6a23c;
  59. }
  60.  
  61. button[gz_type="danger"] {
  62.     color: #fff;
  63.     background-color: #f56c6c;
  64.     border-color: #f56c6c;
  65. }
  66.  
  67. button[border] {
  68.     border-radius: 20px;
  69.     padding: 12px 23px;
  70. }
  71.  
  72. input[gz_type] {
  73.     font-family: 'Arial', sans-serif; /* 设置字体 */
  74.     font-size: 16px; /* 设置字体大小 */
  75.     padding: 10px; /* 输入框内部的填充 */
  76.     margin: 10px; /* 输入框外部的边距 */
  77.     border: 1px solid #ccc; /* 边框样式 */
  78.     border-radius: 4px; /* 边框圆角 */
  79.     outline: none; /* 移除聚焦时的轮廓线 */
  80. }
  81.  
  82. input[gz_type]:focus {
  83.     border-color: #007bff; /* 聚焦时边框颜色 */
  84.     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 聚焦时的阴影效果 */
  85. }
  86.  
  87. select {
  88.     font-family: 'Arial', sans-serif; /* 设置字体 */
  89.     font-size: 16px; /* 设置字体大小 */
  90.     padding: 10px; /* 输入框内部的填充 */
  91.     margin: 10px; /* 输入框外部的边距 */
  92.     border: 1px solid #ccc; /* 边框样式 */
  93.     border-radius: 4px; /* 边框圆角 */
  94.     outline: none; /* 移除聚焦时的轮廓线 */
  95.     background-color: white; /* 背景色 */
  96.     color: #333; /* 文本颜色 */
  97. }
  98.  
  99. select:focus {
  100.     border-color: #007bff; /* 聚焦时边框颜色 */
  101.     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 聚焦时的阴影效果 */
  102. }
  103.  
  104. select:disabled {
  105.     background-color: #f1f1f1; /* 禁用时的背景色 */
  106.     border-color: #ccc; /* 禁用时的边框色 */
  107.     color: #888; /* 禁用时的文本色 */
  108. }
  109.  
  110.  
  111. button:hover {
  112.     border-color: #646cff;
  113. }
  114.  
  115. /*聚焦环*/
  116. button[gz_type]:focus,
  117. button[gz_type]:focus-visible {
  118.     outline: 4px auto -webkit-focus-ring-color;
  119. }
  120. `;
  121.     /**
  122.      * 插入样式
  123.      * @param el {Document}该元素下是否已经插入过样式
  124.      * @param insertionPosition {Element|Document} 要插入样式的位置
  125.      */
  126.     const addStyle = (el, insertionPosition = document.head) => {
  127.         const styleEl = el.querySelector("style[gz_style]");
  128.         if (styleEl !== null) {
  129.             console.log("已有gz_style样式，故不再插入该样式内容");
  130.             return;
  131.         }
  132.         const style = document.createElement('style');
  133.         style.setAttribute("gz_style", "");
  134.         style.textContent = css;
  135.         insertionPosition.appendChild(style);
  136.     };
  137.  
  138.     addStyle(document);
  139.  
  140.     window.gz_ui_css = {
  141.         addStyle
  142.     };
  143.  
  144. })();