workspaces/common.css at main · 961028/workspaces · 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
/* =========================
   Color Variables
   ========================= */
:root {
	/* Base Colors */
	--Menu: var(--popup);
	--MenuText: var(--popup_text);

	/* Derived Popup Colors */
	--popup-000: var(--Menu);
	--popup-100: color-mix(in srgb, var(--Menu), var(--MenuText) 8%);
	--popup-200: color-mix(in srgb, var(--Menu), var(--MenuText) 16.86%);
	--popup-300: color-mix(in srgb, var(--Menu), var(--MenuText) 20%);
	--popup-400: color-mix(in srgb, var(--Menu), var(--MenuText) 30.79%);
	--popup-500: color-mix(in srgb, var(--Menu), var(--MenuText) 50%);
	--popup-600: color-mix(in srgb, var(--Menu), var(--MenuText) 60%);
	--popup-700: color-mix(in srgb, var(--Menu), var(--MenuText) 70%);
	--popup-800: color-mix(in srgb, var(--Menu), var(--MenuText) 80%);
	--popup-900: color-mix(in srgb, var(--Menu), var(--MenuText) 90%);
	--popup-1000: var(--MenuText);

	/* Overlay Colors */
	--overlay-000: var(--MenuText);
	--overlay-100: color-mix(in srgb, var(--MenuText) 8%, transparent);
	--overlay-200: color-mix(in srgb, var(--MenuText) 17%, transparent);
	--overlay-300: color-mix(in srgb, var(--MenuText) 20%, transparent);
	--overlay-400: color-mix(in srgb, var(--MenuText) 31%, transparent);
	--overlay-500: color-mix(in srgb, var(--MenuText) 50%, transparent);
	--overlay-600: color-mix(in srgb, var(--MenuText) 60%, transparent);
	--overlay-700: color-mix(in srgb, var(--MenuText) 70%, transparent);
	--overlay-800: color-mix(in srgb, var(--MenuText) 80%, transparent);
	--overlay-900: color-mix(in srgb, var(--MenuText) 90%, transparent);
	--overlay-1000: var(--MenuText);

	--shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
}

/* =========================
   Typography & Sizing
   ========================= */
:root {
	--font-size-small: 0.64rem;
	--font-size-medium: 0.867rem;
	--font-size-large: 1.4rem;

	--border-radius-small: 2px;
	--border-radius-medium: 4px;
}

/* =========================
   Spacing Variables
   ========================= */
:root {
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-36: 36px;
	--space-40: 40px;
	--space-44: 44px;
	--space-48: 48px;
}

/* =========================
   Custom Context Menu
   ========================= */
#context-menu {
	background-color: var(--popup-000);
	border: 1px solid var(--popup-200);
	border-radius: var(--border-radius-medium);
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
	display: none;
	padding: var(--space-4);
	position: absolute;
	z-index: 1000;
}

#context-menu .context-menu-item {
	color: var(--popup-1000);
	border-radius: var(--border-radius-small);
	cursor: pointer;
	font-size: var(--font-size-medium);
	padding: var(--space-8);
}

#context-menu .context-menu-item:hover {
	background-color: var(--popup-300);
}