mirror of
https://github.com/ankitects/anki.git
synced 2025-09-19 06:22:22 -04:00
use css vars for graph styling as well; base webview.scss off core.scss
This commit is contained in:
parent
21616f67bf
commit
0564d4cf86
6 changed files with 90 additions and 92 deletions
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
18
ts/src/scss/core.scss
Normal 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);
|
||||
}
|
|
@ -135,7 +135,7 @@ export function renderCalendar(
|
|||
}
|
||||
|
||||
const height = bounds.height / 10;
|
||||
let emptyColour = "#eee";
|
||||
let emptyColour = "#ddd";
|
||||
if (nightMode) {
|
||||
emptyColour = "#333";
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue