├── .vscode └── settings.json ├── LICENSE ├── README.md ├── assets └── banner.png ├── clients ├── bd │ └── gradient-buttons.theme.css └── stylus │ └── gradient-buttons.user.css ├── manifest.json ├── powercord_manifest.json └── src ├── base └── _variables.scss ├── components ├── _buttons.scss ├── _context.scss └── _message-actions.scss ├── source.css └── source.scss /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveSassCompile.settings.formats":[ 3 | { 4 | "format": "expanded", 5 | "extensionName": ".css", 6 | "savePath": null 7 | } 8 | ], 9 | 10 | "liveSassCompile.settings.generateMap": false, 11 | "liveSassCompile.settings.autoprefix": [ 12 | "defaults" 13 | ] 14 | } 15 | 16 | // expanded 17 | // compressed 18 | // nested -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 LuckFire 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MOVED 2 | This addon has been moved to a snippets repository. You can find it located [here](https://github.com/discord-extensions/snippets/tree/main/gradient-buttons). 3 | 4 | 5 | 6 | # Downloads 7 | ### **[Powercord](https://powercord.dev/) & [Vizality](https://vizality.com/)** 8 | Head over to your **Themes folder -> open your terminal of choice -> copy-paste the following, then press enter**: 9 | ``` 10 | git clone https://github.com/discord-extensions/gradient-buttons 11 | ``` 12 | 13 | ### **[BetterDiscord](https://betterdiscord.app/)** 14 | - [Direct Download](https://github.com/discord-extensions/gradient-buttons/releases/download/bd-download/gradient-buttons.theme.css) 15 | - [Source](https://discord-extensions.github.io/gradient-buttons/src/source.css) 16 | 17 | ### **Stylus** 18 | 1. Install the browser extension for your respective browser. 19 | - [Chrome Webstore](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) 20 | - [Firefox Addons](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) 21 | 2. Once you have the browser extension, head over to [this link](https://github.com/discord-extensions/gradient-buttons/raw/main/clients/bd/gradient-buttons.user.css). It will open a new window to the page to install the style. 22 | 3. Press the "Install Style" button. 23 | 24 | # Disabling Transitions 25 | 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 */`. 26 | ```css 27 | :root { 28 | /* Transitions */ 29 | --button-transition: none; 30 | --font-default: 500; 31 | --font-hover: var(--font-default); 32 | --fontsize-hover: 14px; 33 | --transform-normal: scale(1); 34 | --transform-hover: var(--transform-normal); 35 | --button-transform-hover: var(--transform-normal); 36 | } 37 | ``` 38 | 39 | # Contributors 40 | ||| 41 | |:-:|:-:| 42 | |[Hoofer](https://github.com/HooferDevelops)|[botato](https://github.com/bototo2)| 43 | 44 | # Support Server 45 | If you are having any issues with the theme, feel free to join the [support server](https://discord.gg/vYdXbEzqDs), or make an issue on this repository. -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/gradient-buttonsv2/4837caa3f50d87c47eac0a9522fc11cdffc7e4b7/assets/banner.png -------------------------------------------------------------------------------- /clients/bd/gradient-buttons.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Gradient Buttons 3 | * @description Spice up your Discord buttons with gradients! 4 | * @version 2.3.1 5 | * @author LuckFire 6 | * 7 | * @invite vYdXbEzqDs 8 | * @website github.com/discord-extensions 9 | * @source github.com/discord-extensions/gradient-buttons 10 | **/ 11 | 12 | @import url('https://discord-extensions.github.io/gradient-buttons/src/source.css'); 13 | 14 | :root { 15 | /* Gradients */ 16 | --gradient-special: 140deg, hsl(245, calc(var(--saturaton-factor, 1)*79%), 72%) 0%, hsl(287, calc(var(--saturaton-factor, 1)*80%), 70%) 100%; 17 | --gradient-blurple: 140deg, hsl(235, calc(var(--saturation-factor, 1)*85%), 72%) 0%, hsl(235, calc(var(--saturation-factor, 1)*85%), 60%) 100%; 18 | --gradient-green: 140deg, hsl(139, calc(var(--saturaton-factor, 1)*47%), 44%) 0%, hsl(139, calc(var(--saturaton-factor, 1)*66%), 24%) 100%; 19 | --gradient-yellow: 140deg, hsl(38, calc(var(--saturaton-factor, 1)*96%), 54%) 0%, hsl(38, calc(var(--saturaton-factor, 1)*82%), 41%) 100%; 20 | --gradient-red: 140deg, hsl(359, calc(var(--saturaton-factor, 1)*83%), 59%) 0%, hsl(359, calc(var(--saturaton-factor, 1)*54%), 37%) 100%; 21 | --gradient-grey: 140deg, hsl(214, calc(var(--saturaton-factor, 1)*10%), 50%) 0%, hsl(216, calc(var(--saturaton-factor, 1)*11%), 26%) 100%; 22 | 23 | /* Transitions */ 24 | --button-transition: 0.1s linear; 25 | --font-default: 500; 26 | --font-hover: 525; 27 | --fontsize-hover: 15px; 28 | --transform-normal: scale(1); 29 | --transform-hover: scale(1.15); 30 | --button-transform-hover: scale(1.04); 31 | } -------------------------------------------------------------------------------- /clients/stylus/gradient-buttons.user.css: -------------------------------------------------------------------------------- 1 | @-moz-document domain("discord.com") { 2 | /* ==UserStyle== 3 | @name Gradient Buttons 4 | @description Spice up your Discord buttons with gradients! 5 | @author LuckFire 6 | @namespace github.com/discord-extensions/gradient-buttons 7 | @version 2.3.1 8 | ==/UserStyle== */ 9 | 10 | @import url('https://discord-extensions.github.io/gradient-buttons/src/source.css'); 11 | 12 | :root { 13 | /* Gradients */ 14 | --gradient-special: 140deg, hsl(245, calc(var(--saturaton-factor, 1)*79%), 72%) 0%, hsl(287, calc(var(--saturaton-factor, 1)*80%), 70%) 100%; 15 | --gradient-blurple: 140deg, hsl(235, calc(var(--saturation-factor, 1)*85%), 72%) 0%, hsl(235, calc(var(--saturation-factor, 1)*85%), 60%) 100%; 16 | --gradient-green: 140deg, hsl(139, calc(var(--saturaton-factor, 1)*47%), 44%) 0%, hsl(139, calc(var(--saturaton-factor, 1)*66%), 24%) 100%; 17 | --gradient-yellow: 140deg, hsl(38, calc(var(--saturaton-factor, 1)*96%), 54%) 0%, hsl(38, calc(var(--saturaton-factor, 1)*82%), 41%) 100%; 18 | --gradient-red: 140deg, hsl(359, calc(var(--saturaton-factor, 1)*83%), 59%) 0%, hsl(359, calc(var(--saturaton-factor, 1)*54%), 37%) 100%; 19 | --gradient-grey: 140deg, hsl(214, calc(var(--saturaton-factor, 1)*10%), 50%) 0%, hsl(216, calc(var(--saturaton-factor, 1)*11%), 26%) 100%; 20 | 21 | /* Transitions */ 22 | --button-transition: 0.1s linear; 23 | --font-default: 500; 24 | --font-hover: 525; 25 | --fontsize-hover: 15px; 26 | --transform-normal: scale(1); 27 | --transform-hover: scale(1.15); 28 | --button-transform-hover: scale(1.04); 29 | } 30 | } -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Gradient Buttons", 3 | "description": "Spice up your Discord buttons with gradients!", 4 | "version": "2.3.1", 5 | "author": "LuckFire", 6 | "theme": "./src/source.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Gradient Buttons", 3 | "description": "Spice up your Discord buttons with gradients!", 4 | "version": "2.3.1", 5 | "author": "LuckFire", 6 | "theme": "./src/source.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /src/base/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Gradients */ 3 | --gradient-special: 140deg, hsl(245, calc(var(--saturaton-factor, 1)*79%), 72%) 0%, hsl(287, calc(var(--saturaton-factor, 1)*80%), 70%) 100%; 4 | --gradient-blurple: 140deg, hsl(235, calc(var(--saturation-factor, 1)*85%), 72%) 0%, hsl(235, calc(var(--saturation-factor, 1)*85%), 60%) 100%; 5 | --gradient-green: 140deg, hsl(139, calc(var(--saturaton-factor, 1)*47%), 44%) 0%, hsl(139, calc(var(--saturaton-factor, 1)*66%), 24%) 100%; 6 | --gradient-yellow: 140deg, hsl(38, calc(var(--saturaton-factor, 1)*96%), 54%) 0%, hsl(38, calc(var(--saturaton-factor, 1)*82%), 41%) 100%; 7 | --gradient-red: 140deg, hsl(359, calc(var(--saturaton-factor, 1)*83%), 59%) 0%, hsl(359, calc(var(--saturaton-factor, 1)*54%), 37%) 100%; 8 | --gradient-grey: 140deg, hsl(214, calc(var(--saturaton-factor, 1)*10%), 50%) 0%, hsl(216, calc(var(--saturaton-factor, 1)*11%), 26%) 100%; 9 | 10 | /* Transitions */ 11 | --button-transition: 0.1s linear; 12 | --font-default: 500; 13 | --font-hover: 525; 14 | --fontsize-hover: 15px; 15 | --transform-normal: scale(1); 16 | --transform-hover: scale(1.15); 17 | --button-transform-hover: scale(1.04); 18 | } -------------------------------------------------------------------------------- /src/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .lookFilled-yCfaCM { 2 | transform: var(--transform-normal); 3 | transition: var(--button-transition); 4 | background: var(--gradient); 5 | &:hover { 6 | transform: var(--button-transform-hover); 7 | } 8 | &[disabled] { 9 | transform: none; 10 | } 11 | 12 | &.colorBrand-I6CyqQ { 13 | --gradient: linear-gradient(var(--gradient-blurple)); 14 | } 15 | &.colorGreen-3y-Z79, &.button-1EGGcP.buttonActive-Uc1jHx { 16 | --gradient: linear-gradient(var(--gradient-green)); 17 | } 18 | &.colorYellow-Pgtmch { 19 | --gradient: linear-gradient(var(--gradient-yellow)); 20 | } 21 | &.colorRed-rQXKgM { 22 | --gradient: linear-gradient(var(--gradient-red)); 23 | } 24 | &.colorPrimary-2AuQVo, &.colorGrey-2iAG-B, &.buttonColor-3bP3fX { 25 | --gradient: linear-gradient(var(--gradient-grey)); 26 | } 27 | } -------------------------------------------------------------------------------- /src/components/_context.scss: -------------------------------------------------------------------------------- 1 | .menu-1QACrS { 2 | .item-1OdjEX:not(.hideInteraction-2jPGL_) { 3 | font-weight: var(--font-default); 4 | transition: var(--button-transition); 5 | 6 | &.focused-3qFvc8, &:active { 7 | font-size: var(--fontsize-hover); 8 | font-weight: var(--font-hover); 9 | background: var(--gradient); 10 | } 11 | } 12 | 13 | .colorDefault-CDqZdO { 14 | &.focused-3qFvc8, &:active { 15 | --gradient: linear-gradient(var(--gradient-blurple)); 16 | } 17 | } 18 | .colorDanger-3n-KnP, 19 | #status-picker-dnd { 20 | &.focused-3qFvc8, &:active { 21 | --gradient: linear-gradient(var(--gradient-red)); 22 | } 23 | } 24 | .colorPremium-vwmYZQ { 25 | &.focused-3qFvc8, &:active { 26 | --gradient: linear-gradient(var(--gradient-special)) 27 | } 28 | } 29 | #status-picker-online { 30 | &.focused-3qFvc8, &:active { 31 | --gradient: linear-gradient(var(--gradient-green)); 32 | } 33 | } 34 | #status-picker-idle { 35 | &.focused-3qFvc8, &:active { 36 | --gradient: linear-gradient(var(--gradient-yellow)); 37 | } 38 | } 39 | #status-picker-invisible { 40 | &.focused-3qFvc8, &:active { 41 | --gradient: linear-gradient(var(--gradient-grey)); 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/components/_message-actions.scss: -------------------------------------------------------------------------------- 1 | #app-mount .wrapper-2vIMkT .button-3bklZh { 2 | background: var(--gradient); 3 | img, svg { 4 | transition: var(--button-transition); 5 | transform: var(--transform-normal); 6 | } 7 | 8 | &:hover { 9 | --gradient: linear-gradient(var(--gradient-blurple)); 10 | 11 | svg { 12 | transform: var(--transform-hover); 13 | color: white; 14 | } 15 | } 16 | 17 | &.dangerous-Y36ifs:hover { 18 | --gradient: linear-gradient(var(--gradient-red)) 19 | } 20 | } -------------------------------------------------------------------------------- /src/source.css: -------------------------------------------------------------------------------- 1 | .lookFilled-yCfaCM { 2 | transform: var(--transform-normal); 3 | transition: var(--button-transition); 4 | background: var(--gradient); 5 | } 6 | .lookFilled-yCfaCM:hover { 7 | transform: var(--button-transform-hover); 8 | } 9 | .lookFilled-yCfaCM[disabled] { 10 | transform: none; 11 | } 12 | .lookFilled-yCfaCM.colorBrand-I6CyqQ { 13 | --gradient: linear-gradient(var(--gradient-blurple)); 14 | } 15 | .lookFilled-yCfaCM.colorGreen-3y-Z79, .lookFilled-yCfaCM.button-1EGGcP.buttonActive-Uc1jHx { 16 | --gradient: linear-gradient(var(--gradient-green)); 17 | } 18 | .lookFilled-yCfaCM.colorYellow-Pgtmch { 19 | --gradient: linear-gradient(var(--gradient-yellow)); 20 | } 21 | .lookFilled-yCfaCM.colorRed-rQXKgM { 22 | --gradient: linear-gradient(var(--gradient-red)); 23 | } 24 | .lookFilled-yCfaCM.colorPrimary-2AuQVo, .lookFilled-yCfaCM.colorGrey-2iAG-B, .lookFilled-yCfaCM.buttonColor-3bP3fX { 25 | --gradient: linear-gradient(var(--gradient-grey)); 26 | } 27 | 28 | .menu-1QACrS .item-1OdjEX:not(.hideInteraction-2jPGL_) { 29 | font-weight: var(--font-default); 30 | transition: var(--button-transition); 31 | } 32 | .menu-1QACrS .item-1OdjEX:not(.hideInteraction-2jPGL_).focused-3qFvc8, .menu-1QACrS .item-1OdjEX:not(.hideInteraction-2jPGL_):active { 33 | font-size: var(--fontsize-hover); 34 | font-weight: var(--font-hover); 35 | background: var(--gradient); 36 | } 37 | .menu-1QACrS .colorDefault-CDqZdO.focused-3qFvc8, .menu-1QACrS .colorDefault-CDqZdO:active { 38 | --gradient: linear-gradient(var(--gradient-blurple)); 39 | } 40 | .menu-1QACrS .colorDanger-3n-KnP.focused-3qFvc8, .menu-1QACrS .colorDanger-3n-KnP:active, 41 | .menu-1QACrS #status-picker-dnd.focused-3qFvc8, 42 | .menu-1QACrS #status-picker-dnd:active { 43 | --gradient: linear-gradient(var(--gradient-red)); 44 | } 45 | .menu-1QACrS .colorPremium-vwmYZQ.focused-3qFvc8, .menu-1QACrS .colorPremium-vwmYZQ:active { 46 | --gradient: linear-gradient(var(--gradient-special)) ; 47 | } 48 | .menu-1QACrS #status-picker-online.focused-3qFvc8, .menu-1QACrS #status-picker-online:active { 49 | --gradient: linear-gradient(var(--gradient-green)); 50 | } 51 | .menu-1QACrS #status-picker-idle.focused-3qFvc8, .menu-1QACrS #status-picker-idle:active { 52 | --gradient: linear-gradient(var(--gradient-yellow)); 53 | } 54 | .menu-1QACrS #status-picker-invisible.focused-3qFvc8, .menu-1QACrS #status-picker-invisible:active { 55 | --gradient: linear-gradient(var(--gradient-grey)); 56 | } 57 | 58 | #app-mount .wrapper-2vIMkT .button-3bklZh { 59 | background: var(--gradient); 60 | } 61 | #app-mount .wrapper-2vIMkT .button-3bklZh img, #app-mount .wrapper-2vIMkT .button-3bklZh svg { 62 | transition: var(--button-transition); 63 | transform: var(--transform-normal); 64 | } 65 | #app-mount .wrapper-2vIMkT .button-3bklZh:hover { 66 | --gradient: linear-gradient(var(--gradient-blurple)); 67 | } 68 | #app-mount .wrapper-2vIMkT .button-3bklZh:hover svg { 69 | transform: var(--transform-hover); 70 | color: white; 71 | } 72 | #app-mount .wrapper-2vIMkT .button-3bklZh.dangerous-Y36ifs:hover { 73 | --gradient: linear-gradient(var(--gradient-red)) ; 74 | } -------------------------------------------------------------------------------- /src/source.scss: -------------------------------------------------------------------------------- 1 | @use 'base/variables'; 2 | 3 | @use 'components/buttons'; 4 | @use 'components/context'; 5 | @use 'components/message-actions'; --------------------------------------------------------------------------------