From 0225d28fd36c38cab6619a452f11e5ddfba69a2d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 14 Dec 2020 15:12:41 +0800
Subject: [PATCH] Beautify shape and color of checkbox

---
 assets/css/_addon/main.scss              | 11 ++++++-----
 assets/css/_colors/dark-typography.scss  |  5 +----
 assets/css/_colors/light-typography.scss |  6 ++----
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index ab8bd9f..ab6a6d7 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -872,8 +872,8 @@ div.post-content .table-wrapper {
 
       > span { // <span> created by JS
         border: 1px solid var(--checkbox-color);
-        background-color: var(--checkbox-bg);
-        border-radius: 4px;
+        background-color: var(--main-wrapper-bg);
+        border-radius: 50%;
         margin: 0 .5rem .2rem -1.5rem;
         vertical-align: middle;
         height: 1rem;
@@ -881,7 +881,8 @@ div.post-content .table-wrapper {
         display: inline-block;
 
         &[checked] {
-          background-color: var(--checkbox-checked-bg);
+          background-color: var(--checkbox-checked-color);
+          border-color: var(--checkbox-checked-color);
 
           &::after {
             content: "";
@@ -890,9 +891,9 @@ div.post-content .table-wrapper {
             position: relative;
             bottom: 9px;
             left: 5px;
-            background: var(--checkbox-checked-bg);
+            background: var(--checkbox-checked-color);
             display: inline-block;
-            border: solid var(--checkbox-checked-color); // the hook symbol
+            border: solid var(--main-wrapper-bg); // the hook symbol
             border-width: 0 2px 2px 0;
             transform: rotate(45deg) scale(1);
           }
diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss
index 4c3a3e8..a913e72 100644
--- a/assets/css/_colors/dark-typography.scss
+++ b/assets/css/_colors/dark-typography.scss
@@ -33,10 +33,7 @@
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
   --checkbox-color: var(--text-color);
-  --checkbox-bg: var(--main-wrapper-bg);
-  --checkbox-checked-color: var(--main-wrapper-bg);
-  --checkbox-checked-bg: var(--text-color);
-
+  --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
   --nav-cursor-color: rgb(183, 182, 182);
diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss
index d794ac9..25f972c 100644
--- a/assets/css/_colors/light-typography.scss
+++ b/assets/css/_colors/light-typography.scss
@@ -23,12 +23,10 @@
   --tb-border-color: #eaeaea;
   --button-bg: #fff;
   --btn-backtotop-color: #686868;
-  --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
+  --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
   --checkbox-color: darkgrey;
-  --checkbox-bg: var(--main-wrapper-bg);
-  --checkbox-checked-bg: var(--main-wrapper-bg);
-  --checkbox-checked-color: grey;
+  --checkbox-checked-color: #2796ff;
 
 
   /* Sidebar */