custom checkbox colors not working with PrintRiver Plugin

S²

unread,

Jun 18, 2021, 1:53:11 PM6/18/21

to TiddlyWiki

Hello,

I got this CSS (

https://groups.google.com/g/tiddlywiki/c/483sdAJq6AY/m/r8Q3H8YmBQAJ

) from Brain - thanks to Brain - to have custom checkbox colors.

This is working fine for the Wiki but not for the PrintRiver Plugin.

Print Preview:

This is my adapted CSS:

.tc-tiddler-body input[type="checkbox"],
.tc-tiddler-preview-preview input[type="checkbox"],
.tc-sidebar-scrollable input[type="checkbox"] {
   -webkit-appearance:none;
   background-color: rgb(38,38,38);
   border: none;
   box-shadow: 0 0 0 1px rgba(210,210,210,0.5) inset;
   display: inline-block;
   height: 0.8em;
   outline-color: transparent;
   width: 0.8em;
}

.tc-tiddler-body input[type="checkbox"]:checked,
.tc-tiddler-preview-preview input[type="checkbox"]:checked,
.tc-sidebar-scrollable input[type="checkbox"]:checked {
   background-color: rgba(38, 38, 38,0.5);
}

.tc-tiddler-body input[type="checkbox"]:checked::after,
.tc-tiddler-preview-preview input[type="checkbox"]:checked::after,
.tc-sidebar-scrollable input[type="checkbox"]:checked::after {
   color: rgb(144,238,144);
   content: "\2713";
   font-size: 1.1em;
   font-weight: bold;
   left: 0;
   position: relative;
   text-shadow: 1px 1px 1px #000;
   top: -0.3em;
}

.tc-tiddler-body input[type="checkbox"]:active,
.tc-tiddler-preview-preview input[type="checkbox"]:active,
.tc-sidebar-scrollable input[type="checkbox"]:active {
   border: none;
   box-shadow: none;
   outline-color: transparent;
}

What is needed to have it also for the PrintRiver Plugin?

Thanks for feedback

Stefan

Brian Radspinner

unread,

Jun 18, 2021, 5:04:14 PM6/18/21

to TiddlyWiki

I added the PrintRiver div class to the code. Give the below update a shot:

.tc-tiddler-body input[type="checkbox"],
.tc-tiddler-preview-preview input[type="checkbox"],

.tc-sidebar-scrollable input[type="checkbox"],
.tc-print-river-view-template input[type="checkbox"] {

   -webkit-appearance:none;
   background-color: rgb(38,38,38);
   border: none;
   box-shadow: 0 0 0 1px rgba(210,210,210,0.5) inset;
   display: inline-block;
   height: 0.8em;
   outline-color: transparent;
   width: 0.8em;
}

.tc-tiddler-body input[type="checkbox"]:checked,
.tc-tiddler-preview-preview input[type="checkbox"]:checked,

.tc-sidebar-scrollable input[type="checkbox"]:checked,
.tc-print-river-view-template input[type="checkbox"]:checked {

background-color: rgba(38, 38, 38,0.5);
}

.tc-tiddler-body input[type="checkbox"]:checked::after,
.tc-tiddler-preview-preview input[type="checkbox"]:checked::after,

.tc-sidebar-scrollable input[type="checkbox"]:checked::after,
.tc-print-river-view-template input[type="checkbox"]:checked::after {

   color: rgb(144,238,144);
   content: "\2713";
   font-size: 1.1em;
   font-weight: bold;
   left: 0;
   position: relative;
   text-shadow: 1px 1px 1px #000;
   top: -0.3em;
}

.tc-tiddler-body input[type="checkbox"]:active,
.tc-tiddler-preview-preview input[type="checkbox"]:active,

.tc-sidebar-scrollable input[type="checkbox"]:active,
.tc-print-river-view-template input[type="checkbox"]:active {

Brian Radspinner

unread,

Jun 18, 2021, 5:10:32 PM6/18/21

to TiddlyWiki

Actually, go with the below code, it has the default checkboxes fixed so you don't need to specify the PrintRiver div at all

input[type="checkbox"],

.tc-tiddler-body input[type="checkbox"],
.tc-tiddler-preview-preview input[type="checkbox"],
.tc-sidebar-scrollable input[type="checkbox"] {
-webkit-appearance:none;

   background-color: rgba(var(--primary),0.15);
   border: none;
   box-shadow: 0 0 0 1px rgba(var(--primary),1) inset;

   display: inline-block;
   height: 0.8em;
   outline-color: transparent;
   width: 0.8em;
}

input[type="checkbox"]:checked,

.tc-tiddler-body input[type="checkbox"]:checked,
.tc-tiddler-preview-preview input[type="checkbox"]:checked,
.tc-sidebar-scrollable input[type="checkbox"]:checked {

background-color: rgba(var(--primary),1);

}

input[type="checkbox"]:checked::after,

.tc-tiddler-body input[type="checkbox"]:checked::after,
.tc-tiddler-preview-preview input[type="checkbox"]:checked::after,
.tc-sidebar-scrollable input[type="checkbox"]:checked::after {

   color: rgba(var(--secondary),1);
   content: "\2713";
   font-size: 1em;

   font-weight: bold;
   left: 0;
   position: relative;
   text-shadow: 1px 1px 1px #000;
   top: -0.3em;
}

input[type="checkbox"]:active,

.tc-tiddler-body input[type="checkbox"]:active,
.tc-tiddler-preview-preview input[type="checkbox"]:active,
.tc-sidebar-scrollable input[type="checkbox"]:active {
   border: none;
   box-shadow: none;
   outline-color: transparent;
}

S²

unread,

Jun 19, 2021, 2:05:33 AM6/19/21

to TiddlyWiki

Thanks Brian, that's what I want. :-)

One remark:

I prefer your first CSS post - it's more colored:

2nd post:

Reply all

Reply to author

Forward