├── .gitattributes ├── .github └── ISSUE_TEMPLATE │ └── bug-report.md ├── AdjustableServerWidth ├── AdjustableServerWidth.theme.css ├── base.css ├── readme.md └── src │ └── AdjustableServerWidth.theme.scss ├── FrostedGlass ├── FrostedGlass.theme.css ├── README.md ├── assets │ └── discord.svg ├── base.css └── src │ ├── FrostedGlass.theme.scss │ ├── _keyframes.scss │ ├── _plugins.scss │ ├── _root.scss │ ├── app │ ├── _app.scss │ ├── _background.scss │ ├── _font.scss │ ├── _inputs.scss │ ├── _notices.scss │ ├── _scrollbars.scss │ ├── _toolbars.scss │ ├── _tooltips.scss │ ├── _windows.scss │ └── import.scss │ ├── bd │ ├── _aceeditor.scss │ ├── _bd.scss │ ├── _list.scss │ ├── _sidebar.scss │ └── import.scss │ ├── channels │ ├── _channels.scss │ ├── _container.scss │ ├── _dmlist.scss │ ├── _header.scss │ ├── _panels.scss │ ├── _unreadbar.scss │ └── import.scss │ ├── chat │ ├── _call.scss │ ├── _chatbox.scss │ ├── _container.scss │ ├── _dividers.scss │ ├── _messages.scss │ └── import.scss │ ├── guilds │ ├── _container.scss │ ├── _folder.scss │ ├── _server.scss │ └── import.scss │ ├── members │ ├── _container.scss │ ├── _member.scss │ └── import.scss │ ├── modals │ ├── _addjoinserver.scss │ ├── _customstatus.scss │ ├── _modals.scss │ ├── _quickswitcher.scss │ ├── _upload.scss │ ├── _usermodal.scss │ └── import.scss │ ├── os │ ├── _linux.scss │ ├── _mac.scss │ ├── _windows.scss │ └── import.scss │ ├── pages │ ├── _discovery.scss │ ├── _friends.scss │ ├── _nitro.scss │ ├── _pages.scss │ ├── _serverboost.scss │ └── import.scss │ ├── popouts │ ├── _autocomplete.scss │ ├── _contextmenu.scss │ ├── _emojipicker.scss │ ├── _mentions.scss │ ├── _pinnedmessages.scss │ ├── _popouts.scss │ ├── _search.scss │ ├── _serverdropdown.scss │ ├── _userpopout.scss │ ├── _voiceplaying.scss │ └── import.scss │ └── settings │ ├── _container.scss │ ├── _serversettings.scss │ ├── _usersettings.scss │ └── import.scss ├── HorizontalServerlist ├── HorizontalServerlist.theme.css ├── base.css ├── readme.md └── src │ └── HorizontalServerList.theme.scss ├── MinimalCord ├── MinimalCord.theme.css ├── base.css ├── readme.md └── src │ ├── MinimalCord.theme.scss │ ├── app │ ├── _mentions.scss │ └── import.scss │ ├── bd │ ├── _list.scss │ └── import.scss │ ├── channels │ ├── _categories.scss │ ├── _channels.scss │ ├── _container.scss │ ├── _panels.scss │ ├── _privatemessages.scss │ └── import.scss │ ├── chat │ ├── _container.scss │ ├── _dividers.scss │ ├── _messages.scss │ ├── _textarea.scss │ └── import.scss │ ├── general │ ├── _memberslist.scss │ ├── _pages.scss │ └── _settings.scss │ ├── global │ ├── _aceeditor.scss │ ├── _global.scss │ ├── _headers.scss │ ├── _icons.scss │ ├── _vars.scss │ └── _version.scss │ ├── guilds │ └── _guilds.scss │ ├── modals │ ├── _customstatus.scss │ ├── _delete.scss │ ├── _general.scss │ ├── _imagelightbox.scss │ ├── _joinaddserver.scss │ ├── _notification.scss │ ├── _quicktravel.scss │ ├── _selectregion.scss │ ├── _upload.scss │ └── _usermodal.scss │ ├── pages │ ├── _discovery.scss │ ├── _friends.scss │ ├── _library.scss │ └── _nitro.scss │ └── popouts │ ├── _addrole.scss │ ├── _auditlogs.scss │ ├── _autocomplete.scss │ ├── _contextmenu.scss │ ├── _emojipicker.scss │ ├── _mentions.scss │ ├── _rtc.scss │ ├── _search.scss │ ├── _serverdropdown.scss │ ├── _statuspicker.scss │ ├── _unreads.scss │ └── _userpopout.scss ├── README.md ├── RadialStatus ├── README.md ├── RadialStatus.theme.css ├── base.css └── src │ └── RadialStatus.theme.scss ├── SimplyDark ├── SimplyDark.theme.css ├── base.css ├── readme.md └── src │ ├── SimplyDark.theme.scss │ ├── _tempfixes.scss │ ├── general │ ├── _channels.scss │ ├── _chat.scss │ ├── _customCSS.scss │ ├── _keyframes.scss │ ├── _members.scss │ ├── _pages.scss │ ├── _serverlist.scss │ └── _settings.scss │ └── global │ ├── _global.scss │ ├── _headers.scss │ ├── _modals.scss │ ├── _popouts.scss │ ├── _scrollbars.scss │ ├── _vars.scss │ └── _version.scss ├── Slate ├── Slate.theme.css ├── assets │ └── illustrations │ │ ├── 1.svg │ │ ├── 10.svg │ │ ├── 11.svg │ │ ├── 12.svg │ │ ├── 2.svg │ │ ├── 3.svg │ │ ├── 4.svg │ │ ├── 5.svg │ │ ├── 6.svg │ │ ├── 7.svg │ │ ├── 8.svg │ │ └── 9.svg ├── base.css ├── index.html ├── readme.md ├── src │ ├── Slate.theme.scss │ ├── _dark.scss │ ├── _keyframes.scss │ ├── _light.scss │ ├── _root.scss │ ├── app │ │ ├── _app.scss │ │ ├── _badge.scss │ │ ├── _notice.scss │ │ ├── _scrollbar.scss │ │ ├── _spacing.scss │ │ ├── _spinner.scss │ │ ├── _status.scss │ │ ├── _text.scss │ │ ├── _titlebar.scss │ │ ├── _toolbar.scss │ │ ├── _tooltips.scss │ │ ├── _tutorialCircle.scss │ │ └── import.scss │ ├── assets │ │ ├── _icons.scss │ │ ├── _illustrations.scss │ │ ├── _paths.scss │ │ └── import.scss │ ├── bd │ │ ├── _chat.scss │ │ ├── _checkboxes.scss │ │ ├── _customcss.scss │ │ ├── _settings.scss │ │ ├── _settingsSidebar.scss │ │ ├── _themepluginlist.scss │ │ └── import.scss │ ├── channels │ │ ├── _category.scss │ │ ├── _channel.scss │ │ ├── _container.scss │ │ ├── _dm-list.scss │ │ ├── _header.scss │ │ ├── _panels.scss │ │ ├── _unread.scss │ │ └── import.scss │ ├── chat │ │ ├── _chatbox.scss │ │ ├── _codeblock.scss │ │ ├── _codeblocklangs.scss │ │ ├── _container.scss │ │ ├── _dividers.scss │ │ ├── _messages.scss │ │ ├── _placeholder.scss │ │ ├── _reactions.scss │ │ └── import.scss │ ├── guilds │ │ └── _guilds.scss │ ├── inputs │ │ ├── _button.scss │ │ ├── _card.scss │ │ ├── _checkbox.scss │ │ ├── _colorswatch.scss │ │ ├── _datepicker.scss │ │ ├── _dropdown.scss │ │ ├── _keybind.scss │ │ ├── _override.scss │ │ ├── _radiobutton.scss │ │ ├── _range.scss │ │ ├── _select.scss │ │ ├── _textbox.scss │ │ └── import.scss │ ├── members │ │ ├── _container.scss │ │ ├── _group-header.scss │ │ ├── _member.scss │ │ └── import.scss │ ├── modals │ │ ├── _addjoinserver.scss │ │ ├── _channeltopic.scss │ │ ├── _customstatus.scss │ │ ├── _delete.scss │ │ ├── _generic.scss │ │ ├── _nitro.scss │ │ ├── _paymentmethod.scss │ │ ├── _quickswitcher.scss │ │ ├── _reactors.scss │ │ ├── _serverwelcome.scss │ │ ├── _upload.scss │ │ ├── _usermodal.scss │ │ ├── _viewimage.scss │ │ └── import.scss │ ├── os │ │ ├── _os.scss │ │ └── import.scss │ ├── pages │ │ ├── _bottomfix.scss │ │ ├── _crash.scss │ │ ├── _disconnected.scss │ │ ├── _discovery.scss │ │ ├── _friends.scss │ │ ├── _library.scss │ │ ├── _login.scss │ │ ├── _nitro.scss │ │ ├── _nochannel.scss │ │ ├── _serverboost.scss │ │ └── import.scss │ ├── plugins │ │ ├── _googletranslate.scss │ │ ├── _sendbutton.scss │ │ ├── _serversaschannels.scss │ │ ├── _spotifycontrols.scss │ │ ├── _statuseverywhere.scss │ │ └── import.scss │ ├── popouts │ │ ├── _addrole.scss │ │ ├── _autocomplete.scss │ │ ├── _contextmenu.scss │ │ ├── _emoji.scss │ │ ├── _emojipicker.scss │ │ ├── _generic.scss │ │ ├── _inbox.scss │ │ ├── _joinedserver.scss │ │ ├── _krisp.scss │ │ ├── _pinnedmessages.scss │ │ ├── _rtc.scss │ │ ├── _search.scss │ │ ├── _searchresults.scss │ │ ├── _server.scss │ │ ├── _statuspicker.scss │ │ ├── _tenor.scss │ │ ├── _tutorial.scss │ │ ├── _userpopout.scss │ │ ├── _voiceplaying.scss │ │ └── import.scss │ └── settings │ │ ├── _container.scss │ │ ├── _content.scss │ │ ├── _guildsettings.scss │ │ ├── _settings-icons.scss │ │ ├── _sidebar.scss │ │ ├── _usersettings.scss │ │ └── import.scss └── website-files │ ├── normalize.css │ ├── scripts.js │ └── styles.css └── addons ├── bottomhsl.css ├── readme.md ├── src ├── bottomhsl.scss └── windows-title.bar.scss └── windows-titlebar.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Something needs fixing 4 | title: "[BUG] (Theme name) - (Brief description)" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | *((A clear and concise description of what the bug is))* 12 | 13 | **To Reproduce** 14 | *((Steps to reproduce the behavior))* 15 | 16 | **Screenshots** 17 | *((If applicable, add screenshots to help explain your problem))* 18 | 19 | **Desktop (please complete the following information):** 20 | Discord channel: (Stable/PTB/Canary) 21 | OS: (Windows/Linux/OSX) 22 | 23 | **Additional context** 24 | *((Add any other context about the problem here.))* 25 | -------------------------------------------------------------------------------- /AdjustableServerWidth/AdjustableServerWidth.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Adjustable Server Width 3 | * @author Gibbu#1211 4 | * @version 2.0.0 5 | * @description Makes the server list smaller or larger. Customizable in the file. 6 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/AdjustableServerWidth 7 | * @website https://gibbu.me/ 8 | */ 9 | 10 | @import url("https://gibbu.github.io/BetterDiscord-Themes/AdjustableServerWidth/base.css"); 11 | 12 | :root { 13 | --server-icon-size: 35px; /* Size of the server icons | DEFAULT: 35px */ 14 | --server-icon-spacing: 8px; /* Spacing between server icons. Negative values are allowed | DEFAULT: 8px */ 15 | --server-container-padding: 10px; /* Spacing to the left and right sides of server icons | DEFAULT: 10px */ 16 | } -------------------------------------------------------------------------------- /AdjustableServerWidth/base.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/AdjustableServerWidth/base.css"); 2 | -------------------------------------------------------------------------------- /AdjustableServerWidth/readme.md: -------------------------------------------------------------------------------- 1 | ### This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles/AdjustableServerWidth](https://github.com/DiscordStyles/AdjustableServerWidth) 3 | -------------------------------------------------------------------------------- /FrostedGlass/README.md: -------------------------------------------------------------------------------- 1 | ### This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles/FrostedGlass](https://github.com/DiscordStyles/FrostedGlass) 3 | -------------------------------------------------------------------------------- /FrostedGlass/assets/discord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /FrostedGlass/base.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/FrostedGlass/base.css"); 2 | -------------------------------------------------------------------------------- /FrostedGlass/src/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from {opacity: 0;} 3 | to {opacity: 1;} 4 | } 5 | @keyframes fadeInTop { 6 | from { 7 | opacity: 0; 8 | transform: translateY(-10px); 9 | } 10 | to { 11 | opacity: 1; 12 | transform: translateY(0); 13 | } 14 | } -------------------------------------------------------------------------------- /FrostedGlass/src/_plugins.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // XenoLib Notifications 3 | .xenoLib-notifications { 4 | padding: calc(var(--window-padding) * 2 + 48px) calc(var(--window-padding) * 2) calc(var(--window-padding) * 2) calc(var(--window-padding) * 2); 5 | box-sizing: border-box; 6 | } 7 | .xenoLib-notification:not(:only-child) { 8 | margin-bottom: 15px; 9 | } 10 | .xenoLib-notification-content-wrapper { 11 | padding: 0; 12 | box-sizing: border-box; 13 | z-index: 10; 14 | } 15 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_app.scss: -------------------------------------------------------------------------------- 1 | #app-mount:before { 2 | content: ""; 3 | background: var(--background-image); 4 | background-position: var(--background-image-position, center); 5 | background-size: var(--background-image-size, cover); 6 | position: absolute; 7 | height: calc(100vh + (var(--background-image-blur) * 2)); 8 | width: calc(100vw + (var(--background-image-blur) * 2)); 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | } 13 | 14 | #app-mount { 15 | .layers-3iHuyZ { 16 | margin: var(--window-padding); 17 | overflow: hidden; 18 | border-radius: var(--window-roundness); 19 | } 20 | .layer-3QrUeG { 21 | background: var(--tint); 22 | } 23 | // Container shadow 24 | .base-3dtUhz:before { 25 | content: ""; 26 | position: absolute; 27 | height: 5px; 28 | width: 100%; 29 | background: linear-gradient(rgba(0,0,0,0.2), transparent); 30 | z-index: 1; 31 | top: 48px; 32 | pointer-events: none; 33 | user-select: none; 34 | } 35 | // Bot tags 36 | .botTagRegular-2HEhHi { 37 | background: var(--gradient); 38 | color: var(--text-normal); 39 | margin-top: 0; 40 | } 41 | .botText-1526X_ { 42 | font-weight: 600; 43 | } 44 | .botTagInvert-18-95s { 45 | color: rgb(var(--gradient-primary)); 46 | .botText-1526X_ { 47 | font-weight: bold; 48 | } 49 | } 50 | } 51 | ::selection { 52 | background: rgb(var(--gradient-primary)); 53 | color: var(--text-normal); 54 | } 55 | // Update notice 56 | #app-mount .app-2rEoOp::before { 57 | content: "Your version of Frosted Glass is outdated. Please redownload"; 58 | white-space: pre-wrap; 59 | display: var(--update-notice-1, block); 60 | color: #fff; 61 | text-align: center; 62 | padding: 10px 0; 63 | box-sizing: border-box; 64 | background: rgb(var(--discord-blurple), 0.7); 65 | text-shadow: 0 2px 3px rgba(0,0,0,var(--text-shadow)); 66 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_background.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .layers-3iHuyZ:before { 3 | content: ""; 4 | background: var(--background-image); 5 | background-position: var(--background-image-position, center); 6 | background-size: var(--background-image-size, cover); 7 | background-repeat: var(--background-image-repeat, no-repeat); 8 | height: calc(100vh + (var(--background-image-blur) * 2)); 9 | width: calc(100vw + (var(--background-image-blur) * 2)); 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%, -50%); 13 | position: absolute; 14 | filter: blur(var(--background-image-blur)); 15 | pointer-events: none; 16 | user-select: none; 17 | } 18 | [role="menu"], 19 | .autocompleteInner-zh20B_, 20 | .container-3ayLPN, 21 | .container-enaOkj, 22 | .contextMenu-HLZMGh:not(.scroller-2FKFPG), 23 | .emojiPicker-3PwZFl, 24 | .messagesPopoutWrap-1MQ1bW, 25 | .modal-yWgWj-:not(.slide-2pHaq5), 26 | .root-1gCeng:not(.fullscreenOnMobile-1bD22y), 27 | .root-SR8cQa, 28 | .subMenuContext-2n_9YM .scrollerWrap-2lJEkd, 29 | .userPopout-3XzG_A, 30 | section.positionContainer-3unAXC .drawerSizingWrapper-27qFHb, 31 | .quickswitcher-3JagVE, 32 | .root-1gCeng.wrapper-2ZbzR9, 33 | .modalRoot-1Kx4Hb, 34 | .container-3JTnYm.thin-1ybCId.scrollerBase-289Jih { 35 | overflow: hidden !important; 36 | position: relative; 37 | border-radius: 3px; 38 | &:before { 39 | content: ""; 40 | background: linear-gradient(var(--tint), var(--tint)), var(--popout-modal-image); 41 | background-position: var(--popout-modal-position, center); 42 | background-size: var(--popout-modal-size, cover); 43 | background-attachment: var(--popout-modal-attachment, fixed); 44 | background-repeat: var(--popout-modal-repeat, no-repeat); 45 | box-shadow: inset 0 0 0 100vmax rgba(0,0,0,var(--popout-modal-brightness)); 46 | height: calc(100% + var(--popout-modal-blur) * 5); 47 | width: calc(100% + var(--popout-modal-blur) * 5); 48 | top: calc(var(--popout-modal-blur) / -1 * 2.5); 49 | left: calc(var(--popout-modal-blur) / -1 * 2.5); 50 | position: absolute; 51 | filter: blur(var(--popout-modal-blur)); 52 | pointer-events: none; 53 | user-select: none; 54 | z-index: -1; 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_font.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-input-placeholder, body, button, input, select, textarea { 2 | font-family: var(--font, 'Whitney'); 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_notices.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .notice-2FJMB4 { 3 | height: 48px; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | border-radius: 0; 8 | box-shadow: none; 9 | .button-1MICoQ { 10 | top: 0; 11 | background: var(--white); 12 | border-color: transparent; 13 | color: #fff; 14 | &:hover { 15 | background: var(--white-double); 16 | } 17 | &:active { 18 | background: var(--white-triple); 19 | } 20 | } 21 | } 22 | .dismiss-SCAH9H { 23 | right: unset; 24 | left: 0; 25 | height: 48px; 26 | } 27 | .noticeStreamerMode-2TSQpg { 28 | background: rgba(var(--discord-twitch), 0.6); 29 | } 30 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_scrollbars.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 8px !important; 3 | height: 8px !important; 4 | } 5 | ::-webkit-scrollbar, 6 | ::-webkit-scrollbar-track, 7 | ::-webkit-scrollbar-track-piece { 8 | border-color: transparent !important; 9 | background: transparent !important; 10 | } 11 | ::-webkit-scrollbar-thumb { 12 | border-radius: 10px !important; 13 | border: none !important; 14 | background-clip: content-box !important; 15 | background: var(--scrollbar-colour) !important; 16 | } 17 | ::-webkit-scrollbar-corner { 18 | visibility: hidden !important; 19 | } 20 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar, 21 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-corner, 22 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-thumb, 23 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-track { 24 | display: none !important; 25 | } 26 | -------------------------------------------------------------------------------- /FrostedGlass/src/app/_toolbars.scss: -------------------------------------------------------------------------------- 1 | #app-mount .title-3qD0b- .searchBar-3dMhjb { 2 | background: var(--background-secondary); 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_tooltips.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .tooltip-2QfLtc { 3 | color: var(--text-normal); 4 | text-align: center; 5 | font-weight: 600; 6 | } 7 | .tooltipBlack-PPG47z { 8 | background: var(--gradient); 9 | .tooltipPointer-3ZfirK { 10 | display: none; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/_windows.scss: -------------------------------------------------------------------------------- 1 | #app-mount .winButton-iRh8-Z { 2 | top: calc(var(--window-padding) - 1px); 3 | right: var(--window-padding); 4 | } -------------------------------------------------------------------------------- /FrostedGlass/src/app/import.scss: -------------------------------------------------------------------------------- 1 | @import 'app'; 2 | @import 'scrollbars'; 3 | @import 'windows'; 4 | @import 'font'; 5 | @import 'tooltips'; 6 | @import 'background'; 7 | @import 'inputs'; 8 | @import 'toolbars'; 9 | @import 'notices'; -------------------------------------------------------------------------------- /FrostedGlass/src/bd/_aceeditor.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .editor-wrapper { 3 | background: var(--background-secondary); 4 | } 5 | #bd-customcss-detach-container { 6 | background: var(--background-secondary); 7 | overflow: hidden; 8 | .editor-wrapper { 9 | height: calc(100% + 41px); 10 | } 11 | } 12 | &.bd-detached-editor { 13 | .winButton-iRh8-Z { 14 | right: calc(30% + 20px) !important; 15 | } 16 | } 17 | #bd-customcss-attach-controls { 18 | height: auto; 19 | } 20 | .ace_active-line, 21 | .ace_gutter-active-line, 22 | .ace_selection { 23 | background: var(--white-double); 24 | } 25 | .ace_editor { 26 | background-color: transparent; 27 | } 28 | .ace_gutter { 29 | background: var(--background-secondary); 30 | } 31 | .help-text, 32 | span[style="font-size: 10px; margin-left: 5px;"] { 33 | display: none; 34 | } 35 | #bd-customcss-attach-controls { 36 | background: var(--background-secondary); 37 | box-shadow: inset 0 0 0 100vmax var(--background-secondary); 38 | display: flex; 39 | align-items: center; 40 | justify-content: space-between; 41 | padding: 10px; 42 | box-sizing: border-box; 43 | .checkbox-group li { 44 | margin-top: 0; 45 | } 46 | button { 47 | margin: 0 0 0 10px; 48 | border-radius: 3px !important; 49 | border: none !important; 50 | background: var(--white); 51 | color: var(--text-normal); 52 | transition: 0.2s ease; 53 | &:active, 54 | &:hover { 55 | background: var(--white-double); 56 | } 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /FrostedGlass/src/bd/_bd.scss: -------------------------------------------------------------------------------- 1 | #app-mount #bd-settingspane-container { 2 | h3 { 3 | color: var(--text-normal); 4 | } 5 | .style-description { 6 | color: var(--text-default); 7 | border-color: var(--background-modifier-accent); 8 | } 9 | } -------------------------------------------------------------------------------- /FrostedGlass/src/bd/_list.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .bd-addon-card { 3 | background: var(--background-secondary); 4 | border-color: transparent; 5 | } 6 | .bd-addon-header { 7 | border: none; 8 | padding: 0; 9 | } 10 | .bd-addon-description { 11 | margin: 0; 12 | padding: 10px 0; 13 | color: var(--text-normal); 14 | } 15 | .bd-card-footer { 16 | border: none; 17 | padding: 10px 0 7px; 18 | button { 19 | background: var(--gradient); 20 | } 21 | } 22 | .bd-addon-links { 23 | font-size: 0; 24 | } 25 | .bda-link { 26 | font-size: 10px; 27 | margin-right: 10px; 28 | background: var(--white); 29 | padding: 5px 10px; 30 | border-radius: 50px; 31 | cursor: pointer; 32 | color: var(--text-normal); 33 | text-decoration: none; 34 | transition: 0.2s ease; 35 | &:hover { 36 | background: var(--white-double); 37 | } 38 | &:active { 39 | background: var(--white-triple); 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /FrostedGlass/src/bd/_sidebar.scss: -------------------------------------------------------------------------------- 1 | #app-mount #bd-settings-sidebar .ui-tab-bar-item { 2 | color: var(--text-muted); 3 | &:hover { 4 | color: var(--text-normal); 5 | background-color: var(--background-modifier-hover); 6 | } 7 | &.selected { 8 | background: var(--background-modifier-selected); 9 | color: var(--text-normal); 10 | } 11 | } -------------------------------------------------------------------------------- /FrostedGlass/src/bd/import.scss: -------------------------------------------------------------------------------- 1 | @import 'bd'; 2 | @import 'list'; 3 | @import 'sidebar'; 4 | @import 'aceeditor'; -------------------------------------------------------------------------------- /FrostedGlass/src/channels/_channels.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .containerDefault-1ZnADq { 3 | // Unread 4 | .modeUnread-1zpFdA .content-3at_AU { 5 | background: var(--white); 6 | } 7 | // Hover 8 | .wrapper-1ucjTd:hover .content-3at_AU { 9 | background: var(--background-modifier-hover); 10 | .icon-1_QxNX { 11 | color: var(--interactive-hover); 12 | } 13 | } 14 | // Selected 15 | &.selected-37j_iU .content-3at_AU { 16 | background: var(--gradient) !important; 17 | .icon-1_QxNX { 18 | color: var(--text-normal); 19 | } 20 | } 21 | } 22 | .users-i_3-kL { 23 | background: var(--white); 24 | padding: 0 5px; 25 | width: auto; 26 | } 27 | .total-3tKGEB { 28 | background: var(--white-double); 29 | padding: 0 5px; 30 | width: auto; 31 | } 32 | .containerUserOver-1U5YnL:after { 33 | background: var(--gradient-20); 34 | border: 2px solid rgb(var(--gradient-primary)); 35 | } 36 | .containerDragAfter-1F4fgZ:after, 37 | .containerDragBefore-31UGCO:before { 38 | background: var(--gradient); 39 | } 40 | } -------------------------------------------------------------------------------- /FrostedGlass/src/channels/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .sidebar-2K8pFh { 2 | border-radius: 0; 3 | background: rgba(0,0,0,var(--left-brightness)); 4 | .container-PNkimc, 5 | .privateChannels-1nO12o, 6 | .scroller-1JbKMe { 7 | background-color: transparent; 8 | } 9 | [role="list"] > div[style="width: 100%; height: 84px; visibility: hidden;"] { 10 | height: 120px !important; 11 | } 12 | } -------------------------------------------------------------------------------- /FrostedGlass/src/channels/_dmlist.scss: -------------------------------------------------------------------------------- 1 | #app-mount .channel-2QD9_O.selected-aXhQR6 .layout-2DM8Md { 2 | background: var(--gradient); 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/channels/_header.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .header-2o-2hj { 3 | background: transparent; 4 | box-shadow: none; 5 | } 6 | .animatedContainer-1pJv5C { 7 | -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 0) 100%) !important; 8 | top: 48px; 9 | background: transparent; 10 | } 11 | } -------------------------------------------------------------------------------- /FrostedGlass/src/channels/_panels.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .panels-j1Uci_ { 3 | background: transparent; 4 | .lookFilled-1Gx00P.colorBrand-3pXr91 { 5 | background: var(--white); 6 | &:hover { 7 | background: var(--white-double); 8 | } 9 | &:active { 10 | background: var(--white-triple); 11 | } 12 | } 13 | } 14 | .container-1giJp5 { 15 | border-bottom: none; 16 | } 17 | } -------------------------------------------------------------------------------- /FrostedGlass/src/channels/_unreadbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .unread-1xRYoj { 2 | background: var(--gradient); 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/channels/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'header'; 3 | @import 'channels'; 4 | @import 'dmlist'; 5 | @import 'panels'; 6 | @import 'unreadbar'; -------------------------------------------------------------------------------- /FrostedGlass/src/chat/_call.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .wrapper-2qzCYF.minimum-28Z35l { 3 | background: var(--background-secondary); 4 | } 5 | .centerButton-3CaNcJ { 6 | background: var(--white); 7 | &:hover { 8 | background: var(--white-double); 9 | } 10 | } 11 | .controlButton-2MhVEL.leaveButton-2YnTyt { 12 | background: rgba(var(--discord-red), .5); 13 | &:hover { 14 | background: rgb(var(--discord-red)); 15 | } 16 | } 17 | .quickSelect-3BxO0K { 18 | margin-top: 10px; 19 | } 20 | } -------------------------------------------------------------------------------- /FrostedGlass/src/chat/_chatbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount .form-2fGMdU { 2 | margin-top: 0; 3 | .attachButton-2WznTc { 4 | padding: 10px; 5 | } 6 | .placeholder-37qJjk, 7 | .slateTextArea-1Mkdgw { 8 | padding-left: 5px; 9 | } 10 | .buttonWrapper-1ZmCpA.button-38aScr.lookBlank-3eh9lL.colorBrand-3pXr91.grow-q77ONN.noFocus-2C7BQj { 11 | display: var(--show-gift-gif-buttons); 12 | } 13 | } -------------------------------------------------------------------------------- /FrostedGlass/src/chat/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .content-yTz4x3:before { 3 | content: none; 4 | } 5 | .chat-3bRxxu { 6 | background: rgba(0,0,0,var(--middle-brightness)); 7 | } 8 | .messages-3amgkR { 9 | background-color: transparent; 10 | text-shadow: 0 2px 5px rgba(0,0,0,var(--text-shadow)); 11 | } 12 | .newMessagesBar-265mhP { 13 | background: var(--gradient); 14 | opacity: 1; 15 | box-shadow: 0 2px 5px rgba(0,0,0,0.5); 16 | } 17 | .jumpToPresentBar-G1R9s6 { 18 | border-radius: 8px; 19 | background-color: var(--white-double); 20 | padding-bottom: 0; 21 | bottom: 10px; 22 | &:hover { 23 | background-color: var(--white-triple); 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /FrostedGlass/src/chat/_dividers.scss: -------------------------------------------------------------------------------- 1 | #app-mount .divider-JfaTT5 { 2 | border: none; 3 | .content-1o0f9g { 4 | display: flex; 5 | width: 100%; 6 | justify-content: center; 7 | align-items: center; 8 | color: var(--text-muted); 9 | &:before, &:after { 10 | content: ""; 11 | flex: 1; 12 | height: 1px; 13 | display: block; 14 | background: var(--background-modifier-accent); 15 | } 16 | &:before { 17 | margin-right: 10px; 18 | } 19 | &:after { 20 | margin-left: 10px; 21 | } 22 | } 23 | &.isUnread-3Ef-o9 { 24 | border-top: 1px solid rgb(var(--discord-red)); 25 | } 26 | } -------------------------------------------------------------------------------- /FrostedGlass/src/chat/_messages.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .cozy-3raOZG .header-23xsNx { 3 | margin-left: 0; 4 | padding-left: 0; 5 | } 6 | .message-2qRu38 { 7 | background: transparent; 8 | box-shadow: none; 9 | } 10 | // Attachments,pings,codeblocks ect... 11 | .message-2qnXI6 { 12 | background: transparent !important; 13 | .reaction-1hd86g { 14 | background: var(--white); 15 | &.reactionMe-wv5HKu { 16 | background: var(--gradient); 17 | .reactionCount-2mvXRV { 18 | color: var(--text-normal); 19 | } 20 | } 21 | } 22 | .wrapper-2aW0bm { 23 | background: var(--background-secondary); 24 | } 25 | .attachment-33OFj0, 26 | .wrapperAudio-1jDe0Q, 27 | code { 28 | background-color: var(--chat-embed); 29 | border: none; 30 | } 31 | .embedFull-2tM8-- { 32 | background-color: var(--chat-embed); 33 | } 34 | } 35 | .hljs { 36 | color: var(--text-default); 37 | } 38 | // Mentions 39 | .mentioned-xhSam7 { 40 | background: var(--gradient-20) !important; 41 | &:before { 42 | background: var(--gradient); 43 | } 44 | } 45 | .wrapper-3WhCwL { 46 | background: var(--gradient); 47 | color: var(--text-normal); 48 | } 49 | } -------------------------------------------------------------------------------- /FrostedGlass/src/chat/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'messages'; 3 | @import 'chatbox'; 4 | @import 'dividers'; 5 | @import 'call'; -------------------------------------------------------------------------------- /FrostedGlass/src/guilds/_container.scss: -------------------------------------------------------------------------------- 1 | &.wrapper-1Rf91z { 2 | background-color: transparent; 3 | .scroller-2TZvBN { 4 | background-color: rgba(0,0,0,var(--serverlist-brightness)); 5 | &::-webkit-scrollbar { 6 | display: none; 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /FrostedGlass/src/guilds/_folder.scss: -------------------------------------------------------------------------------- 1 | .expandedFolderBackground-2sPsd- { 2 | background: var(--white); 3 | } 4 | .folder-21wGz3 { 5 | background: transparent; 6 | } -------------------------------------------------------------------------------- /FrostedGlass/src/guilds/_server.scss: -------------------------------------------------------------------------------- 1 | // Home button 2 | .tutorialContainer-1v44GL { 3 | .childWrapper-anI2G9 { 4 | background: var(--gradient); 5 | background-color: transparent; 6 | } 7 | .wrapper-1BJsBx { 8 | &:before { 9 | content: ""; 10 | border-radius: 50%; 11 | position: absolute; 12 | background: var(--home-button-image, url('https://gibbu.github.io/BetterDiscord-Themes/FrostedGlass/assets/discord.svg')); 13 | background-size: var(--home-button-size, cover); 14 | background-position: var(--home-button-position, center); 15 | height: 100%; 16 | width: 100%; 17 | transition: 0.2s ease; 18 | } 19 | &.selected-bZ3Lue:before { 20 | border-radius: 30%; 21 | } 22 | } 23 | .homeIcon-tEMBK1 { 24 | display: none; 25 | } 26 | } 27 | .selected-bZ3Lue .acronym-2mOFsV { 28 | background: var(--white-double); 29 | } 30 | // No icon 31 | .acronym-2mOFsV { 32 | background: var(--white); 33 | &:hover { 34 | background: var(--white-double); 35 | } 36 | } 37 | // Add server/Discovery 38 | .circleIconButton-jET_ig { 39 | background: var(--white); 40 | color: rgb(var(--gradient-primary)); 41 | &.selected-ugP_am, 42 | &:hover { 43 | background: var(--white-double); 44 | color: var(--text-normal); 45 | } 46 | } -------------------------------------------------------------------------------- /FrostedGlass/src/guilds/import.scss: -------------------------------------------------------------------------------- 1 | #app-mount .guilds-1SWlCJ { 2 | @import 'container'; 3 | @import 'folder'; 4 | @import 'server'; 5 | } -------------------------------------------------------------------------------- /FrostedGlass/src/members/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .members-1998pB { 2 | background-color: rgba(0,0,0,var(--right-brightness)); 3 | & > div { 4 | background: transparent; 5 | } 6 | } -------------------------------------------------------------------------------- /FrostedGlass/src/members/_member.scss: -------------------------------------------------------------------------------- 1 | #app-mount .member-3-YXUe { 2 | &.selected-aXhQR6 { 3 | .layout-2DM8Md { 4 | background: var(--gradient); 5 | } 6 | .roleColor-rz2vM0 { 7 | color: var(--text-normal) !important; 8 | } 9 | .botTagRegular-2HEhHi { 10 | background: var(--text-normal); 11 | color: rgb(var(--gradient-primary)); 12 | margin-top: 0; 13 | } 14 | .botText-1526X_ { 15 | font-weight: 900; 16 | } 17 | .premiumIcon-1rDbWQ { 18 | color: var(--text-normal); 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /FrostedGlass/src/members/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'member'; -------------------------------------------------------------------------------- /FrostedGlass/src/modals/_addjoinserver.scss: -------------------------------------------------------------------------------- 1 | #app-mount .root-1gCeng { 2 | box-shadow: none; 3 | background: transparent; 4 | .action-1lSjCi { 5 | background: var(--white); 6 | } 7 | .colorMuted-HdFt4q, 8 | .colorStandard-2KCXvj, 9 | .description-Bw8krY, 10 | .description-QF3836, 11 | .header-3ZP1MY, 12 | .helpText-h3r3wC { 13 | color: #fff; 14 | } 15 | .footer-3rDWdC { 16 | background: rgba(0,0,0,0.2) !important; 17 | } 18 | .input-1mgnkM, 19 | .input-UJ9Tr3 { 20 | background: rgba(0,0,0,0.2) !important; 21 | color: #fff; 22 | padding: 10px; 23 | box-sizing: border-box; 24 | border-radius: 3px; 25 | &::placeholder { 26 | color: rgba(255,255,255,0.5); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /FrostedGlass/src/modals/_customstatus.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modalRoot-1Kx4Hb { 2 | .header-1TKi98 { 3 | padding-top: 150px; 4 | } 5 | .art-347BZj { 6 | position: absolute; 7 | transform: translate(-50%, 20px); 8 | width: 150px; 9 | } 10 | .header-3C6qT5 { 11 | padding-top: 0; 12 | } 13 | } -------------------------------------------------------------------------------- /FrostedGlass/src/modals/_modals.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .modal-3c3bKg { 3 | transform: scale(1) translateZ(0px) !important; 4 | animation: fadeInTop 0.3s ease forwards !important; 5 | } 6 | .modal-yWgWj- { 7 | background-color: transparent; 8 | box-shadow: none; 9 | .cardWarning-2yPNAa { 10 | background-color: rgba(var(--discord-yellow), 0.2); 11 | border: 2px solid rgb(var(--discord-yellow)); 12 | } 13 | .footer-3rDWdC { 14 | box-shadow: none; 15 | background: var(--background-secondary); 16 | } 17 | } 18 | .footer-2gL1pp { 19 | background: var(--background-secondary); 20 | box-shadow: none; 21 | } 22 | } -------------------------------------------------------------------------------- /FrostedGlass/src/modals/_quickswitcher.scss: -------------------------------------------------------------------------------- 1 | #app-mount .quickswitcher-3JagVE { 2 | box-shadow: none; 3 | padding: 20px; 4 | .scrollerOuter-3FLELE { 5 | margin-top: 10px; 6 | margin-right: 0; 7 | border-radius: 3px; 8 | } 9 | .scroller-zPkAnE { 10 | padding: 10px 5px 10px 10px; 11 | box-sizing: border-box; 12 | & > div[style*="width: 100%;"] { 13 | display: none; 14 | } 15 | } 16 | .protip-1b9XPC { 17 | display: none; 18 | } 19 | } -------------------------------------------------------------------------------- /FrostedGlass/src/modals/_upload.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal-2ifh8j { 2 | position: relative; 3 | box-shadow: none; 4 | .inner-3nWsbo { 5 | margin: 0; 6 | position: relative; 7 | z-index: 2; 8 | } 9 | .footer-3mqk7D { 10 | background: transparent; 11 | box-shadow: none; 12 | position: relative; 13 | z-index: 2; 14 | } 15 | &:before { 16 | content: ""; 17 | position: absolute; 18 | background: var(--popout-modal-image) center/cover fixed; 19 | top: 0; 20 | left: 0; 21 | width: 100%; 22 | height: 100%; 23 | z-index: 0; 24 | pointer-events: none; 25 | border-radius: 5px; 26 | } 27 | &:after { 28 | content: ""; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | border-radius: 3px; 35 | background: rgba(0,0,0,var(--popout-modal-brightness)); 36 | box-shadow: var(--tint); 37 | z-index: 1; 38 | backdrop-filter: blur(var(--popout-modal-blur)); 39 | } 40 | } -------------------------------------------------------------------------------- /FrostedGlass/src/modals/_usermodal.scss: -------------------------------------------------------------------------------- 1 | #app-mount .root-SR8cQa { 2 | background: transparent; 3 | .topSectionNormal-2-vo2m { 4 | background: var(--background-secondary); 5 | } 6 | .topSectionSpotify-1lI0-P { 7 | background: rgba(var(--discord-spotify), 0.3); 8 | } 9 | .topSectionPlaying-1J5E4n { 10 | background: var(--gradient-50); 11 | } 12 | .topSectionStreaming-1Tpf5X { 13 | background: rgba(var(--discord-twitch), 0.3); 14 | } 15 | .topSectionXbox-3fWLjS { 16 | background: rgba(var(--discord-xbox), 0.3); 17 | } 18 | .svg-2V3M55 { 19 | z-index: 1; 20 | } 21 | .body-3ND3kc { 22 | background: transparent; 23 | } 24 | .tabBarContainer-1s1u-z { 25 | border: none; 26 | } 27 | .userInfoSection-2acyCx { 28 | border: none; 29 | } 30 | .connectedAccount-36nQx7 { 31 | background: var(--background-secondary); 32 | border: none; 33 | } 34 | } -------------------------------------------------------------------------------- /FrostedGlass/src/modals/import.scss: -------------------------------------------------------------------------------- 1 | @import 'modals'; 2 | @import 'usermodal'; 3 | @import 'upload'; 4 | @import 'addjoinserver'; 5 | @import 'quickswitcher'; 6 | @import 'customstatus'; -------------------------------------------------------------------------------- /FrostedGlass/src/os/_linux.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gibbu/BetterDiscord-Themes/40b6c7a5adbf8efa1e5cc6cb290ba688c8526b06/FrostedGlass/src/os/_linux.scss -------------------------------------------------------------------------------- /FrostedGlass/src/os/_mac.scss: -------------------------------------------------------------------------------- 1 | html.platform-osx { 2 | .macButtons-2MuSAC { 3 | position: absolute; 4 | top: var(--window-padding); 5 | left: var(--window-padding); 6 | background: rgba(0,0,0,var(--serverlist-brightness)); 7 | width: 72px; 8 | border-top-left-radius: var(--window-roundness); 9 | } 10 | .wrapper-1Rf91z { 11 | margin-top: 30px; 12 | } 13 | .scroller-2TZvBN { 14 | padding-top: 15px; 15 | } 16 | } -------------------------------------------------------------------------------- /FrostedGlass/src/os/_windows.scss: -------------------------------------------------------------------------------- 1 | html.platform-win { 2 | .scroller-2TZvBN { 3 | padding-top: 10px; 4 | } 5 | } -------------------------------------------------------------------------------- /FrostedGlass/src/os/import.scss: -------------------------------------------------------------------------------- 1 | @import 'windows'; 2 | @import 'mac'; 3 | @import 'linux'; -------------------------------------------------------------------------------- /FrostedGlass/src/pages/_discovery.scss: -------------------------------------------------------------------------------- 1 | #app-mount .content-98HsJk { 2 | .discoverHeader-1TWTqG { 3 | margin: 0 0 10px; 4 | height: 48px; 5 | display: flex; 6 | align-items: center; 7 | padding-left: 10px; 8 | } 9 | .categoryItem-3zFJns { 10 | &.selected-aXhQR6 .itemInner-3gVXMG { 11 | background: var(--gradient); 12 | } 13 | } 14 | .pageWrapper-1PgVDX { 15 | background: rgba(0,0,0,var(--middle-brightness)); 16 | .scrollerWrap-2lJEkd { 17 | margin-top: 48px; 18 | margin-bottom: 48px; 19 | } 20 | } 21 | .card-3DjzTQ { 22 | background: var(--background-secondary); 23 | &:hover { 24 | box-shadow: none; 25 | } 26 | } 27 | .footer-2jdoRS { 28 | opacity: 0; 29 | pointer-events: none; 30 | } 31 | } -------------------------------------------------------------------------------- /FrostedGlass/src/pages/_friends.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-1D34oG { 2 | background: rgba(0,0,0,var(--middle-brightness)); 3 | .inset-3sAvek { 4 | background-color: var(--background-secondary); 5 | } 6 | .itemCard-v9viV7:hover { 7 | background: var(--white); 8 | } 9 | .nowPlayingColumn-2sl4cE { 10 | background: rgba(0,0,0,var(--right-brightness)); 11 | } 12 | } -------------------------------------------------------------------------------- /FrostedGlass/src/pages/_nitro.scss: -------------------------------------------------------------------------------- 1 | #app-mount .applicationStore-1pNvnv { 2 | background: rgba(0,0,0,var(--middle-brightness)); 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/pages/_pages.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .image-2LqJex { 3 | filter: grayscale(1); 4 | opacity: 0.5; 5 | } 6 | } -------------------------------------------------------------------------------- /FrostedGlass/src/pages/_serverboost.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .perksModal-fSYqOq { 3 | background-color: rgba(0,0,0,var(--middle-brightness)); 4 | background-image: none; 5 | margin: var(--window-padding); 6 | border-radius: var(--window-roundness); 7 | } 8 | .tierWrapper-W9ajqp { 9 | box-shadow: none !important; 10 | } 11 | .ctaBar-2UsjF2, 12 | .tier-12tKuZ { 13 | background: var(--background-secondary); 14 | } 15 | .tierHeader---JJFb { 16 | background-color: var(--background-secondary); 17 | color: var(--text-normal); 18 | } 19 | .tierLock-3CSxSX { 20 | color: var(--text-normal); 21 | } 22 | .tierBody-16Chc9 { 23 | background: transparent; 24 | } 25 | .perk-2WeBWW { 26 | background-color: var(--background-secondary); 27 | } 28 | } -------------------------------------------------------------------------------- /FrostedGlass/src/pages/import.scss: -------------------------------------------------------------------------------- 1 | @import 'pages'; 2 | @import 'discovery'; 3 | @import 'friends'; 4 | @import 'serverboost'; 5 | @import 'nitro'; -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .autocomplete-1vrmpx { 2 | box-shadow: none; 3 | .selectorSelected-1_M1WV { 4 | background: var(--white); 5 | } 6 | .divider-23swzi { 7 | background-color: var(--white); 8 | } 9 | .description-11DmNu, 10 | .descriptionUsername-J_75O8 { 11 | color: var(--text-normal); 12 | } 13 | .descriptionDiscriminator-3vUOCc { 14 | color: var(--text-muted); 15 | } 16 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | [role="menu"] { 3 | box-shadow: none; 4 | animation: fadeIn 0.3s ease forwards; 5 | } 6 | .focused-3afm-j .check-1JyqgN { 7 | color: #fff; 8 | } 9 | .button-F9qN4n { 10 | background: var(--white); 11 | &.focused-3ZzkKr { 12 | background: var(--white-double); 13 | box-shadow: 0 0 0 2px rgb(var(--gradient-primary)); 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_emojipicker.scss: -------------------------------------------------------------------------------- 1 | #app-mount .drawerSizingWrapper-27qFHb { 2 | right: 0; 3 | position: absolute !important; 4 | .nav-2KnmHb { 5 | position: absolute; 6 | padding: 0 0 0 13px; 7 | top: 16px; 8 | z-index: 999; 9 | } 10 | [class*="searchBar"] { 11 | background: var(--background-secondary); 12 | margin-left: 105px; 13 | } 14 | .contentWrapper-2txmjs { 15 | display: grid; 16 | grid-template-rows: auto; 17 | background: transparent; 18 | } 19 | [aria-selected="true"] .navButton-3Mnpqt { 20 | background: var(--gradient); 21 | } 22 | .navButton-3Mnpqt { 23 | background: var(--white); 24 | padding: 6px 5px 7px; 25 | } 26 | // GIFs 27 | .categoryFadeBlurple-1j72_A { 28 | background: var(--gradient-90); 29 | } 30 | .focused-1En8bG:after, 31 | .result-3w1ZcL:hover:after { 32 | box-shadow: inset 0 0 0 2px rgb(var(--gradient-primary)); 33 | } 34 | .result-3w1ZcL { 35 | background-color: var(--white) !important; 36 | } 37 | // Emoji 38 | .emojiItemSelected-1aLkfV { 39 | background: var(--white-double); 40 | } 41 | .categoryWrapper-UZ5YNj { 42 | background: var(--background-secondary); 43 | } 44 | .category-3Xkx2x { 45 | color: var(--text-normal); 46 | } 47 | } 48 | .emojiPicker-3PwZFl { 49 | box-shadow: none; 50 | background: transparent; 51 | animation: fadeIn 0.3s ease forwards; 52 | [class*="header"] { 53 | box-shadow: none; 54 | } 55 | .searchBar-5di9mG { 56 | background: var(--background-secondary); 57 | } 58 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_mentions.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-enaOkj { 3 | background: var(--background-secondary); 4 | margin: 0 10px 10px; 5 | border-radius: 3px; 6 | padding: 0; 7 | overflow: hidden; 8 | } 9 | .channelHeader-3Gd2xq { 10 | background: transparent; 11 | padding: 15px 15px 0; 12 | height: auto; 13 | position: static; 14 | } 15 | .tertiary-aMXF0g, 16 | .item-PXvHYJ.selected-3s45Ha { 17 | background: var(--white); 18 | &:hover { 19 | background: var(--white-double); 20 | } 21 | } 22 | .container-3iAQ-0 { 23 | margin: 0 16px 16px; 24 | padding: 0; 25 | border-radius: 3px; 26 | box-sizing: border-box; 27 | background: var(--white); 28 | } 29 | .messageContainer-gbhlwo { 30 | padding: 15px 15px 15px 0; 31 | box-sizing: border-box; 32 | } 33 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_pinnedmessages.scss: -------------------------------------------------------------------------------- 1 | #app-mount .messagesPopoutWrap-1MQ1bW { 2 | box-shadow: none; 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_popouts.scss: -------------------------------------------------------------------------------- 1 | .colorDefault-2K3EoJ.focused-3afm-j, 2 | .colorDefault-2K3EoJ:hover:not(.hideInteraction-1iHO1O) { 3 | background: var(--white); 4 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_search.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-3ayLPN { 3 | background: transparent; 4 | box-shadow: none; 5 | .displayedNick-3xxvzU, 6 | .filter-3Y_im-, 7 | .header-2N-gMV { 8 | color: var(--text-normal); 9 | } 10 | .answer-1n6g43, 11 | .displayUsername-Qekxml { 12 | color: var(--text-muted); 13 | } 14 | .option-96V44q { 15 | .plusIcon-v0BTrL { 16 | color: var(--text-normal); 17 | } 18 | &.selected-rZcOL- { 19 | background: var(--white); 20 | &:after { 21 | background: linear-gradient(90deg, transparent, var(--white-double)); 22 | } 23 | } 24 | &:after { 25 | background: transparent; 26 | } 27 | } 28 | .react-datepicker, 29 | .react-datepicker__header { 30 | background: transparent; 31 | } 32 | .react-datepicker__month { 33 | background: var(--background-secondary); 34 | border-radius: 3px; 35 | } 36 | .react-datepicker__day { 37 | border-color: var(--white); 38 | background: var(--white); 39 | &--selected:after { 40 | background: var(--gradient); 41 | } 42 | } 43 | .react-datepicker__day--disabled, 44 | .react-datepicker__day--outside-month { 45 | background: transparent; 46 | } 47 | } 48 | .searchAnswer-3Dz2-q { 49 | background: var(--white); 50 | margin-left: 0; 51 | } 52 | .searchFilter-2ESiM3 { 53 | background: var(--white); 54 | } 55 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_serverdropdown.scss: -------------------------------------------------------------------------------- 1 | #app-mount #guild-header-popout { 2 | .item-1tOPte { 3 | &.colorPremium-p4p7qO { 4 | color: rgb(var(--discord-nitro)); 5 | .icon-LYJorE { 6 | color: rgb(var(--discord-nitro)); 7 | } 8 | } 9 | &.colorBrand-ROmMP1 { 10 | color: rgb(var(--discord-blurple)); 11 | .icon-LYJorE { 12 | color: rgb(var(--discord-blurple)); 13 | } 14 | } 15 | &.colorDanger-2qLCe1 { 16 | color: rgb(var(--discord-red)); 17 | .icon-LYJorE { 18 | color: rgb(var(--discord-red)); 19 | } 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_userpopout.scss: -------------------------------------------------------------------------------- 1 | #app-mount .userPopout-3XzG_A { 2 | box-shadow: none; 3 | overflow: hidden; 4 | opacity: 0; 5 | animation: fadeIn 0.3s ease forwards; 6 | .headerNormal-T_seeN { 7 | background: transparent; 8 | } 9 | .headerPlaying-j0WQBV { 10 | background: var(--gradient-50); 11 | } 12 | .headerXbox-3G-4PF { 13 | background: rgba(var(--discord-xbox), 0.3); 14 | } 15 | .headerSpotify-zpWxgT { 16 | background: rgba(var(--discord-spotify), 0.3); 17 | } 18 | .headerStreaming-2FjmGz { 19 | background: rgba(var(--discord-twitch), 0.3); 20 | } 21 | .wrapper-3t9DeA::after { 22 | border-radius: 3px; 23 | } 24 | .activityName-1IaRLn, 25 | .headerTag-2pZJzA, 26 | .nameNormal-2lqVQK, 27 | .nameWrap-3Z4G_9, 28 | .textRow-19NEd_ { 29 | color: var(--text-normal); 30 | } 31 | .body-3iLsc4 { 32 | background: transparent; 33 | } 34 | .role-2irmRk { 35 | height: auto; 36 | position: relative; 37 | overflow: hidden; 38 | color: var(--text-normal); 39 | } 40 | .roleCircle-3xAZ1j::after { 41 | content: ""; 42 | position: absolute; 43 | height: 24px; 44 | width: 100%; 45 | left: 0; 46 | top: 50%; 47 | transform: translateY(-50%); 48 | background: inherit; 49 | opacity: 0.2; 50 | z-index: -1; 51 | } 52 | .footer-1fjuF6 { 53 | background: transparent; 54 | border: none; 55 | } 56 | .quickMessage-1yeL4E { 57 | background: var(--background-secondary); 58 | border: none; 59 | color: var(--text-normal); 60 | &::placeholder { 61 | color: rgba(255,255,255,0.3); 62 | } 63 | } 64 | .protip-YaFfgO { 65 | display: none; 66 | } 67 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/_voiceplaying.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-3JTnYm.thin-1ybCId.scrollerBase-289Jih { 2 | 3 | } -------------------------------------------------------------------------------- /FrostedGlass/src/popouts/import.scss: -------------------------------------------------------------------------------- 1 | @import 'popouts'; 2 | @import 'userpopout'; 3 | @import 'contextmenu'; 4 | @import 'emojipicker'; 5 | @import 'serverdropdown'; 6 | @import 'search'; 7 | @import 'autocomplete'; 8 | @import 'pinnedmessages'; 9 | @import 'mentions'; 10 | @import 'voiceplaying'; -------------------------------------------------------------------------------- /FrostedGlass/src/settings/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label*="SETTINGS"] { 2 | .sidebarRegionScroller-3MXcoP { 3 | background-color: rgba(0,0,0,var(--left-brightness)); 4 | } 5 | .contentRegionScroller-26nc1e { 6 | background-color: rgba(0,0,0,var(--middle-brightness)); 7 | } 8 | .multiInput-1e2xJ7 .input-cIJ7To { 9 | background: transparent; 10 | } 11 | .description-3_Ncsb, 12 | .h5-18_1nd:not(.isEnabled-24g9qA), 13 | .labelDescriptor-1PqHgD, 14 | .viewBody-2Qz-jg { 15 | color: var(--text-normal); 16 | } 17 | } -------------------------------------------------------------------------------- /FrostedGlass/src/settings/_serversettings.scss: -------------------------------------------------------------------------------- 1 | #app-mount .info-1VyQPT .colorMuted-HdFt4q:first-child:before { 2 | content: var(--version); 3 | display: block; 4 | } -------------------------------------------------------------------------------- /FrostedGlass/src/settings/_usersettings.scss: -------------------------------------------------------------------------------- 1 | #app-mount #user-settings { 2 | // Authorized apps 3 | .authedApp-mj2Hmd { 4 | background: var(--background-secondary); 5 | } 6 | // Connections 7 | .connection-1fbD7X { 8 | position: relative; 9 | overflow: hidden; 10 | background-color: transparent !important; 11 | box-shadow: none; 12 | &[style*="rgb(0, 154, 229)"] { 13 | background: rgba(0, 154, 229, 0.2) !important; 14 | } 15 | &[style*="rgb(2, 31, 37)"] { 16 | background: rgba(2, 31, 37, 0.3) !important; 17 | } 18 | &[style*="rgb(255, 69, 0)"] { 19 | background: rgba(255, 69, 0, 0.2) !important; 20 | } 21 | &[style*="rgb(29, 185, 84)"] { 22 | background: rgba(29, 185, 84, 0.2) !important; 23 | } 24 | &[style*="rgb(24, 35, 50)"] { 25 | background: rgba(24, 35, 50, 0.4) !important; 26 | } 27 | &[style*="rgb(89, 54, 149)"] { 28 | background: rgba(89, 54, 149, 0.3) !important; 29 | } 30 | .integration-3kMeY4 { 31 | background: var(--white); 32 | border: none; 33 | } 34 | &[style*="rgb(29, 161, 242)"] { 35 | background: rgba(29, 161, 242, 0.2) !important; 36 | } 37 | &[style*="rgb(203, 33, 32)"] { 38 | background: rgba(203, 33, 32, 0.2) !important; 39 | } 40 | } 41 | .connectionHeader-2MDqhu { 42 | background: transparent; 43 | border: none; 44 | margin-bottom: 0; 45 | } 46 | .connectionDelete-2Odoln { 47 | border: none; 48 | background: var(--white); 49 | transition: 0.2s ease; 50 | &:after, 51 | &:before { 52 | position: absolute; 53 | top: 50%; 54 | left: 50%; 55 | width: 2px; 56 | height: 16px; 57 | } 58 | &:before { 59 | transform: translate(-50%, -50%) rotate(45deg); 60 | } 61 | &:after { 62 | transform: translate(-50%, -50%) rotate(-45deg); 63 | } 64 | span { 65 | display: none; 66 | } 67 | &:hover { 68 | background: var(--white-double); 69 | } 70 | &:active { 71 | background: var(--white-triple); 72 | } 73 | } 74 | // Keybinds 75 | .card-FDVird:before { 76 | border-color: transparent; 77 | background: var(--white); 78 | } 79 | // Game Activity 80 | .game-1ipmAa { 81 | box-shadow: 0 1px 0 0 var(--background-modifier-accent); 82 | } 83 | // Language 84 | .item-3eFBNF { 85 | box-shadow: inset 0 -1px 0 0 var(--background-modifier-accent); 86 | } 87 | } -------------------------------------------------------------------------------- /FrostedGlass/src/settings/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'usersettings'; 3 | @import 'serversettings'; -------------------------------------------------------------------------------- /HorizontalServerlist/HorizontalServerlist.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Horizontal Server List 3 | * @author Gibbu#1211 4 | * @version 2.0.0 5 | * @invite TeRQEPb 6 | * @description Moves the server list from the left to the top of Discord. Compatible with Server Folders and most basic transparent themes 7 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/HorizontalServerlist 8 | * @website https://www.gibbu.me 9 | */ 10 | 11 | @import url("https://gibbu.github.io/BetterDiscord-Themes/HorizontalServerlist/base.css"); 12 | 13 | :root { 14 | --HSL-server-icon-size: 40px; /* Size of the server icons | DEFAULT: 40px */ 15 | --HSL-server-spacing: 10px; /* Spacing between each server icon | DEFAULT: 10px */ 16 | } -------------------------------------------------------------------------------- /HorizontalServerlist/base.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/HorizontalServerList/base.css"); 2 | -------------------------------------------------------------------------------- /HorizontalServerlist/readme.md: -------------------------------------------------------------------------------- 1 | ### This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles/HorizontalServerList](https://github.com/DiscordStyles/HorizontalServerList) 3 | -------------------------------------------------------------------------------- /MinimalCord/MinimalCord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name MinimalCord 3 | * @author Gibbu#1211 4 | * @version 1.0.0 5 | * @description Changes Discord enough to give it a fresh feel while also making it darker. Supports both Light and Dark themes. 6 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/MinimalCord 7 | * @website https://www.gibbu.me 8 | */ 9 | 10 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900'); 11 | @import url("https://gibbu.github.io/BetterDiscord-Themes/MinimalCord/base.css"); 12 | 13 | /* Black Box user tags */ 14 | @import url('https://monstrousdev.github.io/themes/addons/user-tags.css'); 15 | 16 | :root { 17 | /* 18 | Accent variable 19 | Use this website: https://htmlcolorcodes.com/color-picker/ 20 | to get your desired RGB numbers. Then simply put each number in their respective area. 21 | R,G,B 22 | */ 23 | --accent: 0, 105, 255; /* DEFAULT: 22, 188, 249 */ 24 | --search-results-width: 25vw; /* Width of server results. For a fixed width use px. | DEFAULT: 25vw */ 25 | --emoji-picker-height: 260px; /* Height of Emoji picker | DEFAULT: 260px */ 26 | --chat-message-padding: 20px; /* Spacing around messages | DEFAULT: 20px */ 27 | --chat-message-spacing: 20px; /* Spacing between message | DEFAULT: 20px */ 28 | 29 | /* 30 | To use a custom font. Visit https://fonts.google.com and select one to your liking. 31 | Now just follow this tutorial: https://imgur.com/a/CNbw7xC 32 | */ 33 | --font: 'Roboto'; 34 | } -------------------------------------------------------------------------------- /MinimalCord/base.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/MinimalCord/base.css"); 2 | -------------------------------------------------------------------------------- /MinimalCord/readme.md: -------------------------------------------------------------------------------- 1 | ### This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles/MinimalCord](https://github.com/DiscordStyles/MinimalCord) 3 | -------------------------------------------------------------------------------- /MinimalCord/src/MinimalCord.theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name MinimalCord 3 | * @author Gibbu#1211 4 | * @version 1.0.0 5 | * @description Changes Discord enough to give it a fresh feel while also making it darker. Supports both Light and Dark themes. 6 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/MinimalCord 7 | * @website https://www.gibbu.me 8 | */ 9 | 10 | @import url('https://monstrousdev.github.io/themes/addons/user-tags.css'); 11 | 12 | :root { 13 | /* 14 | Accent variable 15 | Use this website: https://htmlcolorcodes.com/color-picker/ 16 | to get your desired RGB numbers. Then simply put each number in their respective area. 17 | R,G,B 18 | */ 19 | --accent: 0, 105, 255; /* DEFAULT: 22, 188, 249 */ 20 | --search-results-width: 25vw; /* Width of server results. For a fixed width use px. | DEFAULT: 25vw */ 21 | --emoji-picker-height: 260px; /* Height of Emoji picker | DEFAULT: 260px */ 22 | --chat-message-padding: 20px; /* Spacing around messages | DEFAULT: 20px */ 23 | --chat-message-spacing: 20px; /* Spacing between message | DEFAULT: 20px */ 24 | 25 | /* 26 | To use a custom font. Visit https://fonts.google.com and select one to your liking. 27 | Now just follow this tutorial: https://imgur.com/a/CNbw7xC 28 | */ 29 | --font: 'Roboto'; 30 | } 31 | 32 | // Global 33 | @import 'global/vars'; 34 | @import 'global/icons'; 35 | @import 'global/global'; 36 | @import 'global/headers'; 37 | @import 'global/aceeditor'; 38 | @import 'global/version'; 39 | 40 | // General 41 | @import 'general/settings'; 42 | @import 'general/memberslist'; 43 | 44 | // Pages 45 | @import 'pages/library'; 46 | @import 'pages/nitro'; 47 | @import 'pages/friends'; 48 | @import 'pages/discovery'; 49 | 50 | // Popouts 51 | @import 'popouts/search'; 52 | @import 'popouts/serverdropdown'; 53 | @import 'popouts/statuspicker'; 54 | @import 'popouts/userpopout'; 55 | @import 'popouts/contextmenu'; 56 | @import 'popouts/autocomplete'; 57 | @import 'popouts/mentions'; 58 | @import 'popouts/rtc'; 59 | @import 'popouts/emojipicker'; 60 | @import 'popouts/auditlogs'; 61 | @import 'popouts/addrole'; 62 | @import 'popouts/unreads'; 63 | 64 | // Modals 65 | @import 'modals/general'; 66 | @import 'modals/usermodal'; 67 | @import 'modals/upload'; 68 | @import 'modals/notification'; 69 | @import 'modals/joinaddserver'; 70 | @import 'modals/selectregion'; 71 | @import 'modals/imagelightbox'; 72 | @import 'modals/quicktravel'; 73 | @import 'modals/customstatus'; 74 | @import 'modals/delete'; 75 | 76 | 77 | @import 'chat/import'; 78 | @import 'bd/import'; 79 | @import 'guilds/guilds'; 80 | @import 'channels/import'; 81 | @import 'app/import'; 82 | 83 | [class*="baseLayer"]::before { 84 | content:'This version of MinimalCord is outdated and will no longer be updated. Please download the newest version from https://betterdiscord.net/ghdl?id=3363'; 85 | background:var(--red); 86 | height:32px; 87 | width:100%; 88 | position:relative; 89 | display:flex; 90 | align-items:center; 91 | justify-content:center; 92 | padding:10px; 93 | color:#fff; 94 | white-space:nowrap; 95 | overflow:hidden; 96 | text-overflow:ellipsis; 97 | } -------------------------------------------------------------------------------- /MinimalCord/src/app/_mentions.scss: -------------------------------------------------------------------------------- 1 | #app-mount .wrapper-3WhCwL { 2 | color: rgba(var(--accent), 1); 3 | background: rgba(var(--accent), 0.1); 4 | &:hover { 5 | background: rgba(var(--accent), 1); 6 | color: #fff; 7 | } 8 | } -------------------------------------------------------------------------------- /MinimalCord/src/app/import.scss: -------------------------------------------------------------------------------- 1 | @import 'mentions'; -------------------------------------------------------------------------------- /MinimalCord/src/bd/_list.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .bd-search-wrapper { 3 | background: var(--settings-box); 4 | box-shadow: var(--box-shadow); 5 | } 6 | .bd-card { 7 | background-color: var(--settings-box); 8 | border: none; 9 | box-shadow: var(--box-shadow); 10 | padding: 10px; 11 | box-sizing: border-box; 12 | } 13 | .bda-header { 14 | padding: 0 0 10px; 15 | margin-bottom: 0; 16 | } 17 | .bda-description { 18 | margin: 0; 19 | padding: 10px 0; 20 | } 21 | .bda-links { 22 | font-size: 0; 23 | padding: 10px 0 6px; 24 | } 25 | .bda-link { 26 | font-size: 12px; 27 | background: red; 28 | background: var(--settings-box-footer); 29 | border-radius: 15px; 30 | padding: 4px 10px; 31 | margin-right: 5px; 32 | text-decoration: none; 33 | transition: 0.1s ease; 34 | &:hover { 35 | background: rgba(var(--accent), 1); 36 | color: #fff; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /MinimalCord/src/bd/import.scss: -------------------------------------------------------------------------------- 1 | @import 'list'; -------------------------------------------------------------------------------- /MinimalCord/src/channels/_categories.scss: -------------------------------------------------------------------------------- 1 | #app-mount .wrapper-CU3qI5 { 2 | color: var(--text-1); 3 | .container-2ax-kl { 4 | color: var(--text-1); 5 | } 6 | &.muted-1NRuDm { 7 | color: var(--text-dark); 8 | .container-2ax-kl { 9 | color: var(--text-dark); 10 | } 11 | } 12 | &:hover { 13 | color: var(--text-1); 14 | .container-2ax-kl { 15 | color: var(--text-1); 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /MinimalCord/src/channels/_channels.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | 3 | // Unread pill 4 | .unread-3zKkbm { 5 | background-color: rgba(var(--accent), 1); 6 | z-index: 1; 7 | } 8 | 9 | // Channels 10 | .wrapper-1ucjTd { 11 | .content-3at_AU { 12 | margin-left: 0; 13 | padding-left: 16px; 14 | border-radius: 0 5px 5px 0; 15 | .icon-1_QxNX, .name-3_Dsmg { 16 | color: var(--text-3); 17 | } 18 | } 19 | &.modeMuted-3osy7j .content-3at_AU { 20 | .icon-1_QxNX, .name-3_Dsmg { 21 | color: var(--channel-muted-text); 22 | } 23 | } 24 | &.modeUnread-1zpFdA .content-3at_AU { 25 | background: var(--channel-unread-bg); 26 | .icon-1_QxNX, .name-3_Dsmg { 27 | color: var(--channel-unread-text); 28 | } 29 | } 30 | &:hover .content-3at_AU { 31 | background: var(--channel-hovered-bg); 32 | .icon-1_QxNX, .name-3_Dsmg { 33 | color: var(--channel-hovered-text); 34 | } 35 | } 36 | &.modeSelected-1zApJ_ .content-3at_AU { 37 | box-shadow: inset 4px 0 0 rgba(var(--accent), 1); 38 | background: var(--channel-selected-bg); 39 | .icon-1_QxNX, .name-3_Dsmg { 40 | color: var(--channel-selected-text); 41 | } 42 | } 43 | } 44 | 45 | 46 | } -------------------------------------------------------------------------------- /MinimalCord/src/channels/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .sidebar-2K8pFh { 2 | background-color: var(--background-1); 3 | 4 | // Server name and dropdown 5 | .header-2o-2hj { 6 | box-shadow: none; 7 | background: transparent !important; 8 | } 9 | 10 | .container-PNkimc { 11 | background: transparent; 12 | } 13 | 14 | 15 | // Unread message below/above 16 | .unread-1xRYoj { 17 | background-color: var(--channel-selected-bg); 18 | opacity: 1; 19 | box-shadow: var(--box-shadow); 20 | .text-2e2ZyG { 21 | color: var(--text-1); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /MinimalCord/src/channels/_panels.scss: -------------------------------------------------------------------------------- 1 | #app-mount .panels-j1Uci_ { 2 | background-color: var(--background-1); 3 | .container-1giJp5 { 4 | border: none; 5 | } 6 | .button-14-BFJ.enabled-2cQ-u7:hover { 7 | color: var(--text-1); 8 | background-color: var(--foreground-1); 9 | } 10 | } -------------------------------------------------------------------------------- /MinimalCord/src/channels/_privatemessages.scss: -------------------------------------------------------------------------------- 1 | #app-mount .privateChannels-1nO12o { 2 | background: transparent; 3 | 4 | .scroller-1JbKMe { 5 | background: transparent; 6 | div[style="width: 100%; height: 8px; visibility: hidden;"] { 7 | display: none; 8 | } 9 | } 10 | 11 | // Category 12 | .container-2ax-kl { 13 | color: var(--text-1); 14 | } 15 | 16 | // Search 17 | .searchBar-6Kv8R2 { 18 | box-shadow: none; 19 | padding: 0; 20 | height: auto; 21 | width: 232px; 22 | box-sizing: border-box; 23 | .searchBarComponent-32dTOx { 24 | height: 44px; 25 | background: transparent; 26 | border-radius: 0 5px 5px 0; 27 | font-size: 0; 28 | display: flex; 29 | align-items: center; 30 | padding-left: 16px; 31 | &:before { 32 | content: ""; 33 | width: 32px; 34 | height: 32px; 35 | display: block; 36 | -webkit-mask: url($search) center/24px no-repeat; 37 | background: var(--text-3); 38 | margin-right: 12px; 39 | position: relative; 40 | z-index: 1; 41 | pointer-events: none; 42 | } 43 | &:after { 44 | content: "Search"; 45 | font-size: 16px; 46 | line-height: 20px; 47 | font-weight: 500; 48 | color: var(--text-3); 49 | position: relative; 50 | z-index: 1; 51 | pointer-events: none; 52 | } 53 | &:hover { 54 | background: var(--channel-hovered-bg); 55 | &:before { 56 | background: var(--text-2); 57 | } 58 | &:after { 59 | color: var(--text-2); 60 | } 61 | } 62 | } 63 | } 64 | 65 | // Messages 66 | .channel-2QD9_O { 67 | margin: 0; 68 | max-width: 100%; 69 | color: var(--text-3); 70 | .layout-2DM8Md { 71 | padding-left: 16px; 72 | border-radius: 0 5px 5px 0; 73 | } 74 | &:hover { 75 | color: var(--text-2); 76 | .layout-2DM8Md { 77 | background: var(--channel-hovered-bg); 78 | } 79 | } 80 | &.selected-aXhQR6 { 81 | color: var(--text-1); 82 | .layout-2DM8Md { 83 | background: var(--channel-selected-bg); 84 | box-shadow: inset 4px 0 0 rgba(var(--accent), 1); 85 | } 86 | } 87 | } 88 | } -------------------------------------------------------------------------------- /MinimalCord/src/channels/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'categories'; 3 | @import 'channels'; 4 | @import 'privatemessages'; 5 | @import 'panels'; 6 | -------------------------------------------------------------------------------- /MinimalCord/src/chat/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .wrapper-3vR61M, 3 | .wrapper-1F5TKx { 4 | background: transparent; 5 | } 6 | .chat-3bRxxu { 7 | background: var(--background-1); 8 | .scroller-2FKFPG { 9 | background: transparent; 10 | } 11 | .content-yTz4x3:before { 12 | content: none; 13 | } 14 | } 15 | .messagesWrapper-3lZDfY { 16 | ::-webkit-scrollbar-thumb { 17 | visibility: hidden !important; 18 | } 19 | &:hover ::-webkit-scrollbar-thumb { 20 | visibility: visible !important; 21 | } 22 | } 23 | .jumpToPresentBar-9P20AM { 24 | left: unset; 25 | bottom: 20px; 26 | right: 16px; 27 | padding: 0 10px 0 5px; 28 | background: var(--message-button); 29 | box-shadow: var(--box-shadow), 0 0 5px rgba(0,0,0,0.3); 30 | border-radius: 5px; 31 | opacity: 1; 32 | > span { 33 | padding: 0 0 0 5px; 34 | .spinnerItem-2r0Owh { 35 | background-color: var(--text-1); 36 | } 37 | } 38 | button { 39 | font-size: 12px; 40 | padding-right: 0; 41 | height: auto; 42 | color: var(--text-1); 43 | svg { 44 | display: none; 45 | } 46 | &:first-child { 47 | display: none; 48 | } 49 | } 50 | &:before { 51 | content: ""; 52 | width: 16px; 53 | height: 16px; 54 | -webkit-mask: url($history) center/cover; 55 | background: var(--text-1); 56 | } 57 | } 58 | .newMessagesBar-mujexs { 59 | top: 10px; 60 | left: 30px; 61 | right: 30px; 62 | border-radius: 5px; 63 | box-shadow: var(--box-shadow); 64 | background: rgba(var(--accent), 1); 65 | } 66 | } 67 | 68 | -------------------------------------------------------------------------------- /MinimalCord/src/chat/_dividers.scss: -------------------------------------------------------------------------------- 1 | #app-mount .divider-JfaTT5 { 2 | border: none; 3 | height: auto; 4 | margin: 15px 0 15px 16px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: flex-start; 8 | top: 0; 9 | span { 10 | margin-right: 0; 11 | position: unset; 12 | padding: 0; 13 | background: transparent; 14 | font-size: 16px; 15 | &.content-1o0f9g + .unreadPill-2HyYtt { 16 | margin-left: 10px; 17 | } 18 | &.unreadPill-2HyYtt { 19 | color: var(--red); 20 | height: auto; 21 | } 22 | } 23 | svg { 24 | display: none; 25 | } 26 | & + .cozyMessage-3V1Y8y.groupStart-23k01U { 27 | margin-top: 0; 28 | } 29 | } -------------------------------------------------------------------------------- /MinimalCord/src/chat/_messages.scss: -------------------------------------------------------------------------------- 1 | #app-mount .cozyMessage-3V1Y8y { 2 | background: var(--message-box); 3 | margin: 0 8px 0 16px; 4 | padding: var(--message-padding); 5 | .avatar-1BDn8e { 6 | top: var(--message-padding); 7 | left: var(--message-padding); 8 | & + h2 { 9 | margin-left: 0; 10 | padding-left: 0; 11 | } 12 | } 13 | 14 | .contents-2mQqc9, 15 | .container-1ov-mD { 16 | padding-left: calc(var(--message-padding) + 38px); 17 | padding-bottom: 0; 18 | } 19 | 20 | .embedFull-2tM8-- { 21 | background: var(--message-embed); 22 | } 23 | 24 | .container-3npvBV { 25 | transform: scale(.8); 26 | padding-right: 0; 27 | } 28 | .wrapper-2aW0bm { 29 | background: var(--foreground-1); 30 | box-shadow: var(--box-shadow); 31 | } 32 | 33 | .scrollableContainer-2NUZem { 34 | background: var(--background-1); 35 | box-shadow: none; 36 | } 37 | 38 | &.groupStart-23k01U { 39 | margin-top: var(--message-spacing); 40 | } 41 | & + .cozyMessage-3V1Y8y:not(.groupStart-23k01U) { 42 | margin-top: calc(var(--message-padding) / -1); 43 | padding-top: 3px; 44 | } 45 | &.mentioned-xhSam7 { 46 | &:before { 47 | content: none; 48 | } 49 | .contents-2mQqc9 { 50 | position: relative; 51 | .avatar-1BDn8e { 52 | top: 0; 53 | left: 0; 54 | } 55 | .channelTextArea-2VhZ6z, 56 | .operations-36ENbA { 57 | position: relative; 58 | z-index: 1; 59 | } 60 | &:before { 61 | content: ""; 62 | position: absolute; 63 | display: block; 64 | top: 0; 65 | left: calc(var(--message-padding) / -1); 66 | bottom: 0; 67 | pointer-events: none; 68 | width: 2px; 69 | background-color: #faa61a; 70 | } 71 | &:after { 72 | content: ""; 73 | position: absolute; 74 | top: 0; 75 | left: calc(var(--message-padding) / -1); 76 | width: calc(100% + var(--message-padding) * 2); 77 | height: 100%; 78 | background: rgba(250,166,26,0.05); 79 | z-index: 0; 80 | pointer-events: none; 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /MinimalCord/src/chat/_textarea.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .channelTextArea-rNsIhG { 3 | border-top-color: var(--message-box-divider); 4 | background: transparent; 5 | } 6 | .form-2fGMdU:before { 7 | content: none; 8 | } 9 | .inner-MADQqc { 10 | max-height: 144px; 11 | } 12 | .buttons-3JBrkn { 13 | height: 54px; 14 | button { 15 | opacity: 0.3; 16 | min-height: 54px; 17 | &:hover { 18 | opacity: 1; 19 | } 20 | } 21 | } 22 | .attachWrapper-2TRKBi { 23 | border-right: none; 24 | } 25 | .attachButton-2WznTc { 26 | height: 100%; 27 | .attachButtonInner-PQjIyk { 28 | display: none; 29 | } 30 | &:before { 31 | content: ""; 32 | width: 24px; 33 | height: 24px; 34 | background: var(--text-normal); 35 | -webkit-mask: url($upload_file) center/20px no-repeat; 36 | opacity: 0.3; 37 | transition: 0.2s ease; 38 | } 39 | &:hover:before { 40 | opacity: 1; 41 | -webkit-mask-size: 24px; 42 | } 43 | } 44 | .operations-36ENbA>a { 45 | color: rgba(var(--accent), 1); 46 | } 47 | .attachButtonDivider-3Glu60 { 48 | display: none; 49 | } 50 | .scrollableContainer-2NUZem { 51 | background-color: var(--message-box); 52 | box-shadow: var(--box-shadow); 53 | } 54 | .textArea-12jD-V { 55 | padding: 15px; 56 | box-sizing: border-box; 57 | top: 1px; 58 | } 59 | .placeholder-37qJjk { 60 | text-transform: uppercase; 61 | font-weight: bold; 62 | letter-spacing: 1.5px; 63 | font-size: 12px; 64 | opacity: 0.7; 65 | left: 15px; 66 | padding: 0; 67 | } 68 | .slateTextArea-1Mkdgw { 69 | left: 0; 70 | top: 0; 71 | padding: 15px; 72 | box-sizing: border-box; 73 | } 74 | } -------------------------------------------------------------------------------- /MinimalCord/src/chat/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'dividers'; 3 | @import 'messages'; 4 | @import 'textarea'; -------------------------------------------------------------------------------- /MinimalCord/src/general/_memberslist.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .members-1998pB > div { 3 | background: transparent; 4 | } 5 | .member-3-YXUe { 6 | padding-right: 0; 7 | max-width: 100%; 8 | border-radius: 0; 9 | .layout-2DM8Md { 10 | border-radius: 5px 0 0 5px; 11 | } 12 | &:hover .layout-2DM8Md { 13 | background: var(--channel-hovered-bg); 14 | } 15 | &.selected-aXhQR6 .layout-2DM8Md { 16 | background: var(--channel-selected-bg); 17 | box-shadow: inset -4px 0 0 rgba(var(--accent), 1); 18 | } 19 | } 20 | .members-1998pB { 21 | background: transparent; 22 | &::-webkit-scrollbar { 23 | display: none; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /MinimalCord/src/general/_pages.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Activity 3 | .layout-1cQCv2 { 4 | background-image: none; 5 | } 6 | .activityFeed-1C0EmJ { 7 | background: var(--background-2); 8 | .outer-2IVh5n { 9 | background: var(--background-3); 10 | box-shadow: var(--box-shadow); 11 | border: none; 12 | .buttonColor-1agP3J { 13 | background: var(--foreground-3); 14 | box-shadow: var(--box-shadow); 15 | &:hover { 16 | background: var(--foreground-4); 17 | } 18 | } 19 | .inset-GQDQYw { 20 | background: var(--background-2); 21 | } 22 | .separator-2c4hi3 { 23 | background-color: var(--background-divider); 24 | } 25 | .popoutContainer-3WC9HR { 26 | &:hover { 27 | background: var(--background-4); 28 | } 29 | } 30 | .wrapper-9ppXpy { 31 | background: var(--background-4); 32 | box-shadow: none; 33 | } 34 | } 35 | .card-GqTca8 .unwrapped-37iUtM { 36 | background: var(--background-4); 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /MinimalCord/src/global/_aceeditor.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | #bd-customcss-attach-controls { 3 | background: var(--background-2); 4 | box-shadow: none; 5 | position: relative; 6 | .checkbox-group { 7 | position: absolute; 8 | bottom: 5px; 9 | left: 5px; 10 | } 11 | .btn.btn-primary { 12 | background: var(--foreground-2) !important; 13 | border: none !important; 14 | margin-top: 0; 15 | width: 33.33% !important; 16 | &:hover { 17 | background: var(--foreground-1) !important; 18 | } 19 | } 20 | .help-text { 21 | text-align: right; 22 | } 23 | #bd-customcss-detach-controls-button span { 24 | display: none; 25 | } 26 | } 27 | .ace-monokai { 28 | background-color: var(--background-2); 29 | .ace_gutter { 30 | background: transparent; 31 | } 32 | } 33 | &.bd-detached-editor { 34 | .editor-wrapper { 35 | height: calc(100% + 22px); 36 | } 37 | #bd-customcss-attach-controls { 38 | height: 55px; 39 | } 40 | #bd-customcss-detach-controls-button { 41 | span[style="font-size: 10px; margin-left: 5px;"] { 42 | position: absolute; 43 | bottom: 0; 44 | } 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /MinimalCord/src/global/_global.scss: -------------------------------------------------------------------------------- 1 | // Font 2 | ::-webkit-input-placeholder, body, button, input, select, textarea { 3 | font-family: var(--font, 'Roboto'), Whitney; 4 | } 5 | 6 | // Tooltips 7 | #app-mount .tooltipBlack-PPG47z { 8 | background: var(--tooltips); 9 | color: var(--text-1); 10 | text-align: center; 11 | .tooltipPointer-3ZfirK { 12 | border-top-color: var(--tooltips); 13 | } 14 | } 15 | 16 | // Highlight 17 | ::selection { 18 | background: rgba(var(--accent), 1); 19 | color: #fff; 20 | } 21 | 22 | // Select dropdown 23 | .css-181m2lf-menu { 24 | background: var(--dropdown); 25 | border: none; 26 | } 27 | 28 | // Switches 29 | .themeDefault-24hCdX.valueChecked-m-4IJZ, .ui-switch.checked { 30 | background-color: rgba(var(--accent), 1) !important; 31 | } 32 | 33 | // Codeblocks, embeds and attachments 34 | #app-mount { 35 | .attachment-33OFj0, 36 | .wrapper-35wsBm, 37 | code { 38 | background: var(--message-embed); 39 | border-color: var(--message-embed); 40 | } 41 | } 42 | 43 | // Wordmark 44 | .wordmarkWindows-1v0lYD { 45 | margin-top: 2px; 46 | padding-left: 6px; 47 | svg { 48 | -webkit-mask: url($wordmark) center/cover no-repeat; 49 | background: var(--text-1); 50 | opacity: 0.5; 51 | height: 10px !important; 52 | width: 88px !important; 53 | path { 54 | display: none; 55 | } 56 | } 57 | } 58 | 59 | // Backgrounds 60 | #app-mount { 61 | background: var(--background-2); 62 | .app-2rEoOp, .bg-h5JY_x { 63 | background-color: var(--background-2); 64 | } 65 | } 66 | 67 | // Scrollbars 68 | ::-webkit-scrollbar { 69 | width: 8px !important; 70 | height: 8px !important; 71 | } 72 | ::-webkit-scrollbar, 73 | ::-webkit-scrollbar-track, 74 | ::-webkit-scrollbar-track-piece { 75 | border-color: transparent !important; 76 | background: transparent !important; 77 | } 78 | ::-webkit-scrollbar-thumb { 79 | border-radius: 10px !important; 80 | border: none !important; 81 | background-clip: content-box !important; 82 | background-color: var(--scrollbar) !important; 83 | } 84 | ::-webkit-scrollbar-corner { 85 | visibility: hidden !important; 86 | } 87 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar, 88 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-corner, 89 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-thumb, 90 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-track { 91 | display: none !important; 92 | } -------------------------------------------------------------------------------- /MinimalCord/src/global/_headers.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .title-3qD0b-, .container-1r6BKw { 3 | background: var(--background-1); 4 | .children-19S4PO:after { 5 | content: none; 6 | } 7 | .wrapper-3WhCwL { 8 | background: rgba(var(--accent), 0.1); 9 | color: rgba(var(--accent), 1); 10 | &:hover { 11 | color: #fff; 12 | background: rgba(var(--accent), 1); 13 | } 14 | } 15 | } 16 | .container-3T1zWi:before {content: none;} 17 | .searchBar-3dMhjb { 18 | background: var(--background-1); 19 | } 20 | .topic-TCb_qw a { 21 | color: rgba(var(--accent), 1); 22 | text-decoration: underline; 23 | } 24 | } -------------------------------------------------------------------------------- /MinimalCord/src/global/_version.scss: -------------------------------------------------------------------------------- 1 | .colorMuted-HdFt4q.size12-3cLvbJ:first-child:before { 2 | content: "MinimalCord v1.0.3 by Gibbu"; 3 | display: block; 4 | } -------------------------------------------------------------------------------- /MinimalCord/src/guilds/_guilds.scss: -------------------------------------------------------------------------------- 1 | #app-mount .wrapper-1Rf91z { 2 | .scroller-2TZvBN { 3 | background: var(--background-2); 4 | &::-webkit-scrollbar { 5 | display: none; 6 | } 7 | } 8 | .expandedFolderBackground-2sPsd-, .folder-21wGz3 { 9 | background-color: var(--server-folders); 10 | } 11 | .wrapper-1BJsBx:hover { 12 | .childWrapper-anI2G9, .circleIconButton-jET_ig { 13 | color: var(--text-1); 14 | background: var(--server-hovered); 15 | } 16 | } 17 | .childWrapper-anI2G9, .circleIconButton-jET_ig { 18 | background: var(--server-background); 19 | transition: 0.2s ease; 20 | &.selected-ugP_am { 21 | color: var(--text-1); 22 | background: var(--server-selected); 23 | } 24 | } 25 | .listItem-2P_4kh { 26 | &.bd-selected, .selected-bZ3Lue { 27 | .childWrapper-anI2G9 { 28 | background: var(--server-selected); 29 | color: var(--text-1); 30 | } 31 | } 32 | } 33 | .guildsError-b7zR5H { 34 | background: var(--redDark); 35 | border-color: var(--redDark); 36 | color: #fff; 37 | transition: 0.2s ease; 38 | &:hover { 39 | background: var(--red); 40 | border-color: var(--red); 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_customstatus.scss: -------------------------------------------------------------------------------- 1 | #app-mount .root-1gCeng { 2 | background: var(--background-1); 3 | .input-1GLP_D, .lookFilled-1h1y05.select-1Pkeg4 { 4 | background-color: var(--background-2); 5 | border: none; 6 | } 7 | .footer-3rDWdC { 8 | background: var(--background-2); 9 | box-shadow: none; 10 | } 11 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_delete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modal-yWgWj- { 2 | .message-2qRu38 { 3 | background: var(--message-box); 4 | box-shadow: var(--box-shadow); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /MinimalCord/src/modals/_general.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modal-yWgWj- { 2 | background: var(--background-1); 3 | .footer-3rDWdC { 4 | background-color: var(--background-2); 5 | box-shadow: none; 6 | border: none; 7 | } 8 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_imagelightbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modal-3c3bKg .inner-1ilYF7 { 2 | display: block; 3 | .downloadLink-1ywL9o { 4 | margin-right: 10px; 5 | + span.downloadLink-1ywL9o { 6 | display: none; 7 | } 8 | &:last-child { 9 | margin-right: 10px; 10 | } 11 | &:hover { 12 | color: var(--text-1) !important; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_notification.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modal-yWgWj-.sizeMedium-df47zS { 2 | background-color: var(--background-1); 3 | .item-26Dhrx { 4 | &[style*="rgb(114, 137, 218)"] { 5 | background: rgba(var(--accent), 1) !important; 6 | border-color: rgba(var(--accent), 1) !important; 7 | } 8 | } 9 | .checkboxMute-14hTGS { 10 | &:before { 11 | background-color: var(--background-2); 12 | } 13 | } 14 | .cardPrimaryEditable-3KtE4g { 15 | background: var(--background-2); 16 | border-color: var(--background-2); 17 | .checked-3_4uQ9 { 18 | border-color: #fff !important; 19 | background-color: #fff !important; 20 | polyline { 21 | stroke: rgba(var(--accent), 1); 22 | } 23 | } 24 | } 25 | .checked-3_4uQ9 { 26 | border-color: rgba(var(--accent), 1) !important; 27 | background-color: rgba(var(--accent), 1) !important; 28 | polyline { 29 | stroke: #fff; 30 | } 31 | } 32 | .footer-3rDWdC { 33 | background-color: var(--background-2); 34 | box-shadow: none; 35 | } 36 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_quicktravel.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-3qKHyN { 3 | height: auto; 4 | } 5 | .quickswitcher-3JagVE { 6 | background-color: var(--background-1); 7 | box-shadow: var(--box-shadow); 8 | padding: 0; 9 | .input-2VB9rf { 10 | margin: 20px 20px 0; 11 | box-sizing: border-box; 12 | padding: 0 20px; 13 | background: var(--modal-bg1-search); 14 | box-shadow: var(--box-shadow); 15 | &::placeholder { 16 | color: var(--text-1); 17 | opacity: 0.4; 18 | } 19 | } 20 | .scroller-zPkAnE { 21 | background: transparent; 22 | padding: 20px 30px 20px 20px; 23 | box-sizing: border-box; 24 | > div[style*="height: 15px"] { 25 | display: none; 26 | } 27 | } 28 | .resultFocused-3aIoYe { 29 | background: var(--background-2); 30 | } 31 | .tipsWithResults-HhTE9b { 32 | padding: 20px; 33 | box-sizing: border-box; 34 | background: var(--background-2); 35 | border: none; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_selectregion.scss: -------------------------------------------------------------------------------- 1 | #app-mount .regionSelectModal-12e-57 { 2 | background: var(--background-2); 3 | .regionSelectModalOption-2DSIZ3 { 4 | background: var(--background-1); 5 | border: none; 6 | box-shadow: var(--box-shadow); 7 | } 8 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_upload.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal-2ifh8j { 2 | background-color: var(--background-1); 3 | .inner-3nWsbo { 4 | margin: 0; 5 | } 6 | .comment-4IWttf { 7 | margin: 0; 8 | padding: 0 20px 20px; 9 | box-sizing: border-box; 10 | .inner-zqa7da { 11 | background-color: var(--background-2); 12 | } 13 | } 14 | .channelTextAreaUpload-3t7EIx { 15 | margin: 5px 0 0; 16 | .scrollableContainer-2NUZem { 17 | background-color: var(--foreground-1); 18 | } 19 | .charCounter-7fw40k.charcounter { 20 | bottom: unset; 21 | top: -18px; 22 | } 23 | } 24 | .footer-3mqk7D { 25 | background-color: var(--background-2); 26 | box-shadow: none; 27 | .checked-3_4uQ9[style*="rgb(114, 137, 218)"] { 28 | border-color: rgba(var(--accent), 1) !important; 29 | background: rgba(var(--accent), 1) !important; 30 | polyline { 31 | stroke: #fff; 32 | } 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /MinimalCord/src/modals/_usermodal.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modal-3c3bKg .root-SR8cQa { 2 | background: transparent; 3 | [class*="topSection"] { 4 | .headerFill-adLl4x { 5 | background: transparent; 6 | } 7 | &:not([class*="SectionNormal"]) .profileBadge-2BqF-Z { 8 | filter: var(--modal-badge-invert); 9 | } 10 | } 11 | .topSectionNormal-2-vo2m { 12 | background: var(--background-1); 13 | } 14 | .topSectionPlaying-1J5E4n { 15 | background: var(--background-1); 16 | .lookInverted-2D7oAl.colorBrand-3pXr91 { 17 | background: var(--blurple); 18 | color: #fff; 19 | } 20 | } 21 | .tabBarContainer-1s1u-z { 22 | border: none; 23 | } 24 | .activityProfile-2bJRaP { 25 | position: relative; 26 | cursor: pointer; 27 | .headerTextNormal-2mGWX3 { 28 | margin-bottom: 0; 29 | } 30 | .body-ZAhrcj { 31 | max-height: 0; 32 | overflow: hidden; 33 | transition: 0.4s ease; 34 | transition-delay: 0s; 35 | } 36 | &:after { 37 | content: ""; 38 | width: 8px; 39 | height: 8px; 40 | border-left: 1px solid var(--text-1); 41 | border-bottom: 1px solid var(--text-1); 42 | display: block; 43 | position: absolute; 44 | right: 25px; 45 | top: 23px; 46 | transform: rotate(-135deg); 47 | transition: 0.4s ease; 48 | transition-delay: 0s; 49 | } 50 | &:hover { 51 | .body-ZAhrcj { 52 | max-height: 130px; 53 | margin-top: 10px; 54 | transition-delay: 0.3s; 55 | } 56 | &:after { 57 | transform: rotate(-45deg); 58 | transition-delay: 0.3s; 59 | } 60 | } 61 | } 62 | .topSectionSpotify-1lI0-P { 63 | background: var(--background-1); 64 | .lookInverted-2D7oAl.colorGreen-29iAKY, 65 | .lookOutlined-3sRXeN.colorWhite-rEQuAQ { 66 | background: var(--spotify-green); 67 | color: #fff; 68 | border: none; 69 | &:hover { 70 | background: var(--spotify-green-dark); 71 | } 72 | } 73 | .bar-3urHkF { 74 | background-color: var(--text-dark); 75 | .barInner-3NDaY_ { 76 | background-color: var(--text-1); 77 | } 78 | } 79 | } 80 | .username-3gJmXY { 81 | color: var(--text-1); 82 | } 83 | .activityHeader-1PExlk, 84 | .activityName-1IaRLn, 85 | .additionalActionsIcon-1FoUlE, 86 | .contentGameImageProfile-WTVbI0, 87 | .customStatusText-39gdCI, 88 | .discriminator-xUhQkU, 89 | .headerText-1HLrL7, 90 | .text-AOoUen, 91 | .textRow-19NEd_ { 92 | color: var(--text-1); 93 | } 94 | .tabBarItem-1b8RUP { 95 | color: var(--text-1) !important; 96 | &[style]:not([style*="border-color: transparent"]) { 97 | border-color: var(--text-1) !important; 98 | } 99 | } 100 | .body-3ND3kc { 101 | background: var(--background-2); 102 | .connectedAccount-36nQx7 { 103 | background: var(--modal-connection); 104 | border: none; 105 | box-shadow: var(--box-shadow); 106 | } 107 | .listRow-hutiT_:hover { 108 | background: var(--modal-list); 109 | } 110 | } 111 | } -------------------------------------------------------------------------------- /MinimalCord/src/pages/_discovery.scss: -------------------------------------------------------------------------------- 1 | #app-mount .pageWrapper-1PgVDX { 2 | background-color: var(--background-1); 3 | .bg-AYqtMd { 4 | display: none; 5 | } 6 | .card-3DjzTQ { 7 | border-radius: 5px; 8 | } 9 | .card-3DjzTQ, .css-1wqqa50-container, .searchBox-3Y2Vi7 { 10 | background-color: var(--pages-box); 11 | box-shadow: var(--box-shadow); 12 | } 13 | } -------------------------------------------------------------------------------- /MinimalCord/src/pages/_friends.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-1D34oG { 3 | background: var(--background-1); 4 | } 5 | .tabBody-3YRQ8W:before { 6 | content: none; 7 | } 8 | .peopleListItem-2nzedh { 9 | border-radius: 3px; 10 | &:hover { 11 | background: var(--background-2); 12 | } 13 | } 14 | .nowPlayingColumn-2sl4cE { 15 | background: var(--background-2); 16 | .emptyCard-1RJw8n { 17 | background: var(--background-1); 18 | box-shadow: var(--box-shadow); 19 | } 20 | .wrapper-3D2qGf { 21 | background: var(--dropdown); 22 | .inset-3sAvek { 23 | background: rgba(0,0,0,0.2); 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /MinimalCord/src/pages/_library.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-3Mxszk { 2 | .scroller-1IIF0A { 3 | background: var(--background-1); 4 | } 5 | } -------------------------------------------------------------------------------- /MinimalCord/src/pages/_nitro.scss: -------------------------------------------------------------------------------- 1 | #app-mount .applicationStore-1pNvnv { 2 | background: var(--background-1); 3 | .container-xm7Ad0:before { 4 | content: none; 5 | } 6 | .scroller-9moviB { 7 | background-color: transparent; 8 | } 9 | .detailsBlock-FoDTGA { 10 | background-color: var(--pages-box); 11 | box-shadow: var(--box-shadow); 12 | } 13 | .tier1Banner-1B_WXY { 14 | background-color: var(--pages-box); 15 | background-image: none; 16 | box-shadow: var(--box-shadow); 17 | } 18 | .gradientOverlayLeft-3w159C { 19 | background: linear-gradient(90deg,var(--background-1),transparent); 20 | } 21 | .gradientOverlayRight-3vMuS8 { 22 | background: linear-gradient(90deg,transparent,var(--background-1)); 23 | } 24 | .tile-QA_yMc { 25 | background-color: var(--pages-box); 26 | box-shadow: var(--box-shadow); 27 | } 28 | .arrow-15GutB { 29 | background: var(--pages-box); 30 | box-shadow: var(--box-shadow); 31 | } 32 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_addrole.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-VSDcQc { 2 | .autocompleteShadow-iiGWFU { 3 | box-shadow: var(--box-shadow); 4 | background: var(--user-popout); 5 | } 6 | .autocompleteArrow-Zxoy9H { 7 | box-shadow: var(--box-shadow); 8 | background: var(--user-popout); 9 | } 10 | .header-2bNvm4 { 11 | background: var(--user-popout-body); 12 | } 13 | .sectionTag-pXyto9 { 14 | background: var(--user-popout); 15 | } 16 | .row-rrHHJU.selected-1pIgLL { 17 | background: rgba(255,255,255,0.02); 18 | } 19 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_auditlogs.scss: -------------------------------------------------------------------------------- 1 | #app-mount .popoutList-T9CKZQ { 2 | background: var(--dropdown); 3 | padding: 0; 4 | .container-cMG81i { 5 | background: var(--dropdown-header); 6 | border-radius: 4px 4px 0 0; 7 | .inner-2P4tQO { 8 | padding: 0 10px 0 0; 9 | display: flex; 10 | align-items: center; 11 | input { 12 | padding: 10px; 13 | height: auto; 14 | } 15 | } 16 | } 17 | .divider-3573oO { 18 | display: none; 19 | } 20 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .autocomplete-1vrmpx { 2 | background: var(--dropdown); 3 | box-shadow: var(--box-shadow); 4 | .selectorSelected-1_M1WV { 5 | background-color: var(--dropdown-item-hover); 6 | } 7 | .container-cMG81i { 8 | background-color: var(--background-1); 9 | } 10 | .focused-1En8bG:after, 11 | .result-3w1ZcL:hover:after { 12 | box-shadow: inset 0 0 0 2px rgba(var(--accent), 1); 13 | } 14 | .categoryFadeBlurple-1j72_A { 15 | background: rgba(var(--accent), 0.5); 16 | } 17 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .styleFlexible-wGDiIL, 3 | .submenu-2-ysNh { 4 | background: var(--dropdown); 5 | } 6 | .barFill-23-gu- { 7 | background: rgb(var(--accent)); 8 | } 9 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_emojipicker.scss: -------------------------------------------------------------------------------- 1 | #app-mount .emojiPicker-3m1S-j { 2 | background: var(--dropdown); 3 | box-shadow: var(--box-shadow); 4 | .scroller-3vODG7 { 5 | height: var(--emoji-picker-height); 6 | } 7 | .searchBar-2pWH0_ { 8 | background: var(--dropdown-header); 9 | } 10 | .infoBar-U6oBFk { 11 | background: var(--dropdown); 12 | box-shadow: var(--box-shadow); 13 | } 14 | .stickyHeader-1SS0JU { 15 | background: var(--dropdown); 16 | opacity: 1; 17 | } 18 | .categories-1feg4n { 19 | background: var(--dropdown-header); 20 | } 21 | .popout-2nUePc { 22 | background: var(--dropdown); 23 | box-shadow: var(--box-shadow); 24 | } 25 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_mentions.scss: -------------------------------------------------------------------------------- 1 | #app-mount .messagesPopoutWrap-1MQ1bW { 2 | background-color: var(--dropdown); 3 | box-shadow: var(--box-shadow); 4 | border: none; 5 | .header-ykumBX { 6 | background-color: var(--dropdown-header); 7 | box-shadow: var(--box-shadow); 8 | } 9 | .container-3iAQ-0 { 10 | padding: 10px; 11 | box-sizing: border-box; 12 | margin: 10px 10px 0 10px; 13 | border-radius: 5px; 14 | background: var(--dropdown-item-hover); 15 | } 16 | .channelHeader-3Gd2xq { 17 | background: transparent; 18 | } 19 | .messageContainer-gbhlwo { 20 | background: var(--dropdown); 21 | } 22 | .button-1-5Aqk { 23 | background: var(--message-button); 24 | } 25 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_rtc.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-v9HyYc[style*="left"][style*="bottom"] .container-2x5lvQ { 2 | background: var(--dropdown); 3 | box-shadow: var(--box-shadow); 4 | border-radius: 3px; 5 | header { 6 | background: var(--dropdown-header); 7 | } 8 | section { 9 | background-color: transparent; 10 | } 11 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_search.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Searchbar 3 | .searchBar-3dMhjb { 4 | background: var(--background-2); 5 | .searchAnswer-3Dz2-q, 6 | .searchFilter-2ESiM3 { 7 | background-color: var(--foreground-1); 8 | color: var(--text-1); 9 | } 10 | } 11 | // Suggestions / dropdown 12 | .container-3ayLPN { 13 | background-color: var(--dropdown); 14 | box-shadow: var(--box-shadow); 15 | .displayedNick-3xxvzU, 16 | .filter-3Y_im-, 17 | .header-2N-gMV { 18 | color: var(--text-1); 19 | } 20 | .answer-1n6g43, 21 | .displayUsername-Qekxml { 22 | color: var(--text-3); 23 | } 24 | .option-96V44q { 25 | &.selected-rZcOL- { 26 | background-color: var(--search-filter-hover); 27 | .plusIcon-v0BTrL { 28 | color: var(--text-1); 29 | opacity: 1; 30 | } 31 | &:after { 32 | background: linear-gradient(90deg, transparent, var(--search-filter-hover) 80%); 33 | } 34 | } 35 | &:after { 36 | background: transparent; 37 | } 38 | } 39 | .react-datepicker { 40 | background-color: var(--background-3); 41 | border-radius: 0; 42 | } 43 | .react-datepicker__header { 44 | background-color: Var(--background-3); 45 | } 46 | .react-datepicker__day { 47 | background-color: var(--background-4); 48 | } 49 | .react-datepicker__day--disabled, 50 | .react-datepicker__day--outside-month { 51 | background-color: var(--background-1); 52 | } 53 | } 54 | // Results 55 | .searchResultsWrap-3-pOjs { 56 | background: var(--background-1); 57 | } 58 | .searchResult-9tQ1uo { 59 | &:before, &:after { 60 | content: none; 61 | } 62 | } 63 | .searchResultMessage-1fxgXh.hit-1fVM9e { 64 | box-shadow: var(--box-shadow); 65 | border: none; 66 | background: var(--message-box); 67 | } 68 | .embedFull-2tM8-- { 69 | background: var(--background-1) 70 | } 71 | .channelName-1JRO3C { 72 | background: var(--background-1); 73 | } 74 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_serverdropdown.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-v9HyYc[style*="left"][style*="top"] .menu-Sp6bN1 { 2 | background: var(--dropdown); 3 | box-shadow: var(--box-shadow); 4 | .item-1GzJrl { 5 | &:not(.invite-271nFU):not(.leave-1DRJfn) { 6 | color: var(--text-2); 7 | &:hover { 8 | color: var(--text-1) !important; 9 | } 10 | } 11 | &:first-child .label-1Y-LW5 { 12 | color: var(--nitro); 13 | } 14 | &:hover { 15 | background-color: var(--dropdown-item-hover); 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_statuspicker.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-v9HyYc[style*="left"][style*="bottom"] .menu-Sp6bN1 { 2 | background: var(--dropdown); 3 | box-shadow: var(--box-shadow); 4 | .itemBase-1Qj4z6 { 5 | &:hover { 6 | background-color: var(--dropdown-item-hover); 7 | color: var(--text-1); 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_unreads.scss: -------------------------------------------------------------------------------- 1 | #app-mount .recentMentionsPopout-3rCiI6 { 2 | background: var(--dropdown); 3 | .header-2-Imhb { 4 | background: var(--dropdown-header); 5 | } 6 | } -------------------------------------------------------------------------------- /MinimalCord/src/popouts/_userpopout.scss: -------------------------------------------------------------------------------- 1 | #app-mount .userPopout-3XzG_A { 2 | box-shadow: var(--box-shadow); 3 | background: var(--user-popout); 4 | .header-2BwW8b { 5 | .headerName-fajvi9, 6 | .headerTag-2pZJzA, 7 | .headerTagUsernameNoNickname-2_H881 { 8 | color: var(--text-1); 9 | } 10 | } 11 | .headerNormal-T_seeN, 12 | .headerPlaying-j0WQBV { 13 | background: transparent; 14 | } 15 | .headerSpotify-zpWxgT { 16 | background: transparent; 17 | .lookOutlined-3sRXeN.colorWhite-rEQuAQ { 18 | background: var(--spotify-green); 19 | color: #fff; 20 | border: none; 21 | &:hover { 22 | background: var(--spotify-green-dark); 23 | } 24 | } 25 | } 26 | .headerStreaming-2FjmGz { 27 | background: transparent; 28 | .lookOutlined-3sRXeN.colorWhite-rEQuAQ { 29 | background: var(--twitch-purple); 30 | border: none; 31 | &:hover { 32 | background: var(--twitch-purple-dark); 33 | } 34 | } 35 | } 36 | .activity-11LB_k { 37 | background: transparent; 38 | .activityName-1IaRLn, 39 | .headerText-1HLrL7 { 40 | color: var(--text-1); 41 | } 42 | .content-3JfFJh { 43 | color: var(--text-2); 44 | } 45 | } 46 | .body-3iLsc4 { 47 | background: var(--user-popout-body); 48 | padding: 10px; 49 | &::-webkit-scrollbar { 50 | display: none; 51 | } 52 | } 53 | .textRow-19NEd_ { 54 | color: var(--text-1); 55 | } 56 | .addButton-pcyyf6 { 57 | position: absolute; 58 | top: 7px; 59 | right: 6px; 60 | border: none; 61 | &:hover { 62 | color: var(--text-1); 63 | } 64 | } 65 | .customStatus-1bh2V9 { 66 | color: var(--text-1); 67 | } 68 | .bodyTitle-Y0qMQz { 69 | color: var(--text-1); 70 | } 71 | .note-3HfJZ5 { 72 | margin-left: 0; 73 | position: relative; 74 | textarea { 75 | max-height: unset; 76 | &:focus { 77 | background: var(--user-popout-message); 78 | } 79 | } 80 | .charcounter.popout { 81 | bottom: unset !important; 82 | top: -19px; 83 | } 84 | } 85 | .footer-1fjuF6 { 86 | background: var(--user-popout-body); 87 | border: none; 88 | padding: 0; 89 | .input-cIJ7To { 90 | background: var(--user-popout-message); 91 | border: none; 92 | margin: 0 10px 10px; 93 | box-sizing: border-box; 94 | width: calc(100% - 20px); 95 | &::placeholder { 96 | text-transform: uppercase; 97 | font-weight: bold; 98 | letter-spacing: 1.5px; 99 | font-size: 12px; 100 | opacity: 0.7; 101 | } 102 | } 103 | .protip-YaFfgO { 104 | display: none; 105 | } 106 | } 107 | } 108 | 109 | .theme-light .userPopout-3XzG_A { 110 | [mask*="url(#svg-mask-status-online)"] { 111 | fill: var(--text-1) !important; 112 | } 113 | [mask*="url(#svg-mask-status-dnd)"] { 114 | fill: var(--red); 115 | } 116 | .headerPlaying-j0WQBV, .headerSpotify-zpWxgT { 117 | .profileBadgeHypeSquadOnlineHouse2-3jBpXR, 118 | .profileBadgePremium-3kZ9Qj, 119 | .profileBadgeEarlySupporter-PQB_0a, 120 | [class*="BadgeHype"] { 121 | filter: invert(1); 122 | } 123 | } 124 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles](https://github.com/DiscordStyles) 3 | -------------------------------------------------------------------------------- /RadialStatus/README.md: -------------------------------------------------------------------------------- 1 | ### This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles/RadialStatus](https://github.com/DiscordStyles/RadialStatus) 3 | -------------------------------------------------------------------------------- /RadialStatus/RadialStatus.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name RadialStatus 3 | * @author Gibbu#1211 4 | * @version 1.0.0 5 | * @description Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file. 6 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/RadialStatus 7 | * @website https://www.gibbu.me 8 | */ 9 | 10 | @import url("https://gibbu.github.io/BetterDiscord-Themes/RadialStatus/base.css"); 11 | 12 | :root { 13 | --rs-small-spacing: 2px; /* spacing between avatar and status */ 14 | --rs-large-spacing: 3px; /* spacing between avatar and status for user popouts & modals/profiles */ 15 | --rs-width: 2px; /* Width/thickness of status border */ 16 | --rs-avatar-shape: 50%; /* 50% for round - 0% for square */ 17 | --rs-online-color: #43b581; /* color for online status */ 18 | --rs-idle-color: #faa61a; /* color for idle status */ 19 | --rs-dnd-color: #f04747; /* color for dnd status */ 20 | --rs-offline-color: #636b75; /* color for offline status */ 21 | --rs-streaming-color: #643da7; /* color for streaming status */ 22 | --rs-invisible-color: #747f8d; /* color for invisible status - Note this will only show for your own invisibility */ 23 | } -------------------------------------------------------------------------------- /RadialStatus/base.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/RadialStatus/base.css"); 2 | -------------------------------------------------------------------------------- /SimplyDark/SimplyDark.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name SimplyDark 3 | * @author Gibbu#1211 4 | * @version 2.0.0 5 | * @description Makes Discord sharp and Simple. 6 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/SimplyDark 7 | * @website https://gibbu.me/ 8 | */ 9 | 10 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900'); 11 | @import url("https://gibbu.github.io/BetterDiscord-Themes/SimplyDark/base.css"); 12 | 13 | /* Black Box user tags */ 14 | @import url('https://monstrousdev.github.io/themes/addons/user-tags.css'); 15 | 16 | /* Old Windows titlebar - remove this @import if you wish to use default titlebar */ 17 | @import url("https://gibbu.github.io/BetterDiscord-Themes/addons/windows-titlebar.css"); 18 | 19 | :root { 20 | 21 | --SD-bgR: 10; /* RED value | 0 - 255 | DEFAULT: 10 */ 22 | --SD-bgG: 10; /* GREEN value | 0 - 255 | DEFAULT: 10 */ 23 | --SD-bgB: 10; /* BLUE value | 0 - 255 | DEFAULT: 10 */ 24 | 25 | --SD-emojipickerheight: 224px; /* Height of the emojipicker. Changing this may cause issues in some places. | DEFAULT: 224px */ 26 | --SD-roundness: 0px; /* Roundness for avatars, servers ect... | DEFAULT: 0px | MAX: 30px */ 27 | --SD-avatar-status-width: 2px; /* Width of status border around avatars (must end in px) | DEFAULT: 2px */ 28 | 29 | /* 30 | Accent variable 31 | Use this website: https://htmlcolorcodes.com/color-picker/ 32 | to get your desired RGB numbers. Then simply put each number in their respective area. 33 | R,G,B 34 | */ 35 | --SD-accent: 33,150,243; 36 | 37 | /* 38 | To use a custom font. Visit https://fonts.google.com and select one to your liking. 39 | Now just follow this tutorial: https://imgur.com/a/CNbw7xC 40 | */ 41 | --SD-font: 'Roboto'; 42 | 43 | } 44 | -------------------------------------------------------------------------------- /SimplyDark/base.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/SimplyDark/base.css"); 2 | -------------------------------------------------------------------------------- /SimplyDark/readme.md: -------------------------------------------------------------------------------- 1 | ### This repo is not longer in use. 2 | ### All themes have been moved to [DiscordStyles/SimplyDark](https://github.com/DiscordStyles/SimplyDark) 3 | -------------------------------------------------------------------------------- /SimplyDark/src/SimplyDark.theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name SimplyDark 3 | * @author Gibbu#1211 4 | * @version 2.0.0 5 | * @description Makes Discord sharp and Simple. 6 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/SimplyDark 7 | * @website https://gibbu.me/ 8 | */ 9 | 10 | @import url('https://monstrousdev.github.io/themes/addons/user-tags.css'); 11 | @import url("https://gibbu.github.io/BetterDiscord-Themes/addons/windows-titlebar.css"); 12 | 13 | :root { 14 | 15 | --SD-bgR: 10; /* RED value | 0 - 255 | DEFAULT: 10 */ 16 | --SD-bgG: 10; /* GREEN value | 0 - 255 | DEFAULT: 10 */ 17 | --SD-bgB: 10; /* BLUE value | 0 - 255 | DEFAULT: 10 */ 18 | 19 | --SD-emojipickerheight: 300px; /* Height of the emojipicker. Changing this may cause issues in some places. | DEFAULT: 224px */ 20 | --SD-roundness: 0px; /* Roundness for avatars, servers ect... | DEFAULT: 0px | MAX: 30px */ 21 | --SD-avatar-status-width: 2px; /* Width of status border around avatars (must end in px) | DEFAULT: 2px */ 22 | 23 | /* 24 | Accent variable 25 | Use this website: https://htmlcolorcodes.com/color-picker/ 26 | to get your desired RGB numbers. Then simply put each number in their respective area. 27 | R,G,B 28 | */ 29 | --SD-accent: 33,150,243; 30 | 31 | /* 32 | To use a custom font. Visit https://fonts.google.com and select one to your liking. 33 | Now just follow this tutorial: https://imgur.com/a/CNbw7xC 34 | */ 35 | --SD-font: 'Roboto'; 36 | 37 | } 38 | 39 | @import 'global/vars'; 40 | 41 | @import 'general/serverlist'; 42 | @import 'general/channels'; 43 | @import 'general/chat'; 44 | @import 'general/members'; 45 | @import 'general/settings'; 46 | @import 'general/pages'; 47 | @import 'general/keyframes'; 48 | @import 'general/customCSS'; 49 | 50 | @import 'global/scrollbars'; 51 | @import 'global/headers'; 52 | @import 'global/global'; 53 | @import 'global/popouts'; 54 | @import 'global/modals'; 55 | @import 'global/version'; 56 | 57 | @import 'tempfixes'; -------------------------------------------------------------------------------- /SimplyDark/src/_tempfixes.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .contentRegionScroller-26nc1e, 3 | .sidebarRegionScroller-3MXcoP { 4 | background: transparent; 5 | } 6 | } 7 | 8 | [class*="baseLayer"]::before { 9 | content:'This version of SimplyDark is outdated and will no longer be updated. Please download the newest version from https://betterdiscord.net/ghdl?id=3362'; 10 | background:var(--red); 11 | height:32px; 12 | width:100%; 13 | position:relative; 14 | display:flex; 15 | align-items:center; 16 | justify-content:center; 17 | padding:10px; 18 | color:#fff; 19 | white-space:nowrap; 20 | overflow:hidden; 21 | text-overflow:ellipsis; 22 | } -------------------------------------------------------------------------------- /SimplyDark/src/general/_customCSS.scss: -------------------------------------------------------------------------------- 1 | [id*="bd-customcss-editor"] { 2 | background: var(--bg5); 3 | .ace_gutter { 4 | background: var(--bg7); 5 | } 6 | .ace_active-line { 7 | background: var(--bg6); 8 | } 9 | } 10 | #bd-customcss-attach-controls { 11 | position: relative; 12 | } 13 | #bd-customcss-attach-controls { 14 | box-shadow: none !important; 15 | background: var(--bg7) !important; 16 | padding: 0 !important; 17 | .btn { 18 | background: var(--bg13) !important; 19 | border: none !important; 20 | margin: 0 !important; 21 | } 22 | span[style="font-size: 10px; margin-left: 5px;"] { 23 | position: absolute; 24 | right: 4px; 25 | margin-top: -25px; 26 | opacity: 0.5; 27 | } 28 | .help-text { 29 | position: absolute; 30 | top: 0; 31 | right: 0; 32 | font-size: 12px; 33 | opacity: 0.5; 34 | .inline { 35 | font-size: 12px; 36 | background: var(--bg4); 37 | } 38 | } 39 | .checkbox-group { 40 | padding: 10px 0 0 10px; 41 | margin-bottom: -10px; 42 | } 43 | } 44 | #bd-customcss-detach-controls-button { 45 | display: flex; 46 | margin-top: 25px; 47 | button { 48 | flex: 1; 49 | padding: 10px 0; 50 | height: auto !important; 51 | &:hover { 52 | background: var(--bg15) !important; 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /SimplyDark/src/general/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes slideIn { 2 | from { 3 | transform: scale(1,0); 4 | } 5 | to { 6 | transform: scale(1,1); 7 | } 8 | } 9 | @keyframes fadeInLeft { 10 | from { 11 | transform: translateX(-3px); 12 | opacity: 0; 13 | } 14 | to { 15 | transform: translateX(0px); 16 | opacity: 1; 17 | } 18 | } -------------------------------------------------------------------------------- /SimplyDark/src/general/_members.scss: -------------------------------------------------------------------------------- 1 | #app-mount .membersWrap-2h-GB4 { 2 | background: var(--bg4); 3 | .members-1998pB, .members-1998pB>div { 4 | background: transparent; 5 | } 6 | .member-3-YXUe { 7 | margin-left: 0; 8 | position: relative; 9 | min-width: 100%; 10 | .layout-2DM8Md { 11 | background: transparent; 12 | padding-left: 16px; 13 | } 14 | &:hover { 15 | background: var(--bg5); 16 | [aria-label*="mobile"]:before { 17 | background: linear-gradient(90deg, transparent, var(--bg5) 50%) !important; 18 | } 19 | } 20 | &.selected-aXhQR6 { 21 | background: var(--bg6); 22 | [aria-label*="mobile"]:before { 23 | background: linear-gradient(90deg, transparent, var(--bg6) 50%) !important; 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /SimplyDark/src/general/_serverlist.scss: -------------------------------------------------------------------------------- 1 | .platform-win .wrapper-1Rf91z .scroller-2TZvBN { 2 | padding-top: 8px; 3 | } 4 | .scroller-2TZvBN::-webkit-scrollbar { 5 | display: none; 6 | } 7 | .wrapper-1Rf91z { 8 | background-color: var(--bg6) !important; 9 | .folder-21wGz3 { 10 | background: var(--bg10); 11 | &.hover-2ji_A7 { 12 | background-color: var(--bg12); 13 | } 14 | } 15 | .expandedFolderBackground-2sPsd- { 16 | background-color: var(--bg8); 17 | &.hover-2ji_A7 { 18 | background-color: var(--bg10); 19 | } 20 | } 21 | .listItem-2P_4kh { 22 | position: relative; 23 | * { 24 | mask: none !important; 25 | border-radius: 0 !important; 26 | -webkit-mask: none !important; 27 | } 28 | .dragInner-_SHftW { 29 | background: var(--bg4); 30 | } 31 | [class*="pill"] { 32 | height: 100%; 33 | width: 4px; 34 | span { 35 | height: 100% !important; 36 | transition: 0.2s ease !important; 37 | transform: scale(1,0) !important; 38 | // Unread 39 | @for $i from 0 through 8 { 40 | &[style*="height: #{$i}"] { 41 | transform: scale(1,0.25) !important; 42 | } 43 | } 44 | // Hovered 45 | @for $i from 9 through 20 { 46 | &[style*="height: #{$i}"] { 47 | transform: scale(1,0.50) !important; 48 | } 49 | } 50 | // Selected 51 | @for $i from 21 through 40 { 52 | &[style*="height: #{$i}"] { 53 | transform: scale(1,1) !important; 54 | } 55 | } 56 | } 57 | // Not hovered and no notification 58 | } 59 | .blobContainer-239gwq { 60 | .acronym-2mOFsV { 61 | background-color: var(--bg8); 62 | color: #ddd; 63 | border-radius: var(--SD-roundness) !important; 64 | } 65 | img { 66 | border-radius: var(--SD-roundness) !important; 67 | } 68 | } 69 | .guildsError-b7zR5H, 70 | .icon-27yU2q { 71 | border-radius: var(--SD-roundness) !important; 72 | } 73 | } 74 | .expandedFolderBackground-2sPsd-, .folder-21wGz3, .folderIconWrapper-226oVY, .iconSizeSmol-2Dw61G, .numberBadge-2s8kKX { 75 | border-radius: var(--SD-roundness) !important; 76 | } 77 | .childWrapper-anI2G9, .circleIconButton-jET_ig { 78 | background-color: var(--bg8); 79 | border-radius: var(--SD-roundness) !important; 80 | } 81 | .guildSeparator-3s64Iy { 82 | background: var(--bg10); 83 | width: 48px; 84 | } 85 | [class*="unreadMentionsIndicator"] { 86 | padding: 0; 87 | height: auto; 88 | } 89 | } -------------------------------------------------------------------------------- /SimplyDark/src/global/_headers.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .title-3qD0b- { 3 | background-color: var(--bg7); 4 | box-shadow: none; 5 | .children-19S4PO::after { 6 | content: none; 7 | } 8 | .clickable-3rdHwn .icon-22AiRD { 9 | color: #aaa; 10 | } 11 | .search-2oPWTC { 12 | .searchBar-3dMhjb { 13 | width: 24px; 14 | background: transparent; 15 | .iconContainer-O4O2CN { 16 | width: 20px; 17 | height: 20px; 18 | svg { 19 | color: #aaa; 20 | } 21 | } 22 | } 23 | &.open-6_Y_aH { 24 | width: 224px; 25 | .searchBar-3dMhjb { 26 | width: 100%; 27 | background: var(--bg10); 28 | } 29 | } 30 | } 31 | } 32 | .header-2o-2hj { 33 | background: var(--bg7); 34 | box-shadow: none; 35 | &:hover { 36 | background: var(--bg7); 37 | } 38 | } 39 | .container-1r6BKw { 40 | background: var(--bg7); 41 | box-shadow: none; 42 | .status-1XNdyw { 43 | border-radius: var(--SD-roundness) !important; 44 | overflow: hidden; 45 | } 46 | .children-19S4PO:after { 47 | content: none; 48 | } 49 | .mask-1qbNWk { 50 | width: 16px; 51 | rect { 52 | mask: none; 53 | width: 16px !important; 54 | x: -3 !important; 55 | } 56 | } 57 | .item-PXvHYJ { 58 | &:hover { 59 | background-color: var(--bg10); 60 | } 61 | &.selected-3s45Ha { 62 | background-color: var(--bg15); 63 | } 64 | } 65 | .divider-3FBTu8 { 66 | background: var(--bg10); 67 | } 68 | .children-19S4PO .icon-22AiRD { 69 | color: #fff; 70 | } 71 | .clickable-3rdHwn { 72 | &:hover .icon-22AiRD { 73 | color: #fff; 74 | } 75 | &.icon-22AiRD { 76 | color: #aaa; 77 | } 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /SimplyDark/src/global/_scrollbars.scss: -------------------------------------------------------------------------------- 1 | .scroller-1JbKMe, 2 | .scroller-2TZvBN { 3 | background: transparent; 4 | } 5 | 6 | ::-webkit-scrollbar { 7 | width: 8px !important; 8 | height: 8px !important; 9 | } 10 | ::-webkit-scrollbar, 11 | ::-webkit-scrollbar-track, 12 | ::-webkit-scrollbar-track-piece { 13 | border-color: transparent !important; 14 | background: transparent !important; 15 | } 16 | ::-webkit-scrollbar-thumb { 17 | border-radius: 0 !important; 18 | border: none !important; 19 | background-clip: content-box !important; 20 | background-color: rgba(255,255,255,0.05) !important; 21 | } 22 | ::-webkit-scrollbar-thumb:hover { 23 | background-color: rgba(255,255,255,0.07) !important; 24 | } 25 | ::-webkit-scrollbar-thumb:active { 26 | background-color: rgba(255,255,255,0.1) !important; 27 | } 28 | ::-webkit-scrollbar-corner { 29 | visibility: hidden !important; 30 | } 31 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar, 32 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-corner, 33 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-thumb, 34 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-track { 35 | display: none !important; 36 | } -------------------------------------------------------------------------------- /SimplyDark/src/global/_vars.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg1: rgba( var(--SD-bgR), var(--SD-bgG), var(--SD-bgB), 1); 3 | --bg2: rgba( calc(var(--SD-bgR) * 1.5), calc(var(--SD-bgG) * 1.5), calc(var(--SD-bgB) * 1.5), 1); 4 | --bg3: rgba( calc(var(--SD-bgR) * 2), calc(var(--SD-bgG) * 2), calc(var(--SD-bgB) * 2), 1); 5 | --bg4: rgba( calc(var(--SD-bgR) * 2.5), calc(var(--SD-bgG) * 2.5), calc(var(--SD-bgB) * 2.5), 1); 6 | --bg5: rgba( calc(var(--SD-bgR) * 3), calc(var(--SD-bgG) * 3), calc(var(--SD-bgB) * 3), 1); 7 | --bg6: rgba( calc(var(--SD-bgR) * 3.5), calc(var(--SD-bgG) * 3.5), calc(var(--SD-bgB) * 3.5), 1); 8 | --bg7: rgba( calc(var(--SD-bgR) * 4), calc(var(--SD-bgG) * 4), calc(var(--SD-bgB) * 4), 1); 9 | --bg8: rgba( calc(var(--SD-bgR) * 4.5), calc(var(--SD-bgG) * 4.5), calc(var(--SD-bgB) * 4.5), 1); 10 | --bg9: rgba( calc(var(--SD-bgR) * 5), calc(var(--SD-bgG) * 5), calc(var(--SD-bgB) * 5), 1); 11 | --bg10: rgba( calc(var(--SD-bgR) * 5.5), calc(var(--SD-bgG) * 5.5), calc(var(--SD-bgB) * 5.5), 1); 12 | --bg11: rgba( calc(var(--SD-bgR) * 6), calc(var(--SD-bgG) * 6), calc(var(--SD-bgB) * 6), 1); 13 | --bg12: rgba( calc(var(--SD-bgR) * 6.5), calc(var(--SD-bgG) * 6.5), calc(var(--SD-bgB) * 6.5), 1); 14 | --bg13: rgba( calc(var(--SD-bgR) * 7), calc(var(--SD-bgG) * 7), calc(var(--SD-bgB) * 7), 1); 15 | --bg14: rgba( calc(var(--SD-bgR) * 7.5), calc(var(--SD-bgG) * 7.5), calc(var(--SD-bgB) * 7.5), 1); 16 | --bg15: rgba( calc(var(--SD-bgR) * 8), calc(var(--SD-bgG) * 8), calc(var(--SD-bgB) * 8), 1); 17 | 18 | --SD-accent-default: 33,150,243; 19 | --SD-accent-set: var(--SD-accent, var(--SD-accent-default)); 20 | --text-link: rgba(var(--SD-accent-set), 1); 21 | 22 | $greenDark: darken(#43b581, 10%); 23 | $yellowDark: darken(#faa61a, 10%); 24 | $purpleDark: darken(#593695, 10%); 25 | 26 | --green: #43b581; 27 | --greenDark: #{$greenDark}; 28 | 29 | --yellow: #faa61a; 30 | --yellowDark: #{$yellowDark}; 31 | 32 | --red: #f04747; 33 | --redDark: #b63b3b; 34 | 35 | --purple: #593695; 36 | --purpleDark: #{$purpleDark}; 37 | 38 | --blurple: #7289da; 39 | --nitro: #ff73fa; 40 | 41 | --TB-position-top: calc(var(--server-size) + 20px) 42 | } 43 | -------------------------------------------------------------------------------- /SimplyDark/src/global/_version.scss: -------------------------------------------------------------------------------- 1 | .colorMuted-HdFt4q.size12-3cLvbJ:first-child:before { 2 | content: "SimplyDark v2.0.1 by Gibbu"; 3 | display: block; 4 | } -------------------------------------------------------------------------------- /Slate/assets/illustrations/1.svg: -------------------------------------------------------------------------------- 1 | ufo-alert -------------------------------------------------------------------------------- /Slate/readme.md: -------------------------------------------------------------------------------- 1 |

