Merge pull request #18 from cyphar/cyphar-styling

templates: cyphar: update styling to be nicer on the eyes

templates/Japanese Mined Sentences (cyphar)/Recognition/back.html

@@ -30,7 +30,7 @@
 {{/VocabDefMonolingual}}
 {{/VocabDef}}
 
-{{#Notes}}	
+{{#Notes}}
 <div class="notes">
 	<div class="tags">Notes</div>
 	<div>{{furigana:Notes}}</div>
@@ -59,45 +59,43 @@
 </footer>
 
 <script>
-/*
+	/*
-Paints the question word according to its Pitch Accent number.
+	 * Paints the question word according to its Pitch Accent number.
-	blue for 平板
+	 *	- blue for 平板
-	red for 頭高
+	 *	- red for 頭高
-	orange for 中高
+	 *	- orange for 中高
-	green for 尾高
+	 *	- green for 尾高
-*/
+	 */
-
 	function markPitch() {
-		var pitchNumber = document.getElementById("pitchnum_hidden");
+		let pitchNumber = document.getElementById("pitchnum_hidden");
-		if (pitchNumber === null) {
+		if (pitchNumber === null)
 			return;
-		} else {
+		else
 			pitchNumber = pitchNumber.innerHTML.match(/\d/);
-		}
+
-		if (pitchNumber === null) {
+		if (pitchNumber === null)
 			return;
-		} else {
+		else
 			pitchNumber = Number(pitchNumber);
-		}
 
 		/* Then decide what color to use and change font color accordingly. */
-		if ( pitchNumber == 0 )  {
+		if (pitchNumber == 0)  {
 			// use blue for 平板
-			paintTargetWord("#3366CC");
+			paintTargetWord("#59b2ff");
-		} else if ( pitchNumber == 1 ) {
+		} else if (pitchNumber == 1) {
 			// use red for 頭高
-			paintTargetWord("red");
+			paintTargetWord("#ef4c4c");
-		} else if ( pitchNumber > 1 ) {
+		} else if (pitchNumber > 1) {
-			if ( odaka(pitchNumber) ) {
+			if (odaka(pitchNumber)) {
 				// use green for 尾高
-				paintTargetWord("green");
+				paintTargetWord("#34ff9a");
 			} else {
 				// use orange for 中高
-				paintTargetWord("#ff6207");
+				paintTargetWord("#ff9b54");
 			}
 		}
 	}
-	
+
 	function paintTargetWord(color) {
 		for (const word of document.querySelectorAll(".jpsentence b, .jpsentence strong")) {
 			word.style.color = color;
@@ -142,7 +140,7 @@ Paints the question word according to its Pitch Accent number.
 				else
 					any_valid = true;
 			} catch {
-				// ...
+				// ignore bad links
 			}
 		}
 		if (!any_valid) {
@@ -154,6 +152,6 @@ Paints the question word according to its Pitch Accent number.
 	}
 
 	document.addEventListener('DOMContentLoaded', markPitch(), false);
-	document.addEventListener('DOMContentLoaded', removePitchBrackets(), false);	
+	document.addEventListener('DOMContentLoaded', removePitchBrackets(), false);
 	document.addEventListener('DOMContentLoaded', hideBadSource(), false);
 </script>

templates/Japanese Mined Sentences (cyphar)/template.css

@@ -6,14 +6,9 @@
 .card {
 	background-color: #FFFAF0;
 	color: #2A1B0A;
-	font-family:	"Noto Serif",
+	font-family: "Noto Serif", "Noto Serif CJK JP", "Yu Mincho",
-									"Noto Serif CJK JP",
+	             "Liberation Serif", "Times New Roman", Times,
-									Yu Mincho,
+	             Georgia, Serif;
-									"Liberation Serif",
-									"Times New Roman",
-									Times,
-									Georgia,
-									Serif;
 	font-size: 24px;
 	text-align: left;
 	line-height: 1.4;
@@ -31,8 +26,8 @@ a:hover { color: #222; }
 a.hint { text-decoration: none; text-align: center; display: block; }
 
 /* Hide furigana on front */
-nokana ruby rt { opacity:0.0; font-size:0; display: none; }
+nokana ruby rt { opacity: 0.0; font-size: 0; display: none; }
-notext b, notext strong { background-color: black; color:transparent; }
+notext b, notext strong { background-color: black; color: transparent; }
 
 /* Top */
 header { font-size: 14px; line-height: 14px; clear: both; }
@@ -67,7 +62,7 @@ header { font-size: 14px; line-height: 14px; clear: both; }
 	fill: #FFFAF0;
 	background: #333;
 	border-radius: 3px;
-	vertical-align: top; 
+	vertical-align: top;
 	min-width: 16px;
 	min-height: 16px;
 }
@@ -123,11 +118,11 @@ footer>a { text-decoration: none; }
 .fside .jpsentence:hover [priority=true] { }
 .fside .jpsentence:hover [frequency=true] { }
 
-del.MorphManHide {display:none;}
+del.MorphManHide {display: none;}
 
 /* Fix for Yomichan defs */
 ul, ol {
-  list-style-type: none; 
+  list-style-type: none;
   display: inline;
   margin: 0px;
   padding: 0px;
@@ -137,7 +132,6 @@ ul, ol {
 .vocab ol > li:after { content: "・"; }
 .vocab ol > li:last-child:after { content: ""; }
 
-
 /* Night Mode */
 
 .nightMode .tags {
@@ -158,23 +152,10 @@ ul, ol {
     background: #FFFFFF;
 }
 
-.nightMode.card {
-    color: #FFFFFF;
-    background-color: #2F2F31
-}
-
 .nightMode a {
     color: gray;
 }
 
 .nightMode a:hover {
-    color: #722a2a;
+    color: lightgray;
-}
-
-.nightMode .jpsentence b, .nightMode .jpsentence strong {
-    color: gray;
-}
-
-.nightMode .images > img {
-    filter: sepia(0%);
 }