asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Beautify shape and color of checkbox

Browse source
This commit is contained in:
Cotes Chung 2020-12-14 15:12:41 +08:00
parent aba3d25d7a
commit 0225d28fd3
3 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/css/_addon/main.scss
View file

@ -872,8 +872,8 @@ div.post-content .table-wrapper {
> span { // <span> created by JS > span { // <span> created by JS
border: 1px solid var(--checkbox-color); border: 1px solid var(--checkbox-color);
background-color: var(--checkbox-bg); background-color: var(--main-wrapper-bg);
border-radius: 4px; border-radius: 50%;
margin: 0 .5rem .2rem -1.5rem; margin: 0 .5rem .2rem -1.5rem;
vertical-align: middle; vertical-align: middle;
height: 1rem; height: 1rem;
@ -881,7 +881,8 @@ div.post-content .table-wrapper {
display: inline-block; display: inline-block;
&[checked] { &[checked] {
background-color: var(--checkbox-checked-bg); background-color: var(--checkbox-checked-color);
border-color: var(--checkbox-checked-color);
&::after { &::after {
content: ""; content: "";
@ -890,9 +891,9 @@ div.post-content .table-wrapper {
position: relative; position: relative;
bottom: 9px; bottom: 9px;
left: 5px; left: 5px;
background: var(--checkbox-checked-bg); background: var(--checkbox-checked-color);
display: inline-block; 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; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1);
} }

5
assets/css/_colors/dark-typography.scss
View file

@ -33,10 +33,7 @@
--card-header-bg: rgb(51, 50, 50); --card-header-bg: rgb(51, 50, 50);
--label-color: rgb(108, 117, 125); --label-color: rgb(108, 117, 125);
--checkbox-color: var(--text-color); --checkbox-color: var(--text-color);
--checkbox-bg: var(--main-wrapper-bg); --checkbox-checked-color: var(--link-color);
--checkbox-checked-color: var(--main-wrapper-bg);
--checkbox-checked-bg: var(--text-color);
/* Sidebar */ /* Sidebar */
--nav-cursor-color: rgb(183, 182, 182); --nav-cursor-color: rgb(183, 182, 182);

6
assets/css/_colors/light-typography.scss
View file

@ -23,12 +23,10 @@
--tb-border-color: #eaeaea; --tb-border-color: #eaeaea;
--button-bg: #fff; --button-bg: #fff;
--btn-backtotop-color: #686868; --btn-backtotop-color: #686868;
--btn-backtotop-border-color: #f1f1f1; //--main-border-color, --btn-backtotop-border-color: #f1f1f1;
--btn-box-shadow: #eaeaea; --btn-box-shadow: #eaeaea;
--checkbox-color: darkgrey; --checkbox-color: darkgrey;
--checkbox-bg: var(--main-wrapper-bg); --checkbox-checked-color: #2796ff;
--checkbox-checked-bg: var(--main-wrapper-bg);
--checkbox-checked-color: grey;
/* Sidebar */ /* Sidebar */