openprotest.github.io/root.css at master · openprotest/openprotest.github.io · 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
@font-face { /*light*/
	font-family: "Open Sans";
	src: local("Open Sans"), url("fonts/opensans300.ttf") format("truetype");
	font-weight: 300;
	font-display: swap;
}
@font-face { /*normal*/
	font-family: "Open Sans";
	src: local("Open Sans"), url("fonts/opensans400.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face { /*semi-bold*/
	font-family: "Open Sans";
	src: local("Open Sans"), url("fonts/opensans600.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}
@font-face { /*bold*/
	font-family: "Open Sans";
	src: local("Open Sans"), url("fonts/opensans700.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

:root {
	color-scheme: light dark;

	--global-font-size: 15px;
	--global-font-family: "Open Sans";
	--sidemenu-width: 400px;

	--clr-accent: rgb(255,102,0);
	--clr-select: rgb(232,118,0);
	--clr-transparent: rgba(255,102,0,.6);
	--clr-error: rgb(240,16,16);
	--clr-orange: rgb(232,118,0);
	--clr-warning: rgb(255,186,0);
	--clr-light: rgb(224,224,224);
	--clr-dark: rgb(32,32,32);
	--clr-contrast: light-dark(rgb(32,32,32),rgb(192,192,192));

	--clr-control  : light-dark(rgb(152,152,152), rgb(144,144,144));
	--clr-highlight: light-dark(rgb(204,204,204), rgb(184,184,184));
	--clr-pane     : light-dark(rgb(192,192,192), rgb(168,168,168));

	--clr-bg1: light-dark(rgb(45,129,153), rgb(51,81,89));
	--clr-bg2: light-dark(rgb(68,148,211), rgb(62,81,97));
	--clr-bg3: light-dark(rgb(68,157,203), rgb(63,113,138));

	--grd-taskbar: linear-gradient(to bottom, rgb(199,64,0)0%, rgb(232,118,0)92%, rgb(199,64,0)100%);
	--grd-taskbar-rev: linear-gradient(to bottom, rgb(199,64,0)0%, rgb(232,118,0)2%, rgb(199,64,0)100%);

	--grd-toolbar: linear-gradient(rgb(96,96,96), rgb(80,80,80));

	--bg:
		linear-gradient(56deg,rgba(254,254,254,.05) 0%,rgba(254,254,254,.05) 69%,rgba(160,160,160,.05) 69%,rgba(160,160,160,.05) 100%),
		linear-gradient(194deg,rgba(102,102,102,.02) 0%,rgba(102,102,102,.02) 60%,rgba(67,67,67,.02) 60%,rgba(67,67,67,.02) 100%),
		linear-gradient(76deg,rgba(169,169,169,.06) 0%,rgba(169,169,169,.06) 89%,rgba(189,189,189,.06) 89%,rgba(189,189,189,.06) 100%),
		linear-gradient(326deg,rgba(213,213,213,.04) 0%,rgba(213,213,213,.04) 45%,rgba(66,66,66,.04) 45%,rgba(66,66,66,.04) 100%),
		linear-gradient(183deg,rgba(223,223,223,.01) 0%,rgba(223,223,223,.01) 82%,rgba(28,28,28,.01) 82%,rgba(28,28,28,.01) 100%),
		linear-gradient(3deg,rgba(20,20,20,.06) 0%,rgba(20,20,20,.06) 62%,rgba(136,136,136,.06) 62%,rgba(136,136,136,.06) 100%),
		linear-gradient(200deg,rgba(206,206,206,.09) 0%,rgba(206,206,206,.09) 58%,rgba(6,6,6,.09) 58%,rgba(6,6,6,.09) 100%),
		linear-gradient(304deg,rgba(162,162,162,.07) 0%,rgba(162,162,162,.07) 27%,rgba(24,24,24,.07) 27%,rgba(24,24,24,.07) 100%),
		linear-gradient(186deg,rgba(166,166,166,.04) 0%,rgba(166,166,166,.04) 5%,rgba(210,210,210,.04) 5%,rgba(210,210,210,.04) 100%),
		linear-gradient(150deg, var(--clr-bg1), var(--clr-bg2), var(--clr-bg3));
}

body {
	border: 0;
	margin: 0;
	overflow: hidden;

	font-family: var(--global-font-family);
	font-size: var(--global-font-size);

	-webkit-user-select: none; user-select: none;

	background: var(--bg);
	background-size: 100vw 100vh;
}

a {
	color: var(--clr-dark);
}

hr {
	border: 1px solid var(--clr-control);
}

div, svg {
	outline: 0;
}

.disable-animations *,
.disable-animations *::before,
.disable-animations *::after {
	transition-duration: 0s !important;
	animation: none !important;
}

::selection {
	color: var(--clr-light);
	background: var(--clr-dark);
}

.scrollbar-thin *::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
.scrollbar-thin *::-webkit-scrollbar-thumb {
	background-color: light-dark(#444, #888);
	border-radius: 2px;
}
.scrollbar-thin *::-webkit-scrollbar-thumb:hover {
	background-color: light-dark(#555, #777);
}
.scrollbar-thin *::-webkit-scrollbar-corner {
	background-color: transparent;
}

.scrollbar-hidden *::-webkit-scrollbar {
	display: none;
}

@-moz-document url-prefix() {
	* {
		scrollbar-color: light-dark(#444, #888) transparent !important;
	}
	.scrollbar-thin * {
		scrollbar-width: thin;
	}
	.scrollbar-hidden * {
		scrollbar-width: none;
	}
}

@media print {
	body {
		display: none;
	}
}

@keyframes glow {
	0%{ box-shadow: var(--clr-accent) 0 0 6px 1px }
	50%{ box-shadow: var(--clr-accent) 0 0 2px 0px }
	100%{ box-shadow: var(--clr-accent) 0 0 6px 1px }
}

@keyframes outline {
	0%   { box-shadow: var(--clr-accent) 0px 0px 0px 0px; }
	30%  { box-shadow: var(--clr-accent) 0px 4px 0px 0px; }
	100% { box-shadow: var(--clr-accent) 0px 0px 0px 3px; }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}