管理样式

MCSS
prefix: sona
{
  global { // 全局变量 => --prefix-变量名
    layout { // 布局
      rem: 16px; // 根 字号，rem单位 的依据
      unit: 4px; // 绝对长度 单位
      padding: calc(2 * var(unit)); // 内边距
      border-width: 2px; // 边框宽度
    }
    font { // 字体 => --prefix-font-变量名
      mono-sans: "Hack", "Ubuntu Mono", "Roboto Mono", "Courier New", "Courier", monospace, "Source Han Sans SC", "SimHei", "Microsoft YaHei", sans-serif; // 首选 等宽，备选 无衬线
    }
    color { // 配色 => --prefix-color-变量名
      background: 0 0 12; // 背景
      foreground: 0 0 80; // 前景
      control: 0 0 20; // 控件
      notice: 42 100 50; // 注意
      link: 42 100 40; // 链接
      link-visited: 32 100 40; // 访问过的 链接
      message: 210 100 40; // 消息
      warning: 30 100 40; // 警告
      error: 0 100 40; // 错误
      success: 120 100 40; // 成功
    }
    other { // 其它
      blur: 8px; // 模糊度
      invert: 1; // 反色比例，用于 部分已有内容 暗色主题 适配
    }
  }
  basic { // 基础样式
    html { // 全局 字号
      !font-size: var(rem);
    }
    html,
    body { // 全局 字体
      !font-family: var(font-mono-sans);
    }
    body { // 内容 前景色
      color: var(color-foreground);
      fill: var(color-foreground);
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 { // 标题
      !font-family: var(font-mono-sans);
      !font-weight: bold;
      color: var(color-foreground);
      fill: var(color-foreground);
    }
    a { // 链接
      color: var(color-link);
    }
    a:visited { // 访问过的 链接
      color: var(color-link-visited);
    }
    pre,
    code { // 代码 字体
      !font-family: var(font-mono-sans);
    }
    button { // 控件 颜色
      background-color: var(color-control);
      color: var(color-foreground);
      fill: var(color-foreground);
    }
    input,
    optgroup,
    select,
    textarea,
    table { // 内容控件 颜色
      background-color: var(color-background);
      color: var(color-foreground);
      fill: var(color-foreground);
    }
    input,
    textarea { // 内容控件 外框取消
      outline: none;
      border: none;
    }
    textarea { // textarea 隐藏 右下角resize手柄
      resize: none;
    }
    * { // 所有
      box-sizing: border-box; // box 布局模式
      line-height: 2em; // 行距
    }
    *:focus { // 所有 focus焦点 突出 样式
      border: var(border-width) solid var(color-notice);
    }
  }
  override { // 覆盖样式

  }
  theme { // 主题样式
    .message,
    .hint { // 消息、提示
      color: var(color-message);
      fill: var(color-message);
    }
    .warning { // 警告
      color: var(color-warning);
      fill: var(color-warning);
    }
    .missing,
    .error { // 缺失、错误
      color: var(color-error);
      fill: var(color-error);
    }
    .success { // 成功
      color: var(color-success);
      fill: var(color-success);
    }
    .title,
    .bold,
    .highlight { // 标题、加粗、突出
      font-weight: bold;
    }
    .container { // 容器
      display: flex;
      gap: var(unit);
    }
    .container.row { // 行方向 容器
      flex-direction: row;
    }
    .container.column { // 列方向 容器
      flex-direction: column;
    }
    .margin-vertical { // 上下留白
      margin: 1.5rem 0;
    }
    .full-width { // 全 宽
      width: 100%;
    }
    .full-height { // 全 高
      height: 100%;
    }
    .full-size { // 全 尺寸
      width: 100%;
      height: 100%;
    }
    .item-icon { // 物品 图标
      width: 48px;
      height: 48px;
      outline: 1px solid hsl(0 0 0);
      border-bottom: 4px solid var(color-quality);
      background: linear-gradient(to top, var(color-quality)a(60) 0%, transparent 42%);
    }
    .quality-n { // 稀有度 N
      --color-quality: hsl(0, 0%, 100%);
    }
    .quality-r { // 稀有度 R
      --color-quality: hsl(210, 100%, 60%);
    }
    .quality-sr { // 稀有度 SR
      --color-quality: hsl(270, 100%, 60%);
    }
    .quality-ssr { // 稀有度 SSR
      --color-quality: hsl(52, 100%, 50%);
    }
    .quality-ur { // 稀有度 UR
      --color-quality: hsl(24, 100%, 60%);
    }
  }
}