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