Beautify shape and color of checkbox

satriadewa2x · Dec 14, 2020 · f057367 · f057367
1 parent 85f170c
commit f057367
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
@@ -872,16 +872,17 @@ 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;
         width: 1rem;
         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
@@ -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
@@ -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 */