162 lines
3.8 KiB
CSS
162 lines
3.8 KiB
CSS
@font-face {font-family: "KanjiStrokeOrders"; src: url('_kso.ttf'); }
|
|
@font-face {font-family: "Yu Mincho"; src: url("_yumin.ttf"); }
|
|
@font-face {font-family: "Yu Mincho"; src: url("_yumindb.ttf"); font-weight: 600; }
|
|
|
|
* { box-sizing: border-box; padding: 0; margin: 0; }
|
|
.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-size: 24px;
|
|
text-align: left;
|
|
line-height: 1.4;
|
|
}
|
|
.card1 { }
|
|
.card2 .jpsentence ruby rt { opacity: 0; }
|
|
.card2 .jpsentence:hover ruby rt { opacity: 1; }
|
|
|
|
hr { margin: 2px 0; clear: both; }
|
|
b, strong { font-weight: 600; }
|
|
|
|
/* links */
|
|
a { color: #585858; }
|
|
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; }
|
|
|
|
/* Top */
|
|
header { font-size: 14px; line-height: 14px; clear: both; }
|
|
|
|
/* Space between elements */
|
|
.images { margin-top: 16px; }
|
|
.images > img { margin-bottom: 16px; }
|
|
|
|
/* Japanese sentence */
|
|
.jpsentence { font-size: 35px; }
|
|
|
|
.tags {
|
|
font-family: "Noto Sans", "Noto Sans CJK JP", "Liberation Sans", Arial, Sans, sans-serif;
|
|
text-align: center;
|
|
display: inline-block;
|
|
text-transform: lowercase;
|
|
background-color: #333;
|
|
color: #FFFAF0;
|
|
font-weight: bold;
|
|
padding: 1px 3px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
/* AnkiDroid peplay button */
|
|
.replaybutton { margin: 0; margin-right: 3px; text-decoration: none; }
|
|
.replaybutton span { padding: 0; font-size: 16px; }
|
|
.replaybutton span svg {
|
|
fill: #FFFAF0;
|
|
background: #333;
|
|
border-radius: 3px;
|
|
vertical-align: top;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
}
|
|
|
|
/* PC peplay button */
|
|
a.replay-button { top: -.125em; position: relative; }
|
|
a.replay-button svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
a.replay-button svg path { fill: #FFFAF0; }
|
|
a.replay-button svg circle { fill: #333; }
|
|
|
|
footer { font-size: 16px; text-align: center; }
|
|
footer>a { text-decoration: none; }
|
|
|
|
.vocab { margin-top: 16px; }
|
|
.vocab div { display: inline-block; }
|
|
.vocab br { display: none; }
|
|
.vocab > .tags { vertical-align: top; }
|
|
.notes > .tags { vertical-align: bottom; }
|
|
|
|
.images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
align-content: space-between;
|
|
justify-content: space-evenly;
|
|
}
|
|
.images > img {
|
|
max-width: 47%;
|
|
border-radius: 4px;
|
|
filter: sepia(33%);
|
|
}
|
|
.images>img:only-child {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Production cards */
|
|
.production b, .production strong { visibility: hidden; }
|
|
.strokeorder {
|
|
text-align: center;
|
|
font-size: 150px;
|
|
font-family: KanjiStrokeOrders;
|
|
}
|
|
|
|
/* Morphman coloring */
|
|
.fside .jpsentence:hover [mtype=unknown] { background-color: #ffff99; }
|
|
.fside .jpsentence:hover [mtype=seen] { background-color: #ffd1b3; }
|
|
.fside .jpsentence:hover [mtype=known] { background-color: #b3e6cc; }
|
|
.fside .jpsentence:hover [mtype=mature] { background-color: transparent; }
|
|
.fside .jpsentence:hover [priority=true] { }
|
|
.fside .jpsentence:hover [frequency=true] { }
|
|
|
|
del.MorphManHide {display: none;}
|
|
|
|
/* Fix for Yomichan defs */
|
|
ul, ol {
|
|
list-style-type: none;
|
|
display: inline;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
/* Fix for Yomichan pitch accents */
|
|
.vocab ol > li { display: inline; }
|
|
.vocab ol > li:after { content: "・"; }
|
|
.vocab ol > li:last-child:after { content: ""; }
|
|
|
|
/* Night Mode */
|
|
|
|
.nightMode .tags {
|
|
background-color: #FFFFFF;
|
|
color: #2F2F31;
|
|
}
|
|
|
|
.nightMode a.replay-button svg path {
|
|
fill: #2F2F31;
|
|
}
|
|
|
|
.nightMode a.replay-button svg circle {
|
|
fill: #FFFFFF;
|
|
}
|
|
|
|
.nightMode .replaybutton span svg {
|
|
fill: #2F2F31;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.nightMode a {
|
|
color: gray;
|
|
}
|
|
|
|
.nightMode a:hover {
|
|
color: lightgray;
|
|
}
|