mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
7d8f19e6e4
- The previous commits moved the majority of the remaining global css into components; move the remaining @emotion/css references into ticks.scss and the styling of the Graph.svelte. This is not as elegant as the emotion solution, but builds a whole lot faster, and most of our styling can be scoped to a component anyway. - Leave the .html files in ts/ for now. AnkiMobile uses them, and AnkiDroid likely will in the future too. In the long run we'll likely move to loading the JS into an existing page instead of loading a separate page, but at that point we can just exclude the .html file from copy_files_into_group() without affecting other clients. Closes #1074
40 lines
1,000 B
SCSS
40 lines
1,000 B
SCSS
/* Copyright: Ankitects Pty Ltd and contributors
|
|
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
|
|
|
|
// Customizing the standard x and y tick markers and text on the graphs. The `tick`
|
|
// class is automatically added by d3. We apply our custom ticks only to ticks
|
|
// that are nested under a Graph component.
|
|
|
|
.graph {
|
|
.tick {
|
|
line {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
text {
|
|
opacity: 0.5;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.tick {
|
|
text {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.tick {
|
|
text {
|
|
font-size: 16px;
|
|
// on small screens, hide every second row on graphs that have
|
|
// marked the ticks as odd
|
|
&.tick-odd {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|