├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── bottom-bar ├── source.css └── source.scss ├── custom-message-colors ├── source.css └── source.scss ├── gradient-buttons ├── README.md ├── source.css └── source.scss ├── meta.json ├── package.json ├── src └── source.scss ├── theme-config.json └── windows-titlebar ├── source.css └── source.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bd-compile/ 3 | 4 | pnpm-lock.yaml 5 | dev.css -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveSassCompile.settings.formats":[ 3 | { 4 | "format": "expanded", 5 | "extensionName": ".css", 6 | "savePath": "~/", 7 | "indentWidth": 4 8 | } 9 | ], 10 | 11 | "liveSassCompile.settings.generateMap": false, 12 | "liveSassCompile.settings.autoprefix": [ 13 | "defaults" 14 | ], 15 | } 16 | 17 | // expanded 18 | // compressed 19 | // nested -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Snippets 2 | A collection of CSS / SCSS snippets that allow you to customize and enhance Discord. 3 | 4 | ## Support Server 5 | If you're having an issue with any of the snippets, feel free to join the [support server](https://discord.gg/vYdXbEzqDs), or make an issue on this repository. 6 | 7 | ## Imports 8 |
9 | Bottom Bar 10 | 11 | ```scss 12 | @import url('https://discord-extensions.github.io/snippets/bottom-bar/source.css'); 13 | 14 | :root { 15 | --bar-height: 80px; 16 | --bar-background: var(--background-tertiary); 17 | } 18 | ``` 19 |
20 | 21 | 22 |
23 | Custom Message Colors 24 | 25 | ```scss 26 | @import url('https://discord-extensions.github.io/snippets/custom-message-colors/source.css'); 27 | 28 | :root { 29 | /* || HSL Accent Values */ 30 | --message-mentioned: 38, calc(var(--saturation-factor,1) * 96%), 54%; 31 | --message-replying: 235, calc(var(--saturation-factor,1) * 86%), 65%; 32 | --message-ephemeral: 235, calc(var(--saturation-factor,1) * 86%), 65%; 33 | } 34 | ``` 35 | ```scss 36 | // || For more advanced customization, you can add on the variables below. 37 | 38 | :root { 39 | /* || Advanced Coloring */ 40 | --message-mentioned-indicator: hsl(var(--message-mentioned)); 41 | --message-mentioned-background: hsla(var(--message-mentioned), 0.1); 42 | --message-mentioned-background-hover: hsla(var(--message-mentioned), 0.08); 43 | 44 | --message-replying-indicator: hsl(var(--message-replying)); 45 | --message-replying-background: hsla(var(--message-replying), 0.05); 46 | --message-replying-background-hover: hsla(var(--message-replying), 0.1); 47 | 48 | --message-ephemeral-indicator: hsl(var(--message-ephemeral)); 49 | --message-ephemeral-background: hsla(var(--message-ephemeral), 0.05); 50 | --message-ephemeral-background-hover: hsla(var(--message-ephemeral), 0.1); 51 | } 52 | ``` 53 |
54 | 55 |
56 | Gradient Buttons 57 | 58 | ```scss 59 | @import url('https://discord-extensions.github.io/snippets/gradient-buttons/source.css'); 60 | 61 | :root { 62 | /* || Gradients */ 63 | --gradient-special: 140deg, hsl(245, calc(var(--saturaton-factor, 1)*79%), 72%) 0%, hsl(287, calc(var(--saturaton-factor, 1)*80%), 70%) 100%; 64 | --gradient-blurple: 140deg, hsl(235, calc(var(--saturation-factor, 1)*85%), 72%) 0%, hsl(235, calc(var(--saturation-factor, 1)*85%), 60%) 100%; 65 | --gradient-green: 140deg, hsl(139, calc(var(--saturaton-factor, 1)*47%), 44%) 0%, hsl(139, calc(var(--saturaton-factor, 1)*66%), 24%) 100%; 66 | --gradient-yellow: 140deg, hsl(38, calc(var(--saturaton-factor, 1)*96%), 54%) 0%, hsl(38, calc(var(--saturaton-factor, 1)*82%), 41%) 100%; 67 | --gradient-red: 140deg, hsl(359, calc(var(--saturaton-factor, 1)*83%), 59%) 0%, hsl(359, calc(var(--saturaton-factor, 1)*54%), 37%) 100%; 68 | --gradient-grey: 140deg, hsl(214, calc(var(--saturaton-factor, 1)*10%), 50%) 0%, hsl(216, calc(var(--saturaton-factor, 1)*11%), 26%) 100%; 69 | 70 | /* || Transitions */ 71 | --button-transition: 0.1s linear; 72 | --font-default: 500; 73 | --font-hover: 525; 74 | --fontsize-hover: 15px; 75 | --transform-normal: scale(1); 76 | --transform-hover: scale(1.15); 77 | --button-transform-hover: scale(1.04); 78 | } 79 | ``` 80 |
81 | 82 |
83 | Windows Titlebar 84 | 85 | ```scss 86 | @import url('https://discord-extensions.github.io/snippets/windows-titlebar/source.css'); 87 | ``` 88 |
89 | -------------------------------------------------------------------------------- /bottom-bar/source.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bar-height: 80px; 3 | --bar-background: var(--background-tertiary); 4 | } 5 | 6 | .container_d1f8f5 .sidebar_e031be { 7 | margin-bottom: var(--bar-height); 8 | } 9 | .container_d1f8f5 .sidebar_e031be .container_debb33 { 10 | position: absolute; 11 | height: var(--bar-height); 12 | background-color: var(--bar-background); 13 | } 14 | .container_d1f8f5 .withTagAsButton_e22174, .container_d1f8f5 .withTagless__058f8 { 15 | max-width: 120px !important; 16 | } 17 | .container_d1f8f5 .chat__52833 { 18 | background-color: var(--bar-background); 19 | } 20 | .container_d1f8f5 .chat__52833 .chatContent_f087cb { 21 | background-color: var(--background-primary); 22 | } 23 | .container_d1f8f5 .chat__52833 .content__01e65 { 24 | background-color: var(--bar-background); 25 | } 26 | .container_d1f8f5 .chat__52833 .homeContainer__73533 { 27 | background-color: var(--background-secondary-alt); 28 | } 29 | .container_d1f8f5 .chat__52833 .form_d8a4a1 { 30 | margin: 0; 31 | padding-top: calc((var(--bar-height) - 44px) / 2); 32 | padding-bottom: calc((var(--bar-height) - 44px) / 2); 33 | background-color: var(--bar-background); 34 | } 35 | .container_d1f8f5 .chat__52833 .form_d8a4a1::before { 36 | content: none; 37 | } 38 | .container_d1f8f5 .chat__52833 .form_d8a4a1 .channelTextArea_c2094b { 39 | margin: 0; 40 | background-color: transparent; 41 | } 42 | .container_d1f8f5 .chat__52833 .membersWrap__5ca6b { 43 | height: 100%; 44 | background-color: var(--bar-background); 45 | } 46 | .container_d1f8f5 .chat__52833 .membersWrap__5ca6b .members__573eb { 47 | margin-bottom: var(--bar-height); 48 | } 49 | .container_d1f8f5 .content__01e65 { 50 | background-color: var(--bar-background); 51 | } 52 | .container_d1f8f5 .container_bd15da, 53 | .container_d1f8f5 .container-36u7Lw, 54 | .container_d1f8f5 .applicationStore__444b9, 55 | .container_d1f8f5 .homeContainer__73533, 56 | .container_d1f8f5 .container-3wLKDe, 57 | .container_d1f8f5 .pageWrapper_c182d3, 58 | .container_d1f8f5 .searchResultsWrap__2e184 { 59 | margin-bottom: var(--bar-height); 60 | } -------------------------------------------------------------------------------- /bottom-bar/source.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --bar-height: 80px; 3 | --bar-background: var(--background-tertiary); 4 | } 5 | 6 | .container_d1f8f5 { 7 | // || Sidebar 8 | .sidebar_e031be { 9 | margin-bottom: var(--bar-height); 10 | .container_debb33 { 11 | position: absolute; 12 | height: var(--bar-height); 13 | background-color: var(--bar-background); 14 | } 15 | } 16 | // || User Area 17 | .withTagAsButton_e22174, .withTagless__058f8 { 18 | max-width: 120px !important; 19 | } 20 | // || Chat 21 | .chat__52833 { 22 | background-color: var(--bar-background); 23 | .chatContent_f087cb { 24 | background-color: var(--background-primary); 25 | } 26 | .content__01e65 { 27 | background-color: var(--bar-background); 28 | } 29 | .homeContainer__73533 { 30 | background-color: var(--background-secondary-alt); 31 | } 32 | // || Text Area 33 | .form_d8a4a1 { 34 | margin: 0; 35 | padding-top: calc((var(--bar-height) - 44px) / 2); 36 | padding-bottom: calc((var(--bar-height) - 44px) / 2); 37 | background-color: var(--bar-background); 38 | &::before { 39 | content: none; 40 | } 41 | .channelTextArea_c2094b { 42 | margin: 0; 43 | background-color: transparent; 44 | } 45 | } 46 | // || Members 47 | .membersWrap__5ca6b { 48 | height: 100%; 49 | background-color: var(--bar-background); 50 | .members__573eb { 51 | margin-bottom: var(--bar-height); 52 | } 53 | } 54 | } 55 | .content__01e65 { 56 | background-color: var(--bar-background); 57 | } 58 | // || Misc Margin 59 | .container_bd15da, 60 | .container-36u7Lw, 61 | .applicationStore__444b9, 62 | .homeContainer__73533, 63 | .container-3wLKDe, 64 | .pageWrapper_c182d3, 65 | .searchResultsWrap__2e184 { 66 | margin-bottom: var(--bar-height); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /custom-message-colors/source.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* || HSL Accent Values */ 3 | --message-mentioned: 38, calc(var(--saturation-factor,1) * 96%), 54%; 4 | --message-replying: 235, calc(var(--saturation-factor,1) * 86%), 65%; 5 | --message-ephemeral: 235, calc(var(--saturation-factor,1) * 86%), 65%; 6 | /* || Advanced Coloring */ 7 | --message-mentioned-indicator: hsl(var(--message-mentioned)); 8 | --message-mentioned-background: hsla(var(--message-mentioned), 0.1); 9 | --message-mentioned-background-hover: hsla(var(--message-mentioned), 0.08); 10 | --message-replying-indicator: hsl(var(--message-replying)); 11 | --message-replying-background: hsla(var(--message-replying), 0.05); 12 | --message-replying-background-hover: hsla(var(--message-replying), 0.1); 13 | --message-ephemeral-indicator: hsl(var(--message-ephemeral)); 14 | --message-ephemeral-background: hsla(var(--message-ephemeral), 0.05); 15 | --message-ephemeral-background-hover: hsla(var(--message-ephemeral), 0.1); 16 | } 17 | 18 | .messageListItem__050f9 .message_ccca67.mentioned_fa6fd2 { 19 | background-color: var(--message-mentioned-background); 20 | } 21 | .messageListItem__050f9 .message_ccca67.mentioned_fa6fd2.selected_e3bc5d, .messageListItem__050f9 .message_ccca67.mentioned_fa6fd2:hover { 22 | background-color: var(--message-mentioned-background-hover); 23 | } 24 | .messageListItem__050f9 .message_ccca67.mentioned_fa6fd2::before { 25 | background-color: var(--message-mentioned-indicator); 26 | } 27 | .messageListItem__050f9 .message_ccca67.replying__38514 { 28 | background-color: var(--message-replying-background); 29 | } 30 | .messageListItem__050f9 .message_ccca67.replying__38514.selected_e3bc5d, .messageListItem__050f9 .message_ccca67.replying__38514:hover { 31 | background-color: var(--message-replying-background-hover); 32 | } 33 | .messageListItem__050f9 .message_ccca67.replying__38514::before { 34 | background-color: var(--message-replying-indicator); 35 | } 36 | .messageListItem__050f9 .message_ccca67.ephemeral_eb5d84 { 37 | background-color: var(--message-ephemeral-background); 38 | } 39 | .messageListItem__050f9 .message_ccca67.ephemeral_eb5d84.selected_e3bc5d, .messageListItem__050f9 .message_ccca67.ephemeral_eb5d84:hover { 40 | background-color: var(--message-ephemeral-background-hover); 41 | } 42 | .messageListItem__050f9 .message_ccca67.ephemeral_eb5d84::before { 43 | background-color: var(--message-ephemeral-indicator); 44 | } -------------------------------------------------------------------------------- /custom-message-colors/source.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* || HSL Accent Values */ 3 | --message-mentioned: 38, calc(var(--saturation-factor,1) * 96%), 54%; 4 | --message-replying: 235, calc(var(--saturation-factor,1) * 86%), 65%; 5 | --message-ephemeral: 235, calc(var(--saturation-factor,1) * 86%), 65%; 6 | 7 | /* || Advanced Coloring */ 8 | --message-mentioned-indicator: hsl(var(--message-mentioned)); 9 | --message-mentioned-background: hsla(var(--message-mentioned), 0.1); 10 | --message-mentioned-background-hover: hsla(var(--message-mentioned), 0.08); 11 | 12 | --message-replying-indicator: hsl(var(--message-replying)); 13 | --message-replying-background: hsla(var(--message-replying), 0.05); 14 | --message-replying-background-hover: hsla(var(--message-replying), 0.1); 15 | 16 | --message-ephemeral-indicator: hsl(var(--message-ephemeral)); 17 | --message-ephemeral-background: hsla(var(--message-ephemeral), 0.05); 18 | --message-ephemeral-background-hover: hsla(var(--message-ephemeral), 0.1); 19 | } 20 | 21 | .messageListItem__050f9 { 22 | .message_ccca67.mentioned_fa6fd2 { 23 | background-color: var(--message-mentioned-background); 24 | &.selected_e3bc5d, 25 | &:hover { 26 | background-color: var(--message-mentioned-background-hover); 27 | } 28 | &::before { 29 | background-color: var(--message-mentioned-indicator); 30 | } 31 | } 32 | .message_ccca67.replying__38514 { 33 | background-color: var(--message-replying-background); 34 | &.selected_e3bc5d, 35 | &:hover { 36 | background-color: var(--message-replying-background-hover); 37 | } 38 | &::before { 39 | background-color: var(--message-replying-indicator); 40 | } 41 | } 42 | .message_ccca67.ephemeral_eb5d84 { 43 | background-color: var(--message-ephemeral-background); 44 | &.selected_e3bc5d, 45 | &:hover { 46 | background-color: var(--message-ephemeral-background-hover); 47 | } 48 | &::before { 49 | background-color: var(--message-ephemeral-indicator); 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /gradient-buttons/README.md: -------------------------------------------------------------------------------- 1 | # Currently not working 2 | This may be fixed in the future, idk -------------------------------------------------------------------------------- /gradient-buttons/source.css: -------------------------------------------------------------------------------- 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 | /* || Transitions */ 10 | --button-transition: 0.1s linear; 11 | --font-default: 500; 12 | --font-hover: 525; 13 | --fontsize-hover: 15px; 14 | --transform-normal: scale(1); 15 | --transform-hover: scale(1.15); 16 | --button-transform-hover: scale(1.04); 17 | } 18 | 19 | /* || Filled Buttons */ 20 | .lookFilled-yCfaCM { 21 | transform: var(--transform-normal); 22 | transition: var(--button-transition); 23 | background: var(--gradient); 24 | } 25 | .lookFilled-yCfaCM:hover { 26 | transform: var(--button-transform-hover); 27 | } 28 | .lookFilled-yCfaCM[disabled] { 29 | transform: none; 30 | } 31 | .lookFilled-yCfaCM.colorBrand-I6CyqQ { 32 | --gradient: linear-gradient(var(--gradient-blurple)); 33 | } 34 | .lookFilled-yCfaCM.colorGreen-3y-Z79, .lookFilled-yCfaCM.button-1EGGcP.buttonActive-Uc1jHx { 35 | --gradient: linear-gradient(var(--gradient-green)); 36 | } 37 | .lookFilled-yCfaCM.colorYellow-Pgtmch { 38 | --gradient: linear-gradient(var(--gradient-yellow)); 39 | } 40 | .lookFilled-yCfaCM.colorRed-rQXKgM { 41 | --gradient: linear-gradient(var(--gradient-red)); 42 | } 43 | .lookFilled-yCfaCM.colorPrimary-2AuQVo, .lookFilled-yCfaCM.colorGrey-2iAG-B, .lookFilled-yCfaCM.buttonColor-3bP3fX { 44 | --gradient: linear-gradient(var(--gradient-grey)); 45 | } 46 | 47 | /* || Context Menus */ 48 | .menu-1QACrS .item-1OdjEX:not(.hideInteraction-2jPGL_) { 49 | font-weight: var(--font-default); 50 | transition: var(--button-transition); 51 | } 52 | .menu-1QACrS .item-1OdjEX:not(.hideInteraction-2jPGL_).focused-3qFvc8, .menu-1QACrS .item-1OdjEX:not(.hideInteraction-2jPGL_):active { 53 | font-size: var(--fontsize-hover); 54 | font-weight: var(--font-hover); 55 | background: var(--gradient); 56 | } 57 | .menu-1QACrS .colorDefault-CDqZdO.focused-3qFvc8, .menu-1QACrS .colorDefault-CDqZdO:active { 58 | --gradient: linear-gradient(var(--gradient-blurple)); 59 | } 60 | .menu-1QACrS .colorDanger-3n-KnP.focused-3qFvc8, .menu-1QACrS .colorDanger-3n-KnP:active, 61 | .menu-1QACrS #status-picker-dnd.focused-3qFvc8, 62 | .menu-1QACrS #status-picker-dnd:active { 63 | --gradient: linear-gradient(var(--gradient-red)); 64 | } 65 | .menu-1QACrS .colorPremium-vwmYZQ.focused-3qFvc8, .menu-1QACrS .colorPremium-vwmYZQ:active { 66 | --gradient: linear-gradient(var(--gradient-special)) ; 67 | } 68 | .menu-1QACrS #status-picker-online.focused-3qFvc8, .menu-1QACrS #status-picker-online:active { 69 | --gradient: linear-gradient(var(--gradient-green)); 70 | } 71 | .menu-1QACrS #status-picker-idle.focused-3qFvc8, .menu-1QACrS #status-picker-idle:active { 72 | --gradient: linear-gradient(var(--gradient-yellow)); 73 | } 74 | .menu-1QACrS #status-picker-invisible.focused-3qFvc8, .menu-1QACrS #status-picker-invisible:active { 75 | --gradient: linear-gradient(var(--gradient-grey)); 76 | } 77 | 78 | /* || Message Actions */ 79 | .wrapper-2vIMkT .button-3bklZh { 80 | background: var(--gradient); 81 | } 82 | .wrapper-2vIMkT .button-3bklZh img, .wrapper-2vIMkT .button-3bklZh svg { 83 | transition: var(--button-transition); 84 | transform: var(--transform-normal); 85 | } 86 | .wrapper-2vIMkT .button-3bklZh:hover { 87 | --gradient: linear-gradient(var(--gradient-blurple)); 88 | } 89 | .wrapper-2vIMkT .button-3bklZh:hover svg { 90 | transform: var(--transform-hover); 91 | color: white; 92 | } 93 | .wrapper-2vIMkT .button-3bklZh.dangerous-Y36ifs:hover { 94 | --gradient: linear-gradient(var(--gradient-red)) ; 95 | } -------------------------------------------------------------------------------- /gradient-buttons/source.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 | } 19 | 20 | /* || Filled Buttons */ 21 | .lookFilled-yCfaCM { 22 | transform: var(--transform-normal); 23 | transition: var(--button-transition); 24 | background: var(--gradient); 25 | &:hover { 26 | transform: var(--button-transform-hover); 27 | } 28 | &[disabled] { 29 | transform: none; 30 | } 31 | 32 | &.colorBrand-I6CyqQ { 33 | --gradient: linear-gradient(var(--gradient-blurple)); 34 | } 35 | &.colorGreen-3y-Z79, &.button-1EGGcP.buttonActive-Uc1jHx { 36 | --gradient: linear-gradient(var(--gradient-green)); 37 | } 38 | &.colorYellow-Pgtmch { 39 | --gradient: linear-gradient(var(--gradient-yellow)); 40 | } 41 | &.colorRed-rQXKgM { 42 | --gradient: linear-gradient(var(--gradient-red)); 43 | } 44 | &.colorPrimary-2AuQVo, &.colorGrey-2iAG-B, &.buttonColor-3bP3fX { 45 | --gradient: linear-gradient(var(--gradient-grey)); 46 | } 47 | } 48 | 49 | /* || Context Menus */ 50 | .menu-1QACrS { 51 | .item-1OdjEX:not(.hideInteraction-2jPGL_) { 52 | font-weight: var(--font-default); 53 | transition: var(--button-transition); 54 | 55 | &.focused-3qFvc8, &:active { 56 | font-size: var(--fontsize-hover); 57 | font-weight: var(--font-hover); 58 | background: var(--gradient); 59 | } 60 | } 61 | 62 | .colorDefault-CDqZdO { 63 | &.focused-3qFvc8, &:active { 64 | --gradient: linear-gradient(var(--gradient-blurple)); 65 | } 66 | } 67 | .colorDanger-3n-KnP, 68 | #status-picker-dnd { 69 | &.focused-3qFvc8, &:active { 70 | --gradient: linear-gradient(var(--gradient-red)); 71 | } 72 | } 73 | .colorPremium-vwmYZQ { 74 | &.focused-3qFvc8, &:active { 75 | --gradient: linear-gradient(var(--gradient-special)) 76 | } 77 | } 78 | #status-picker-online { 79 | &.focused-3qFvc8, &:active { 80 | --gradient: linear-gradient(var(--gradient-green)); 81 | } 82 | } 83 | #status-picker-idle { 84 | &.focused-3qFvc8, &:active { 85 | --gradient: linear-gradient(var(--gradient-yellow)); 86 | } 87 | } 88 | #status-picker-invisible { 89 | &.focused-3qFvc8, &:active { 90 | --gradient: linear-gradient(var(--gradient-grey)); 91 | } 92 | } 93 | } 94 | 95 | /* || Message Actions */ 96 | .wrapper-2vIMkT .button-3bklZh { 97 | background: var(--gradient); 98 | img, svg { 99 | transition: var(--button-transition); 100 | transform: var(--transform-normal); 101 | } 102 | 103 | &:hover { 104 | --gradient: linear-gradient(var(--gradient-blurple)); 105 | 106 | svg { 107 | transform: var(--transform-hover); 108 | color: white; 109 | } 110 | } 111 | 112 | &.dangerous-Y36ifs:hover { 113 | --gradient: linear-gradient(var(--gradient-red)) 114 | } 115 | } -------------------------------------------------------------------------------- /meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "invite": "vYdXbEzqDs", 3 | "authorId": "399416615742996480", 4 | "source": "https://github.com/discord-extensions/macos-titlebar", 5 | "updateUrl": "https://github.com/discord-extensions/macos-titlebar/blob/master/clients/macos-titlebar.theme.css" 6 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snippets", 3 | "author": "LuckFire", 4 | "version": "0.0.1d", 5 | "scripts": { 6 | "dev": "theme-scss dev" 7 | }, 8 | "devDependencies": { 9 | "theme-scss": "^1.1.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/source.scss: -------------------------------------------------------------------------------- 1 | // i just have this here to test snippets, pay no mind to it 2 | // @use '../windows-titlebar/source.scss'; 3 | // @use '../gradient-buttons/source.scss'; 4 | // @use '../custom-message-colors/source.scss'; 5 | // @use '../bottom-bar/source.scss'; -------------------------------------------------------------------------------- /theme-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snippets", 3 | "metas": { 4 | "betterdiscord": "./meta.json" 5 | }, 6 | "dist": { 7 | }, 8 | "dev": { 9 | "mod": "vencord" 10 | } 11 | } -------------------------------------------------------------------------------- /windows-titlebar/source.css: -------------------------------------------------------------------------------- 1 | .typeWindows_e41dab { 2 | height: 30px; 3 | margin: 0; 4 | } 5 | .typeWindows_e41dab .winButton_f17fb6 { 6 | top: 0; 7 | width: 45px; 8 | height: 30px; 9 | } 10 | .typeWindows_e41dab .winButton_f17fb6.winButtonClose__6396d:hover { 11 | background-color: #cd0f1f; 12 | } -------------------------------------------------------------------------------- /windows-titlebar/source.scss: -------------------------------------------------------------------------------- 1 | .typeWindows_e41dab { 2 | height: 30px; 3 | margin: 0; 4 | .winButton_f17fb6 { 5 | top: 0; 6 | width: 45px; 7 | height: 30px; 8 | &.winButtonClose__6396d:hover { 9 | background-color: #cd0f1f; 10 | } 11 | } 12 | } --------------------------------------------------------------------------------