/* 学中文 (ZH) — only what is this app's alone: the card, the know row, the reading sentence, the due card, the forecast and the level map. Everything shared is in core.css, loaded first; the accent comes from . */ .playfoot { display: flex; justify-content: center; gap: 1.4rem; margin-top: 1.5rem; flex-wrap: wrap; } .label { margin: 0; } /* ---------- home: the due queue is the day's plan ---------- */ .due-card { text-align: center; padding: 1rem 1rem .9rem; } .due-hero { margin: 0; font-size: 1.05rem; } .due-hero b { font-size: 1.9rem; letter-spacing: -.02em; margin-right: .3rem; } .due-sub { margin: .25rem 0 0; color: var(--mut); font-size: .85rem; } .due-note { margin: .5rem 0 0; font-size: .8rem; color: var(--warm, #a06a00); border-top: 1px solid var(--line); padding-top: .5rem; } /* ---------- home: the two settings both activities honour ---------- A quiet strip under the menu, not a section of its own: they apply to 生词 AND 阅读 (so they do not belong in 生词's tray), but they are set once and then ignored, so they get no card, no heading and no weight. */ .prefs { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1.3rem; margin: .9rem 0 .2rem; font-size: .78rem; font-weight: 550; color: var(--mut); } .prefs label { display: flex; align-items: center; gap: .4rem; cursor: pointer; } .prefs input[type="checkbox"] { flex: none; width: .9rem; height: .9rem; margin: 0; accent-color: var(--accent); } /* The tick itself carries the state; colouring the words too made this the loudest thing on the lower half of the screen. */ .prefs label:hover { color: var(--fg); } /* ---------- 生词: the card ---------- */ .zcard { text-align: center; padding: 1.6rem 1rem 1.2rem; position: relative; } .zcard .speak { position: absolute; top: .6rem; right: .6rem; appearance: none; border: 0; background: none; font-size: 1.2rem; cursor: pointer; opacity: .7; } .zcard .hanzi { margin: 0; font-size: 3.2rem; line-height: 1.25; letter-spacing: .04em; font-weight: 600; } .zcard .pinyin { margin: .2rem 0 0; font-size: 1.15rem; color: var(--mut); } .zcard .reveal { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .9rem; } .zcard .meaning { margin: 0; font-size: 1.2rem; font-weight: 600; } .zcard .sent { margin-top: .8rem; } .zcard .sent-zh { margin: 0; font-size: 1.1rem; line-height: 1.5; } .zcard .sent-py { margin: .1rem 0 0; font-size: .85rem; color: var(--mut); } .zcard .sent-en { margin: .15rem 0 0; font-size: .88rem; color: var(--mut); font-style: italic; } /* The choice grid: one meaning per row, full-width targets. States after the commit: the right one lights up, a wrong pick goes red, the rest dim. */ .choices { display: grid; gap: .55rem; margin-top: .9rem; } .choices .choice { appearance: none; font: inherit; text-align: left; padding: .75rem .9rem; border-radius: .7rem; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; box-shadow: var(--shadow); font-size: 1rem; line-height: 1.35; transition: transform .06s ease, border-color .12s ease; } .choices .choice:active { transform: scale(.98); } .choices .choice:hover:not([disabled]) { border-color: var(--accent); } .choices .choice[disabled] { cursor: default; } .choices .choice.right { border-color: var(--good); color: var(--good); font-weight: 650; background: color-mix(in srgb, var(--good) 12%, var(--card)); } .choices .choice.wrong { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card)); text-decoration: line-through; } .choices .choice.dim { opacity: .45; } .review .you { color: var(--bad); font-size: .82rem; display: block; } /* Continue, with the quieter admission beside it — deliberately secondary: it is an honest afterthought, not a second answer button. */ /* Continue keeps the full width and the same position whether the answer was right or wrong — the admission sits UNDER it, so revealing it never shifts the button the hand is already moving toward. */ .nextrow { display: flex; flex-direction: column; align-items: stretch; margin-top: 1.2rem; } .nextrow .next { width: 100%; margin-top: 0; } .nextrow .admit { align-self: center; width: auto; margin-top: .55rem; font-size: .78rem; font-weight: 500; padding: .35rem .8rem; color: var(--mut); border: 0; background: none; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line); } .nextrow .admit:hover { color: var(--fg); } .nextrow .admit[disabled] { opacity: .6; text-decoration: none; } /* ---------- 阅读: the sentence ---------- */ .readcard { padding: 1.3rem 1rem 1.1rem; text-align: center; } .rsent { margin: 0; font-size: 1.55rem; line-height: 2.1; letter-spacing: .02em; } .rsent .rword { appearance: none; font: inherit; border: 0; background: none; color: var(--fg); padding: .05rem .06rem; border-radius: .3rem; cursor: pointer; } .rsent .rword:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .rsent .rword.pressed { background: color-mix(in srgb, var(--bad) 16%, transparent); text-decoration: underline dotted var(--bad); } .rsent .rword ruby rt { font-size: .62rem; color: var(--mut); font-weight: 400; } .rsent .rpunct { color: var(--mut); } .rsent .rlocked { font-size: .95rem; line-height: 1.5; color: var(--mut); display: block; text-align: left; } .rpop { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .7rem; display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: baseline; justify-content: center; } .rpop b { font-size: 1.25rem; } .rpop .py { color: var(--mut); } .rpop .gl { font-size: .9rem; } .rpop .tag { font-size: .72rem; border-radius: 999px; padding: .1rem .5rem; border: 1px solid var(--line); } .rpop .tag.miss { color: var(--bad); border-color: var(--bad); } .rpop .tag.free { color: var(--mut); } .rev-en { margin: .9rem 0 0; font-size: 1.05rem; font-weight: 550; border-top: 1px solid var(--line); padding-top: .8rem; } /* ---------- stats: the level map, the forecast, the weak list ---------- */ .patmap .pat { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; } .patmap .who { width: 5rem; font-size: .82rem; color: var(--fg); } .patmap .bar { flex: 1; height: .5rem; border-radius: 999px; background: var(--line); } .patmap .bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .patmap .bar.none { opacity: .4; } .patmap .n { width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; font-size: .82rem; } .forecast { display: flex; gap: .35rem; align-items: flex-end; } .forecast .fday { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; } .forecast .fbar { width: 100%; height: 3.2rem; display: flex; align-items: flex-end; } .forecast .fbar i { display: block; width: 100%; background: var(--accent); border-radius: .2rem .2rem 0 0; min-height: 2px; } .forecast .fn { font-size: .68rem; font-variant-numeric: tabular-nums; } .forecast .fd { font-size: .62rem; color: var(--mut); } .weak .w .fr { font-weight: 650; font-size: 1.05rem; } /* ---------- the ladder ---------- A level is a disclosure: 152 lessons will not read as one flat list, so only the levels you are working on are expanded. The caret is the whole affordance; the button beside it takes the level in one tap. */ .level { border-bottom: 1px solid var(--line); } .level:last-child { border-bottom: 0; } .level-head { display: flex; align-items: center; gap: .5rem; } .lvl-toggle { flex: 1; display: flex; align-items: center; gap: .55rem; appearance: none; font: inherit; text-align: left; background: none; border: 0; color: var(--fg); cursor: pointer; padding: .8rem .1rem; } .lvl-toggle b { font-size: 1rem; } .lvl-toggle .caret { display: inline-block; width: .8rem; text-align: center; color: var(--accent); font-size: 1rem; line-height: 1; transition: transform .15s ease; } .level.open .lvl-toggle .caret { transform: rotate(90deg); } .lvl-toggle .lcount { color: var(--mut); font-size: .8rem; font-variant-numeric: tabular-nums; } .lvl-all { appearance: none; font: inherit; font-size: .75rem; cursor: pointer; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--mut); white-space: nowrap; } .lvl-all:hover { border-color: var(--accent); color: var(--accent); } .lvl-all.on { color: var(--fg); } .level-body { padding-bottom: .6rem; } /* ---------- bilingual chrome ---------- Every Chinese label in the chrome pairs with its pinyin (and English where the word alone would not say what the button does): the learner is at most a few lessons in, and the interface should not assume words the lessons have not taught yet. */ .big b .py { font-style: normal; font-weight: 400; font-size: .68em; opacity: .8; letter-spacing: 0; } .tagline-gloss { margin: -.4rem 0 1rem; color: var(--mut); font-size: .95rem; } .verdict .v-zh { margin-right: .5rem; } .verdict .v-en { color: var(--mut); font-size: .72em; font-weight: 500; }