Skip to content

Tweak styles #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mreichhoff merged 3 commits into from
Feb 22, 2026
Merged

Tweak styles #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4c0008
Tweak styles
mreichhoff Feb 22, 2026
87300c9
Make thicker edge lines by default
mreichhoff Feb 22, 2026
1afa228
Make walkthrough style card-like
mreichhoff Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 10 additions & 16 deletions public/css/hanzi-graph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:root {
--background-color: linear-gradient(rgba(100, 150, 255, 0.05), rgba(100, 150, 255, 0.15));
--background-color: rgba(100, 150, 255, 0.12);
--primary-font-color: rgba(0, 0, 0, 0.87);
--primary-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--chinese-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
Expand Down Expand Up @@ -155,6 +155,9 @@ h1 {

.walkthrough {
margin-top: var(--walkthrough-top-margin);
padding: 10px;
background: var(--sentence-card-background-color);
border-radius: 12px;
}

h2 {
Expand Down Expand Up @@ -427,16 +430,13 @@ https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_a
padding: 0 12px;
margin-top: 8px;
height: 40px;
width: fit-content;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.2s;
}

.inline-definition-explain-btn:hover:not(:disabled) {
opacity: 0.8;
}

.inline-definition-explain-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
Expand Down Expand Up @@ -475,23 +475,17 @@ https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_a
cursor: pointer;
}

/* Word click highlighting - apply to the word span */
.sentence-container .word-span.word-clicked {
.word-clicked {
background-color: var(--highlight-color, rgba(0, 226, 102, 0.3));
transform: scale(1.1);
display: inline-block;
border-radius: 2px;
margin: 0 2px;
transition: transform 0.1s ease, background-color 0.1s ease;
}

/* Legacy: single character highlighting for study-mode (no word spans) */
.sentence-container>a.word-clicked {
background-color: var(--highlight-color, rgba(109, 226, 0, 0.3));
transform: scale(1.1);
display: inline-block;
border-radius: 2px;
transition: transform 0.1s ease, background-color 0.1s ease;
/* Word click highlighting - apply to the word span */
.sentence-container .word-span.word-clicked {
margin: 0 2px;
}

#menu-popover {
Expand Down Expand Up @@ -2367,7 +2361,7 @@ main.auth-form {

@media (prefers-color-scheme: dark) {
:root {
--background-color: linear-gradient(180deg, #071024, #121212);
--background-color: #071024;
--primary-font-color: rgba(255, 255, 255, 0.87);
--border: 1px solid #444;
--border-color: #444;
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="description"
content="Learn Chinese by exploring the relationships between characters alongside examples that illustrate their use.">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#f9fbff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="rgb(237,242,254)" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#071024" media="(prefers-color-scheme: dark)">
<script type="module">
if ('serviceWorker' in navigator) {
Expand Down
6 changes: 3 additions & 3 deletions public/js/modules/explore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,15 @@ let runTextToSpeech = function (text, anchors) {
}
anchors.forEach((character, index) => {
if (index >= event.charIndex && index < (event.charIndex + (event.charLength || 1))) {
character.style.backgroundColor = '#6de200';
character.classList.add('word-clicked');
} else {
character.removeAttribute('style');
character.classList.remove('word-clicked');
}
});
});
utterance.addEventListener('end', function () {
anchors.forEach(character => {
character.removeAttribute('style');
character.classList.remove('word-clicked');
});
// length check shouldn't be necessary, but just in case, I guess?
if (activeUtterances.length !== 0) {
Expand Down
11 changes: 6 additions & 5 deletions public/js/modules/graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,17 +264,18 @@ function getStylesheet() {
'text-background-shape': 'round-rectangle',
'text-background-padding': '3px',
'text-events': 'yes',
'width': '5px',
'width': '6px',
'opacity': '1',
'overlay-opacity': '0'
'overlay-opacity': '0',
'transition-property': 'background-color, line-outline-color, line-outline-width',
'transition-duration': '0.2s'
}
},
{
selector: 'edge:selected',
style: {
'width': '6px',
'opacity': '1',
'line-color': prefersDark ? '#999' : '#000'
'line-outline-width': '3px',
'line-outline-color': '#aaa'
}
}
];
Expand Down