forked from CreArts-Community/Context-Icons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththeme.css
94 lines (79 loc) · 8.01 KB
/
theme.css
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
/* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Discord Addon ║ */
/* ╠══════════════════════════╦═════════════════════════════════════════════════════════════════════════════════════════╣ */
/* ║ Theme: ║ Context Icons ║ */
/* ║ Author: ║ CorellanStoma#1996 ║ */
/* ║ Support: ║ https://discord.gg/8W8E39Z ║ */
/* ╠══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╣ */
/* ║ ║ */
/* ║ Context Icons adds icons to the discord context menu's. ║ */
/* ║ This Project was created by CorellanStoma#1996. ║ */
/* ║ ║ */
/* ╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝ */
/* 🧪 Experimental
/* ✔️ Activated by default
/* ❌ Disabled by default
/* ⚠️ Do not touch!
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Import ║ Do not comment out these lines! By disabling the theme can not work correctly. ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
@import url("https://crearts-community.github.io/Context-Icons/src/source.css"); /* ⚠️ Warning!! Do not disable it! */
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ General ║ Here you can make general adjustments. ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
:root {
--context-icon-size: 21px;
--context-menu-width: inherit;
--context-menu-radius: 8px;
--context-menu-spacing: 0px;
--context-button-radius: 4px;
--context-icon-spacing: 8px;
--context-settings-height: 60vh;
--context-disabled-opacity: 0.3;
--separator-spacing-height: 4px;
--separator-spacing-width: 2px;
--danger-background-radius: 4px;
--slider-background-radius: 4px;
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Dark ║ Here you can make some adjustments for the dark theme. ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
.theme-dark {
--context-icon-normal: var(--interactive-normal);
--context-icon-focused: white;
--context-text-normal: var(--interactive-normal);
--context-text-focused: white;
--context-separator: var(--background-secondary-alt);
--slider-icon-color: var(--interactive-normal);
--slider-bar-color: var(--interactive-normal);
--slider-graber-color: var(--interactive-normal);
--slider-background-normal: var(--background-tertiary);
--slider-background-hover: var(--background-secondary-alt);
--danger-icon-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
--danger-icon-focused: white;
--danger-text-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
--danger-text-focused: white;
--danger-background-normal: transparent;
--danger-background-hover: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Light ║ These are the variables for the Light theme. ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
.theme-light {
--context-icon-normal: var(--interactive-normal);
--context-icon-focused: white;
--context-text-normal: var(--interactive-normal);
--context-text-focused: white;
--context-separator: var(--background-secondary-alt);
--slider-icon-color: var(--interactive-normal);
--slider-bar-color: var(--interactive-normal);
--slider-graber-color: var(--interactive-normal);
--slider-background-normal: var(--background-tertiary);
--slider-background-hover: var(--background-secondary-alt);
--danger-icon-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
--danger-icon-focused: white;
--danger-text-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
--danger-text-focused: white;
--danger-background-normal: transparent;
--danger-background-hover: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
}