/* 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: absolute; animation: spin; animation-duration: 1s; animation-iteration-count: infinite; display: inline-block; font-size: 2em; opacity: 0; } .spin.active { opacity: 0.5; transition: opacity 1s; } .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; }