☰

gz_ui_css-v1

个人自用样式

Versione datata 29/12/2024. Vedi la nuova versione l'ultima versione.

Questo script non dovrebbe essere installato direttamente. È una libreria per altri script da includere con la chiave // @require https://update.greatest.deepsurf.us/scripts/517928/1511531/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.3
  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: 4px;
  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.  
  73. input {
  74.     font-family: 'Arial', sans-serif; /* 设置字体 */
  75.     font-size: 16px; /* 设置字体大小 */
  76.     padding: 10px; /* 输入框内部的填充 */
  77.     margin: 10px; /* 输入框外部的边距 */
  78.     border: 1px solid #ccc; /* 边框样式 */
  79.     border-radius: 4px; /* 边框圆角 */
  80.     outline: none; /* 移除聚焦时的轮廓线 */
  81. }
  82.  
  83. input:focus {
  84.     border-color: #007bff; /* 聚焦时边框颜色 */
  85.     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 聚焦时的阴影效果 */
  86. }
  87.  
  88.  
  89. select {
  90.     font-family: 'Arial', sans-serif; /* 设置字体 */
  91.     font-size: 16px; /* 设置字体大小 */
  92.     padding: 10px; /* 输入框内部的填充 */
  93.     margin: 10px; /* 输入框外部的边距 */
  94.     border: 1px solid #ccc; /* 边框样式 */
  95.     border-radius: 4px; /* 边框圆角 */
  96.     outline: none; /* 移除聚焦时的轮廓线 */
  97.     background-color: white; /* 背景色 */
  98.     color: #333; /* 文本颜色 */
  99. }
  100.  
  101. select:focus {
  102.     border-color: #007bff; /* 聚焦时边框颜色 */
  103.     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 聚焦时的阴影效果 */
  104. }
  105.  
  106. select:disabled {
  107.     background-color: #f1f1f1; /* 禁用时的背景色 */
  108.     border-color: #ccc; /* 禁用时的边框色 */
  109.     color: #888; /* 禁用时的文本色 */
  110. }
  111.  
  112. button {
  113.     border-radius: 8px;
  114.     border: 1px solid transparent;
  115.     padding: 0.6em 1.2em;
  116.     font-size: 1em;
  117.     font-weight: 500;
  118.     font-family: inherit;
  119.     cursor: pointer;
  120.     transition: border-color 0.25s;
  121. }
  122. button:hover {
  123.     border-color: #646cff;
  124. }
  125.  
  126.  
  127. /*聚焦环*/
  128. button:focus,
  129. button:focus-visible {
  130.     outline: 4px auto -webkit-focus-ring-color;
  131. }
  132. `;
  133.  
  134.  
  135.  
  136.     const run = () => {
  137.         const styleEl = document.querySelector("style[gz_style]");
  138.         if (styleEl !== null) {
  139.             console.log("已有gz_style样式，故不再插入该样式内容");
  140.             return;
  141.         }
  142.         const style = document.createElement('style');
  143.         style.setAttribute("gz_style", "");
  144.         style.textContent = css;
  145.         document.head.appendChild(style);
  146.  
  147.     };
  148.  
  149.     run();
  150.  
  151. })();