From 60d1f82e099c1d2e051de950e69e4cfc811afb59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 14 Jan 2025 10:08:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B9=B3=E5=9D=87=E5=80=BC?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E6=96=B9=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page-components/color-compare/CompareLayout.module.css | 4 ++++
 src/page-components/color-compare/ShadeScale.tsx           | 3 ++-
 src/page-components/color-compare/TintScale.tsx            | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/page-components/color-compare/CompareLayout.module.css b/src/page-components/color-compare/CompareLayout.module.css
index fcee504..015a61a 100644
--- a/src/page-components/color-compare/CompareLayout.module.css
+++ b/src/page-components/color-compare/CompareLayout.module.css
@@ -15,6 +15,10 @@
       .element_name {
         font-size: var(--font-size-xxl);
         font-weight: bold;
+        &.mean {
+          border-top: 2px solid var(--color-fg);
+          padding-top: var(--spacing-xxs);
+        }
       }
       .element_values {
         display: flex;
diff --git a/src/page-components/color-compare/ShadeScale.tsx b/src/page-components/color-compare/ShadeScale.tsx
index 29ee39c..cd238f8 100644
--- a/src/page-components/color-compare/ShadeScale.tsx
+++ b/src/page-components/color-compare/ShadeScale.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import { useMemo } from 'react';
 import { MixReversing } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
@@ -45,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={styles.element_name}>Average</div>
+          <div className={cx(styles.element_name, styles.mean)}>F</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>
diff --git a/src/page-components/color-compare/TintScale.tsx b/src/page-components/color-compare/TintScale.tsx
index 6b9aa9a..b64b569 100644
--- a/src/page-components/color-compare/TintScale.tsx
+++ b/src/page-components/color-compare/TintScale.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import { useMemo } from 'react';
 import { MixReversing } from '../../color_functions/color_module';
 import { useColorFunction } from '../../ColorFunctionContext';
@@ -45,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={styles.element_name}>Average</div>
+          <div className={cx(styles.element_name, styles.mean)}>F</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>