☰

MouseUI

A simple style library for Author own use.

当前为 2021-11-10 提交的版本，查看 最新版本。

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

  1. /**
  2. * Author: 稻米鼠
  3. * Version: 2021-11-10 16:00
  4. */
  5. class MouseUI {
  6.   #style = `
  7.     .mouse-root {
  8.       --Gray_0: #333336;
  9.       --Gray_1: #666669;
  10.       --Gray_2: #99999c;
  11.       --Gray_3: #cccccf;
  12.       --Gray_4: #efeff3;
  13.       --Red: #e06c6c;
  14.       --Light_Red: #ffacac;
  15.       --Blue: #007bda;
  16.       --Light_Blue: #6cc6e6;
  17.       --Space: 6px;
  18.       --Space_2: 12px;
  19.       font-size: 18px;
  20.       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;
  21.       font-weight: normal;
  22.       line-height: 1.6;
  23.       color: #333336;
  24.       margin: 0;
  25.       padding: 0;
  26.     }
  27.     .mouse-root,
  28.     .mouse-root * {
  29.       box-sizing: border-box;
  30.     }
  31.     ::-webkit-scrollbar {
  32.       width: 6px;
  33.       height: 6px;
  34.       background-color: rgba(0,0,0,0.05);
  35.     }
  36.     ::-webkit-scrollbar-button {
  37.       display: 'none';
  38.     }
  39.     ::-webkit-scrollbar-thumb {
  40.       background-color: rgba(0,0,0,0.5);
  41.       border-radius: 3px;
  42.     }
  43.     a {
  44.       color: #e06c6c;
  45.       text-decoration: none;
  46.       padding: 0 6px;
  47.       border-radius: 4px;
  48.     }
  49.     a:visited {
  50.       color: #e06c6c;
  51.     }
  52.     a:hover {
  53.       color: #efeff3;
  54.       background-color: #e06c6c;
  55.     }
  56.     a:active {
  57.       color: #efeff3;
  58.       background-color: #ffacac;
  59.     }
  60.     p,
  61.     h1,
  62.     h2,
  63.     h3,
  64.     h4,
  65.     h5,
  66.     h6,
  67.     hr,
  68.     ul,
  69.     ol {
  70.       margin: 6px 0;
  71.     }
  72.     hr {
  73.       border: none;
  74.       background: #cccccf;
  75.       height: 1px;
  76.     }
  77.     .flex-area {
  78.       display: flex;
  79.       flex-wrap: nowrap;
  80.       justify-content: center;
  81.       align-content: center;
  82.       align-items: stretch;
  83.     }
  84.     .flex-ver {
  85.       flex-direction: column;
  86.     }
  87.     .fixed-center {
  88.       left: 50%;
  89.       transform: translate(-50%, 0);
  90.     }
  91.     .full-area {
  92.       width: 100vw;
  93.     }
  94.     .content-area {
  95.       width: 800px;
  96.       max-width: 100%;
  97.     }
  98.     .mini-content-area {
  99.       width: 640px;
  100.       max-width: 100%;
  101.     }
  102.     .card-area {
  103.       width: 360px;
  104.       max-width: 100%;
  105.     }
  106.     button {
  107.       background-color: #efeff3;
  108.       color: #333336;
  109.       font-size: 21.599999999999998px;
  110.       line-height: 1.6;
  111.       border: 1px solid #cccccf;
  112.       border-radius: 4px;
  113.       margin: 6px 0;
  114.       cursor: pointer;
  115.     }
  116.     button:hover {
  117.       background-color: #99999c;
  118.       color: #efeff3;
  119.     }
  120.     textarea {
  121.       display: block;
  122.       padding: 12px;
  123.       margin: 6px 0;
  124.       border: 1px solid #cccccf;
  125.       border-radius: 4px;
  126.       resize: none;
  127.       flex-grow: 1;
  128.       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;
  129.     }
  130.     .text-center {
  131.       text-align: center;
  132.     }
  133.     .text-small {
  134.       font-size: small;
  135.     }
  136.     .hidden {
  137.       display: none;
  138.     }
  139.     .panel {
  140.       position: fixed;
  141.       z-index: 2147483647;
  142.     }
  143.     .panel .trigger {
  144.       position: absolute;
  145.       width: 36px;
  146.       height: 36px;
  147.       background: rgba(224,108,108,0.3);
  148.       border-radius: 18px;
  149.       cursor: pointer;
  150.       z-index: 10;
  151.     }
  152.     .panel .trigger::before {
  153.       content: " ";
  154.       position: absolute;
  155.       left: 6px;
  156.       top: 6px;
  157.       width: 24px;
  158.       height: 24px;
  159.       border-radius: 12px;
  160.       background: rgba(224,108,108,0.6);
  161.     }
  162.     .card {
  163.       background-color: #efeff3;
  164.       backdrop-filter: blur(12px);
  165.       border: 1px solid #cccccf;
  166.       border-radius: 4px;
  167.       padding: 12px;
  168.       box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 8px 48px rgba(0,0,0,0.2);
  169.     }
  170.     .card>*:first-child {
  171.       margin-top: 0;
  172.     }
  173.     .button-group {
  174.       display: flex;
  175.       flex-wrap: nowrap;
  176.       justify-content: center;
  177.       align-content: center;
  178.       align-items: stretch;
  179.     }
  180.     .button-group > button {
  181.       flex-grow: 1;
  182.       border-right: none;
  183.       border-radius: 0;
  184.     }
  185.     .button-group > button:first-child {
  186.       border-radius: 4px 0 0 4px;
  187.     }
  188.     .button-group > button:last-child {
  189.       border-radius: 0 4px 4px 0;
  190.       border: 1px solid #cccccf;
  191.     }
  192.     .button-group > button.radio:hover {
  193.       background-color: #efeff3;
  194.       color: #333336;
  195.     }
  196.     .button-group > button.radio.checked {
  197.       background-color: #007bda;
  198.       color: #efeff3;
  199.     }
  200.     .tab-group {
  201.       border-bottom: 1px solid #cccccf;
  202.     }
  203.     .tab-group > .tab {
  204.       padding: 0 12px;
  205.       cursor: pointer;
  206.     }
  207.     .tab-group > .tab.checked {
  208.       border: 1px solid #cccccf;
  209.       border-bottom: none;
  210.       border-radius: 6px 6px 0 0;
  211.       background-color: #fff;
  212.       color: #007bda;
  213.       font-weight: 600;
  214.     }
  215.     ul.no-point,
  216.     ol.no-point {
  217.       padding: 0;
  218.     }
  219.     ul.no-point>li,
  220.     ol.no-point>li {
  221.       list-style: none;
  222.     }
  223.     
  224.   `
  225.   constructor(){
  226.  
  227.   }
  228.   toString(){
  229.     return this.#style
  230.   }
  231. }