This branch is deprecated. The latest version can be found at https://github.com/DiscordStyles/Slate.

2 | 3 |

Slate

4 |

An optimized, consistent, and functional theme for Discord based on GitHub's design language.

5 | 6 | ![](https://i.imgur.com/GEcQZhN.png) 7 | 8 | --- 9 | 10 | ## Features 11 | * Light Mode Support 12 | * Compact Mode Support 13 | * Extremely flexible and customizable, with a wide array of CSS variables. 14 | * Full app coverage, 10k+ Lines 15 | * [USRBG](http://github.com/discord-Custom-Covers/usrbg/) Integration 16 | * Consistent layout and design 17 | 18 | ## Developers & Contributors 19 | 20 | | | | 21 | |:-:|:-:| 22 | | Gibbu | Tropical | 23 | 24 | ## Translation Team 25 | 26 | * Translations are coming soon. 27 | 28 | ## Documentation 29 | 30 | Documentation, including customization guides can be found in the [Wiki](https://github.com/GibbuPCStuff/Slate) of this repo 31 | -------------------------------------------------------------------------------- /Slate/src/Slate.theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Slate 3 | * @author Gibbu#1211 & Tropical#8908 4 | * @version Dev 5 | * @invite TeRQEPb 6 | * @description An optimized, consistent, and functional theme for Discord based on GitHub's design language. 7 | * @source https://github.com/Gibbu/BetterDiscord-Themes/tree/master/Slate 8 | * @website https://gibbu.github.io/BetterDiscord-Themes/Slate/ 9 | */ 10 | @import url("https://gibbu.github.io/BetterDiscord-Themes/AdjustableServerWidth/base.css"); 11 | :root { 12 | --accent: 3, 102, 214; 13 | --link-colour: 48, 144, 255; 14 | --server-icon-size: 35px; 15 | --server-icon-spacing: 8px; 16 | --server-container-padding: 10px; 17 | } 18 | 19 | @import 'root'; 20 | @import 'dark'; 21 | @import 'light'; 22 | 23 | @import 'assets/import'; 24 | @import 'app/import'; 25 | @import 'channels/import'; 26 | @import 'guilds/guilds'; 27 | @import 'chat/import'; 28 | @import 'members/import'; 29 | @import 'pages/import'; 30 | @import 'popouts/import'; 31 | @import 'settings/import'; 32 | @import 'bd/import'; 33 | @import 'modals/import'; 34 | @import 'inputs/import'; 35 | 36 | @import 'os/import'; 37 | @import 'plugins/import'; 38 | 39 | @import 'keyframes'; -------------------------------------------------------------------------------- /Slate/src/_dark.scss: -------------------------------------------------------------------------------- 1 | .theme-dark, 2 | html.theme-dark #app-mount .theme-light .root-1gCeng, 3 | html.theme-dark .force-theme.theme-light { 4 | // Text and Borders 5 | --base-border: #141414; 6 | --text-normal: #d1d5da; 7 | --text-muted: #959da5; 8 | --text-focus: #ffffff; 9 | --text-link: rgb(var(--link-colour)); 10 | 11 | // Background 12 | --background-light: #2f363d; 13 | --background: #24292e; 14 | --background-alt: #2a3036; 15 | --background-dark: #1d2125; 16 | 17 | // Guilds 18 | --guilds-background:var(--background); 19 | 20 | // White 21 | --white:#ffffff; // Only use to contrast a primary background. 22 | 23 | // Input 24 | --input-height: 25px; 25 | 26 | // Scrollbars 27 | --scrollbar-background: rgb(255 255 255 / 0.1); 28 | --scrollbar-background-hover: rgb(255 255 255 / 0.2); 29 | --scrollbar-background-active: rgb(255 255 255 / 0.3); 30 | 31 | // Discord variables 32 | --background-modifier-hover: var(--background-light); 33 | --background-modifier-active: #444d56; 34 | --background-modifier-selected: var(--accent-solid); 35 | 36 | // Syntax 37 | --syntax-blue:#79b8ff; 38 | --syntax-purple:#b392f0; 39 | --syntax-grey:#959da5; 40 | --syntax-grey-alt:#d1d5da; 41 | --syntax-orange:#ffab70; 42 | --syntax-green:#56b6c2; 43 | } -------------------------------------------------------------------------------- /Slate/src/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes growIn { 2 | from { 3 | transform: scale(0) !important; 4 | opacity: 0 !important; 5 | } 6 | to { 7 | transform: scale(1) !important; 8 | opacity: 1 !important; 9 | } 10 | } 11 | 12 | @keyframes modal { 13 | 0% { 14 | transform:scale(.75); 15 | } 16 | 100% { 17 | transform:scale(1); 18 | } 19 | } 20 | 21 | @keyframes fadeIn { 22 | 0% { 23 | opacity:0; 24 | } 25 | 100% { 26 | opacity:1; 27 | } 28 | } 29 | 30 | @keyframes addJoinMenu { 31 | 0% { 32 | transform:translateX(-10%); 33 | } 34 | 100% { 35 | transform:none; 36 | } 37 | } 38 | 39 | @keyframes rotate { 40 | 0% { 41 | transform:rotate(0); 42 | } 43 | 100% { 44 | transform:rotate(360deg); 45 | } 46 | } 47 | 48 | @keyframes progress-indeterminate { 49 | 100% { 50 | background-position: 100px 0px; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /Slate/src/_light.scss: -------------------------------------------------------------------------------- 1 | .theme-light, 2 | html.theme-light #app-mount .theme-light .root-1gCeng, 3 | html.theme-light .force-theme.theme-light { 4 | // Text and Borders 5 | --base-border: #e1e4e8; 6 | --secondary-border-color:#d1d5da; // Light Mode Only 7 | --text-default: #24292e; 8 | --text-muted: #6a737d; 9 | --text-focus: #000000; 10 | --text-link: rgb(var(--link-colour)); 11 | 12 | // Background 13 | --background-light: #f6f8fa; 14 | --background-alt: #ffffff; 15 | --background:#ffffff; 16 | --background-dark: #ebeef1; 17 | 18 | // Guilds 19 | --guilds-background:var(--background); 20 | 21 | //White 22 | --white: #ffffff; // Only use to contrast a primary background. 23 | 24 | // Input 25 | --input-height: 25px; 26 | 27 | // Scrollbars 28 | --scrollbar-background: rgb(0 0 0 / 0.3); 29 | --scrollbar-background-hover: rgb(0 0 0 / 0.4); 30 | --scrollbar-background-active: rgb(0 0 0 / 0.5); 31 | 32 | // Discord variables 33 | --background-modifier-hover: #f2f2f2; 34 | --background-modifier-active: #e5e5e5; 35 | --background-modifier-selected: var(--accent-solid); 36 | 37 | // Syntax 38 | --syntax-blue:#79b8ff; 39 | --syntax-purple:#b392f0; 40 | --syntax-grey:#6a737d; 41 | --syntax-grey-alt:#24292e; 42 | --syntax-orange:#ffab70; 43 | --syntax-green:#56b6c2; 44 | } -------------------------------------------------------------------------------- /Slate/src/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --slate-version: "Slate 1.1.6"; 3 | 4 | // Roundness 5 | --border-radius: 3px; 6 | --button-border-radius: 2px; 7 | 8 | // Primary Coloring 9 | --accent-solid: rgba(var(--accent), 1); 10 | --bd-blue: var(--accent-solid); 11 | --bd-blue-hover: var(--accent-solid); 12 | 13 | // ASW Fallbacks 14 | --noasw-padding: calc(var(--container, 0) - 4px); 15 | --noasw-base: var(--container, 72px); 16 | --noasw-channel-header: var(--container, 0px); 17 | 18 | // Spacing 19 | --spacing-third: calc(var(--spacing) / 3); 20 | --spacing-half: calc(var(--spacing) / 2); 21 | --spacing: 10px; 22 | --spacing-double: calc(var(--spacing) * 2); 23 | --spacing-triple: calc(var(--spacing) * 3); 24 | 25 | // Fonts 26 | --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; 27 | --font-family-monospace: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; 28 | 29 | // Text Scaling 30 | --font-size-xsm:9px; 31 | --font-size-sm: 11px; 32 | --font-size: 12px; 33 | --font-size-md: 14px; 34 | --font-size-lg: 28px; 35 | --font-size-xl: 32px; 36 | --font-size-xxl: 42px; 37 | --line-height-sm: 1; 38 | --line-height: 1.5; 39 | 40 | // Font weights 41 | --font-weight-light: 300; 42 | --font-weight-normal: 400; 43 | --font-weight-semibold: 600; 44 | --font-weight-bold: 700; 45 | 46 | // Titlebar 47 | --titlebar-height: 28px; 48 | --win32-close-background-hover:#e81123; 49 | --win32-close-background-active:#bf0f1d; 50 | 51 | // Toolbar 52 | --toolbar-height: 50px; 53 | --toolbar-text-normal: #d1d5da; 54 | --toolbar-text-muted: #959da5; 55 | --toolbar-text-focus: #ffffff; 56 | --toolbar-search-background: #161a1d; 57 | --toolbar-search-border: var(--toolbar-border); 58 | --toolbar-background: #1d2125; 59 | --toolbar-background-hover: #2f363d; 60 | --toolbar-background-active:#444d56; 61 | --toolbar-background-alt: #24292e; 62 | --toolbar-border: #141414; 63 | 64 | // List Items 65 | --item-height: 34px; 66 | 67 | // Sidebars 68 | --sidebar-width: 260px; 69 | --member-height: 42px; 70 | --channel-height: 32px; 71 | 72 | // Avatars 73 | --avatar-size-xsm:18px; 74 | --avatar-size-sm: 24px; 75 | --avatar-size: 28px; 76 | --avatar-size-lg: 45px; 77 | --avatar-size-xl: 64px; 78 | 79 | // Modals 80 | --backdrop: rgb(0 0 0 / 0.4); 81 | 82 | // Elevation 83 | --elevation-1: 0 8px 24px rgba(0,0,0,0.15); 84 | --elevation-2: 0 2px 7px rgba(12, 7, 7, 0.7); 85 | 86 | // Status Colors 87 | --status-green: 40, 167, 69; 88 | --status-yellow: 219, 171, 9; 89 | --status-red: 215, 58, 73; 90 | --status-purple: 89, 54, 149; 91 | --status-grey: 117, 128, 142; 92 | --discord-pink: 255, 115, 250; 93 | --discord-blurple: 114, 137, 218; 94 | 95 | // RadialStatus 96 | --rs-small-spacing: 0px; 97 | --rs-large-spacing: 0px; 98 | --rs-width: 2px; 99 | --rs-avatar-shape: 5%; 100 | } -------------------------------------------------------------------------------- /Slate/src/app/_app.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-input-placeholder { 2 | user-select: none; 3 | } 4 | 5 | html { 6 | line-height: var(--line-height); 7 | } 8 | 9 | .app-2rEoOp, 10 | .bg-h5JY_x { 11 | background:var(--background); 12 | transform:none !important; 13 | } 14 | 15 | #app-mount { 16 | background: var(--toolbar-background); 17 | .base-3dtUhz { 18 | border-radius: 0; 19 | left: var(--noasw-base); 20 | overflow: visible !important; 21 | } 22 | .layer-3QrUeG.baseLayer-35bLyl { 23 | opacity: 1 !important; 24 | transform: scale(1) !important; 25 | } 26 | 27 | // Mentions/Channel jump 28 | .mention { 29 | background: rgba(var(--accent), 0.15); 30 | border-radius: var(--border-radius); 31 | color: var(--accent-solid); 32 | cursor:default; 33 | &:hover { 34 | background: var(--accent-solid); 35 | color: var(--white); 36 | } 37 | } 38 | 39 | // Remove box-shadow from chat 40 | .content-yTz4x3:before { 41 | content: none; 42 | } 43 | } -------------------------------------------------------------------------------- /Slate/src/app/_badge.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .badge-1Skb69[style*="rgb(240, 71, 71)"], 3 | .numberBadge-2s8kKX { 4 | border-radius:var(--button-border-radius) !important; 5 | font-size:var(--font-size-sm); 6 | font-weight:var(--font-weight-normal); 7 | background:rgb(var(--status-red)) !important; 8 | color:var(--white); 9 | line-height:normal; 10 | height:fit-content; 11 | width:fit-content !important; 12 | padding:0 calc(var(--spacing) / 2.5) !important; 13 | min-height:unset; 14 | min-width:unset; 15 | display:flex; 16 | align-items:center; 17 | justify-content:center; 18 | } 19 | } -------------------------------------------------------------------------------- /Slate/src/app/_notice.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .base-3dtUhz .notice-2FJMB4 { 3 | width:calc(100% - var(--sidebar-width)); 4 | margin-left:var(--sidebar-width); 5 | height:36px; 6 | +.content-98HsJk { 7 | .privateChannels-1nO12o { 8 | .searchBar-6Kv8R2, 9 | .scroller-1JbKMe { 10 | margin-top:-36px; 11 | } 12 | } 13 | .header-2o-2hj, 14 | .scroller-2wx7Hm { 15 | margin-top:-36px; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /Slate/src/app/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .messagesPopout-24nkyi, 3 | .listWrapper-3kgtQ0 .scroller-2FKFPG, 4 | .contentWrapper-SvZHNd .scroller-2FKFPG, 5 | .container-1D34oG .scrollerBase-289Jih, 6 | .scroller-zPkAnE, 7 | .infoScroller-3EYYns, 8 | .listScroller-2_vlfo, 9 | .scroller-2LSbBU, 10 | .rolesList-22qj2L, 11 | .templatesList-2E6rTe, 12 | .autocompleteScroller-iInVqR { 13 | &::-webkit-scrollbar { 14 | width: 4px; 15 | display: none; 16 | background: transparent !important; 17 | } 18 | &::-webkit-scrollbar-track { 19 | margin:0; 20 | } 21 | &::-webkit-scrollbar-track-piece { 22 | background: transparent; 23 | border-color: transparent; 24 | } 25 | &::-webkit-scrollbar-thumb { 26 | background-color: var(--scrollbar-background); 27 | border-radius: 0; 28 | border-radius: var(--border-radius); 29 | border: none; 30 | &:hover { 31 | background-color: var(--scrollbar-background-hover); 32 | } 33 | &:active { 34 | background-color: var(--scrollbar-background-active); 35 | } 36 | } 37 | &::-webkit-scrollbar-button, 38 | &::-webkit-scrollbar-corner { 39 | display: none !important; 40 | } 41 | &:hover { 42 | overflow: overlay !important; 43 | &::-webkit-scrollbar { 44 | display: block; 45 | } 46 | } 47 | } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /Slate/src/app/_spacing.scss: -------------------------------------------------------------------------------- 1 | 2 | .horizontal-1ae9ci > .flex-1xMQg5, 3 | .horizontal-1ae9ci > .flexChild-faoVW3 { 4 | margin: 0 var(--spacing); 5 | } 6 | .marginTop4-2BNfKC { 7 | margin-top: var(--spacing-half); 8 | } 9 | .marginBottom4-2qk4Hy { 10 | margin-bottom: var(--spacing-half); 11 | } 12 | .marginTop8-1DLZ1n { 13 | margin-top: var(--spacing); 14 | } 15 | .marginBottom8-AtZOdT { 16 | margin-bottom: var(--spacing); 17 | } 18 | .marginTop20-3TxNs6 { 19 | margin-top: var(--spacing-double); 20 | } 21 | .marginBottom20-32qID7 { 22 | margin-bottom: var(--spacing-double); 23 | } 24 | .marginTop40-i-78cZ { 25 | margin-top: calc(var(--spacing) * 4); 26 | } 27 | .marginBottom40-2vIwTv { 28 | margin-bottom: calc(var(--spacing) * 4); 29 | } 30 | .marginTop60-3PGbtK { 31 | margin-top: calc(var(--spacing) * 6); 32 | } 33 | .marginBottom60-Gs8NBA { 34 | margin-bottom: calc(var(--spacing) * 6); 35 | } -------------------------------------------------------------------------------- /Slate/src/app/_spinner.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .spinner-2enMB9 { 3 | background:var(--text-normal); 4 | -webkit-mask:url($icon_spinner) center/12px no-repeat; 5 | animation:rotate 1s linear infinite; 6 | .wanderingCubesItem-WPXqao, 7 | .chasingDotsItem-2DVNUn, 8 | .pulsingEllipsis-3YiXRF { 9 | display:none; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /Slate/src/app/_text.scss: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background: var(--accent-solid); 3 | color: #fff; 4 | } 5 | ::-webkit-input-placeholder, body, button, input, select, textarea { 6 | font-family:var(--font-family-sans-serif); 7 | } 8 | h1, h2, h3, h4, h5, h6, p { 9 | user-select: text; 10 | } 11 | .h5-18_1nd { 12 | color: var(--text-normal); 13 | text-transform: none; 14 | font-weight: var(--font-weight-normal); 15 | cursor: text; 16 | font-size: var(--font-size); 17 | } 18 | .errorMessage-3Guw2R { 19 | color: rgb(var(--status-red)); 20 | font-size: var(--font-size); 21 | font-weight: var(--font-weight-normal); 22 | } 23 | .colorStatusRed-1YV2rj { 24 | color:rgb(var(--status-red)); 25 | } 26 | .colorStandard-2KCXvj { 27 | color:var(--text-normal); 28 | } 29 | strong { 30 | font-weight:var(--font-weight-bold); 31 | } 32 | .size12-3cLvbJ { 33 | font-size:var(--font-size); 34 | } 35 | a { 36 | cursor:default; 37 | color:var(--text-link); 38 | } -------------------------------------------------------------------------------- /Slate/src/app/_tooltips.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .tooltip-2QfLtc, 3 | .subscribeTooltipWrapper-32-Ce8 { 4 | padding: var(--spacing-third) var(--spacing); 5 | border-radius: var(--border-radius); 6 | background: var(--background); 7 | color: var(--text-normal); 8 | box-shadow: var(--elevation-1); 9 | font-size: var(--font-size); 10 | border: 1px solid var(--base-border); 11 | position: relative; 12 | font-weight: var(--font-weight-semibold); 13 | transform: none !important; 14 | &.subscribeTooltipWrapper-32-Ce8 { 15 | padding:var(--spacing); 16 | &:after { 17 | margin:0; 18 | } 19 | .subscribeTooltipHeader-2etyUq { 20 | margin-bottom:var(--spacing-half); 21 | color:var(--text-normal); 22 | font-weight:var(--font-weight-semibold); 23 | font-size:var(--font-size-md); 24 | } 25 | .subscribeTooltipText-w-pylu { 26 | margin:0; 27 | color:var(--text-muted); 28 | font-weight:var(--font-weight-normal); 29 | font-size:var(--font-size); 30 | } 31 | .subscribeTooltipButton-r9C2rU { 32 | margin-top:var(--spacing); 33 | } 34 | } 35 | .tooltipContent-bqVLWK { 36 | padding: 0; 37 | } 38 | .tooltipPointer-3ZfirK, 39 | &.subscribeTooltipWrapper-32-Ce8:after { 40 | background: var(--background); 41 | border: 1px solid var(--base-border); 42 | width: 8px; 43 | height: 8px; 44 | clip-path: polygon(100% 0, 0% 100%, 0 0); 45 | } 46 | &.tooltipRight-2JM5PQ .tooltipPointer-3ZfirK { 47 | transform: rotate(-45deg); 48 | margin-right: -5px; 49 | } 50 | &.tooltipLeft-3EDOk1 .tooltipPointer-3ZfirK { 51 | transform: rotate(135deg); 52 | margin-left: -5px; 53 | } 54 | &.tooltipBottom-3ARrEK .tooltipPointer-3ZfirK, 55 | &.subscribeTooltipWrapper-32-Ce8:after { 56 | transform: rotate(45deg); 57 | margin-bottom: -5px; 58 | } 59 | &.tooltipTop-XDDSxx .tooltipPointer-3ZfirK { 60 | transform: rotate(-135deg); 61 | margin-top: -5px; 62 | } 63 | .size14-e6ZScH { 64 | color:var(--text-normal); 65 | font-size:var(--font-size); 66 | line-height:normal; 67 | &.clickCTA-kIMiUd { 68 | color:var(--text-muted); 69 | font-size:var(--font-size-sm); 70 | } 71 | } 72 | .userTooltip-7qZaHD { 73 | font-size:var(--font-size); 74 | color:var(--text-normal); 75 | .avatar-i5C_qp { 76 | margin-right:var(--spacing-half); 77 | } 78 | .discriminator-17tNDS { 79 | opacity:1; 80 | color:var(--text-muted); 81 | } 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /Slate/src/app/_tutorialCircle.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .indicator-1afSc8[data-tutorial-id="direct-messages"] { 3 | margin-top:44px; 4 | margin-left:13px; 5 | } 6 | .indicator-1afSc8[data-tutorial-id="create-first-server"] { 7 | margin-top:-6px; 8 | margin-left:-22px; 9 | } 10 | .outerCircle-2K0c82, 11 | [data-tutorial-id="organize-by-topic"], 12 | [data-tutorial-id="voice-conversations"], 13 | [data-tutorial-id="instant-invite"] { 14 | display:none; 15 | } 16 | .innerCircle-2Tsscg { 17 | background:var(--accent-solid); 18 | -webkit-mask:url(/assets/5d7b0c4b2a82d63d829b6ea591853c22.svg) 50% no-repeat; 19 | } 20 | .bottom-UE1eOv, 21 | .top-3fo3zT { 22 | display:none; 23 | } 24 | } -------------------------------------------------------------------------------- /Slate/src/app/import.scss: -------------------------------------------------------------------------------- 1 | @import url('https://discord-custom-covers.github.io/usrbg/dist/usrbg.css'); 2 | @import 'app'; 3 | @import 'text'; 4 | @import 'titlebar'; 5 | @import 'toolbar'; 6 | @import 'tooltips'; 7 | @import 'status'; 8 | @import 'scrollbar'; 9 | @import 'badge'; 10 | @import 'spinner'; 11 | @import 'spacing'; 12 | @import 'tutorialCircle'; 13 | @import 'notice'; -------------------------------------------------------------------------------- /Slate/src/assets/_illustrations.scss: -------------------------------------------------------------------------------- 1 | $illustration_1: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/1.svg'; 2 | 3 | $illustration_2: "https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/2.svg"; 4 | 5 | $illustration_3: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/3.svg'; 6 | 7 | $illustration_4: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/4.svg'; 8 | 9 | $illustration_5: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/5.svg'; 10 | 11 | $illustration_6: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/6.svg'; 12 | 13 | $illustration_7: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/8.svg'; 14 | 15 | $illustration_8: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/9.svg'; 16 | 17 | $illustration_9: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/10.svg'; 18 | 19 | $illustration_10: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/11.svg'; 20 | 21 | $illustration_11: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/12.svg'; 22 | 23 | $illustration_12: 'https://gibbu.github.io/BetterDiscord-Themes/Slate/assets/illustrations/13.svg'; -------------------------------------------------------------------------------- /Slate/src/assets/import.scss: -------------------------------------------------------------------------------- 1 | @import 'icons'; 2 | @import 'paths'; 3 | @import 'illustrations'; -------------------------------------------------------------------------------- /Slate/src/bd/_chat.scss: -------------------------------------------------------------------------------- 1 | #app-mount .bd-chat-badge { 2 | height: var(--font-size); 3 | display: flex; 4 | align-items: center; 5 | margin-top: 2px; 6 | } -------------------------------------------------------------------------------- /Slate/src/bd/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | #app-mount #bd-settingspane-container .ui-switch-wrapper { 2 | width: 13px; 3 | height: 13px; 4 | .ui-switch { 5 | width: 13px; 6 | height: 13px; 7 | border-radius: var(--border-radius); 8 | background-color: var(--checkbox-background); 9 | border: 1px solid var(--checkbox-border); 10 | margin-left: 0; 11 | &:before { 12 | content: ""; 13 | width: 8px !important; 14 | height: 3px !important; 15 | background: transparent !important; 16 | border-bottom: 2px solid var(--checkbox-tick) !important; 17 | border-left: 2px solid var(--checkbox-tick) !important; 18 | display: block !important; 19 | opacity: 0 !important; 20 | top: 2px !important; 21 | box-shadow: none !important; 22 | left: 1px !important; 23 | transform: rotate(-45deg) translate(0) !important; 24 | } 25 | &.checked { 26 | background-color: var(--checkbox-background) !important; 27 | &:before { 28 | opacity: 1 !important; 29 | } 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /Slate/src/bd/_customcss.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | #bd-settingspane-container .contentColumn-2hrIYH { 3 | padding: 0 !important; 4 | h2.ui-form-title.margin-bottom-20 { 5 | display: none; 6 | } 7 | } 8 | .checkbox { 9 | color: var(--text-normal); 10 | font-weight: var(--font-weight-normal); 11 | } 12 | #bd-customcss-attach-controls { 13 | box-shadow: none; 14 | height: auto; 15 | border-top: 1px solid var(--base-border); 16 | background: var(--background); 17 | display: flex; 18 | align-items: center; 19 | justify-content: space-between; 20 | padding: var(--spacing); 21 | .checkbox-group li { 22 | margin-top: 0; 23 | .checkbox-inner + span { 24 | font-size:var(--font-size); 25 | margin-left:var(--spacing); 26 | line-height:normal; 27 | } 28 | } 29 | } 30 | #bd-customcss-detach-controls-button { 31 | button { 32 | margin:0; 33 | margin-left:var(--spacing); 34 | font-size: var(--font-size); 35 | font-weight: var(--font-weight-normal); 36 | cursor: default; 37 | min-height: var(--input-height); 38 | height: var(--input-height); 39 | line-height: normal; 40 | padding: 0 var(--spacing); 41 | border-radius: var(--button-border-radius) !important; 42 | color: var(--text-normal); 43 | background: var(--background-light); 44 | border: 1px solid var(--base-border) !important; 45 | &:hover { 46 | border: 1px solid currentColor !important; 47 | } 48 | &:focus { 49 | box-shadow: 0 0 0 1px currentColor !important; 50 | border: 1px solid currentColor !important; 51 | } 52 | } 53 | & > div, & > span { 54 | display: none; 55 | } 56 | } 57 | } 58 | #app-mount [aria-label*="SETTINGS"] .ace_editor { 59 | height: calc(65vh - 96px); 60 | min-height: 400px; 61 | } 62 | #app-mount #bd-customcss-detach-container { 63 | border-left: 1px solid var(--base-border); 64 | #bd-customcss-detach-editor { 65 | height: calc(100vh - var(--titlebar-height) - 50px); 66 | } 67 | } -------------------------------------------------------------------------------- /Slate/src/bd/_settings.scss: -------------------------------------------------------------------------------- 1 | #bd-settingspane-container { 2 | // Buttons 3 | .bd-addon-button, .bd-button, .bda-link { 4 | font-size: var(--font-size); 5 | font-weight: var(--font-weight-normal); 6 | cursor: default; 7 | min-height: 25px; 8 | height: 25px; 9 | line-height: normal; 10 | transition: none; 11 | padding: 0 var(--spacing); 12 | border-radius: var(--button-border-radius); 13 | display: inline-flex; 14 | align-items: center; 15 | border: none !important; 16 | text-decoration: none; 17 | user-select: none; 18 | } 19 | .bd-button { 20 | &:hover { 21 | box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1); 22 | background: rgb(var(--accent)); 23 | } 24 | &:focus { 25 | box-shadow: 0 0 0 2px rgba(var(--accent), 0.25), inset 0 0 0 100vmax rgba(255, 255, 255, 0.1); 26 | } 27 | } 28 | .ui-switch-item { 29 | margin: var(--spacing) var(--spacing-double); 30 | h3 { 31 | font-size: var(--font-size-md); 32 | color: var(--text-normal); 33 | } 34 | .style-description { 35 | border-color: var(--base-border); 36 | color: var(--text-muted) !important; 37 | font-size: var(--font-size); 38 | } 39 | &:first-of-type { 40 | margin-top: var(--spacing-double); 41 | } 42 | &:last-of-type { 43 | margin-bottom: var(--spacing-double); 44 | .style-description { 45 | border-color: transparent; 46 | } 47 | } 48 | } 49 | .bd-pfbtn { 50 | margin: var(--spacing-double) 0 var(--spacing-double) var(--spacing-double); 51 | } 52 | .bd-controls { 53 | padding: 0 var(--spacing-double); 54 | } 55 | } -------------------------------------------------------------------------------- /Slate/src/bd/_settingsSidebar.scss: -------------------------------------------------------------------------------- 1 | #app-mount #bd-settings-sidebar { 2 | padding-bottom: calc(var(--spacing) - 5px); 3 | .ui-tab-bar-separator { 4 | background-color: var(--base-border); 5 | margin: var(--spacing) 0 calc(var(--spacing) + 5px); 6 | } 7 | .ui-tab-bar-header { 8 | display: none; 9 | } 10 | .ui-tab-bar-item { 11 | margin: calc(var(--spacing) / 3) var(--spacing-double); 12 | font-weight: var(--font-weight-normal); 13 | font-size: var(--font-size); 14 | padding: var(--spacing); 15 | border-radius: var(--border-radius); 16 | color: var(--text-normal); 17 | display: flex; 18 | align-items: center; 19 | line-height:normal; 20 | cursor:default; 21 | min-width:165px; 22 | &:before { 23 | content: ""; 24 | width: 16px; 25 | height: 16px; 26 | background: var(--text-muted); 27 | display: block; 28 | margin-right: var(--spacing); 29 | } 30 | // Settings 31 | &:nth-child(3):before { 32 | mask: url($icon_cog) center/cover no-repeat; 33 | } 34 | // Emotes 35 | &:nth-child(4):before { 36 | mask: url($icon_smiley) center/cover no-repeat; 37 | } 38 | // Plugins 39 | &:nth-child(5):before { 40 | mask: url($icon_plug) center/12px no-repeat; 41 | } 42 | // Themes 43 | &:nth-child(6):before { 44 | mask: url($icon_paint-roller) center/cover no-repeat; 45 | } 46 | // Custom CSS 47 | &:nth-child(7):before { 48 | mask: url($icon_code) center/cover no-repeat; 49 | } 50 | &:hover { 51 | background: transparent; 52 | } 53 | &.selected { 54 | color: #fff; 55 | background: var(--accent-solid); 56 | &:before { 57 | background-color: #fff; 58 | } 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /Slate/src/bd/import.scss: -------------------------------------------------------------------------------- 1 | @import 'settingsSidebar'; 2 | @import 'themepluginlist'; 3 | @import 'checkboxes'; 4 | @import 'customcss'; 5 | @import 'chat'; 6 | @import 'settings'; -------------------------------------------------------------------------------- /Slate/src/channels/_category.scss: -------------------------------------------------------------------------------- 1 | #app-mount .sidebar-2K8pFh { 2 | .containerDefault-3GGEv_, 3 | .containerDragAfter-3TEhpe, 4 | .containerDragBefore-3Dzc5x, 5 | .containerUserOver-1Tcb7l { 6 | padding: var(--spacing-half) 0; 7 | .wrapper-CU3qI5 { 8 | color: var(--text-normal); 9 | height:26px; 10 | padding-right:var(--spacing); 11 | padding-left:20px; 12 | cursor:default; 13 | svg, .name-IbjUBS, .container-2ax-kl { 14 | color: var(--text-normal); 15 | font-size:var(--font-size-sm); 16 | font-weight:var(--font-weight-semibold); 17 | line-height:normal; 18 | } 19 | .arrow-gKvcEx { 20 | left:4px; 21 | top:7px; 22 | } 23 | .name-IbjUBS, 24 | .container-2ax-kl { 25 | text-transform: none; 26 | } 27 | &.muted-1NRuDm { 28 | color: var(--text-muted); 29 | svg, .name-IbjUBS { 30 | color: var(--text-muted); 31 | } 32 | } 33 | .addButton-1BORro { 34 | height:14px; 35 | width:14px; 36 | svg { 37 | height:14px; 38 | width:14px; 39 | } 40 | } 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /Slate/src/channels/_unread.scss: -------------------------------------------------------------------------------- 1 | #app-mount .sidebar-2K8pFh { 2 | // Unread messages above 3 | .unreadTop-73gZ2_ .bar-30k2ka { 4 | border-bottom: 1px solid var(--base-border); 5 | } 6 | // Unread messages below 7 | .unreadBottom-3hWQ7c .bar-30k2ka { 8 | border-top: 1px solid var(--base-border); 9 | } 10 | .unread-1s3J68 { 11 | padding: 0; 12 | height: auto; 13 | } 14 | .bar-30k2ka { 15 | border-radius: 0; 16 | background: var(--background-light); 17 | opacity: 1; 18 | height: auto; 19 | box-shadow: none; 20 | line-height: normal; 21 | padding: var(--spacing-half) 0; 22 | transform: none !important; 23 | font-size: var(--font-size); 24 | font-weight: var(--font-weight-normal); 25 | text-transform: none; 26 | position: relative; 27 | width: 100%; 28 | color: rgba(var(--status-red)); 29 | border-right: 1px solid var(--base-border); 30 | box-sizing: border-box; 31 | &.unread-1xRYoj { 32 | color: var(--text-normal); 33 | } 34 | &[aria-hidden="true"] { 35 | display: none; 36 | } 37 | &:before { 38 | content: none; 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /Slate/src/channels/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'channel'; 3 | @import 'header'; 4 | @import 'panels'; 5 | @import 'unread'; 6 | @import 'category'; 7 | @import 'dm-list'; -------------------------------------------------------------------------------- /Slate/src/chat/_dividers.scss: -------------------------------------------------------------------------------- 1 | #app-mount .chatContent-a9vAAp .divider-JfaTT5 { 2 | height: auto; 3 | margin: 0; 4 | padding: var(--spacing-half) 0; 5 | border-top: 1px solid var(--base-border); 6 | background: var(--background); 7 | top: 0; 8 | .content-1o0f9g { 9 | background: transparent; 10 | font-size: var(--font-size-xsm); 11 | padding: 0 var(--spacing) 0 0; 12 | } 13 | & + .groupStart-23k01U { 14 | margin-top: 0; 15 | } 16 | &.isUnread-3Ef-o9 { 17 | border-bottom: 1px solid var(--base-border); 18 | .unreadPill-2HyYtt { 19 | position: unset; 20 | background: transparent; 21 | font-size: var(--font-size-xsm); 22 | color: rgba(var(--status-red), 1); 23 | padding: 0; 24 | svg { 25 | display: none; 26 | } 27 | } 28 | & + .groupStart-23k01U { 29 | margin-top: calc(var(--spacing) - 12px); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /Slate/src/chat/_placeholder.scss: -------------------------------------------------------------------------------- 1 | #app-mount .chat-3bRxxu { 2 | .wrapper-3vR61M { 3 | background: var(--background-alt); 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: flex-end; 7 | } 8 | .wrapper-1F5TKx { 9 | background: transparent; 10 | padding-top: var(--spacing); 11 | padding-bottom: var(--spacing); 12 | padding-left: calc(var(--avatar-size) + var(--spacing) * 2); 13 | & + :not([style*="margin-top"]) { 14 | margin-top: calc(var(--spacing) / -1); 15 | } 16 | &[style*="margin-top"] { 17 | border-top: 1px solid var(--base-border); 18 | margin-top: 0 !important; 19 | } 20 | } 21 | .avatar-2daVqv { 22 | border-radius: var(--border-radius); 23 | width: var(--avatar-size); 24 | height: var(--avatar-size); 25 | border: 1px solid var(--base-border); 26 | background: var(--background-dark); 27 | top: var(--spacing); 28 | left: var(--spacing); 29 | opacity: 1 !important; 30 | } 31 | .attachment-2p5mHK, 32 | .blob-2w7iIK { 33 | border-radius:var(--border-radius); 34 | background:var(--text-muted); 35 | height:4px; 36 | } 37 | } -------------------------------------------------------------------------------- /Slate/src/chat/_reactions.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .reactions-12N0jA { 3 | margin:0; 4 | padding:0; 5 | .reactionBtn-3N03Zj { 6 | color:var(--text-muted); 7 | cursor:default; 8 | display:flex; 9 | align-items:center; 10 | justify-content:center; 11 | &:hover, 12 | &[aria-expanded="true"] { 13 | color:var(--accent-solid) !important; 14 | } 15 | svg { 16 | width:12px; 17 | height:12px; 18 | color:inherit; 19 | path { 20 | d:path($path_add); 21 | transform:scale(1.6) translateX(1px) translateY(-1px); 22 | } 23 | } 24 | } 25 | .reaction-1hd86g { 26 | background: var(--background-light); 27 | border:1px solid var(--base-border); 28 | margin-bottom:var(--spacing-half); 29 | margin-right:var(--spacing-half); 30 | border-radius:var(--button-border-radius); 31 | cursor:default; 32 | box-sizing:border-box; 33 | padding:var(--spacing-third) var(--spacing-half); 34 | color:var(--text-normal); 35 | &:hover { 36 | border: 1px solid currentColor; 37 | } 38 | &:active { 39 | box-shadow: 0 0 0 1px currentColor; 40 | border: 1px solid currentColor; 41 | } 42 | .reactionInner-15NvIl { 43 | padding:0; 44 | .reactionCount-2mvXRV { 45 | margin:0; 46 | margin-left:var(--spacing-third); 47 | font-size:var(--font-size-sm); 48 | color:var(--text-normal); 49 | font-weight:var(--font-weight-normal); 50 | } 51 | .emoji { 52 | margin:0; 53 | width:var(--font-size-md); 54 | height:var(--font-size-md); 55 | } 56 | } 57 | &.reactionMe-wv5HKu { 58 | background: rgba(var(--accent), 0.25); 59 | border-color:var(--accent-solid); 60 | .reactionCount-2mvXRV { 61 | color: var(--text-focus); 62 | } 63 | &:active { 64 | box-shadow:0 0 0 2px rgba(var(--accent), 0.25); 65 | } 66 | } 67 | } 68 | } 69 | } 70 | 71 | // Light Mode 72 | 73 | html.theme-light #app-mount .reactions-12N0jA .reaction-1hd86g:not(.reactionMe-wv5HKu) { 74 | &:hover { 75 | background: var(--background); 76 | border: 1px solid var(--secondary-border-color); 77 | } 78 | &:active { 79 | box-shadow: 0 0 0 2px rgba(0,0,0,0.05) !important; 80 | border: 1px solid var(--secondary-border-color) !important; 81 | } 82 | } -------------------------------------------------------------------------------- /Slate/src/chat/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'dividers'; 3 | @import 'messages'; 4 | @import 'chatbox'; 5 | @import 'placeholder'; 6 | @import 'codeblock'; 7 | @import 'reactions'; -------------------------------------------------------------------------------- /Slate/src/inputs/_button.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .lookFilled-1Gx00P, 3 | .lookInverted-2D7oAl, 4 | .lookLink-9FtZy-, 5 | .lookOutlined-3sRXeN, 6 | .colorPrimary-3b3xI6.lookLink-9FtZy- { 7 | font-size: var(--font-size); 8 | font-weight: var(--font-weight-normal); 9 | cursor: default; 10 | min-height: var(--input-height); 11 | height: var(--input-height); 12 | line-height: normal; 13 | transition: none; 14 | box-sizing:border-box; 15 | padding: 0 var(--spacing); 16 | border-radius: var(--button-border-radius); 17 | .buttonIcon-1BKzBu { 18 | margin-right:var(--spacing-half); 19 | } 20 | } 21 | .lookFilled-1Gx00P { 22 | color: var(--white); 23 | background-color: rgb(var(--accent)); 24 | margin-left:var(--spacing); 25 | &:hover { 26 | box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0.1); 27 | } 28 | &:focus { 29 | box-shadow: 0 0 0 2px rgba(var(--accent), 0.25), inset 0 0 0 100vmax rgba(255,255,255,0.1); 30 | } 31 | } 32 | .colorPrimary-3b3xI6.lookLink-9FtZy-, 33 | .colorPrimary-3b3xI6.lookFilled-1Gx00P, 34 | .lookInverted-2D7oAl, 35 | .lookOutlined-3sRXeN, 36 | .secondaryButton-BIo-2g, 37 | .actionButton-uPB8Fs { 38 | color: var(--text-normal); 39 | background: var(--background-light); 40 | border: 1px solid var(--base-border); 41 | box-shadow: none !important; 42 | &:hover { 43 | border: 1px solid currentColor; 44 | .contents-18-Yxp { 45 | background-image:none; 46 | } 47 | } 48 | &:focus { 49 | box-shadow: 0 0 0 1px currentColor !important; 50 | border: 1px solid currentColor !important; 51 | } 52 | } 53 | .lookLink-9FtZy- { 54 | padding: 0; 55 | color: var(--text-link); 56 | height: auto; 57 | min-height: unset; 58 | cursor: pointer; 59 | &:hover .contents-18-Yxp { 60 | background-image: linear-gradient(0deg,transparent,transparent 1px,var(--text-link) 0,var(--text-link) 2px,transparent 0); 61 | } 62 | &.reset-2ikQ30 { 63 | opacity: 1; 64 | margin:0; 65 | } 66 | } 67 | .premiumIcon-YgHhed { 68 | margin-right:var(--spacing-third); 69 | height:16px; 70 | width:16px; 71 | } 72 | } 73 | 74 | // Light mode buttons 75 | .theme-light { 76 | #app-mount { 77 | .colorPrimary-3b3xI6.lookLink-9FtZy-, 78 | .colorPrimary-3b3xI6.lookFilled-1Gx00P, 79 | .lookInverted-2D7oAl, 80 | .lookOutlined-3sRXeN, 81 | .secondaryButton-BIo-2g, 82 | .actionButton-uPB8Fs { 83 | &:hover { 84 | background: var(--background); 85 | border: 1px solid var(--secondary-border-color); 86 | } 87 | &:focus { 88 | box-shadow: 0 0 0 2px rgba(0,0,0,0.05) !important; 89 | border: 1px solid var(--secondary-border-color) !important; 90 | } 91 | } 92 | } 93 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_card.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .card-3Qj_Yx { 3 | border-radius:var(--border-radius); 4 | padding:var(--spacing); 5 | 6 | // Status Cards 7 | &.cardWarning-2yPNAa { 8 | background-color:rgba(var(--status-yellow), .25); 9 | border-color:rgba(var(--status-yellow), .5); 10 | } 11 | &.cardDanger-ZurOv3 { 12 | background-color:rgba(var(--status-red), .25); 13 | border-color:rgba(var(--status-red), .5); 14 | } 15 | &.cardSuccess-3uEYjj { 16 | background-color:rgba(var(--status-green), .25); 17 | border-color:rgba(var(--status-green), .5); 18 | } 19 | &.cardBrand-39zmMQ { 20 | background-color:rgba(var(--accent), .25); 21 | border-color:rgba(var(--accent), .5); 22 | } 23 | 24 | // Primary Cards 25 | &.cardPrimary-1Hv-to, 26 | &.cardPrimaryOutline-29Ujqw, 27 | &.cardPrimaryEditable-3KtE4g { 28 | background-color: var(--background-alt); 29 | border-color: var(--base-border); 30 | } 31 | } 32 | // Close Button 33 | .button-2CgfFz { 34 | width:16px; 35 | height:16px; 36 | top:0; 37 | right:0; 38 | box-shadow:none; 39 | border-radius:0; 40 | transition:none; 41 | background:var(--text-muted); 42 | -webkit-mask:url($icon_close) center/12px no-repeat; 43 | transform:none; 44 | &:hover, 45 | &:active { 46 | background:var(--text-normal); 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_checkbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Remove Checkbox Styling 3 | .switch-3wwwcV { 4 | width: 14px; 5 | border-radius: 0; 6 | background: transparent; 7 | display: flex; 8 | align-items: center; 9 | box-shadow: none; 10 | -webkit-box-shadow: none; 11 | &:after, 12 | &:before { 13 | content: none; 14 | } 15 | .checkbox-2tyjJg { 16 | opacity: 1; 17 | height: 14px; 18 | width: 14px; 19 | position: relative; 20 | cursor: default; 21 | } 22 | } 23 | 24 | // Secondary Checkbox Elements 25 | .checkbox-3kaeSU .checkboxInner-3yjcPe .checkboxElement-1qV33p:checked + span { 26 | background-color: var(--accent-solid); 27 | border-color: var(--accent-solid); 28 | } 29 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_colorswatch.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gibbu/BetterDiscord-Themes/40b6c7a5adbf8efa1e5cc6cb290ba688c8526b06/Slate/src/inputs/_colorswatch.scss -------------------------------------------------------------------------------- /Slate/src/inputs/_datepicker.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .react-datepicker { 3 | padding:var(--spacing); 4 | width:100%; 5 | box-sizing:border-box; 6 | } 7 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_dropdown.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .popout-2sKjHu { 3 | background: var(--background); 4 | border: 1px solid var(--base-border); 5 | box-shadow:var(--elevation-1); 6 | } 7 | .optionLabel-2CkCZx { 8 | padding: var(--spacing); 9 | font-size: var(--font-size); 10 | line-height: inherit; 11 | } 12 | .css-n57xjs-menu, 13 | .css-1s13zip-menu, 14 | .lookFilled-1h1y05.popout-2sKjHu { 15 | background: var(--background); 16 | box-shadow: var(--elevation-1); 17 | border: 1px solid var(--base-border); 18 | border-radius:var(--border-radius); 19 | margin:0; 20 | margin-top:-2px; 21 | overflow:hidden; 22 | &.lookFilled-1h1y05.popout-2sKjHu { 23 | margin:0; 24 | z-index:10; 25 | } 26 | [class*="-option"], 27 | .optionLabel-2CkCZx { 28 | font-size: var(--font-size); 29 | padding:0 var(--spacing); 30 | height:var(--item-height); 31 | min-height: unset; 32 | cursor:default; 33 | color:var(--text-normal); 34 | display:flex; 35 | align-items:center; 36 | font-weight:var(--font-weight-normal); 37 | &:active { 38 | background:var(--background-modifier-active); 39 | } 40 | .arrow-2KJjTM { 41 | color:var(--text-muted); 42 | } 43 | } 44 | .css-1gnr91b-option { 45 | background: var(--background-modifier-hover); 46 | } 47 | .css-12o7ek3-option, 48 | .css-1kft5vg-option, 49 | .optionActive-KkAdqq { 50 | background: var(--accent-solid); 51 | color:var(--white); 52 | .icon-JJBzjE { 53 | color:var(--white); 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_keybind.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-1nZlH6 { 3 | border: 1px solid var(--base-border); 4 | border-radius: var(--border-radius); 5 | background: var(--background-dark); 6 | font-size: var(--font-size); 7 | height: var(--input-height); 8 | padding:0 var(--spacing-half); 9 | min-height: auto; 10 | animation:none; 11 | transition:none; 12 | cursor:default; 13 | .layout-eEMo5y { 14 | position:relative; 15 | height:100%; 16 | .input-1UhAnY { 17 | padding:0; 18 | font-size:var(--font-size); 19 | color:var(--text-normal); 20 | font-weight:var(--font-weight); 21 | height:100%; 22 | cursor:default; 23 | } 24 | .flex-1xMQg5 { 25 | align-items:center; 26 | } 27 | button { 28 | margin:0; 29 | padding:0; 30 | transition:none; 31 | cursor:default; 32 | width:16px; 33 | height:16px; 34 | background:var(--text-muted); 35 | -webkit-mask:url($icon_pencil) center/12px no-repeat; 36 | .contents-18-Yxp { 37 | display:none; 38 | } 39 | } 40 | .flag-16iIBd { 41 | display:none; 42 | } 43 | .name-3suiPo { 44 | margin:0; 45 | } 46 | } 47 | &:hover button { 48 | background:var(--text-normal); 49 | } 50 | &.recording-1H2dS7 { 51 | border:1px solid var(--accent-solid); 52 | box-shadow:0 0 0 2px rgba(var(--accent), 0.25); 53 | button { 54 | -webkit-mask:url($icon_close) center/12px no-repeat; 55 | background:var(--text-muted); 56 | &:hover { 57 | background:var(--text-normal); 58 | } 59 | } 60 | } 61 | } 62 | } 63 | 64 | // Light Mode 65 | 66 | html.theme-light #app-mount .container-1nZlH6 { 67 | background:var(--background); 68 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_override.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .overridePlaceholder-14_rPI { 3 | margin: 0; 4 | border: 1px solid var(--base-border); 5 | } 6 | .override-2YgiXd, 7 | .overrideHighlight-YPcBxt { 8 | margin: 0; 9 | padding: var(--spacing-half) !important; 10 | background: var(--background); 11 | & ~ .override-2YgiXd { 12 | margin-top: var(--spacing-half); 13 | } 14 | .channelName-28iMRJ { 15 | font-size: var(--font-size); 16 | color: var(--text-normal); 17 | line-height: normal; 18 | } 19 | .channelNameByline-R73-tU { 20 | color: var(--text-muted); 21 | line-height: normal; 22 | } 23 | .checkboxGroup-Z7AmuU { 24 | width: fit-content; 25 | } 26 | .checkboxContainer-2vV9zd, 27 | .checkboxMute-14hTGS { 28 | display: flex; 29 | justify-content: center; 30 | width: 60px; 31 | height: 16px; 32 | .checkboxWrapper-SkhIWG { 33 | width: 16px; 34 | height: 16px; 35 | flex-grow: 0; 36 | } 37 | &:before { 38 | content: none; 39 | } 40 | .checkbox-1ix_J3 { 41 | display: none; 42 | } 43 | &.checkboxMute-14hTGS { 44 | .input-3ITkQf { 45 | opacity: 1; 46 | z-index: 0; 47 | appearance: checkbox; 48 | } 49 | } 50 | &.checkboxContainer-2vV9zd { 51 | .input-3ITkQf { 52 | opacity: 1; 53 | z-index: 0; 54 | appearance: radio; 55 | } 56 | } 57 | } 58 | .inputDefault-3JxKJ2, 59 | .checkbox-1ix_J3 { 60 | height: 16px !important; 61 | width: 16px !important; 62 | cursor: default; 63 | } 64 | .iconContainer-2h8jYA { 65 | margin: 0; 66 | color: var(--text-muted); 67 | height: 16px; 68 | svg { 69 | height: 16px; 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /Slate/src/inputs/_radiobutton.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .radioGroup-1GBvlr { 3 | .item-26Dhrx { 4 | border-radius:0; 5 | margin:0; 6 | background:transparent !important; 7 | border:1px solid var(--base-border); 8 | border-top:none; 9 | cursor:default; 10 | padding:var(--spacing) !important; 11 | &[style*="background"] { 12 | background:var(--accent-solid) !important; 13 | border-color:var(--accent-solid) !important; 14 | } 15 | .info-3LOr12 { 16 | cursor:default; 17 | } 18 | .labelForward-1wfipV { 19 | padding:0; 20 | line-height:normal !important; 21 | } 22 | .title-3BE6m5 { 23 | font-size:var(--font-size); 24 | font-weight:var(--font-weight-semibold); 25 | color:var(--text-normal) !important; 26 | line-height:normal; 27 | line-height:1.5; 28 | } 29 | .desc-2Dttbk, 30 | .title-3BE6m5:after { 31 | font-size:var(--font-size); 32 | font-weight:var(--font-weight-normal); 33 | color:var(--text-muted); 34 | line-height:normal; 35 | margin:0; 36 | line-height:1.5; 37 | display:block; 38 | } 39 | .descChecked-XkfPsU, 40 | .titleChecked-2wg0pd, 41 | &[style*="background"] .title-3BE6m5:after { 42 | color:var(--white) !important; 43 | } 44 | .checkbox-1ix_J3, 45 | .inputDefault-3JxKJ2 { 46 | display:none; 47 | } 48 | &:first-child { 49 | border-radius:var(--border-radius) var(--border-radius) 0 0; 50 | border-top:1px solid var(--base-border); 51 | } 52 | &:last-child { 53 | border-top:none; 54 | border-radius:0 0 var(--border-radius) var(--border-radius); 55 | } 56 | &:hover .desc-2Dttbk, 57 | &:hover .title-3BE6m5:after { 58 | color:var(--text-normal); 59 | } 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_range.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .slider-1PF9SW { 3 | height:var(--input-height); 4 | top:-5px; 5 | .mark-1xjQqt { 6 | top:-8px; 7 | height:28px; 8 | .markValue-2DwdXI { 9 | color:var(--text-muted); 10 | font-weight:var(--font-weight-normal); 11 | font-size:var(--font-size-sm); 12 | } 13 | .markDash-3hAolZ { 14 | background:transparent; 15 | border-left:thin solid var(--base-border); 16 | border-right:thin solid var(--base-border); 17 | width:1px; 18 | } 19 | } 20 | .bar-2Qqk5Z { 21 | border-radius: 50px; 22 | height:4px; 23 | background:var(--background-dark); 24 | box-shadow:0 0 0 1px var(--base-border); 25 | top:50%; 26 | transform:translateY(-50%); 27 | } 28 | .track-11EASc { 29 | height:var(--input-height); 30 | } 31 | .barFill-23-gu- { 32 | background: var(--accent-solid); 33 | } 34 | .grabber-3mFHz2 { 35 | background:var(--accent-solid); 36 | box-shadow:none; 37 | border:none; 38 | margin:0; 39 | transform:translateY(-50%) translateX(-50%); 40 | height:16px; 41 | width:16px; 42 | border-radius:50px; 43 | &:hover { 44 | box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0.1); 45 | } 46 | &:active { 47 | box-shadow: 0 0 0 3px rgba(var(--accent), 0.25), inset 0 0 0 100vmax rgba(255,255,255,0.1); 48 | } 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /Slate/src/inputs/_textbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .input-2A_zIr, 3 | .input-cIJ7To, 4 | .input-1ppKdn { 5 | border-radius: var(--border-radius); 6 | background: var(--background-dark); 7 | font-size:var(--font-size); 8 | font-weight:var(--font-weight-normal); 9 | border:1px solid var(--base-border); 10 | color:var(--text-normal); 11 | transition:none; 12 | padding:0 var(--spacing-half); 13 | height:var(--input-height); 14 | line-height:24px; 15 | box-sizing:border-box; 16 | &:focus, .focused-1mmYsC { 17 | border:1px solid var(--accent-solid); 18 | box-shadow:0 0 0 2px rgba(var(--accent), 0.25); 19 | } 20 | &::-webkit-input-placeholder { 21 | color:var(--text-muted); 22 | } 23 | &.multiInput-1e2xJ7 { 24 | border:none; 25 | background:transparent; 26 | box-shadow:none; 27 | padding:0; 28 | } 29 | .emoji-MCvpgl { 30 | background:var(--background); 31 | } 32 | .clearIcon-xXwSFS { 33 | width:12px; 34 | height:12px; 35 | } 36 | } 37 | .inputContainer-1SpwlU { 38 | display:flex; 39 | align-items:center; 40 | .emojiButtonContainer-3d6DFV { 41 | position:relative; 42 | margin-left:0; 43 | } 44 | } 45 | 46 | .inputWrapper-31_8H8 { 47 | flex-grow:1; 48 | .inputPrefix-2VAOGg { 49 | display:none; 50 | } 51 | } 52 | 53 | .multiInputLast-1aQ3YA { 54 | flex-grow:0; 55 | margin-left:var(--spacing); 56 | &input { 57 | padding:2px 6px; 58 | padding-left:18px; 59 | width:54px; 60 | } 61 | &:before { 62 | content:none; 63 | } 64 | } 65 | 66 | .maxLength-39QFBo { 67 | color:var(--text-muted); 68 | font-family:var(--font-family-monospace); 69 | font-size:var(--font-size); 70 | right:7px; 71 | top:0; 72 | height:var(--input-height); 73 | display:flex; 74 | align-items:center; 75 | } 76 | } 77 | 78 | // Light Mode 79 | 80 | html.theme-light #app-mount { 81 | .input-2A_zIr, 82 | .input-cIJ7To, 83 | .input-1ppKdn { 84 | background:var(--background); 85 | } 86 | } -------------------------------------------------------------------------------- /Slate/src/inputs/import.scss: -------------------------------------------------------------------------------- 1 | @import 'button'; 2 | @import 'checkbox'; 3 | @import 'keybind'; 4 | @import 'radiobutton'; 5 | @import 'range'; 6 | @import 'select'; 7 | @import 'textbox'; 8 | @import 'dropdown'; 9 | @import 'override'; 10 | @import 'card'; 11 | @import 'datepicker'; 12 | @import 'colorswatch'; -------------------------------------------------------------------------------- /Slate/src/members/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .members-1998pB { 2 | width: var(--sidebar-width); 3 | border-left: 1px solid var(--base-border); 4 | background: var(--background); 5 | & > div { 6 | background: transparent; 7 | } 8 | &::-webkit-scrollbar { 9 | display: none; 10 | } 11 | } -------------------------------------------------------------------------------- /Slate/src/members/_group-header.scss: -------------------------------------------------------------------------------- 1 | #app-mount .members-1998pB .membersGroup-v9BXpm { 2 | padding: var(--spacing); 3 | height: auto; 4 | font-size: var(--font-size-sm); 5 | font-weight: var(--font-weight-semibold); 6 | color: var(--text-normal); 7 | text-transform: none; 8 | } -------------------------------------------------------------------------------- /Slate/src/members/_member.scss: -------------------------------------------------------------------------------- 1 | #app-mount .member-3-YXUe { 2 | padding: 0; 3 | margin: 0; 4 | max-width: 100%; 5 | 6 | // Generic member entries 7 | .layout-2DM8Md { 8 | border-radius: 0; 9 | height: 44px; 10 | padding: 0 calc(var(--spacing) + 5px); 11 | cursor: default; 12 | } 13 | .avatar-3uk_u9 { 14 | margin-right: var(--spacing); 15 | width: var(--avatar-size-sm) !important; 16 | height: var(--avatar-size-sm) !important; 17 | } 18 | .name-uJV0GL { 19 | font-size: var(--font-size); 20 | font-weight: var(--font-weight-normal); 21 | color: var(--text-normal); 22 | line-height: normal; 23 | } 24 | .wrapper-3t9DeA { 25 | width: var(--avatar-size-sm) !important; 26 | height: var(--avatar-size-sm) !important; 27 | } 28 | .content-3QAtGj { 29 | overflow: visible; 30 | } 31 | .activity-2Gy-9S { 32 | font-size: var(--font-size-sm); 33 | font-weight: var(--font-weight-semibold); 34 | color: var(--text-muted); 35 | .icon-15YQ1T { 36 | margin-left:calc(var(--spacing) / 4); 37 | } 38 | } 39 | 40 | // Bot Tag 41 | .botTag-3W9SuW:not(.tag-wWVHyf) { 42 | font-size: 0; 43 | padding: 0; 44 | height: auto; 45 | width: auto; 46 | background-color: var(--background-modifier-active); 47 | border-radius: var(--border-radius); 48 | order: -1; 49 | margin-left: 0; 50 | margin-top: 0; 51 | margin-right: var(--spacing-half); 52 | span, svg { 53 | display: none; 54 | } 55 | &:before { 56 | content: ''; 57 | width: 16px; 58 | height: 16px; 59 | position: relative; 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | mask: url($icon_cog) center/12px no-repeat; 64 | background: var(--text-normal); 65 | } 66 | } 67 | &.selected-aXhQR6 { 68 | .activity-2Gy-9S, .roleColor-rz2vM0 { 69 | color: #fff !important; 70 | } 71 | .wrapper-3t9DeA { 72 | box-shadow:0 0 0 .5px var(--accent-solid); 73 | rect:not([fill="transparent"]) { 74 | stroke:var(--accent-solid); 75 | } 76 | } 77 | } 78 | 79 | // Placeholders 80 | &.placeholder-3X_lzF { 81 | padding: 0 var(--spacing); 82 | animation:none; 83 | .placeholderAvatar-damqh6 { 84 | border-radius: var(--border-radius); 85 | border: 1px solid var(--base-border); 86 | width: var(--avatar-size-sm); 87 | height: var(--avatar-size-sm); 88 | background: var(--background-dark); 89 | } 90 | } 91 | } 92 | .mulitplePlaceholderUsername-pogq9I, 93 | .placeholderUsername-2B_OA9, 94 | .memberGroupsPlaceholder-3mwPub { 95 | background:var(--text-muted); 96 | opacity:.2; 97 | height:4px; 98 | animation:none; 99 | border-radius:var(--border-radius); 100 | } -------------------------------------------------------------------------------- /Slate/src/members/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'group-header'; 3 | @import 'member'; -------------------------------------------------------------------------------- /Slate/src/modals/_channeltopic.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modal-1sor29 { 2 | min-height: auto; 3 | color: var(--text-normal); 4 | box-shadow: var(--elevation-2); 5 | .header-2tA9Os { 6 | padding: var(--spacing-double); 7 | border-bottom: 1px solid var(--base-border); 8 | button { 9 | padding: 0; 10 | } 11 | } 12 | .inner-ZyuQk0 { 13 | padding: var(--spacing-double); 14 | .content-38qMG0 { 15 | padding-bottom: 0; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /Slate/src/modals/_customstatus.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .modalRoot-1Kx4Hb { 3 | .formGroup-2hEDrJ { 4 | margin-bottom:var(--spacing-double); 5 | &:nth-last-child(2) { 6 | margin:0; 7 | } 8 | .emojiButtonContainer-3d6DFV { 9 | margin-right:var(--spacing-half); 10 | .emojiButton-3uL3Aw { 11 | cursor: default; 12 | .sprite-2iCowe { 13 | height:22px; 14 | width:22px; 15 | transform:none !important; 16 | background:var(--text-muted); 17 | -webkit-mask:url($icon_smiley_alt) center/20px no-repeat; 18 | } 19 | &:hover .sprite-2iCowe, 20 | .sprite-2iCowe[style*="grayscale(0%)"] { 21 | background:var(--text-normal); 22 | } 23 | } 24 | } 25 | } 26 | .art-347BZj { 27 | display: none; 28 | } 29 | .header-3C6qT5 { 30 | padding-top: 0; 31 | align-items: flex-start; 32 | width:auto; 33 | position:relative; 34 | .headerText-2uyvpY { 35 | font-size:var(--font-size-md); 36 | font-weight:var(--font-weight-semibold); 37 | color:var(--text-normal); 38 | line-height:normal; 39 | } 40 | } 41 | .modalCloseButton-3ztS-g { 42 | top:unset; 43 | right:calc(var(--spacing-double) - 6px) !important; 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /Slate/src/modals/_delete.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label="Delete Message"] { 2 | .inner-ZyuQk0 { 3 | padding: var(--spacing); 4 | } 5 | .spacing-2P-ODW { 6 | margin-bottom: var(--spacing); 7 | } 8 | .message-2qRu38 { 9 | box-shadow: none; 10 | background: transparent; 11 | padding: 0; 12 | .cozy-3raOZG { 13 | padding-bottom: 0; 14 | } 15 | } 16 | .spacingTop-3Dhr0L.block-2RXqH9 { 17 | display: none; 18 | } 19 | } -------------------------------------------------------------------------------- /Slate/src/modals/_paymentmethod.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .form-77IDep { 3 | .content-sp-7A3 { 4 | .transitionGroup-aR7y1d { 5 | div[style*="transform: translate"] { 6 | transform:none !important; 7 | } 8 | button { 9 | .cardIconSmall-2gJ6xX { 10 | width:24px; 11 | height:16.5px; 12 | box-shadow:none; 13 | &:before, 14 | &:after { 15 | border-radius:0; 16 | } 17 | } 18 | &:first-child { 19 | margin:0; 20 | } 21 | } 22 | .inputWrapper-2YCfto, 23 | .cardNumberWrapper-3YhV1H { 24 | .cardIconSmall-2gJ6xX { 25 | display:none; 26 | } 27 | } 28 | .row-2grg9k { 29 | padding-top:var(--spacing); 30 | &:first-child { 31 | padding-top:0; 32 | } 33 | } 34 | } 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /Slate/src/modals/_upload.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal-2ifh8j { 2 | background-color: var(--background-dark); 3 | border-radius: var(--border-radius); 4 | box-shadow: none; 5 | position: relative; 6 | padding-top: 32px; 7 | min-height: unset; 8 | .inner-3nWsbo { 9 | margin: 0; 10 | } 11 | .file-34mY5K { 12 | position: unset; 13 | height: auto; 14 | } 15 | .icon-kyxXVr { 16 | &:not(.image-2yrs5j) { 17 | display: none; 18 | } 19 | &.image-2yrs5j { 20 | margin: 0; 21 | width: 100%; 22 | background-size: cover; 23 | border-radius: 0; 24 | box-shadow: none; 25 | height: 298.13px; 26 | border-bottom: 1px solid var(--base-border); 27 | background-color: var(--background); 28 | &:active { 29 | background-size: 100%; 30 | } 31 | } 32 | } 33 | .description-2ug5H_ { 34 | height: auto; 35 | padding-top: 0; 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | z-index: 2; 40 | height: 32px; 41 | display: flex; 42 | align-items: center; 43 | padding: 0 var(--spacing); 44 | border-bottom: 1px solid var(--base-border); 45 | background: var(--background); 46 | width: 100%; 47 | border-radius: var(--border-radius) var(--border-radius) 0 0; 48 | div { 49 | font-size: var(--font-size); 50 | line-height: normal; 51 | height: auto; 52 | } 53 | } 54 | .label-3aiqT2 { 55 | display: none; 56 | } 57 | .comment-4IWttf { 58 | margin: 0; 59 | padding: var(--spacing-double); 60 | } 61 | .channelTextArea-2VhZ6z { 62 | margin: 0 0 5px; 63 | } 64 | .scrollableContainer-2NUZem { 65 | border-radius: var(--border-radius); 66 | } 67 | .charcounter { 68 | font-size: var(--font-size); 69 | opacity: .5; 70 | } 71 | .footer-3mqk7D { 72 | background: var(--background); 73 | box-shadow: none; 74 | border-top: 1px solid var(--base-border); 75 | padding: var(--spacing); 76 | } 77 | .checkboxWrapper-SkhIWG { 78 | flex: none; 79 | } 80 | .checkbox-1ix_J3 { 81 | border: none; 82 | background: var(--background-dark); 83 | &.checked-3_4uQ9 { 84 | background: var(--accent-solid); 85 | polyline { 86 | stroke: #fff; 87 | } 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /Slate/src/modals/_viewimage.scss: -------------------------------------------------------------------------------- 1 | #app-mount .downloadLink-1ywL9o { 2 | opacity: 1; 3 | text-shadow: var(--elevation-2); 4 | } -------------------------------------------------------------------------------- /Slate/src/modals/import.scss: -------------------------------------------------------------------------------- 1 | @import 'generic'; 2 | @import 'usermodal'; 3 | @import 'upload'; 4 | @import 'delete'; 5 | @import 'addjoinserver'; 6 | @import 'channeltopic'; 7 | @import 'customstatus'; 8 | @import 'quickswitcher'; 9 | @import 'viewimage'; 10 | @import 'reactors'; 11 | @import 'paymentmethod'; 12 | @import 'nitro'; 13 | @import 'serverwelcome'; -------------------------------------------------------------------------------- /Slate/src/os/_os.scss: -------------------------------------------------------------------------------- 1 | // Mac 2 | html.platform-osx #app-mount { 3 | .guilds-1SWlCJ { 4 | margin-top: 0; 5 | .tutorialContainer-1v44GL .listItem-2P_4kh { 6 | top: -1px; 7 | } 8 | } 9 | } 10 | 11 | // Linux 12 | 13 | html.platform-linux { 14 | --titlebar-height:0px; 15 | #guild-header-popout { 16 | top:var(--toolbar-height) !important; 17 | } 18 | } -------------------------------------------------------------------------------- /Slate/src/os/import.scss: -------------------------------------------------------------------------------- 1 | @import 'os'; -------------------------------------------------------------------------------- /Slate/src/pages/_bottomfix.scss: -------------------------------------------------------------------------------- 1 | .applicationStore-1pNvnv, .container-1D34oG { 2 | .scroller-2FKFPG { 3 | margin-bottom: 49px; 4 | } 5 | &:before { 6 | content: ""; 7 | position: absolute; 8 | bottom: 0; 9 | height: 49px; 10 | border-top: 1px solid var(--base-border); 11 | background: var(--background-light); 12 | width: 100%; 13 | z-index: 1; 14 | } 15 | } -------------------------------------------------------------------------------- /Slate/src/pages/_crash.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gibbu/BetterDiscord-Themes/40b6c7a5adbf8efa1e5cc6cb290ba688c8526b06/Slate/src/pages/_crash.scss -------------------------------------------------------------------------------- /Slate/src/pages/_library.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-3Mxszk { 2 | background: var(--background-alt); 3 | .container-19hC9u:before { 4 | content: none; 5 | } 6 | .children-19S4PO { 7 | padding-right: 0; 8 | &:hover { 9 | background: transparent; 10 | } 11 | } 12 | .scroller-1IIF0A { 13 | background: var(--background-alt); 14 | overflow: hidden; 15 | &::-webkit-scrollbar { 16 | width: 12px; 17 | display: none; 18 | background: transparent; 19 | border-left: 1px solid var(--base-border); 20 | } 21 | &::-webkit-scrollbar-track-piece { 22 | background: transparent; 23 | border-color: transparent; 24 | } 25 | &::-webkit-scrollbar-thumb { 26 | border-style: solid; 27 | border-color: transparent; 28 | border-left-width: 4px; 29 | border-right-width: 3px; 30 | background-clip: padding-box; 31 | background-color: var(--scrollbar-background); 32 | } 33 | &:hover { 34 | overflow: overlay; 35 | &::-webkit-scrollbar { 36 | display: block; 37 | } 38 | } 39 | } 40 | .searchBar-TUoVPN { 41 | background: var(--background); 42 | border: 1px solid var(--base-border); 43 | } 44 | .header-39GIC8 { 45 | padding: var(--spacing); 46 | background: var(--background-alt); 47 | border-bottom-color: var(--base-border); 48 | width: 100%; 49 | } 50 | .rowWrapper-2fB6P0 { 51 | margin: 0; 52 | border-bottom: 1px solid var(--base-border); 53 | border-radius: 0; 54 | padding-bottom: 0; 55 | .bodyCell-9xKjWE { 56 | padding: var(--spacing); 57 | } 58 | &:hover { 59 | background: var(--background-light); 60 | } 61 | } 62 | .scroller-2XE8rp { 63 | background-color: var(--background-alt); 64 | } 65 | } -------------------------------------------------------------------------------- /Slate/src/pages/_nitro.scss: -------------------------------------------------------------------------------- 1 | #app-mount .applicationStore-1pNvnv { 2 | .scrollerWrap-2lJEkd:before { 3 | content: none; 4 | } 5 | .scroller-9moviB { 6 | background-color: var(--background-alt); 7 | } 8 | .detailsBlock-FoDTGA { 9 | background: var(--background); 10 | border: 1px solid var(--base-border); 11 | } 12 | } -------------------------------------------------------------------------------- /Slate/src/pages/_nochannel.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .noChannel-Z1DQK7 { 3 | background:var(--background-alt); 4 | display:flex; 5 | flex-direction:column; 6 | &::before { 7 | content:''; 8 | width:100%; 9 | height:var(--toolbar-height); 10 | display:block; 11 | position:relative; 12 | background:var(--toolbar-background); 13 | border-bottom:1px solid var(--toolbar-border); 14 | box-sizing:border-box; 15 | } 16 | &::after { 17 | content:''; 18 | width:100%; 19 | height:var(--toolbar-height); 20 | display:block; 21 | position:relative; 22 | background:var(--background-light); 23 | border-top:1px solid var(--base-border); 24 | box-sizing:border-box; 25 | } 26 | .wrapper-r-6rrt { 27 | width:100%; 28 | height:calc(100% - var(--toolbar-height) * 2); 29 | margin:0; 30 | max-width:unset; 31 | background:var(--text-muted); 32 | -webkit-mask:url($illustration_4) center/50% no-repeat; 33 | .image-1GzsFd, 34 | .flexChild-faoVW3 { 35 | display:none; 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /Slate/src/pages/_serverboost.scss: -------------------------------------------------------------------------------- 1 | #app-mount .perksModal-fSYqOq { 2 | background: var(--background); 3 | top: var(--titlebar-height); 4 | 5 | // Header 6 | [class*="header"] { 7 | display: none; 8 | } 9 | 10 | // Boost server 11 | .ctaBar-2UsjF2 { 12 | background: var(--background-dark); 13 | border: 1px solid var(--base-border); 14 | padding: var(--spacing); 15 | } 16 | .guildIcon-3raYf3 { 17 | width: 32px; 18 | height: 32px; 19 | } 20 | .guildName-39nwo0 { 21 | margin: 0 10px 0 0; 22 | font-size: var(--font-size-md); 23 | line-height: normal; 24 | } 25 | .guildDetails-oP2_kA { 26 | display: flex; 27 | align-items: center; 28 | } 29 | .actions-2fUYl0 { 30 | display: flex; 31 | flex-direction: row; 32 | button { 33 | margin: 0 0 0 var(--spacing); 34 | } 35 | } 36 | 37 | // Progress bar 38 | .barBackground-2EEiLw { 39 | background: var(--background-dark); 40 | border: 1px solid var(--base-border); 41 | } 42 | .tierMarkerBackground-3q29am { 43 | background: transparent; 44 | } 45 | .tierMarker-5HkGJ_ { 46 | box-shadow: none; 47 | border-radius: var(--border-radius); 48 | box-shadow: inset 0 0 0 1px var(--base-border); 49 | } 50 | 51 | // Tiers 52 | .tierWrapper-W9ajqp { 53 | box-shadow: none !important; 54 | border: 1px solid var(--base-border); 55 | } 56 | .tierHeaderLocked-1s2JJz { 57 | background: var(--background-dark); 58 | border-bottom: 1px solid var(--base-border); 59 | } 60 | .tierBody-16Chc9 { 61 | background: var(--background-dark); 62 | } 63 | 64 | // Perks 65 | .perks-3OsGy8, .subscriberPerksHeader-2a50UC { 66 | display: none; 67 | } 68 | } -------------------------------------------------------------------------------- /Slate/src/pages/import.scss: -------------------------------------------------------------------------------- 1 | @import 'discovery'; 2 | @import 'friends'; 3 | @import 'library'; 4 | @import 'nitro'; 5 | @import 'disconnected'; 6 | @import 'serverboost'; 7 | @import 'login'; 8 | @import 'bottomfix'; 9 | @import 'nochannel'; 10 | @import 'crash'; -------------------------------------------------------------------------------- /Slate/src/plugins/_googletranslate.scss: -------------------------------------------------------------------------------- 1 | // GoogleTranslate by DevilBro 2 | 3 | #app-mount .buttons-3JBrkn > button.button-38aScr.colorBrand-3pXr91:not(.noFocus-2C7BQj):first-child { 4 | display: block !important; 5 | } -------------------------------------------------------------------------------- /Slate/src/plugins/_sendbutton.scss: -------------------------------------------------------------------------------- 1 | // SendButton by Zerebos 2 | 3 | #app-mount .buttonContainer-28fw2U.send-button button { 4 | display: block !important; 5 | } -------------------------------------------------------------------------------- /Slate/src/plugins/_serversaschannels.scss: -------------------------------------------------------------------------------- 1 | // Display Servers as Channels by DevilBro 2 | 3 | body.styledGuildsAsChannels-DNHtg_ #app-mount .guilds-1SWlCJ { 4 | .scroller-2TZvBN { 5 | padding-top: var(--spacing); 6 | } 7 | .tutorialContainer-1v44GL .childWrapper-anI2G9 { 8 | background: var(--background-light) !important; 9 | } 10 | .homeIcon-tEMBK1 { 11 | width: 15%; 12 | } 13 | .name-z5133D { 14 | padding-top: 0; 15 | } 16 | .wrapper-sa6paO { 17 | top: 0 !important; 18 | } 19 | .textScroller-dc9_kz { 20 | line-height: var(--line-height); 21 | } 22 | .guildSeparator-3s64Iy { 23 | margin-top: 8px; 24 | } 25 | } -------------------------------------------------------------------------------- /Slate/src/plugins/_spotifycontrols.scss: -------------------------------------------------------------------------------- 1 | // Spotify Controls by DevilBro 2 | 3 | #app-mount .container-6sXIoE.withTimeline-824fT_ { 4 | position: relative; 5 | margin-bottom: 0; 6 | padding: var(--spacing) var(--spacing) var(--spacing-triple); 7 | border-bottom-color: var(--base-border); 8 | background: rgba(var(--status-green), 0.2); 9 | min-height: unset; 10 | button { 11 | color: var(--text-focus); 12 | border-radius: var(--border-radius); 13 | &:hover { 14 | background: rgb(255 255 255 / 0.1) !important; 15 | cursor: pointer; 16 | } 17 | } 18 | .inner-WRV6k5 { 19 | position: relative; 20 | z-index: 1; 21 | } 22 | .coverWrapper-YAplwJ { 23 | border: 1px solid var(--base-border); 24 | } 25 | .timeline-UWmgAx { 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | margin: 0; 30 | width: 100%; 31 | height: 100%; 32 | } 33 | .bar-g2ZMIm { 34 | height: 100%; 35 | border-radius: 0; 36 | margin-bottom: 0; 37 | cursor: pointer; 38 | } 39 | .barFill-Dhkah7 { 40 | background: rgba(var(--status-green), 0.5); 41 | border-radius: 0; 42 | } 43 | .grabber-7sd5f5 { 44 | display: none; 45 | } 46 | .song-tIdBpF { 47 | color: var(--text-focus); 48 | } 49 | .barText-lmqc5O { 50 | margin-top: calc(var(--spacing-double) / -1); 51 | padding: 0 var(--spacing); 52 | position: relative; 53 | z-index: 1; 54 | pointer-events: none; 55 | } 56 | 57 | &.maximized-vv2Wr0 { 58 | padding: 0 8px var(--spacing-triple); 59 | .coverWrapper-YAplwJ { 60 | border: none; 61 | border-bottom: 1px solid var(--base-border); 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /Slate/src/plugins/_statuseverywhere.scss: -------------------------------------------------------------------------------- 1 | // StatusEverywhere by Zerebos 2 | 3 | #app-mount .cozy-3raOZG .wrapper-3t9DeA.avatar-1BDn8e { 4 | box-shadow: none !important; 5 | overflow: visible !important; 6 | } -------------------------------------------------------------------------------- /Slate/src/plugins/import.scss: -------------------------------------------------------------------------------- 1 | @import 'serversaschannels'; 2 | @import 'sendbutton'; 3 | @import 'googletranslate'; 4 | @import 'statuseverywhere'; 5 | @import 'spotifycontrols'; -------------------------------------------------------------------------------- /Slate/src/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #app-mount .autocomplete-1vrmpx { 2 | background: var(--background); 3 | border-radius: 0; 4 | border-top: 1px solid var(--base-border); 5 | left: -45px; 6 | right: -13px; 7 | bottom: calc(100% + 10px); 8 | box-shadow: none; 9 | .autocompleteInner-zh20B_ { 10 | padding-bottom: 0; 11 | } 12 | .autocompleteRow-2OthDa { 13 | padding: 0; 14 | border-radius: 0; 15 | } 16 | .selector-2IcQBU { 17 | border-radius: 0; 18 | padding: 0 var(--spacing); 19 | display: flex; 20 | align-items: center; 21 | height: var(--item-height); 22 | &.selectorSelected-1_M1WV { 23 | background: var(--background-modifier-hover); 24 | } 25 | } 26 | .contentTitle-2tG_sM { 27 | color: var(--text-normal); 28 | } 29 | .marginLeft4-3VaXdt { 30 | font-size: var(--font-size-md); 31 | color: var(--text-focus); 32 | } 33 | .description-11DmNu { 34 | font-size: var(--font-size); 35 | color: var(--text-muted); 36 | } 37 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Native context menus 3 | .styleFlexible-wGDiIL, 4 | .submenu-2-ysNh { 5 | background: var(--background); 6 | box-shadow: var(--elevation-1); 7 | border: 1px solid var(--base-border); 8 | [role="group"] { 9 | &:first-child .item-1tOPte { 10 | border-radius: var(--border-radius) var(--border-radius) 0 0; 11 | } 12 | &:last-child .item-1tOPte { 13 | border-radius: 0 0 var(--border-radius) var(--border-radius); 14 | } 15 | } 16 | .scroller-3BxosC { 17 | padding: 0; 18 | &::-webkit-scrollbar { 19 | width: 0; 20 | } 21 | } 22 | .separator-2I32lJ { 23 | margin: 0; 24 | border-color: var(--base-border); 25 | } 26 | .item-1tOPte { 27 | font-size: var(--font-size); 28 | color: var(--text-normal); 29 | margin: 0; 30 | padding: var(--spacing-half) var(--spacing); 31 | box-sizing: border-box; 32 | border-radius: 0; 33 | height: 32px; 34 | cursor: default; 35 | &.focused-3afm-j { 36 | background: var(--background-modifier-hover); 37 | } 38 | &:active:not(.hideInteraction-1iHO1O) { 39 | background: var(--background-modifier-active); 40 | } 41 | &.colorDanger-2qLCe1 { 42 | color: rgb(var(--status-red)); 43 | } 44 | &.colorBrand-ROmMP1 { 45 | color: rgb(var(--discord-blurple)); 46 | } 47 | &.hideInteraction-1iHO1O { 48 | height: auto; 49 | padding: 0; 50 | } 51 | } 52 | } 53 | 54 | // Instant reactions 55 | .wrapper-3_530D { 56 | padding: 0; 57 | border-bottom: 1px solid var(--base-border); 58 | overflow: hidden; 59 | border-radius: var(--border-radius) var(--border-radius) 0 0; 60 | } 61 | .button-F9qN4n { 62 | padding: 0; 63 | width: 47px; 64 | border-radius: 0; 65 | background: transparent; 66 | cursor: default; 67 | &:hover { 68 | background:var(--background-modifier-hover); 69 | } 70 | &:active { 71 | background:var(--background-modifier-active); 72 | } 73 | } 74 | 75 | // User settings (reeeee why didn't they change this) 76 | #user-settings-cog div { 77 | &:first-child { 78 | border-radius: var(--border-radius) var(--border-radius) 0 0; 79 | } 80 | &:last-child { 81 | border-radius: 0 0 var(--border-radius) var(--border-radius); 82 | } 83 | } 84 | 85 | // Sub menus 86 | .submenuContainer-2gbm7M { 87 | .scroller-3BxosC .item-1tOPte { 88 | &:first-child { 89 | border-radius: var(--border-radius) var(--border-radius) 0 0; 90 | } 91 | &:last-child { 92 | border-radius: 0 0 var(--border-radius) var(--border-radius); 93 | } 94 | } 95 | .layer-v9HyYc { 96 | &[style*="right"] { 97 | margin-right: -4px; 98 | } 99 | &[style*="left"] { 100 | margin-left: -4px; 101 | } 102 | } 103 | } 104 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_generic.scss: -------------------------------------------------------------------------------- 1 | #app-mount .popouts-2bnG9Z { 2 | .popout-2iWAc- { 3 | background:var(--background); 4 | box-shadow:var(--elevation-1) !important; 5 | border-radius:var(--border-radius); 6 | box-sizing:border-box; 7 | } 8 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_joinedserver.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-2Uhd6d { 3 | background:var(--background); 4 | border-radius:var(--border-radius); 5 | border:1px solid var(--base-border); 6 | margin-left:-40px; 7 | padding:var(--spacing); 8 | box-shadow:none; 9 | max-width:320px; 10 | &::before { 11 | content:''; 12 | height:72px; 13 | width:72px; 14 | position:relative; 15 | display:block; 16 | background:var(--text-muted); 17 | -webkit-mask:url($illustration_1) center/50px no-repeat; 18 | } 19 | .content-3MbD2f { 20 | margin-left:var(--spacing); 21 | .base-1x0h_U { 22 | font-size:var(--font-size-md); 23 | font-weight:var(--font-weight-semibold); 24 | color:var(--text-normal); 25 | } 26 | .buttonContainer-3CyfSO { 27 | margin-top:var(--spacing); 28 | .lookFilled-1Gx00P { 29 | margin:0; 30 | } 31 | } 32 | } 33 | .image-3OQMFm { 34 | display:none; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_krisp.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .noiseCancellationPopout-iRK2A0 { 3 | position: fixed; 4 | top: var(--titlebar-height); 5 | left: 0; 6 | z-index: 1; 7 | height: calc(100vh - var(--titlebar-height)); 8 | border-radius: 0; 9 | box-shadow: none; 10 | border-right: 1px solid var(--base-border); 11 | width: calc(var(--noasw-base) + var(--sidebar-width)); 12 | box-sizing: border-box; 13 | background: var(--background); 14 | .flex-1xMQg5 { 15 | margin-bottom: var(--spacing); 16 | &:first-child > div:first-child { 17 | align-items: center; 18 | } 19 | & > .flexChild-faoVW3 { 20 | &:first-child { 21 | margin-left: 0; 22 | } 23 | &:last-child { 24 | margin-right: 0; 25 | } 26 | } 27 | } 28 | .h5-18_1nd { 29 | font-size: var(--font-size); 30 | padding: var(--spacing) 0; 31 | margin: 0; 32 | } 33 | } 34 | .micTest-2C-tpt { 35 | margin: 0 !important; 36 | } 37 | .note-1V3kyJ { 38 | margin-top: 0; 39 | } 40 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_pinnedmessages.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .messagesPopoutWrap-1MQ1bW { 3 | position: absolute; 4 | left: 50%; 5 | transform: translateX(-50%); 6 | border: none; 7 | box-shadow: none; 8 | border: 1px solid var(--base-border); 9 | border-radius: var(--border-radius); 10 | background: var(--background); 11 | } 12 | .header-ykumBX { 13 | background: var(--background-dark); 14 | padding: var(--spacing); 15 | border-bottom: 1px solid var(--base-border); 16 | box-shadow: none; 17 | h3 { 18 | font-size: var(--font-size-md); 19 | } 20 | } 21 | .messagesPopout-24nkyi { 22 | padding: 0; 23 | &::-webkit-scrollbar { 24 | display: none; 25 | } 26 | } 27 | .messageGroupWrapper-o-Zw7G { 28 | border-radius: 0; 29 | border: none; 30 | border-bottom: 1px solid var(--base-border); 31 | background: transparent; 32 | &:hover .jumpButton-3DTcS_ { 33 | opacity: 1; 34 | } 35 | } 36 | .jumpButton-3DTcS_ { 37 | font-size: var(--font-size); 38 | font-weight: var(--font-weight-normal); 39 | cursor: default; 40 | height: 20px; 41 | display: flex; 42 | align-items: center; 43 | opacity: 0; 44 | line-height: normal; 45 | transition: none; 46 | padding: 0 var(--spacing); 47 | border-radius: var(--button-border-radius); 48 | color: var(--white); 49 | background-color: var(--accent-solid); 50 | &:hover { 51 | box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0.1); 52 | } 53 | &:focus { 54 | box-shadow: 0 0 0 2px rgba(var(--accent), 0.25), inset 0 0 0 100vmax rgba(255,255,255,0.1); 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_rtc.scss: -------------------------------------------------------------------------------- 1 | .layer-v9HyYc[style*="position: absolute;"][style*="bottom: 9"][style*="left"] .animatorTop-2Y7x2r { 2 | position: fixed !important; 3 | top: 0 !important; 4 | left: 0 !important; 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | transform: none !important; 9 | transition: none !important; 10 | &:before { 11 | content: ""; 12 | position: fixed; 13 | top: 0; 14 | left: 0; 15 | height: 100vh; 16 | width: 100vw; 17 | background: var(--backdrop); 18 | z-index: 0; 19 | pointer-events: none; 20 | } 21 | } 22 | 23 | #app-mount .container-2x5lvQ { 24 | background: var(--background); 25 | position: fixed; 26 | box-shadow: none; 27 | top: var(--titlebar-height); 28 | left: 0; 29 | width: calc(var(--sidebar-width) + var(--noasw-base)); 30 | border-right: 1px solid var(--base-border); 31 | height: calc(100vh - var(--titlebar-height)); 32 | border-radius: 0; 33 | header { 34 | height: var(--toolbar-height); 35 | padding: 0 var(--spacing); 36 | justify-content: flex-start; 37 | background: transparent; 38 | border-radius: 0; 39 | } 40 | section { 41 | height: calc(100% - (var(--titlebar-height) + var(--toolbar-height))); 42 | background: transparent; 43 | padding: var(--spacing) var(--spacing) 0; 44 | display: flex; 45 | flex-direction: column; 46 | } 47 | hr { 48 | height: 100%; 49 | margin: 0; 50 | } 51 | canvas { 52 | width: 295px !important; 53 | height: 210px !important; 54 | } 55 | p { 56 | color: var(--text-normal); 57 | font-size: var(--font-size); 58 | } 59 | strong { 60 | color: var(--text-focus); 61 | } 62 | .popoutBottom-31rU82 { 63 | margin: 0; 64 | } 65 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_searchresults.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .searchResultsWrap-3-pOjs { 3 | background-color: var(--background); 4 | border-left: 1px solid var(--base-border); 5 | box-sizing:border-box; 6 | width:calc(var(--sidebar-width) * 1.5); 7 | .scroller-3GIiMh { 8 | padding-left: 0; 9 | &::-webkit-scrollbar { 10 | display: none; 11 | } 12 | & > .pagination-eQpqgk:first-child { 13 | margin: 0; 14 | padding: var(--spacing) 0; 15 | border-bottom: 1px solid var(--base-border); 16 | } 17 | } 18 | } 19 | .channelName-1JRO3C { 20 | background: var(--background); 21 | padding: var(--spacing); 22 | line-height: var(--line-height); 23 | } 24 | .searchHeader-2XoQg7 { 25 | box-shadow: none; 26 | border-bottom: 1px solid var(--base-border); 27 | padding: 0 var(--spacing); 28 | } 29 | .tab-2j5AEF, 30 | .totalResults--dyAxF { 31 | padding: var(--spacing) 0; 32 | font-size: var(--font-size); 33 | } 34 | .channelSeparator-1DOiGt:before { 35 | content: none; 36 | } 37 | .searchResult-9tQ1uo { 38 | &:after, 39 | &:before { 40 | content: none; 41 | } 42 | &.expanded-w_LCGl { 43 | border: none; 44 | border-top: 1px solid var(--base-border); 45 | border-bottom: 1px solid var(--base-border); 46 | border-radius: 0; 47 | background: var(--background-dark); 48 | } 49 | } 50 | .searchResultMessage-1fxgXh { 51 | border-radius: 0; 52 | &.hit-1fVM9e { 53 | border-left: none; 54 | border-right: none; 55 | border-color: var(--base-border); 56 | box-shadow: none; 57 | background: var(--background-alt); 58 | } 59 | &:hover .jumpButton-JkYoYK { 60 | opacity: 1; 61 | } 62 | } 63 | .jumpButton-JkYoYK { 64 | font-size: var(--font-size); 65 | font-weight: var(--font-weight-normal); 66 | cursor: default; 67 | height: 20px; 68 | display: flex; 69 | align-items: center; 70 | opacity: 0; 71 | line-height: normal; 72 | transition: none; 73 | padding: 0 var(--spacing); 74 | border-radius: var(--button-border-radius); 75 | color: var(--white); 76 | background-color: var(--accent-solid); 77 | &:hover { 78 | box-shadow: inset 0 0 0 100vmax rgba(255,255,255,0.1); 79 | } 80 | &:focus { 81 | box-shadow: 0 0 0 2px rgba(var(--accent), 0.25), inset 0 0 0 100vmax rgba(255,255,255,0.1); 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_tenor.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .horizontalAutocompletes-3blb-Z { 3 | margin-bottom: 0; 4 | padding: 0 var(--spacing); 5 | } 6 | .horizontalAutocomplete-L5KnTN { 7 | margin-right: var(--spacing); 8 | .selector-2IcQBU { 9 | height: 90px; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /Slate/src/popouts/_voiceplaying.scss: -------------------------------------------------------------------------------- 1 | #app-mount .container-3JTnYm { 2 | background: var(--background); 3 | border: 1px solid var(--base-border); 4 | border-radius: var(--border-radius); 5 | box-shadow: none; 6 | padding: var(--spacing); 7 | & > div[style*="height: 16px"] { 8 | display: none; 9 | } 10 | } -------------------------------------------------------------------------------- /Slate/src/popouts/import.scss: -------------------------------------------------------------------------------- 1 | @import 'server'; 2 | @import 'statuspicker'; 3 | @import 'userpopout'; 4 | @import 'pinnedmessages'; 5 | @import 'search'; 6 | @import 'contextmenu'; 7 | @import 'autocomplete'; 8 | @import 'emojipicker'; 9 | @import 'searchresults'; 10 | @import 'rtc'; 11 | @import 'tenor'; 12 | @import 'inbox'; 13 | @import 'krisp'; 14 | @import 'voiceplaying'; 15 | @import 'emoji'; 16 | @import 'addrole'; 17 | @import 'generic'; 18 | @import 'joinedserver'; 19 | @import 'tutorial'; -------------------------------------------------------------------------------- /Slate/src/settings/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="SETTINGS"] { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | padding: 0 var(--spacing-triple); 6 | background: var(--backdrop); 7 | transform: none !important; 8 | [class*="scroller-" i]:not([class*="bd-"]) { 9 | background: var(--background); 10 | &::-webkit-scrollbar { 11 | display: none; 12 | } 13 | } 14 | .standardSidebarView-3F1I7i { 15 | animation: modal 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 16 | border-radius: var(--border-radius); 17 | background: var(--background); 18 | position: relative; 19 | overflow: hidden; 20 | box-shadow: 0 0 10px 1px rgba(0,0,0,0.4); 21 | width: 100%; 22 | min-width: 960px; 23 | max-width: 960px; 24 | height: 65vh; 25 | max-height: 650px; 26 | min-height: 400px; 27 | padding-top: 50px; 28 | } 29 | } 30 | 31 | @media only screen and (max-height: 650px) { 32 | #app-mount .layer-3QrUeG[aria-label*="SETTINGS"] { 33 | .standardSidebarView-3F1I7i { 34 | min-height: 500px; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Slate/src/settings/_guildsettings.scss: -------------------------------------------------------------------------------- 1 | .flexChild-faoVW3[style*="padding: 60px 15px 80px 20px;"], 2 | .content-1rPSz4[style*="padding: 60px 0px 80px 20px;"] { 3 | padding: var(--spacing-double) !important; 4 | } 5 | 6 | // Server region 7 | .flag-16iIBd { 8 | width: 28px; 9 | height: 16px; 10 | } 11 | .button-cqiy5p.button-3tQuzi.button-38aScr { 12 | margin: 0; 13 | padding: 0 var(--spacing); 14 | background: transparent; 15 | } 16 | 17 | // Emojis 18 | .emojiRow-zIc7ZX { 19 | box-shadow: 0 1px 0 0 var(--base-border); 20 | } 21 | .emojiRemove-1k6MlJ { 22 | right: 0; 23 | background-color: var(--background-dark); 24 | border: 1px solid var(--base-border); 25 | border-radius: var(--border-radius); 26 | box-shadow: none; 27 | } 28 | 29 | // Audit log 30 | .customHeader-f9DEJ_ { 31 | padding-top: 0; 32 | h2 { 33 | margin-bottom: 0; 34 | } 35 | } 36 | .customScroller-26gWhv > div { 37 | margin: 0; 38 | max-width: unset; 39 | padding: var(--spacing-double); 40 | } 41 | .auditLog-3jNbM6 { 42 | border-color: var(--base-border); 43 | } 44 | .headerClickable-2IVFo9, .headerDefault-1wrJcN { 45 | background: var(--background-dark); 46 | } 47 | .divider-1pnAR2 { 48 | border-color: var(--base-border); 49 | } 50 | .changeDetails-bk98pu { 51 | background: var(--background-dark); 52 | } 53 | .customColumn-Rb6toI + .toolsContainer-1edPuj { 54 | margin-right: -10px; 55 | } -------------------------------------------------------------------------------- /Slate/src/settings/_sidebar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer-3QrUeG[aria-label*="SETTINGS"] .sidebarRegion-VFTUkN { 2 | flex: unset; 3 | z-index:10; 4 | .sidebarRegionScroller-3MXcoP { 5 | flex: auto; 6 | } 7 | .sidebar-CFHs9e { 8 | padding: var(--spacing) 0; 9 | width: auto; 10 | } 11 | 12 | // Header (User settings/App settings) 13 | .header-2RyJ0Y { 14 | display: none; 15 | } 16 | .separator-gCa7yv { 17 | margin: var(--spacing) 0; 18 | border-bottom:1px solid var(--base-border); 19 | height:1px; 20 | background:transparent; 21 | } 22 | 23 | // Tab button 24 | .item-PXvHYJ { 25 | margin: calc(var(--spacing) / 3) var(--spacing-double); 26 | font-weight: var(--font-weight-normal); 27 | font-size: var(--font-size); 28 | padding: var(--spacing); 29 | border-radius: var(--border-radius); 30 | color: var(--text-normal); 31 | line-height: normal; 32 | min-width: 165px; 33 | cursor: default; 34 | &:hover, 35 | &:active { 36 | background-color: transparent; 37 | } 38 | &.selected-3s45Ha { 39 | color: var(--white); 40 | background: rgb(var(--accent)); 41 | } 42 | &[style] { 43 | &:active, 44 | &:hover { 45 | background:transparent !important; 46 | color:rgb(var(--discord-blurple)) !important; 47 | } 48 | } 49 | &[style*="background-color: rgb(114, 137, 218)"] { 50 | background: rgb(var(--discord-blurple)) !important; 51 | &:active, 52 | &:hover { 53 | background:rgb(var(--discord-blurple)) !important; 54 | color:var(--white) !important; 55 | } 56 | } 57 | } 58 | 59 | // Socials 60 | .socialLinks-3jqNFy { 61 | padding: calc(var(--spacing) / 3) var(--spacing-double); 62 | margin-bottom: calc(var(--spacing) / 3); 63 | } 64 | 65 | // Info 66 | .info-1VyQPT { 67 | padding: calc(var(--spacing) / 3) var(--spacing-double); 68 | .colorMuted-HdFt4q:first-of-type:before { 69 | content: var(--slate-version); 70 | display: block; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /Slate/src/settings/import.scss: -------------------------------------------------------------------------------- 1 | @import 'container'; 2 | @import 'sidebar'; 3 | @import 'content'; 4 | @import 'settings-icons'; -------------------------------------------------------------------------------- /Slate/website-files/scripts.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector('.dropdown-menu'); 2 | const btn = document.querySelector('.dropdown-btn'); 3 | const body = document.body; 4 | 5 | // Theme switcher 6 | document.querySelector('#theme').addEventListener('click', () => { 7 | body.classList.toggle("theme-light"); 8 | body.classList.toggle("theme-dark"); 9 | }) 10 | 11 | // Dropdown 12 | btn.addEventListener('click', e => { 13 | menu.classList.toggle('visible'); 14 | btn.classList.toggle('dropdown-visible'); 15 | }) 16 | body.addEventListener('click', e => { 17 | if (!e.target.classList.contains('dropdown-btn') && !e.target.classList.contains('dropdown-menu')) { 18 | menu.classList.remove('visible'); 19 | btn.classList.remove('dropdown-visible'); 20 | } 21 | }) 22 | 23 | // Enlarge preview 24 | document.querySelector('.preview').addEventListener('click', () => { 25 | body.classList.toggle('preview-visible'); 26 | }) -------------------------------------------------------------------------------- /addons/bottomhsl.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/Addons/bottomhsl.css"); 2 | -------------------------------------------------------------------------------- /addons/readme.md: -------------------------------------------------------------------------------- 1 | ## How to use? 2 | Simply copy and paste the `@import url()` code below into your current theme file below the first `@import`. 3 | 4 | - - - 5 | 6 | [Old Windows Titlebar](https://i.imgur.com/absenMG.jpg) 7 | ```css 8 | @import url("https://gibbu.github.io/BetterDiscord-Themes/addons/windows-titlebar.css"); 9 | ``` 10 | 11 | - - - 12 | 13 | [Bottom Horizontal Server List](https://i.imgur.com/wc10gq7.jpg) - Requires: [Horizontal Server List](https://github.com/Gibbu/BetterDiscord-Themes/tree/master/HorizontalServerlist) 14 | ```css 15 | @import url("https://gibbu.github.io/BetterDiscord-Themes/addons/bottomhsl.css"); 16 | ``` -------------------------------------------------------------------------------- /addons/src/bottomhsl.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @name BottomHSL 3 | * @author Gibbu#1211 4 | * @version 1.0.0 5 | * @description Horizontal Server List bottom addon 6 | */ 7 | body #app-mount { 8 | .base-3dtUhz { 9 | top: 0 !important; 10 | bottom: var(--server-container) !important; 11 | } 12 | .wrapper-1Rf91z.guilds-1SWlCJ { 13 | top: unset !important; 14 | left: 100vw; 15 | bottom: 0 !important; 16 | transform-origin: bottom left; 17 | &.content-Pph8t6 { 18 | top: unset !important; 19 | bottom: var(--server-container) !important; 20 | &:not(.closed-j55_T-) + .base-3dtUhz { 21 | top: 0 !important; 22 | bottom: calc(var(--server-container) * 2) !important; 23 | } 24 | } 25 | [class*="pill"] { 26 | top: unset !important; 27 | bottom: calc(var(--server-size) / -1 + var(--server-size) / 2 - 8px) !important; 28 | span { 29 | border-radius: 4px 0 0 4px; 30 | } 31 | } 32 | } 33 | .listItemTooltip-CDcY8J { 34 | position: absolute; 35 | white-space: nowrap; 36 | top: calc(var(--server-size) / -1 - 30px) !important; 37 | margin-left: calc(var(--server-size) / -1 - 20px); 38 | .tooltipPointer-3ZfirK { 39 | transform: rotate(0) !important; 40 | top: unset !important; 41 | bottom: -10px !important; 42 | } 43 | } 44 | } 45 | html.platform-osx #app-mount .base-3dtUhz { 46 | top: 32px !important; 47 | } -------------------------------------------------------------------------------- /addons/src/windows-title.bar.scss: -------------------------------------------------------------------------------- 1 | .platform-win { 2 | .typeWindows-1za-n7 { 3 | height: 9px; 4 | margin-top: 0; 5 | position: absolute; 6 | top: 1px; 7 | left: 0; 8 | width: 100%; 9 | background: transparent; 10 | } 11 | .winButtonClose-1HsbF- { 12 | border-top-right-radius: var(--TB-tr-roundness); 13 | } 14 | .winButton-iRh8-Z { 15 | position: relative; 16 | top: calc(var(--TB-position-top, 0px) - 1px); 17 | right: var(--TB-position-right, 0px); 18 | height: var(--TB-height, 48px); 19 | width: var(--TB-width, 40px); 20 | &:not(.winButtonClose-1HsbF-):hover { 21 | background-color: rgba(255,255,255,0.1); 22 | } 23 | } 24 | .container-1r6BKw { 25 | padding-right: var(--TB-header-padding, 125px); 26 | } 27 | .wordmarkWindows-1v0lYD { 28 | display: none; 29 | } 30 | #app-mount.bd-detached-editor .winButton-iRh8-Z { 31 | right: 30%; 32 | } 33 | } -------------------------------------------------------------------------------- /addons/windows-titlebar.css: -------------------------------------------------------------------------------- 1 | @import url("https://discordstyles.github.io/Addons/windows-titlebar.css"); 2 | --------------------------------------------------------------------------------