wlc-webapp/styles/globals.ts at main · ekoindia/wlc-webapp · 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
/**
 * Chakra theme.styles.global definitions.
 * These CSS styles are applied globally.
 */
export const globalStyles = {
	html: {
		fontFamily: "system-ui, sans-serif",
	},
	body: {
		// margin: 0,
		// padding: 0,
		// width: "100vw",
		// height: "100vh",
		overscrollBehaviorY: "none",
		fontFamily: "system-ui, sans-serif",
	},
	"[hidden], [hideempty]:empty": {
		display: "none !important",
	},
	"*": {
		boxSizing: "border-box",
	},
	"img, svg, video, canvas, audio, iframe, embed, object": {
		maxWidth: "100%",
		display: "block",
	},
	"[no-select]": {
		PointerEvents: "none",
		userSelect: "none",
	},
	".customScrollbars::-webkit-scrollbar-track": {
		WebkitBoxShadow: "inset 0 0 1px rgba(0,0,0,0)",
	},
	".customScrollbars::-webkit-scrollbar-track:hover": {
		WebkitBoxShadow: "inset 0 0 1px rgba(0,0,0,0.2)",
	},
	".customScrollbars::-webkit-scrollbar": {
		width: "10px",
		background: "rgba(0,0,0,0)",
	},
	".customScrollbars::-webkit-scrollbar:hover": {
		backgroundColor: "rgba(100,100,100,0.1)",
	},
	".customScrollbars::-webkit-scrollbar-thumb": {
		backgroundColor: "#AAA",
		borderLeft: "6px solid transparent",
		borderRight: "1px solid transparent",
		backgroundClip: "content-box",
	},
	".customScrollbars::-webkit-scrollbar-thumb:hover": {
		backgroundColor: "#999",
		border: "1px solid #777",
	},

	// Auto Dark Theme...
	// "@media (prefers-color-scheme: dark)": {
	// 	body: {
	// 		filter: "invert(100%) hue-rotate(180deg)",
	// 	},
	// 	// Fix for Firefox
	// 	html: {
	// 		backgroundColor: "#111",
	// 	},
	// 	// Do not invert media (revert the invert)
	// 	"img, video, canvas, iframe": {
	// 		filter: "invert(100%) hue-rotate(180deg)",
	// 	},
	// },
	// "div[tooltip]:not([tooltip='']):not([notooltip])": {
	// 	position: "relative !important",
	// },
	// "div[tooltip]:not([tooltip='']):not([notooltip]):before": {
	// 	content: "attr(tooltip)",
	// 	display: "inline-block",
	// 	position: "absolute !important",
	// 	outline: "none",
	// 	top: 0,
	// 	left: "auto",
	// 	right: "auto",
	// 	opacity: 0,
	// 	lineHeight: "1.3",
	// 	zIndex: "99999999",
	// 	pointerEvents: "none",
	// 	backfaceVisibility: "hidden",
	// 	transition: "none",
	// 	padding: "8px",
	// 	color: "white",
	// 	fontSize: "10px",
	// 	fontWeight: 400,
	// 	borderRadius: "2px",
	// 	minHeight: "1.5em",
	// 	marginTop: "5em",
	// 	background: "#616161",
	// },
	// "[tooltip]:not([tooltip='']):not([notooltip])[tooltip-config~='right']:before":
	// 	{
	// 		// marginTop: "-40px",
	// 		top: "auto",
	// 		left: "50% !important",
	// 		right: "-50%",
	// 	},
	// "[tooltip]:not([tooltip='']):not([notooltip]):hover:before": {
	// 	transition: "opacity 0.3s ease-out 0.9s",
	// 	opacity: 0.9,
	// 	width: "auto",
	// 	height: "auto",
	// },
};