joplin: improve on the light theme

etc/soft/joplin/userstyle.css

@@ -1,3 +1,8 @@
+
+#rendered-md {
+	width: 100%;
+}
+
 h1, h2, h3, h4 {
 	padding-left: 0.5em;
 	padding-bottom: 0;
@@ -5,10 +10,10 @@ h1, h2, h3, h4 {
 
 h1 {
 	color: white;
-	font-weight: 300;
 	background-color: #414650;
 	width: 100%;
-	border: 3px solid  #414650;
+	line-height: 2.5em;
+	text-align: center;
 }
 
 h2 {
@@ -26,10 +31,10 @@ h3 {
 }
 
 h4 {
-	color: black;
+	color: white;
 	font-weight: 100;
 	width: 100%;
-	text-decoration: underline;
+	background-color: #808286;
 }
 
 mark {
@@ -103,15 +108,11 @@ nav.table-of-contents li {
 }
 
 
-#rendered-md {
-	width: 100%;
-}
-
 
 
 /* BADGES */
 
-b-error, b-success, b-notice, b-warning, b-help {
+b-error, b-success, b-info, b-warning, b-help {
 	display: block;
 	margin-bottom: 10px;
 	padding: 10px 10px 10px 50px;
@@ -121,13 +122,13 @@ b-error, b-success, b-notice, b-warning, b-help {
 	word-wrap: break-word;
 	text-align: left;
 	box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
-	color: var(--grey);
+	color: gray;
 	background-color: transparent;
 }
 
 b-error::before,
 b-success::before,
-b-notice::before,
+b-info::before,
 b-warning::before,
 b-help::before {
 	font-weight: 700;
@@ -137,7 +138,7 @@ b-help::before {
 }
 
 b-error {
-	border-color: var(--red);
+	border-color: red;
 	color: red;
 }
 
@@ -166,7 +167,7 @@ b-warning {
 b-warning::before {
 	content: "⚠️";
 	font-family: "Font Awesome 5 Free" !important;
-	color: var(--orange-light) !important;
+	color: orange !important;
 }
 
 b-notice {
@@ -191,3 +192,204 @@ b-help::before {
 	color: blueviolet;
 }
 
+strike, s {
+	opacity: 0.5 !important;
+}
+
+blockquote {
+	color: black;
+	margin: 1.5em;
+	padding: 1em;
+	border-radius: 8px;
+	border-left: 6px solid darkslateblue;
+	background-color: lavender;
+}
+
+blockquote strong {
+	font-style: bold !important;
+	color: darkblue !important;
+}
+
+blockquote em {
+	font-style: italic !important;
+	color: darkblue !important;
+}
+
+hr {
+	border: none;
+	border-bottom: 1px solid gray !important;
+	margin: 2.5em 0 !important;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+ol {
+	margin: 0 0 1.5em;
+	padding: 0;
+	counter-reset: item;
+}
+ol li {
+	margin: 0;
+	padding: 0 0 0 1.5em;
+	list-style-type: none;
+	counter-increment: item;
+}
+ol li:before {
+	color: #007c7c;
+	/* content: counter(item, decimal-leading-zero) "."; */
+	content: "00" counter(item) ".";
+	/* display: inline-block; */
+	/* float: left; */
+	font-weight: bold;
+	padding-right: 0.5em;
+	width: 1em;
+}
+
+ol li:nth-child(n+10):before {
+	content: "0" counter(item) ".";
+}
+
+ol li:nth-child(n+100):before {
+	content: counter(item) ".";
+}
+
+ul {
+	margin: 0 0 1.5em;
+	padding: 0;
+	list-style: none;
+}
+ul li {
+	margin: 0;
+	padding: 0 0 0 1.5em;
+	list-style-type: none;
+}
+ul li::before {
+	color: #007c7c;
+	content: "\2022";
+	/* display: inline-block; */
+	float: left;
+	font-weight: bold;
+	padding-right: 0.3em;
+	width: 1em;
+}
+
+table {
+	border-collapse: collapse;
+	overflow: hidden;
+}
+th,
+td {
+	padding: 15px;
+	background-color: rgba(255, 255, 255, 0.2);
+	color: #fff;
+}
+th {
+	text-align: left;
+}
+thead th, .jop-tinymce table th, table th {
+	background-color: dimgray;
+}
+tbody tr:hover {
+	background-color: rgba(255, 255, 255, 0.3);
+}
+tbody td {
+	position: relative;
+}
+tbody td:hover:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: -9999px;
+	bottom: -9999px;
+	background-color: rgba(255, 255, 255, 0.2);
+	z-index: -1;
+}
+
+input[type='checkbox'],
+.md-checkbox .checkbox-label-unchecked,
+.md-checkbox .checkbox-label-checked,
+li.md-checkbox {
+	cursor: pointer !important;
+}
+
+li.md-checkbox [type="checkbox"]:not(:checked),
+li.md-checkbox [type="checkbox"]:checked {
+	position: absolute;
+	left: -9999px;
+}
+li.md-checkbox [type="checkbox"]:not(:checked) + label,
+li.md-checkbox [type="checkbox"]:checked + label {
+	position: relative;
+	padding-left: 1.5em;
+	cursor: pointer;
+}
+
+li.md-checkbox [type="checkbox"]:not(:checked) + label:before,
+li.md-checkbox [type="checkbox"]:checked + label:before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 1em;
+	height: 1em;
+	border: 1px solid darkgray;
+	/* background: var(--light-gray); */
+	border-radius: 50%;
+}
+
+li.md-checkbox [type="checkbox"]:checked + label {
+	opacity: 1 !important;
+}
+
+li.md-checkbox [type="checkbox"]:checked + label:before {
+	background: palegreen;
+	opacity: 1 !important;
+}
+
+.checkbox-label-checked {
+	text-decoration: line-through;
+	text-decoration-color: darkgray;
+}
+
+li.md-checkbox [type="checkbox"]:not(:checked) + label:after,
+li.md-checkbox [type="checkbox"]:checked + label:after {
+	/* content: '\2713\0020'; */
+	position: absolute;
+	top: -3px;
+	left: 4px;
+	color: white;
+	font-weight: bold;
+	font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
+	opacity: 1 !important;
+}
+
+li.md-checkbox [type="checkbox"]:not(:checked) + label:after {
+	opacity: 0;
+	transform: scale(0);
+}
+
+li.md-checkbox [type="checkbox"]:checked + label:after {
+	opacity: 1;
+	transform: scale(1);
+}
+
+ins {
+	text-decoration: none;
+	color: #2178db;
+	font-weight: bold;
+}
+
+.resource-icon {
+	display: inline-block;
+	position: relative;
+	top: 2px;
+	text-decoration: none;
+	width: 14px;
+	height: 16px;
+	margin-right: 5px;
+	background-color: #155BDA;
+}
+