Variables (Creator's Aniversary Update) - Ascellayn/Flashcord GitHub Wiki

You shouldn't be seeing this yet.

TLDR of what this page is:

Flashcord's next major update is bringing in a ridiculous amount of under the hood changes, most notably a complete change in variable names (this was voted by the community).

📜 Variables

In order to modify any Flashcord Variable, you must add this at the end of your QuickCSS.

Flashcord variables will always have their default value next to their respective name in the code blocks.

🎯 Primary Variables

These variables drastically change the look and feel of Flashcord when modified. Setting these variables to an invalid value or 0 may help performance drastically on low-end devices.

👓 Blur Control

These variables controls if you're blind or not. Okay maybe not unfortunately, Flashcord isn't a cure for vision problems (unfortunately). An example of where blur is used is when you are hovering on a focused image. Flashcord's blurs are a major performance issue on really low-end systems, disable them by setting each variable to 0.

:root {
/* Flashcord Blur Control */
    --Flashcord-Blur_Heavy: 16px;
    --Flashcord-Blur_Medium: 8px;
    --Flashcord-Blur_Light: 4px;
}

🚦Animation Control

As the name implies, these variables control the speed of animations in Flashcord, please note that they're different from transitions, Flashcord Animations are everything that cannot be influenced by the user's actions. An example of those animations are the Messages Sliding from the right.

:root {
    /* Flashcord Animation Control */
    --Flashcord-Animation_XFast: 62.5ms;
    --Flashcord-Animation_Fast: 125ms;
    --Flashcord-Animation_Normal: 250ms;
    --Flashcord-Animation_Slow: 500ms;
    --Flashcord-Animation_XSlow: 1s;
    --Flashcord-Animation_XTSlow: 2s;
    --Flashcord-Animation_XTXSlow: 4s;
}

🚥 Transition Control

This is very similar to animations, except the elements affected are those who get modified if the user is doing something specific. An example of a transition is the user hovering the channel list, causing it to slide to reveal itself.

:root {
    /* Flashcord Transition Control */
    --Flashcord-Transition_XFast: 62.5ms;
    --Flashcord-Transition_Fast: 125ms;
    --Flashcord-Transition_Normal: 250ms;
    --Flashcord-Transition_Slow: 500ms;
    --Flashcord-Transition_XSlow: 1s;
}

💥 Miscellaneous Variables

Theses are random variables that still drastically changes Flashcord's looks:

:root {
    --Flashcord-UI_Border-Radius: 25px; /* Global variable that changes elements to be rounded */
}

🎨 Global Variables

These variables control colors of certain elements modified by Flashcord. More information will be available later.

:root {
    /* Theme-Dependent Color Variables */
    --Flashcord-Accent_Light: rgba(0,155,255,0.5);
    --Flashcord-Accent_Dark: rgba(255,55,0,0.5);
    --Flashcord-Background_Light: rgba(255,255,255,0.9);
    --Flashcord-Background_Dark: rgba(0,0,0,0.9);
    --Flashcord-Solid-Background_Light: rgb(255,255,255);
    --Flashcord-Solid-Background_Dark: rgb(0,0,0,);

    --Flashcord-Floating_Light: rgba(255,255,255,0.5);
    --Flashcord-Floating_Dark: rgba(0,0,0,0.5);

    --Flashcord-Heavy-Floating_Light: rgba(255,255,255,0.8);
    --Flashcord-Heavy-Floating_Dark: rgba(0,0,0,0.8);
}

🌅 Theme Specific Variables

These variables are responsible for modifying specific elements of the advanced Flashcord themes such as Custom Background Mode, Iridescent Light/Dark Mode (also called Bloat Mode) and Transparent Mode.

🖼️ Custom Background Mode

:root {

}

🌈 Iridescent Mode (ThemeHooker) [⚠️ HIGH-END SYSTEMS ONLY]

:root {
    --Flashcord-Background-Animation_Iridescent-Light: SNDL-Background_MvX; /* Controls which animation is played for the Background Image */
    --Flashcord-Background-Animation_Iridescent-Dark: SNDL-Background_MvX;
    --Flashcord-Rainbow-Animation_Iridescent-Light: Flashcord-Iridescent_Light; /* Controls which animation is played for the Rainbow Image Effect */
    --Flashcord-Rainbow-Animation_Iridescent-Dark: Flashcord-Iridescent_Dark;
    --Flashcord-Filter_Iridescent-Light: blur(4px) brightness(1); /* Controls how blurred and how bright the Background Image is */
    --Flashcord-Filter_Iridescent-Dark: blur(4px) brightness(0.5);
    --Flashcord-Image-Size_Iridescent-Light: 100vw; /* Controls the size of the background */
    --Flashcord-Image-Size_Iridescent-Dark: 100vw;
    --Flashcord-Image_Iridescent-Light: url("https://sirio-network.com/sbin/PSWave-Iridescent_Light.png"); /* Change the URL to change the Background Image */
    --Flashcord-Image_Iridescent-Dark: url("https://sirio-network.com/sbin/PSWave-Iridescent_Dark.png");
    --Flashcord-Image-Control_Iridescent-Light: url("https://sirio-network.com/flashcord/ressources/backgrounds/BasicGrid-White_Fast.gif"); /* Background Image for the "Control Panel" (Settings) */
    --Flashcord-Image-Control_Iridescent-Dark: url("https://sirio-network.com/flashcord/ressources/backgrounds/BasicGrid-Dark_Fast.gif");
}

👻 Transparent Mode (ThemeHooker)

TBD

:root {

}

🍉 Secondary Variables

TBD

:root {
    --Flashcord-UI_Brightness: 1; /* Changes "backdrop-filter" elements to either make the background way brighter or darker. This changes depending on the theme. */
}