VNWeb::History: Use unicode ✓ and ✗ to indicate filter selection + turn booleans into plain checkboxes

I kept forgetting which color meant what, these glyphs ought to make
that more clear without going back to the uglyness of unstyled form
elements.

1 files changed, 7 insertions, 5 deletions

diff --git a/data/style.css b/data/style.css
index b15cea69..4d678084 100644
--- a/data/style.css
+++ b/data/style.css
@@ -42,7 +42,7 @@ table.stripe tbody tr:nth-child(odd):not(.nostripe),
 #debug h2 { color: #f00!important; font-size: 20px; }
 #debug, #debug a { color: #fff!important; }
 
-.visuallyhidden, p.linkradio input {
+.visuallyhidden, .linkradio input {
   position: absolute !important;
   left: 0;
   height: 1px; width: 1px;
@@ -153,10 +153,12 @@ table.formtable td       { padding: 0; }
 table.formtable tr.newfield td { padding-top: 5px; }
 table.formtable tr.newpart td { padding-top: 20px; font-weight: bold; }
 
-p.linkradio { padding: 2px }
-p.linkradio label { color: $link$; cursor: pointer }
-p.linkradio input:checked + label { color: $maintext$ }
-p.linkradio em { font-weight: normal; font-style: normal; color: $grayedout$ }
+.linkradio { padding: 2px }
+.linkradio label { color: $link$; cursor: pointer }
+.linkradio label:before { content: '✗' }
+.linkradio input:checked + label { color: $maintext$ }
+.linkradio input:checked + label:before { content: '✓' }
+.linkradio em { font-weight: normal; font-style: normal; color: $grayedout$ }
 
 div.spinner { content: ''; border: 3px solid #9eaebd; border-bottom-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; width: 14px; height: 14px; display: inline-block; margin: auto }
 @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }