use css vars for graph styling as well; base webview.scss off core.scss

This commit is contained in:
Damien Elmes 2020-08-27 18:34:34 +10:00
parent 21616f67bf
commit 0564d4cf86
6 changed files with 90 additions and 92 deletions

View file

@ -1,13 +1,18 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use 'vars';
@use 'core';
@use 'buttons';
// core.scss sets border-box, but we need to
// keep the old behaviour for now to avoid breaking
// add-ons/card templates
* {
box-sizing: content-box;
}
body {
margin: 2em;
color: var(--text-fg);
background: var(--window-bg);
overscroll-behavior: none;
}
@ -15,10 +20,6 @@ h1 {
margin-bottom: 0.2em;
}
a {
color: var(--link);
}
body.nightMode {
&::-webkit-scrollbar {
background: var(--window-bg);

View file

@ -10,7 +10,7 @@
<script>
const nightMode = window.location.hash == "#night";
if (nightMode) {
document.body.className = "night-mode";
document.documentElement.className = "night-mode";
}
anki.graphs(document.getElementById("main"), nightMode);
</script>

View file

@ -1,3 +1,6 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
:root {
--text-fg: black;
--window-bg: #ececec;
@ -7,7 +10,7 @@
--link: #00a;
--review-count: #0a0;
--new-count: #00a;
--learn-count: #C35617;
--learn-count: #c35617;
--zero-count: #ddd;
--slightly-grey-text: #333;
--highlight-bg: #77ccff;
@ -15,10 +18,11 @@
--disabled: #777;
--flag1-bg: #ffaaaa;
--flag2-bg: #ffb347;
--flag3-bg: #82E0AA;
--flag4-bg: #85C1E9;
--suspended-bg: #FFFFB2;
--flag3-bg: #82e0aa;
--flag4-bg: #85c1e9;
--suspended-bg: #ffffb2;
--marked-bg: #cce;
--tooltip-bg: #fcfcfc;
}
:root[class*="night-mode"] {
@ -26,11 +30,11 @@
--window-bg: #2f2f31;
--frame-bg: #3a3a3a;
--border: #777;
--faint-border: #29292B;
--faint-border: #29292b;
--link: #77ccff;
--review-count: #5CcC00;
--review-count: #5ccc00;
--new-count: #77ccff;
--learn-count: #FF935B;
--learn-count: #ff935b;
--zero-count: #444;
--slightly-grey-text: #ccc;
--highlight-bg: #77ccff;
@ -42,4 +46,5 @@
--flag4-bg: #3581a9;
--suspended-bg: #aaaa33;
--marked-bg: #77c;
--tooltip-bg: #272727;
}

18
ts/src/scss/core.scss Normal file
View file

@ -0,0 +1,18 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use 'vars';
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, Arial;
color: var(--text-fg);
background: var(--window-bg);
}
a {
color: var(--link);
}

View file

@ -135,7 +135,7 @@ export function renderCalendar(
}
const height = bounds.height / 10;
let emptyColour = "#eee";
let emptyColour = "#ddd";
if (nightMode) {
emptyColour = "#333";
}

View file

@ -1,31 +1,28 @@
$day-fg: black;
$day-bg: #f7f7f7;
$day-tooltip-bg: #fcfcfc;
$night-fg: white;
$night-bg: #222;
$night-tooltip-bg: #272727;
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
* {
box-sizing: border-box;
@use '../scss/core';
:root {
--area-fill: #00000008;
--area-stroke: #00000015;
}
body {
font-family: Arial;
background: $day-bg;
color: $day-fg;
:root[class*="night-mode"] {
--area-fill: #ffffff15;
--area-stroke: #00000030;
}
.graph-tooltip {
position: absolute;
background-color: white;
padding: 15px;
border-radius: 5px;
font-size: 15px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
color: $day-fg;
background: $day-tooltip-bg;
color: var(--text-fg);
background: var(--tooltip-bg);
}
.graph-tooltip table {
@ -84,8 +81,8 @@ body {
z-index: 1;
top: 0;
width: 100%;
color: $day-fg;
background: $day-bg;
color: var(--text-fg);
background: var(--window-bg);
padding: 0.5em;
}
@ -116,8 +113,8 @@ body {
.graph .area {
pointer-events: none;
fill: #00000008;
stroke: #00000015;
fill: var(--area-fill);
stroke: var(--area-stroke);
}
.hoverzone rect {
@ -163,36 +160,13 @@ body {
margin-bottom: 1em;
}
body.night-mode {
background: $night-bg;
color: $night-fg;
}
.no-data {
text {
text-anchor: middle;
fill: grey;
}
rect {
fill: $day-bg;
}
}
.night-mode {
.graph-tooltip {
background: $night-tooltip-bg;
color: $night-fg;
}
.range-box {
background: $night-bg;
color: $night-fg;
}
.graph .area {
fill: #ffffff15;
stroke: #00000030;
}
.no-data rect {
fill: $night-bg;
fill: var(--window-bg);
}
}