forked from CreArts-Community/Context-Icons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dev.scss
102 lines (84 loc) · 8.88 KB
/
dev.scss
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
// ╔════════════════════════════════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ 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!
// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ SRC ║ Do not comment out these lines! By disabling the theme can not work correctly. ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝
@use "src/source"; // ⚠️ Warning!! Do not disable it!
// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Plugins ║ Do not comment out these lines! By disabling the theme can not work correctly. ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝
@use "modules/plugins/powercord"; // ✔️ This loads the Powercord plugin customizations.
@use "modules/plugins/betterdiscord"; // ✔️ This loads the BetterDiscord plugin customizations.
// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ General ║ Here you can make general adjustments. ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝
:root {
--context-icon-size: 21px;
--context-menu-width: fit-content;
--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%);
}