Demonstration & Glide 👋
This commit is contained in:
thororen1234
parent
628d5d2b62
commit
634a007d3b
5 changed files with 0 additions and 1141 deletions
|
|
@ -1,153 +0,0 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { playAudio } from "@api/AudioPlayer";
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { classNameFactory } from "@api/Styles";
|
||||
import { Devs, EquicordDevs } from "@utils/constants";
|
||||
import { closeModal, ModalCloseButton, ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { Button, Forms, Switch, Text } from "@webpack/common";
|
||||
|
||||
// definitely not stolen from glide :P
|
||||
async function injectCSS() {
|
||||
var elementToRemove = document.getElementById("DemonstrationStyle");
|
||||
if (elementToRemove) {
|
||||
elementToRemove.remove();
|
||||
}
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.id = "DemonstrationStyle";
|
||||
const content = await fetch("https://minidiscordthemes.github.io/Demonstration/Demonstration.theme.css").then(e => e.text());
|
||||
styleElement.textContent = content;
|
||||
document.documentElement.appendChild(styleElement);
|
||||
}
|
||||
|
||||
const validKeycodes = [
|
||||
"Backspace", "Tab", "Enter", "ShiftLeft", "ShiftRight", "ControlLeft", "ControlRight", "AltLeft", "AltRight", "Pause", "CapsLock",
|
||||
"Escape", "Space", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "PrintScreen", "Insert",
|
||||
"Delete", "Digit0", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "KeyA", "KeyB", "KeyC",
|
||||
"KeyD", "KeyE", "KeyF", "KeyG", "KeyH", "KeyI", "KeyJ", "KeyK", "KeyL", "KeyM", "KeyN", "KeyO", "KeyP", "KeyQ", "KeyR", "KeyS", "KeyT",
|
||||
"KeyU", "KeyV", "KeyW", "KeyX", "KeyY", "KeyZ", "MetaLeft", "MetaRight", "ContextMenu", "Numpad0", "Numpad1", "Numpad2", "Numpad3",
|
||||
"Numpad4", "Numpad5", "Numpad6", "Numpad7", "Numpad8", "Numpad9", "NumpadMultiply", "NumpadAdd", "NumpadSubtract", "NumpadDecimal",
|
||||
"NumpadDivide", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "NumLock", "ScrollLock"
|
||||
];
|
||||
|
||||
const settings = definePluginSettings({
|
||||
keyBind: {
|
||||
description: "The key to toggle the theme when pressed",
|
||||
type: OptionType.STRING,
|
||||
default: "F6",
|
||||
isValid: (value: string) => {
|
||||
if (validKeycodes.includes(value)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
soundVolume: {
|
||||
description: "How loud the toggle sound is (0 to disable)",
|
||||
type: OptionType.SLIDER,
|
||||
default: 0.5,
|
||||
markers: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
|
||||
},
|
||||
showConfirmationModal: {
|
||||
description: "Show modal to remind shortcut",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: true,
|
||||
}
|
||||
});
|
||||
|
||||
function ToggleModal() {
|
||||
const value = !settings.use(["showConfirmationModal"]).showConfirmationModal;
|
||||
return (
|
||||
<Switch
|
||||
note="You can re-enable this setting later"
|
||||
value={value}
|
||||
onChange={v => { settings.store.showConfirmationModal = !v; }}>
|
||||
Disable modal?
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
function handleToggle() {
|
||||
console.log("Toggling demonstration mode");
|
||||
const style = document.getElementById("DemonstrationStyle");
|
||||
if (style != null) {
|
||||
style.remove();
|
||||
playSound("https://github.com/Equicord/Equibored/raw/main/sounds/demonstration/wp5rpz.wav");
|
||||
}
|
||||
else {
|
||||
if (settings.store.showConfirmationModal) {
|
||||
const cl = classNameFactory("vc-demonstration-modal");
|
||||
|
||||
const key = openModal(props => (
|
||||
<ModalRoot {...props}>
|
||||
<ModalHeader className={cl("header")}>
|
||||
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }} >Demonstration</Text>
|
||||
<ModalCloseButton onClick={() => closeModal(key)}></ModalCloseButton>
|
||||
</ModalHeader>
|
||||
<ModalContent className={cl("content")}>
|
||||
<Forms.FormText>
|
||||
This will censor all text! To disable this, remember the shortcut:
|
||||
</Forms.FormText>
|
||||
<Text variant="heading-xl/bold" style={{ textAlign: "center", width: "100%", paddingTop: "20px", paddingBottom: "20px" }}>
|
||||
{settings.store.keyBind}
|
||||
</Text>
|
||||
<ToggleModal />
|
||||
</ModalContent>
|
||||
<Button
|
||||
onClick={() => {
|
||||
closeModal(key);
|
||||
injectCSS();
|
||||
playSound("https://github.com/Equicord/Equibored/raw/main/sounds/demonstration/ckz46t.wav");
|
||||
}}
|
||||
>Okay!</Button>
|
||||
</ModalRoot>
|
||||
));
|
||||
} else {
|
||||
injectCSS();
|
||||
playSound("https://github.com/Equicord/Equibored/raw/main/sounds/demonstration/ckz46t.wav");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.code !== settings.store.keyBind) { return; }
|
||||
handleToggle();
|
||||
}
|
||||
|
||||
async function playSound(url: string) {
|
||||
playAudio(url, {
|
||||
volume: settings.store.soundVolume * 100,
|
||||
onError: error => {
|
||||
console.error("Error playing sound:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default definePlugin({
|
||||
name: "Demonstration",
|
||||
description: "Plugin for taking theme screenshots - censors identifying images and text.",
|
||||
authors: [Devs.Samwich, EquicordDevs.Panniku],
|
||||
dependencies: ["AudioPlayerAPI"],
|
||||
settings,
|
||||
toolboxActions: {
|
||||
"Toggle Demonstration": (() => handleToggle())
|
||||
},
|
||||
settingsAboutComponent: () => {
|
||||
return (
|
||||
<>
|
||||
<Text>To change your keycode, check out <a href="https://www.toptal.com/developers/keycode" target="_blank" rel="noreferrer noopener">this tool</a>!</Text>
|
||||
</>
|
||||
);
|
||||
},
|
||||
start() {
|
||||
document.addEventListener("keydown", handleKeydown);
|
||||
},
|
||||
stop() {
|
||||
document.removeEventListener("keydown", handleKeydown);
|
||||
}
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 B |
|
|
@ -1,30 +0,0 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
export function generateRandomColorHex(): string {
|
||||
const r = Math.floor(Math.random() * 90);
|
||||
const g = Math.floor(Math.random() * 90);
|
||||
const b = Math.floor(Math.random() * 90);
|
||||
|
||||
return `${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export function darkenColorHex(color: string): string {
|
||||
const hex = color.replace(/^#/, "");
|
||||
const bigint = parseInt(hex, 16);
|
||||
let r = (bigint >> 16) & 255;
|
||||
let g = (bigint >> 8) & 255;
|
||||
let b = bigint & 255;
|
||||
r = Math.max(r - 5, 0);
|
||||
g = Math.max(g - 5, 0);
|
||||
b = Math.max(b - 5, 0);
|
||||
return `${((r << 16) + (g << 8) + b).toString(16).padStart(6, "0")}`;
|
||||
}
|
||||
|
||||
export function saturateColorHex(color: string): string {
|
||||
// i should really do something with this at some point :P
|
||||
return color;
|
||||
}
|
||||
|
|
@ -1,794 +0,0 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { definePluginSettings, Settings } from "@api/Settings";
|
||||
import { copyToClipboard } from "@utils/clipboard";
|
||||
import { Devs } from "@utils/constants";
|
||||
import definePlugin, { OptionType, StartAt } from "@utils/types";
|
||||
import { Button, ColorPicker, Forms, TextInput, Toasts, useState } from "@webpack/common";
|
||||
|
||||
import { darkenColorHex, generateRandomColorHex, saturateColorHex } from "./generateTheme";
|
||||
import { themes } from "./themeDefinitions";
|
||||
|
||||
export interface ThemePreset {
|
||||
bgcol: string;
|
||||
accentcol: string;
|
||||
textcol: string;
|
||||
brand: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
let setPreset;
|
||||
|
||||
|
||||
function LoadPreset(preset?: ThemePreset) {
|
||||
if (setPreset === settings.store.ColorPreset) { return; }
|
||||
const theme: ThemePreset = preset == null ? themes[settings.store.ColorPreset] : preset;
|
||||
setPreset = settings.store.ColorPreset;
|
||||
settings.store.Primary = theme.bgcol;
|
||||
settings.store.Accent = theme.accentcol;
|
||||
settings.store.Text = theme.textcol;
|
||||
settings.store.Brand = theme.brand;
|
||||
injectCSS();
|
||||
}
|
||||
|
||||
function mute(hex, amount) {
|
||||
hex = hex.replace(/^#/, "");
|
||||
const bigint = parseInt(hex, 16);
|
||||
let r = (bigint >> 16) & 255;
|
||||
let g = (bigint >> 8) & 255;
|
||||
let b = bigint & 255;
|
||||
r = Math.max(r - amount, 0);
|
||||
g = Math.max(g - amount, 0);
|
||||
b = Math.max(b - amount, 0);
|
||||
return "#" + ((r << 16) + (g << 8) + b).toString(16).padStart(6, "0");
|
||||
}
|
||||
|
||||
function copyPreset(name: string) {
|
||||
const template =
|
||||
`
|
||||
{
|
||||
bgcol: "${settings.store.Primary}",
|
||||
accentcol: "${settings.store.Accent}",
|
||||
textcol: "${settings.store.Text}",
|
||||
brand: "${settings.store.Brand}",
|
||||
name: "${name}"
|
||||
}
|
||||
`;
|
||||
copyToClipboard(template);
|
||||
}
|
||||
|
||||
function CopyPresetComponent() {
|
||||
|
||||
const [inputtedName, setInputtedName] = useState("");
|
||||
return (
|
||||
<>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>{"Preset name"}</Forms.FormTitle>
|
||||
<TextInput
|
||||
type="text"
|
||||
value={inputtedName}
|
||||
onChange={setInputtedName}
|
||||
placeholder={"Enter a name"}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Button onClick={() => {
|
||||
copyPreset(inputtedName);
|
||||
}}>Copy preset</Button>
|
||||
<Button onClick={() => {
|
||||
generateAndApplyProceduralTheme();
|
||||
}}>Generate Random</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function generateAndApplyProceduralTheme() {
|
||||
|
||||
const randomBackgroundColor = generateRandomColorHex();
|
||||
const accentColor = darkenColorHex(randomBackgroundColor);
|
||||
const textColor = "ddd0d0";
|
||||
const brandColor = saturateColorHex(randomBackgroundColor);
|
||||
|
||||
settings.store.Primary = randomBackgroundColor;
|
||||
settings.store.Accent = accentColor;
|
||||
settings.store.Text = textColor;
|
||||
settings.store.Brand = brandColor;
|
||||
|
||||
injectCSS();
|
||||
}
|
||||
|
||||
const settings = definePluginSettings({
|
||||
serverListAnim: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Toggles if the server list hides when not hovered",
|
||||
default: false,
|
||||
onChange: () => injectCSS()
|
||||
},
|
||||
memberListAnim: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Toggles if the member list hides when not hovered",
|
||||
default: true,
|
||||
onChange: () => injectCSS()
|
||||
},
|
||||
privacyBlur: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Blurs potentially sensitive information when not tabbed in",
|
||||
default: false,
|
||||
onChange: () => injectCSS()
|
||||
},
|
||||
tooltips: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "If tooltips are displayed in the client",
|
||||
default: false,
|
||||
onChange: () => injectCSS()
|
||||
},
|
||||
customFont: {
|
||||
type: OptionType.STRING,
|
||||
description: "The google fonts @import for a custom font (blank to disable)",
|
||||
default: "@import url('https://fonts.googleapis.com/css2?family=Poppins&wght@500&display=swap');",
|
||||
onChange: injectCSS
|
||||
},
|
||||
animationSpeed: {
|
||||
type: OptionType.STRING,
|
||||
description: "The speed of animations",
|
||||
default: "0.2",
|
||||
onChange: injectCSS
|
||||
},
|
||||
colorsEnabled: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Whether or not to enable theming",
|
||||
onChange: () => injectCSS()
|
||||
},
|
||||
ColorPreset: {
|
||||
type: OptionType.SELECT,
|
||||
description: "Some pre-made color presets (more soon hopefully)",
|
||||
options: themes.map(theme => ({ label: theme.name, value: themes.indexOf(theme), default: themes.indexOf(theme) === 0 })),
|
||||
onChange: () => { LoadPreset(); }
|
||||
},
|
||||
Primary: {
|
||||
type: OptionType.COMPONENT,
|
||||
description: "",
|
||||
default: "000000",
|
||||
component: () => <ColorPick propertyname="Primary" />
|
||||
},
|
||||
Accent: {
|
||||
type: OptionType.COMPONENT,
|
||||
description: "",
|
||||
default: "313338",
|
||||
component: () => <ColorPick propertyname="Accent" />
|
||||
},
|
||||
Text: {
|
||||
type: OptionType.COMPONENT,
|
||||
description: "",
|
||||
default: "ffffff",
|
||||
component: () => <ColorPick propertyname="Text" />
|
||||
},
|
||||
Brand: {
|
||||
type: OptionType.COMPONENT,
|
||||
description: "",
|
||||
default: "ffffff",
|
||||
component: () => <ColorPick propertyname="Brand" />
|
||||
},
|
||||
pastelStatuses: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Changes the status colors to be more pastel (fits with the catppuccin presets)",
|
||||
default: true,
|
||||
onChange: () => injectCSS()
|
||||
},
|
||||
DevTools:
|
||||
{
|
||||
type: OptionType.COMPONENT,
|
||||
description: "meow",
|
||||
default: "",
|
||||
component: () => <CopyPresetComponent />
|
||||
},
|
||||
ExportTheme:
|
||||
{
|
||||
type: OptionType.COMPONENT,
|
||||
description: "",
|
||||
default: "",
|
||||
component: () => <Button onClick={() => {
|
||||
copyCSS();
|
||||
Toasts.show({
|
||||
id: Toasts.genId(),
|
||||
message: "Successfully copied theme!",
|
||||
type: Toasts.Type.SUCCESS
|
||||
});
|
||||
}} >Copy The CSS for your current configuration.</Button>
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export function ColorPick({ propertyname }: { propertyname: string; }) {
|
||||
return (
|
||||
|
||||
<div className="color-options-container">
|
||||
<Forms.FormTitle tag="h3">{propertyname}</Forms.FormTitle>
|
||||
|
||||
<ColorPicker
|
||||
color={parseInt(settings.store[propertyname], 16)}
|
||||
onChange={color => {
|
||||
const hexColor = (color ?? 0).toString(16).padStart(6, "0");
|
||||
settings.store[propertyname] = hexColor;
|
||||
injectCSS();
|
||||
}
|
||||
}
|
||||
showEyeDropper={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function copyCSS() {
|
||||
copyToClipboard(getCSS(parseFontContent()));
|
||||
}
|
||||
|
||||
function parseFontContent() {
|
||||
const fontRegex = /family=([^&;,:]+)/;
|
||||
const customFontString: string = Settings.plugins.Glide.customFont;
|
||||
if (customFontString == null) { return; }
|
||||
const fontNameMatch: RegExpExecArray | null = fontRegex.exec(customFontString);
|
||||
const fontName = fontNameMatch ? fontNameMatch[1].replace(/[^a-zA-Z0-9]+/g, " ") : "";
|
||||
return fontName;
|
||||
}
|
||||
function injectCSS() {
|
||||
if (Settings.plugins.Glide.enabled) {
|
||||
|
||||
const fontName = parseFontContent();
|
||||
const theCSS = getCSS(fontName);
|
||||
|
||||
const elementToRemove = document.getElementById("GlideStyleInjection");
|
||||
if (elementToRemove) {
|
||||
elementToRemove.remove();
|
||||
}
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.id = "GlideStyleInjection";
|
||||
styleElement.textContent = theCSS;
|
||||
document.documentElement.appendChild(styleElement);
|
||||
}
|
||||
}
|
||||
|
||||
function getCSS(fontName) {
|
||||
return `
|
||||
/* IMPORTS */
|
||||
|
||||
/* Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
|
||||
${Settings.plugins.Glide.customFont}
|
||||
|
||||
/*Settings things*/
|
||||
/*Server list animation*/
|
||||
${Settings.plugins.Glide.serverListAnim ? `
|
||||
.guilds_a4d4d9 {
|
||||
width: 10px;
|
||||
transition: width var(--animspeed) ease 0.1s, opacity var(--animspeed) ease 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
.guilds_a4d4d9:hover {
|
||||
width: 65px;
|
||||
opacity: 100;
|
||||
}
|
||||
` : ""}
|
||||
/*Member list anim toggle*/
|
||||
${Settings.plugins.Glide.memberListAnim ? `
|
||||
.container_cbd271
|
||||
{
|
||||
width: 60px;
|
||||
opacity: 0.2;
|
||||
transition: width var(--animspeed) ease 0.1s, opacity var(--animspeed) ease 0.1s;
|
||||
|
||||
}
|
||||
.container_cbd271:hover
|
||||
{
|
||||
width: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
` : ""}
|
||||
/*Privacy blur*/
|
||||
${Settings.plugins.Glide.privacyBlur ? `
|
||||
.header_f9f2ca,
|
||||
.container_ee69e0,
|
||||
.title_a7d72e,
|
||||
.layout_ec8679,
|
||||
[aria-label="Members"] {
|
||||
filter: blur(0);
|
||||
transition: filter 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
body:not(:hover) .header_f9f2ca,
|
||||
body:not(:hover) .container_ee69e0,
|
||||
body:not(:hover) .title_a7d72e,
|
||||
body:not(:hover) [aria-label="Members"],
|
||||
body:not(:hover) .layout_ec8679 {
|
||||
filter: blur(5px);
|
||||
}
|
||||
` : ""}
|
||||
/*Tooltips*/
|
||||
[class*="tooltip"]
|
||||
{
|
||||
${!Settings.plugins.Glide.tooltips ? "display: none !important;" : ""}
|
||||
}
|
||||
/*Root configs*/
|
||||
:root
|
||||
{
|
||||
--animspeed: ${Settings.plugins.Glide.animationSpeed + "s"};
|
||||
--font-primary: ${(fontName.length > 0 ? fontName : "Nunito")};
|
||||
${Settings.plugins.Glide.colorsEnabled ? `
|
||||
--accent: #${Settings.plugins.Glide.Accent};
|
||||
--bgcol: #${Settings.plugins.Glide.Primary};
|
||||
--text: #${Settings.plugins.Glide.Text};
|
||||
--brand: #${Settings.plugins.Glide.Brand};
|
||||
--mutedtext: ${mute(Settings.plugins.Glide.Text, 20)};
|
||||
--mutedbrand: ${mute(Settings.plugins.Glide.Brand, 10)};
|
||||
--mutedaccent: ${mute(Settings.plugins.Glide.Accent, 10)};
|
||||
` : ""}
|
||||
}
|
||||
:root
|
||||
{
|
||||
|
||||
/*VARIABLES*/
|
||||
|
||||
/*editable variables. Feel free to mess around with these to your hearts content, i recommend not editing the logic variables unless you have an understanding of css*/
|
||||
--glowcol: rgba(0, 0, 0, 0);
|
||||
--mentioncol: rgb(0, 0, 0);
|
||||
--mentionhighlightcol: rgb(0, 0, 0);
|
||||
--linkcol: rgb(95, 231, 255);
|
||||
--highlightcol: rgb(95, 231, 255);
|
||||
|
||||
|
||||
|
||||
/*COLOR ASSIGNING (most of these probably effect more than whats commented)*/
|
||||
${Settings.plugins.Glide.colorsEnabled ? `
|
||||
/*accent based*/
|
||||
|
||||
/*buttons*/
|
||||
--button-secondary-background: var(--accent);
|
||||
|
||||
/*also buttons*/
|
||||
--brand-experiment: var(--brand);
|
||||
--brand-experiment-560: var(--brand);
|
||||
--brand-500: var(--brand);
|
||||
|
||||
/*message bar*/
|
||||
--channeltextarea-background: var(--accent);
|
||||
|
||||
/*selected dm background*/
|
||||
--background-modifier-selected: var(--accent);
|
||||
|
||||
/*emoji autofill*/
|
||||
--primary-630: var(--accent);
|
||||
|
||||
/*plugin grid square and nitro shop*/
|
||||
--background-base-lower-alt: var(--accent);
|
||||
|
||||
/*modal background, self explanatory*/
|
||||
--modal-background: var(--accent);
|
||||
|
||||
/*color of the background of mention text*/
|
||||
--mention-background: var(--accent);
|
||||
--input-background: var(--accent);
|
||||
|
||||
/*the side profile thingy*/
|
||||
--profile-body-background-color: var(--accent);
|
||||
|
||||
/*the weird hover thing idk*/
|
||||
--background-modifier-hover: var(--mutedaccent) !important;
|
||||
|
||||
|
||||
/*background based*/
|
||||
|
||||
/*primary color, self explanatory*/
|
||||
--background-primary: var(--bgcol);
|
||||
|
||||
/*dm list*/
|
||||
--background-secondary: var(--bgcol);
|
||||
|
||||
/*outer frame and search background*/
|
||||
--background-tertiary: var(--bgcol);
|
||||
|
||||
|
||||
/*friends header bar*/
|
||||
--bg-overlay-2: var(--bgcol);
|
||||
|
||||
/*user panel*/
|
||||
--bg-overlay-1: var(--bgcol);
|
||||
|
||||
/*call thingy*/
|
||||
--bg-overlay-app-frame: var(--bgcol);
|
||||
|
||||
/*shop*/
|
||||
--background-mentioned-hover: var(--bgcol) !important;
|
||||
--background-mentioned: var(--bgcol) !important;
|
||||
|
||||
|
||||
|
||||
|
||||
/*other*/
|
||||
|
||||
/*mention side line color color*/
|
||||
--info-warning-foreground: var(--mentionhighlightcol);
|
||||
|
||||
/*text color of mention text*/
|
||||
--mention-foreground: white;
|
||||
|
||||
/*Link color*/
|
||||
--text-link: var(--linkcol);
|
||||
--header-primary: var(--text);
|
||||
--header-secondary: var(--text);
|
||||
--font-display: var(--text);
|
||||
--text-default: var(--text);
|
||||
--text-muted: var(--mutedtext);
|
||||
--channels-default: var(--mutedtext);
|
||||
--interactive-normal: var(--text) !important;
|
||||
--white-500: var(--text);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*EXTRA COLORS*/
|
||||
|
||||
[class*="tooltipPrimary__"]
|
||||
{
|
||||
background-color: var(--mutedaccent) !important;
|
||||
}
|
||||
[class*="tooltipPointer_"]
|
||||
{
|
||||
border-top-color: var(--mutedaccent) !important;
|
||||
}
|
||||
/*sorry, forgot to document what these are when i was adding them*/
|
||||
.inspector_c3120f, .scroller_d53d65, .unicodeShortcut_dfa278
|
||||
{
|
||||
background-color: var(--bgcol);
|
||||
}
|
||||
.inner_effbe2
|
||||
{
|
||||
background-color: var(--accent);
|
||||
}
|
||||
/*recolor embeds*/
|
||||
[class^="embedWrap"]
|
||||
{
|
||||
border-color: var(--accent) !important;
|
||||
background: var(--accent);
|
||||
}
|
||||
/*emoji menu recolor*/
|
||||
.contentWrapper_af5dbb, .header_a3bc57
|
||||
{
|
||||
background-color: var(--bgcol);
|
||||
}
|
||||
/*vc background recolor*/
|
||||
.root_dd069c
|
||||
{
|
||||
background-color: var(--bgcol);
|
||||
}
|
||||
|
||||
/*Fix the forum page*/
|
||||
/*Set the bg color*/
|
||||
.container_a6d69a
|
||||
{
|
||||
background-color: var(--bgcol);
|
||||
}
|
||||
/*Recolor the posts to the accent*/
|
||||
.container_d331f1
|
||||
{
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
/*Recolor the background of stickers in the sticker picker that dont take up the full 1:1 ratio*/
|
||||
[id^="sticker-picker-grid"]
|
||||
{
|
||||
background-color: var(--bgcol);
|
||||
}
|
||||
/* profile sidebar*/
|
||||
[class="none_eed6a8 scrollerBase_eed6a8"]
|
||||
{
|
||||
background-color: var(--bgcol) !important;
|
||||
}
|
||||
/*Recolor the emoji, gif, and sticker picker selected button*/
|
||||
.navButtonActive_af5dbb, .stickerCategoryGenericSelected_a7a485, .categoryItemDefaultCategorySelected_dfa278
|
||||
{
|
||||
background-color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/*side profile bar*/
|
||||
[class="none_c49869 scrollerBase_c49869"]
|
||||
{
|
||||
background-color: var(--bgcol) !important;
|
||||
}
|
||||
.userPanelOverlayBackground_a2b6ae, .badgeList_ab525a
|
||||
{
|
||||
background-color: var(--accent) !important;
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
/*uhhhhhhhhhhhhhhh*/
|
||||
.headerText_c47fa9
|
||||
{
|
||||
color: var(--text) !important;
|
||||
}
|
||||
/*message bar placeholder*/
|
||||
.placeholder_a552a6
|
||||
{
|
||||
color: var(--mutedtext) !important
|
||||
}
|
||||
.menu_d90b3d
|
||||
{
|
||||
background: var(--accent) !important;
|
||||
}
|
||||
.messageGroupWrapper_ac90a2, .header_ac90a2
|
||||
{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
${settings.store.pastelStatuses ?
|
||||
`
|
||||
/*Pastel statuses*/
|
||||
rect[fill='#23a55a'], svg[fill='#23a55a'] {
|
||||
fill: #80c968 !important;
|
||||
}
|
||||
rect[fill='#f0b232'], svg[fill='#f0b232'] {
|
||||
fill: #e7ca45 !important;
|
||||
}
|
||||
rect[fill='#f23f43'], svg[fill='#f23f43'] {
|
||||
fill: #e0526c !important;
|
||||
}
|
||||
rect[fill='#80848e'], svg[fill='#80848e'] {
|
||||
fill: #696e88 !important;
|
||||
}
|
||||
rect[fill='#593695'], svg[fill='#593695'] {
|
||||
fill: #ac7de6 important;
|
||||
}
|
||||
` : ""}
|
||||
.name_d8bfb3
|
||||
{
|
||||
color: var(--text) !important;
|
||||
}
|
||||
.unread_d8bfb3
|
||||
{
|
||||
background-color: var(--text) !important;
|
||||
}` : ""}
|
||||
|
||||
/*ROUNDING (rounding)*/
|
||||
|
||||
/*round message bar, some buttons, dm list button, new messages notif bar, channel buttons, emoji menu search bar, context menus, account connections(in that order)*/
|
||||
.scrollableContainer_bdf0de, .button_dd4f85, .interactive_f5eb4b, .newMessagesBar_cf58b5, .link_d8bfb3, .searchBar_c6ee36, .menu_d90b3d, .connectedAccountContainer_ab12c6
|
||||
{
|
||||
border-radius: 25px;
|
||||
}
|
||||
/*round emojis seperately (and spotify activity icons)*/
|
||||
[data-type="emoji"], [class*="Spotify"]
|
||||
{
|
||||
border-radius: 5px;
|
||||
}
|
||||
/*round gifs and stickers (and maybe images idk lmao), and embeds*/
|
||||
[class^="imageWr"], [data-type="sticker"], [class^="embed"]
|
||||
{
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.item_d90b3d
|
||||
{
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*slightly move messages right when hovered*/
|
||||
.cozyMessage_d5deea
|
||||
{
|
||||
left: 0px;
|
||||
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.cozyMessage_d5deea:hover
|
||||
{
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
|
||||
/*CONTENT (Typically changing values or hiding elements)*/
|
||||
|
||||
/*remove status text in user thing*/
|
||||
.panelSubtextContainer_b2ca13
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
/*Hide most of the ugly useless scrollbars*/
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
/*Hide user profile button, the dm favourite, dm close, support, gift buttons, the now playing column, and the channel + favourite icons*/
|
||||
[aria-label="Hide User Profile"], .favoriteIcon_c91bad, .closeButton_c91bad, [href="https://support.discord.com"], .nowPlayingColumn_c2739c, button[aria-label="Send a gift"], .icon_d8bfb3, .iconContainer_d8bfb3
|
||||
{
|
||||
display :none;
|
||||
}
|
||||
|
||||
/*yeet the shitty nitro and family link tabs that no one likes*/
|
||||
.channel_c91bad[aria-posinset="2"],
|
||||
.familyCenterLinkButton_f0963d
|
||||
{
|
||||
display: none;
|
||||
|
||||
}
|
||||
/*Remove the buttons at the bottom of the user pop out (seriously, who wanted this?)*/
|
||||
.addFriendSection__413d3
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*No more useless spotify activity header*/
|
||||
.headerContainer_c1d9fd
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
/*hide sidebar connections*/
|
||||
.profilePanelConnections_b433b4
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
/*pad the message bar right slightly. Not sure what caused the buttons to flow out of it, might be something in the theme :shrug:*/
|
||||
.inner_bdf0de
|
||||
{
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/*Yeet hypesquad badges (who cares)*/
|
||||
[aria-label*="HypeSquad"]
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*Hide icon on file uploading status*/
|
||||
.icon_f46c86
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*hide the play button while a soundmoji is playing*/
|
||||
.playing_bf9443 [viewBox="0 0 24 24"]
|
||||
{
|
||||
display:none;
|
||||
}
|
||||
/*hide the public servers button on member list*/
|
||||
[aria-label="Explore Discoverable Servers"]
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
/*fix context menu being not symmetrical*/
|
||||
.scroller_d90b3d
|
||||
{
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
/*Hide the icon that displays what platform the user is listening with on spotify status*/
|
||||
.platformIcon_c1d9fd
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
/*hide the album name on spotify statuses (who cares)*/
|
||||
[class="state_c1d9fd ellipsis_c1d9fd textRow_c1d9fd"]
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
/*space the connections a bit better*/
|
||||
.userInfoSection_a24910
|
||||
{
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
/*Space channels*/
|
||||
.containerDefault_f6f816
|
||||
{
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/*round banners in profile popout*/
|
||||
.banner_d5fdb1:not(.panelBanner_c3e427)
|
||||
{
|
||||
border-radius: 20px;
|
||||
}
|
||||
/*round the user popout*/
|
||||
.userPopoutOuter_c69a7b
|
||||
{
|
||||
border-radius: 25px;
|
||||
}
|
||||
/*round the inner profile popout*/
|
||||
[class="userPopoutInner_c69a7b userProfileInner_c69a7b userProfileInnerThemedWithBanner_c69a7b"]::before
|
||||
{
|
||||
border-radius: 20px;
|
||||
}
|
||||
.footer_be6801
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*STYLING (Modification of content to fit the theme)*/
|
||||
|
||||
/*Round and scale down the users banner*/
|
||||
.panelBanner_c3e427
|
||||
{
|
||||
border-radius: 20px;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
/*add a soft glow to message bar contents, user panel, dms, channel names (in that order)*/
|
||||
.inner_bdf0de .layout_ec8679, .name_d8bfb3
|
||||
{
|
||||
filter: drop-shadow(0px 0px 3px var(--glowcol));
|
||||
}
|
||||
[type="button"]
|
||||
{
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
[type="button"]:hover
|
||||
{
|
||||
filter: drop-shadow(0px 0px 3px var(--glowcol));
|
||||
}
|
||||
|
||||
/*Change the font*/
|
||||
:root
|
||||
{
|
||||
--font-code: "Fira Code";
|
||||
}
|
||||
|
||||
/*Round all status symbols. basically does what that one plugin does but easier (disabled because of a bug)
|
||||
.pointerEvents_c51b4e
|
||||
{
|
||||
mask: url(#svg-mask-status-online);
|
||||
}
|
||||
*/
|
||||
|
||||
/*pfp uploader crosshair*/
|
||||
.overlayAvatar_ba5b9e
|
||||
{
|
||||
background-image: url(https://raw.githubusercontent.com/Equicord/Equicord/main/src/equicordplugins/glide/crosshair.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 50%;
|
||||
background-position-y: 50%;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
/*change highlighted text color*/
|
||||
::selection
|
||||
{
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
text-shadow: 0px 0px 2px var(--highlightcol);
|
||||
}
|
||||
/*hide the line between connections and note*/
|
||||
[class="connectedAccounts_ab12c6 userInfoSection_a24910"]
|
||||
{
|
||||
border-top: transparent !important;
|
||||
}
|
||||
.container_cebd1c:not(.checked_cebd1c)
|
||||
{
|
||||
background-color: var(--mutedbrand) !important;
|
||||
}
|
||||
.checked_cebd1c
|
||||
{
|
||||
background-color: var(--brand) !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
export default definePlugin({
|
||||
name: "Glide",
|
||||
description: "A sleek, rounded theme for discord.",
|
||||
authors: [Devs.Samwich],
|
||||
settings,
|
||||
start() {
|
||||
injectCSS();
|
||||
},
|
||||
stop() {
|
||||
const injectedStyle = document.getElementById("GlideStyleInjection");
|
||||
if (injectedStyle) {
|
||||
injectedStyle.remove();
|
||||
}
|
||||
},
|
||||
startAt: StartAt.DOMContentLoaded,
|
||||
// preview thing, kinda low effort but eh
|
||||
settingsAboutComponent: () => <img src="https://cdn.nest.rip/uploads/97fdf6c1-764c-4445-9422-d3d52af7434c.webp" style={{ width: "568px", borderRadius: "30px" }} alt=""></img>
|
||||
});
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { ThemePreset } from ".";
|
||||
|
||||
export const themes: ThemePreset[] = [
|
||||
{
|
||||
bgcol: "000000",
|
||||
accentcol: "020202",
|
||||
textcol: "c0d5e4",
|
||||
brand: "070707",
|
||||
name: "Amoled"
|
||||
},
|
||||
{
|
||||
bgcol: "0e2936",
|
||||
accentcol: "0c2430",
|
||||
textcol: "99b0bd",
|
||||
brand: "124057",
|
||||
name: "Solar"
|
||||
},
|
||||
{
|
||||
bgcol: "0e0e36",
|
||||
accentcol: "0e0c30",
|
||||
textcol: "bdbfd8",
|
||||
brand: "171750",
|
||||
name: "Indigo"
|
||||
},
|
||||
{
|
||||
bgcol: "8a2b5f",
|
||||
accentcol: "812658",
|
||||
textcol: "ffedfb",
|
||||
brand: "b23982",
|
||||
name: "Grapefruit"
|
||||
},
|
||||
{
|
||||
bgcol: "410b05",
|
||||
accentcol: "360803",
|
||||
textcol: "f8e6e6",
|
||||
brand: "681109",
|
||||
name: "Crimson"
|
||||
},
|
||||
{
|
||||
bgcol: "184e66",
|
||||
accentcol: "215a72",
|
||||
textcol: "d0efff",
|
||||
brand: "2d718f",
|
||||
name: "Azure"
|
||||
},
|
||||
{
|
||||
bgcol: "1d091a",
|
||||
accentcol: "240d21",
|
||||
textcol: "f3e1f0",
|
||||
brand: "411837",
|
||||
name: "Blackberry"
|
||||
},
|
||||
{
|
||||
bgcol: "1f073b",
|
||||
accentcol: "250b44",
|
||||
textcol: "dfd7e9",
|
||||
brand: "340d63",
|
||||
name: "Porple"
|
||||
},
|
||||
{
|
||||
bgcol: "0a0a0a",
|
||||
accentcol: "0f0f0f",
|
||||
textcol: "c9c9c9",
|
||||
brand: "0a0a0a",
|
||||
name: "Charcoal"
|
||||
},
|
||||
{
|
||||
bgcol: "00345b",
|
||||
accentcol: "002f53",
|
||||
textcol: "e7d8df",
|
||||
brand: "944068",
|
||||
name: "Lofi Pop"
|
||||
},
|
||||
{
|
||||
bgcol: "471b05",
|
||||
accentcol: "4e2009",
|
||||
textcol: "ffffff",
|
||||
brand: "903e14",
|
||||
name: "Oaken"
|
||||
},
|
||||
{
|
||||
bgcol: "040b2b",
|
||||
accentcol: "000626",
|
||||
textcol: "ddd0d0",
|
||||
brand: "040b2b",
|
||||
name: "Deep Blue"
|
||||
},
|
||||
{
|
||||
bgcol: "32464a",
|
||||
accentcol: "2d4145",
|
||||
textcol: "ddd0d0",
|
||||
brand: "32464a",
|
||||
name: "Steel Blue"
|
||||
},
|
||||
{
|
||||
bgcol: "31031f",
|
||||
accentcol: "2c001a",
|
||||
textcol: "ddd0d0",
|
||||
brand: "31031f",
|
||||
name: "Velvet"
|
||||
},
|
||||
{
|
||||
bgcol: "22111f",
|
||||
accentcol: "1d0c1a",
|
||||
textcol: "ddd0d0",
|
||||
brand: "22111f",
|
||||
name: "Really Oddly Depressed Purple"
|
||||
},
|
||||
{
|
||||
bgcol: "2b3959",
|
||||
accentcol: "263454",
|
||||
textcol: "ddd0d0",
|
||||
brand: "2b3959",
|
||||
name: "Light Sky"
|
||||
},
|
||||
{
|
||||
bgcol: "06403d",
|
||||
accentcol: "013b38",
|
||||
textcol: "ddd0d0",
|
||||
brand: "06403d",
|
||||
name: "Tealish"
|
||||
},
|
||||
{
|
||||
bgcol: "273b0b",
|
||||
accentcol: "223606",
|
||||
textcol: "ddd0d0",
|
||||
brand: "273b0b",
|
||||
name: "Leaf (or a tree perhaps)"
|
||||
},
|
||||
{
|
||||
bgcol: "1a2022",
|
||||
accentcol: "151b1d",
|
||||
textcol: "ddd0d0",
|
||||
brand: "1a2022",
|
||||
name: "Steel"
|
||||
},
|
||||
{
|
||||
bgcol: "1e1e2e",
|
||||
accentcol: "181825",
|
||||
textcol: "cdd6f4",
|
||||
brand: "45475a",
|
||||
name: "Catppuccin Mocha"
|
||||
},
|
||||
{
|
||||
bgcol: "303446",
|
||||
accentcol: "292c3c",
|
||||
textcol: "c6d0f5",
|
||||
brand: "414559",
|
||||
name: "Catppuccin Frappé"
|
||||
},
|
||||
{
|
||||
bgcol: "6b422e",
|
||||
accentcol: "754b36",
|
||||
textcol: "ead9c9",
|
||||
brand: "8b5032",
|
||||
name: "Relax"
|
||||
}
|
||||
];
|
||||
Loading…
Add table
Reference in a new issue