anki/ts/graphs/graphs.scss

194 lines
2.9 KiB
SCSS

/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use '../sass/core';
:root {
--area-fill: #000000;
--area-fill-opacity: 0.03;
--area-stroke: #000000;
--area-stroke-opacity: 0.08;
}
:root[class*="night-mode"] {
--area-fill: #ffffff;
--area-fill-opacity: 0.08;
--area-stroke: #000000;
--area-stroke-opacity: 0.18;
}
.graph-tooltip {
position: absolute;
padding: 15px;
border-radius: 5px;
font-size: 15px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
color: var(--text-fg);
background: var(--tooltip-bg);
}
.graph-tooltip table {
border-spacing: 1em 0;
}
.graph {
margin-left: auto;
margin-right: auto;
max-width: 60em;
page-break-inside: avoid;
}
.graph h1 {
text-align: center;
margin-bottom: 0.25em;
margin-top: 1.5em;
}
.no-domain-line .domain {
opacity: 0.05;
}
.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) {
body {
font-size: 12px;
}
.tick text {
font-size: 16px;
}
.tick-odd {
display: none;
}
}
.range-box {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
color: var(--text-fg);
background: var(--window-bg);
padding: 0.5em;
}
@media print {
.range-box {
position: absolute;
}
}
.range-box-pad {
height: 2em;
}
.range-box-inner {
display: flex;
justify-content: center;
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
.range-box-inner {
font-size: smaller;
}
}
.range-box-inner > * {
padding-left: 0.5em;
padding-right: 0.5em;
}
.graph .area {
pointer-events: none;
fill: var(--area-fill);
fill-opacity: var(--area-fill-opacity);
stroke: var(--area-stroke);
stroke-opacity: var(--area-stroke-opacity);
}
.hoverzone rect {
fill: none;
pointer-events: all;
}
.hoverzone rect:hover {
fill: grey;
opacity: 0.05;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin {
position: sticky;
left: 50%;
top: 50%;
animation: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
display: inline-block;
font-size: 2em;
opacity: 0.5;
}
.legend-outer {
text-align: center;
}
.subtitle {
text-align: center;
margin-bottom: 1em;
}
.no-data {
text {
text-anchor: middle;
fill: grey;
}
rect {
fill: var(--window-bg);
}
}
.centered {
display: flex;
justify-content: center;
}
.align-end {
text-align: end;
}
.align-start {
text-align: start;
}
.no-focus-outline:focus {
outline: 0;
}