Joplin as a shopping list

Features
14

This is neat! I always wanted to use joplin for a shopping list but never found a good workflow for it.

After looking at your solution I found a pretty good way to avoid changing the CSS every time by using the Checkbox Hack.
It allows changing the style based on the state of checkboxes. Using the new :has() selector it is then possible to select only the first checkbox which in my case I just named "shopping mode". So if this checkbox is checked all unchecked boxes are hidden and one can go shopping.

My CSS got pretty messy, but it works! On desktop there is only the caveat that a new electron version is needed (because of the :has() selector). Luckily, the new, currently in beta, Joplin version 2.12.12 includes an electron version which supports the selector.

It also works on iOS!!! Here with the caveat that in shopping mode the text is transparent, and I cloud not find a way to change that. But that's no biggie...

Long story short:

<style>
		/*
	Prep mode
	*/
	 div:has(ul:first-of-type .joplin-checkbox:first-child input:not(:checked)) input[type="checkbox"]:checked
   {
	width: 17px;
	height: 17px;
	}
	div:has(ul:first-of-type .joplin-checkbox:first-child input:not(:checked)) input[type="checkbox"]:checked + label
   {
	font-weight: bold;
	font-size: 1.1em;
	opacity: 1;
	}
	
	
	/*
	Shopping mode
	*/
		 div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type="checkbox"]:not(:checked)
   {
	display: none;
	}
	div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type="checkbox"]:not(:checked) + label
   {
	display: none;
	}
		div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type="checkbox"]:checked
   {
	   opacity: 1.0;
		color: black;
	}
	div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type="checkbox"]:checked + label
   {
	   	font-size: 1.0em;
	   opacity: 1.0;
		color: black;
	}
</style>

- [ ] Shopping mode
-----------------------------------------------------------------------------------
- [x] Apples
- [ ] Oranges

Finally, I can use Joplin for shopping!

EDIT:
Here is the minified version:

<style>div:has(ul:first-of-type .joplin-checkbox:first-child input:not(:checked)) input[type=checkbox]:checked{width:17px;height:17px}div:has(ul:first-of-type .joplin-checkbox:first-child input:not(:checked)) input[type=checkbox]:checked+label{font-weight:700;font-size:1.1em;opacity:1}div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type=checkbox]:not(:checked){display:none}div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type=checkbox]:not(:checked)+label{display:none}div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type=checkbox]:checked{opacity:1;color:#000}div:has(ul:first-of-type .joplin-checkbox:first-child input:checked) input[type=checkbox]:checked+label{font-size:1em;opacity:1;color:#000}</style>

- [x] Shopping mode
-----------------------------------------------------------------------------------
- [x] Apples
- [ ] Oranges
4 Likes