mirror of
https://github.com/AstrBotDevs/AstrBot
synced 2026-07-16 01:40:15 +08:00
b3381c6448
PR #8015 added 'Noto Sans' to the Google Fonts link and CJK fallback list, but the font was placed at the end of $cjk-sans-fallback where browsers never reach it for Cyrillic text. The global $body-font-family also lacked 'Outfit' entirely, causing Vuetify to use CJK fonts as the primary face. Changes: - Remove 'Noto Sans' from the end of $cjk-sans-fallback (it is not a CJK font) - Add 'Outfit' and 'Noto Sans' to $body-font-family before CJK fallbacks - Update .Outfit class in _container.scss to match the new stack This ensures: - Latin text → Outfit - Cyrillic text → Noto Sans (loaded by vite-plugin-webfont-dl) - CJK text → Noto Sans SC / PingFang SC etc. Fixes follow-up to #8015.
135 lines
3.0 KiB
SCSS
135 lines
3.0 KiB
SCSS
@use 'sass:math';
|
|
@use 'sass:map';
|
|
@use 'sass:meta';
|
|
@use 'vuetify/lib/styles/tools/functions' as *;
|
|
|
|
// This will false all colors which is not necessory for theme
|
|
$color-pack: false;
|
|
|
|
// Global font size and border radius
|
|
$font-size-root: 1rem;
|
|
$border-radius-root: 8px;
|
|
$cjk-sans-fallback: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Noto Sans SC' !default;
|
|
$cjk-mono-fallback: 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei' !default;
|
|
$code-text-color: #111827 !default;
|
|
|
|
:root {
|
|
--astrbot-font-cjk-sans: #{$cjk-sans-fallback};
|
|
--astrbot-font-cjk-mono: #{$cjk-mono-fallback};
|
|
--astrbot-code-color: #{$code-text-color};
|
|
}
|
|
|
|
$body-font-family: 'Outfit', 'Noto Sans', $cjk-sans-fallback, sans-serif !default;
|
|
$heading-font-family: $body-font-family !default;
|
|
$btn-font-weight: 400 !default;
|
|
$btn-letter-spacing: 0 !default;
|
|
|
|
// Global Radius as per breakeven point
|
|
$rounded: () !default;
|
|
$rounded: map-deep-merge(
|
|
(
|
|
0: 0,
|
|
'sm': $border-radius-root * 0.5,
|
|
null: $border-radius-root,
|
|
'md': $border-radius-root * 1,
|
|
'lg': $border-radius-root * 2,
|
|
'xl': $border-radius-root * 6,
|
|
'pill': 9999px,
|
|
'circle': 50%,
|
|
'shaped': $border-radius-root * 6 0
|
|
),
|
|
$rounded
|
|
);
|
|
// Global Typography
|
|
$typography: () !default;
|
|
$typography: map-deep-merge(
|
|
(
|
|
'h1': (
|
|
'size': 2.125rem,
|
|
'weight': 700,
|
|
'line-height': 3.5rem,
|
|
'font-family': inherit
|
|
),
|
|
'h2': (
|
|
'size': 1.5rem,
|
|
'weight': 700,
|
|
'line-height': 2.5rem,
|
|
'font-family': inherit
|
|
),
|
|
'h3': (
|
|
'size': 1.25rem,
|
|
'weight': 600,
|
|
'line-height': 2rem,
|
|
'font-family': inherit
|
|
),
|
|
'h4': (
|
|
'size': 1rem,
|
|
'weight': 600,
|
|
'line-height': 1.5rem,
|
|
'font-family': inherit
|
|
),
|
|
'h5': (
|
|
'size': 0.875rem,
|
|
'weight': 500,
|
|
'line-height': 1.2rem,
|
|
'font-family': inherit
|
|
),
|
|
'h6': (
|
|
'size': 0.75rem,
|
|
'weight': 500,
|
|
'font-family': inherit
|
|
),
|
|
'subtitle-1': (
|
|
'size': 0.875rem,
|
|
'weight': 500,
|
|
'line-height': 1rem,
|
|
'font-family': inherit
|
|
),
|
|
'subtitle-2': (
|
|
'size': 0.75rem,
|
|
'weight': 400,
|
|
'line-height': 1rem,
|
|
'font-family': inherit
|
|
),
|
|
'body-1': (
|
|
'size': 0.875rem,
|
|
'weight': 400,
|
|
'font-family': inherit
|
|
),
|
|
'body-2': (
|
|
'size': 0.75rem,
|
|
'weight': 400,
|
|
'font-family': inherit
|
|
),
|
|
'button': (
|
|
'size': 0.875rem,
|
|
'weight': 500,
|
|
'font-family': inherit,
|
|
'text-transform': uppercase
|
|
),
|
|
'caption': (
|
|
'size': 0.75rem,
|
|
'weight': 400,
|
|
'font-family': inherit
|
|
),
|
|
'overline': (
|
|
'size': 0.75rem,
|
|
'weight': 500,
|
|
'font-family': inherit,
|
|
'text-transform': uppercase
|
|
)
|
|
),
|
|
$typography
|
|
);
|
|
|
|
// Custom Variables
|
|
// colors
|
|
$white: #fff !default;
|
|
|
|
// cards
|
|
$card-item-spacer-xy: 20px 24px !default;
|
|
$card-text-spacer: 24px !default;
|
|
$card-title-size: 18px !default;
|
|
// Global Shadow
|
|
$box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
|