turtle/index.css at main · ldpercy/turtle · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*
**	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/main-ui.css";
@import "./page/document-area.css";


:root {
	--project-colour: lightseagreen;
	--transition-time-page: 0.5s;
	--schemeColour-light: #fcfcfc;
	--schemeColour-dark: #0a0a0a;
}

html {


	--page-background-light: #fcfcfc;
	--page-background-dark: #111111;

	--silver: #bbbb;
	--teal: #088;		/* cartesian grid */

	--pink: #c7a;		/* polar grid new */
	--purple: #b0b;
	--fadedred: #f07;	/* point info */

	--accent-baseColour: #0099dd;
	/* --accent-light: #08c;
	--accent-dark: #0cf; */

	--transition-duration: 0.5s;

	--turtle-body: #0a07;
	--turtle-outline: #0a0f;

	margin:0px;
	padding:0px;

	body {
		margin:0px;
		padding:0px;
	}
	scrollbar-width: none;

	font-size: 14px; /* 14px; */
	font-family:'Noto sans', sans-serif;

	body > svg { display:block; }
	/*
	the 5 extra pixels are related to svg elements with `display:inline;` (which is the default) - change to block to fix
	*/
}


@media (prefers-color-scheme:dark) { }

@media (prefers-color-scheme:light) { }


html {
	color-scheme: dark;
	--accent-colour: oklch(from var(--accent-baseColour) 0.60 c h / alpha);
	--default-panel-colour: var(--scheme-colour);
	--custom-border-colour: grey;
	accent-color: var(--accent-colour);
	background-color: var(--scheme-colour);
	color: var(--text-colour);

	transition:
		background-color var(--transition-time-page) linear;
		/* color-scheme var(--transition-time-page) linear allow-discrete; */		/* this causes scheme switching bugs in chromium */
}


html[data-colourscheme=light] {
	color-scheme: light;
	--scheme-colour: #fcfcfc;
	--accent-colour: oklch(from var(--accent-baseColour) 0.60 c h / alpha);
	--text-colour: black;

	/* form {
		background-color:#eee9;
		border-color: #bbbb;
	} */
	.infoBox { background-color: #fffc; }

	.tabbar a {
		border-color: #8f8f9d;
		background-color: #ffffff;
	}
}

html[data-colourscheme=dark] {
	color-scheme: dark;
	--scheme-colour: #111111;
	--accent-colour: oklch(from var(--accent-baseColour) 0.80 c h / alpha);
	--text-colour: white;
/*
	form {
		background-color:#7779;
		border-color: #9999;
	} */
	.infoBox {
		background-color: #222c;
		border-color: #9999;
	}
	.tabbar a {
		border-color: #8f8f9d;
		background-color: #2b2a33;
	}
}