Skip to content
This repository has been archived by the owner on Oct 12, 2022. It is now read-only.

Checkboxes are hard to see #12

Open
mattesser opened this issue Apr 13, 2022 · 2 comments
Open

Checkboxes are hard to see #12

mattesser opened this issue Apr 13, 2022 · 2 comments

Comments

@mattesser
Copy link

mattesser commented Apr 13, 2022

Hello, when making Action Items, or ToDo lists, or anything that requires a checkbox, it is difficult to see. Could we change the color on this item to make it more apparent?

I love your theme, and would love to see this change. I was going to just edit the CSS myself to change it, but I'd first have to do some formatting to better find it since you minimized it and I figured everyone could benefit from this modification.

Thank you!

image

@mattesser
Copy link
Author

mattesser commented Apr 28, 2022

Found it. Updated these lines of CSS in Horizon.css

input.task-list-item-checkbox {
    border: 1px solid #fff27d;
    appearance: none;
    -webkit-appearance: none;
}
input.task-list-item-checkbox:checked {
    background-color: #b877db;
    box-shadow: inset 0 0 0 2px var(--background-primary);
}

@mattesser
Copy link
Author

mattesser commented Apr 29, 2022

Alternatively, if you want pretty round checkboxes, comment out code in my previous post and replace it with:

/* get more snippets at https://github.com/kmaasrud/awesome-obsidian */
/* author: https://forum.obsidian.md/u/kepano/summary, https://forum.obsidian.md/u/rsdimitrov */
/* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
/* modified by [matt esser](https://github.com/mattesser) for Hoizon.css */
input[type="checkbox"],
.cm-formatting-task {
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-faint);
  padding: 0;
}
.cm-s-obsidian span.cm-formatting-task {
  color: transparent;
  width: 1.25em !important;
  height: 1.25em;
  display: inline-block;
}
input[type="checkbox"]:focus {
  outline: 0;
}
input[type="checkbox"]:checked,
.cm-formatting-task.cm-property {
  background-color: var(--text-accent-hover);
  border: 0px solid var(--text-accent-hover);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  filter: hue-rotate(-42deg);
  background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
} 
.markdown-preview-view .task-list-item { text-indent: -10px; margin: left 0;}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant