baseStyles

常用的基础 CSS

2024-04-08 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/491997/1356715/baseStyles.js을(를) 사용하여 포함하는 라이브러리입니다.

질문 또는 리뷰 남기기, 또는 스크립트 신고하기.

줄 바꿈

// ==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 {

}
`);