baseStyles

常用的基础 CSS

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/491997/1356799/baseStyles.js 

// ==UserScript==
// @name            baseStyles
// @description    常用的基础 CSS
// @namespace    essence/styles/base
// @version          0.2
// @grant            GM_addStyle
// @license          MIT
// ==/UserScript==

/* 亮色颜色变量 */
/* 参考 https://nextui.org/docs/customization/colors */

GM_addStyle(`
/* 亮色颜色变量 */
/* 参考 https://nextui.org/docs/customization/colors */
:root {
  --essenceX-layout-background: #FFFFFF;
  --essenceX-layout-foreground: #11181C;
  --essenceX-layout-divider: rgba(17, 17, 17, 0.15);
  --essenceX-layout-focus: #006FEE;

  --essenceX-content-1: #FFFFFF;
  --essenceX-content-2: #f4f4f5;
  --essenceX-content-3: #e4e4e7;
  --essenceX-content-4: #d4d4d8;

  --essenceX-default-background: #d4d4d8;
  --essenceX-default-foreground: hsl(0 0% 0%);
  --essenceX-primary-background: #006FEE;
  --essenceX-primary-foreground: hsl(0 0% 100%);
  --essenceX-secondary-background: #7828c8;
  --essenceX-secondary-foreground: hsl(202 24% 9%);
  --essenceX-success-background: #17c964;
  --essenceX-success-foreground: hsl(0 0% 0%);
  --essenceX-warning-background: #f5a524;
  --essenceX-warning-foreground: hsl(0 0% 0%);
  --essenceX-danger-background: #f31260;
  --essenceX-danger-foreground: hsl(0 0% 100%);

  --essenceX-padding-medium: 10px 16px;
  --essenceX-radius-medium: 14px;

  --essenceX-toast-margin: 30px;
  --essenceX-toast-initial-position: 100px;

  --essenceX-font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

button.essenceX {
  border: none;
  border-radius: var(--essenceX-radius-medium);
  padding: var(--essenceX-padding-medium);
  transition: all 0.3s ease;
}

button.essenceX:active {
  transform: scale(0.95);
}

.default.essenceX {
  background: var(--essenceX-default-background);
  color: var(--essenceX-default-foreground);
}

.primary.essenceX {
  background: var(--essenceX-primary-background);
  color: var(--essenceX-primary-foreground);
}

.success.essenceX {
  background: var(--essenceX-success-background);
  color: var(--essenceX-success-foreground);
}

.warning.essenceX {
  background: var(--essenceX-warning-background);
  color: var(--essenceX-warning-foreground);
}

.danger.essenceX {
  background: var(--essenceX-danger-background);
  color: var(--essenceX-danger-foreground);
}

a.essenceX {
  color: var(--essenceX-primary-background);
  text-decoration: none;
}

a.essenceX:hover {
  color: var(--essenceX-secondary-background);
}

/*************** 布局 ******************/

.flex-row.essenceX {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/*************** 自定义的面板 ***********/

/* 通知 */
.toast.essenceX {
  position: fixed;
  top: calc(-1 * var(--essenceX-toast-initial-position));
  right: var(--essenceX-toast-margin);
  z-index: 9999;
  padding: var(--essenceX-padding-medium);
  border-radius: var(--essenceX-radius-medium);

  transition: transform 0.5s ease-in-out;
}

.toast.show.essenceX {
  transform: translateY(calc(var(--essenceX-toast-initial-position) + var(--essenceX-toast-margin)));
}

.toast.hide.essenceX {
  /* 因为出现时从上到下出现位移，所以从左到右消失需要指定保持 Y 轴，否则将从右上角消失 */
  transform: translate(100%, calc(var(--essenceX-toast-initial-position) + var(--essenceX-toast-margin)));
}

/* 对话框 */
.dialog.essenceX {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  background-color: rgba(0, 0, 0, 0.2);

  opacity: 0;
  transform: scale(0);
  /* 过渡效果：缩放和透明度 */
  transition: transform 0.3s, opacity 0.3s;
}

.dialog.show.essenceX {
  opacity: 1;
  transform: scale(1);
}

.dialog-content.essenceX {
  background: var(--essenceX-layout-background);
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  padding: 20px;
  margin-top: 100px;
}

.dialog-header.essenceX {
  font-weight: 600;
  margin-bottom: 20px;
}

.dialog-body.essenceX {
}
`);