Merge pull request #18 from cyphar/cyphar-styling
templates: cyphar: update styling to be nicer on the eyes
This commit is contained in:
Ren Tatsumoto
GitHub
commit
e7bd24f237
|
|
@ -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.
|
||||
blue for 平板
|
||||
red for 頭高
|
||||
orange for 中高
|
||||
green for 尾高
|
||||
*/
|
||||
|
||||
/*
|
||||
* Paints the question word according to its Pitch Accent number.
|
||||
* - blue for 平板
|
||||
* - red for 頭高
|
||||
* - orange for 中高
|
||||
* - green for 尾高
|
||||
*/
|
||||
function markPitch() {
|
||||
var pitchNumber = document.getElementById("pitchnum_hidden");
|
||||
if (pitchNumber === null) {
|
||||
let pitchNumber = document.getElementById("pitchnum_hidden");
|
||||
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");
|
||||
} else if ( pitchNumber == 1 ) {
|
||||
paintTargetWord("#59b2ff");
|
||||
} else if (pitchNumber == 1) {
|
||||
// use red for 頭高
|
||||
paintTargetWord("red");
|
||||
} else if ( pitchNumber > 1 ) {
|
||||
if ( odaka(pitchNumber) ) {
|
||||
paintTargetWord("#ef4c4c");
|
||||
} else if (pitchNumber > 1) {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,9 @@
|
|||
.card {
|
||||
background-color: #FFFAF0;
|
||||
color: #2A1B0A;
|
||||
font-family: "Noto Serif",
|
||||
"Noto Serif CJK JP",
|
||||
Yu Mincho,
|
||||
"Liberation Serif",
|
||||
"Times New Roman",
|
||||
Times,
|
||||
Georgia,
|
||||
Serif;
|
||||
font-family: "Noto Serif", "Noto Serif CJK JP", "Yu Mincho",
|
||||
"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; }
|
||||
notext b, notext strong { background-color: black; color:transparent; }
|
||||
nokana ruby rt { opacity: 0.0; font-size: 0; display: none; }
|
||||
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;
|
||||
}
|
||||
|
||||
.nightMode .jpsentence b, .nightMode .jpsentence strong {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.nightMode .images > img {
|
||||
filter: sepia(0%);
|
||||
color: lightgray;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue