baseStyles

常用的基础 CSS

Tính đến 08-04-2024. Xem phiên bản mới nhất.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/491997/1356715/baseStyles.js

Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.

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 {

}
`);