joplin: ++html badges/marks

etc/soft/joplin/userstyle.css

@@ -19,7 +19,6 @@ h2 {
 	border: 2px solid  #414650;
 }
 
-
 h3 {
 	color: white;
 	font-weight: 150;
@@ -46,53 +45,6 @@ a {
 	text-decoration: none;
 }
 
-b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple {
-	width: 90%;
-	display: block;
-	margin-left: 20px;
-	padding: 10px;
-	border: 1px solid;
-	border-left: 5px solid;
-	border-radius: 2px;
-	word-wrap: break-word;
-	box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3) ;
-}
-
-b-gray {
-	border-color: #b1bcc2;
-	background-color: #e9edf0;
-}
-
-b-green {
-	border-color: #5fa04e;
-	background-color: #c5e5b4;
-}
-
-b-red {
-	border-color: #f65354;
-	background-color: #fad3d4;
-}
-
-b-blue {
-	border-color: #229ade;
-	background-color: #bbe5fb;
-}
-
-b-orange {
-	border-color: #cf7506;
-	background-color: #faf3d3;
-}
-
-b-purple {
-	border-color: #af74e8;
-	background-color: #ead9fb;
-}
-
-b-pink {
-	border-color: #ed5393;
-	background-color: #fad3e5;
-}
-
 /* TOC */
 
 nav.table-of-contents ul {
@@ -155,3 +107,87 @@ nav.table-of-contents li {
 	width: 100%;
 }
 
+
+
+/* BADGES */
+
+b-error, b-success, b-notice, b-warning, b-help {
+	display: block;
+	margin-bottom: 10px;
+	padding: 10px 10px 10px 50px;
+	border: 1px solid;
+	border-left: 5px solid;
+	border-radius: 2px;
+	word-wrap: break-word;
+	text-align: left;
+	box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
+	color: var(--grey);
+	background-color: transparent;
+}
+
+b-error::before,
+b-success::before,
+b-notice::before,
+b-warning::before,
+b-help::before {
+	font-weight: 700;
+	font-size: 1.5em;
+	left: 30px;
+	position: absolute;
+}
+
+b-error {
+	border-color: var(--red);
+	color: red;
+}
+
+b-error::before {
+	content: "❌";
+	font-family: "Font Awesome 5 Free" !important;
+	color: red;
+}
+
+b-success {
+	border-color: forestgreen;
+	color: forestgreen;
+}
+
+b-success::before {
+	content: "✅";
+	font-family: "Font Awesome 5 Free" !important;
+	color: forestgreen;
+}
+
+b-warning {
+	border-color: darkorange;
+	color: darkorange;
+}
+
+b-warning::before {
+	content: "⚠️";
+	font-family: "Font Awesome 5 Free" !important;
+	color: var(--orange-light) !important;
+}
+
+b-notice {
+	border-color: cornflowerblue;
+	color: cornflowerblue;
+}
+
+b-notice::before {
+	content: "ℹ️";
+	font-family: "Font Awesome 5 Free" !important;
+	color: cornflowerblue;
+}
+
+b-help {
+	border-color: blueviolet;
+	color: blueviolet;
+}
+
+b-help::before {
+	content: "🔔";
+	font-family: "Font Awesome 5 Free" !important;
+	color: blueviolet;
+}
+