MouseUI

A simple style library for Author own use.

目前為 2021-11-02 提交的版本，檢視最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/434834/984427/MouseUI.js

發表問題、評論、或檢舉該腳本。

換行

/**
* Author: 稻米鼠
* Version: 2021-11-02 09:35
*/
class MouseUI {
  #style = `
    .mouse-root {
      --Gray_0: #333336;
      --Gray_1: #666669;
      --Gray_2: #99999c;
      --Gray_3: #cccccf;
      --Gray_4: #efeff3;
      --Red: #e06c6c;
      --Light_Red: #ffacac;
      font-size: 18px;
      font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Lantinghei SC", "Source Han Sans", "Microsoft YaHei", "Helvetica Neue", "Noto Sans CJK", Helvetica, Arial, sans-serif;
      font-weight: normal;
      line-height: 1.6;
      color: #333336;
      margin: 0;
      padding: 0;
    }
    .mouse-root,
    .mouse-root * {
      box-sizing: border-box;
    }
    a {
      color: #e06c6c;
      text-decoration: none;
      padding: 0 6px;
      border-radius: 4px;
    }
    a:visited {
      color: #e06c6c;
    }
    a:hover {
      color: #efeff3;
      background-color: #e06c6c;
    }
    a:active {
      color: #efeff3;
      background-color: #ffacac;
    }
    p {
      margin: 6px 0;
    }
    .flex-area {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-content: center;
      align-items: stretch;
    }
    .fixed-center {
      left: 50%;
      transform: translate(-50%, 0);
    }
    .flex-ver {
      flex-direction: column;
    }
    .full-area {
      width: 100vw;
    }
    .content-area {
      width: 800px;
      max-width: 100%;
    }
    .mini-content-area {
      width: 640px;
      max-width: 100%;
    }
    .card-area {
      width: 360px;
      max-width: 100%;
    }
    button {
      background-color: #efeff3;
      color: #333336;
      font-size: 21.599999999999998px;
      line-height: 1.6;
      border: 1px solid #cccccf;
      border-radius: 4px;
      margin: 6px 0;
      cursor: pointer;
    }
    button:hover {
      background-color: #99999c;
      color: #efeff3;
    }
    textarea {
      display: block;
      padding: 12px;
      margin: 6px 0;
      border: 1px solid #cccccf;
      border-radius: 4px;
      resize: none;
      flex-grow: 1;
      font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Lantinghei SC", "Source Han Sans", "Microsoft YaHei", "Helvetica Neue", "Noto Sans CJK", Helvetica, Arial, sans-serif;
    }
    .text-center {
      text-align: center;
    }
    .text-small {
      font-size: small;
    }
    .panel {
      position: fixed;
      z-index: 2147483647;
      background-color: #efeff3;
      backdrop-filter: blur(12px);
      border: 1px solid #cccccf;
      border-radius: 4px;
      padding: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 8px 48px rgba(0,0,0,0.4);
    }
    .panel>* {
      margin-top: 0;
    }
    .button-group {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-content: center;
      align-items: stretch;
    }
    .button-group > button {
      flex-grow: 1;
      border-right: none;
      border-radius: 0;
    }
    .button-group > button:first-child {
      border-radius: 4px 0 0 4px;
    }
    .button-group > button:last-child {
      border-radius: 0 4px 4px 0;
      border: 1px solid #cccccf;
    }
    
  `
  constructor(){

  }
  toString(){
    return this.#style
  }
}

欢迎访问Greasy Fork镜像