v2.2.6

Author: LuckFire

CHANGELOG.md

@@ -1,8 +1,17 @@
+# v2.2.6
+Some minor adjustments / changes.
+- Repo has been completely redone.
+    - New README & assets.
+    - File structure has been redone.
+    - Now using `@forward` and `@use` instead of `@import`.
+- BetterDiscord & Web versions now use an import.
+- Some variable changes, you will probably need to reinstall.
+
 # v2.2.5
 Some enhancement updates by making the code more simpler. Removed a decent amount of lines doing this, now lets hope that nothing breaks..
 
 # v2.2.4
-For better maintaibility as well as more support, I have done an even better SCSS recode!!! YAY!!! fuck. Anyways, some other changes are:
+Some minor additions and adjustments / changes.
 - Added support for BetterDiscord, Vizlaity and Web.
 - Cleaner sorted code.
 - A bit more cusomtization, as well as made it easier to disable transitions.

README.md

@@ -1,49 +1,43 @@
 ![Banner](./assets/banner.png)
-<p align="center">
-  <a href="#"><img align="center" alt="GitHub repo size" src="https://img.shields.io/github/repo-size/Discord-Theme-Addons/gradientbuttons-v2?color=D577F0&style=for-the-badge&logo=github">
-  <a href="#"><img align ="center" alt="Version" src="https://img.shields.io/static/v1?label=version&message=2.2.5&color=C279F0&style=for-the-badge&logo=data%3Aimage/png%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHpFAACAgwAA/FcAAIDoAAB5FgAA8QEAADtfAAAcheDStWoAAAGwSURBVHja7JcxSBxBFIa/Pa%2BQECuFFClNsLWRgGJSpEgn1oJosDIcFpbWKcTC47TKHbEVzpRRsLVOtEkKG2MTxO7QECUH%2BW3mcG7ZvX1j9nLNPVjY2Xn7f/Nm5g1vIkkYbBTYB0aAtB8ioAHMAt%2ByBIvY7AUwZvAbBl5ZwAUj%2BDd2%2B2VxsoIVAFae4NytD%2B6Dew6%2BCNC8tDgVEwYyAQx4%2BSjgZQB4yh2dBe8o/Qt8BZr32S75zyd1zw59Vnyqz7u4rD/az7f2iJG02YVoq3FOEhhJ5RyhtSRGGjivyKtp%2Bp3A/xp5rZN2FhhJlQdAP2bpWsCh016zaFrBVnjVqhe5Yu8ZMAc8ilUQEXAM1F27Aqyk5OkOsOTeZ4DJBK1bYA/4jqSnkm4yIillRO5HumiYmedI%2BmBcuzS4D10watWRdBawcZY9yLobQKs97/ldS/osqeHaB5JOvf6fOKcQKyVslvj0rrnvG5Iu3PsTr/%2Bq6Bb8ccBhvw2Muw0nd3N4F/N5DXxxF4Eh4I3bbC1rRpKOgOn/XICcFIByDyqfrVYevwfeAoOBt4YQi4A/wC6wejcAIWlEHq3bJrMAAAAASUVORK5CYII%3D">
-  <a href="https://github.com/Discord-Theme-Addons/gradientbuttons-v2/stargazers"><img align="center" alt="Stars" src="https://img.shields.io/github/stars/Discord-Theme-Addons/gradientbuttons-v2?color=8980F0&style=for-the-badge&logo=data%3Aimage/png%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHpFAACAgwAA/FcAAIDoAAB5FgAA8QEAADtfAAAcheDStWoAAAHISURBVHjavJS/a1NRGIafm7RaaGJ1KR0MQUVNBiOhtKLg6GKXItRJVwc3M%2BpW%2Bg/4Fwid3LRLBydBHARBiqSiqcY2UOgipopBQnxdzpXr5dyb5iQnHxw49/z4nvOe7543kIRjPAFywIrL5sARPAF0TT8P/Bw0QcZR7cNIf3VcirNG4ZT5/mOuvONb8YMINMzxyLfiLNAGpmPjPVPrji/F9y3Q8EA1n4oPgNmEuUNgxofitRQowAng8bCKTwFF4CxQBq4BN4%2BY8wXwCvgAfAb2gG828C3gDHDOgIpAIaGWLvELaAG7QBNoAF8DSV8MeJxxkAEWgfoYoU1gPqzxceANcNkztAEsAO3wr/5tBt55hH4C5o0B/fecusBVT/CPpqQ//o1IircJSW81utiWlItzkt5xAGwBl4ZUugNUbB6eZplFU5djjtAeUAXeu3h1CzjtCG4DJ128eq6PN/eLPHDeBVwd4prD3FUXcGkEz%2BiCC/jiCMAlH%2BAN4JmrYpuBhG0/wRCeSqpE1pUkrSes/S5p0pY/CVqwJNmUdD3loFckPbfsKw8CXo5sfC1pKQUYbzckvYzsvzMI%2BJ7x2LsDAOPttqS6pJpt/u8AK65O%2Bt9ReEMAAAAASUVORK5CYII%3D"></a>
-</p>
 
