MouseUI

A simple style library for Author own use.

目前为 2021-11-02 提交的版本。查看最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/434834/984427/MouseUI.js

提问、发表评价，或者举报这个脚本。

Wrap lines

/**
* 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镜像