baseStyles

常用的基础 CSS

Version vom 08.04.2024. Aktuellste Version

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/1356715/baseStyles.js

Stellen Sie eine Frage, veröffentlichen Sie eine Bewertung oder melden Sie das Skript.

Wrap lines

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

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

GM_addStyle(`
:root {
  --layout-background: #FFFFFF;
  --layout-foreground: #11181C;
  --layout-divider: rgba(17, 17, 17, 0.15);
  --layout-focus: #006FEE;

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

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

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

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

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
}

body {
  background-color: var(--layout-background);
  color: var(--layout-foreground);
}

button {
  border: none;
  border-radius: var(--radius-medium);
  padding: var(--padding-medium);
  transition: all 0.3s ease;
  font-weight: 600;
}

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

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

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

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

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

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

a {
  color: var(--primary-background);
  font-weight: 600;
  text-decoration: none;
}

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

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

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

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

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

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

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

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

/* 对话框 */
.modal {
  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.6);
}

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

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

.modal-body {
}

.modal-footer {

}
`);