-# GradientButtons v2
+# GradientButtons (v2)
 Add some spice to your buttons.. with gradients!
 
 ![Preview](./screenshots/server-menu.gif)
 ![Preview](./screenshots/statuspicker-menu.gif)
 ![Preview](./screenshots/message-menu.gif)
 
-# Installation
-For Powercord or Vizality installation, go to **Themes -> Open CMD / Powershell / Terminal / Gitbash**, and enter the following:
+## Installation
+For **[Powercord](http://powercord.dev/)** or **[Vizality](https://vizality.com/)** installation, **locate and head over to your themes folder, open a terminal of choice, and enter the following:**
 ```
 git clone https://github.com/Discord-Theme-Addons/gradientbuttons-v2
 ```
 
-**For BetterDiscord:**
-- [Direct Download](https://betterdiscord.net/ghdl?id=3486)
-- [View Source](https://raw.githack.com/Discord-Theme-Addons/gradientbuttons-v2/main/src/support/GradientButtons.theme.css)
+**For [BetterDiscord](http://betterdiscord.app/):**
+- [Direct Download](https://github.com/Discord-Theme-Addons/gradientbuttons-v2/releases/download/2.2.6/GradientButtons.theme.css)
+- [View Source](https://discord-theme-addons.github.io/gradientbuttons-v2/src/support/compiled.css)
 
-**For Browser / Web:**
+**For [Stylus](https://github.com/openstyles/stylus):**
 1. Install the Stylus extension for [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) / [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) / [Opera](https://github.com/openstyles/stylus/wiki/Opera,-Outdated-Stylus).
-2. After installing, head over to [this link](https://raw.githack.com/Discord-Theme-Addons/gradientbuttons-v2/main/src/support/GradientButtons.user.css).
+2. After installing, head over to [this link](https://discord-theme-addons.github.io/gradientbuttons-v2/src/support/GradientButtons.user.css).
 3. Press the "Install Style" button.
 
-# Disabling Transitions
-If you dislike the transitions on hover, you have the ability to disable them. On Powercord or Vizality, open `./src/_root.scss`. On BetterDiscord or Web, open the file and locate where `:root` is. Below where it says `/* Transitions */`, paste the following:
+## Disabling Transitions
+If you dislike the transitions on hover, you can simply just disable them using the variables. Head over to the root and paste the following under `/* Transitions */`.
 ```css
---font-normal: 500;
---font-hover: var(--font-normal);
---font-size-hover: 14px;
---hover-transition: none;
---transform-normal: none;
---hover-transform: var(--transform-normal);
---setting-hover-transform: var(--transform-normal);
---button-hover-transform: var(--transform-normal);
+:root {
+  /* Transitions */
+  --button-transition: none;
+  --font-default: 500;
+  --font-hover: var(--font-default);
+  --fontsize-hover: 14px;
+  --transform-normal: scale(1);
+  --transform-hover: var(--transform-normal);
+  --button-transform-hover: var(--transform-normal);
+}
 ```
 
-Here is a basic GIF tutorial on how to do that if you don't understand:
-![Tutorial](./screenshots/transition-tutorial.gif)
-
 # Credits
 A big thank you to everyone who helped with this!
-- **[Hoofer](https://github.com/HooferDevelops)** for the original code, aka Gradient Buttons v1. He never published the code, so I decided to and make it my own (with permission ofc). 
-- **[botato](https://github.com/bototo2)** for teaching me that I could use #id instead of [id=""].
+- **[Hoofer](https://github.com/HooferDevelops)** for the original code, aka Gradient Buttons v1. He didn't publish the code, so I asked if I could with extra stuff.
+- **[botato](https://github.com/bototo2)** for letting me know that I can use #id instead of [id=""].

assets/banner.png

@@ -1 +1 @@
-@import "./src/base";
+@use 'src';

assets/icon.png

@@ -1,7 +1,7 @@
 {
     "name": "Gradient Button V2",
     "description": "Add some spice to your buttons.. with gradients!",
-    "version": "2.2.5",
+    "version": "2.2.6",
     "author": "LuckFire#4800",
     "theme": "index.scss",
     "consent": "false",

index.scss

@@ -1,7 +1,7 @@
 {
     "name": "Gradient Button V2",
     "description": "Add some spice to your buttons.. with gradients!",
-    "version": "2.2.5",
+    "version": "2.2.6",
     "author": "LuckFire#4800",
     "theme": "index.scss",
     "consent": "false",

manifest.json

@@ -0,0 +1,2 @@
+@forward 'root';
+@forward 'main';

powercord_manifest.json

@@ -1,21 +1,18 @@
 :root {
     /* Gradients */
-    --default-gradient: 315deg, #495DA4 0%, #7289DA 74%;
-    --special-gradient: 315deg, #8980F0 0%, #D577F0 74%;
-    --red-gradient: 315deg, #AA3738 0%, #F04747 74%;
-    --yellow-gradient: 315deg, #C2831B 0%, #FFB740 74%;
-    --green-gradient: 315deg, #264D41 0%, #43B581 74%;
-    --grey-gradient: 315deg, #373A45 0%, #747F8D 74%;
-    --white-gradient: 315deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 74%;
+    --gradient-special: 140deg, #8980F0 0%, #D577F0 100%;
+    --gradient-blurple: 140deg, #5865f2 0%, #2a328a 100%;
+    --gradient-green: 140deg, #3BA55D 0%, #15662f 100%;
+    --gradient-yellow: 140deg, #FAA81A 0%, #be8013 100%;
+    --gradient-red: 140deg, #ed4245 0%, #912b2d 100%;
+    --gradient-grey: 140deg, #747F8D 0%, #3c424b 100%;
 
     /* Transitions */
-    --font-normal: 500;
-    --font-hover: bold; // Set to var(--font-normal)
-    --font-size-hover: 15px; // Set to 14px
-    --hover-transition: 0.1s linear; // Set to none
-    --transform-normal: scale(1); 
-    --hover-transform: scale(1.15); // Set to var(--transform-normal)
-    --setting-hover-transform: scale(1.025); // Set to var(--transform-normal)
-    --button-hover-transform: scale(1.03); // Set to var(--transform-normal)
-}
-
+    --button-transition: 0.1s linear;
+    --font-default: 500;
+    --font-hover: bold;
+    --fontsize-hover: 15px;
+    --transform-normal: scale(1);
+    --transform-hover: scale(1.15);
+    --button-transform-hover: scale(1.04);
+}