year-clock/index.css at main · ldpercy/year-clock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/*
**	index.css
*/

@import "./[html-common]/style/fullpage/dialog-appInfo.css";
@import "./[html-common]/style/fullpage/ui-panel.css";
@import "./[html-common]/style/fullpage/panel-group.css";
@import "./page/page.css";

:root {
	--project-colour: gold;
	--transition-duration-page: 0.5s;
}


html {
	margin:0px;
	padding:0px;
	scrollbar-width: none;

	font-family: sans-serif;
	font-size: 14px;

	--scheme-colour: white;

	body {
		--accent-light: #07c;
		--accent: var(--accent-light);

		margin:0px;
		padding:0px;

		/* a {
			color: var(--accent);
			text-decoration: none;
			&:hover { text-decoration: underline; }
		} */

		output > svg {
			display:block;	/*  fix for the extra pixel problem */
		}

	}

}/* html */


/* Scheme colours */

html {

	--html-background: var(--scheme-colour);
	--accent-colour: hsl(from var(--project-colour) h s 50 );
	--default-panel-colour: var(--scheme-colour);

	background-color: var(--html-background);
	color-scheme: dark;
	accent-color: var(--accent-colour);

	transition:
		background-color var(--transition-duration-page) linear,
		color-scheme var(--transition-duration-page) linear allow-discrete;


	body {
		color: lab( from var(--scheme-colour) calc(sign(l - 70) * -100) 0 0 / 1);
		accent-color: var(--accent-colour);

		transition:
			color var(--transition-duration-page) linear,
			accent-color var(--transition-duration-page) linear;
	}
}


html[data-colourscheme=light] {
	color-scheme: light;
	--scheme-colour: #fcfcfc;
	--accent-colour: oklch(from var(--project-colour) 0.7 c h );
}

html[data-colourscheme=dark] {
	color-scheme: dark;
	--scheme-colour: #0a0a0a;
	--accent-colour: oklch(from var(--project-colour) 0.9 c h );
}