☰

baseStyles

常用的基础 CSS

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

  1. // ==UserScript==
  2. // @name            baseStyles
  3. // @description    常用的基础 CSS
  4. // @namespace    essence/styles/base
  5. // @version          0.2
  6. // @grant            GM_addStyle
  7. // @license          MIT
  8. // ==/UserScript==
  9.  
  10. /* 亮色颜色变量 */
  11. /* 参考 https://nextui.org/docs/customization/colors */
  12.  
  13. GM_addStyle(`
  14. /* 亮色颜色变量 */
  15. /* 参考 https://nextui.org/docs/customization/colors */
  16. :root {
  17.   --essenceX-layout-background: #FFFFFF;
  18.   --essenceX-layout-foreground: #11181C;
  19.   --essenceX-layout-divider: rgba(17, 17, 17, 0.15);
  20.   --essenceX-layout-focus: #006FEE;
  21.  
  22.   --essenceX-content-1: #FFFFFF;
  23.   --essenceX-content-2: #f4f4f5;
  24.   --essenceX-content-3: #e4e4e7;
  25.   --essenceX-content-4: #d4d4d8;
  26.  
  27.   --essenceX-default-background: #d4d4d8;
  28.   --essenceX-default-foreground: hsl(0 0% 0%);
  29.   --essenceX-primary-background: #006FEE;
  30.   --essenceX-primary-foreground: hsl(0 0% 100%);
  31.   --essenceX-secondary-background: #7828c8;
  32.   --essenceX-secondary-foreground: hsl(202 24% 9%);
  33.   --essenceX-success-background: #17c964;
  34.   --essenceX-success-foreground: hsl(0 0% 0%);
  35.   --essenceX-warning-background: #f5a524;
  36.   --essenceX-warning-foreground: hsl(0 0% 0%);
  37.   --essenceX-danger-background: #f31260;
  38.   --essenceX-danger-foreground: hsl(0 0% 100%);
  39.  
  40.   --essenceX-padding-medium: 10px 16px;
  41.   --essenceX-radius-medium: 14px;
  42.  
  43.   --essenceX-toast-margin: 30px;
  44.   --essenceX-toast-initial-position: 100px;
  45.  
  46.   --essenceX-font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  47. }
  48.  
  49. button.essenceX {
  50.   border: none;
  51.   border-radius: var(--essenceX-radius-medium);
  52.   padding: var(--essenceX-padding-medium);
  53.   transition: all 0.3s ease;
  54. }
  55.  
  56. button.essenceX:active {
  57.   transform: scale(0.95);
  58. }
  59.  
  60. .default.essenceX {
  61.   background: var(--essenceX-default-background);
  62.   color: var(--essenceX-default-foreground);
  63. }
  64.  
  65. .primary.essenceX {
  66.   background: var(--essenceX-primary-background);
  67.   color: var(--essenceX-primary-foreground);
  68. }
  69.  
  70. .success.essenceX {
  71.   background: var(--essenceX-success-background);
  72.   color: var(--essenceX-success-foreground);
  73. }
  74.  
  75. .warning.essenceX {
  76.   background: var(--essenceX-warning-background);
  77.   color: var(--essenceX-warning-foreground);
  78. }
  79.  
  80. .danger.essenceX {
  81.   background: var(--essenceX-danger-background);
  82.   color: var(--essenceX-danger-foreground);
  83. }
  84.  
  85. a.essenceX {
  86.   color: var(--essenceX-primary-background);
  87.   text-decoration: none;
  88. }
  89.  
  90. a.essenceX:hover {
  91.   color: var(--essenceX-secondary-background);
  92. }
  93.  
  94. /*************** 布局 ******************/
  95.  
  96. .flex-row.essenceX {
  97.   display: flex;
  98.   flex-direction: row;
  99.   justify-content: space-between;
  100.   align-items: center;
  101. }
  102.  
  103. /*************** 自定义的面板 ***********/
  104.  
  105. /* 通知 */
  106. .toast.essenceX {
  107.   position: fixed;
  108.   top: calc(-1 * var(--essenceX-toast-initial-position));
  109.   right: var(--essenceX-toast-margin);
  110.   z-index: 9999;
  111.   padding: var(--essenceX-padding-medium);
  112.   border-radius: var(--essenceX-radius-medium);
  113.  
  114.   transition: transform 0.5s ease-in-out;
  115. }
  116.  
  117. .toast.show.essenceX {
  118.   transform: translateY(calc(var(--essenceX-toast-initial-position) + var(--essenceX-toast-margin)));
  119. }
  120.  
  121. .toast.hide.essenceX {
  122.   /* 因为出现时从上到下出现位移，所以从左到右消失需要指定保持 Y 轴，否则将从右上角消失 */
  123.   transform: translate(100%, calc(var(--essenceX-toast-initial-position) + var(--essenceX-toast-margin)));
  124. }
  125.  
  126. /* 对话框 */
  127. .dialog.essenceX {
  128.   position: fixed;
  129.   top: 0;
  130.   left: 0;
  131.   z-index: 9998;
  132.   width: 100%;
  133.   height: 100%;
  134.   display: flex;
  135.   justify-content: center;
  136.   align-items: start;
  137.   background-color: rgba(0, 0, 0, 0.2);
  138.  
  139.   opacity: 0;
  140.   transform: scale(0);
  141.   /* 过渡效果：缩放和透明度 */
  142.   transition: transform 0.3s, opacity 0.3s;
  143. }
  144.  
  145. .dialog.show.essenceX {
  146.   opacity: 1;
  147.   transform: scale(1);
  148. }
  149.  
  150. .dialog-content.essenceX {
  151.   background: var(--essenceX-layout-background);
  152.   border-radius: 10px;
  153.   width: 80%;
  154.   max-width: 600px;
  155.   padding: 20px;
  156.   margin-top: 100px;
  157. }
  158.  
  159. .dialog-header.essenceX {
  160.   font-weight: 600;
  161.   margin-bottom: 20px;
  162. }
  163.  
  164. .dialog-body.essenceX {
  165. }
  166. `);